@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.60

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 (392) 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.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -16,7 +16,8 @@ cssPrefix: pf-d-back-to-top
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
- <header class="pf-v6-c-masthead" id="back-to-top-basic-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="back-to-top-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
22
23
  <button
@@ -58,7 +59,7 @@ cssPrefix: pf-d-back-to-top
58
59
  y1="2.25860997e-13%"
59
60
  x2="32%"
60
61
  y2="100%"
61
- id="linearGradient-back-to-top-basic-example-masthead"
62
+ id="linearGradient-back-to-top-basic-example-docked"
62
63
  >
63
64
  <stop stop-color="#2B9AF3" offset="0%" />
64
65
  <stop
@@ -112,11 +113,11 @@ cssPrefix: pf-d-back-to-top
112
113
  />
113
114
  <path
114
115
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
115
- fill="url(#linearGradient-back-to-top-basic-example-masthead)"
116
+ fill="url(#linearGradient-back-to-top-basic-example-docked)"
116
117
  />
117
118
  <path
118
119
  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"
119
- fill="url(#linearGradient-back-to-top-basic-example-masthead)"
120
+ fill="url(#linearGradient-back-to-top-basic-example-docked)"
120
121
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
122
  />
122
123
  </g>
@@ -128,7 +129,7 @@ cssPrefix: pf-d-back-to-top
128
129
  <div class="pf-v6-c-masthead__content">
129
130
  <div
130
131
  class="pf-v6-c-toolbar pf-m-static"
131
- id="back-to-top-basic-example-masthead-toolbar"
132
+ id="back-to-top-basic-example-docked-toolbar"
132
133
  >
133
134
  <div class="pf-v6-c-toolbar__content">
134
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -195,44 +196,46 @@ cssPrefix: pf-d-back-to-top
195
196
  </div>
196
197
  </header>
197
198
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="back-to-top-basic-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
199
+ <div class="pf-v6-c-page__sidebar-main">
200
+ <div class="pf-v6-c-page__sidebar-body">
201
+ <nav
202
+ class="pf-v6-c-nav"
203
+ id="back-to-top-basic-example-primary-nav"
204
+ aria-label="Global"
205
+ >
206
+ <ul class="pf-v6-c-nav__list" role="list">
207
+ <li class="pf-v6-c-nav__item">
208
+ <a href="#" class="pf-v6-c-nav__link">
209
+ <span class="pf-v6-c-nav__link-text">System panel</span>
210
+ </a>
211
+ </li>
212
+ <li class="pf-v6-c-nav__item">
213
+ <a
214
+ href="#"
215
+ class="pf-v6-c-nav__link pf-m-current"
216
+ aria-current="page"
217
+ >
218
+ <span class="pf-v6-c-nav__link-text">Policy</span>
219
+ </a>
220
+ </li>
221
+ <li class="pf-v6-c-nav__item">
222
+ <a href="#" class="pf-v6-c-nav__link">
223
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
224
+ </a>
225
+ </li>
226
+ <li class="pf-v6-c-nav__item">
227
+ <a href="#" class="pf-v6-c-nav__link">
228
+ <span class="pf-v6-c-nav__link-text">Network services</span>
229
+ </a>
230
+ </li>
231
+ <li class="pf-v6-c-nav__item">
232
+ <a href="#" class="pf-v6-c-nav__link">
233
+ <span class="pf-v6-c-nav__link-text">Server</span>
234
+ </a>
235
+ </li>
236
+ </ul>
237
+ </nav>
238
+ </div>
236
239
  </div>
237
240
  </div>
238
241
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -250,21 +253,57 @@ cssPrefix: pf-d-back-to-top
250
253
  </li>
251
254
  <li class="pf-v6-c-breadcrumb__item">
252
255
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
256
+ <svg
257
+ class="pf-v6-svg"
258
+ viewBox="0 0 20 20"
259
+ fill="currentColor"
260
+ aria-hidden="true"
261
+ role="img"
262
+ width="1em"
263
+ height="1em"
264
+ >
265
+ <path
266
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
267
+ />
268
+ </svg>
254
269
  </span>
255
270
 
256
271
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
272
  </li>
