@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/Alert/examples/Alert.md CHANGED
@@ -15,7 +15,8 @@ section: components
15
15
  <span class="pf-v6-c-button__text">Skip to content</span>
16
16
  </a>
17
17
  </div>
18
- <header class="pf-v6-c-masthead" id="alert-basic-example-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="alert-basic-example-docked">
19
20
  <div class="pf-v6-c-masthead__main">
20
21
  <span class="pf-v6-c-masthead__toggle">
21
22
  <button
@@ -57,7 +58,7 @@ section: components
57
58
  y1="2.25860997e-13%"
58
59
  x2="32%"
59
60
  y2="100%"
60
- id="linearGradient-alert-basic-example-masthead"
61
+ id="linearGradient-alert-basic-example-docked"
61
62
  >
62
63
  <stop stop-color="#2B9AF3" offset="0%" />
63
64
  <stop
@@ -111,11 +112,11 @@ section: components
111
112
  />
112
113
  <path
113
114
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
114
- fill="url(#linearGradient-alert-basic-example-masthead)"
115
+ fill="url(#linearGradient-alert-basic-example-docked)"
115
116
  />
116
117
  <path
117
118
  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"
118
- fill="url(#linearGradient-alert-basic-example-masthead)"
119
+ fill="url(#linearGradient-alert-basic-example-docked)"
119
120
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
121
  />
121
122
  </g>
@@ -127,7 +128,7 @@ section: components
127
128
  <div class="pf-v6-c-masthead__content">
128
129
  <div
129
130
  class="pf-v6-c-toolbar pf-m-static"
130
- id="alert-basic-example-masthead-toolbar"
131
+ id="alert-basic-example-docked-toolbar"
131
132
  >
132
133
  <div class="pf-v6-c-toolbar__content">
133
134
  <div class="pf-v6-c-toolbar__content-section">
@@ -194,44 +195,46 @@ section: components
194
195
  </div>
195
196
  </header>
196
197
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="alert-basic-example-primary-nav"
201
- aria-label="Global"
202
- >
203
- <ul class="pf-v6-c-nav__list" role="list">
204
- <li class="pf-v6-c-nav__item">
205
- <a href="#" class="pf-v6-c-nav__link">
206
- <span class="pf-v6-c-nav__link-text">System panel</span>
207
- </a>
208
- </li>
209
- <li class="pf-v6-c-nav__item">
210
- <a
211
- href="#"
212
- class="pf-v6-c-nav__link pf-m-current"
213
- aria-current="page"
214
- >
215
- <span class="pf-v6-c-nav__link-text">Policy</span>
216
- </a>
217
- </li>
218
- <li class="pf-v6-c-nav__item">
219
- <a href="#" class="pf-v6-c-nav__link">
220
- <span class="pf-v6-c-nav__link-text">Authentication</span>
221
- </a>
222
- </li>
223
- <li class="pf-v6-c-nav__item">
224
- <a href="#" class="pf-v6-c-nav__link">
225
- <span class="pf-v6-c-nav__link-text">Network services</span>
226
- </a>
227
- </li>
228
- <li class="pf-v6-c-nav__item">
229
- <a href="#" class="pf-v6-c-nav__link">
230
- <span class="pf-v6-c-nav__link-text">Server</span>
231
- </a>
232
- </li>
233
- </ul>
234
- </nav>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="alert-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>
237
+ </div>
235
238
  </div>
236
239
  </div>
237
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +252,57 @@ section: components
249
252
  </li>
250
253
  <li class="pf-v6-c-breadcrumb__item">
251
254
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
255
+ <svg
256
+ class="pf-v6-svg"
257
+ viewBox="0 0 20 20"
258
+ fill="currentColor"
259
+ aria-hidden="true"
260
+ role="img"
261
+ width="1em"
262
+ height="1em"
263
+ >
264
+ <path
265
+ 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"
266
+ />
267
+ </svg>
253
268
  </span>
