@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/Tabs/examples/Tabs.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="tabs-tables-and-tabs-example-masthead">
18
+
19
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-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-tabs-tables-and-tabs-example-masthead"
61
+ id="linearGradient-tabs-tables-and-tabs-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-tabs-tables-and-tabs-example-masthead)"
115
+ fill="url(#linearGradient-tabs-tables-and-tabs-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-tabs-tables-and-tabs-example-masthead)"
119
+ fill="url(#linearGradient-tabs-tables-and-tabs-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="tabs-tables-and-tabs-example-masthead-toolbar"
131
+ id="tabs-tables-and-tabs-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="tabs-tables-and-tabs-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="tabs-tables-and-tabs-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>
@@ -287,15 +380,17 @@ section: components
287
380
  <div class="pf-v6-c-page__main-body">
288
381
  <div
289
382
  class="pf-v6-c-tabs pf-m-page-insets"
383
+ aria-label="Pod"
290
384
  role="region"
291
385
  id="tabs-tables-and-tabs-example-tabs"
292
386
  >
293
- <ul class="pf-v6-c-tabs__list" role="tablist">
387
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
294
388
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
295
389
  <button
296
390
  type="button"
297
391
  class="pf-v6-c-tabs__link"
298
392
  role="tab"
393
+ aria-selected="true"
299
394
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
300
395
  id="tabs-tables-and-tabs-example-tabs-details-link"
301
396
  >
@@ -307,6 +402,7 @@ section: components
307
402
  type="button"
308
403
  class="pf-v6-c-tabs__link"
309
404
  role="tab"
405
+ aria-selected="false"
310
406
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
311
407
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
312
408
  >
@@ -318,6 +414,7 @@ section: components
318
414
  type="button"
319
415
  class="pf-v6-c-tabs__link"
320
416
  role="tab"
417
+ aria-selected="false"
321
418
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
322
419
  id="tabs-tables-and-tabs-example-tabs-environment-link"
323
420
  >
@@ -329,6 +426,7 @@ section: components
329
426
  type="button"
330
427
  class="pf-v6-c-tabs__link"
331
428
  role="tab"
429
+ aria-selected="false"
332
430
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
333
431
  id="tabs-tables-and-tabs-example-tabs-logs-link"
334
432
  >
@@ -340,6 +438,7 @@ section: components
340
438
  type="button"
341
439
  class="pf-v6-c-tabs__link"
342
440
  role="tab"
441
+ aria-selected="false"
343
442
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
344
443
  id="tabs-tables-and-tabs-example-tabs-events-link"
345
444
  >
@@ -351,6 +450,7 @@ section: components
351
450
  type="button"
352
451
  class="pf-v6-c-tabs__link"
353
452
  role="tab"
453
+ aria-selected="false"
354
454
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
355
455
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
356
456
  >
@@ -601,7 +701,8 @@ section: components
601
701
  <span class="pf-v6-c-button__text">Skip to content</span>
602
702
  </a>
603
703
  </div>
604
- <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
704
+
705
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-docked">
605
706
  <div class="pf-v6-c-masthead__main">
606
707
  <span class="pf-v6-c-masthead__toggle">
607
708
  <button
@@ -643,7 +744,7 @@ section: components
643
744
  y1="2.25860997e-13%"
644
745
  x2="32%"
645
746
  y2="100%"
646
- id="linearGradient-tabs-tables-and-tabs-example-masthead"
747
+ id="linearGradient-tabs-tables-and-tabs-example-docked"
647
748
  >
648
749
  <stop stop-color="#2B9AF3" offset="0%" />
649
750
  <stop
@@ -697,11 +798,11 @@ section: components
697
798
  />
698
799
  <path
699
800
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
700
- fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
801
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
701
802
  />
702
803
  <path
703
804
  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"
704
- fill="url(#linearGradient-tabs-tables-and-tabs-example-masthead)"
805
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
705
806
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
706
807
  />
707
808
  </g>
@@ -713,7 +814,7 @@ section: components
713
814
  <div class="pf-v6-c-masthead__content">
714
815
  <div
715
816
  class="pf-v6-c-toolbar pf-m-static"
716
- id="tabs-tables-and-tabs-example-masthead-toolbar"
817
+ id="tabs-tables-and-tabs-example-docked-toolbar"
717
818
  >
718
819
  <div class="pf-v6-c-toolbar__content">
719
820
  <div class="pf-v6-c-toolbar__content-section">
@@ -731,7 +832,19 @@ section: components
731
832
  aria-label="Application launcher"
732
833
  >
733
834
  <span class="pf-v6-c-menu-toggle__icon">
734
- <i class="fas fa-th" aria-hidden="true"></i>
835
+ <svg
836
+ class="pf-v6-svg"
837
+ viewBox="0 0 512 512"
838
+ fill="currentColor"
839
+ aria-hidden="true"
840
+ role="img"
841
+ width="1em"
842
+ height="1em"
843
+ >
844
+ <path
845
+ 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"
846
+ />
847
+ </svg>
735
848
  </span>
736
849
  </button>
737
850
  </div>
@@ -743,7 +856,19 @@ section: components
743
856
  aria-label="Settings"
744
857
  >
745
858
  <span class="pf-v6-c-menu-toggle__icon">
746
- <i class="fas fa-cog" aria-hidden="true"></i>
859
+ <svg
860
+ class="pf-v6-svg"
861
+ viewBox="0 0 32 32"
862
+ fill="currentColor"
863
+ aria-hidden="true"
864
+ role="img"
865
+ width="1em"
866
+ height="1em"
867
+ >
868
+ <path
869
+ 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"
870
+ />
871
+ </svg>
747
872
  </span>
748
873
  </button>
749
874
  </div>
@@ -755,7 +880,19 @@ section: components
755
880
  aria-label="Help"
756
881
  >
757
882
  <span class="pf-v6-c-menu-toggle__icon">
758
- <i class="fas fa-question-circle" aria-hidden="true"></i>
883
+ <svg
884
+ class="pf-v6-svg"
885
+ viewBox="0 0 512 512"
886
+ fill="currentColor"
887
+ aria-hidden="true"
888
+ role="img"
889
+ width="1em"
890
+ height="1em"
891
+ >
892
+ <path
893
+ 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"
894
+ />
895
+ </svg>
759
896
  </span>
760
897
  </button>
761
898
  </div>
@@ -769,7 +906,19 @@ section: components
769
906
  aria-label="Actions"
770
907
  >
771
908
  <span class="pf-v6-c-menu-toggle__icon">
772
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
909
+ <svg
910
+ class="pf-v6-svg"
911
+ viewBox="0 0 32 32"
912
+ fill="currentColor"
913
+ aria-hidden="true"
914
+ role="img"
915
+ width="1em"
916
+ height="1em"
917
+ >
918
+ <path
919
+ 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"
920
+ />
921
+ </svg>
773
922
  </span>
774
923
  </button>
775
924
  </div>
@@ -780,44 +929,46 @@ section: components
780
929
  </div>
781
930
  </header>
782
931
  <div class="pf-v6-c-page__sidebar">
783
- <div class="pf-v6-c-page__sidebar-body">
784
- <nav
785
- class="pf-v6-c-nav"
786
- id="tabs-tables-and-tabs-example-primary-nav"
787
- aria-label="Global"
788
- >
789
- <ul class="pf-v6-c-nav__list" role="list">
790
- <li class="pf-v6-c-nav__item">
791
- <a href="#" class="pf-v6-c-nav__link">
792
- <span class="pf-v6-c-nav__link-text">System panel</span>
793
- </a>
794
- </li>
795
- <li class="pf-v6-c-nav__item">
796
- <a
797
- href="#"
798
- class="pf-v6-c-nav__link pf-m-current"
799
- aria-current="page"
800
- >
801
- <span class="pf-v6-c-nav__link-text">Policy</span>
802
- </a>
803
- </li>
804
- <li class="pf-v6-c-nav__item">
805
- <a href="#" class="pf-v6-c-nav__link">
806
- <span class="pf-v6-c-nav__link-text">Authentication</span>
807
- </a>
808
- </li>
809
- <li class="pf-v6-c-nav__item">
810
- <a href="#" class="pf-v6-c-nav__link">
811
- <span class="pf-v6-c-nav__link-text">Network services</span>
812
- </a>
813
- </li>
814
- <li class="pf-v6-c-nav__item">
815
- <a href="#" class="pf-v6-c-nav__link">
816
- <span class="pf-v6-c-nav__link-text">Server</span>
817
- </a>
818
- </li>
819
- </ul>
820
- </nav>
932
+ <div class="pf-v6-c-page__sidebar-main">
933
+ <div class="pf-v6-c-page__sidebar-body">
934
+ <nav
935
+ class="pf-v6-c-nav"
936
+ id="tabs-tables-and-tabs-example-primary-nav"
937
+ aria-label="Global"
938
+ >
939
+ <ul class="pf-v6-c-nav__list" role="list">
940
+ <li class="pf-v6-c-nav__item">
941
+ <a href="#" class="pf-v6-c-nav__link">
942
+ <span class="pf-v6-c-nav__link-text">System panel</span>
943
+ </a>
944
+ </li>
945
+ <li class="pf-v6-c-nav__item">
946
+ <a
947
+ href="#"
948
+ class="pf-v6-c-nav__link pf-m-current"
949
+ aria-current="page"
950
+ >
951
+ <span class="pf-v6-c-nav__link-text">Policy</span>
952
+ </a>
953
+ </li>
954
+ <li class="pf-v6-c-nav__item">
955
+ <a href="#" class="pf-v6-c-nav__link">
956
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
957
+ </a>
958
+ </li>
959
+ <li class="pf-v6-c-nav__item">
960
+ <a href="#" class="pf-v6-c-nav__link">
961
+ <span class="pf-v6-c-nav__link-text">Network services</span>
962
+ </a>
963
+ </li>
964
+ <li class="pf-v6-c-nav__item">
965
+ <a href="#" class="pf-v6-c-nav__link">
966
+ <span class="pf-v6-c-nav__link-text">Server</span>
967
+ </a>
968
+ </li>
969
+ </ul>
970
+ </nav>
971
+ </div>
821
972
  </div>