258
273
  <li class="pf-v6-c-breadcrumb__item">
259
274
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
275
+ <svg
276
+ class="pf-v6-svg"
277
+ viewBox="0 0 20 20"
278
+ fill="currentColor"
279
+ aria-hidden="true"
280
+ role="img"
281
+ width="1em"
282
+ height="1em"
283
+ >
284
+ <path
285
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
286
+ />
287
+ </svg>
261
288
  </span>
262
289
 
263
290
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
291
  </li>
265
292
  <li class="pf-v6-c-breadcrumb__item">
266
293
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
+ <svg
295
+ class="pf-v6-svg"
296
+ viewBox="0 0 20 20"
297
+ fill="currentColor"
298
+ aria-hidden="true"
299
+ role="img"
300
+ width="1em"
301
+ height="1em"
302
+ >
303
+ <path
304
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
305
+ />
306
+ </svg>
268
307
  </span>
269
308
 
270
309
  <a
@@ -446,7 +485,19 @@ cssPrefix: pf-d-back-to-top
446
485
  >
447
486
  <span class="pf-v6-c-button__text">Back to top</span>
448
487
  <span class="pf-v6-c-button__icon pf-m-end">
449
- <i class="fas fa-angle-up" aria-hidden="true"></i>
488
+ <svg
489
+ class="pf-v6-svg"
490
+ viewBox="0 0 320 512"
491
+ fill="currentColor"
492
+ aria-hidden="true"
493
+ role="img"
494
+ width="1em"
495
+ height="1em"
496
+ >
497
+ <path
498
+ d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
499
+ />
500
+ </svg>
450
501
  </span>
451
502
  </a>
452
503
  </div>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -17,7 +17,8 @@ wrapperTag: div
17
17
  <span class="pf-v6-c-button__text">Skip to content</span>
18
18
  </a>
19
19
  </div>
20
- <header class="pf-v6-c-masthead" id="banner-basic-example-masthead">
20
+
21
+ <header class="pf-v6-c-masthead" id="banner-basic-example-docked">
21
22
  <div class="pf-v6-c-masthead__main">
22
23
  <span class="pf-v6-c-masthead__toggle">
23
24
  <button
@@ -59,7 +60,7 @@ wrapperTag: div
59
60
  y1="2.25860997e-13%"
60
61
  x2="32%"
61
62
  y2="100%"
62
- id="linearGradient-banner-basic-example-masthead"
63
+ id="linearGradient-banner-basic-example-docked"
63
64
  >
64
65
  <stop stop-color="#2B9AF3" offset="0%" />
65
66
  <stop
@@ -113,11 +114,11 @@ wrapperTag: div
113
114
  />
114
115
  <path
115
116
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
116
- fill="url(#linearGradient-banner-basic-example-masthead)"
117
+ fill="url(#linearGradient-banner-basic-example-docked)"
117
118
  />
118
119
  <path
119
120
  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"
120
- fill="url(#linearGradient-banner-basic-example-masthead)"
121
+ fill="url(#linearGradient-banner-basic-example-docked)"
121
122
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
122
123
  />
123
124
  </g>
@@ -129,7 +130,7 @@ wrapperTag: div
129
130
  <div class="pf-v6-c-masthead__content">
130
131
  <div
131
132
  class="pf-v6-c-toolbar pf-m-static"
132
- id="banner-basic-example-masthead-toolbar"
133
+ id="banner-basic-example-docked-toolbar"
133
134
  >
134
135
  <div class="pf-v6-c-toolbar__content">
135
136
  <div class="pf-v6-c-toolbar__content-section">
@@ -196,44 +197,46 @@ wrapperTag: div
196
197
  </div>
197
198
  </header>
198
199
  <div class="pf-v6-c-page__sidebar">