254
269
 
255
270
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
271
  </li>
257
272
  <li class="pf-v6-c-breadcrumb__item">
258
273
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 20 20"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ 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"
285
+ />
286
+ </svg>
260
287
  </span>
261
288
 
262
289
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
290
  </li>
264
291
  <li class="pf-v6-c-breadcrumb__item">
265
292
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
293
+ <svg
294
+ class="pf-v6-svg"
295
+ viewBox="0 0 20 20"
296
+ fill="currentColor"
297
+ aria-hidden="true"
298
+ role="img"
299
+ width="1em"
300
+ height="1em"
301
+ >
302
+ <path
303
+ 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"
304
+ />
305
+ </svg>
267
306
  </span>
268
307
 
269
308
  <a
@@ -325,7 +364,19 @@ section: components
325
364
  <li class="pf-v6-c-alert-group__item">
326
365
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
327
366
  <div class="pf-v6-c-alert__icon">
328
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
367
+ <svg
368
+ class="pf-v6-svg"
369
+ viewBox="0 0 512 512"
370
+ fill="currentColor"
371
+ aria-hidden="true"
372
+ role="img"
373
+ width="1em"
374
+ height="1em"
375
+ >
376
+ <path
377
+ 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"
378
+ />
379
+ </svg>
329
380
  </div>
330
381
  <p class="pf-v6-c-alert__title">
331
382
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -338,7 +389,19 @@ section: components
338
389
  aria-label="Close success alert: Newest notification"
339
390
  >
340
391
  <span class="pf-v6-c-button__icon">
341
- <i class="fas fa-times" aria-hidden="true"></i>
392
+ <svg
393
+ class="pf-v6-svg"
394
+ viewBox="0 0 20 20"
395
+ fill="currentColor"
396
+ aria-hidden="true"
397
+ role="img"
398
+ width="1em"
399
+ height="1em"
400
+ >
401
+ <path
402
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
403
+ />
404
+ </svg>
342
405
  </span>
343
406
  </button>
344
407
  </div>
@@ -350,7 +413,19 @@ section: components
350
413
  <li class="pf-v6-c-alert-group__item">
351
414
  <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
352
415
  <div class="pf-v6-c-alert__icon">
353
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
416
+ <svg
417
+ class="pf-v6-svg"
418
+ viewBox="0 0 576 512"
419
+ fill="currentColor"
420
+ aria-hidden="true"
421
+ role="img"
422
+ width="1em"
423
+ height="1em"
424
+ >
425
+ <path
426
+ d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
427
+ />
428
+ </svg>
354
429
  </div>
355
430
  <p class="pf-v6-c-alert__title">
356
431
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -363,7 +438,19 @@ section: components
363
438
  aria-label="Close warning alert: second newest notification"
364
439
  >
365
440
  <span class="pf-v6-c-button__icon">
366
- <i class="fas fa-times" aria-hidden="true"></i>
441
+ <svg
442
+ class="pf-v6-svg"
443
+ viewBox="0 0 20 20"
444
+ fill="currentColor"
445
+ aria-hidden="true"
446
+ role="img"
447
+ width="1em"
448
+ height="1em"
449
+ >
450
+ <path
451
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
452
+ />
453
+ </svg>
367
454
  </span>
368
455
  </button>
369
456
  </div>
@@ -375,7 +462,19 @@ section: components
375
462
  <li class="pf-v6-c-alert-group__item">
376
463
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
377
464
  <div class="pf-v6-c-alert__icon">
378
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
465
+ <svg
466
+ class="pf-v6-svg"
467
+ viewBox="0 0 512 512"
468
+ fill="currentColor"
469
+ aria-hidden="true"
470
+ role="img"
471
+ width="1em"
472
+ height="1em"
473
+ >
474
+ <path
475
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
476
+ />
477
+ </svg>
379
478
  </div>
