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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/DataList/examples/DataList.md CHANGED
@@ -129,7 +129,6 @@ When a list item includes more than one block of content, it can be difficult fo
129
129
  <div class="pf-v6-c-data-list__check">
130
130
  <label
131
131
  class="pf-v6-c-check pf-m-standalone"
132
- id="data-list-checkboxes-actions-addl-cells-item-1&quot;"
133
132
  for="data-list-checkboxes-actions-addl-cells-item-1&quot;-input"
134
133
  >
135
134
  <input
@@ -163,63 +162,17 @@ When a list item includes more than one block of content, it can be difficult fo
163
162
  </div>
164
163
  <div class="pf-v6-c-data-list__item-action">
165
164
  <div class="pf-v6-c-data-list__action">
166
- <div class="pf-v6-c-dropdown">
167
- <button
168
- class="pf-v6-c-dropdown__toggle pf-m-plain"
169
- id="data-list-checkboxes-actions-addl-cells-item-1-dropdown-kebab-button"
170
- aria-expanded="false"
171
- type="button"
172
- aria-label="Actions"
173
- >
165
+ <button
166
+ class="pf-v6-c-menu-toggle pf-m-plain"
167
+ type="button"
168
+ aria-expanded="false"
169
+ aria-label="Menu toggle"
170
+ id="data-list-checkboxes-actions-addl-cells-item-1-menu-toggle"
171
+ >
172
+ <span class="pf-v6-c-menu-toggle__icon">
174
173
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
175
- </button>
176
- <ul
177
- class="pf-v6-c-dropdown__menu pf-m-align-right"
178
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-1-dropdown-kebab-button"
179
- hidden
180
- role="menu"
181
- >
182
- <li role="none">
183
- <a
184
- class="pf-v6-c-dropdown__menu-item"
185
- role="menuitem"
186
- href="#"
187
- >Link</a>
188
- </li>
189
- <li role="none">
190
- <button
191
- class="pf-v6-c-dropdown__menu-item"
192
- role="menuitem"
193
- type="button"
194
- >Action</button>
195
- </li>
196
- <li role="none">
197
- <a
198
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
199
- role="menuitem"
200
- href="#"
201
- aria-disabled="true"
202
- tabindex="-1"
203
- >Disabled link</a>
204
- </li>
205
- <li role="none">
206
- <button
207
- class="pf-v6-c-dropdown__menu-item"
208
- role="menuitem"
209
- type="button"
210
- disabled
211
- >Disabled action</button>
212
- </li>
213
- <li class="pf-v6-c-divider" role="separator"></li>
214
- <li role="none">
215
- <a
216
- class="pf-v6-c-dropdown__menu-item"
217
- role="menuitem"
218
- href="#"
219
- >Separated link</a>
220
- </li>
221
- </ul>
222
- </div>
174
+ </span>
175
+ </button>
223
176
  </div>
224
177
  </div>
225
178
  </div>
@@ -234,7 +187,6 @@ When a list item includes more than one block of content, it can be difficult fo
234
187
  <div class="pf-v6-c-data-list__check">
235
188
  <label
236
189
  class="pf-v6-c-check pf-m-standalone"
237
- id="data-list-checkboxes-actions-addl-cells-item-2&quot;"
238
190
  for="data-list-checkboxes-actions-addl-cells-item-2&quot;-input"
239
191
  >
240
192
  <input
@@ -259,70 +211,28 @@ When a list item includes more than one block of content, it can be difficult fo
259
211
  </div>
260
212
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
261
213
  <div class="pf-v6-c-data-list__action">
262
- <div class="pf-v6-c-dropdown">
263
- <button
264
- class="pf-v6-c-dropdown__toggle pf-m-plain"
265
- id="data-list-checkboxes-actions-addl-cells-item-2-dropdown-kebab-button"
266
- aria-expanded="false"
267
- type="button"
268
- aria-label="Actions"
269
- >
214
+ <button
215
+ class="pf-v6-c-menu-toggle pf-m-plain"
216
+ type="button"
217
+ aria-expanded="false"
218
+ aria-label="Menu toggle"
219
+ id="data-list-checkboxes-actions-addl-cells-item-2-menu-toggle"
220
+ >
221
+ <span class="pf-v6-c-menu-toggle__icon">
270
222
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
271
- </button>
272
- <ul
273
- class="pf-v6-c-dropdown__menu pf-m-align-right"
274
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-2-dropdown-kebab-button"
275
- hidden
276
- role="menu"
277
- >
278
- <li role="none">
279
- <a
280
- class="pf-v6-c-dropdown__menu-item"
281
- role="menuitem"
282
- href="#"
283
- >Link</a>
284
- </li>
285
- <li role="none">
286
- <button
287
- class="pf-v6-c-dropdown__menu-item"
288
- role="menuitem"
289
- type="button"
290
- >Action</button>
291
- </li>
292
- <li role="none">
293
- <a
294
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
295
- role="menuitem"
296
- href="#"
297
- aria-disabled="true"
298
- tabindex="-1"
299
- >Disabled link</a>
300
- </li>
301
- <li role="none">
302
- <button
303
- class="pf-v6-c-dropdown__menu-item"
304
- role="menuitem"
305
- type="button"
306
- disabled
307
- >Disabled action</button>
308
- </li>
309
- <li class="pf-v6-c-divider" role="separator"></li>
310
- <li role="none">
311
- <a
312
- class="pf-v6-c-dropdown__menu-item"
313
- role="menuitem"
314
- href="#"
315
- >Separated link</a>
316
- </li>
317
- </ul>
318
- </div>
223
+ </span>
224
+ </button>
319
225
  </div>
320
226
  </div>
321
227
  <div
322
228
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
323
229
  >
324
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary</button>
325
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
230
+ <button class="pf-v6-c-button pf-m-primary" type="button">
231
+ <span class="pf-v6-c-button__text">Primary</span>
232
+ </button>
233
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
234
+ <span class="pf-v6-c-button__text">Secondary</span>
235
+ </button>
326
236
  </div>
327
237
  </div>
328
238
  </li>
@@ -336,7 +246,6 @@ When a list item includes more than one block of content, it can be difficult fo
336
246
  <div class="pf-v6-c-data-list__check">
337
247
  <label
338
248
  class="pf-v6-c-check pf-m-standalone"
339
- id="data-list-checkboxes-actions-addl-cells-item-3&quot;"
340
249
  for="data-list-checkboxes-actions-addl-cells-item-3&quot;-input"
341
250
  >
342
251
  <input
@@ -361,72 +270,34 @@ When a list item includes more than one block of content, it can be difficult fo
361
270
  </div>
362
271
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
363
272
  <div class="pf-v6-c-data-list__action">
