@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/components/DatePicker/examples/DatePicker.md CHANGED
@@ -31,7 +31,19 @@ cssPrefix: pf-v6-c-date-picker
31
31
  aria-label="Toggle date picker"
32
32
  >
33
33
  <span class="pf-v6-c-button__icon">
34
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
34
+ <svg
35
+ class="pf-v6-svg"
36
+ viewBox="0 0 448 512"
37
+ fill="currentColor"
38
+ aria-hidden="true"
39
+ role="img"
40
+ width="1em"
41
+ height="1em"
42
+ >
43
+ <path
44
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
45
+ />
46
+ </svg>
35
47
  </span>
36
48
  </button>
37
49
  </div>
@@ -65,7 +77,19 @@ cssPrefix: pf-v6-c-date-picker
65
77
  aria-label="Toggle date picker"
66
78
  >
67
79
  <span class="pf-v6-c-button__icon">
68
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
80
+ <svg
81
+ class="pf-v6-svg"
82
+ viewBox="0 0 448 512"
83
+ fill="currentColor"
84
+ aria-hidden="true"
85
+ role="img"
86
+ width="1em"
87
+ height="1em"
88
+ >
89
+ <path
90
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
91
+ />
92
+ </svg>
69
93
  </span>
70
94
  </button>
71
95
  </div>
@@ -112,7 +136,19 @@ cssPrefix: pf-v6-c-date-picker
112
136
  aria-label="Toggle date picker"
113
137
  >
114
138
  <span class="pf-v6-c-button__icon">
115
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
139
+ <svg
140
+ class="pf-v6-svg"
141
+ viewBox="0 0 448 512"
142
+ fill="currentColor"
143
+ aria-hidden="true"
144
+ role="img"
145
+ width="1em"
146
+ height="1em"
147
+ >
148
+ <path
149
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
150
+ />
151
+ </svg>
116
152
  </span>
117
153
  </button>
118
154
  </div>
@@ -159,7 +195,19 @@ cssPrefix: pf-v6-c-date-picker
159
195
  aria-label="Toggle date picker"
160
196
  >
161
197
  <span class="pf-v6-c-button__icon">
162
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 448 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
209
+ />
210
+ </svg>
163
211
  </span>
164
212
  </button>
165
213
  </div>
@@ -197,7 +245,19 @@ cssPrefix: pf-v6-c-date-picker
197
245
  aria-label="Toggle date picker"
198
246
  >
199
247
  <span class="pf-v6-c-button__icon">
200
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
248
+ <svg
249
+ class="pf-v6-svg"
250
+ viewBox="0 0 448 512"
251
+ fill="currentColor"
252
+ aria-hidden="true"
253
+ role="img"
254
+ width="1em"
255
+ height="1em"
256
+ >
257
+ <path
258
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
259
+ />
260
+ </svg>
201
261
  </span>
202
262
  </button>
203
263
  </div>
@@ -234,7 +294,19 @@ cssPrefix: pf-v6-c-date-picker
234
294
  aria-label="Toggle date picker"
235
295
  >
236
296
  <span class="pf-v6-c-button__icon">
237
- <i class="fas fa-calendar-alt" aria-hidden="true"></i>
297
+ <svg
298
+ class="pf-v6-svg"
299
+ viewBox="0 0 448 512"
300
+ fill="currentColor"
301
+ aria-hidden="true"
302
+ role="img"
303
+ width="1em"
304
+ height="1em"
305
+ >
306
+ <path
307
+ d="M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z"
308
+ />
309
+ </svg>
238
310
  </span>
239
311
  </button>
240
312
  </div>
package/docs/components/DescriptionList/examples/DescriptionList.md CHANGED
@@ -42,7 +42,19 @@ cssPrefix: pf-v6-c-description-list
42
42
  <div class="pf-v6-c-description-list__text">
43
43
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
44
44
  <span class="pf-v6-c-button__icon pf-m-start">
45
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
45
+ <svg
46
+ class="pf-v6-svg"
47
+ viewBox="0 0 512 512"
48
+ fill="currentColor"
49
+ aria-hidden="true"
50
+ role="img"
51
+ width="1em"
52
+ height="1em"
53
+ >
54
+ <path
55
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
56
+ />
57
+ </svg>
46
58
  </span>
47
59
  <span class="pf-v6-c-button__text">app=MyApp</span>
48
60
  </button>
@@ -119,7 +131,19 @@ cssPrefix: pf-v6-c-description-list
119
131
  <div class="pf-v6-c-description-list__text">