822
973
  </div>
823
974
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -835,21 +986,57 @@ section: components
835
986
  </li>
836
987
  <li class="pf-v6-c-breadcrumb__item">
837
988
  <span class="pf-v6-c-breadcrumb__item-divider">
838
- <i class="fas fa-angle-right" aria-hidden="true"></i>
989
+ <svg
990
+ class="pf-v6-svg"
991
+ viewBox="0 0 20 20"
992
+ fill="currentColor"
993
+ aria-hidden="true"
994
+ role="img"
995
+ width="1em"
996
+ height="1em"
997
+ >
998
+ <path
999
+ 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"
1000
+ />
1001
+ </svg>
839
1002
  </span>
840
1003
 
841
1004
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
842
1005
  </li>
843
1006
  <li class="pf-v6-c-breadcrumb__item">
844
1007
  <span class="pf-v6-c-breadcrumb__item-divider">
845
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1008
+ <svg
1009
+ class="pf-v6-svg"
1010
+ viewBox="0 0 20 20"
1011
+ fill="currentColor"
1012
+ aria-hidden="true"
1013
+ role="img"
1014
+ width="1em"
1015
+ height="1em"
1016
+ >
1017
+ <path
1018
+ 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"
1019
+ />
1020
+ </svg>
846
1021
  </span>
847
1022
 
848
1023
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
849
1024
  </li>
850
1025
  <li class="pf-v6-c-breadcrumb__item">
851
1026
  <span class="pf-v6-c-breadcrumb__item-divider">
852
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1027
+ <svg
1028
+ class="pf-v6-svg"
1029
+ viewBox="0 0 20 20"
1030
+ fill="currentColor"
1031
+ aria-hidden="true"
1032
+ role="img"
1033
+ width="1em"
1034
+ height="1em"
1035
+ >
1036
+ <path
1037
+ 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"
1038
+ />
1039
+ </svg>
853
1040
  </span>
854
1041
 
855
1042
  <a
@@ -862,9 +1049,15 @@ section: components
862
1049
  </nav>
863
1050
  </div>
864
1051
  </section>
865
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1052
+ <section
1053
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1054
+ aria-labelledby="main-title"
1055
+ >
866
1056
  <div class="pf-v6-c-page__main-body">
867
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1057
+ <h1
1058
+ class="pf-v6-c-content--h1 pf-m-page-title"
1059
+ id="main-title"
1060
+ >Main title</h1>
868
1061
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
869
1062
  </div>
870
1063
  </section>
@@ -872,15 +1065,17 @@ section: components
872
1065
  <div class="pf-v6-c-page__main-body">
873
1066
  <div
874
1067
  class="pf-v6-c-tabs pf-m-page-insets"
1068
+ aria-label="Pod"
875
1069
  role="region"
876
1070
  id="tabs-tables-and-tabs-example-tabs"
877
1071
  >
878
- <ul class="pf-v6-c-tabs__list" role="tablist">
1072
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
879
1073
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
880
1074
  <button
881
1075
  type="button"
882
1076
  class="pf-v6-c-tabs__link"
883
1077
  role="tab"
1078
+ aria-selected="true"
884
1079
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
885
1080
  id="tabs-tables-and-tabs-example-tabs-details-link"
886
1081
  >
@@ -892,6 +1087,7 @@ section: components
892
1087
  type="button"
893
1088
  class="pf-v6-c-tabs__link"
894
1089
  role="tab"
1090
+ aria-selected="false"
895
1091
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
896
1092
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
897
1093
  >
@@ -903,6 +1099,7 @@ section: components
903
1099
  type="button"
904
1100
  class="pf-v6-c-tabs__link"
905
1101
  role="tab"
1102
+ aria-selected="false"
906
1103
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
907
1104
  id="tabs-tables-and-tabs-example-tabs-environment-link"
908
1105
  >
@@ -914,6 +1111,7 @@ section: components
914
1111
  type="button"
915
1112
  class="pf-v6-c-tabs__link"
916
1113
  role="tab"
1114
+ aria-selected="false"
917
1115
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
918
1116
  id="tabs-tables-and-tabs-example-tabs-logs-link"
919
1117
  >
@@ -925,6 +1123,7 @@ section: components
925
1123
  type="button"
926
1124
  class="pf-v6-c-tabs__link"
927
1125
  role="tab"
1126
+ aria-selected="false"
928
1127
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
929
1128
  id="tabs-tables-and-tabs-example-tabs-events-link"
930
1129
  >
@@ -936,6 +1135,7 @@ section: components
936
1135
  type="button"
937
1136
  class="pf-v6-c-tabs__link"
938
1137
  role="tab"
1138
+ aria-selected="false"
939
1139
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
940
1140
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
941
1141
  >
@@ -950,15 +1150,21 @@ section: components
950
1150
  <div class="pf-v6-c-page__main-body">
951
1151
  <div
952
1152
  class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
1153
+ aria-label="Pod details"
953
1154
  role="region"
954
1155
  id="tabs-tables-and-tabs-example-tabs-secondary"
955
1156
  >
956
- <ul class="pf-v6-c-tabs__list" role="tablist">
1157
+ <ul
1158
+ class="pf-v6-c-tabs__list"
1159
+ role="tablist"
1160
+ aria-label="Pod details"
1161
+ >
957
1162
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
958
1163
  <button
959
1164
  type="button"
960
1165
  class="pf-v6-c-tabs__link"
961
1166
  role="tab"
1167
+ aria-selected="true"
962
1168
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
963
1169
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
964
1170
  >
@@ -970,6 +1176,7 @@ section: components
970
1176
  type="button"
971
1177
  class="pf-v6-c-tabs__link"
972
1178
  role="tab"
1179
+ aria-selected="false"
973
1180
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
974
1181
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
975
1182
  >
@@ -1187,7 +1394,8 @@ section: components
1187
1394
  <span class="pf-v6-c-button__text">Skip to content</span>
1188
1395
  </a>
1189
1396
  </div>
1190
- <header class="pf-v6-c-masthead" id="nested-tabs-example-masthead">
1397
+
1398
+ <header class="pf-v6-c-masthead" id="nested-tabs-example-docked">
1191
1399
  <div class="pf-v6-c-masthead__main">
1192
1400
  <span class="pf-v6-c-masthead__toggle">
1193
1401
  <button
@@ -1229,7 +1437,7 @@ section: components
1229
1437
  y1="2.25860997e-13%"
1230
1438
  x2="32%"
1231
1439
  y2="100%"
1232
- id="linearGradient-nested-tabs-example-masthead"
1440
+ id="linearGradient-nested-tabs-example-docked"
1233
1441
  >
1234
1442
  <stop stop-color="#2B9AF3" offset="0%" />
1235
1443
  <stop
@@ -1283,11 +1491,11 @@ section: components
1283
1491
  />
1284
1492
  <path
1285
1493
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1286
- fill="url(#linearGradient-nested-tabs-example-masthead)"
1494
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1287
1495
  />
1288
1496
  <path
1289
1497
  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"
1290
- fill="url(#linearGradient-nested-tabs-example-masthead)"
1498
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1291
1499
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1292
1500
  />
1293
1501
  </g>
@@ -1299,7 +1507,7 @@ section: components
1299
1507
  <div class="pf-v6-c-masthead__content">
1300
1508
  <div
1301
1509
  class="pf-v6-c-toolbar pf-m-static"
1302
- id="nested-tabs-example-masthead-toolbar"
1510
+ id="nested-tabs-example-docked-toolbar"
1303
1511
  >
1304
1512
  <div class="pf-v6-c-toolbar__content">
1305
1513
  <div class="pf-v6-c-toolbar__content-section">
@@ -1317,7 +1525,19 @@ section: components
1317
1525
  aria-label="Application launcher"
1318
1526
  >
1319
1527
  <span class="pf-v6-c-menu-toggle__icon">
1320
- <i class="fas fa-th" aria-hidden="true"></i>
1528
+ <svg
1529
+ class="pf-v6-svg"
1530
+ viewBox="0 0 512 512"
1531
+ fill="currentColor"
1532
+ aria-hidden="true"
1533
+ role="img"
1534
+ width="1em"
1535
+ height="1em"
1536
+ >
1537
+ <path
1538
+ 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"
1539
+ />
1540
+ </svg>
1321
1541
  </span>
1322
1542
  </button>
1323
1543
  </div>
@@ -1329,7 +1549,19 @@ section: components
1329
1549
  aria-label="Settings"
1330
1550
  >
1331
1551
  <span class="pf-v6-c-menu-toggle__icon">
1332
- <i class="fas fa-cog" aria-hidden="true"></i>
1552
+ <svg
1553
+ class="pf-v6-svg"
1554
+ viewBox="0 0 32 32"
1555
+ fill="currentColor"
1556
+ aria-hidden="true"
1557
+ role="img"
1558
+ width="1em"
1559
+ height="1em"
1560
+ >
1561
+ <path
1562
+ 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"
1563
+ />
1564
+ </svg>
1333
1565
  </span>