199
- <div class="pf-v6-c-page__sidebar-body">
200
- <nav
201
- class="pf-v6-c-nav"
202
- id="banner-basic-example-primary-nav"
203
- aria-label="Global"
204
- >
205
- <ul class="pf-v6-c-nav__list" role="list">
206
- <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">
208
- <span class="pf-v6-c-nav__link-text">System panel</span>
209
- </a>
210
- </li>
211
- <li class="pf-v6-c-nav__item">
212
- <a
213
- href="#"
214
- class="pf-v6-c-nav__link pf-m-current"
215
- aria-current="page"
216
- >
217
- <span class="pf-v6-c-nav__link-text">Policy</span>
218
- </a>
219
- </li>
220
- <li class="pf-v6-c-nav__item">
221
- <a href="#" class="pf-v6-c-nav__link">
222
- <span class="pf-v6-c-nav__link-text">Authentication</span>
223
- </a>
224
- </li>
225
- <li class="pf-v6-c-nav__item">
226
- <a href="#" class="pf-v6-c-nav__link">
227
- <span class="pf-v6-c-nav__link-text">Network services</span>
228
- </a>
229
- </li>
230
- <li class="pf-v6-c-nav__item">
231
- <a href="#" class="pf-v6-c-nav__link">
232
- <span class="pf-v6-c-nav__link-text">Server</span>
233
- </a>
234
- </li>
235
- </ul>
236
- </nav>
200
+ <div class="pf-v6-c-page__sidebar-main">
201
+ <div class="pf-v6-c-page__sidebar-body">
202
+ <nav
203
+ class="pf-v6-c-nav"
204
+ id="banner-basic-example-primary-nav"
205
+ aria-label="Global"
206
+ >
207
+ <ul class="pf-v6-c-nav__list" role="list">
208
+ <li class="pf-v6-c-nav__item">
209
+ <a href="#" class="pf-v6-c-nav__link">
210
+ <span class="pf-v6-c-nav__link-text">System panel</span>
211
+ </a>
212
+ </li>
213
+ <li class="pf-v6-c-nav__item">
214
+ <a
215
+ href="#"
216
+ class="pf-v6-c-nav__link pf-m-current"
217
+ aria-current="page"
218
+ >
219
+ <span class="pf-v6-c-nav__link-text">Policy</span>
220
+ </a>
221
+ </li>
222
+ <li class="pf-v6-c-nav__item">
223
+ <a href="#" class="pf-v6-c-nav__link">
224
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
225
+ </a>
226
+ </li>
227
+ <li class="pf-v6-c-nav__item">
228
+ <a href="#" class="pf-v6-c-nav__link">
229
+ <span class="pf-v6-c-nav__link-text">Network services</span>
230
+ </a>
231
+ </li>
232
+ <li class="pf-v6-c-nav__item">
233
+ <a href="#" class="pf-v6-c-nav__link">
234
+ <span class="pf-v6-c-nav__link-text">Server</span>
235
+ </a>
236
+ </li>
237
+ </ul>
238
+ </nav>
239
+ </div>
237
240
  </div>
238
241
  </div>
239
242
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -269,21 +272,57 @@ wrapperTag: div
269
272
  </li>
270
273
  <li class="pf-v6-c-breadcrumb__item">
271
274
  <span class="pf-v6-c-breadcrumb__item-divider">
272
- <i class="fas fa-angle-right" aria-hidden="true"></i>
275
+ <svg
276
+ class="pf-v6-svg"
277
+ viewBox="0 0 20 20"
278
+ fill="currentColor"
279
+ aria-hidden="true"
280
+ role="img"
281
+ width="1em"
282
+ height="1em"
283
+ >
284
+ <path
285
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
286
+ />
287
+ </svg>
273
288
  </span>
274
289
 
275
290
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
276
291
  </li>
277
292
  <li class="pf-v6-c-breadcrumb__item">
278
293
  <span class="pf-v6-c-breadcrumb__item-divider">
279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
+ <svg
295
+ class="pf-v6-svg"
296
+ viewBox="0 0 20 20"
297
+ fill="currentColor"
298
+ aria-hidden="true"
299
+ role="img"
300
+ width="1em"
301
+ height="1em"
302
+ >
303
+ <path
304
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
305
+ />
306
+ </svg>
280
307
  </span>
281
308
 
282
309
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
283
310
  </li>
284
311
  <li class="pf-v6-c-breadcrumb__item">
285
312
  <span class="pf-v6-c-breadcrumb__item-divider">
