@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/Card/examples/Card.md CHANGED
@@ -25,116 +25,89 @@ cssPrefix: pf-v6-c-card
25
25
  <div class="pf-v6-c-card" id="card-action-example-1">
26
26
  <div class="pf-v6-c-card__header">
27
27
  <div class="pf-v6-c-card__header-main">
28
- <svg
29
- version="1.1"
30
- xmlns="http://www.w3.org/2000/svg"
31
- viewBox="0 0 706.3 132.5"
32
- fill="currentColor"
33
- width="300px"
34
- >
35
- <g>
36
- <path
37
- d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
38
- c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
39
- c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
40
- c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
41
- c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
42
- />
43
- <path
44
- d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
45
- c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
46
- />
47
- <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
48
- <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
49
- <path
50
- d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
51
- />
52
- <path
53
- d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
54
- c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
55
- l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
56
- c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
57
- H478.9z"
58
- />
59
- <path
60
- d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
61
- c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
62
- c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
63
- />
64
- <path
65
- d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
66
- />
67
- <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
68
- <path
69
- d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
70
- />
71
- </g>
72
- <g>
73
- <path
74
- d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
75
- l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
76
- l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
77
- L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
78
- l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
79
- L101.1,70z"
80
- />
28
+ <svg height="70px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
30
+ <defs>
31
+ <linearGradient
32
+ x1="68%"
33
+ y1="2.25860997e-13%"
34
+ x2="32%"
35
+ y2="100%"
36
+ id="linearGradient-card-action-example-1"
37
+ >
38
+ <stop stop-color="#2B9AF3" offset="0%" />
39
+ <stop
40
+ stop-color="#73BCF7"
41
+ stop-opacity="0.502212631"
42
+ offset="100%"
43
+ />
44
+ </linearGradient>
45
+ </defs>
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
+ <g
48
+ transform="translate(206.000000, 45.750000)"
49
+ fill="var(--pf-t--global--text--color--regular)"
50
+ fill-rule="nonzero"
51
+ >
52
+ <path
53
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
54
+ />
55
+ <path
56
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
57
+ />
58
+ <path
59
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
60
+ />
61
+ <path
62
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
63
+ />
64
+ <path
65
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
66
+ />
67
+ <path
68
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
69
+ />
70
+ <path
71
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
72
+ />
73
+ <polygon
74
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
75
+ />
76
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
+ <path
78
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
79
+ />
80
+ </g>
81
+ <g transform="translate(0.000000, 0.000000)">
82
+ <path
83
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
84
+ fill="#0066CC"
85
+ />
86
+ <path
87
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
+ fill="url(#linearGradient-card-action-example-1)"
89
+ />
90
+ <path
91
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
92
+ fill="url(#linearGradient-card-action-example-1)"
93
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
+ />
95
+ </g>
81
96
  </g>
82
97
  </svg>
83
98
  </div>
84
99
  <div class="pf-v6-c-card__actions">
85
- <div class="pf-v6-c-dropdown">
86
- <button
87
- class="pf-v6-c-dropdown__toggle pf-m-plain"
88
- id="card-action-example-1-dropdown-kebab-button"
89
- aria-expanded="false"
90
- type="button"
91
- aria-label="Actions"
92
- >
100
+ <button
101
+ class="pf-v6-c-menu-toggle pf-m-plain"
102
+ type="button"
103
+ aria-expanded="false"
104
+ aria-label="Menu toggle"
105
+ id="card-action-example-1-menu-toggle-kebab"
106
+ >
107
+ <span class="pf-v6-c-menu-toggle__icon">
93
108
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
94
- </button>
95
- <ul
96
- class="pf-v6-c-dropdown__menu pf-m-align-right"
97
- aria-labelledby="card-action-example-1-dropdown-kebab-button"
98
- hidden
99
- role="menu"
100
- >
101
- <li role="none">
102
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
103
- </li>
104
- <li role="none">
105
- <button
106
- class="pf-v6-c-dropdown__menu-item"
107
- role="menuitem"
108
- type="button"
109
- >Action</button>
110
- </li>
111
- <li role="none">
112
- <a
113
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
114
- role="menuitem"
115
- href="#"
116
- aria-disabled="true"
117
- tabindex="-1"
118
- >Disabled link</a>
119
- </li>
120
- <li role="none">
121
- <button
122
- class="pf-v6-c-dropdown__menu-item"
123
- role="menuitem"
124
- type="button"
125
- disabled
126
- >Disabled action</button>
127
- </li>
128
- <li class="pf-v6-c-divider" role="separator"></li>
129
- <li role="none">
130
- <a
131
- class="pf-v6-c-dropdown__menu-item"
132
- role="menuitem"
133
- href="#"
134
- >Separated link</a>
135
- </li>
136
- </ul>
137
- </div>
109
+ </span>
110
+ </button>
138
111
  <div class="pf-v6-c-check pf-m-standalone">
139
112
  <input
140
113
  class="pf-v6-c-check__input"
@@ -165,59 +138,17 @@ cssPrefix: pf-v6-c-card
165
138
  <div class="pf-v6-c-card" id="card-action-example-2">
166
139
  <div class="pf-v6-c-card__header">
167
140
  <div class="pf-v6-c-card__actions">
