@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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 (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. 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">
@@ -145,7 +146,19 @@ section: components
145
146
  aria-label="Application launcher"
146
147
  >
147
148
  <span class="pf-v6-c-menu-toggle__icon">
148
- <i class="fas fa-th" aria-hidden="true"></i>
149
+ <svg
150
+ class="pf-v6-svg"
151
+ viewBox="0 0 512 512"
152
+ fill="currentColor"
153
+ aria-hidden="true"
154
+ role="img"
155
+ width="1em"
156
+ height="1em"
157
+ >
158
+ <path
159
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
160
+ />
161
+ </svg>
149
162
  </span>
150
163
  </button>
151
164
  </div>
@@ -157,7 +170,19 @@ section: components
157
170
  aria-label="Settings"
158
171
  >
159
172
  <span class="pf-v6-c-menu-toggle__icon">
160
- <i class="fas fa-cog" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 32 32"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
184
+ />
185
+ </svg>
161
186
  </span>
162
187
  </button>
163
188
  </div>
@@ -169,7 +194,19 @@ section: components
169
194
  aria-label="Help"
170
195
  >
171
196
  <span class="pf-v6-c-menu-toggle__icon">
172
- <i class="fas fa-question-circle" aria-hidden="true"></i>
197
+ <svg
198
+ class="pf-v6-svg"
199
+ viewBox="0 0 512 512"
200
+ fill="currentColor"
201
+ aria-hidden="true"
202
+ role="img"
203
+ width="1em"
204
+ height="1em"
205
+ >
206
+ <path
207
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
208
+ />
209
+ </svg>
173
210
  </span>
174
211
  </button>
175
212
  </div>
@@ -183,7 +220,19 @@ section: components
183
220
  aria-label="Actions"
184
221
  >
185
222
  <span class="pf-v6-c-menu-toggle__icon">
186
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
234
+ />
235
+ </svg>
187
236
  </span>
188
237
  </button>
189
238
  </div>
@@ -194,44 +243,46 @@ section: components
194
243
  </div>
195
244
  </header>
196
245
  <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>
246
+ <div class="pf-v6-c-page__sidebar-main">
247
+ <div class="pf-v6-c-page__sidebar-body">
248
+ <nav
249
+ class="pf-v6-c-nav"
250
+ id="alert-basic-example-primary-nav"
251
+ aria-label="Global"
252
+ >
253
+ <ul class="pf-v6-c-nav__list" role="list">
254
+ <li class="pf-v6-c-nav__item">
255
+ <a href="#" class="pf-v6-c-nav__link">
256
+ <span class="pf-v6-c-nav__link-text">System panel</span>
257
+ </a>
258
+ </li>
259
+ <li class="pf-v6-c-nav__item">
260
+ <a
261
+ href="#"
262
+ class="pf-v6-c-nav__link pf-m-current"
263
+ aria-current="page"
264
+ >
265
+ <span class="pf-v6-c-nav__link-text">Policy</span>
266
+ </a>
267
+ </li>
268
+ <li class="pf-v6-c-nav__item">
269
+ <a href="#" class="pf-v6-c-nav__link">
270
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
271
+ </a>
272
+ </li>
273
+ <li class="pf-v6-c-nav__item">
274
+ <a href="#" class="pf-v6-c-nav__link">
275
+ <span class="pf-v6-c-nav__link-text">Network services</span>
276
+ </a>
277
+ </li>
278
+ <li class="pf-v6-c-nav__item">
279
+ <a href="#" class="pf-v6-c-nav__link">
280
+ <span class="pf-v6-c-nav__link-text">Server</span>
281
+ </a>
282
+ </li>
283
+ </ul>
284
+ </nav>
285
+ </div>
235
286
  </div>
236
287
  </div>
237
288
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +300,57 @@ section: components
249
300
  </li>
250
301
  <li class="pf-v6-c-breadcrumb__item">
251
302
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
303
+ <svg
304
+ class="pf-v6-svg"
305
+ viewBox="0 0 20 20"
306
+ fill="currentColor"
307
+ aria-hidden="true"
308
+ role="img"
309
+ width="1em"
310
+ height="1em"
311
+ >
312
+ <path
313
+ 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"
314
+ />
315
+ </svg>
253
316
  </span>
254
317
 
255
318
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
319
  </li>
257
320
  <li class="pf-v6-c-breadcrumb__item">
258
321
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
322
+ <svg
323
+ class="pf-v6-svg"
324
+ viewBox="0 0 20 20"
325
+ fill="currentColor"
326
+ aria-hidden="true"
327
+ role="img"
328
+ width="1em"
329
+ height="1em"
330
+ >
331
+ <path
332
+ 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"
333
+ />
334
+ </svg>
260
335
  </span>
261
336
 
262
337
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
338
  </li>
264
339
  <li class="pf-v6-c-breadcrumb__item">
265
340
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
341
+ <svg
342
+ class="pf-v6-svg"
343
+ viewBox="0 0 20 20"
344
+ fill="currentColor"
345
+ aria-hidden="true"
346
+ role="img"
347
+ width="1em"
348
+ height="1em"
349
+ >
350
+ <path
351
+ 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"
352
+ />
353
+ </svg>
267
354
  </span>
268
355
 
269
356
  <a
@@ -276,9 +363,15 @@ section: components
276
363
  </nav>
277
364
  </div>
278
365
  </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
366
+ <section
367
+ class="pf-v6-c-page__main-section pf-m-limit-width"
368
+ aria-labelledby="main-title"
369
+ >
280
370
  <div class="pf-v6-c-page__main-body">
281
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
371
+ <h1
372
+ class="pf-v6-c-content--h1 pf-m-page-title"
373
+ id="main-title"
374
+ >Main title</h1>
282
375
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
283
376
  </div>
284
377
  </section>
@@ -325,7 +418,19 @@ section: components
325
418
  <li class="pf-v6-c-alert-group__item">
326
419
  <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
327
420
  <div class="pf-v6-c-alert__icon">
328
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
421
+ <svg
422
+ class="pf-v6-svg"
423
+ viewBox="0 0 512 512"
424
+ fill="currentColor"
425
+ aria-hidden="true"
426
+ role="img"
427
+ width="1em"
428
+ height="1em"
429
+ >
430
+ <path
431
+ 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"
432
+ />
433
+ </svg>
329
434
  </div>
330
435
  <p class="pf-v6-c-alert__title">
331
436
  <span class="pf-v6-screen-reader">Success alert:</span>
@@ -338,7 +443,19 @@ section: components
338
443
  aria-label="Close success alert: Newest notification"
339
444
  >
340
445
  <span class="pf-v6-c-button__icon">
341
- <i class="fas fa-times" aria-hidden="true"></i>
446
+ <svg
447
+ class="pf-v6-svg"
448
+ viewBox="0 0 20 20"
449
+ fill="currentColor"
450
+ aria-hidden="true"
451
+ role="img"
452
+ width="1em"
453
+ height="1em"
454
+ >
455
+ <path
456
+ 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"
457
+ />
458
+ </svg>
342
459
  </span>
343
460
  </button>
344
461
  </div>
@@ -350,7 +467,19 @@ section: components
350
467
  <li class="pf-v6-c-alert-group__item">
351
468
  <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
352
469
  <div class="pf-v6-c-alert__icon">
353
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
470
+ <svg
471
+ class="pf-v6-svg"
472
+ viewBox="0 0 576 512"
473
+ fill="currentColor"
474
+ aria-hidden="true"
475
+ role="img"
476
+ width="1em"
477
+ height="1em"
478
+ >
479
+ <path
480
+ 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"
481
+ />
482
+ </svg>
354
483
  </div>
355
484
  <p class="pf-v6-c-alert__title">
356
485
  <span class="pf-v6-screen-reader">Info alert:</span>
@@ -363,7 +492,19 @@ section: components
363
492
  aria-label="Close warning alert: second newest notification"
364
493
  >
365
494
  <span class="pf-v6-c-button__icon">
366
- <i class="fas fa-times" aria-hidden="true"></i>
495
+ <svg
496
+ class="pf-v6-svg"
497
+ viewBox="0 0 20 20"
498
+ fill="currentColor"
499
+ aria-hidden="true"
500
+ role="img"
501
+ width="1em"
502
+ height="1em"
503
+ >
504
+ <path
505
+ 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"
506
+ />
507
+ </svg>
367
508
  </span>
368
509
  </button>
369
510
  </div>
@@ -375,7 +516,19 @@ section: components
375
516
  <li class="pf-v6-c-alert-group__item">
376
517
  <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
377
518
  <div class="pf-v6-c-alert__icon">
378
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
519
+ <svg
520
+ class="pf-v6-svg"
521
+ viewBox="0 0 512 512"
522
+ fill="currentColor"
523
+ aria-hidden="true"
524
+ role="img"
525
+ width="1em"
526
+ height="1em"
527
+ >
528
+ <path
529
+ 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"
530
+ />
531
+ </svg>
379
532
  </div>
380
533
  <p class="pf-v6-c-alert__title">
381
534
  <span class="pf-v6-screen-reader">Last notification</span>
@@ -388,7 +541,19 @@ section: components
388
541
  aria-label="Close danger alert: Last notification"
389
542
  >
390
543
  <span class="pf-v6-c-button__icon">
391
- <i class="fas fa-times" aria-hidden="true"></i>
544
+ <svg
545
+ class="pf-v6-svg"
546
+ viewBox="0 0 20 20"
547
+ fill="currentColor"
548
+ aria-hidden="true"
549
+ role="img"
550
+ width="1em"
551
+ height="1em"
552
+ >
553
+ <path
554
+ 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"
555
+ />
556
+ </svg>
392
557
  </span>
393
558
  </button>
394
559
  </div>
@@ -413,7 +578,8 @@ section: components
413
578
  <span class="pf-v6-c-button__text">Skip to content</span>
414
579
  </a>
415
580
  </div>
416
- <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
581
+
582
+ <header class="pf-v6-c-masthead" id="alert-horizontal-example-docked">
417
583
  <div class="pf-v6-c-masthead__main">
418
584
  <span class="pf-v6-c-masthead__toggle">
419
585
  <button
@@ -455,7 +621,7 @@ section: components
455
621
  y1="2.25860997e-13%"
456
622
  x2="32%"
457
623
  y2="100%"
458
- id="linearGradient-alert-horizontal-example-masthead"
624
+ id="linearGradient-alert-horizontal-example-docked"
459
625
  >
460
626
  <stop stop-color="#2B9AF3" offset="0%" />
461
627
  <stop
@@ -509,11 +675,11 @@ section: components
509
675
  />
510
676
  <path
511
677
  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)"