286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
313
+ <svg
314
+ class="pf-v6-svg"
315
+ viewBox="0 0 20 20"
316
+ fill="currentColor"
317
+ aria-hidden="true"
318
+ role="img"
319
+ width="1em"
320
+ height="1em"
321
+ >
322
+ <path
323
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
324
+ />
325
+ </svg>
287
326
  </span>
288
327
 
289
328
  <a
@@ -496,7 +535,8 @@ wrapperTag: div
496
535
  <span class="pf-v6-c-button__text">Skip to content</span>
497
536
  </a>
498
537
  </div>
499
- <header class="pf-v6-c-masthead" id="banner-top-bottom-example-masthead">
538
+
539
+ <header class="pf-v6-c-masthead" id="banner-top-bottom-example-docked">
500
540
  <div class="pf-v6-c-masthead__main">
501
541
  <span class="pf-v6-c-masthead__toggle">
502
542
  <button
@@ -541,7 +581,7 @@ wrapperTag: div
541
581
  y1="2.25860997e-13%"
542
582
  x2="32%"
543
583
  y2="100%"
544
- id="linearGradient-banner-top-bottom-example-masthead"
584
+ id="linearGradient-banner-top-bottom-example-docked"
545
585
  >
546
586
  <stop stop-color="#2B9AF3" offset="0%" />
547
587
  <stop
@@ -600,11 +640,11 @@ wrapperTag: div
600
640
  />
601
641
  <path
602
642
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
603
- fill="url(#linearGradient-banner-top-bottom-example-masthead)"
643
+ fill="url(#linearGradient-banner-top-bottom-example-docked)"
604
644
  />
605
645
  <path
606
646
  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"
607
- fill="url(#linearGradient-banner-top-bottom-example-masthead)"
647
+ fill="url(#linearGradient-banner-top-bottom-example-docked)"
608
648
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
609
649
  />
610
650
  </g>
@@ -616,7 +656,7 @@ wrapperTag: div
616
656
  <div class="pf-v6-c-masthead__content">
617
657
  <div
618
658
  class="pf-v6-c-toolbar pf-m-static"
619
- id="banner-top-bottom-example-masthead-toolbar"
659
+ id="banner-top-bottom-example-docked-toolbar"
620
660
  >
621
661
  <div class="pf-v6-c-toolbar__content">
622
662
  <div class="pf-v6-c-toolbar__content-section">
@@ -683,44 +723,46 @@ wrapperTag: div
683
723
  </div>
684
724
  </header>
685
725
  <div class="pf-v6-c-page__sidebar">