364
- <div class="pf-v6-c-dropdown">
365
- <button
366
- class="pf-v6-c-dropdown__toggle pf-m-plain"
367
- id="data-list-checkboxes-actions-addl-cells-item-3-dropdown-kebab-button"
368
- aria-expanded="false"
369
- type="button"
370
- aria-label="Actions"
371
- >
273
+ <button
274
+ class="pf-v6-c-menu-toggle pf-m-plain"
275
+ type="button"
276
+ aria-expanded="false"
277
+ aria-label="Menu toggle"
278
+ id="data-list-checkboxes-actions-addl-cells-item-3-menu-toggle"
279
+ >
280
+ <span class="pf-v6-c-menu-toggle__icon">
372
281
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
373
- </button>
374
- <ul
375
- class="pf-v6-c-dropdown__menu pf-m-align-right"
376
- aria-labelledby="data-list-checkboxes-actions-addl-cells-item-3-dropdown-kebab-button"
377
- hidden
378
- role="menu"
379
- >
380
- <li role="none">
381
- <a
382
- class="pf-v6-c-dropdown__menu-item"
383
- role="menuitem"
384
- href="#"
385
- >Link</a>
386
- </li>
387
- <li role="none">
388
- <button
389
- class="pf-v6-c-dropdown__menu-item"
390
- role="menuitem"
391
- type="button"
392
- >Action</button>
393
- </li>
394
- <li role="none">
395
- <a
396
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
397
- role="menuitem"
398
- href="#"
399
- aria-disabled="true"
400
- tabindex="-1"
401
- >Disabled link</a>
402
- </li>
403
- <li role="none">
404
- <button
405
- class="pf-v6-c-dropdown__menu-item"
406
- role="menuitem"
407
- type="button"
408
- disabled
409
- >Disabled action</button>
410
- </li>
411
- <li class="pf-v6-c-divider" role="separator"></li>
412
- <li role="none">
413
- <a
414
- class="pf-v6-c-dropdown__menu-item"
415
- role="menuitem"
416
- href="#"
417
- >Separated link</a>
418
- </li>
419
- </ul>
420
- </div>
282
+ </span>
283
+ </button>
421
284
  </div>
422
285
  </div>
423
286
  <div
424
287
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
425
288
  >
426
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary</button>
427
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
428
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
429
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
289
+ <button class="pf-v6-c-button pf-m-primary" type="button">
290
+ <span class="pf-v6-c-button__text">Primary</span>
291
+ </button>
292
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
293
+ <span class="pf-v6-c-button__text">Secondary</span>
294
+ </button>
295
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
296
+ <span class="pf-v6-c-button__text">Secondary</span>
297
+ </button>
298
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
299
+ <span class="pf-v6-c-button__text">Secondary</span>
300
+ </button>
430
301
  </div>
431
302
  </div>
432
303
  </li>
@@ -479,9 +350,11 @@ When a list item includes more than one block of content, it can be difficult fo
479
350
  aria-expanded="true"
480
351
  aria-controls="data-list-expandable-content1"
481
352
  >
482
- <div class="pf-v6-c-data-list__toggle-icon">
483
- <i class="fas fa-angle-right" aria-hidden="true"></i>
484
- </div>
353
+ <span class="pf-v6-c-button__icon pf-m-start">
354
+ <div class="pf-v6-c-data-list__toggle-icon">
355
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
356
+ </div>
357
+ </span>
485
358
  </button>
486
359
  </div>
487
360
  </div>
@@ -503,63 +376,17 @@ When a list item includes more than one block of content, it can be difficult fo
503
376
  </div>
504
377
  <div class="pf-v6-c-data-list__item-action">
505
378
  <div class="pf-v6-c-data-list__action">
506
- <div class="pf-v6-c-dropdown">
507
- <button
508
- class="pf-v6-c-dropdown__toggle pf-m-plain"
509
- id="data-list-expandable-item-1-dropdown-kebab-button"
510
- aria-expanded="false"
511
- type="button"
512
- aria-label="Actions"
513
- >
379
+ <button
380
+ class="pf-v6-c-menu-toggle pf-m-plain"
381
+ type="button"
382
+ aria-expanded="false"
383
+ aria-label="Menu toggle"
384
+ id="data-list-expandable-item-1-menu-toggle"
385
+ >
386
+ <span class="pf-v6-c-menu-toggle__icon">
514
387
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
515
- </button>
516
- <ul
517
- class="pf-v6-c-dropdown__menu pf-m-align-right"
518
- aria-labelledby="data-list-expandable-item-1-dropdown-kebab-button"
519
- hidden
520
- role="menu"
521
- >
522
- <li role="none">
523
- <a
524
- class="pf-v6-c-dropdown__menu-item"
525
- role="menuitem"
526
- href="#"
527
- >Link</a>
528
- </li>
529
- <li role="none">
530
- <button
531
- class="pf-v6-c-dropdown__menu-item"
532
- role="menuitem"
533
- type="button"
534
- >Action</button>
535
- </li>
536
- <li role="none">
537
- <a
538
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
539
- role="menuitem"
540
- href="#"
541
- aria-disabled="true"
542
- tabindex="-1"
543
- >Disabled link</a>
544
- </li>
545
- <li role="none">
546
- <button
547
- class="pf-v6-c-dropdown__menu-item"
548
- role="menuitem"
549
- type="button"
550
- disabled
551
- >Disabled action</button>
552
- </li>
553
- <li class="pf-v6-c-divider" role="separator"></li>
554
- <li role="none">
555
- <a
556
- class="pf-v6-c-dropdown__menu-item"
557
- role="menuitem"
558
- href="#"
559
- >Separated link</a>
560
- </li>
561
- </ul>
562
- </div>
388
+ </span>
389
+ </button>
563
390
  </div>
564
391
  </div>
565
392
  </div>
@@ -590,9 +417,11 @@ When a list item includes more than one block of content, it can be difficult fo
590
417
  aria-expanded="false"
591
418
  aria-controls="data-list-expandable-content2"
592
419
  >
593
- <div class="pf-v6-c-data-list__toggle-icon">
594
- <i class="fas fa-angle-right" aria-hidden="true"></i>
595
- </div>
420
+ <span class="pf-v6-c-button__icon pf-m-start">
421
+ <div class="pf-v6-c-data-list__toggle-icon">
422
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
423
+ </div>
424
+ </span>
596
425
  </button>
597
426
  </div>
598
427
  </div>
@@ -610,63 +439,17 @@ When a list item includes more than one block of content, it can be difficult fo
610
439
  </div>
611
440
  <div class="pf-v6-c-data-list__item-action">
612
441
  <div class="pf-v6-c-data-list__action">
613
- <div class="pf-v6-c-dropdown">
614
- <button
615
- class="pf-v6-c-dropdown__toggle pf-m-plain"
616
- id="data-list-expandable-item-2-dropdown-kebab-button"
617
- aria-expanded="false"
618
- type="button"
619
- aria-label="Actions"
620
- >
442
+ <button
443
+ class="pf-v6-c-menu-toggle pf-m-plain"
444
+ type="button"
445
+ aria-expanded="false"
446
+ aria-label="Menu toggle"
447
+ id="data-list-expandable-item-2-menu-toggle"
448
+ >
449
+ <span class="pf-v6-c-menu-toggle__icon">
621
450
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
622
- </button>
623
- <ul
624
- class="pf-v6-c-dropdown__menu pf-m-align-right"
625
- aria-labelledby="data-list-expandable-item-2-dropdown-kebab-button"
626
- hidden
627
- role="menu"
628
- >
629
- <li role="none">
630
- <a
631
- class="pf-v6-c-dropdown__menu-item"
632
- role="menuitem"
633
- href="#"
634
- >Link</a>
635
- </li>
636
- <li role="none">
637
- <button
638
- class="pf-v6-c-dropdown__menu-item"
639
- role="menuitem"
640
- type="button"
641
- >Action</button>
642
- </li>
643
- <li role="none">
644
- <a
645
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
646
- role="menuitem"
647
- href="#"
648
- aria-disabled="true"
649
- tabindex="-1"
650
- >Disabled link</a>
651
- </li>
652
- <li role="none">
653
- <button
654
- class="pf-v6-c-dropdown__menu-item"
655
- role="menuitem"
656
- type="button"
657
- disabled
658
- >Disabled action</button>
659
- </li>
660
- <li class="pf-v6-c-divider" role="separator"></li>
661
- <li role="none">
662
- <a
663
- class="pf-v6-c-dropdown__menu-item"
664
- role="menuitem"
665
- href="#"
666
- >Separated link</a>
667
- </li>
668
- </ul>
669
- </div>
451
+ </span>
452
+ </button>
670
453
  </div>