168
- <div class="pf-v6-c-dropdown">
169
- <button
170
- class="pf-v6-c-dropdown__toggle pf-m-plain"
171
- id="card-action-example-2-dropdown-kebab-button"
172
- aria-expanded="false"
173
- type="button"
174
- aria-label="Actions"
175
- >
141
+ <button
142
+ class="pf-v6-c-menu-toggle pf-m-plain"
143
+ type="button"
144
+ aria-expanded="false"
145
+ aria-label="Menu toggle"
146
+ id="card-action-example-2-menu-toggle-kebab"
147
+ >
148
+ <span class="pf-v6-c-menu-toggle__icon">
176
149
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
177
- </button>
178
- <ul
179
- class="pf-v6-c-dropdown__menu pf-m-align-right"
180
- aria-labelledby="card-action-example-2-dropdown-kebab-button"
181
- hidden
182
- role="menu"
183
- >
184
- <li role="none">
185
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
186
- </li>
187
- <li role="none">
188
- <button
189
- class="pf-v6-c-dropdown__menu-item"
190
- role="menuitem"
191
- type="button"
192
- >Action</button>
193
- </li>
194
- <li role="none">
195
- <a
196
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
197
- role="menuitem"
198
- href="#"
199
- aria-disabled="true"
200
- tabindex="-1"
201
- >Disabled link</a>
202
- </li>
203
- <li role="none">
204
- <button
205
- class="pf-v6-c-dropdown__menu-item"
206
- role="menuitem"
207
- type="button"
208
- disabled
209
- >Disabled action</button>
210
- </li>
211
- <li class="pf-v6-c-divider" role="separator"></li>
212
- <li role="none">
213
- <a
214
- class="pf-v6-c-dropdown__menu-item"
215
- role="menuitem"
216
- href="#"
217
- >Separated link</a>
218
- </li>
219
- </ul>
220
- </div>
150
+ </span>
151
+ </button>
221
152
  <div class="pf-v6-c-check pf-m-standalone">
222
153
  <input
223
154
  class="pf-v6-c-check__input"
@@ -250,59 +181,17 @@ cssPrefix: pf-v6-c-card
250
181
  <div class="pf-v6-c-card" id="card-action-example-3">
251
182
  <div class="pf-v6-c-card__header">
252
183
  <div class="pf-v6-c-card__actions">
253
- <div class="pf-v6-c-dropdown">
254
- <button
255
- class="pf-v6-c-dropdown__toggle pf-m-plain"
256
- id="card-action-example-3-dropdown-kebab-button"
257
- aria-expanded="false"
258
- type="button"
259
- aria-label="Actions"
260
- >
184
+ <button
185
+ class="pf-v6-c-menu-toggle pf-m-plain"
186
+ type="button"
187
+ aria-expanded="false"
188
+ aria-label="Menu toggle"
189
+ id="card-action-example-3-menu-toggle-kebab"
190
+ >
191
+ <span class="pf-v6-c-menu-toggle__icon">
261
192
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
262
- </button>
263
- <ul
264
- class="pf-v6-c-dropdown__menu pf-m-align-right"
265
- aria-labelledby="card-action-example-3-dropdown-kebab-button"
266
- hidden
267
- role="menu"
268
- >
269
- <li role="none">
270
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
271
- </li>
272
- <li role="none">
273
- <button
274
- class="pf-v6-c-dropdown__menu-item"
275
- role="menuitem"
276
- type="button"
277
- >Action</button>
278
- </li>
279
- <li role="none">
280
- <a
281
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
282
- role="menuitem"
283
- href="#"
284
- aria-disabled="true"
285
- tabindex="-1"
286
- >Disabled link</a>
287
- </li>
288
- <li role="none">
289
- <button
290
- class="pf-v6-c-dropdown__menu-item"
291
- role="menuitem"
292
- type="button"
293
- disabled
294
- >Disabled action</button>
295
- </li>
296
- <li class="pf-v6-c-divider" role="separator"></li>
297
- <li role="none">
298
- <a
299
- class="pf-v6-c-dropdown__menu-item"
300
- role="menuitem"
301
- href="#"
302
- >Separated link</a>
303
- </li>
304
- </ul>
305
- </div>
193
+ </span>
194
+ </button>
306
195
  <div class="pf-v6-c-check pf-m-standalone">
307
196
  <input
308
197
  class="pf-v6-c-check__input"
@@ -329,7 +218,9 @@ cssPrefix: pf-v6-c-card
329
218
  <div class="pf-v6-c-card" id="card-action-no-offset">
330
219
  <div class="pf-v6-c-card__header">
331
220
  <div class="pf-v6-c-card__actions pf-m-no-offset">
332
- <button class="pf-v6-c-button pf-m-primary" type="button">Action</button>
221
+ <button class="pf-v6-c-button pf-m-primary" type="button">
222
+ <span class="pf-v6-c-button__text">Action</span>
223
+ </button>
333
224
  </div>
334
225
  <div class="pf-v6-c-card__header-main">
335
226
  <h1
@@ -350,59 +241,74 @@ cssPrefix: pf-v6-c-card
350
241
  <div class="pf-v6-c-card" id="card-image-head-example">
351
242
  <div class="pf-v6-c-card__header">
352
243
  <div class="pf-v6-c-card__header-main">