380
479
  <p class="pf-v6-c-alert__title">
381
480
  <span class="pf-v6-screen-reader">Last notification</span>
@@ -388,7 +487,19 @@ section: components
388
487
  aria-label="Close danger alert: Last notification"
389
488
  >
390
489
  <span class="pf-v6-c-button__icon">
391
- <i class="fas fa-times" aria-hidden="true"></i>
490
+ <svg
491
+ class="pf-v6-svg"
492
+ viewBox="0 0 20 20"
493
+ fill="currentColor"
494
+ aria-hidden="true"
495
+ role="img"
496
+ width="1em"
497
+ height="1em"
498
+ >
499
+ <path
500
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
501
+ />
502
+ </svg>
392
503
  </span>
393
504
  </button>
394
505
  </div>
@@ -413,7 +524,8 @@ section: components
413
524
  <span class="pf-v6-c-button__text">Skip to content</span>
414
525
  </a>
415
526
  </div>
416
- <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
527
+
528
+ <header class="pf-v6-c-masthead" id="alert-horizontal-example-docked">
417
529
  <div class="pf-v6-c-masthead__main">
418
530
  <span class="pf-v6-c-masthead__toggle">
419
531
  <button
@@ -455,7 +567,7 @@ section: components
455
567
  y1="2.25860997e-13%"
456
568
  x2="32%"
457
569
  y2="100%"
458
- id="linearGradient-alert-horizontal-example-masthead"
570
+ id="linearGradient-alert-horizontal-example-docked"
459
571
  >
460
572
  <stop stop-color="#2B9AF3" offset="0%" />
461
573
  <stop
@@ -509,11 +621,11 @@ section: components
509
621
  />
510
622
  <path
511
623
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
512
- fill="url(#linearGradient-alert-horizontal-example-masthead)"
624
+ fill="url(#linearGradient-alert-horizontal-example-docked)"
513
625
  />
514
626
  <path
515
627
  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"
516
- fill="url(#linearGradient-alert-horizontal-example-masthead)"
628
+ fill="url(#linearGradient-alert-horizontal-example-docked)"
517
629
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
518
630
  />
519
631
  </g>
@@ -525,7 +637,7 @@ section: components
525
637
  <div class="pf-v6-c-masthead__content">
526
638
  <div
527
639
  class="pf-v6-c-toolbar pf-m-static"
528
- id="alert-horizontal-example-masthead-toolbar"
640
+ id="alert-horizontal-example-docked-toolbar"
529
641
  >
530
642
  <div class="pf-v6-c-toolbar__content">
531
643
  <div class="pf-v6-c-toolbar__content-section">
@@ -592,44 +704,46 @@ section: components
592
704
  </div>
593
705
  </header>
594
706
  <div class="pf-v6-c-page__sidebar">