678
+ fill="url(#linearGradient-alert-horizontal-example-docked)"
513
679
  />
514
680
  <path
515
681
  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)"
682
+ fill="url(#linearGradient-alert-horizontal-example-docked)"
517
683
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
518
684
  />
519
685
  </g>
@@ -525,7 +691,7 @@ section: components
525
691
  <div class="pf-v6-c-masthead__content">
526
692
  <div
527
693
  class="pf-v6-c-toolbar pf-m-static"
528
- id="alert-horizontal-example-masthead-toolbar"
694
+ id="alert-horizontal-example-docked-toolbar"
529
695
  >
530
696
  <div class="pf-v6-c-toolbar__content">
531
697
  <div class="pf-v6-c-toolbar__content-section">
@@ -543,7 +709,19 @@ section: components
543
709
  aria-label="Application launcher"
544
710
  >
545
711
  <span class="pf-v6-c-menu-toggle__icon">
546
- <i class="fas fa-th" aria-hidden="true"></i>
712
+ <svg
713
+ class="pf-v6-svg"
714
+ viewBox="0 0 512 512"
715
+ fill="currentColor"
716
+ aria-hidden="true"
717
+ role="img"
718
+ width="1em"
719
+ height="1em"
720
+ >
721
+ <path
722
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
723
+ />
724
+ </svg>
547
725
  </span>