353
- <svg
354
- version="1.1"
355
- xmlns="http://www.w3.org/2000/svg"
356
- viewBox="0 0 706.3 132.5"
357
- fill="currentColor"
358
- width="300px"
359
- >
360
- <g>
361
- <path
362
- d="M197.2,83.9V48.6h15.2c2.2,0,4.1,0.3,5.6,1c1.5,0.7,2.8,1.5,3.7,2.6c1,1.1,1.6,2.3,2.1,3.6
363
- c0.4,1.3,0.6,2.7,0.6,4c0,0.9-0.1,1.7-0.3,2.6c-0.2,0.9-0.5,1.7-0.9,2.6c-0.4,0.8-0.9,1.6-1.6,2.3c-0.6,0.7-1.4,1.4-2.3,1.9
364
- c-0.9,0.5-1.9,1-3.1,1.3c-1.2,0.3-2.5,0.5-3.9,0.5h-8.3v13H197.2z M212.7,64.4c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1.1
365
- c0.4-0.4,0.6-0.9,0.8-1.5c0.2-0.6,0.3-1.1,0.3-1.7c0-0.5-0.1-1-0.2-1.6c-0.1-0.5-0.4-1-0.7-1.5c-0.4-0.5-0.8-0.8-1.4-1.1
366
- c-0.6-0.3-1.4-0.4-2.3-0.4h-8.6v9.4H212.7z"
367
- />
368
- <path
369
- d="M271.6,83.9l-2.7-7.3h-13.6l-2.7,7.3h-7.3l13.5-35.4h6.7l13.5,35.4H271.6z M263.2,61.2
370
- c-0.2-0.4-0.4-0.9-0.6-1.5c-0.2-0.6-0.4-1.1-0.5-1.7c-0.1,0.5-0.3,1.1-0.5,1.7c-0.2,0.6-0.4,1.1-0.6,1.5l-3.5,9.2h9.2L263.2,61.2z"
371
- />
372
- <path d="M317.3,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H317.3z" />
373
- <path d="M370.2,55.2v28.8h-6.8V55.2h-10.1v-6.6h27v6.6H370.2z" />
374
- <path
375
- d="M408.5,83.9V48.6h24.1v6.5h-17.3v7.4h10.2v6.5h-10.2v8.5h18.4v6.5H408.5z"
376
- />
377
- <path
378
- d="M462.4,83.9V48.6h16.4c2.2,0,4.1,0.3,5.6,0.9c1.5,0.6,2.7,1.4,3.6,2.5c0.9,1,1.6,2.2,2,3.5
379
- c0.4,1.3,0.6,2.7,0.6,4.2c0,1-0.1,2-0.4,3c-0.3,1-0.7,2-1.3,2.9c-0.6,0.9-1.3,1.8-2.1,2.5c-0.9,0.7-1.8,1.3-3,1.7l6.9,14.1H483
380
- l-6.6-13.2h-7.1v13.2H462.4z M478.9,64.3c0.9,0,1.6-0.1,2.2-0.4c0.6-0.3,1.1-0.6,1.4-1c0.4-0.4,0.6-0.9,0.8-1.5
381
- c0.2-0.6,0.2-1.1,0.2-1.7c0-0.6-0.1-1.1-0.2-1.7c-0.1-0.6-0.4-1-0.7-1.5c-0.3-0.4-0.8-0.8-1.4-1c-0.6-0.3-1.4-0.4-2.3-0.4h-9.7v9.2
382
- H478.9z"
383
- />
384
- <path
385
- d="M541.9,83.9l-14-20.6c-0.2-0.3-0.5-0.8-0.8-1.3c-0.3-0.5-0.5-1-0.7-1.4c0.1,0.4,0.1,0.8,0.1,1.3
386
- c0,0.5,0,1,0,1.3v20.6h-6.8V48.6h6.4l13.7,20.4c0.2,0.3,0.5,0.7,0.7,1.2c0.3,0.5,0.5,1,0.7,1.4c0-0.5-0.1-1-0.1-1.4
387
- c0-0.5,0-0.9,0-1.2V48.6h6.8v35.4H541.9z"
388
- />
389
- <path
390
- d="M578.4,83.9V48.6h23.7v6.5h-16.9v7.4H596v6.5h-10.7v15H578.4z"
391
- />
392
- <path d="M629.8,83.9V48.6h6.8v28.8h17.1v6.6H629.8z" />
393
- <path
394
- d="M686.4,83.9V70.2l-13.1-21.6h7.7l8.7,14.5l8.7-14.5h7.7l-13.1,21.6v13.8H686.4z"
395
- />
396
- </g>
397
- <g>
398
- <path
399
- d="M49,103l-21.2,4.9L0,68.4L70,0l70,68.4l-27.8,39.4L91,103l-21,29.5L49,103z M70,128.7l18.6-26.2l-7.2-1.7
400
- l-11,16.2l-11.9-16.2l-7.2,1.7L70,128.7z M70.4,113.1l9.2-13.5L70,6.7l-9.5,92.9L70.4,113.1z M28.8,105.4l18.8-4.3L33.8,81.7
401
- l4.1-9.3L25.2,55L58,14.9L2.9,68.7L28.8,105.4z M111.2,105.4l16.3-23.1l9.6-13.6L82,14.9L114.9,55l-12.8,17.4l4.1,9.3L92.4,101
402
- L111.2,105.4z M90.1,100.5l13.6-19.1l-3-6.9L82.7,98.8L90.1,100.5z M50,100.5l7.3-1.7L39.4,74.5l-3,6.9L50,100.5z M81.9,96.2
403
- l17.6-24.1L72.9,11.6L81.9,96.2z M58.1,96.2l9-84.6L40.5,72.1L58.1,96.2z M39,70L66.1,8.5L28,55.1L39,70z M101.1,70l11-15L74,8.5
404
- L101.1,70z"
405
- />
244
+ <svg height="70px" viewBox="0 0 679 158">
245
+ <title>PF-HorizontalLogo-Color</title>
246
+ <defs>
247
+ <linearGradient
248
+ x1="68%"
249
+ y1="2.25860997e-13%"
250
+ x2="32%"
251
+ y2="100%"
252
+ id="linearGradient-card-image-head-example"
253
+ >
254
+ <stop stop-color="#2B9AF3" offset="0%" />
255
+ <stop
256
+ stop-color="#73BCF7"
257
+ stop-opacity="0.502212631"
258
+ offset="100%"
259
+ />
260
+ </linearGradient>
261
+ </defs>
262
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
263
+ <g
264
+ transform="translate(206.000000, 45.750000)"
265
+ fill="var(--pf-t--global--text--color--regular)"
266
+ fill-rule="nonzero"
267
+ >
268
+ <path
269
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
270
+ />
271
+ <path
272
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
273
+ />
274
+ <path
275
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
276
+ />
277
+ <path
278
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
279
+ />
280
+ <path
281
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
282
+ />
283
+ <path
284
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
285
+ />
286
+ <path
287
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
288
+ />
289
+ <polygon
290
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
291
+ />
292
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
293
+ <path
294
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
295
+ />
296
+ </g>
297
+ <g transform="translate(0.000000, 0.000000)">
298
+ <path
299
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
300
+ fill="#0066CC"
301
+ />
302
+ <path
303
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
304
+ fill="url(#linearGradient-card-image-head-example)"
305
+ />
306
+ <path
307
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
308
+ fill="url(#linearGradient-card-image-head-example)"
309
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
310
+ />
311
+ </g>
406
312
  </g>
407
313
  </svg>
408
314
  </div>
@@ -618,7 +524,7 @@ cssPrefix: pf-v6-c-card
618
524
 
619
525
  ```
620
526
 
621
- ### Selectable Secondary style
527
+ ### Selectable secondary style
622
528
 
623
529
  ```html
624
530
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -854,34 +760,26 @@ cssPrefix: pf-v6-c-card
854
760
 