595
- <div class="pf-v6-c-page__sidebar-body">
596
- <nav
597
- class="pf-v6-c-nav"
598
- id="alert-horizontal-example-primary-nav"
599
- aria-label="Global"
600
- >
601
- <ul class="pf-v6-c-nav__list" role="list">
602
- <li class="pf-v6-c-nav__item">
603
- <a href="#" class="pf-v6-c-nav__link">
604
- <span class="pf-v6-c-nav__link-text">System panel</span>
605
- </a>
606
- </li>
607
- <li class="pf-v6-c-nav__item">
608
- <a
609
- href="#"
610
- class="pf-v6-c-nav__link pf-m-current"
611
- aria-current="page"
612
- >
613
- <span class="pf-v6-c-nav__link-text">Policy</span>
614
- </a>
615
- </li>
616
- <li class="pf-v6-c-nav__item">
617
- <a href="#" class="pf-v6-c-nav__link">
618
- <span class="pf-v6-c-nav__link-text">Authentication</span>
619
- </a>
620
- </li>
621
- <li class="pf-v6-c-nav__item">
622
- <a href="#" class="pf-v6-c-nav__link">
623
- <span class="pf-v6-c-nav__link-text">Network services</span>
624
- </a>
625
- </li>
626
- <li class="pf-v6-c-nav__item">
627
- <a href="#" class="pf-v6-c-nav__link">
628
- <span class="pf-v6-c-nav__link-text">Server</span>
629
- </a>
630
- </li>
631
- </ul>
632
- </nav>
707
+ <div class="pf-v6-c-page__sidebar-main">
708
+ <div class="pf-v6-c-page__sidebar-body">
709
+ <nav
710
+ class="pf-v6-c-nav"
711
+ id="alert-horizontal-example-primary-nav"
712
+ aria-label="Global"
713
+ >
714
+ <ul class="pf-v6-c-nav__list" role="list">
715
+ <li class="pf-v6-c-nav__item">
716
+ <a href="#" class="pf-v6-c-nav__link">
717
+ <span class="pf-v6-c-nav__link-text">System panel</span>
718
+ </a>
719
+ </li>
720
+ <li class="pf-v6-c-nav__item">
721
+ <a
722
+ href="#"
723
+ class="pf-v6-c-nav__link pf-m-current"
724
+ aria-current="page"
725
+ >
726
+ <span class="pf-v6-c-nav__link-text">Policy</span>
727
+ </a>
728
+ </li>
729
+ <li class="pf-v6-c-nav__item">
730
+ <a href="#" class="pf-v6-c-nav__link">
731
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
732
+ </a>
733
+ </li>
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">Network services</span>
737
+ </a>
738
+ </li>
739
+ <li class="pf-v6-c-nav__item">
740
+ <a href="#" class="pf-v6-c-nav__link">
741
+ <span class="pf-v6-c-nav__link-text">Server</span>
742
+ </a>
743
+ </li>
744
+ </ul>
745
+ </nav>
746
+ </div>
633
747
  </div>
634
748
  </div>
635
749
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -647,21 +761,57 @@ section: components
647
761
  </li>
648
762
  <li class="pf-v6-c-breadcrumb__item">
649
763
  <span class="pf-v6-c-breadcrumb__item-divider">
650
- <i class="fas fa-angle-right" aria-hidden="true"></i>
764
+ <svg
765
+ class="pf-v6-svg"
766
+ viewBox="0 0 20 20"
767
+ fill="currentColor"
768
+ aria-hidden="true"
769
+ role="img"
770
+ width="1em"
771
+ height="1em"
772
+ >
773
+ <path
774
+ 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"
775
+ />
776
+ </svg>
651
777
  </span>
652
778
 
653
779
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
654
780
  </li>
655
781
  <li class="pf-v6-c-breadcrumb__item">
656
782
  <span class="pf-v6-c-breadcrumb__item-divider">
657
- <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>
658
796
  </span>
659
797
 
660
798
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
661
799
  </li>
662
800
  <li class="pf-v6-c-breadcrumb__item">
663
801
  <span class="pf-v6-c-breadcrumb__item-divider">
664
- <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>
665
815
  </span>
666
816
 
667
817
  <a
@@ -692,7 +842,19 @@ section: components
692
842
  aria-label="Inline danger alert"
693
843
  >
694
844
  <div class="pf-v6-c-alert__icon">
695
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
845
+ <svg
846
+ class="pf-v6-svg"
847
+ viewBox="0 0 512 512"
848
+ fill="currentColor"
849
+ aria-hidden="true"
850
+ role="img"
851
+ width="1em"
852
+ height="1em"
853
+ >
854
+ <path
855
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
856
+ />
857
+ </svg>
696
858
  </div>
697
859
  <p class="pf-v6-c-alert__title">
698
860
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -914,7 +1076,8 @@ section: components
914
1076
  <span class="pf-v6-c-button__text">Skip to content</span>
915
1077
  </a>
916
1078
  </div>