671
454
  </div>
672
455
  </div>
@@ -698,9 +481,11 @@ When a list item includes more than one block of content, it can be difficult fo
698
481
  aria-expanded="true"
699
482
  aria-controls="data-list-expandable-content3"
700
483
  >
701
- <div class="pf-v6-c-data-list__toggle-icon">
702
- <i class="fas fa-angle-right" aria-hidden="true"></i>
703
- </div>
484
+ <span class="pf-v6-c-button__icon pf-m-start">
485
+ <div class="pf-v6-c-data-list__toggle-icon">
486
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
487
+ </div>
488
+ </span>
704
489
  </button>
705
490
  </div>
706
491
  </div>
@@ -721,63 +506,17 @@ When a list item includes more than one block of content, it can be difficult fo
721
506
  </div>
722
507
  <div class="pf-v6-c-data-list__item-action">
723
508
  <div class="pf-v6-c-data-list__action">
724
- <div class="pf-v6-c-dropdown">
725
- <button
726
- class="pf-v6-c-dropdown__toggle pf-m-plain"
727
- id="data-list-expandable-item-3-dropdown-kebab-button"
728
- aria-expanded="false"
729
- type="button"
730
- aria-label="Actions"
731
- >
509
+ <button
510
+ class="pf-v6-c-menu-toggle pf-m-plain"
511
+ type="button"
512
+ aria-expanded="false"
513
+ aria-label="Menu toggle"
514
+ id="data-list-expandable-item-3-menu-toggle"
515
+ >
516
+ <span class="pf-v6-c-menu-toggle__icon">
732
517
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
733
- </button>
734
- <ul
735
- class="pf-v6-c-dropdown__menu pf-m-align-right"
736
- aria-labelledby="data-list-expandable-item-3-dropdown-kebab-button"
737
- hidden
738
- role="menu"
739
- >
740
- <li role="none">
741
- <a
742
- class="pf-v6-c-dropdown__menu-item"
743
- role="menuitem"
744
- href="#"
745
- >Link</a>
746
- </li>
747
- <li role="none">
748
- <button
749
- class="pf-v6-c-dropdown__menu-item"
750
- role="menuitem"
751
- type="button"
752
- >Action</button>
753
- </li>
754
- <li role="none">
755
- <a
756
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
757
- role="menuitem"
758
- href="#"
759
- aria-disabled="true"
760
- tabindex="-1"
761
- >Disabled link</a>
762
- </li>
763
- <li role="none">
764
- <button
765
- class="pf-v6-c-dropdown__menu-item"
766
- role="menuitem"
767
- type="button"
768
- disabled
769
- >Disabled action</button>
770
- </li>
771
- <li class="pf-v6-c-divider" role="separator"></li>
772
- <li role="none">
773
- <a
774
- class="pf-v6-c-dropdown__menu-item"
775
- role="menuitem"
776
- href="#"
777
- >Separated link</a>
778
- </li>
779
- </ul>
780
- </div>
518
+ </span>
519
+ </button>
781
520
  </div>
782
521
  </div>
783
522
  </div>
@@ -820,9 +559,11 @@ When a list item includes more than one block of content, it can be difficult fo
820
559
  aria-expanded="true"
821
560
  aria-controls="data-list-expandable-compact-content1"
822
561
  >
823
- <div class="pf-v6-c-data-list__toggle-icon">
824
- <i class="fas fa-angle-right" aria-hidden="true"></i>
825
- </div>
562
+ <span class="pf-v6-c-button__icon pf-m-start">
563
+ <div class="pf-v6-c-data-list__toggle-icon">
564
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
565
+ </div>
566
+ </span>
826
567
  </button>
827
568
  </div>
828
569
  </div>
@@ -844,63 +585,17 @@ When a list item includes more than one block of content, it can be difficult fo
844
585
  </div>
845
586
  <div class="pf-v6-c-data-list__item-action">
846
587
  <div class="pf-v6-c-data-list__action">
847
- <div class="pf-v6-c-dropdown">
848
- <button
849
- class="pf-v6-c-dropdown__toggle pf-m-plain"
850
- id="data-list-expandable-compact-item-1-dropdown-kebab-button"
851
- aria-expanded="false"
852
- type="button"
853
- aria-label="Actions"
854
- >
588
+ <button
589
+ class="pf-v6-c-menu-toggle pf-m-plain"
590
+ type="button"
591
+ aria-expanded="false"
592
+ aria-label="Menu toggle"
593
+ id="data-list-expandable-compact-item-1-menu-toggle"
594
+ >
595
+ <span class="pf-v6-c-menu-toggle__icon">
855
596
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
856
- </button>
857
- <ul
858
- class="pf-v6-c-dropdown__menu pf-m-align-right"
859
- aria-labelledby="data-list-expandable-compact-item-1-dropdown-kebab-button"
860
- hidden
861
- role="menu"
862
- >
863
- <li role="none">
864
- <a
865
- class="pf-v6-c-dropdown__menu-item"
866
- role="menuitem"
867
- href="#"
868
- >Link</a>
869
- </li>
870
- <li role="none">
871
- <button
872
- class="pf-v6-c-dropdown__menu-item"
873
- role="menuitem"
874
- type="button"
875
- >Action</button>
876
- </li>
877
- <li role="none">
878
- <a
879
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
880
- role="menuitem"
881
- href="#"
882
- aria-disabled="true"
883
- tabindex="-1"
884
- >Disabled link</a>
885
- </li>
886
- <li role="none">
887
- <button
888
- class="pf-v6-c-dropdown__menu-item"
889
- role="menuitem"
890
- type="button"
891
- disabled
892
- >Disabled action</button>
893
- </li>
894
- <li class="pf-v6-c-divider" role="separator"></li>
895
- <li role="none">
896
- <a
897
- class="pf-v6-c-dropdown__menu-item"
898
- role="menuitem"
899
- href="#"
900
- >Separated link</a>
901
- </li>
902
- </ul>
903
- </div>
597
+ </span>
598
+ </button>
904
599
  </div>
905
600
  </div>
906
601
  </div>
@@ -931,9 +626,11 @@ When a list item includes more than one block of content, it can be difficult fo
931
626
  aria-expanded="false"
932
627
  aria-controls="data-list-expandable-compact-content2"
933
628
  >
934
- <div class="pf-v6-c-data-list__toggle-icon">
935
- <i class="fas fa-angle-right" aria-hidden="true"></i>
936
- </div>
629
+ <span class="pf-v6-c-button__icon pf-m-start">
630
+ <div class="pf-v6-c-data-list__toggle-icon">
631
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
632
+ </div>
633
+ </span>
937
634
  </button>
938
635
  </div>
939
636
  </div>
@@ -954,63 +651,17 @@ When a list item includes more than one block of content, it can be difficult fo
954
651
  </div>