855
761
  ```
856
762
 
857
- ### Clickable
763
+ ### Actionable (button)
858
764
 
859
765
  ```html
860
766
  <div class="pf-v6-l-gallery pf-m-gutter">
861
- <div class="pf-v6-c-card pf-m-clickable" id="card-clickable-example">
767
+ <div class="pf-v6-c-card pf-m-clickable" id="card-actionable-button-example">
862
768
  <div class="pf-v6-c-card__header">
863
769
  <div class="pf-v6-c-card__actions pf-m-no-offset">
864
770
  <div class="pf-v6-c-card__selectable-actions">
865
- <div class="pf-v6-c-radio pf-m-standalone">
866
- <input
867
- class="pf-v6-c-radio__input pf-v6-screen-reader"
868
- type="radio"
869
- id="card-clickable-example-sr-only-radio"
870
- name="card-clickable-example-sr-only-radio"
871
- aria-labelledby="card-clickable-example"
872
- />
873
-
874
- <label
875
- class="pf-v6-c-radio__label"
876
- for="card-clickable-example-sr-only-radio"
877
- id="card-clickable-example-sr-only-radio-label"
878
- name="card-clickable-example-sr-only-radio"
879
- ></label>
880
- </div>
771
+ <button
772
+ class="pf-v6-c-card__clickable-action"
773
+ type="button"
774
+ aria-labelledby="card-actionable-button-example"
775
+ ></button>
881
776
  </div>
882
777
  </div>
883
778
  <div class="pf-v6-c-card__header-main">
884
- <div class="pf-v6-c-card__title" id="card-clickable-example-title">
779
+ <div
780
+ class="pf-v6-c-card__title"
781
+ id="card-actionable-button-example-title"
782
+ >
885
783
  <h2 class="pf-v6-c-card__title-text">Title</h2>
886
784
  </div>
887
785
  </div>
@@ -891,35 +789,51 @@ cssPrefix: pf-v6-c-card
891
789
  </div>
892
790
 
893
791
  <div
894
- class="pf-v6-c-card pf-m-clickable pf-m-disabled"
895
- id="card-clickable-example-disabled"
792
+ class="pf-v6-c-card pf-m-clickable pf-m-current"
793
+ id="card-actionable-button-example-clicked"
896
794
  >
897
795
  <div class="pf-v6-c-card__header">
898
796
  <div class="pf-v6-c-card__actions pf-m-no-offset">
899
797
  <div class="pf-v6-c-card__selectable-actions">
900
- <div class="pf-v6-c-radio pf-m-standalone">
901
- <input
902
- class="pf-v6-c-radio__input pf-v6-screen-reader"
903
- type="radio"
904
- id="card-clickable-example-disabled-sr-only-radio"
905
- name="card-clickable-example-disabled-sr-only-radio"
906
- aria-labelledby="card-clickable-example-disabled"
907
- disabled
908
- />
798
+ <button
799
+ class="pf-v6-c-card__clickable-action"
800
+ type="button"
801
+ aria-labelledby="card-actionable-button-example-clicked"
802
+ ></button>
803
+ </div>
804
+ </div>
805
+ <div class="pf-v6-c-card__header-main">
806
+ <div
807
+ class="pf-v6-c-card__title"
808
+ id="card-actionable-button-example-clicked-title"
809
+ >
810
+ <h2 class="pf-v6-c-card__title-text">Title (clicked)</h2>
811
+ </div>
812
+ </div>
813
+ </div>
814
+ <div class="pf-v6-c-card__body">Body</div>
815
+ <div class="pf-v6-c-card__footer">Footer</div>
816
+ </div>
909
817
 
910
- <label
911
- class="pf-v6-c-radio__label pf-m-disabled"
912
- for="card-clickable-example-disabled-sr-only-radio"
913
- id="card-clickable-example-disabled-sr-only-radio-label"
914
- name="card-clickable-example-disabled-sr-only-radio"
915
- ></label>
916
- </div>
818
+ <div
819
+ class="pf-v6-c-card pf-m-clickable pf-m-disabled"
820
+ id="card-actionable-button-example-disabled"
821
+ >
822
+ <div class="pf-v6-c-card__header">
823
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
824
+ <div class="pf-v6-c-card__selectable-actions">
825
+ <button
826
+ class="pf-v6-c-card__clickable-action"
827
+ type="button"
828
+ aria-labelledby="card-actionable-button-example-disabled"
829
+ disabled
830
+ ></button>
917
831
  </div>
918
832
  </div>
919
833
  <div class="pf-v6-c-card__header-main">
920
834
  <div
921
835
  class="pf-v6-c-card__title"
922
- id="card-clickable-example-disabled-title"
836
+ id="card-actionable-button-example-disabled-title"
923
837
  >
924
838
  <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
925
839
  </div>
@@ -928,39 +842,60 @@ cssPrefix: pf-v6-c-card
928
842
  <div class="pf-v6-c-card__body">Body</div>
929
843
  <div class="pf-v6-c-card__footer">Footer</div>
930
844
  </div>
845
+ </div>
846
+
847
+ ```
848
+
849
+ ### Actionable (link)
850
+
851
+ ```html
852
+ <div class="pf-v6-l-gallery pf-m-gutter">
853
+ <div class="pf-v6-c-card pf-m-clickable" id="card-actionable-link-example">
854
+ <div class="pf-v6-c-card__header">
855
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
856
+ <div class="pf-v6-c-card__selectable-actions">
857
+ <a
858
+ class="pf-v6-c-card__clickable-action"
859
+ aria-labelledby="card-actionable-link-example"
860
+ href="#"
861
+ ></a>
862
+ </div>
863
+ </div>
864
+ <div class="pf-v6-c-card__header-main">
865
+ <div
866
+ class="pf-v6-c-card__title"
867
+ id="card-actionable-link-example-title"
868
+ >
869
+ <h2 class="pf-v6-c-card__title-text">Title</h2>
870
+ </div>
871
+ </div>
872
+ </div>
873
+ <div class="pf-v6-c-card__body">Body</div>
874
+ <div class="pf-v6-c-card__footer">Footer</div>
875
+ </div>
931
876
 