120
132
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
121
133
  <span class="pf-v6-c-button__icon pf-m-start">
122
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
134
+ <svg
135
+ class="pf-v6-svg"
136
+ viewBox="0 0 512 512"
137
+ fill="currentColor"
138
+ aria-hidden="true"
139
+ role="img"
140
+ width="1em"
141
+ height="1em"
142
+ >
143
+ <path
144
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
145
+ />
146
+ </svg>
123
147
  </span>
124
148
  <span class="pf-v6-c-button__text">app=MyApp</span>
125
149
  </button>
@@ -186,7 +210,19 @@ cssPrefix: pf-v6-c-description-list
186
210
  <div class="pf-v6-c-description-list__text">
187
211
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
188
212
  <span class="pf-v6-c-button__icon pf-m-start">
189
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
213
+ <svg
214
+ class="pf-v6-svg"
215
+ viewBox="0 0 512 512"
216
+ fill="currentColor"
217
+ aria-hidden="true"
218
+ role="img"
219
+ width="1em"
220
+ height="1em"
221
+ >
222
+ <path
223
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
224
+ />
225
+ </svg>
190
226
  </span>
191
227
  <span class="pf-v6-c-button__text">app=MyApp</span>
192
228
  </button>
@@ -246,7 +282,19 @@ cssPrefix: pf-v6-c-description-list
246
282
  <div class="pf-v6-c-description-list__text">
247
283
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
248
284
  <span class="pf-v6-c-button__icon pf-m-start">
249
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
285
+ <svg
286
+ class="pf-v6-svg"
287
+ viewBox="0 0 512 512"
288
+ fill="currentColor"
289
+ aria-hidden="true"
290
+ role="img"
291
+ width="1em"
292
+ height="1em"
293
+ >
294
+ <path
295
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
296
+ />
297
+ </svg>
250
298
  </span>
251
299
  <span class="pf-v6-c-button__text">app=MyApp</span>
252
300
  </button>
@@ -306,7 +354,19 @@ cssPrefix: pf-v6-c-description-list
306
354
  <div class="pf-v6-c-description-list__text">
307
355
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
308
356
  <span class="pf-v6-c-button__icon pf-m-start">
309
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
357
+ <svg
358
+ class="pf-v6-svg"
359
+ viewBox="0 0 512 512"
360
+ fill="currentColor"
361
+ aria-hidden="true"
362
+ role="img"
363
+ width="1em"
364
+ height="1em"
365
+ >
366
+ <path
367
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
368
+ />
369
+ </svg>
310
370
  </span>
311
371
  <span class="pf-v6-c-button__text">app=MyApp</span>
312
372
  </button>
@@ -366,7 +426,19 @@ cssPrefix: pf-v6-c-description-list
366
426
  <div class="pf-v6-c-description-list__text">
367
427
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
368
428
  <span class="pf-v6-c-button__icon pf-m-start">
369
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
429
+ <svg
430
+ class="pf-v6-svg"
431
+ viewBox="0 0 512 512"
432
+ fill="currentColor"
433
+ aria-hidden="true"
434
+ role="img"
435
+ width="1em"
436
+ height="1em"
437
+ >
438
+ <path
439
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
440
+ />
441
+ </svg>
370
442
  </span>
371
443
  <span class="pf-v6-c-button__text">app=MyApp</span>
372
444
  </button>
@@ -426,7 +498,19 @@ cssPrefix: pf-v6-c-description-list
426
498
  <div class="pf-v6-c-description-list__text">
427
499
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
428
500
  <span class="pf-v6-c-button__icon pf-m-start">
429
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
501
+ <svg
502
+ class="pf-v6-svg"
503
+ viewBox="0 0 512 512"
504
+ fill="currentColor"
505
+ aria-hidden="true"
506
+ role="img"
507
+ width="1em"
508
+ height="1em"
509
+ >
510
+ <path
511
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
512
+ />
513
+ </svg>
430
514
  </span>
431
515
  <span class="pf-v6-c-button__text">app=MyApp</span>
432
516
  </button>
@@ -483,7 +567,19 @@ cssPrefix: pf-v6-c-description-list
483
567
  <div class="pf-v6-c-description-list__text">
484
568
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
485
569
  <span class="pf-v6-c-button__icon pf-m-start">
486
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
570
+ <svg
571
+ class="pf-v6-svg"
572
+ viewBox="0 0 512 512"
573
+ fill="currentColor"
574
+ aria-hidden="true"
575
+ role="img"
576
+ width="1em"
577
+ height="1em"
578
+ >
579
+ <path
580
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
581
+ />
582
+ </svg>
487
583
  </span>