1334
1566
  </button>
1335
1567
  </div>
@@ -1341,7 +1573,19 @@ section: components
1341
1573
  aria-label="Help"
1342
1574
  >
1343
1575
  <span class="pf-v6-c-menu-toggle__icon">
1344
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1576
+ <svg
1577
+ class="pf-v6-svg"
1578
+ viewBox="0 0 512 512"
1579
+ fill="currentColor"
1580
+ aria-hidden="true"
1581
+ role="img"
1582
+ width="1em"
1583
+ height="1em"
1584
+ >
1585
+ <path
1586
+ 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"
1587
+ />
1588
+ </svg>
1345
1589
  </span>
1346
1590
  </button>
1347
1591
  </div>
@@ -1355,7 +1599,19 @@ section: components
1355
1599
  aria-label="Actions"
1356
1600
  >
1357
1601
  <span class="pf-v6-c-menu-toggle__icon">
1358
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1602
+ <svg
1603
+ class="pf-v6-svg"
1604
+ viewBox="0 0 32 32"
1605
+ fill="currentColor"
1606
+ aria-hidden="true"
1607
+ role="img"
1608
+ width="1em"
1609
+ height="1em"
1610
+ >
1611
+ <path
1612
+ 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"
1613
+ />
1614
+ </svg>
1359
1615
  </span>
1360
1616
  </button>
1361
1617
  </div>
@@ -1366,44 +1622,46 @@ section: components
1366
1622
  </div>
1367
1623
  </header>
1368
1624
  <div class="pf-v6-c-page__sidebar">
1369
- <div class="pf-v6-c-page__sidebar-body">
1370
- <nav
1371
- class="pf-v6-c-nav"
1372
- id="nested-tabs-example-primary-nav"
1373
- aria-label="Global"
1374
- >
1375
- <ul class="pf-v6-c-nav__list" role="list">
1376
- <li class="pf-v6-c-nav__item">
1377
- <a href="#" class="pf-v6-c-nav__link">
1378
- <span class="pf-v6-c-nav__link-text">System panel</span>
1379
- </a>
1380
- </li>
1381
- <li class="pf-v6-c-nav__item">
1382
- <a
1383
- href="#"
1384
- class="pf-v6-c-nav__link pf-m-current"
1385
- aria-current="page"
1386
- >
1387
- <span class="pf-v6-c-nav__link-text">Policy</span>
1388
- </a>
1389
- </li>
1390
- <li class="pf-v6-c-nav__item">
1391
- <a href="#" class="pf-v6-c-nav__link">
1392
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1393
- </a>
1394
- </li>
1395
- <li class="pf-v6-c-nav__item">
1396
- <a href="#" class="pf-v6-c-nav__link">
1397
- <span class="pf-v6-c-nav__link-text">Network services</span>
1398
- </a>
1399
- </li>
1400
- <li class="pf-v6-c-nav__item">
1401
- <a href="#" class="pf-v6-c-nav__link">
1402
- <span class="pf-v6-c-nav__link-text">Server</span>
1403
- </a>
1404
- </li>
1405
- </ul>
1406
- </nav>
1625
+ <div class="pf-v6-c-page__sidebar-main">
1626
+ <div class="pf-v6-c-page__sidebar-body">
1627
+ <nav
1628
+ class="pf-v6-c-nav"
1629
+ id="nested-tabs-example-primary-nav"
1630
+ aria-label="Global"
1631
+ >
1632
+ <ul class="pf-v6-c-nav__list" role="list">
1633
+ <li class="pf-v6-c-nav__item">
1634
+ <a href="#" class="pf-v6-c-nav__link">
1635
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1636
+ </a>
1637
+ </li>
1638
+ <li class="pf-v6-c-nav__item">
1639
+ <a
1640
+ href="#"
1641
+ class="pf-v6-c-nav__link pf-m-current"
1642
+ aria-current="page"
1643
+ >
1644
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1645
+ </a>
1646
+ </li>
1647
+ <li class="pf-v6-c-nav__item">
1648
+ <a href="#" class="pf-v6-c-nav__link">
1649
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1650
+ </a>
1651
+ </li>
1652
+ <li class="pf-v6-c-nav__item">
1653
+ <a href="#" class="pf-v6-c-nav__link">
1654
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1655
+ </a>
1656
+ </li>
1657
+ <li class="pf-v6-c-nav__item">
1658
+ <a href="#" class="pf-v6-c-nav__link">
1659
+ <span class="pf-v6-c-nav__link-text">Server</span>
1660
+ </a>
1661
+ </li>
1662
+ </ul>
1663
+ </nav>
1664
+ </div>
1407
1665
  </div>
1408
1666
  </div>
1409
1667
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1421,21 +1679,57 @@ section: components
1421
1679
  </li>
1422
1680
  <li class="pf-v6-c-breadcrumb__item">
1423
1681
  <span class="pf-v6-c-breadcrumb__item-divider">
1424
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1682
+ <svg
1683
+ class="pf-v6-svg"
1684
+ viewBox="0 0 20 20"
1685
+ fill="currentColor"
1686
+ aria-hidden="true"
1687
+ role="img"
1688
+ width="1em"
1689
+ height="1em"
1690
+ >
1691
+ <path
1692
+ 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"
1693
+ />
1694
+ </svg>
1425
1695
  </span>
1426
1696
 
1427
1697
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1428
1698
  </li>
1429
1699
  <li class="pf-v6-c-breadcrumb__item">
1430
1700
  <span class="pf-v6-c-breadcrumb__item-divider">
1431
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1701
+ <svg
1702
+ class="pf-v6-svg"
1703
+ viewBox="0 0 20 20"
1704
+ fill="currentColor"
1705
+ aria-hidden="true"
1706
+ role="img"
1707
+ width="1em"
1708
+ height="1em"
1709
+ >
1710
+ <path
1711
+ 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"
1712
+ />
1713
+ </svg>
1432
1714
  </span>
1433
1715
 
1434
1716
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1435
1717
  </li>
1436
1718
  <li class="pf-v6-c-breadcrumb__item">
1437
1719
  <span class="pf-v6-c-breadcrumb__item-divider">
1438
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1720
+ <svg
1721
+ class="pf-v6-svg"
1722
+ viewBox="0 0 20 20"
1723
+ fill="currentColor"
1724
+ aria-hidden="true"
1725
+ role="img"
1726
+ width="1em"
1727
+ height="1em"
1728
+ >
1729
+ <path
1730
+ 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"
1731
+ />
1732
+ </svg>
1439
1733
  </span>
1440
1734
 
1441
1735
  <a
@@ -1448,9 +1742,15 @@ section: components
1448
1742
  </nav>
1449
1743
  </div>
1450
1744
  </section>
1451
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1745
+ <section
1746
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1747
+ aria-labelledby="main-title"
1748
+ >
1452
1749
  <div class="pf-v6-c-page__main-body">
1453
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1750
+ <h1
1751
+ class="pf-v6-c-content--h1 pf-m-page-title"
1752
+ id="main-title"
1753
+ >Main title</h1>
1454
1754
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1455
1755
  </div>
1456
1756
  </section>
@@ -1458,15 +1758,17 @@ section: components
1458
1758
  <div class="pf-v6-c-page__main-body">
1459
1759
  <div
1460
1760
  class="pf-v6-c-tabs pf-m-page-insets"
1761
+ aria-label="Clusters"
1461
1762
  role="region"
1462
1763
  id="nested-tabs-example-tabs-tabs"
1463
1764
  >
1464
- <ul class="pf-v6-c-tabs__list" role="tablist">
1765
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Clusters">
1465
1766
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1466
1767
  <button
1467
1768
  type="button"
1468
1769
  class="pf-v6-c-tabs__link"
1469
1770
  role="tab"
1771
+ aria-selected="true"
1470
1772
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1471
1773
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
1472
1774
  >
@@ -1478,6 +1780,7 @@ section: components
1478
1780
  type="button"
1479
1781
  class="pf-v6-c-tabs__link"
1480
1782
  role="tab"
1783
+ aria-selected="false"
1481
1784
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1482
1785
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
1483
1786
  >
@@ -1511,10 +1814,15 @@ section: components
1511
1814
  <div class="pf-v6-l-flex__item">
1512
1815
  <div
1513
1816
  class="pf-v6-c-tabs"
1817
+ aria-label="Cluster 1"
1514
1818
  role="region"
1515
1819
  id="nested-tabs-example-tabs-tabs-subtabs"
1516
1820
  >
1517
- <ul class="pf-v6-c-tabs__list" role="tablist">
1821
+ <ul
1822
+ class="pf-v6-c-tabs__list"
1823
+ role="tablist"
1824
+ aria-label="Cluster 1"
1825
+ >
1518
1826
  <li
1519
1827
  class="pf-v6-c-tabs__item pf-m-current"
1520
1828
  role="presentation"
@@ -1523,6 +1831,7 @@ section: components
1523
1831
  type="button"
1524
1832
  class="pf-v6-c-tabs__link"
1525
1833
  role="tab"
1834
+ aria-selected="true"
1526
1835
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1527
1836
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1528
1837
  >
@@ -1537,6 +1846,7 @@ section: components
1537
1846
  type="button"
1538
1847
  class="pf-v6-c-tabs__link"
1539
1848
  role="tab"
1849
+ aria-selected="false"
1540
1850
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1541
1851
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1542
1852
  >