932
877
  <div
933
- class="pf-v6-c-card pf-m-clickable pf-m-selected pf-m-disabled"
934
- id="card-clickable-example-selected-disabled"
878
+ class="pf-v6-c-card pf-m-clickable pf-m-disabled"
879
+ id="card-actionable-link-example-disabled"
935
880
  >
936
881
  <div class="pf-v6-c-card__header">
937
882
  <div class="pf-v6-c-card__actions pf-m-no-offset">
938
883
  <div class="pf-v6-c-card__selectable-actions">
939
- <div class="pf-v6-c-radio pf-m-standalone">
940
- <input
941
- class="pf-v6-c-radio__input pf-v6-screen-reader"
942
- type="radio"
943
- id="card-clickable-example-selected-disabled-sr-only-radio"
944
- name="card-clickable-example-selected-disabled-sr-only-radio"
945
- aria-labelledby="card-clickable-example-selected-disabled"
946
- disabled
947
- />
948
-
949
- <label
950
- class="pf-v6-c-radio__label pf-m-disabled"
951
- for="card-clickable-example-selected-disabled-sr-only-radio"
952
- id="card-clickable-example-selected-disabled-sr-only-radio-label"
953
- name="card-clickable-example-selected-disabled-sr-only-radio"
954
- ></label>
955
- </div>
884
+ <a
885
+ class="pf-v6-c-card__clickable-action pf-m-disabled"
886
+ tabindex="-1"
887
+ aria-disabled="true"
888
+ aria-labelledby="card-actionable-link-example-disabled"
889
+ href="#"
890
+ ></a>
956
891
  </div>
957
892
  </div>
958
893
  <div class="pf-v6-c-card__header-main">
959
894
  <div
960
895
  class="pf-v6-c-card__title"
961
- id="card-clickable-example-selected-disabled-title"
896
+ id="card-actionable-link-example-disabled-title"
962
897
  >
963
- <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
898
+ <h2 class="pf-v6-c-card__title-text">Disabled card</h2>
964
899
  </div>
965
900
  </div>
966
901
  </div>
@@ -971,7 +906,7 @@ cssPrefix: pf-v6-c-card
971
906
 
972
907
  ```
973
908
 
974
- ### Clickable secondary style
909
+ ### Actionable secondary style
975
910
 
976
911
  ```html
977
912
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -1051,50 +986,11 @@ cssPrefix: pf-v6-c-card
1051
986
  <div class="pf-v6-c-card__body">Body</div>
1052
987
  <div class="pf-v6-c-card__footer">Footer</div>
1053
988
  </div>
1054
-
1055
- <div
1056
- class="pf-v6-c-card pf-m-clickable pf-m-selected pf-m-disabled pf-m-secondary"
1057
- id="card-clickable-secondary-example-selected-disabled"
1058
- >
1059
- <div class="pf-v6-c-card__header">
1060
- <div class="pf-v6-c-card__actions pf-m-no-offset">
1061
- <div class="pf-v6-c-card__selectable-actions">
1062
- <div class="pf-v6-c-radio pf-m-standalone">
1063
- <input
1064
- class="pf-v6-c-radio__input pf-v6-screen-reader"
1065
- type="radio"
1066
- id="card-clickable-secondary-example-selected-disabled-sr-only-radio"
1067
- name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
1068
- aria-labelledby="card-clickable-secondary-example-selected-disabled"
1069
- disabled
1070
- />
1071
-
1072
- <label
1073
- class="pf-v6-c-radio__label pf-m-disabled"
1074
- for="card-clickable-secondary-example-selected-disabled-sr-only-radio"
1075
- id="card-clickable-secondary-example-selected-disabled-sr-only-radio-label"
1076
- name="card-clickable-secondary-example-selected-disabled-sr-only-radio"
1077
- ></label>
1078
- </div>
1079
- </div>
1080
- </div>
1081
- <div class="pf-v6-c-card__header-main">
1082
- <div
1083
- class="pf-v6-c-card__title"
1084
- id="card-clickable-secondary-example-selected-disabled-title"
1085
- >
1086
- <h2 class="pf-v6-c-card__title-text">Selected but disabled card</h2>
1087
- </div>
1088
- </div>
1089
- </div>
1090
- <div class="pf-v6-c-card__body">Body</div>
1091
- <div class="pf-v6-c-card__footer">Footer</div>
1092
- </div>
1093
989
  </div>
1094
990
 
1095
991
  ```
1096
992
 
1097
- ### Clickable and selectable
993
+ ### Actionable and selectable
1098
994
 
1099
995
  ```html
1100
996
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -1128,7 +1024,9 @@ cssPrefix: pf-v6-c-card
1128
1024
  id="card-clickable-selectable-example-title"
1129
1025
  >
1130
1026
  <h2 class="pf-v6-c-card__title-text">
1131
- <button class="pf-v6-c-button pf-m-inline pf-m-link">Title</button>
1027
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1028
+ <span class="pf-v6-c-button__text">Title</span>
1029
+ </button>
1132
1030
  </h2>
1133
1031
  </div>
1134
1032
  </div>
@@ -1167,9 +1065,9 @@ cssPrefix: pf-v6-c-card
1167
1065
  id="card-clickable-selectable-current-example-title"
1168
1066
  >
1169
1067
  <h2 class="pf-v6-c-card__title-text">
1170
- <button
1171
- class="pf-v6-c-button pf-m-inline pf-m-link"
1172
- >Current card (clicked)</button>
1068
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1069
+ <span class="pf-v6-c-button__text">Current card (clicked)</span>
1070
+ </button>
1173
1071
  </h2>
1174
1072
  </div>
1175
1073
  </div>
@@ -1210,8 +1108,12 @@ cssPrefix: pf-v6-c-card
1210
1108
  >
1211
1109
  <h2 class="pf-v6-c-card__title-text">
1212
1110
  <button
1213
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1214
- >Disabled card</button>
1111
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1112
+ type="button"
1113
+ disabled
1114
+ >
1115
+ <span class="pf-v6-c-button__text">Disabled card</span>
1116
+ </button>
1215
1117
  </h2>
1216
1118
  </div>
1217
1119
  </div>