955
652
  <div class="pf-v6-c-data-list__item-action">
956
653
  <div class="pf-v6-c-data-list__action">
957
- <div class="pf-v6-c-dropdown">
958
- <button
959
- class="pf-v6-c-dropdown__toggle pf-m-plain"
960
- id="data-list-expandable-compact-item-2-dropdown-kebab-button"
961
- aria-expanded="false"
962
- type="button"
963
- aria-label="Actions"
964
- >
654
+ <button
655
+ class="pf-v6-c-menu-toggle pf-m-plain"
656
+ type="button"
657
+ aria-expanded="false"
658
+ aria-label="Menu toggle"
659
+ id="data-list-expandable-compact-item-2-menu-toggle"
660
+ >
661
+ <span class="pf-v6-c-menu-toggle__icon">
965
662
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
966
- </button>
967
- <ul
968
- class="pf-v6-c-dropdown__menu pf-m-align-right"
969
- aria-labelledby="data-list-expandable-compact-item-2-dropdown-kebab-button"
970
- hidden
971
- role="menu"
972
- >
973
- <li role="none">
974
- <a
975
- class="pf-v6-c-dropdown__menu-item"
976
- role="menuitem"
977
- href="#"
978
- >Link</a>
979
- </li>
980
- <li role="none">
981
- <button
982
- class="pf-v6-c-dropdown__menu-item"
983
- role="menuitem"
984
- type="button"
985
- >Action</button>
986
- </li>
987
- <li role="none">
988
- <a
989
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
990
- role="menuitem"
991
- href="#"
992
- aria-disabled="true"
993
- tabindex="-1"
994
- >Disabled link</a>
995
- </li>
996
- <li role="none">
997
- <button
998
- class="pf-v6-c-dropdown__menu-item"
999
- role="menuitem"
1000
- type="button"
1001
- disabled
1002
- >Disabled action</button>
1003
- </li>
1004
- <li class="pf-v6-c-divider" role="separator"></li>
1005
- <li role="none">
1006
- <a
1007
- class="pf-v6-c-dropdown__menu-item"
1008
- role="menuitem"
1009
- href="#"
1010
- >Separated link</a>
1011
- </li>
1012
- </ul>
1013
- </div>
663
+ </span>
664
+ </button>
1014
665
  </div>
1015
666
  </div>
1016
667
  </div>
@@ -1042,9 +693,11 @@ When a list item includes more than one block of content, it can be difficult fo
1042
693
  aria-expanded="true"
1043
694
  aria-controls="data-list-expandable-compact-content3"
1044
695
  >
1045
- <div class="pf-v6-c-data-list__toggle-icon">
1046
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1047
- </div>
696
+ <span class="pf-v6-c-button__icon pf-m-start">
697
+ <div class="pf-v6-c-data-list__toggle-icon">
698
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
699
+ </div>
700
+ </span>
1048
701
  </button>
1049
702
  </div>
1050
703
  </div>
@@ -1065,63 +718,17 @@ When a list item includes more than one block of content, it can be difficult fo
1065
718
  </div>
1066
719
  <div class="pf-v6-c-data-list__item-action">
1067
720
  <div class="pf-v6-c-data-list__action">
1068
- <div class="pf-v6-c-dropdown">
1069
- <button
1070
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1071
- id="data-list-expandable-compact-item-3-dropdown-kebab-button"
1072
- aria-expanded="false"
1073
- type="button"
1074
- aria-label="Actions"
1075
- >
721
+ <button
722
+ class="pf-v6-c-menu-toggle pf-m-plain"
723
+ type="button"
724
+ aria-expanded="false"
725
+ aria-label="Menu toggle"
726
+ id="data-list-expandable-compact-item-3-menu-toggle"
727
+ >
728
+ <span class="pf-v6-c-menu-toggle__icon">
1076
729
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1077
- </button>
1078
- <ul
1079
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1080
- aria-labelledby="data-list-expandable-compact-item-3-dropdown-kebab-button"
1081
- hidden
1082
- role="menu"
1083
- >
1084
- <li role="none">
1085
- <a
1086
- class="pf-v6-c-dropdown__menu-item"
1087
- role="menuitem"
1088
- href="#"
1089
- >Link</a>
1090
- </li>
1091
- <li role="none">
1092
- <button
1093
- class="pf-v6-c-dropdown__menu-item"
1094
- role="menuitem"
1095
- type="button"
1096
- >Action</button>
1097
- </li>
1098
- <li role="none">
1099
- <a
1100
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1101
- role="menuitem"
1102
- href="#"
1103
- aria-disabled="true"
1104
- tabindex="-1"
1105
- >Disabled link</a>
1106
- </li>
1107
- <li role="none">
1108
- <button
1109
- class="pf-v6-c-dropdown__menu-item"
1110
- role="menuitem"
1111
- type="button"
1112
- disabled
1113
- >Disabled action</button>
1114
- </li>
1115
- <li class="pf-v6-c-divider" role="separator"></li>
1116
- <li role="none">
1117
- <a
1118
- class="pf-v6-c-dropdown__menu-item"
1119
- role="menuitem"
1120
- href="#"
1121
- >Separated link</a>
1122
- </li>
1123
- </ul>
1124
- </div>
730
+ </span>
731
+ </button>
1125
732
  </div>
1126
733
  </div>
1127
734
  </div>
@@ -1164,9 +771,11 @@ When a list item includes more than one block of content, it can be difficult fo
1164
771
  aria-expanded="true"
1165
772
  aria-controls="data-list-expandable-nested-content1"
1166
773
  >
1167
- <div class="pf-v6-c-data-list__toggle-icon">
1168
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1169
- </div>
774
+ <span class="pf-v6-c-button__icon pf-m-start">
775
+ <div class="pf-v6-c-data-list__toggle-icon">
776
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
777
+ </div>
778
+ </span>
1170
779
  </button>
1171
780
  </div>
1172
781
  </div>
@@ -1188,63 +797,17 @@ When a list item includes more than one block of content, it can be difficult fo
1188
797
  </div>
1189
798
  <div class="pf-v6-c-data-list__item-action">
1190
799
  <div class="pf-v6-c-data-list__action">
1191
- <div class="pf-v6-c-dropdown">
1192
- <button
1193
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1194
- id="data-list-expandable-nested-item-1-dropdown-kebab-button"
1195
- aria-expanded="false"
1196
- type="button"
1197
- aria-label="Actions"
1198
- >
800
+ <button
801
+ class="pf-v6-c-menu-toggle pf-m-plain"
802
+ type="button"
803
+ aria-expanded="false"
804
+ aria-label="Menu toggle"
805
+ id="data-list-expandable-nested-item-1-menu-toggle"
806
+ >
807
+ <span class="pf-v6-c-menu-toggle__icon">
1199
808
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1200
- </button>
1201
- <ul
1202
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1203
- aria-labelledby="data-list-expandable-nested-item-1-dropdown-kebab-button"
1204
- hidden
1205
- role="menu"
1206
- >
1207
- <li role="none">
1208
- <a
1209
- class="pf-v6-c-dropdown__menu-item"
1210
- role="menuitem"
1211
- href="#"
1212
- >Link</a>
1213
- </li>
1214
- <li role="none">
1215
- <button
1216
- class="pf-v6-c-dropdown__menu-item"
1217
- role="menuitem"
1218
- type="button"
1219
- >Action</button>
1220
- </li>
1221
- <li role="none">
1222
- <a
1223
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1224
- role="menuitem"
1225
- href="#"
1226
- aria-disabled="true"
1227
- tabindex="-1"
1228
- >Disabled link</a>
1229
- </li>
1230
- <li role="none">
1231
- <button
1232
- class="pf-v6-c-dropdown__menu-item"
1233
- role="menuitem"
1234
- type="button"
1235
- disabled
1236
- >Disabled action</button>
1237
- </li>
1238
- <li class="pf-v6-c-divider" role="separator"></li>
1239
- <li role="none">
1240
- <a
1241
- class="pf-v6-c-dropdown__menu-item"
1242
- role="menuitem"
1243
- href="#"
1244
- >Separated link</a>
1245
- </li>
1246
- </ul>
1247
- </div>
809
+ </span>
810
+ </button>
1248
811
  </div>