@@ -1553,6 +1863,7 @@ section: components
1553
1863
  type="button"
1554
1864
  class="pf-v6-c-tabs__link"
1555
1865
  role="tab"
1866
+ aria-selected="false"
1556
1867
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1557
1868
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1558
1869
  >
@@ -1569,6 +1880,7 @@ section: components
1569
1880
  type="button"
1570
1881
  class="pf-v6-c-tabs__link"
1571
1882
  role="tab"
1883
+ aria-selected="false"
1572
1884
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1573
1885
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1574
1886
  >
@@ -1692,7 +2004,8 @@ section: components
1692
2004
  <span class="pf-v6-c-button__text">Skip to content</span>
1693
2005
  </a>
1694
2006
  </div>
1695
- <header class="pf-v6-c-masthead" id="table-tabs-example-masthead">
2007
+
2008
+ <header class="pf-v6-c-masthead" id="table-tabs-example-docked">
1696
2009
  <div class="pf-v6-c-masthead__main">
1697
2010
  <span class="pf-v6-c-masthead__toggle">
1698
2011
  <button
@@ -1734,7 +2047,7 @@ section: components
1734
2047
  y1="2.25860997e-13%"
1735
2048
  x2="32%"
1736
2049
  y2="100%"
1737
- id="linearGradient-table-tabs-example-masthead"
2050
+ id="linearGradient-table-tabs-example-docked"
1738
2051
  >
1739
2052
  <stop stop-color="#2B9AF3" offset="0%" />
1740
2053
  <stop
@@ -1788,11 +2101,11 @@ section: components
1788
2101
  />
1789
2102
  <path
1790
2103
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1791
- fill="url(#linearGradient-table-tabs-example-masthead)"
2104
+ fill="url(#linearGradient-table-tabs-example-docked)"
1792
2105
  />
1793
2106
  <path
1794
2107
  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"
1795
- fill="url(#linearGradient-table-tabs-example-masthead)"
2108
+ fill="url(#linearGradient-table-tabs-example-docked)"
1796
2109
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1797
2110
  />
1798
2111
  </g>
@@ -1804,7 +2117,7 @@ section: components
1804
2117
  <div class="pf-v6-c-masthead__content">
1805
2118
  <div
1806
2119
  class="pf-v6-c-toolbar pf-m-static"
1807
- id="table-tabs-example-masthead-toolbar"
2120
+ id="table-tabs-example-docked-toolbar"
1808
2121
  >
1809
2122
  <div class="pf-v6-c-toolbar__content">
1810
2123
  <div class="pf-v6-c-toolbar__content-section">
@@ -1822,7 +2135,19 @@ section: components
1822
2135
  aria-label="Application launcher"
1823
2136
  >
1824
2137
  <span class="pf-v6-c-menu-toggle__icon">
1825
- <i class="fas fa-th" aria-hidden="true"></i>
2138
+ <svg
2139
+ class="pf-v6-svg"
2140
+ viewBox="0 0 512 512"
2141
+ fill="currentColor"
2142
+ aria-hidden="true"
2143
+ role="img"
2144
+ width="1em"
2145
+ height="1em"
2146
+ >
2147
+ <path
2148
+ 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"
2149
+ />
2150
+ </svg>
1826
2151
  </span>
1827
2152
  </button>
1828
2153
  </div>
@@ -1834,7 +2159,19 @@ section: components
1834
2159
  aria-label="Settings"
1835
2160
  >
1836
2161
  <span class="pf-v6-c-menu-toggle__icon">
1837
- <i class="fas fa-cog" aria-hidden="true"></i>
2162
+ <svg
2163
+ class="pf-v6-svg"
2164
+ viewBox="0 0 32 32"
2165
+ fill="currentColor"
2166
+ aria-hidden="true"
2167
+ role="img"
2168
+ width="1em"
2169
+ height="1em"
2170
+ >
2171
+ <path
2172
+ 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"
2173
+ />
2174
+ </svg>
1838
2175
  </span>
1839
2176
  </button>
1840
2177
  </div>
@@ -1846,7 +2183,19 @@ section: components
1846
2183
  aria-label="Help"
1847
2184
  >
1848
2185
  <span class="pf-v6-c-menu-toggle__icon">
1849
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2186
+ <svg
2187
+ class="pf-v6-svg"
2188
+ viewBox="0 0 512 512"
2189
+ fill="currentColor"
2190
+ aria-hidden="true"
2191
+ role="img"
2192
+ width="1em"
2193
+ height="1em"
2194
+ >
2195
+ <path
2196
+ 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"
2197
+ />
2198
+ </svg>
1850
2199
  </span>
1851
2200
  </button>
1852
2201
  </div>
@@ -1860,7 +2209,19 @@ section: components
1860
2209
  aria-label="Actions"
1861
2210
  >
1862
2211
  <span class="pf-v6-c-menu-toggle__icon">
1863
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2212
+ <svg
2213
+ class="pf-v6-svg"
2214
+ viewBox="0 0 32 32"
2215
+ fill="currentColor"
2216
+ aria-hidden="true"
2217
+ role="img"
2218
+ width="1em"
2219
+ height="1em"
2220
+ >
2221
+ <path
2222
+ 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"
2223
+ />
2224
+ </svg>
1864
2225
  </span>
1865
2226
  </button>
1866
2227
  </div>
@@ -1871,44 +2232,46 @@ section: components
1871
2232
  </div>
1872
2233
  </header>
1873
2234
  <div class="pf-v6-c-page__sidebar">
1874
- <div class="pf-v6-c-page__sidebar-body">
1875
- <nav
1876
- class="pf-v6-c-nav"
1877
- id="table-tabs-example-primary-nav"
1878
- aria-label="Global"
1879
- >
1880
- <ul class="pf-v6-c-nav__list" role="list">
1881
- <li class="pf-v6-c-nav__item">
1882
- <a href="#" class="pf-v6-c-nav__link">
1883
- <span class="pf-v6-c-nav__link-text">System panel</span>
1884
- </a>
1885
- </li>
1886
- <li class="pf-v6-c-nav__item">
1887
- <a
1888
- href="#"
1889
- class="pf-v6-c-nav__link pf-m-current"
1890
- aria-current="page"
1891
- >
1892
- <span class="pf-v6-c-nav__link-text">Policy</span>
1893
- </a>
1894
- </li>
1895
- <li class="pf-v6-c-nav__item">
1896
- <a href="#" class="pf-v6-c-nav__link">
1897
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1898
- </a>
1899
- </li>
1900
- <li class="pf-v6-c-nav__item">
1901
- <a href="#" class="pf-v6-c-nav__link">
1902
- <span class="pf-v6-c-nav__link-text">Network services</span>
1903
- </a>
1904
- </li>
1905
- <li class="pf-v6-c-nav__item">
1906
- <a href="#" class="pf-v6-c-nav__link">
1907
- <span class="pf-v6-c-nav__link-text">Server</span>
1908
- </a>
1909
- </li>
1910
- </ul>
1911
- </nav>
2235
+ <div class="pf-v6-c-page__sidebar-main">
2236
+ <div class="pf-v6-c-page__sidebar-body">
2237
+ <nav
2238
+ class="pf-v6-c-nav"
2239
+ id="table-tabs-example-primary-nav"
2240
+ aria-label="Global"
2241
+ >
2242
+ <ul class="pf-v6-c-nav__list" role="list">
2243
+ <li class="pf-v6-c-nav__item">
2244
+ <a href="#" class="pf-v6-c-nav__link">
2245
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2246
+ </a>
2247
+ </li>
2248
+ <li class="pf-v6-c-nav__item">
2249
+ <a
2250
+ href="#"
2251
+ class="pf-v6-c-nav__link pf-m-current"
2252
+ aria-current="page"
2253
+ >
2254
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2255
+ </a>
2256
+ </li>
2257
+ <li class="pf-v6-c-nav__item">
2258
+ <a href="#" class="pf-v6-c-nav__link">
2259
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2260
+ </a>
2261
+ </li>
2262
+ <li class="pf-v6-c-nav__item">
2263
+ <a href="#" class="pf-v6-c-nav__link">
2264
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2265
+ </a>
2266
+ </li>
2267
+ <li class="pf-v6-c-nav__item">
2268
+ <a href="#" class="pf-v6-c-nav__link">
2269
+ <span class="pf-v6-c-nav__link-text">Server</span>
2270
+ </a>
2271
+ </li>
2272
+ </ul>
2273
+ </nav>
2274
+ </div>
1912
2275
  </div>
1913
2276
  </div>
1914
2277
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1926,21 +2289,57 @@ section: components
1926
2289
  </li>
1927
2290
  <li class="pf-v6-c-breadcrumb__item">
1928
2291
  <span class="pf-v6-c-breadcrumb__item-divider">
1929
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2292
+ <svg
2293
+ class="pf-v6-svg"
2294
+ viewBox="0 0 20 20"
2295
+ fill="currentColor"
2296
+ aria-hidden="true"
2297
+ role="img"
2298
+ width="1em"
2299
+ height="1em"
2300
+ >
2301
+ <path
2302
+ 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"
2303
+ />
2304
+ </svg>
1930
2305
  </span>
1931
2306
 
1932
2307
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1933
2308
  </li>
1934
2309
  <li class="pf-v6-c-breadcrumb__item">
1935
2310
  <span class="pf-v6-c-breadcrumb__item-divider">