@@ -1253,8 +1155,12 @@ cssPrefix: pf-v6-c-card
1253
1155
  >
1254
1156
  <h2 class="pf-v6-c-card__title-text">
1255
1157
  <button
1256
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1257
- >Selected but disabled card</button>
1158
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1159
+ type="button"
1160
+ disabled
1161
+ >
1162
+ <span class="pf-v6-c-button__text">Selected but disabled card</span>
1163
+ </button>
1258
1164
  </h2>
1259
1165
  </div>
1260
1166
  </div>
@@ -1266,7 +1172,7 @@ cssPrefix: pf-v6-c-card
1266
1172
 
1267
1173
  ```
1268
1174
 
1269
- ### Clickable and selectable secondary style
1175
+ ### Actionable and selectable secondary style
1270
1176
 
1271
1177
  ```html
1272
1178
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -1300,7 +1206,9 @@ cssPrefix: pf-v6-c-card
1300
1206
  id="card-clickable-selectable-secondary-example-title"
1301
1207
  >
1302
1208
  <h2 class="pf-v6-c-card__title-text">
1303
- <button class="pf-v6-c-button pf-m-inline pf-m-link">Title</button>
1209
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1210
+ <span class="pf-v6-c-button__text">Title</span>
1211
+ </button>
1304
1212
  </h2>
1305
1213
  </div>
1306
1214
  </div>
@@ -1339,9 +1247,9 @@ cssPrefix: pf-v6-c-card
1339
1247
  id="card-clickable-selectable-secondary-current-example-title"
1340
1248
  >
1341
1249
  <h2 class="pf-v6-c-card__title-text">
1342
- <button
1343
- class="pf-v6-c-button pf-m-inline pf-m-link"
1344
- >Current card (clicked)</button>
1250
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1251
+ <span class="pf-v6-c-button__text">Current card (clicked)</span>
1252
+ </button>
1345
1253
  </h2>
1346
1254
  </div>
1347
1255
  </div>
@@ -1382,8 +1290,12 @@ cssPrefix: pf-v6-c-card
1382
1290
  >
1383
1291
  <h2 class="pf-v6-c-card__title-text">
1384
1292
  <button
1385
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1386
- >Disabled card</button>
1293
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1294
+ type="button"
1295
+ disabled
1296
+ >
1297
+ <span class="pf-v6-c-button__text">Disabled card</span>
1298
+ </button>
1387
1299
  </h2>
1388
1300
  </div>
1389
1301
  </div>
@@ -1425,8 +1337,12 @@ cssPrefix: pf-v6-c-card
1425
1337
  >
1426
1338
  <h2 class="pf-v6-c-card__title-text">
1427
1339
  <button
1428
- class="pf-v6-c-button pf-m-inline pf-m-link pf-m-disabled"
1429
- >Selected but disabled card</button>
1340
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1341
+ type="button"
1342
+ disabled
1343
+ >
1344
+ <span class="pf-v6-c-button__text">Selected but disabled card</span>
1345
+ </button>
1430
1346
  </h2>
1431
1347
  </div>
1432
1348
  </div>
@@ -1472,70 +1388,30 @@ cssPrefix: pf-v6-c-card
1472
1388
  <div class="pf-v6-c-card__header-toggle">
1473
1389
  <button
1474
1390
  class="pf-v6-c-button pf-m-plain"
1475
- type="button"
1476
- aria-label="Details"
1477
1391
  id="card-expandable-example-toggle"
1392
+ type="button"
1478
1393
  aria-labelledby="card-expandable-example-title card-expandable-example-toggle"
1394
+ aria-label="Details"
1479
1395
  >
1480
- <span class="pf-v6-c-card__header-toggle-icon">
1481
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1396
+ <span class="pf-v6-c-button__icon pf-m-start">
1397
+ <span class="pf-v6-c-card__header-toggle-icon">
1398
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1399
+ </span>
1482
1400
  </span>
1483
1401
  </button>
1484
1402
  </div>
1485
1403
  <div class="pf-v6-c-card__actions">
1486
- <div class="pf-v6-c-dropdown">
1487
- <button
1488
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1489
- id="card-expandable-example-dropdown-kebab-button"
1490
- aria-expanded="false"
1491
- type="button"
1492
- aria-label="Actions"
1493
- >
1404
+ <button
1405
+ class="pf-v6-c-menu-toggle pf-m-plain"
1406
+ type="button"
1407
+ aria-expanded="false"
1408
+ aria-label="Menu toggle"
1409
+ id="card-expandable-example-menu-toggle-kebab"
1410
+ >
1411
+ <span class="pf-v6-c-menu-toggle__icon">
1494
1412
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1495
- </button>
1496
- <ul
1497
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1498
- aria-labelledby="card-expandable-example-dropdown-kebab-button"
1499
- hidden
1500
- role="menu"
1501
- >
1502
- <li role="none">
1503
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1504
- </li>
1505
- <li role="none">
1506
- <button
1507
- class="pf-v6-c-dropdown__menu-item"
1508
- role="menuitem"
1509
- type="button"
1510
- >Action</button>
1511
- </li>
1512
- <li role="none">
1513
- <a
1514
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1515
- role="menuitem"
1516
- href="#"
1517
- aria-disabled="true"
1518
- tabindex="-1"
1519
- >Disabled link</a>
1520
- </li>
1521
- <li role="none">
1522
- <button
1523
- class="pf-v6-c-dropdown__menu-item"
1524
- role="menuitem"
1525
- type="button"
1526
- disabled
1527
- >Disabled action</button>
1528
- </li>
1529
- <li class="pf-v6-c-divider" role="separator"></li>
1530
- <li role="none">
1531
- <a
1532
- class="pf-v6-c-dropdown__menu-item"
1533
- role="menuitem"
1534
- href="#"
1535
- >Separated link</a>
1536
- </li>
1537
- </ul>
1538
- </div>
1413
+ </span>
1414
+ </button>
1539
1415
  <div class="pf-v6-c-check pf-m-standalone">
1540
1416
  <input
1541
1417
  class="pf-v6-c-check__input"