488
584
  <span class="pf-v6-c-button__text">app=MyApp</span>
489
585
  </button>
@@ -543,7 +639,19 @@ cssPrefix: pf-v6-c-description-list
543
639
  <div class="pf-v6-c-description-list__text">
544
640
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
545
641
  <span class="pf-v6-c-button__icon pf-m-start">
546
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
642
+ <svg
643
+ class="pf-v6-svg"
644
+ viewBox="0 0 512 512"
645
+ fill="currentColor"
646
+ aria-hidden="true"
647
+ role="img"
648
+ width="1em"
649
+ height="1em"
650
+ >
651
+ <path
652
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
653
+ />
654
+ </svg>
547
655
  </span>
548
656
  <span class="pf-v6-c-button__text">app=MyApp</span>
549
657
  </button>
@@ -603,7 +711,19 @@ cssPrefix: pf-v6-c-description-list
603
711
  <div class="pf-v6-c-description-list__text">
604
712
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
605
713
  <span class="pf-v6-c-button__icon pf-m-start">
606
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
714
+ <svg
715
+ class="pf-v6-svg"
716
+ viewBox="0 0 512 512"
717
+ fill="currentColor"
718
+ aria-hidden="true"
719
+ role="img"
720
+ width="1em"
721
+ height="1em"
722
+ >
723
+ <path
724
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
725
+ />
726
+ </svg>
607
727
  </span>
608
728
  <span class="pf-v6-c-button__text">app=MyApp</span>
609
729
  </button>
@@ -667,7 +787,19 @@ Column fill will modify the default placement of description list groups to fill
667
787
  <div class="pf-v6-c-description-list__text">
668
788
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
669
789
  <span class="pf-v6-c-button__icon pf-m-start">
670
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
790
+ <svg
791
+ class="pf-v6-svg"
792
+ viewBox="0 0 512 512"
793
+ fill="currentColor"
794
+ aria-hidden="true"
795
+ role="img"
796
+ width="1em"
797
+ height="1em"
798
+ >
799
+ <path
800
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
801
+ />
802
+ </svg>
671
803
  </span>
672
804
  <span class="pf-v6-c-button__text">app=MyApp</span>
673
805
  </button>
@@ -729,7 +861,19 @@ Column fill will modify the default placement of description list groups to fill
729
861
  <div class="pf-v6-c-description-list__text">
730
862
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
731
863
  <span class="pf-v6-c-button__icon pf-m-start">
732
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
864
+ <svg
865
+ class="pf-v6-svg"
866
+ viewBox="0 0 512 512"
867
+ fill="currentColor"
868
+ aria-hidden="true"
869
+ role="img"
870
+ width="1em"
871
+ height="1em"
872
+ >
873
+ <path
874
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
875
+ />
876
+ </svg>
733
877
  </span>
734
878
  <span class="pf-v6-c-button__text">app=MyApp</span>
735
879
  </button>
@@ -790,7 +934,19 @@ Column fill will modify the default placement of description list groups to fill
790
934
  <div class="pf-v6-c-description-list__text">
791
935
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
792
936
  <span class="pf-v6-c-button__icon pf-m-start">
793
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
937
+ <svg
938
+ class="pf-v6-svg"
939
+ viewBox="0 0 512 512"
940
+ fill="currentColor"
941
+ aria-hidden="true"
942
+ role="img"
943
+ width="1em"
944
+ height="1em"
945
+ >
946
+ <path
947
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
948
+ />
949
+ </svg>
794
950
  </span>
795
951
  <span class="pf-v6-c-button__text">app=MyApp</span>
796
952
  </button>
@@ -851,7 +1007,19 @@ Column fill will modify the default placement of description list groups to fill
851
1007
  <div class="pf-v6-c-description-list__text">
852
1008
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
853
1009
  <span class="pf-v6-c-button__icon pf-m-start">
854
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1010
+ <svg
1011
+ class="pf-v6-svg"
1012
+ viewBox="0 0 512 512"
1013
+ fill="currentColor"
1014
+ aria-hidden="true"
1015
+ role="img"
1016
+ width="1em"
1017
+ height="1em"
1018
+ >
1019
+ <path
1020
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1021
+ />
1022
+ </svg>
855
1023
  </span>
856
1024
  <span class="pf-v6-c-button__text">app=MyApp</span>
857
1025
  </button>