1936
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2311
+ <svg
2312
+ class="pf-v6-svg"
2313
+ viewBox="0 0 20 20"
2314
+ fill="currentColor"
2315
+ aria-hidden="true"
2316
+ role="img"
2317
+ width="1em"
2318
+ height="1em"
2319
+ >
2320
+ <path
2321
+ 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"
2322
+ />
2323
+ </svg>
1937
2324
  </span>
1938
2325
 
1939
2326
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1940
2327
  </li>
1941
2328
  <li class="pf-v6-c-breadcrumb__item">
1942
2329
  <span class="pf-v6-c-breadcrumb__item-divider">
1943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2330
+ <svg
2331
+ class="pf-v6-svg"
2332
+ viewBox="0 0 20 20"
2333
+ fill="currentColor"
2334
+ aria-hidden="true"
2335
+ role="img"
2336
+ width="1em"
2337
+ height="1em"
2338
+ >
2339
+ <path
2340
+ 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"
2341
+ />
2342
+ </svg>
1944
2343
  </span>
1945
2344
 
1946
2345
  <a
@@ -1953,9 +2352,15 @@ section: components
1953
2352
  </nav>
1954
2353
  </div>
1955
2354
  </section>
1956
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2355
+ <section
2356
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2357
+ aria-labelledby="main-title"
2358
+ >
1957
2359
  <div class="pf-v6-c-page__main-body">
1958
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2360
+ <h1
2361
+ class="pf-v6-c-content--h1 pf-m-page-title"
2362
+ id="main-title"
2363
+ >Main title</h1>
1959
2364
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1960
2365
  </div>
1961
2366
  </section>
@@ -1976,7 +2381,19 @@ section: components
1976
2381
  aria-controls="table-tabs-example-tabs-toolbar-expandable-content"
1977
2382
  >
1978
2383
  <span class="pf-v6-c-menu-toggle__icon">
1979
- <i class="fas fa-filter" aria-hidden="true"></i>
2384
+ <svg
2385
+ class="pf-v6-svg"
2386
+ viewBox="0 0 32 32"
2387
+ fill="currentColor"
2388
+ aria-hidden="true"
2389
+ role="img"
2390
+ width="1em"
2391
+ height="1em"
2392
+ >
2393
+ <path
2394
+ d="M29.875 3.5V7a.876.876 0 0 1-.256.619l-9.744 9.744v10.638a.875.875 0 0 1-.599.83l-6 2a.876.876 0 0 1-.788-.12.874.874 0 0 1-.363-.71V17.363L2.381 7.619A.876.876 0 0 1 2.125 7V3.5c0-.758.617-1.375 1.375-1.375h25c.758 0 1.375.617 1.375 1.375Z"
2395
+ />
2396
+ </svg>
1980
2397
  </span>
1981
2398
  </button>
1982
2399
  </div>
@@ -1991,7 +2408,19 @@ section: components
1991
2408
  <span class="pf-v6-c-menu-toggle__text">Name</span>
1992
2409
  <span class="pf-v6-c-menu-toggle__controls">
1993
2410
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1994
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2411
+ <svg
2412
+ class="pf-v6-svg"
2413
+ viewBox="0 0 20 20"
2414
+ fill="currentColor"
2415
+ aria-hidden="true"
2416
+ role="img"
2417
+ width="1em"
2418
+ height="1em"
2419
+ >
2420
+ <path
2421
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2422
+ />
2423
+ </svg>
1995
2424
  </span>
1996
2425
  </span>
1997
2426
  </button>
@@ -2005,10 +2434,25 @@ section: components
2005
2434
  aria-label="Sort"
2006
2435
  >
2007
2436
  <span class="pf-v6-c-button__icon">
2008
- <i
2009
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2010
- aria-hidden="true"
2011
- ></i>
2437
+ <span class="pf-v6-c-icon">
2438
+ <span
2439
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2440
+ >
2441
+ <svg
2442
+ class="pf-v6-svg"
2443
+ viewBox="0 0 512 512"
2444
+ fill="currentColor"
2445
+ aria-hidden="true"
2446
+ role="img"
2447
+ width="1em"
2448
+ height="1em"
2449
+ >
2450
+ <path
2451
+ d="M304 416h-64a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h64a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-128-64h-48V48a16 16 0 0 0-16-16H80a16 16 0 0 0-16 16v304H16c-14.19 0-21.37 17.24-11.29 27.31l80 96a16 16 0 0 0 22.62 0l80-96C197.35 369.26 190.22 352 176 352zm256-192H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h192a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-64 128H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM496 32H240a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h256a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
2452
+ />
2453
+ </svg>
2454
+ </span>
2455
+ </span>
2012
2456
  </span>
2013
2457
  </button>
2014
2458
  </div>
@@ -2049,7 +2493,19 @@ section: components
2049
2493
  id="table-tabs-example-tabs-toolbar-overflow-menu-toggle"
2050
2494
  >
2051
2495
  <span class="pf-v6-c-menu-toggle__icon">
2052
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2496
+ <svg
2497
+ class="pf-v6-svg"
2498
+ viewBox="0 0 32 32"
2499
+ fill="currentColor"
2500
+ aria-hidden="true"
2501
+ role="img"
2502
+ width="1em"
2503
+ height="1em"
2504
+ >
2505
+ <path
2506
+ 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"
2507
+ />
2508
+ </svg>
2053
2509
  </span>
2054
2510
  </button>
2055
2511
  </div>
@@ -2224,7 +2680,19 @@ section: components
2224
2680
  aria-label="Table actions"
2225
2681
  >
2226
2682
  <span class="pf-v6-c-menu-toggle__icon">
2227
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2683
+ <svg
2684
+ class="pf-v6-svg"
2685
+ viewBox="0 0 32 32"
2686
+ fill="currentColor"
2687
+ aria-hidden="true"
2688
+ role="img"
2689
+ width="1em"
2690
+ height="1em"
2691
+ >
2692
+ <path
2693
+ 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"
2694
+ />
2695
+ </svg>
2228
2696
  </span>
2229
2697
  </button>
2230
2698
  </td>
@@ -2316,7 +2784,19 @@ section: components
2316
2784
  aria-label="Table actions"
2317
2785
  >
2318
2786
  <span class="pf-v6-c-menu-toggle__icon">
2319
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2787
+ <svg
2788
+ class="pf-v6-svg"
2789
+ viewBox="0 0 32 32"
2790
+ fill="currentColor"
2791
+ aria-hidden="true"
2792
+ role="img"
2793
+ width="1em"
2794
+ height="1em"
2795
+ >
2796
+ <path
2797
+ 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"
2798
+ />
2799
+ </svg>
2320
2800
  </span>
2321
2801
  </button>
2322
2802
  </td>
@@ -2408,7 +2888,19 @@ section: components
2408
2888
  aria-label="Table actions"
2409
2889
  >
2410
2890
  <span class="pf-v6-c-menu-toggle__icon">
2411
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2891
+ <svg
2892
+ class="pf-v6-svg"
2893
+ viewBox="0 0 32 32"
2894
+ fill="currentColor"
2895
+ aria-hidden="true"
2896
+ role="img"
2897
+ width="1em"
2898
+ height="1em"
2899
+ >
2900
+ <path
2901
+ 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"
2902
+ />
2903
+ </svg>
2412
2904
  </span>
2413
2905
  </button>
2414
2906
  </td>
@@ -2500,7 +2992,19 @@ section: components
2500
2992
  aria-label="Table actions"
2501
2993
  >
2502
2994
  <span class="pf-v6-c-menu-toggle__icon">
2503
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2995
+ <svg
2996
+ class="pf-v6-svg"
2997
+ viewBox="0 0 32 32"
2998
+ fill="currentColor"
2999
+ aria-hidden="true"
3000
+ role="img"
3001
+ width="1em"
3002
+ height="1em"
3003
+ >
3004
+ <path
3005
+ 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"
3006
+ />
3007
+ </svg>
2504
3008
  </span>
2505
3009
  </button>
2506
3010
  </td>
@@ -2591,7 +3095,19 @@ section: components
2591
3095
  aria-label="Table actions"
2592
3096
  >
2593
3097
  <span class="pf-v6-c-menu-toggle__icon">
2594
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3098
+ <svg
3099
+ class="pf-v6-svg"
3100
+ viewBox="0 0 32 32"
3101
+ fill="currentColor"
3102
+ aria-hidden="true"
3103
+ role="img"
3104
+ width="1em"
3105
+ height="1em"
3106
+ >
3107
+ <path
3108
+ 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"
3109
+ />
3110
+ </svg>
2595
3111
  </span>
2596
3112
  </button>
2597
3113
  </td>
@@ -2615,7 +3131,19 @@ section: components
2615
3131
  aria-label="Close drawer panel"
2616
3132
  >
2617
3133
  <span class="pf-v6-c-button__icon">
2618
- <i class="fas fa-times" aria-hidden="true"></i>
3134
+ <svg
3135
+ class="pf-v6-svg"
3136
+ viewBox="0 0 20 20"
3137
+ fill="currentColor"
3138
+ aria-hidden="true"
3139
+ role="img"
3140
+ width="1em"
3141
+ height="1em"
3142
+ >
3143
+ <path
3144
+ 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"
3145
+ />
3146
+ </svg>
2619
3147
  </span>
2620
3148
  </button>
2621
3149
  </div>
@@ -2636,6 +3164,7 @@ section: components
2636
3164
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
2637
3165
  <div
2638
3166
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
3167
+ aria-label="Node 2"
2639
3168
  role="region"
2640
3169
  id="-tabs"
2641
3170
  >
@@ -2646,11 +3175,27 @@ section: components
2646
3175
  aria-label="Scroll left"