548
726
  </button>
549
727
  </div>
@@ -555,7 +733,19 @@ section: components
555
733
  aria-label="Settings"
556
734
  >
557
735
  <span class="pf-v6-c-menu-toggle__icon">
558
- <i class="fas fa-cog" aria-hidden="true"></i>
736
+ <svg
737
+ class="pf-v6-svg"
738
+ viewBox="0 0 32 32"
739
+ fill="currentColor"
740
+ aria-hidden="true"
741
+ role="img"
742
+ width="1em"
743
+ height="1em"
744
+ >
745
+ <path
746
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
747
+ />
748
+ </svg>
559
749
  </span>
560
750
  </button>
561
751
  </div>
@@ -567,7 +757,19 @@ section: components
567
757
  aria-label="Help"
568
758
  >
569
759
  <span class="pf-v6-c-menu-toggle__icon">
570
- <i class="fas fa-question-circle" aria-hidden="true"></i>
760
+ <svg
761
+ class="pf-v6-svg"
762
+ viewBox="0 0 512 512"
763
+ fill="currentColor"
764
+ aria-hidden="true"
765
+ role="img"
766
+ width="1em"
767
+ height="1em"
768
+ >
769
+ <path
770
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
771
+ />
772
+ </svg>
571
773
  </span>
572
774
  </button>