917
- <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
1079
+
1080
+ <header class="pf-v6-c-masthead" id="alert-stacked-example-docked">
918
1081
  <div class="pf-v6-c-masthead__main">
919
1082
  <span class="pf-v6-c-masthead__toggle">
920
1083
  <button
@@ -956,7 +1119,7 @@ section: components
956
1119
  y1="2.25860997e-13%"
957
1120
  x2="32%"
958
1121
  y2="100%"
959
- id="linearGradient-alert-stacked-example-masthead"
1122
+ id="linearGradient-alert-stacked-example-docked"
960
1123
  >
961
1124
  <stop stop-color="#2B9AF3" offset="0%" />
962
1125
  <stop
@@ -1010,11 +1173,11 @@ section: components
1010
1173
  />
1011
1174
  <path
1012
1175
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1013
- fill="url(#linearGradient-alert-stacked-example-masthead)"
1176
+ fill="url(#linearGradient-alert-stacked-example-docked)"
1014
1177
  />
1015
1178
  <path
1016
1179
  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"
1017
- fill="url(#linearGradient-alert-stacked-example-masthead)"
1180
+ fill="url(#linearGradient-alert-stacked-example-docked)"
1018
1181
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1019
1182
  />
1020
1183
  </g>
@@ -1026,7 +1189,7 @@ section: components
1026
1189
  <div class="pf-v6-c-masthead__content">
1027
1190
  <div
1028
1191
  class="pf-v6-c-toolbar pf-m-static"
1029
- id="alert-stacked-example-masthead-toolbar"
1192
+ id="alert-stacked-example-docked-toolbar"
1030
1193
  >
1031
1194
  <div class="pf-v6-c-toolbar__content">
1032
1195
  <div class="pf-v6-c-toolbar__content-section">
@@ -1093,44 +1256,46 @@ section: components
1093
1256
  </div>
1094
1257
  </header>
1095
1258
  <div class="pf-v6-c-page__sidebar">
1096
- <div class="pf-v6-c-page__sidebar-body">
1097
- <nav
1098
- class="pf-v6-c-nav"
1099
- id="alert-stacked-example-primary-nav"
1100
- aria-label="Global"
1101
- >
1102
- <ul class="pf-v6-c-nav__list" role="list">
1103
- <li class="pf-v6-c-nav__item">
1104
- <a href="#" class="pf-v6-c-nav__link">
1105
- <span class="pf-v6-c-nav__link-text">System panel</span>
1106
- </a>
1107
- </li>
1108
- <li class="pf-v6-c-nav__item">
1109
- <a
1110
- href="#"
1111
- class="pf-v6-c-nav__link pf-m-current"
1112
- aria-current="page"
1113
- >
1114
- <span class="pf-v6-c-nav__link-text">Policy</span>
1115
- </a>
1116
- </li>
1117
- <li class="pf-v6-c-nav__item">
1118
- <a href="#" class="pf-v6-c-nav__link">
1119
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1120
- </a>
1121
- </li>
1122
- <li class="pf-v6-c-nav__item">
1123
- <a href="#" class="pf-v6-c-nav__link">
1124
- <span class="pf-v6-c-nav__link-text">Network services</span>
1125
- </a>
1126
- </li>
1127
- <li class="pf-v6-c-nav__item">
1128
- <a href="#" class="pf-v6-c-nav__link">
1129
- <span class="pf-v6-c-nav__link-text">Server</span>
1130
- </a>
1131
- </li>
1132
- </ul>
1133
- </nav>
1259
+ <div class="pf-v6-c-page__sidebar-main">
1260
+ <div class="pf-v6-c-page__sidebar-body">
1261
+ <nav
1262
+ class="pf-v6-c-nav"
1263
+ id="alert-stacked-example-primary-nav"
1264
+ aria-label="Global"
1265
+ >
1266
+ <ul class="pf-v6-c-nav__list" role="list">
1267
+ <li class="pf-v6-c-nav__item">
1268
+ <a href="#" class="pf-v6-c-nav__link">
1269
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1270
+ </a>
1271
+ </li>
1272
+ <li class="pf-v6-c-nav__item">
1273
+ <a
1274
+ href="#"
1275
+ class="pf-v6-c-nav__link pf-m-current"
1276
+ aria-current="page"
1277
+ >
1278
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1279
+ </a>
1280
+ </li>
1281
+ <li class="pf-v6-c-nav__item">
1282
+ <a href="#" class="pf-v6-c-nav__link">
1283
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1284
+ </a>
1285
+ </li>
1286
+ <li class="pf-v6-c-nav__item">
1287
+ <a href="#" class="pf-v6-c-nav__link">
1288
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1289
+ </a>
1290
+ </li>
1291
+ <li class="pf-v6-c-nav__item">
1292
+ <a href="#" class="pf-v6-c-nav__link">
1293
+ <span class="pf-v6-c-nav__link-text">Server</span>
1294
+ </a>
1295
+ </li>
1296
+ </ul>
1297
+ </nav>
1298
+ </div>
1134
1299
  </div>