2647
3176
  >
2648
3177
  <span class="pf-v6-c-button__icon">
2649
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3178
+ <svg
3179
+ class="pf-v6-svg"
3180
+ viewBox="0 0 20 20"
3181
+ fill="currentColor"
3182
+ aria-hidden="true"
3183
+ role="img"
3184
+ width="1em"
3185
+ height="1em"
3186
+ >
3187
+ <path
3188
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3189
+ />
3190
+ </svg>
2650
3191
  </span>
2651
3192
  </button>
2652
3193
  </div>
2653
- <ul class="pf-v6-c-tabs__list" role="tablist">
3194
+ <ul
3195
+ class="pf-v6-c-tabs__list"
3196
+ role="tablist"
3197
+ aria-label="Node 2"
3198
+ >
2654
3199
  <li
2655
3200
  class="pf-v6-c-tabs__item pf-m-current"
2656
3201
  role="presentation"
@@ -2659,6 +3204,7 @@ section: components
2659
3204
  type="button"
2660
3205
  class="pf-v6-c-tabs__link"
2661
3206
  role="tab"
3207
+ aria-selected="true"
2662
3208
  aria-controls="-tabs-tab1-panel"
2663
3209
  id="-tabs-tab1-link"
2664
3210
  >
@@ -2670,6 +3216,7 @@ section: components
2670
3216
  type="button"
2671
3217
  class="pf-v6-c-tabs__link"
2672
3218
  role="tab"
3219
+ aria-selected="false"
2673
3220
  aria-controls="-tabs-tab2-panel"
2674
3221
  id="-tabs-tab2-link"
2675
3222
  >
@@ -2684,7 +3231,19 @@ section: components
2684
3231
  aria-label="Scroll right"
2685
3232
  >
2686
3233
  <span class="pf-v6-c-button__icon">
2687
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3234
+ <svg
3235
+ class="pf-v6-svg"
3236
+ viewBox="0 0 20 20"
3237
+ fill="currentColor"
3238
+ aria-hidden="true"
3239
+ role="img"
3240
+ width="1em"
3241
+ height="1em"
3242
+ >
3243
+ <path
3244
+ 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"
3245
+ />
3246
+ </svg>
2688
3247
  </span>
2689
3248
  </button>
2690
3249
  </div>
@@ -2857,7 +3416,19 @@ section: components
2857
3416
  aria-label="Close"
2858
3417
  >
2859
3418
  <span class="pf-v6-c-button__icon">
2860
- <i class="fas fa-times" aria-hidden="true"></i>
3419
+ <svg
3420
+ class="pf-v6-svg"
3421
+ viewBox="0 0 20 20"
3422
+ fill="currentColor"
3423
+ aria-hidden="true"
3424
+ role="img"
3425
+ width="1em"
3426
+ height="1em"
3427
+ >
3428
+ <path
3429
+ 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"
3430
+ />
3431
+ </svg>
2861
3432
  </span>
2862
3433
  </button>
2863
3434
  </div>
@@ -2877,15 +3448,21 @@ section: components
2877
3448
  <div class="pf-v6-l-grid__item">
2878
3449
  <div
2879
3450
  class="pf-v6-c-tabs pf-m-inset-none"
3451
+ aria-label="PatternFly"
2880
3452
  role="region"
2881
3453
  id="modal-tabs-example-tabs"
2882
3454
  >
2883
- <ul class="pf-v6-c-tabs__list" role="tablist">
3455
+ <ul
3456
+ class="pf-v6-c-tabs__list"
3457
+ role="tablist"
3458
+ aria-label="PatternFly"
3459
+ >
2884
3460
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2885
3461
  <button
2886
3462
  type="button"
2887
3463
  class="pf-v6-c-tabs__link"
2888
3464
  role="tab"
3465
+ aria-selected="true"
2889
3466
  aria-controls="modal-tabs-example-tabs-details-panel"
2890
3467
  id="modal-tabs-example-tabs-details-link"
2891
3468
  >
@@ -2897,6 +3474,7 @@ section: components
2897
3474
  type="button"
2898
3475
  class="pf-v6-c-tabs__link"
2899
3476
  role="tab"
3477
+ aria-selected="false"
2900
3478
  aria-controls="modal-tabs-example-tabs-documentation-panel"
2901
3479
  id="modal-tabs-example-tabs-documentation-link"
2902
3480
  >
@@ -2956,7 +3534,8 @@ section: components
2956
3534
  <span class="pf-v6-c-button__text">Skip to content</span>
2957
3535
  </a>
2958
3536
  </div>
2959
- <header class="pf-v6-c-masthead" id="modal-tabs-example-masthead">
3537
+
3538
+ <header class="pf-v6-c-masthead" id="modal-tabs-example-docked">
2960
3539
  <div class="pf-v6-c-masthead__main">
2961
3540
  <span class="pf-v6-c-masthead__toggle">
2962
3541
  <button
@@ -2998,7 +3577,7 @@ section: components
2998
3577
  y1="2.25860997e-13%"
2999
3578
  x2="32%"
3000
3579
  y2="100%"
3001
- id="linearGradient-modal-tabs-example-masthead"
3580
+ id="linearGradient-modal-tabs-example-docked"
3002
3581
  >
3003
3582
  <stop stop-color="#2B9AF3" offset="0%" />
3004
3583
  <stop
@@ -3052,11 +3631,11 @@ section: components
3052
3631
  />
3053
3632
  <path
3054
3633
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3055
- fill="url(#linearGradient-modal-tabs-example-masthead)"
3634
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3056
3635
  />
3057
3636
  <path
3058
3637
  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"
3059
- fill="url(#linearGradient-modal-tabs-example-masthead)"
3638
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3060
3639
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3061
3640
  />
3062
3641
  </g>
@@ -3068,7 +3647,7 @@ section: components
3068
3647
  <div class="pf-v6-c-masthead__content">
3069
3648
  <div
3070
3649
  class="pf-v6-c-toolbar pf-m-static"
3071
- id="modal-tabs-example-masthead-toolbar"
3650
+ id="modal-tabs-example-docked-toolbar"
3072
3651
  >
3073
3652
  <div class="pf-v6-c-toolbar__content">
3074
3653
  <div class="pf-v6-c-toolbar__content-section">
@@ -3086,7 +3665,19 @@ section: components
3086
3665
  aria-label="Application launcher"
3087
3666
  >
3088
3667
  <span class="pf-v6-c-menu-toggle__icon">
3089
- <i class="fas fa-th" aria-hidden="true"></i>
3668
+ <svg
3669
+ class="pf-v6-svg"
3670
+ viewBox="0 0 512 512"
3671
+ fill="currentColor"
3672
+ aria-hidden="true"
3673
+ role="img"
3674
+ width="1em"
3675
+ height="1em"
3676
+ >
3677
+ <path
3678
+ 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"
3679
+ />
3680
+ </svg>
3090
3681
  </span>
3091
3682
  </button>
3092
3683
  </div>
@@ -3098,7 +3689,19 @@ section: components
3098
3689
  aria-label="Settings"
3099
3690
  >
3100
3691
  <span class="pf-v6-c-menu-toggle__icon">
3101
- <i class="fas fa-cog" aria-hidden="true"></i>
3692
+ <svg
3693
+ class="pf-v6-svg"
3694
+ viewBox="0 0 32 32"
3695
+ fill="currentColor"
3696
+ aria-hidden="true"
3697
+ role="img"
3698
+ width="1em"
3699
+ height="1em"
3700
+ >
3701
+ <path
3702
+ 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"
3703
+ />
3704
+ </svg>
3102
3705
  </span>
3103
3706
  </button>
3104
3707
  </div>
@@ -3110,7 +3713,19 @@ section: components
3110
3713
  aria-label="Help"
3111
3714
  >
3112
3715
  <span class="pf-v6-c-menu-toggle__icon">
3113
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3716
+ <svg
3717
+ class="pf-v6-svg"
3718
+ viewBox="0 0 512 512"
3719
+ fill="currentColor"
3720
+ aria-hidden="true"
3721
+ role="img"
3722
+ width="1em"
3723
+ height="1em"
3724
+ >
3725
+ <path
3726
+ 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"
3727
+ />
3728
+ </svg>
3114
3729
  </span>
3115
3730
  </button>
3116
3731
  </div>
@@ -3124,7 +3739,19 @@ section: components
3124
3739
  aria-label="Actions"
3125
3740
  >
3126
3741
  <span class="pf-v6-c-menu-toggle__icon">
3127
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3742
+ <svg
3743
+ class="pf-v6-svg"
3744
+ viewBox="0 0 32 32"
3745
+ fill="currentColor"
3746
+ aria-hidden="true"
3747
+ role="img"
3748
+ width="1em"
3749
+ height="1em"
3750
+ >
3751
+ <path
3752
+ 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"
3753
+ />
3754
+ </svg>
3128
3755
  </span>
3129
3756
  </button>
3130
3757
  </div>
@@ -3135,44 +3762,46 @@ section: components
3135
3762
  </div>
3136
3763
  </header>
3137
3764
  <div class="pf-v6-c-page__sidebar">