@@ -913,7 +1081,19 @@ Column fill will modify the default placement of description list groups to fill
913
1081
  <div class="pf-v6-c-description-list__text">
914
1082
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
915
1083
  <span class="pf-v6-c-button__icon pf-m-start">
916
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1084
+ <svg
1085
+ class="pf-v6-svg"
1086
+ viewBox="0 0 512 512"
1087
+ fill="currentColor"
1088
+ aria-hidden="true"
1089
+ role="img"
1090
+ width="1em"
1091
+ height="1em"
1092
+ >
1093
+ <path
1094
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1095
+ />
1096
+ </svg>
917
1097
  </span>
918
1098
  <span class="pf-v6-c-button__text">app=MyApp</span>
919
1099
  </button>
@@ -973,7 +1153,19 @@ Column fill will modify the default placement of description list groups to fill
973
1153
  <div class="pf-v6-c-description-list__text">
974
1154
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
975
1155
  <span class="pf-v6-c-button__icon pf-m-start">
976
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1156
+ <svg
1157
+ class="pf-v6-svg"
1158
+ viewBox="0 0 512 512"
1159
+ fill="currentColor"
1160
+ aria-hidden="true"
1161
+ role="img"
1162
+ width="1em"
1163
+ height="1em"
1164
+ >
1165
+ <path
1166
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1167
+ />
1168
+ </svg>
977
1169
  </span>
978
1170
  <span class="pf-v6-c-button__text">app=MyApp</span>
979
1171
  </button>
@@ -1033,7 +1225,19 @@ Column fill will modify the default placement of description list groups to fill
1033
1225
  <div class="pf-v6-c-description-list__text">
1034
1226
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1035
1227
  <span class="pf-v6-c-button__icon pf-m-start">
1036
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1228
+ <svg
1229
+ class="pf-v6-svg"
1230
+ viewBox="0 0 512 512"
1231
+ fill="currentColor"
1232
+ aria-hidden="true"
1233
+ role="img"
1234
+ width="1em"
1235
+ height="1em"
1236
+ >
1237
+ <path
1238
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1239
+ />
1240
+ </svg>
1037
1241
  </span>
1038
1242
  <span class="pf-v6-c-button__text">app=MyApp</span>
1039
1243
  </button>
@@ -1095,7 +1299,19 @@ Column fill will modify the default placement of description list groups to fill
1095
1299
  <div class="pf-v6-c-description-list__text">
1096
1300
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1097
1301
  <span class="pf-v6-c-button__icon pf-m-start">
1098
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1302
+ <svg
1303
+ class="pf-v6-svg"
1304
+ viewBox="0 0 512 512"
1305
+ fill="currentColor"
1306
+ aria-hidden="true"
1307
+ role="img"
1308
+ width="1em"
1309
+ height="1em"
1310
+ >
1311
+ <path
1312
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1313
+ />
1314
+ </svg>
1099
1315
  </span>
1100
1316
  <span class="pf-v6-c-button__text">app=MyApp</span>
1101
1317
  </button>
@@ -1155,7 +1371,19 @@ Column fill will modify the default placement of description list groups to fill
1155
1371
  <div class="pf-v6-c-description-list__text">
1156
1372
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1157
1373
  <span class="pf-v6-c-button__icon pf-m-start">
1158
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1374
+ <svg
1375
+ class="pf-v6-svg"
1376
+ viewBox="0 0 512 512"
1377
+ fill="currentColor"
1378
+ aria-hidden="true"
1379
+ role="img"
1380
+ width="1em"
1381
+ height="1em"
1382
+ >
1383
+ <path
1384
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1385
+ />
1386
+ </svg>
1159
1387
  </span>
1160
1388
  <span class="pf-v6-c-button__text">app=MyApp</span>
1161
1389
  </button>
@@ -1217,7 +1445,19 @@ Column fill will modify the default placement of description list groups to fill
1217
1445
  <div class="pf-v6-c-description-list__text">
1218
1446
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1219
1447
  <span class="pf-v6-c-button__icon pf-m-start">
1220
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1448
+ <svg
1449
+ class="pf-v6-svg"
1450
+ viewBox="0 0 512 512"
1451
+ fill="currentColor"
1452
+ aria-hidden="true"
1453
+ role="img"
1454
+ width="1em"
1455
+ height="1em"
1456
+ >
1457
+ <path
1458
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1459
+ />
1460
+ </svg>
1221
1461
  </span>
1222
1462
  <span class="pf-v6-c-button__text">app=MyApp</span>