1135
1300
  </div>
1136
1301
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1148,21 +1313,57 @@ section: components
1148
1313
  </li>
1149
1314
  <li class="pf-v6-c-breadcrumb__item">
1150
1315
  <span class="pf-v6-c-breadcrumb__item-divider">
1151
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1316
+ <svg
1317
+ class="pf-v6-svg"
1318
+ viewBox="0 0 20 20"
1319
+ fill="currentColor"
1320
+ aria-hidden="true"
1321
+ role="img"
1322
+ width="1em"
1323
+ height="1em"
1324
+ >
1325
+ <path
1326
+ 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"
1327
+ />
1328
+ </svg>
1152
1329
  </span>
1153
1330
 
1154
1331
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1155
1332
  </li>
1156
1333
  <li class="pf-v6-c-breadcrumb__item">
1157
1334
  <span class="pf-v6-c-breadcrumb__item-divider">
1158
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1335
+ <svg
1336
+ class="pf-v6-svg"
1337
+ viewBox="0 0 20 20"
1338
+ fill="currentColor"
1339
+ aria-hidden="true"
1340
+ role="img"
1341
+ width="1em"
1342
+ height="1em"
1343
+ >
1344
+ <path
1345
+ 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"
1346
+ />
1347
+ </svg>
1159
1348
  </span>
1160
1349
 
1161
1350
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1162
1351
  </li>
1163
1352
  <li class="pf-v6-c-breadcrumb__item">
1164
1353
  <span class="pf-v6-c-breadcrumb__item-divider">
1165
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1354
+ <svg
1355
+ class="pf-v6-svg"
1356
+ viewBox="0 0 20 20"
1357
+ fill="currentColor"
1358
+ aria-hidden="true"
1359
+ role="img"
1360
+ width="1em"
1361
+ height="1em"
1362
+ >
1363
+ <path
1364
+ 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"
1365
+ />
1366
+ </svg>
1166
1367
  </span>
1167
1368
 
1168
1369
  <a
@@ -1190,7 +1391,19 @@ section: components
1190
1391
  aria-label="Inline danger alert"
1191
1392
  >
1192
1393
  <div class="pf-v6-c-alert__icon">
1193
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1394
+ <svg
1395
+ class="pf-v6-svg"
1396
+ viewBox="0 0 512 512"
1397
+ fill="currentColor"
1398
+ aria-hidden="true"
1399
+ role="img"
1400
+ width="1em"
1401
+ height="1em"
1402
+ >
1403
+ <path
1404
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
1405
+ />
1406
+ </svg>
1194
1407
  </div>
1195
1408
  <p class="pf-v6-c-alert__title">
1196
1409
  <span class="pf-v6-screen-reader">Danger alert:</span>