3138
- <div class="pf-v6-c-page__sidebar-body">
3139
- <nav
3140
- class="pf-v6-c-nav"
3141
- id="modal-tabs-example-primary-nav"
3142
- aria-label="Global"
3143
- >
3144
- <ul class="pf-v6-c-nav__list" role="list">
3145
- <li class="pf-v6-c-nav__item">
3146
- <a href="#" class="pf-v6-c-nav__link">
3147
- <span class="pf-v6-c-nav__link-text">System panel</span>
3148
- </a>
3149
- </li>
3150
- <li class="pf-v6-c-nav__item">
3151
- <a
3152
- href="#"
3153
- class="pf-v6-c-nav__link pf-m-current"
3154
- aria-current="page"
3155
- >
3156
- <span class="pf-v6-c-nav__link-text">Policy</span>
3157
- </a>
3158
- </li>
3159
- <li class="pf-v6-c-nav__item">
3160
- <a href="#" class="pf-v6-c-nav__link">
3161
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3162
- </a>
3163
- </li>
3164
- <li class="pf-v6-c-nav__item">
3165
- <a href="#" class="pf-v6-c-nav__link">
3166
- <span class="pf-v6-c-nav__link-text">Network services</span>
3167
- </a>
3168
- </li>
3169
- <li class="pf-v6-c-nav__item">
3170
- <a href="#" class="pf-v6-c-nav__link">
3171
- <span class="pf-v6-c-nav__link-text">Server</span>
3172
- </a>
3173
- </li>
3174
- </ul>
3175
- </nav>
3765
+ <div class="pf-v6-c-page__sidebar-main">
3766
+ <div class="pf-v6-c-page__sidebar-body">
3767
+ <nav
3768
+ class="pf-v6-c-nav"
3769
+ id="modal-tabs-example-primary-nav"
3770
+ aria-label="Global"
3771
+ >
3772
+ <ul class="pf-v6-c-nav__list" role="list">
3773
+ <li class="pf-v6-c-nav__item">
3774
+ <a href="#" class="pf-v6-c-nav__link">
3775
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3776
+ </a>
3777
+ </li>
3778
+ <li class="pf-v6-c-nav__item">
3779
+ <a
3780
+ href="#"
3781
+ class="pf-v6-c-nav__link pf-m-current"
3782
+ aria-current="page"
3783
+ >
3784
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3785
+ </a>
3786
+ </li>
3787
+ <li class="pf-v6-c-nav__item">
3788
+ <a href="#" class="pf-v6-c-nav__link">
3789
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3790
+ </a>
3791
+ </li>
3792
+ <li class="pf-v6-c-nav__item">
3793
+ <a href="#" class="pf-v6-c-nav__link">
3794
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3795
+ </a>
3796
+ </li>
3797
+ <li class="pf-v6-c-nav__item">
3798
+ <a href="#" class="pf-v6-c-nav__link">
3799
+ <span class="pf-v6-c-nav__link-text">Server</span>
3800
+ </a>
3801
+ </li>
3802
+ </ul>
3803
+ </nav>
3804
+ </div>
3176
3805
  </div>
3177
3806
  </div>
3178
3807
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3190,21 +3819,57 @@ section: components
3190
3819
  </li>
3191
3820
  <li class="pf-v6-c-breadcrumb__item">
3192
3821
  <span class="pf-v6-c-breadcrumb__item-divider">
3193
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3822
+ <svg
3823
+ class="pf-v6-svg"
3824
+ viewBox="0 0 20 20"
3825
+ fill="currentColor"
3826
+ aria-hidden="true"
3827
+ role="img"
3828
+ width="1em"
3829
+ height="1em"
3830
+ >
3831
+ <path
3832
+ 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"
3833
+ />
3834
+ </svg>
3194
3835
  </span>
3195
3836
 
3196
3837
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3197
3838
  </li>
3198
3839
  <li class="pf-v6-c-breadcrumb__item">
3199
3840
  <span class="pf-v6-c-breadcrumb__item-divider">
3200
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3841
+ <svg
3842
+ class="pf-v6-svg"
3843
+ viewBox="0 0 20 20"
3844
+ fill="currentColor"
3845
+ aria-hidden="true"
3846
+ role="img"
3847
+ width="1em"
3848
+ height="1em"
3849
+ >
3850
+ <path
3851
+ 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"
3852
+ />
3853
+ </svg>
3201
3854
  </span>
3202
3855
 
3203
3856
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3204
3857
  </li>
3205
3858
  <li class="pf-v6-c-breadcrumb__item">
3206
3859
  <span class="pf-v6-c-breadcrumb__item-divider">
3207
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3860
+ <svg
3861
+ class="pf-v6-svg"
3862
+ viewBox="0 0 20 20"
3863
+ fill="currentColor"
3864
+ aria-hidden="true"
3865
+ role="img"
3866
+ width="1em"
3867
+ height="1em"
3868
+ >
3869
+ <path
3870
+ 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"
3871
+ />
3872
+ </svg>
3208
3873
  </span>
3209
3874
 
3210
3875
  <a
@@ -3217,9 +3882,15 @@ section: components
3217
3882
  </nav>
3218
3883
  </div>
3219
3884
  </section>
3220
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3885
+ <section
3886
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3887
+ aria-labelledby="main-title"
3888
+ >
3221
3889
  <div class="pf-v6-c-page__main-body">
3222
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3890
+ <h1
3891
+ class="pf-v6-c-content--h1 pf-m-page-title"
3892
+ id="main-title"
3893
+ >Main title</h1>
3223
3894
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3224
3895
  </div>
3225
3896
  </section>
@@ -3280,7 +3951,8 @@ section: components
3280
3951
  <span class="pf-v6-c-button__text">Skip to content</span>
3281
3952
  </a>
3282
3953
  </div>
3283
- <header class="pf-v6-c-masthead" id="gray-tabs-example-masthead">
3954
+
3955
+ <header class="pf-v6-c-masthead" id="gray-tabs-example-docked">
3284
3956
  <div class="pf-v6-c-masthead__main">
3285
3957
  <span class="pf-v6-c-masthead__toggle">
3286
3958
  <button
@@ -3322,7 +3994,7 @@ section: components
3322
3994
  y1="2.25860997e-13%"
3323
3995
  x2="32%"
3324
3996
  y2="100%"
3325
- id="linearGradient-gray-tabs-example-masthead"
3997
+ id="linearGradient-gray-tabs-example-docked"
3326
3998
  >
3327
3999
  <stop stop-color="#2B9AF3" offset="0%" />
3328
4000
  <stop
@@ -3376,11 +4048,11 @@ section: components
3376
4048
  />
3377
4049
  <path
3378
4050
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3379
- fill="url(#linearGradient-gray-tabs-example-masthead)"
4051
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3380
4052
  />
3381
4053
  <path
3382
4054
  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"
3383
- fill="url(#linearGradient-gray-tabs-example-masthead)"
4055
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3384
4056
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3385
4057
  />
3386
4058
  </g>
@@ -3392,7 +4064,7 @@ section: components
3392
4064
  <div class="pf-v6-c-masthead__content">
3393
4065
  <div
3394
4066
  class="pf-v6-c-toolbar pf-m-static"
3395
- id="gray-tabs-example-masthead-toolbar"
4067
+ id="gray-tabs-example-docked-toolbar"
3396
4068
  >
3397
4069
  <div class="pf-v6-c-toolbar__content">
3398
4070
  <div class="pf-v6-c-toolbar__content-section">
@@ -3410,7 +4082,19 @@ section: components
3410
4082
  aria-label="Application launcher"
3411
4083
  >
3412
4084
  <span class="pf-v6-c-menu-toggle__icon">
3413
- <i class="fas fa-th" aria-hidden="true"></i>
4085
+ <svg
4086
+ class="pf-v6-svg"
4087
+ viewBox="0 0 512 512"
4088
+ fill="currentColor"
4089
+ aria-hidden="true"
4090
+ role="img"
4091
+ width="1em"
4092
+ height="1em"
4093
+ >
4094
+ <path
4095
+ 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"
4096
+ />
4097
+ </svg>
3414
4098
  </span>
3415
4099
  </button>
3416
4100
  </div>
@@ -3422,7 +4106,19 @@ section: components
3422
4106
  aria-label="Settings"
3423
4107
  >
3424
4108
  <span class="pf-v6-c-menu-toggle__icon">
3425
- <i class="fas fa-cog" aria-hidden="true"></i>
4109
+ <svg
4110
+ class="pf-v6-svg"
4111
+ viewBox="0 0 32 32"
4112
+ fill="currentColor"
4113
+ aria-hidden="true"
4114
+ role="img"
4115
+ width="1em"
4116
+ height="1em"
4117
+ >
4118
+ <path
4119
+ 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"
4120
+ />
4121
+ </svg>
3426
4122
  </span>
3427
4123
  </button>
3428
4124
  </div>
@@ -3434,7 +4130,19 @@ section: components
3434
4130
  aria-label="Help"
3435
4131
  >
3436
4132
  <span class="pf-v6-c-menu-toggle__icon">
3437
- <i class="fas fa-question-circle" aria-hidden="true"></i>
4133
+ <svg
4134
+ class="pf-v6-svg"
4135
+ viewBox="0 0 512 512"
4136
+ fill="currentColor"
4137
+ aria-hidden="true"
4138
+ role="img"
4139
+ width="1em"
4140
+ height="1em"
4141
+ >
4142
+ <path
4143
+ 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"
4144
+ />
4145
+ </svg>
3438
4146
  </span>
3439
4147
  </button>
3440
4148
  </div>
@@ -3448,7 +4156,19 @@ section: components
3448
4156
  aria-label="Actions"
3449
4157
  >
3450
4158
  <span class="pf-v6-c-menu-toggle__icon">