1249
812
  </div>
1250
813
  </div>
@@ -1276,9 +839,11 @@ When a list item includes more than one block of content, it can be difficult fo
1276
839
  aria-expanded="true"
1277
840
  aria-controls="data-list-expandable-nested-nested-content1"
1278
841
  >
1279
- <div class="pf-v6-c-data-list__toggle-icon">
1280
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1281
- </div>
842
+ <span class="pf-v6-c-button__icon pf-m-start">
843
+ <div class="pf-v6-c-data-list__toggle-icon">
844
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
845
+ </div>
846
+ </span>
1282
847
  </button>
1283
848
  </div>
1284
849
  </div>
@@ -1317,9 +882,11 @@ When a list item includes more than one block of content, it can be difficult fo
1317
882
  aria-expanded="false"
1318
883
  aria-controls="data-list-expandable-nested-nested-content2"
1319
884
  >
1320
- <div class="pf-v6-c-data-list__toggle-icon">
1321
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1322
- </div>
885
+ <span class="pf-v6-c-button__icon pf-m-start">
886
+ <div class="pf-v6-c-data-list__toggle-icon">
887
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
888
+ </div>
889
+ </span>
1323
890
  </button>
1324
891
  </div>
1325
892
  </div>
@@ -1359,9 +926,11 @@ When a list item includes more than one block of content, it can be difficult fo
1359
926
  aria-expanded="true"
1360
927
  aria-controls="data-list-expandable-nested-nested-content3"
1361
928
  >
1362
- <div class="pf-v6-c-data-list__toggle-icon">
1363
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1364
- </div>
929
+ <span class="pf-v6-c-button__icon pf-m-start">
930
+ <div class="pf-v6-c-data-list__toggle-icon">
931
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
932
+ </div>
933
+ </span>
1365
934
  </button>
1366
935
  </div>
1367
936
  </div>
@@ -1404,9 +973,11 @@ When a list item includes more than one block of content, it can be difficult fo
1404
973
  aria-expanded="false"
1405
974
  aria-controls="data-list-expandable-nested-content2"
1406
975
  >
1407
- <div class="pf-v6-c-data-list__toggle-icon">
1408
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1409
- </div>
976
+ <span class="pf-v6-c-button__icon pf-m-start">
977
+ <div class="pf-v6-c-data-list__toggle-icon">
978
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
979
+ </div>
980
+ </span>
1410
981
  </button>
1411
982
  </div>
1412
983
  </div>
@@ -1424,63 +995,17 @@ When a list item includes more than one block of content, it can be difficult fo
1424
995
  </div>
1425
996
  <div class="pf-v6-c-data-list__item-action">
1426
997
  <div class="pf-v6-c-data-list__action">
1427
- <div class="pf-v6-c-dropdown">
1428
- <button
1429
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1430
- id="data-list-expandable-nested-item-2-dropdown-kebab-button"
1431
- aria-expanded="false"
1432
- type="button"
1433
- aria-label="Actions"
1434
- >
998
+ <button
999
+ class="pf-v6-c-menu-toggle pf-m-plain"
1000
+ type="button"
1001
+ aria-expanded="false"
1002
+ aria-label="Menu toggle"
1003
+ id="data-list-expandable-nested-item-2-menu-toggle"
1004
+ >
1005
+ <span class="pf-v6-c-menu-toggle__icon">
1435
1006
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1436
- </button>
1437
- <ul
1438
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1439
- aria-labelledby="data-list-expandable-nested-item-2-dropdown-kebab-button"
1440
- hidden
1441
- role="menu"
1442
- >
1443
- <li role="none">
1444
- <a
1445
- class="pf-v6-c-dropdown__menu-item"
1446
- role="menuitem"
1447
- href="#"
1448
- >Link</a>
1449
- </li>
1450
- <li role="none">
1451
- <button
1452
- class="pf-v6-c-dropdown__menu-item"
1453
- role="menuitem"
1454
- type="button"
1455
- >Action</button>
1456
- </li>
1457
- <li role="none">
1458
- <a
1459
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1460
- role="menuitem"
1461
- href="#"
1462
- aria-disabled="true"
1463
- tabindex="-1"
1464
- >Disabled link</a>
1465
- </li>
1466
- <li role="none">
1467
- <button
1468
- class="pf-v6-c-dropdown__menu-item"
1469
- role="menuitem"
1470
- type="button"
1471
- disabled
1472
- >Disabled action</button>
1473
- </li>
1474
- <li class="pf-v6-c-divider" role="separator"></li>
1475
- <li role="none">
1476
- <a
1477
- class="pf-v6-c-dropdown__menu-item"
1478
- role="menuitem"
1479
- href="#"
1480
- >Separated link</a>
1481
- </li>
1482
- </ul>
1483
- </div>
1007
+ </span>
1008
+ </button>
1484
1009
  </div>
1485
1010
  </div>
1486
1011
  </div>
@@ -1512,9 +1037,11 @@ When a list item includes more than one block of content, it can be difficult fo
1512
1037
  aria-expanded="true"
1513
1038
  aria-controls="data-list-expandable-nested-content3"
1514
1039
  >
1515
- <div class="pf-v6-c-data-list__toggle-icon">
1516
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1517
- </div>
1040
+ <span class="pf-v6-c-button__icon pf-m-start">
1041
+ <div class="pf-v6-c-data-list__toggle-icon">
1042
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1043
+ </div>
1044
+ </span>
1518
1045
  </button>
1519
1046
  </div>
1520
1047
  </div>
@@ -1535,63 +1062,17 @@ When a list item includes more than one block of content, it can be difficult fo
1535
1062
  </div>
1536
1063
  <div class="pf-v6-c-data-list__item-action">
1537
1064
  <div class="pf-v6-c-data-list__action">