686
- <div class="pf-v6-c-page__sidebar-body">
687
- <nav
688
- class="pf-v6-c-nav"
689
- id="banner-top-bottom-example-primary-nav"
690
- aria-label="Global"
691
- >
692
- <ul class="pf-v6-c-nav__list" role="list">
693
- <li class="pf-v6-c-nav__item">
694
- <a href="#" class="pf-v6-c-nav__link">
695
- <span class="pf-v6-c-nav__link-text">System panel</span>
696
- </a>
697
- </li>
698
- <li class="pf-v6-c-nav__item">
699
- <a
700
- href="#"
701
- class="pf-v6-c-nav__link pf-m-current"
702
- aria-current="page"
703
- >
704
- <span class="pf-v6-c-nav__link-text">Policy</span>
705
- </a>
706
- </li>
707
- <li class="pf-v6-c-nav__item">
708
- <a href="#" class="pf-v6-c-nav__link">
709
- <span class="pf-v6-c-nav__link-text">Authentication</span>
710
- </a>
711
- </li>
712
- <li class="pf-v6-c-nav__item">
713
- <a href="#" class="pf-v6-c-nav__link">
714
- <span class="pf-v6-c-nav__link-text">Network services</span>
715
- </a>
716
- </li>
717
- <li class="pf-v6-c-nav__item">
718
- <a href="#" class="pf-v6-c-nav__link">
719
- <span class="pf-v6-c-nav__link-text">Server</span>
720
- </a>
721
- </li>
722
- </ul>
723
- </nav>
726
+ <div class="pf-v6-c-page__sidebar-main">
727
+ <div class="pf-v6-c-page__sidebar-body">
728
+ <nav
729
+ class="pf-v6-c-nav"
730
+ id="banner-top-bottom-example-primary-nav"
731
+ aria-label="Global"
732
+ >
733
+ <ul class="pf-v6-c-nav__list" role="list">
734
+ <li class="pf-v6-c-nav__item">
735
+ <a href="#" class="pf-v6-c-nav__link">
736
+ <span class="pf-v6-c-nav__link-text">System panel</span>
737
+ </a>
738
+ </li>
739
+ <li class="pf-v6-c-nav__item">
740
+ <a
741
+ href="#"
742
+ class="pf-v6-c-nav__link pf-m-current"
743
+ aria-current="page"
744
+ >
745
+ <span class="pf-v6-c-nav__link-text">Policy</span>
746
+ </a>
747
+ </li>
748
+ <li class="pf-v6-c-nav__item">
749
+ <a href="#" class="pf-v6-c-nav__link">
750
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
751
+ </a>
752
+ </li>
753
+ <li class="pf-v6-c-nav__item">
754
+ <a href="#" class="pf-v6-c-nav__link">
755
+ <span class="pf-v6-c-nav__link-text">Network services</span>
756
+ </a>
757
+ </li>
758
+ <li class="pf-v6-c-nav__item">
759
+ <a href="#" class="pf-v6-c-nav__link">
760
+ <span class="pf-v6-c-nav__link-text">Server</span>
761
+ </a>
762
+ </li>
763
+ </ul>
764
+ </nav>
765
+ </div>
724
766
  </div>
725
767
  </div>
726
768
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -738,21 +780,57 @@ wrapperTag: div
738
780
  </li>
739
781
  <li class="pf-v6-c-breadcrumb__item">
740
782
  <span class="pf-v6-c-breadcrumb__item-divider">
741
- <i class="fas fa-angle-right" aria-hidden="true"></i>
783
+ <svg
784
+ class="pf-v6-svg"
785
+ viewBox="0 0 20 20"
786
+ fill="currentColor"
787
+ aria-hidden="true"
788
+ role="img"
789
+ width="1em"
790
+ height="1em"
791
+ >
792
+ <path
793
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
794
+ />
795
+ </svg>
742
796
  </span>
743
797
 
744
798
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
745
799
  </li>
746
800
  <li class="pf-v6-c-breadcrumb__item">
747
801
  <span class="pf-v6-c-breadcrumb__item-divider">
748
- <i class="fas fa-angle-right" aria-hidden="true"></i>
802
+ <svg
803
+ class="pf-v6-svg"
804
+ viewBox="0 0 20 20"
805
+ fill="currentColor"
806
+ aria-hidden="true"
807
+ role="img"
808
+ width="1em"
809
+ height="1em"
810
+ >
811
+ <path
812
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
813
+ />
814
+ </svg>
749
815
  </span>
750
816
 
751
817
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
752
818
  </li>
753
819
  <li class="pf-v6-c-breadcrumb__item">
754
820
  <span class="pf-v6-c-breadcrumb__item-divider">
755
- <i class="fas fa-angle-right" aria-hidden="true"></i>
821
+ <svg
822
+ class="pf-v6-svg"
823
+ viewBox="0 0 20 20"
824
+ fill="currentColor"
825
+ aria-hidden="true"
826
+ role="img"
827
+ width="1em"
828
+ height="1em"
829
+ >
830
+ <path
831
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
832
+ />
833
+ </svg>
756
834
  </span>
757
835
 
758
836
  <a
package/docs/demos/Button/examples/Button.md CHANGED
@@ -170,7 +170,19 @@ cssPrefix: pf-d-button
170
170
  <div class="pf-v6-c-form__actions">
171
171
  <button class="pf-v6-c-button pf-m-primary" type="submit">
172
172
  <span class="pf-v6-c-button__icon pf-m-start">
173
- <i class="fas fa-check-circle" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 512 512"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
184
+ />
185
+ </svg>
174
186
  </span>
175
187
  <span class="pf-v6-c-button__text">Logged in</span>
176
188
  </button>