573
775
  </div>
@@ -581,7 +783,19 @@ section: components
581
783
  aria-label="Actions"
582
784
  >
583
785
  <span class="pf-v6-c-menu-toggle__icon">
584
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
786
+ <svg
787
+ class="pf-v6-svg"
788
+ viewBox="0 0 32 32"
789
+ fill="currentColor"
790
+ aria-hidden="true"
791
+ role="img"
792
+ width="1em"
793
+ height="1em"
794
+ >
795
+ <path
796
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
797
+ />
798
+ </svg>
585
799
  </span>
586
800
  </button>
587
801
  </div>
@@ -592,44 +806,46 @@ section: components
592
806
  </div>
593
807
  </header>
594
808
  <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>
809
+ <div class="pf-v6-c-page__sidebar-main">
810
+ <div class="pf-v6-c-page__sidebar-body">
811
+ <nav
812
+ class="pf-v6-c-nav"
813
+ id="alert-horizontal-example-primary-nav"
814
+ aria-label="Global"
815
+ >
816
+ <ul class="pf-v6-c-nav__list" role="list">
817
+ <li class="pf-v6-c-nav__item">
818
+ <a href="#" class="pf-v6-c-nav__link">
819
+ <span class="pf-v6-c-nav__link-text">System panel</span>
820
+ </a>
821
+ </li>
822
+ <li class="pf-v6-c-nav__item">
823
+ <a
824
+ href="#"
825
+ class="pf-v6-c-nav__link pf-m-current"
826
+ aria-current="page"
827
+ >
828
+ <span class="pf-v6-c-nav__link-text">Policy</span>
829
+ </a>
830
+ </li>
831
+ <li class="pf-v6-c-nav__item">
832
+ <a href="#" class="pf-v6-c-nav__link">
833
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
834
+ </a>
835
+ </li>
836
+ <li class="pf-v6-c-nav__item">
837
+ <a href="#" class="pf-v6-c-nav__link">
838
+ <span class="pf-v6-c-nav__link-text">Network services</span>
839
+ </a>
840
+ </li>
841
+ <li class="pf-v6-c-nav__item">
842
+ <a href="#" class="pf-v6-c-nav__link">
843
+ <span class="pf-v6-c-nav__link-text">Server</span>
844
+ </a>
845
+ </li>
846
+ </ul>
847
+ </nav>
848
+ </div>
633
849
  </div>
634
850
  </div>
635
851
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -647,21 +863,57 @@ section: components
647
863
  </li>
648
864
  <li class="pf-v6-c-breadcrumb__item">
649
865
  <span class="pf-v6-c-breadcrumb__item-divider">
650
- <i class="fas fa-angle-right" aria-hidden="true"></i>
866
+ <svg
867
+ class="pf-v6-svg"
868
+ viewBox="0 0 20 20"
869
+ fill="currentColor"
870
+ aria-hidden="true"
871
+ role="img"
872
+ width="1em"
873
+ height="1em"
874
+ >
875
+ <path
876
+ 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"
877
+ />
878
+ </svg>
651
879
  </span>