1538
- <div class="pf-v6-c-dropdown">
1539
- <button
1540
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1541
- id="data-list-expandable-nested-item-3-dropdown-kebab-button"
1542
- aria-expanded="false"
1543
- type="button"
1544
- aria-label="Actions"
1545
- >
1065
+ <button
1066
+ class="pf-v6-c-menu-toggle pf-m-plain"
1067
+ type="button"
1068
+ aria-expanded="false"
1069
+ aria-label="Menu toggle"
1070
+ id="data-list-expandable-nested-item-3-menu-toggle"
1071
+ >
1072
+ <span class="pf-v6-c-menu-toggle__icon">
1546
1073
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1547
- </button>
1548
- <ul
1549
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1550
- aria-labelledby="data-list-expandable-nested-item-3-dropdown-kebab-button"
1551
- hidden
1552
- role="menu"
1553
- >
1554
- <li role="none">
1555
- <a
1556
- class="pf-v6-c-dropdown__menu-item"
1557
- role="menuitem"
1558
- href="#"
1559
- >Link</a>
1560
- </li>
1561
- <li role="none">
1562
- <button
1563
- class="pf-v6-c-dropdown__menu-item"
1564
- role="menuitem"
1565
- type="button"
1566
- >Action</button>
1567
- </li>
1568
- <li role="none">
1569
- <a
1570
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1571
- role="menuitem"
1572
- href="#"
1573
- aria-disabled="true"
1574
- tabindex="-1"
1575
- >Disabled link</a>
1576
- </li>
1577
- <li role="none">
1578
- <button
1579
- class="pf-v6-c-dropdown__menu-item"
1580
- role="menuitem"
1581
- type="button"
1582
- disabled
1583
- >Disabled action</button>
1584
- </li>
1585
- <li class="pf-v6-c-divider" role="separator"></li>
1586
- <li role="none">
1587
- <a
1588
- class="pf-v6-c-dropdown__menu-item"
1589
- role="menuitem"
1590
- href="#"
1591
- >Separated link</a>
1592
- </li>
1593
- </ul>
1594
- </div>
1074
+ </span>
1075
+ </button>
1595
1076
  </div>
1596
1077
  </div>
1597
1078
  </div>
@@ -1627,7 +1108,6 @@ When a list item includes more than one block of content, it can be difficult fo
1627
1108
  <div class="pf-v6-c-data-list__check">
1628
1109
  <label
1629
1110
  class="pf-v6-c-check pf-m-standalone"
1630
- id="data-list-compact-item-1&quot;"
1631
1111
  for="data-list-compact-item-1&quot;-input"
1632
1112
  >
1633
1113
  <input
@@ -1659,63 +1139,17 @@ When a list item includes more than one block of content, it can be difficult fo
1659
1139
  </div>
1660
1140
  <div class="pf-v6-c-data-list__item-action">
1661
1141
  <div class="pf-v6-c-data-list__action">
1662
- <div class="pf-v6-c-dropdown">
1663
- <button
1664
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1665
- id="data-list-compact-item-1-dropdown-kebab-button"
1666
- aria-expanded="false"
1667
- type="button"
1668
- aria-label="Actions"
1669
- >
1142
+ <button
1143
+ class="pf-v6-c-menu-toggle pf-m-plain"
1144
+ type="button"
1145
+ aria-expanded="false"
1146
+ aria-label="Menu toggle"
1147
+ id="data-list-compact-item-1-menu-toggle"
1148
+ >
1149
+ <span class="pf-v6-c-menu-toggle__icon">
1670
1150
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1671
- </button>
1672
- <ul
1673
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1674
- aria-labelledby="data-list-compact-item-1-dropdown-kebab-button"
1675
- hidden
1676
- role="menu"
1677
- >
1678
- <li role="none">
1679
- <a
1680
- class="pf-v6-c-dropdown__menu-item"
1681
- role="menuitem"
1682
- href="#"
1683
- >Link</a>
1684
- </li>
1685
- <li role="none">
1686
- <button
1687
- class="pf-v6-c-dropdown__menu-item"
1688
- role="menuitem"
1689
- type="button"
1690
- >Action</button>
1691
- </li>
1692
- <li role="none">
1693
- <a
1694
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1695
- role="menuitem"
1696
- href="#"
1697
- aria-disabled="true"
1698
- tabindex="-1"
1699
- >Disabled link</a>
1700
- </li>
1701
- <li role="none">
1702
- <button
1703
- class="pf-v6-c-dropdown__menu-item"
1704
- role="menuitem"
1705
- type="button"
1706
- disabled
1707
- >Disabled action</button>
1708
- </li>
1709
- <li class="pf-v6-c-divider" role="separator"></li>
1710
- <li role="none">
1711
- <a
1712
- class="pf-v6-c-dropdown__menu-item"
1713
- role="menuitem"
1714
- href="#"
1715
- >Separated link</a>
1716
- </li>
1717
- </ul>
1718
- </div>
1151
+ </span>
1152
+ </button>
1719
1153
  </div>
1720
1154
  </div>
1721
1155
  </div>
@@ -1730,7 +1164,6 @@ When a list item includes more than one block of content, it can be difficult fo
1730
1164
  <div class="pf-v6-c-data-list__check">
1731
1165
  <label
1732
1166
  class="pf-v6-c-check pf-m-standalone"
1733
- id="data-list-compact-item-2&quot;"
1734
1167
  for="data-list-compact-item-2&quot;-input"
1735
1168
  >
1736
1169
  <input
@@ -1753,70 +1186,28 @@ When a list item includes more than one block of content, it can be difficult fo
1753
1186
  </div>
1754
1187
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-lg">
1755
1188
  <div class="pf-v6-c-data-list__action">
1756
- <div class="pf-v6-c-dropdown">
1757
- <button
1758
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1759
- id="data-list-compact-item-2-dropdown-kebab-button"
1760
- aria-expanded="false"
1761
- type="button"
1762
- aria-label="Actions"
1763
- >
1189
+ <button
1190
+ class="pf-v6-c-menu-toggle pf-m-plain"
1191
+ type="button"
1192
+ aria-expanded="false"
1193
+ aria-label="Menu toggle"
1194
+ id="data-list-compact-item-2-menu-toggle"
1195
+ >
1196
+ <span class="pf-v6-c-menu-toggle__icon">
1764
1197
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1765
- </button>
1766
- <ul
1767
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1768
- aria-labelledby="data-list-compact-item-2-dropdown-kebab-button"
1769
- hidden
1770
- role="menu"
1771
- >
1772
- <li role="none">
1773
- <a
1774
- class="pf-v6-c-dropdown__menu-item"
1775
- role="menuitem"
1776
- href="#"
1777
- >Link</a>
1778
- </li>
1779
- <li role="none">
1780
- <button
1781
- class="pf-v6-c-dropdown__menu-item"
1782
- role="menuitem"
1783
- type="button"
1784
- >Action</button>
1785
- </li>
1786
- <li role="none">
1787
- <a
1788
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1789
- role="menuitem"
1790
- href="#"
1791
- aria-disabled="true"
1792
- tabindex="-1"
1793
- >Disabled link</a>
1794
- </li>
1795
- <li role="none">
1796
- <button
1797
- class="pf-v6-c-dropdown__menu-item"
1798
- role="menuitem"
1799
- type="button"
1800
- disabled
1801
- >Disabled action</button>
1802
- </li>
1803
- <li class="pf-v6-c-divider" role="separator"></li>
1804
- <li role="none">
1805
- <a
1806
- class="pf-v6-c-dropdown__menu-item"
1807
- role="menuitem"
1808
- href="#"
1809
- >Separated link</a>
1810
- </li>
1811
- </ul>
1812
- </div>
1198
+ </span>
1199
+ </button>
1813
1200
  </div>
1814
1201
  </div>
1815
1202
  <div
1816
1203
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-lg"
1817
1204
  >
1818
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary</button>
1819
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
1205
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1206
+ <span class="pf-v6-c-button__text">Primary</span>
1207
+ </button>
1208
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1209
+ <span class="pf-v6-c-button__text">Secondary</span>
1210
+ </button>
1820
1211
  </div>