@@ -1568,77 +1444,37 @@ cssPrefix: pf-v6-c-card
1568
1444
  <div class="pf-v6-c-card__header-toggle">
1569
1445
  <button
1570
1446
  class="pf-v6-c-button pf-m-plain"
1571
- type="button"
1572
- aria-label="Details"
1573
1447
  id="card-expandable-image-example-toggle"
1448
+ type="button"
1574
1449
  aria-labelledby="card-expandable-image-example-title card-expandable-image-example-toggle"
1450
+ aria-label="Details"
1575
1451
  >
1576
- <span class="pf-v6-c-card__header-toggle-icon">
1577
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1452
+ <span class="pf-v6-c-button__icon pf-m-start">
1453
+ <span class="pf-v6-c-card__header-toggle-icon">
1454
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1455
+ </span>
1578
1456
  </span>
1579
1457
  </button>
1580
1458
  </div>
1581
1459
  <div class="pf-v6-c-card__header-main">
1582
1460
  <img
1583
- src="/assets/images/pf-logo-small.svg"
1461
+ src="/assets/images/PF-IconLogo.svg"
1584
1462
  alt="PatternFly logo"
1585
1463
  width="27px"
1586
1464
  />
1587
1465
  </div>
1588
1466
  <div class="pf-v6-c-card__actions">
1589
- <div class="pf-v6-c-dropdown">
1590
- <button
1591
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1592
- id="card-expandable-image-example-dropdown-kebab-button"
1593
- aria-expanded="false"
1594
- type="button"
1595
- aria-label="Actions"
1596
- >
1467
+ <button
1468
+ class="pf-v6-c-menu-toggle pf-m-plain"
1469
+ type="button"
1470
+ aria-expanded="false"
1471
+ aria-label="Menu toggle"
1472
+ id="card-expandable-image-example-menu-toggle-kebab"
1473
+ >
1474
+ <span class="pf-v6-c-menu-toggle__icon">
1597
1475
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1598
- </button>
1599
- <ul
1600
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1601
- aria-labelledby="card-expandable-image-example-dropdown-kebab-button"
1602
- hidden
1603
- role="menu"
1604
- >
1605
- <li role="none">
1606
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1607
- </li>
1608
- <li role="none">
1609
- <button
1610
- class="pf-v6-c-dropdown__menu-item"
1611
- role="menuitem"
1612
- type="button"
1613
- >Action</button>
1614
- </li>
1615
- <li role="none">
1616
- <a
1617
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1618
- role="menuitem"
1619
- href="#"
1620
- aria-disabled="true"
1621
- tabindex="-1"
1622
- >Disabled link</a>
1623
- </li>
1624
- <li role="none">
1625
- <button
1626
- class="pf-v6-c-dropdown__menu-item"
1627
- role="menuitem"
1628
- type="button"
1629
- disabled
1630
- >Disabled action</button>
1631
- </li>
1632
- <li class="pf-v6-c-divider" role="separator"></li>
1633
- <li role="none">
1634
- <a
1635
- class="pf-v6-c-dropdown__menu-item"
1636
- role="menuitem"
1637
- href="#"
1638
- >Separated link</a>
1639
- </li>
1640
- </ul>
1641
- </div>
1476
+ </span>
1477
+ </button>
1642
1478
  <div class="pf-v6-c-check pf-m-standalone">
1643
1479
  <input
1644
1480
  class="pf-v6-c-check__input"
@@ -1663,70 +1499,30 @@ cssPrefix: pf-v6-c-card
1663
1499
  <div class="pf-v6-c-card__header-toggle">
1664
1500
  <button
1665
1501
  class="pf-v6-c-button pf-m-plain"
1666
- type="button"
1667
- aria-label="Details"
1668
1502
  id="card-expanded-example-toggle"
1503
+ type="button"
1669
1504
  aria-labelledby="card-expanded-example-title card-expanded-example-toggle"
1505
+ aria-label="Details"
1670
1506
  >
1671
- <span class="pf-v6-c-card__header-toggle-icon">
1672
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1507
+ <span class="pf-v6-c-button__icon pf-m-start">
1508
+ <span class="pf-v6-c-card__header-toggle-icon">
1509
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1510
+ </span>
1673
1511
  </span>
1674
1512
  </button>
1675
1513
  </div>
1676
1514
  <div class="pf-v6-c-card__actions">
1677
- <div class="pf-v6-c-dropdown">
1678
- <button
1679
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1680
- id="card-expanded-example-dropdown-kebab-button"
1681
- aria-expanded="false"
1682
- type="button"
1683
- aria-label="Actions"
1684
- >
1515
+ <button
1516
+ class="pf-v6-c-menu-toggle pf-m-plain"
1517
+ type="button"
1518
+ aria-expanded="false"
1519
+ aria-label="Menu toggle"
1520
+ id="card-expanded-example-menu-toggle-kebab"
1521
+ >
1522
+ <span class="pf-v6-c-menu-toggle__icon">
1685
1523
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1686
- </button>
1687
- <ul
1688
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1689
- aria-labelledby="card-expanded-example-dropdown-kebab-button"
1690
- hidden
1691
- role="menu"
1692
- >
1693
- <li role="none">
1694
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1695
- </li>
1696
- <li role="none">
1697
- <button
1698
- class="pf-v6-c-dropdown__menu-item"
1699
- role="menuitem"
1700
- type="button"
1701
- >Action</button>
1702
- </li>
1703
- <li role="none">
1704
- <a
1705
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1706
- role="menuitem"
1707
- href="#"
1708
- aria-disabled="true"
1709
- tabindex="-1"
1710
- >Disabled link</a>
1711
- </li>
1712
- <li role="none">
1713
- <button
1714
- class="pf-v6-c-dropdown__menu-item"
1715
- role="menuitem"
1716
- type="button"
1717
- disabled
1718
- >Disabled action</button>
1719
- </li>
1720
- <li class="pf-v6-c-divider" role="separator"></li>
1721
- <li role="none">
1722
- <a
1723
- class="pf-v6-c-dropdown__menu-item"
1724
- role="menuitem"
1725
- href="#"
1726
- >Separated link</a>
1727
- </li>
1728
- </ul>
1729
- </div>
1524
+ </span>
1525
+ </button>
1730
1526
  <div class="pf-v6-c-check pf-m-standalone">