652
880
 
653
881
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
654
882
  </li>
655
883
  <li class="pf-v6-c-breadcrumb__item">
656
884
  <span class="pf-v6-c-breadcrumb__item-divider">
657
- <i class="fas fa-angle-right" aria-hidden="true"></i>
885
+ <svg
886
+ class="pf-v6-svg"
887
+ viewBox="0 0 20 20"
888
+ fill="currentColor"
889
+ aria-hidden="true"
890
+ role="img"
891
+ width="1em"
892
+ height="1em"
893
+ >
894
+ <path
895
+ 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"
896
+ />
897
+ </svg>
658
898
  </span>
659
899
 
660
900
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
661
901
  </li>
662
902
  <li class="pf-v6-c-breadcrumb__item">
663
903
  <span class="pf-v6-c-breadcrumb__item-divider">
664
- <i class="fas fa-angle-right" aria-hidden="true"></i>
904
+ <svg
905
+ class="pf-v6-svg"
906
+ viewBox="0 0 20 20"
907
+ fill="currentColor"
908
+ aria-hidden="true"
909
+ role="img"
910
+ width="1em"
911
+ height="1em"
912
+ >
913
+ <path
914
+ 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"
915
+ />
916
+ </svg>
665
917
  </span>
666
918
 
667
919
  <a
@@ -674,9 +926,15 @@ section: components
674
926
  </nav>
675
927
  </div>
676
928
  </section>
677
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
929
+ <section
930
+ class="pf-v6-c-page__main-section pf-m-limit-width"
931
+ aria-labelledby="main-title"
932
+ >
678
933
  <div class="pf-v6-c-page__main-body">
679
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
934
+ <h1
935
+ class="pf-v6-c-content--h1 pf-m-page-title"
936
+ id="main-title"
937
+ >Main title</h1>
680
938
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
681
939
  </div>
682
940
  </section>
@@ -692,7 +950,19 @@ section: components
692
950
  aria-label="Inline danger alert"
693
951
  >
694
952
  <div class="pf-v6-c-alert__icon">
695
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
953
+ <svg
954
+ class="pf-v6-svg"
955
+ viewBox="0 0 512 512"
956
+ fill="currentColor"
957
+ aria-hidden="true"
958
+ role="img"
959
+ width="1em"
960
+ height="1em"
961
+ >
962
+ <path
963
+ 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"
964
+ />
965
+ </svg>
696
966
  </div>
697
967
  <p class="pf-v6-c-alert__title">
698
968
  <span class="pf-v6-screen-reader">Danger alert:</span>
@@ -914,7 +1184,8 @@ section: components
914
1184
  <span class="pf-v6-c-button__text">Skip to content</span>
915
1185
  </a>
916
1186
  </div>
917
- <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
1187
+
1188
+ <header class="pf-v6-c-masthead" id="alert-stacked-example-docked">
918
1189
  <div class="pf-v6-c-masthead__main">
919
1190
  <span class="pf-v6-c-masthead__toggle">
920
1191
  <button
@@ -956,7 +1227,7 @@ section: components
956
1227
  y1="2.25860997e-13%"
957
1228
  x2="32%"
958
1229
  y2="100%"
959
- id="linearGradient-alert-stacked-example-masthead"
1230
+ id="linearGradient-alert-stacked-example-docked"
960
1231
  >
961
1232
  <stop stop-color="#2B9AF3" offset="0%" />
962
1233
  <stop
@@ -1010,11 +1281,11 @@ section: components
1010
1281
  />
1011
1282
  <path
1012
1283
  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)"
1284
+ fill="url(#linearGradient-alert-stacked-example-docked)"
1014
1285
  />
1015
1286
  <path
1016
1287
  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)"
1288
+ fill="url(#linearGradient-alert-stacked-example-docked)"
1018
1289
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1019
1290
  />
1020
1291
  </g>