1821
1212
  </div>
1822
1213
  </li>
@@ -1830,7 +1221,6 @@ When a list item includes more than one block of content, it can be difficult fo
1830
1221
  <div class="pf-v6-c-data-list__check">
1831
1222
  <label
1832
1223
  class="pf-v6-c-check pf-m-standalone"
1833
- id="data-list-compact-item-3&quot;"
1834
1224
  for="data-list-compact-item-3&quot;-input"
1835
1225
  >
1836
1226
  <input
@@ -1853,72 +1243,34 @@ When a list item includes more than one block of content, it can be difficult fo
1853
1243
  </div>
1854
1244
  <div class="pf-v6-c-data-list__item-action pf-m-hidden-on-xl">
1855
1245
  <div class="pf-v6-c-data-list__action">
1856
- <div class="pf-v6-c-dropdown">
1857
- <button
1858
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1859
- id="data-list-compact-item-3-dropdown-kebab-button"
1860
- aria-expanded="false"
1861
- type="button"
1862
- aria-label="Actions"
1863
- >
1246
+ <button
1247
+ class="pf-v6-c-menu-toggle pf-m-plain"
1248
+ type="button"
1249
+ aria-expanded="false"
1250
+ aria-label="Menu toggle"
1251
+ id="data-list-compact-item-3-menu-toggle"
1252
+ >
1253
+ <span class="pf-v6-c-menu-toggle__icon">
1864
1254
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1865
- </button>
1866
- <ul
1867
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1868
- aria-labelledby="data-list-compact-item-3-dropdown-kebab-button"
1869
- hidden
1870
- role="menu"
1871
- >
1872
- <li role="none">
1873
- <a
1874
- class="pf-v6-c-dropdown__menu-item"
1875
- role="menuitem"
1876
- href="#"
1877
- >Link</a>
1878
- </li>
1879
- <li role="none">
1880
- <button
1881
- class="pf-v6-c-dropdown__menu-item"
1882
- role="menuitem"
1883
- type="button"
1884
- >Action</button>
1885
- </li>
1886
- <li role="none">
1887
- <a
1888
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1889
- role="menuitem"
1890
- href="#"
1891
- aria-disabled="true"
1892
- tabindex="-1"
1893
- >Disabled link</a>
1894
- </li>
1895
- <li role="none">
1896
- <button
1897
- class="pf-v6-c-dropdown__menu-item"
1898
- role="menuitem"
1899
- type="button"
1900
- disabled
1901
- >Disabled action</button>
1902
- </li>
1903
- <li class="pf-v6-c-divider" role="separator"></li>
1904
- <li role="none">
1905
- <a
1906
- class="pf-v6-c-dropdown__menu-item"
1907
- role="menuitem"
1908
- href="#"
1909
- >Separated link</a>
1910
- </li>
1911
- </ul>
1912
- </div>
1255
+ </span>
1256
+ </button>
1913
1257
  </div>
1914
1258
  </div>
1915
1259
  <div
1916
1260
  class="pf-v6-c-data-list__item-action pf-m-hidden pf-m-visible-on-xl"
1917
1261
  >
1918
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary</button>
1919
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
1920
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
1921
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
1262
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1263
+ <span class="pf-v6-c-button__text">Primary</span>
1264
+ </button>
1265
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1266
+ <span class="pf-v6-c-button__text">Secondary</span>
1267
+ </button>
1268
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1269
+ <span class="pf-v6-c-button__text">Secondary</span>
1270
+ </button>
1271
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1272
+ <span class="pf-v6-c-button__text">Secondary</span>
1273
+ </button>
1922
1274
  </div>
1923
1275
  </div>
1924
1276
  </li>
@@ -1970,7 +1322,6 @@ When a list item includes more than one block of content, it can be difficult fo
1970
1322
  <div class="pf-v6-c-data-list__check">
1971
1323
  <label
1972
1324
  class="pf-v6-c-check pf-m-standalone"
1973
- id="data-list-default-fitting-item-1&quot;"
1974
1325
  for="data-list-default-fitting-item-1&quot;-input"
1975
1326
  >
1976
1327
  <input
@@ -2016,7 +1367,6 @@ When a list item includes more than one block of content, it can be difficult fo
2016
1367
  <div class="pf-v6-c-data-list__check">
2017
1368
  <label
2018
1369
  class="pf-v6-c-check pf-m-standalone"
2019
- id="data-list-flex-modifiers-item-1&quot;"
2020
1370
  for="data-list-flex-modifiers-item-1&quot;-input"
2021
1371
  >
2022
1372
  <input
@@ -2045,63 +1395,17 @@ When a list item includes more than one block of content, it can be difficult fo
2045
1395
  </div>
2046
1396
  <div class="pf-v6-c-data-list__item-action">
2047
1397
  <div class="pf-v6-c-data-list__action">
2048
- <div class="pf-v6-c-dropdown">
2049
- <button
2050
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2051
- id="data-list-flex-modifiers-item-1-dropdown-kebab-button"
2052
- aria-expanded="false"
2053
- type="button"
2054
- aria-label="Actions"
2055
- >
1398
+ <button
1399
+ class="pf-v6-c-menu-toggle pf-m-plain"
1400
+ type="button"
1401
+ aria-expanded="false"
1402
+ aria-label="Menu toggle"
1403
+ id="data-list-flex-modifiers-item-1-menu-toggle"
1404
+ >
1405
+ <span class="pf-v6-c-menu-toggle__icon">
2056
1406
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2057
- </button>
2058
- <ul
2059
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2060
- aria-labelledby="data-list-flex-modifiers-item-1-dropdown-kebab-button"
2061
- hidden
2062
- role="menu"
2063
- >
2064
- <li role="none">
2065
- <a
2066
- class="pf-v6-c-dropdown__menu-item"
2067
- role="menuitem"
2068
- href="#"
2069
- >Link</a>
2070
- </li>
2071
- <li role="none">
2072
- <button
2073
- class="pf-v6-c-dropdown__menu-item"
2074
- role="menuitem"
2075
- type="button"
2076
- >Action</button>
2077
- </li>
2078
- <li role="none">
2079
- <a
2080
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2081
- role="menuitem"
2082
- href="#"
2083
- aria-disabled="true"
2084
- tabindex="-1"
2085
- >Disabled link</a>
2086
- </li>
2087
- <li role="none">
2088
- <button
2089
- class="pf-v6-c-dropdown__menu-item"
2090
- role="menuitem"
2091
- type="button"
2092
- disabled
2093
- >Disabled action</button>
2094
- </li>
2095
- <li class="pf-v6-c-divider" role="separator"></li>
2096
- <li role="none">
2097
- <a
2098
- class="pf-v6-c-dropdown__menu-item"
2099
- role="menuitem"
2100
- href="#"
2101
- >Separated link</a>
2102
- </li>
2103
- </ul>
2104
- </div>
1407
+ </span>
1408
+ </button>
2105
1409
  </div>
2106
1410
  </div>
2107
1411
  </div>
@@ -2130,16 +1434,17 @@ When a list item includes more than one block of content, it can be difficult fo
2130
1434
  aria-expanded="true"
2131
1435
  aria-controls="data-list-flex-modifiers-2-content1"
2132
1436
  >
2133
- <div class="pf-v6-c-data-list__toggle-icon">
2134
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2135
- </div>
1437
+ <span class="pf-v6-c-button__icon pf-m-start">
1438
+ <div class="pf-v6-c-data-list__toggle-icon">
1439
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1440
+ </div>
1441
+ </span>
2136
1442
  </button>