3451
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4159
+ <svg
4160
+ class="pf-v6-svg"
4161
+ viewBox="0 0 32 32"
4162
+ fill="currentColor"
4163
+ aria-hidden="true"
4164
+ role="img"
4165
+ width="1em"
4166
+ height="1em"
4167
+ >
4168
+ <path
4169
+ 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"
4170
+ />
4171
+ </svg>
3452
4172
  </span>
3453
4173
  </button>
3454
4174
  </div>
@@ -3459,44 +4179,46 @@ section: components
3459
4179
  </div>
3460
4180
  </header>
3461
4181
  <div class="pf-v6-c-page__sidebar">
3462
- <div class="pf-v6-c-page__sidebar-body">
3463
- <nav
3464
- class="pf-v6-c-nav"
3465
- id="gray-tabs-example-primary-nav"
3466
- aria-label="Global"
3467
- >
3468
- <ul class="pf-v6-c-nav__list" role="list">
3469
- <li class="pf-v6-c-nav__item">
3470
- <a href="#" class="pf-v6-c-nav__link">
3471
- <span class="pf-v6-c-nav__link-text">System panel</span>
3472
- </a>
3473
- </li>
3474
- <li class="pf-v6-c-nav__item">
3475
- <a
3476
- href="#"
3477
- class="pf-v6-c-nav__link pf-m-current"
3478
- aria-current="page"
3479
- >
3480
- <span class="pf-v6-c-nav__link-text">Policy</span>
3481
- </a>
3482
- </li>
3483
- <li class="pf-v6-c-nav__item">
3484
- <a href="#" class="pf-v6-c-nav__link">
3485
- <span class="pf-v6-c-nav__link-text">Authentication</span>
3486
- </a>
3487
- </li>
3488
- <li class="pf-v6-c-nav__item">
3489
- <a href="#" class="pf-v6-c-nav__link">
3490
- <span class="pf-v6-c-nav__link-text">Network services</span>
3491
- </a>
3492
- </li>
3493
- <li class="pf-v6-c-nav__item">
3494
- <a href="#" class="pf-v6-c-nav__link">
3495
- <span class="pf-v6-c-nav__link-text">Server</span>
3496
- </a>
3497
- </li>
3498
- </ul>
3499
- </nav>
4182
+ <div class="pf-v6-c-page__sidebar-main">
4183
+ <div class="pf-v6-c-page__sidebar-body">
4184
+ <nav
4185
+ class="pf-v6-c-nav"
4186
+ id="gray-tabs-example-primary-nav"
4187
+ aria-label="Global"
4188
+ >
4189
+ <ul class="pf-v6-c-nav__list" role="list">
4190
+ <li class="pf-v6-c-nav__item">
4191
+ <a href="#" class="pf-v6-c-nav__link">
4192
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4193
+ </a>
4194
+ </li>
4195
+ <li class="pf-v6-c-nav__item">
4196
+ <a
4197
+ href="#"
4198
+ class="pf-v6-c-nav__link pf-m-current"
4199
+ aria-current="page"
4200
+ >
4201
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4202
+ </a>
4203
+ </li>
4204
+ <li class="pf-v6-c-nav__item">
4205
+ <a href="#" class="pf-v6-c-nav__link">
4206
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4207
+ </a>
4208
+ </li>
4209
+ <li class="pf-v6-c-nav__item">
4210
+ <a href="#" class="pf-v6-c-nav__link">
4211
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4212
+ </a>
4213
+ </li>
4214
+ <li class="pf-v6-c-nav__item">
4215
+ <a href="#" class="pf-v6-c-nav__link">
4216
+ <span class="pf-v6-c-nav__link-text">Server</span>
4217
+ </a>
4218
+ </li>
4219
+ </ul>
4220
+ </nav>
4221
+ </div>
3500
4222
  </div>
3501
4223
  </div>
3502
4224
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3514,21 +4236,57 @@ section: components
3514
4236
  </li>
3515
4237
  <li class="pf-v6-c-breadcrumb__item">
3516
4238
  <span class="pf-v6-c-breadcrumb__item-divider">
3517
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4239
+ <svg
4240
+ class="pf-v6-svg"
4241
+ viewBox="0 0 20 20"
4242
+ fill="currentColor"
4243
+ aria-hidden="true"
4244
+ role="img"
4245
+ width="1em"
4246
+ height="1em"
4247
+ >
4248
+ <path
4249
+ 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"
4250
+ />
4251
+ </svg>
3518
4252
  </span>
3519
4253
 
3520
4254
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3521
4255
  </li>
3522
4256
  <li class="pf-v6-c-breadcrumb__item">
3523
4257
  <span class="pf-v6-c-breadcrumb__item-divider">
3524
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4258
+ <svg
4259
+ class="pf-v6-svg"
4260
+ viewBox="0 0 20 20"
4261
+ fill="currentColor"
4262
+ aria-hidden="true"
4263
+ role="img"
4264
+ width="1em"
4265
+ height="1em"
4266
+ >
4267
+ <path
4268
+ 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"
4269
+ />
4270
+ </svg>
3525
4271
  </span>
3526
4272
 
3527
4273
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3528
4274
  </li>
3529
4275
  <li class="pf-v6-c-breadcrumb__item">
3530
4276
  <span class="pf-v6-c-breadcrumb__item-divider">
3531
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4277
+ <svg
4278
+ class="pf-v6-svg"
4279
+ viewBox="0 0 20 20"
4280
+ fill="currentColor"
4281
+ aria-hidden="true"
4282
+ role="img"
4283
+ width="1em"
4284
+ height="1em"
4285
+ >
4286
+ <path
4287
+ 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"
4288
+ />
4289
+ </svg>
3532
4290
  </span>
3533
4291
 
3534
4292
  <a
@@ -3541,9 +4299,15 @@ section: components
3541
4299
  </nav>
3542
4300
  </div>
3543
4301
  </section>
3544
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4302
+ <section
4303
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4304
+ aria-labelledby="main-title"
4305
+ >
3545
4306
  <div class="pf-v6-c-page__main-body">
3546
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4307
+ <h1
4308
+ class="pf-v6-c-content--h1 pf-m-page-title"
4309
+ id="main-title"
4310
+ >Main title</h1>
3547
4311
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3548
4312
  </div>
3549
4313
  </section>
@@ -3551,15 +4315,21 @@ section: components
3551
4315
  <div class="pf-v6-c-page__main-body">
3552
4316
  <div
3553
4317
  class="pf-v6-c-tabs pf-m-page-insets"
4318
+ aria-label="Red Hat Enterprise Linux"
3554
4319
  role="region"
3555
4320
  id="gray-tabs-example-tabs-tabs"
3556
4321
  >
3557
- <ul class="pf-v6-c-tabs__list" role="tablist">
4322
+ <ul
4323
+ class="pf-v6-c-tabs__list"
4324
+ role="tablist"
4325
+ aria-label="Red Hat Enterprise Linux"
4326
+ >
3558
4327
  <li class="pf-v6-c-tabs__item" role="presentation">
3559
4328
  <button
3560
4329
  type="button"
3561
4330
  class="pf-v6-c-tabs__link"
3562
4331
  role="tab"
4332
+ aria-selected="false"
3563
4333
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3564
4334
  id="gray-tabs-example-tabs-tabs-new-link"
3565
4335
  >
@@ -3571,6 +4341,7 @@ section: components
3571
4341
  type="button"
3572
4342
  class="pf-v6-c-tabs__link"
3573
4343
  role="tab"
4344
+ aria-selected="true"
3574
4345
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3575
4346
  id="gray-tabs-example-tabs-tabs-get-started-link"
3576
4347
  >
@@ -3582,6 +4353,7 @@ section: components
3582
4353
  type="button"
3583
4354
  class="pf-v6-c-tabs__link"
3584
4355
  role="tab"
4356
+ aria-selected="false"
3585
4357
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3586
4358
  id="gray-tabs-example-tabs-tabs-knowledge-link"
3587
4359
  >
@@ -3593,6 +4365,7 @@ section: components
3593
4365
  type="button"
3594
4366
  class="pf-v6-c-tabs__link"
3595
4367
  role="tab"
4368
+ aria-selected="false"
3596
4369
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3597
4370
  id="gray-tabs-example-tabs-tabs-support-link"
3598
4371
  >
@@ -3632,10 +4405,15 @@ section: components
3632
4405
  <div class="pf-v6-l-grid__item">
3633
4406
  <div
3634
4407
  class="pf-v6-c-tabs pf-m-inset-none"
4408
+ aria-label="Get started"
3635
4409
  role="region"
3636
4410
  id="gray-tabs-example-tabs-subtabs"
3637
4411
  >
3638
- <ul class="pf-v6-c-tabs__list" role="tablist">
4412
+ <ul
4413
+ class="pf-v6-c-tabs__list"
4414
+ role="tablist"
4415
+ aria-label="Get started"
4416
+ >
3639
4417
  <li
3640
4418
  class="pf-v6-c-tabs__item pf-m-current"
3641
4419
  role="presentation"
@@ -3644,6 +4422,7 @@ section: components
3644
4422
  type="button"
3645
4423
  class="pf-v6-c-tabs__link"
3646
4424
  role="tab"
4425
+ aria-selected="true"
3647
4426
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3648
4427
  id="gray-tabs-example-tabs-subtabs-x86-link"
3649
4428
  >
@@ -3655,6 +4434,7 @@ section: components
3655
4434
  type="button"
3656
4435
  class="pf-v6-c-tabs__link"
3657
4436
  role="tab"
4437
+ aria-selected="false"
3658
4438
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3659
4439
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3660
4440
  >