1731
1527
  <input
1732
1528
  class="pf-v6-c-check__input"
@@ -1759,59 +1555,17 @@ cssPrefix: pf-v6-c-card
1759
1555
  <div class="pf-v6-c-card pf-m-full-height" id="card-full-height-example">
1760
1556
  <div class="pf-v6-c-card__header">
1761
1557
  <div class="pf-v6-c-card__actions">
1762
- <div class="pf-v6-c-dropdown">
1763
- <button
1764
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1765
- id="card-full-height-example-dropdown-kebab-button"
1766
- aria-expanded="false"
1767
- type="button"
1768
- aria-label="Actions"
1769
- >
1558
+ <button
1559
+ class="pf-v6-c-menu-toggle pf-m-plain"
1560
+ type="button"
1561
+ aria-expanded="false"
1562
+ aria-label="Menu toggle"
1563
+ id="card-full-height-example-menu-toggle-kebab"
1564
+ >
1565
+ <span class="pf-v6-c-menu-toggle__icon">
1770
1566
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1771
- </button>
1772
- <ul
1773
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1774
- aria-labelledby="card-full-height-example-dropdown-kebab-button"
1775
- hidden
1776
- role="menu"
1777
- >
1778
- <li role="none">
1779
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1780
- </li>
1781
- <li role="none">
1782
- <button
1783
- class="pf-v6-c-dropdown__menu-item"
1784
- role="menuitem"
1785
- type="button"
1786
- >Action</button>
1787
- </li>
1788
- <li role="none">
1789
- <a
1790
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1791
- role="menuitem"
1792
- href="#"
1793
- aria-disabled="true"
1794
- tabindex="-1"
1795
- >Disabled link</a>
1796
- </li>
1797
- <li role="none">
1798
- <button
1799
- class="pf-v6-c-dropdown__menu-item"
1800
- role="menuitem"
1801
- type="button"
1802
- disabled
1803
- >Disabled action</button>
1804
- </li>
1805
- <li class="pf-v6-c-divider" role="separator"></li>
1806
- <li role="none">
1807
- <a
1808
- class="pf-v6-c-dropdown__menu-item"
1809
- role="menuitem"
1810
- href="#"
1811
- >Separated link</a>
1812
- </li>
1813
- </ul>
1814
- </div>
1567
+ </span>
1568
+ </button>
1815
1569
  <div class="pf-v6-c-check pf-m-standalone">
1816
1570
  <input
1817
1571
  class="pf-v6-c-check__input"
@@ -1844,59 +1598,17 @@ cssPrefix: pf-v6-c-card
1844
1598
  <div class="pf-v6-c-card" id="card-toggle-on-right-example">
1845
1599
  <div class="pf-v6-c-card__header pf-m-toggle-right">
1846
1600
  <div class="pf-v6-c-card__actions">
1847
- <div class="pf-v6-c-dropdown">
1848
- <button
1849
- class="pf-v6-c-dropdown__toggle pf-m-plain"
1850
- id="card-toggle-on-right-example-dropdown-kebab-button"
1851
- aria-expanded="false"
1852
- type="button"
1853
- aria-label="Actions"
1854
- >
1601
+ <button
1602
+ class="pf-v6-c-menu-toggle pf-m-plain"
1603
+ type="button"
1604
+ aria-expanded="false"
1605
+ aria-label="Menu toggle"
1606
+ id="card-toggle-on-right-example-menu-toggle-kebab"
1607
+ >
1608
+ <span class="pf-v6-c-menu-toggle__icon">
1855
1609
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1856
- </button>
1857
- <ul
1858
- class="pf-v6-c-dropdown__menu pf-m-align-right"
1859
- aria-labelledby="card-toggle-on-right-example-dropdown-kebab-button"
1860
- hidden
1861
- role="menu"
1862
- >
1863
- <li role="none">
1864
- <a class="pf-v6-c-dropdown__menu-item" role="menuitem" href="#">Link</a>
1865
- </li>
1866
- <li role="none">
1867
- <button
1868
- class="pf-v6-c-dropdown__menu-item"
1869
- role="menuitem"
1870
- type="button"
1871
- >Action</button>
1872
- </li>
1873
- <li role="none">
1874
- <a
1875
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
1876
- role="menuitem"
1877
- href="#"
1878
- aria-disabled="true"
1879
- tabindex="-1"
1880
- >Disabled link</a>
1881
- </li>
1882
- <li role="none">
1883
- <button
1884
- class="pf-v6-c-dropdown__menu-item"
1885
- role="menuitem"
1886
- type="button"
1887
- disabled
1888
- >Disabled action</button>
1889
- </li>
1890
- <li class="pf-v6-c-divider" role="separator"></li>
1891
- <li role="none">
1892
- <a
1893
- class="pf-v6-c-dropdown__menu-item"
1894
- role="menuitem"
1895
- href="#"
1896
- >Separated link</a>
1897
- </li>
1898
- </ul>
1899
- </div>
1610
+ </span>
1611
+ </button>
1900
1612
  <div class="pf-v6-c-check pf-m-standalone">
1901
1613
  <input
1902
1614
  class="pf-v6-c-check__input"
@@ -1919,13 +1631,15 @@ cssPrefix: pf-v6-c-card
1919
1631
  <div class="pf-v6-c-card__header-toggle">
1920
1632
  <button
1921
1633
  class="pf-v6-c-button pf-m-plain"
1922
- type="button"
1923
- aria-label="Details"
1924
1634
  id="card-toggle-on-right-example-toggle"
1635
+ type="button"
1925
1636
  aria-labelledby="card-toggle-on-right-example-title card-toggle-on-right-example-toggle"
1637
+ aria-label="Details"
1926
1638
  >
1927
- <span class="pf-v6-c-card__header-toggle-icon">
1928
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1639
+ <span class="pf-v6-c-button__icon pf-m-start">
1640
+ <span class="pf-v6-c-card__header-toggle-icon">
1641
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1642
+ </span>
1929
1643
  </span>
1930
1644
  </button>
1931
1645
  </div>