1223
1463
  </button>
@@ -1277,7 +1517,19 @@ Column fill will modify the default placement of description list groups to fill
1277
1517
  <div class="pf-v6-c-description-list__text">
1278
1518
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1279
1519
  <span class="pf-v6-c-button__icon pf-m-start">
1280
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1520
+ <svg
1521
+ class="pf-v6-svg"
1522
+ viewBox="0 0 512 512"
1523
+ fill="currentColor"
1524
+ aria-hidden="true"
1525
+ role="img"
1526
+ width="1em"
1527
+ height="1em"
1528
+ >
1529
+ <path
1530
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1531
+ />
1532
+ </svg>
1281
1533
  </span>
1282
1534
  <span class="pf-v6-c-button__text">app=MyApp</span>
1283
1535
  </button>
@@ -1341,7 +1593,19 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1341
1593
  <div class="pf-v6-c-description-list__text">
1342
1594
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1343
1595
  <span class="pf-v6-c-button__icon pf-m-start">
1344
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1596
+ <svg
1597
+ class="pf-v6-svg"
1598
+ viewBox="0 0 512 512"
1599
+ fill="currentColor"
1600
+ aria-hidden="true"
1601
+ role="img"
1602
+ width="1em"
1603
+ height="1em"
1604
+ >
1605
+ <path
1606
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1607
+ />
1608
+ </svg>
1345
1609
  </span>
1346
1610
  <span class="pf-v6-c-button__text">app=MyApp</span>
1347
1611
  </button>
@@ -1401,7 +1665,19 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1401
1665
  <div class="pf-v6-c-description-list__text">
1402
1666
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1403
1667
  <span class="pf-v6-c-button__icon pf-m-start">
1404
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1668
+ <svg
1669
+ class="pf-v6-svg"
1670
+ viewBox="0 0 512 512"
1671
+ fill="currentColor"
1672
+ aria-hidden="true"
1673
+ role="img"
1674
+ width="1em"
1675
+ height="1em"
1676
+ >
1677
+ <path
1678
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1679
+ />
1680
+ </svg>
1405
1681
  </span>
1406
1682
  <span class="pf-v6-c-button__text">app=MyApp</span>
1407
1683
  </button>
@@ -1461,7 +1737,19 @@ Cards can be used as description list group wrappers. Using cards in this way ap
1461
1737
  <div class="pf-v6-c-description-list__text">
1462
1738
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1463
1739
  <span class="pf-v6-c-button__icon pf-m-start">
1464
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1740
+ <svg
1741
+ class="pf-v6-svg"
1742
+ viewBox="0 0 512 512"
1743
+ fill="currentColor"
1744
+ aria-hidden="true"
1745
+ role="img"
1746
+ width="1em"
1747
+ height="1em"
1748
+ >
1749
+ <path
1750
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1751
+ />
1752
+ </svg>
1465
1753
  </span>
1466
1754
  <span class="pf-v6-c-button__text">app=MyApp</span>
1467
1755
  </button>
@@ -1617,7 +1905,19 @@ description-list--aria-label="Horizontal 2 column auto term width example" descr
1617
1905
  <div class="pf-v6-c-description-list__text">
1618
1906
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
1619
1907
  <span class="pf-v6-c-button__icon pf-m-start">
1620
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1908
+ <svg
1909
+ class="pf-v6-svg"
1910
+ viewBox="0 0 512 512"
1911
+ fill="currentColor"
1912
+ aria-hidden="true"
1913
+ role="img"
1914
+ width="1em"
1915
+ height="1em"
1916
+ >
1917
+ <path
1918
+ d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"
1919
+ />
1920
+ </svg>
1621
1921
  </span>
1622
1922
  <span class="pf-v6-c-button__text">app=MyApp</span>
1623
1923
  </button>
@@ -1669,8 +1969,8 @@ description-list--aria-label="Horizontal 2 column auto term width example" descr
1669
1969
  | `.pf-m-auto-column-widths` | `.pf-v6-c-description-list` | Modifies the description list to format automatically. |
1670
1970
  | `.pf-m-inline-grid` | `.pf-v6-c-description-list` | Modifies the description list display to inline-grid. |
1671
1971
  | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list number of columns. |
1672
- | `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/tokens/all-patternfly-tokens). |
1673
- | `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/tokens/all-patternfly-tokens). |
1972
+ | `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
1973
+ | `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
1674
1974
 
1675
1975
  <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element. |
1676
1976
  | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element to -1. |