2137
1443
  </div>
2138
1444
 
2139
1445
  <div class="pf-v6-c-data-list__check">
2140
1446
  <label
2141
1447
  class="pf-v6-c-check pf-m-standalone"
2142
- id="data-list-flex-modifiers-2-item-1&quot;"
2143
1448
  for="data-list-flex-modifiers-2-item-1&quot;-input"
2144
1449
  >
2145
1450
  <input
@@ -2180,63 +1485,17 @@ When a list item includes more than one block of content, it can be difficult fo
2180
1485
  </div>
2181
1486
  <div class="pf-v6-c-data-list__item-action">
2182
1487
  <div class="pf-v6-c-data-list__action">
2183
- <div class="pf-v6-c-dropdown">
2184
- <button
2185
- class="pf-v6-c-dropdown__toggle pf-m-plain"
2186
- id="data-list-flex-modifiers-2-item-1-dropdown-kebab-button"
2187
- aria-expanded="false"
2188
- type="button"
2189
- aria-label="Actions"
2190
- >
1488
+ <button
1489
+ class="pf-v6-c-menu-toggle pf-m-plain"
1490
+ type="button"
1491
+ aria-expanded="false"
1492
+ aria-label="Menu toggle"
1493
+ id="data-list-flex-modifiers-2-item-1-menu-toggle"
1494
+ >
1495
+ <span class="pf-v6-c-menu-toggle__icon">
2191
1496
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2192
- </button>
2193
- <ul
2194
- class="pf-v6-c-dropdown__menu pf-m-align-right"
2195
- aria-labelledby="data-list-flex-modifiers-2-item-1-dropdown-kebab-button"
2196
- hidden
2197
- role="menu"
2198
- >
2199
- <li role="none">
2200
- <a
2201
- class="pf-v6-c-dropdown__menu-item"
2202
- role="menuitem"
2203
- href="#"
2204
- >Link</a>
2205
- </li>
2206
- <li role="none">
2207
- <button
2208
- class="pf-v6-c-dropdown__menu-item"
2209
- role="menuitem"
2210
- type="button"
2211
- >Action</button>
2212
- </li>
2213
- <li role="none">
2214
- <a
2215
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
2216
- role="menuitem"
2217
- href="#"
2218
- aria-disabled="true"
2219
- tabindex="-1"
2220
- >Disabled link</a>
2221
- </li>
2222
- <li role="none">
2223
- <button
2224
- class="pf-v6-c-dropdown__menu-item"
2225
- role="menuitem"
2226
- type="button"
2227
- disabled
2228
- >Disabled action</button>
2229
- </li>
2230
- <li class="pf-v6-c-divider" role="separator"></li>
2231
- <li role="none">
2232
- <a
2233
- class="pf-v6-c-dropdown__menu-item"
2234
- role="menuitem"
2235
- href="#"
2236
- >Separated link</a>
2237
- </li>
2238
- </ul>
2239
- </div>
1497
+ </span>
1498
+ </button>
2240
1499
  </div>
2241
1500
  </div>
2242
1501
  </div>
@@ -2359,9 +1618,11 @@ When a list item includes more than one block of content, it can be difficult fo
2359
1618
  aria-expanded="true"
2360
1619
  aria-controls="data-list-clickable-expandable-rows-content1"
2361
1620
  >
2362
- <div class="pf-v6-c-data-list__toggle-icon">
2363
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2364
- </div>
1621
+ <span class="pf-v6-c-button__icon pf-m-start">
1622
+ <div class="pf-v6-c-data-list__toggle-icon">
1623
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1624
+ </div>
1625
+ </span>
2365
1626
  </button>
2366
1627
  </div>
2367
1628
  </div>
@@ -2401,9 +1662,11 @@ When a list item includes more than one block of content, it can be difficult fo
2401
1662
  aria-expanded="false"
2402
1663
  aria-controls="data-list-clickable-expandable-rows-content2"
2403
1664
  >
2404
- <div class="pf-v6-c-data-list__toggle-icon">
2405
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2406
- </div>
1665
+ <span class="pf-v6-c-button__icon pf-m-start">
1666
+ <div class="pf-v6-c-data-list__toggle-icon">
1667
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1668
+ </div>
1669
+ </span>
2407
1670
  </button>
2408
1671
  </div>
2409
1672
  </div>
@@ -2444,9 +1707,11 @@ When a list item includes more than one block of content, it can be difficult fo
2444
1707
  aria-expanded="true"
2445
1708
  aria-controls="data-list-clickable-expandable-rows-content3"
2446
1709
  >
2447
- <div class="pf-v6-c-data-list__toggle-icon">
2448
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2449
- </div>
1710
+ <span class="pf-v6-c-button__icon pf-m-start">
1711
+ <div class="pf-v6-c-data-list__toggle-icon">
1712
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1713
+ </div>
1714
+ </span>
2450
1715
  </button>
2451
1716
  </div>
2452
1717
  </div>
@@ -2486,9 +1751,11 @@ When a list item includes more than one block of content, it can be difficult fo
2486
1751
  aria-expanded="false"
2487
1752
  aria-controls="data-list-clickable-expandable-rows-content4"
2488
1753
  >
2489
- <div class="pf-v6-c-data-list__toggle-icon">
2490
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2491
- </div>
1754
+ <span class="pf-v6-c-button__icon pf-m-start">
1755
+ <div class="pf-v6-c-data-list__toggle-icon">
1756
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1757
+ </div>
1758
+ </span>
2492
1759
  </button>
2493
1760
  </div>
2494
1761
  </div>
@@ -2550,7 +1817,6 @@ When a list item includes more than one block of content, it can be difficult fo
2550
1817
  <div class="pf-v6-c-data-list__check">
2551
1818
  <label
2552
1819
  class="pf-v6-c-check pf-m-standalone"
2553
- id="data-list-draggable-item-1&quot;"
2554
1820
  for="data-list-draggable-item-1&quot;-input"
2555
1821
  >
2556
1822
  <input
@@ -2596,7 +1862,6 @@ When a list item includes more than one block of content, it can be difficult fo
2596
1862
  <div class="pf-v6-c-data-list__check">
2597
1863
  <label
2598
1864
  class="pf-v6-c-check pf-m-standalone"
2599
- id="data-list-draggable-item-2&quot;"
2600
1865
  for="data-list-draggable-item-2&quot;-input"
2601
1866
  >
2602
1867
  <input
@@ -2643,7 +1908,6 @@ When a list item includes more than one block of content, it can be difficult fo
2643
1908
  <div class="pf-v6-c-data-list__check">
2644
1909
  <label
2645
1910
  class="pf-v6-c-check pf-m-standalone"
2646
- id="data-list-draggable-item-3&quot;"
2647
1911
  for="data-list-draggable-item-3&quot;-input"
2648
1912
  >
2649
1913
  <input
@@ -2689,7 +1953,6 @@ When a list item includes more than one block of content, it can be difficult fo
2689
1953
  <div class="pf-v6-c-data-list__check">
2690
1954
  <label
2691
1955
  class="pf-v6-c-check pf-m-standalone"
2692
- id="data-list-draggable-item-4&quot;"
2693
1956
  for="data-list-draggable-item-4&quot;-input"
2694
1957
  >
2695
1958
  <input