@@ -1026,7 +1297,7 @@ section: components
1026
1297
  <div class="pf-v6-c-masthead__content">
1027
1298
  <div
1028
1299
  class="pf-v6-c-toolbar pf-m-static"
1029
- id="alert-stacked-example-masthead-toolbar"
1300
+ id="alert-stacked-example-docked-toolbar"
1030
1301
  >
1031
1302
  <div class="pf-v6-c-toolbar__content">
1032
1303
  <div class="pf-v6-c-toolbar__content-section">
@@ -1044,7 +1315,19 @@ section: components
1044
1315
  aria-label="Application launcher"
1045
1316
  >
1046
1317
  <span class="pf-v6-c-menu-toggle__icon">
1047
- <i class="fas fa-th" aria-hidden="true"></i>
1318
+ <svg
1319
+ class="pf-v6-svg"
1320
+ viewBox="0 0 512 512"
1321
+ fill="currentColor"
1322
+ aria-hidden="true"
1323
+ role="img"
1324
+ width="1em"
1325
+ height="1em"
1326
+ >
1327
+ <path
1328
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1329
+ />
1330
+ </svg>
1048
1331
  </span>
1049
1332
  </button>
1050
1333
  </div>
@@ -1056,7 +1339,19 @@ section: components
1056
1339
  aria-label="Settings"
1057
1340
  >
1058
1341
  <span class="pf-v6-c-menu-toggle__icon">
1059
- <i class="fas fa-cog" aria-hidden="true"></i>
1342
+ <svg
1343
+ class="pf-v6-svg"
1344
+ viewBox="0 0 32 32"
1345
+ fill="currentColor"
1346
+ aria-hidden="true"
1347
+ role="img"
1348
+ width="1em"
1349
+ height="1em"
1350
+ >
1351
+ <path
1352
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1353
+ />
1354
+ </svg>
1060
1355
  </span>
1061
1356
  </button>
1062
1357
  </div>
@@ -1068,7 +1363,19 @@ section: components
1068
1363
  aria-label="Help"
1069
1364
  >
1070
1365
  <span class="pf-v6-c-menu-toggle__icon">
1071
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1366
+ <svg
1367
+ class="pf-v6-svg"
1368
+ viewBox="0 0 512 512"
1369
+ fill="currentColor"
1370
+ aria-hidden="true"
1371
+ role="img"
1372
+ width="1em"
1373
+ height="1em"
1374
+ >
1375
+ <path
1376
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1377
+ />
1378
+ </svg>
1072
1379
  </span>
1073
1380
  </button>
1074
1381
  </div>
@@ -1082,7 +1389,19 @@ section: components
1082
1389
  aria-label="Actions"
1083
1390
  >
1084
1391
  <span class="pf-v6-c-menu-toggle__icon">
1085
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1392
+ <svg
1393
+ class="pf-v6-svg"
1394
+ viewBox="0 0 32 32"
1395
+ fill="currentColor"
1396
+ aria-hidden="true"
1397
+ role="img"
1398
+ width="1em"
1399
+ height="1em"
1400
+ >
1401
+ <path
1402
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1403
+ />
1404
+ </svg>
1086
1405
  </span>
1087
1406
  </button>
1088
1407
  </div>
@@ -1093,44 +1412,46 @@ section: components
1093
1412
  </div>
1094
1413
  </header>
1095
1414
  <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>
1415
+ <div class="pf-v6-c-page__sidebar-main">
1416
+ <div class="pf-v6-c-page__sidebar-body">
1417
+ <nav
1418
+ class="pf-v6-c-nav"
1419
+ id="alert-stacked-example-primary-nav"
1420
+ aria-label="Global"
1421
+ >
1422
+ <ul class="pf-v6-c-nav__list" role="list">
1423
+ <li class="pf-v6-c-nav__item">
1424
+ <a href="#" class="pf-v6-c-nav__link">
1425
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1426
+ </a>
1427
+ </li>
1428
+ <li class="pf-v6-c-nav__item">
1429
+ <a
1430
+ href="#"
1431
+ class="pf-v6-c-nav__link pf-m-current"
1432
+ aria-current="page"
1433
+ >
1434
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1435
+ </a>
1436
+ </li>
1437
+ <li class="pf-v6-c-nav__item">
1438
+ <a href="#" class="pf-v6-c-nav__link">
1439
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1440
+ </a>
1441
+ </li>
1442
+ <li class="pf-v6-c-nav__item">
1443
+ <a href="#" class="pf-v6-c-nav__link">
1444
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1445
+ </a>
1446
+ </li>
1447
+ <li class="pf-v6-c-nav__item">
1448
+ <a href="#" class="pf-v6-c-nav__link">
1449
+ <span class="pf-v6-c-nav__link-text">Server</span>
1450
+ </a>
1451
+ </li>
1452
+ </ul>
1453
+ </nav>
1454
+ </div>
1134
1455
  </div>
1135
1456
  </div>
1136
1457
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1148,21 +1469,57 @@ section: components
1148
1469
  </li>
1149
1470
  <li class="pf-v6-c-breadcrumb__item">
1150
1471
  <span class="pf-v6-c-breadcrumb__item-divider">
1151
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1472
+ <svg
1473
+ class="pf-v6-svg"
1474
+ viewBox="0 0 20 20"
1475
+ fill="currentColor"
1476
+ aria-hidden="true"
1477
+ role="img"
1478
+ width="1em"
1479
+ height="1em"
1480
+ >
1481
+ <path
1482
+ 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"
1483
+ />
1484
+ </svg>
1152
1485
  </span>
1153
1486
 
1154
1487
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1155
1488
  </li>
1156
1489
  <li class="pf-v6-c-breadcrumb__item">
1157
1490
  <span class="pf-v6-c-breadcrumb__item-divider">
1158
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1491
+ <svg
1492
+ class="pf-v6-svg"
1493
+ viewBox="0 0 20 20"
1494
+ fill="currentColor"
1495
+ aria-hidden="true"
1496
+ role="img"
1497
+ width="1em"
1498
+ height="1em"
1499
+ >
1500
+ <path
1501
+ 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"
1502
+ />
1503
+ </svg>
1159
1504
  </span>
1160
1505
 
1161
1506
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1162
1507
  </li>
1163
1508
  <li class="pf-v6-c-breadcrumb__item">
1164
1509
  <span class="pf-v6-c-breadcrumb__item-divider">
1165
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1510
+ <svg
1511
+ class="pf-v6-svg"
1512
+ viewBox="0 0 20 20"
1513
+ fill="currentColor"
1514
+ aria-hidden="true"
1515
+ role="img"
1516
+ width="1em"
1517
+ height="1em"
1518
+ >
1519
+ <path
1520
+ 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"
1521
+ />
1522
+ </svg>
1166
1523
  </span>
1167
1524
 
1168
1525
  <a
@@ -1175,9 +1532,15 @@ section: components
1175
1532
  </nav>
1176
1533
  </div>
1177
1534
  </section>
1178
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1535
+ <section
1536
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1537
+ aria-labelledby="main-title"
1538
+ >
1179
1539
  <div class="pf-v6-c-page__main-body">
1180
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1540
+ <h1
1541
+ class="pf-v6-c-content--h1 pf-m-page-title"
1542
+ id="main-title"
1543
+ >Main title</h1>
1181
1544
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1182
1545
  </div>
1183
1546
  </section>
@@ -1190,7 +1553,19 @@ section: components
1190
1553
  aria-label="Inline danger alert"
1191
1554
  >
1192
1555
  <div class="pf-v6-c-alert__icon">
1193
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1556
+ <svg
1557
+ class="pf-v6-svg"
1558
+ viewBox="0 0 512 512"
1559
+ fill="currentColor"
1560
+ aria-hidden="true"
1561
+ role="img"
1562
+ width="1em"
1563
+ height="1em"
1564
+ >
1565
+ <path
1566
+ 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"
1567
+ />
1568
+ </svg>
1194
1569
  </div>
1195
1570
  <p class="pf-v6-c-alert__title">
1196
1571
  <span class="pf-v6-screen-reader">Danger alert:</span>