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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/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">
@@ -194,44 +195,46 @@ section: components
194
195
  </div>
195
196
  </header>
196
197
  <div class="pf-v6-c-page__sidebar">
197
- <div class="pf-v6-c-page__sidebar-body">
198
- <nav
199
- class="pf-v6-c-nav"
200
- id="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>
198
+ <div class="pf-v6-c-page__sidebar-main">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
+ <nav
201
+ class="pf-v6-c-nav"
202
+ id="tabs-tables-and-tabs-example-primary-nav"
203
+ aria-label="Global"
204
+ >
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
210
+ </li>
211
+ <li class="pf-v6-c-nav__item">
212
+ <a
213
+ href="#"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
+ aria-current="page"
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
219
+ </li>
220
+ <li class="pf-v6-c-nav__item">
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
224
+ </li>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
229
+ </li>
230
+ <li class="pf-v6-c-nav__item">
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
234
+ </li>
235
+ </ul>
236
+ </nav>
237
+ </div>
235
238
  </div>
236
239
  </div>
237
240
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -249,21 +252,57 @@ section: components
249
252
  </li>
250
253
  <li class="pf-v6-c-breadcrumb__item">
251
254
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
255
+ <svg
256
+ class="pf-v6-svg"
257
+ viewBox="0 0 20 20"
258
+ fill="currentColor"
259
+ aria-hidden="true"
260
+ role="img"
261
+ width="1em"
262
+ height="1em"
263
+ >
264
+ <path
265
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
266
+ />
267
+ </svg>
253
268
  </span>
254
269
 
255
270
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
271
  </li>
257
272
  <li class="pf-v6-c-breadcrumb__item">
258
273
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 20 20"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
285
+ />
286
+ </svg>
260
287
  </span>
261
288
 
262
289
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
290
  </li>
264
291
  <li class="pf-v6-c-breadcrumb__item">
265
292
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
293
+ <svg
294
+ class="pf-v6-svg"
295
+ viewBox="0 0 20 20"
296
+ fill="currentColor"
297
+ aria-hidden="true"
298
+ role="img"
299
+ width="1em"
300
+ height="1em"
301
+ >
302
+ <path
303
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
304
+ />
305
+ </svg>
267
306
  </span>
268
307
 
269
308
  <a
@@ -287,15 +326,17 @@ section: components
287
326
  <div class="pf-v6-c-page__main-body">
288
327
  <div
289
328
  class="pf-v6-c-tabs pf-m-page-insets"
329
+ aria-label="Pod"
290
330
  role="region"
291
331
  id="tabs-tables-and-tabs-example-tabs"
292
332
  >
293
- <ul class="pf-v6-c-tabs__list" role="tablist">
333
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
294
334
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
295
335
  <button
296
336
  type="button"
297
337
  class="pf-v6-c-tabs__link"
298
338
  role="tab"
339
+ aria-selected="true"
299
340
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
300
341
  id="tabs-tables-and-tabs-example-tabs-details-link"
301
342
  >
@@ -307,6 +348,7 @@ section: components
307
348
  type="button"
308
349
  class="pf-v6-c-tabs__link"
309
350
  role="tab"
351
+ aria-selected="false"
310
352
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
311
353
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
312
354
  >
@@ -318,6 +360,7 @@ section: components
318
360
  type="button"
319
361
  class="pf-v6-c-tabs__link"
320
362
  role="tab"
363
+ aria-selected="false"
321
364
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
322
365
  id="tabs-tables-and-tabs-example-tabs-environment-link"
323
366
  >
@@ -329,6 +372,7 @@ section: components
329
372
  type="button"
330
373
  class="pf-v6-c-tabs__link"
331
374
  role="tab"
375
+ aria-selected="false"
332
376
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
333
377
  id="tabs-tables-and-tabs-example-tabs-logs-link"
334
378
  >
@@ -340,6 +384,7 @@ section: components
340
384
  type="button"
341
385
  class="pf-v6-c-tabs__link"
342
386
  role="tab"
387
+ aria-selected="false"
343
388
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
344
389
  id="tabs-tables-and-tabs-example-tabs-events-link"
345
390
  >
@@ -351,6 +396,7 @@ section: components
351
396
  type="button"
352
397
  class="pf-v6-c-tabs__link"
353
398
  role="tab"
399
+ aria-selected="false"
354
400
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
355
401
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
356
402
  >
@@ -601,7 +647,8 @@ section: components
601
647
  <span class="pf-v6-c-button__text">Skip to content</span>
602
648
  </a>
603
649
  </div>
604
- <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
650
+
651
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-docked">
605
652
  <div class="pf-v6-c-masthead__main">
606
653
  <span class="pf-v6-c-masthead__toggle">
607
654
  <button
@@ -643,7 +690,7 @@ section: components
643
690
  y1="2.25860997e-13%"
644
691
  x2="32%"
645
692
  y2="100%"
646
- id="linearGradient-tabs-tables-and-tabs-example-masthead"
693
+ id="linearGradient-tabs-tables-and-tabs-example-docked"
647
694
  >
648
695
  <stop stop-color="#2B9AF3" offset="0%" />
649
696
  <stop
@@ -697,11 +744,11 @@ section: components
697
744
  />
698
745
  <path
699
746
  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)"
747
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
701
748
  />
702
749
  <path
703
750
  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)"
751
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
705
752
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
706
753
  />
707
754
  </g>
@@ -713,7 +760,7 @@ section: components
713
760
  <div class="pf-v6-c-masthead__content">
714
761
  <div
715
762
  class="pf-v6-c-toolbar pf-m-static"
716
- id="tabs-tables-and-tabs-example-masthead-toolbar"
763
+ id="tabs-tables-and-tabs-example-docked-toolbar"
717
764
  >
718
765
  <div class="pf-v6-c-toolbar__content">
719
766
  <div class="pf-v6-c-toolbar__content-section">
@@ -780,44 +827,46 @@ section: components
780
827
  </div>
781
828
  </header>
782
829
  <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>
830
+ <div class="pf-v6-c-page__sidebar-main">
831
+ <div class="pf-v6-c-page__sidebar-body">
832
+ <nav
833
+ class="pf-v6-c-nav"
834
+ id="tabs-tables-and-tabs-example-primary-nav"
835
+ aria-label="Global"
836
+ >
837
+ <ul class="pf-v6-c-nav__list" role="list">
838
+ <li class="pf-v6-c-nav__item">
839
+ <a href="#" class="pf-v6-c-nav__link">
840
+ <span class="pf-v6-c-nav__link-text">System panel</span>
841
+ </a>
842
+ </li>
843
+ <li class="pf-v6-c-nav__item">
844
+ <a
845
+ href="#"
846
+ class="pf-v6-c-nav__link pf-m-current"
847
+ aria-current="page"
848
+ >
849
+ <span class="pf-v6-c-nav__link-text">Policy</span>
850
+ </a>
851
+ </li>
852
+ <li class="pf-v6-c-nav__item">
853
+ <a href="#" class="pf-v6-c-nav__link">
854
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
855
+ </a>
856
+ </li>
857
+ <li class="pf-v6-c-nav__item">
858
+ <a href="#" class="pf-v6-c-nav__link">
859
+ <span class="pf-v6-c-nav__link-text">Network services</span>
860
+ </a>
861
+ </li>
862
+ <li class="pf-v6-c-nav__item">
863
+ <a href="#" class="pf-v6-c-nav__link">
864
+ <span class="pf-v6-c-nav__link-text">Server</span>
865
+ </a>
866
+ </li>
867
+ </ul>
868
+ </nav>
869
+ </div>
821
870
  </div>
822
871
  </div>
823
872
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -835,21 +884,57 @@ section: components
835
884
  </li>
836
885
  <li class="pf-v6-c-breadcrumb__item">
837
886
  <span class="pf-v6-c-breadcrumb__item-divider">
838
- <i class="fas fa-angle-right" aria-hidden="true"></i>
887
+ <svg
888
+ class="pf-v6-svg"
889
+ viewBox="0 0 20 20"
890
+ fill="currentColor"
891
+ aria-hidden="true"
892
+ role="img"
893
+ width="1em"
894
+ height="1em"
895
+ >
896
+ <path
897
+ 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"
898
+ />
899
+ </svg>
839
900
  </span>
840
901
 
841
902
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
842
903
  </li>
843
904
  <li class="pf-v6-c-breadcrumb__item">
844
905
  <span class="pf-v6-c-breadcrumb__item-divider">
845
- <i class="fas fa-angle-right" aria-hidden="true"></i>
906
+ <svg
907
+ class="pf-v6-svg"
908
+ viewBox="0 0 20 20"
909
+ fill="currentColor"
910
+ aria-hidden="true"
911
+ role="img"
912
+ width="1em"
913
+ height="1em"
914
+ >
915
+ <path
916
+ 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"
917
+ />
918
+ </svg>
846
919
  </span>
847
920
 
848
921
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
849
922
  </li>
850
923
  <li class="pf-v6-c-breadcrumb__item">
851
924
  <span class="pf-v6-c-breadcrumb__item-divider">
852
- <i class="fas fa-angle-right" aria-hidden="true"></i>
925
+ <svg
926
+ class="pf-v6-svg"
927
+ viewBox="0 0 20 20"
928
+ fill="currentColor"
929
+ aria-hidden="true"
930
+ role="img"
931
+ width="1em"
932
+ height="1em"
933
+ >
934
+ <path
935
+ 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"
936
+ />
937
+ </svg>
853
938
  </span>
854
939
 
855
940
  <a
@@ -872,15 +957,17 @@ section: components
872
957
  <div class="pf-v6-c-page__main-body">
873
958
  <div
874
959
  class="pf-v6-c-tabs pf-m-page-insets"
960
+ aria-label="Pod"
875
961
  role="region"
876
962
  id="tabs-tables-and-tabs-example-tabs"
877
963
  >
878
- <ul class="pf-v6-c-tabs__list" role="tablist">
964
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
879
965
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
880
966
  <button
881
967
  type="button"
882
968
  class="pf-v6-c-tabs__link"
883
969
  role="tab"
970
+ aria-selected="true"
884
971
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
885
972
  id="tabs-tables-and-tabs-example-tabs-details-link"
886
973
  >
@@ -892,6 +979,7 @@ section: components
892
979
  type="button"
893
980
  class="pf-v6-c-tabs__link"
894
981
  role="tab"
982
+ aria-selected="false"
895
983
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
896
984
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
897
985
  >
@@ -903,6 +991,7 @@ section: components
903
991
  type="button"
904
992
  class="pf-v6-c-tabs__link"
905
993
  role="tab"
994
+ aria-selected="false"
906
995
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
907
996
  id="tabs-tables-and-tabs-example-tabs-environment-link"
908
997
  >
@@ -914,6 +1003,7 @@ section: components
914
1003
  type="button"
915
1004
  class="pf-v6-c-tabs__link"
916
1005
  role="tab"
1006
+ aria-selected="false"
917
1007
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
918
1008
  id="tabs-tables-and-tabs-example-tabs-logs-link"
919
1009
  >
@@ -925,6 +1015,7 @@ section: components
925
1015
  type="button"
926
1016
  class="pf-v6-c-tabs__link"
927
1017
  role="tab"
1018
+ aria-selected="false"
928
1019
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
929
1020
  id="tabs-tables-and-tabs-example-tabs-events-link"
930
1021
  >
@@ -936,6 +1027,7 @@ section: components
936
1027
  type="button"
937
1028
  class="pf-v6-c-tabs__link"
938
1029
  role="tab"
1030
+ aria-selected="false"
939
1031
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
940
1032
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
941
1033
  >
@@ -950,15 +1042,21 @@ section: components
950
1042
  <div class="pf-v6-c-page__main-body">
951
1043
  <div
952
1044
  class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
1045
+ aria-label="Pod details"
953
1046
  role="region"
954
1047
  id="tabs-tables-and-tabs-example-tabs-secondary"
955
1048
  >
956
- <ul class="pf-v6-c-tabs__list" role="tablist">
1049
+ <ul
1050
+ class="pf-v6-c-tabs__list"
1051
+ role="tablist"
1052
+ aria-label="Pod details"
1053
+ >
957
1054
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
958
1055
  <button
959
1056
  type="button"
960
1057
  class="pf-v6-c-tabs__link"
961
1058
  role="tab"
1059
+ aria-selected="true"
962
1060
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
963
1061
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
964
1062
  >
@@ -970,6 +1068,7 @@ section: components
970
1068
  type="button"
971
1069
  class="pf-v6-c-tabs__link"
972
1070
  role="tab"
1071
+ aria-selected="false"
973
1072
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
974
1073
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
975
1074
  >
@@ -1187,7 +1286,8 @@ section: components
1187
1286
  <span class="pf-v6-c-button__text">Skip to content</span>
1188
1287
  </a>
1189
1288
  </div>
1190
- <header class="pf-v6-c-masthead" id="nested-tabs-example-masthead">
1289
+
1290
+ <header class="pf-v6-c-masthead" id="nested-tabs-example-docked">
1191
1291
  <div class="pf-v6-c-masthead__main">
1192
1292
  <span class="pf-v6-c-masthead__toggle">
1193
1293
  <button
@@ -1229,7 +1329,7 @@ section: components
1229
1329
  y1="2.25860997e-13%"
1230
1330
  x2="32%"
1231
1331
  y2="100%"
1232
- id="linearGradient-nested-tabs-example-masthead"
1332
+ id="linearGradient-nested-tabs-example-docked"
1233
1333
  >
1234
1334
  <stop stop-color="#2B9AF3" offset="0%" />
1235
1335
  <stop
@@ -1283,11 +1383,11 @@ section: components
1283
1383
  />
1284
1384
  <path
1285
1385
  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)"
1386
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1287
1387
  />
1288
1388
  <path
1289
1389
  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)"
1390
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1291
1391
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1292
1392
  />
1293
1393
  </g>
@@ -1299,7 +1399,7 @@ section: components
1299
1399
  <div class="pf-v6-c-masthead__content">
1300
1400
  <div
1301
1401
  class="pf-v6-c-toolbar pf-m-static"
1302
- id="nested-tabs-example-masthead-toolbar"
1402
+ id="nested-tabs-example-docked-toolbar"
1303
1403
  >
1304
1404
  <div class="pf-v6-c-toolbar__content">
1305
1405
  <div class="pf-v6-c-toolbar__content-section">
@@ -1366,44 +1466,46 @@ section: components
1366
1466
  </div>
1367
1467
  </header>
1368
1468
  <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>
1469
+ <div class="pf-v6-c-page__sidebar-main">
1470
+ <div class="pf-v6-c-page__sidebar-body">
1471
+ <nav
1472
+ class="pf-v6-c-nav"
1473
+ id="nested-tabs-example-primary-nav"
1474
+ aria-label="Global"
1475
+ >
1476
+ <ul class="pf-v6-c-nav__list" role="list">
1477
+ <li class="pf-v6-c-nav__item">
1478
+ <a href="#" class="pf-v6-c-nav__link">
1479
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1480
+ </a>
1481
+ </li>
1482
+ <li class="pf-v6-c-nav__item">
1483
+ <a
1484
+ href="#"
1485
+ class="pf-v6-c-nav__link pf-m-current"
1486
+ aria-current="page"
1487
+ >
1488
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1489
+ </a>
1490
+ </li>
1491
+ <li class="pf-v6-c-nav__item">
1492
+ <a href="#" class="pf-v6-c-nav__link">
1493
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1494
+ </a>
1495
+ </li>
1496
+ <li class="pf-v6-c-nav__item">
1497
+ <a href="#" class="pf-v6-c-nav__link">
1498
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1499
+ </a>
1500
+ </li>
1501
+ <li class="pf-v6-c-nav__item">
1502
+ <a href="#" class="pf-v6-c-nav__link">
1503
+ <span class="pf-v6-c-nav__link-text">Server</span>
1504
+ </a>
1505
+ </li>
1506
+ </ul>
1507
+ </nav>
1508
+ </div>
1407
1509
  </div>
1408
1510
  </div>
1409
1511
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1421,21 +1523,57 @@ section: components
1421
1523
  </li>
1422
1524
  <li class="pf-v6-c-breadcrumb__item">
1423
1525
  <span class="pf-v6-c-breadcrumb__item-divider">
1424
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1526
+ <svg
1527
+ class="pf-v6-svg"
1528
+ viewBox="0 0 20 20"
1529
+ fill="currentColor"
1530
+ aria-hidden="true"
1531
+ role="img"
1532
+ width="1em"
1533
+ height="1em"
1534
+ >
1535
+ <path
1536
+ 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"
1537
+ />
1538
+ </svg>
1425
1539
  </span>
1426
1540
 
1427
1541
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1428
1542
  </li>
1429
1543
  <li class="pf-v6-c-breadcrumb__item">
1430
1544
  <span class="pf-v6-c-breadcrumb__item-divider">
1431
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1545
+ <svg
1546
+ class="pf-v6-svg"
1547
+ viewBox="0 0 20 20"
1548
+ fill="currentColor"
1549
+ aria-hidden="true"
1550
+ role="img"
1551
+ width="1em"
1552
+ height="1em"
1553
+ >
1554
+ <path
1555
+ 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"
1556
+ />
1557
+ </svg>
1432
1558
  </span>
1433
1559
 
1434
1560
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1435
1561
  </li>
1436
1562
  <li class="pf-v6-c-breadcrumb__item">
1437
1563
  <span class="pf-v6-c-breadcrumb__item-divider">
1438
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1564
+ <svg
1565
+ class="pf-v6-svg"
1566
+ viewBox="0 0 20 20"
1567
+ fill="currentColor"
1568
+ aria-hidden="true"
1569
+ role="img"
1570
+ width="1em"
1571
+ height="1em"
1572
+ >
1573
+ <path
1574
+ 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"
1575
+ />
1576
+ </svg>
1439
1577
  </span>
1440
1578
 
1441
1579
  <a
@@ -1458,15 +1596,17 @@ section: components
1458
1596
  <div class="pf-v6-c-page__main-body">
1459
1597
  <div
1460
1598
  class="pf-v6-c-tabs pf-m-page-insets"
1599
+ aria-label="Clusters"
1461
1600
  role="region"
1462
1601
  id="nested-tabs-example-tabs-tabs"
1463
1602
  >
1464
- <ul class="pf-v6-c-tabs__list" role="tablist">
1603
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Clusters">
1465
1604
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1466
1605
  <button
1467
1606
  type="button"
1468
1607
  class="pf-v6-c-tabs__link"
1469
1608
  role="tab"
1609
+ aria-selected="true"
1470
1610
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1471
1611
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
1472
1612
  >
@@ -1478,6 +1618,7 @@ section: components
1478
1618
  type="button"
1479
1619
  class="pf-v6-c-tabs__link"
1480
1620
  role="tab"
1621
+ aria-selected="false"
1481
1622
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1482
1623
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
1483
1624
  >
@@ -1511,10 +1652,15 @@ section: components
1511
1652
  <div class="pf-v6-l-flex__item">
1512
1653
  <div
1513
1654
  class="pf-v6-c-tabs"
1655
+ aria-label="Cluster 1"
1514
1656
  role="region"
1515
1657
  id="nested-tabs-example-tabs-tabs-subtabs"
1516
1658
  >
1517
- <ul class="pf-v6-c-tabs__list" role="tablist">
1659
+ <ul
1660
+ class="pf-v6-c-tabs__list"
1661
+ role="tablist"
1662
+ aria-label="Cluster 1"
1663
+ >
1518
1664
  <li
1519
1665
  class="pf-v6-c-tabs__item pf-m-current"
1520
1666
  role="presentation"
@@ -1523,6 +1669,7 @@ section: components
1523
1669
  type="button"
1524
1670
  class="pf-v6-c-tabs__link"
1525
1671
  role="tab"
1672
+ aria-selected="true"
1526
1673
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1527
1674
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1528
1675
  >
@@ -1537,6 +1684,7 @@ section: components
1537
1684
  type="button"
1538
1685
  class="pf-v6-c-tabs__link"
1539
1686
  role="tab"
1687
+ aria-selected="false"
1540
1688
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1541
1689
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1542
1690
  >
@@ -1553,6 +1701,7 @@ section: components
1553
1701
  type="button"
1554
1702
  class="pf-v6-c-tabs__link"
1555
1703
  role="tab"
1704
+ aria-selected="false"
1556
1705
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1557
1706
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1558
1707
  >
@@ -1569,6 +1718,7 @@ section: components
1569
1718
  type="button"
1570
1719
  class="pf-v6-c-tabs__link"
1571
1720
  role="tab"
1721
+ aria-selected="false"
1572
1722
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1573
1723
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1574
1724
  >
@@ -1692,7 +1842,8 @@ section: components
1692
1842
  <span class="pf-v6-c-button__text">Skip to content</span>
1693
1843
  </a>
1694
1844
  </div>
1695
- <header class="pf-v6-c-masthead" id="table-tabs-example-masthead">
1845
+
1846
+ <header class="pf-v6-c-masthead" id="table-tabs-example-docked">
1696
1847
  <div class="pf-v6-c-masthead__main">
1697
1848
  <span class="pf-v6-c-masthead__toggle">
1698
1849
  <button
@@ -1734,7 +1885,7 @@ section: components
1734
1885
  y1="2.25860997e-13%"
1735
1886
  x2="32%"
1736
1887
  y2="100%"
1737
- id="linearGradient-table-tabs-example-masthead"
1888
+ id="linearGradient-table-tabs-example-docked"
1738
1889
  >
1739
1890
  <stop stop-color="#2B9AF3" offset="0%" />
1740
1891
  <stop
@@ -1788,11 +1939,11 @@ section: components
1788
1939
  />
1789
1940
  <path
1790
1941
  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)"
1942
+ fill="url(#linearGradient-table-tabs-example-docked)"
1792
1943
  />
1793
1944
  <path
1794
1945
  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)"
1946
+ fill="url(#linearGradient-table-tabs-example-docked)"
1796
1947
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1797
1948
  />
1798
1949
  </g>
@@ -1804,7 +1955,7 @@ section: components
1804
1955
  <div class="pf-v6-c-masthead__content">
1805
1956
  <div
1806
1957
  class="pf-v6-c-toolbar pf-m-static"
1807
- id="table-tabs-example-masthead-toolbar"
1958
+ id="table-tabs-example-docked-toolbar"
1808
1959
  >
1809
1960
  <div class="pf-v6-c-toolbar__content">
1810
1961
  <div class="pf-v6-c-toolbar__content-section">
@@ -1871,44 +2022,46 @@ section: components
1871
2022
  </div>
1872
2023
  </header>
1873
2024
  <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>
2025
+ <div class="pf-v6-c-page__sidebar-main">
2026
+ <div class="pf-v6-c-page__sidebar-body">
2027
+ <nav
2028
+ class="pf-v6-c-nav"
2029
+ id="table-tabs-example-primary-nav"
2030
+ aria-label="Global"
2031
+ >
2032
+ <ul class="pf-v6-c-nav__list" role="list">
2033
+ <li class="pf-v6-c-nav__item">
2034
+ <a href="#" class="pf-v6-c-nav__link">
2035
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2036
+ </a>
2037
+ </li>
2038
+ <li class="pf-v6-c-nav__item">
2039
+ <a
2040
+ href="#"
2041
+ class="pf-v6-c-nav__link pf-m-current"
2042
+ aria-current="page"
2043
+ >
2044
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2045
+ </a>
2046
+ </li>
2047
+ <li class="pf-v6-c-nav__item">
2048
+ <a href="#" class="pf-v6-c-nav__link">
2049
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2050
+ </a>
2051
+ </li>
2052
+ <li class="pf-v6-c-nav__item">
2053
+ <a href="#" class="pf-v6-c-nav__link">
2054
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2055
+ </a>
2056
+ </li>
2057
+ <li class="pf-v6-c-nav__item">
2058
+ <a href="#" class="pf-v6-c-nav__link">
2059
+ <span class="pf-v6-c-nav__link-text">Server</span>
2060
+ </a>
2061
+ </li>
2062
+ </ul>
2063
+ </nav>
2064
+ </div>
1912
2065
  </div>
1913
2066
  </div>
1914
2067
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1926,21 +2079,57 @@ section: components
1926
2079
  </li>
1927
2080
  <li class="pf-v6-c-breadcrumb__item">
1928
2081
  <span class="pf-v6-c-breadcrumb__item-divider">
1929
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2082
+ <svg
2083
+ class="pf-v6-svg"
2084
+ viewBox="0 0 20 20"
2085
+ fill="currentColor"
2086
+ aria-hidden="true"
2087
+ role="img"
2088
+ width="1em"
2089
+ height="1em"
2090
+ >
2091
+ <path
2092
+ 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"
2093
+ />
2094
+ </svg>
1930
2095
  </span>
1931
2096
 
1932
2097
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1933
2098
  </li>
1934
2099
  <li class="pf-v6-c-breadcrumb__item">
1935
2100
  <span class="pf-v6-c-breadcrumb__item-divider">
1936
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2101
+ <svg
2102
+ class="pf-v6-svg"
2103
+ viewBox="0 0 20 20"
2104
+ fill="currentColor"
2105
+ aria-hidden="true"
2106
+ role="img"
2107
+ width="1em"
2108
+ height="1em"
2109
+ >
2110
+ <path
2111
+ 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"
2112
+ />
2113
+ </svg>
1937
2114
  </span>
1938
2115
 
1939
2116
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1940
2117
  </li>
1941
2118
  <li class="pf-v6-c-breadcrumb__item">
1942
2119
  <span class="pf-v6-c-breadcrumb__item-divider">
1943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2120
+ <svg
2121
+ class="pf-v6-svg"
2122
+ viewBox="0 0 20 20"
2123
+ fill="currentColor"
2124
+ aria-hidden="true"
2125
+ role="img"
2126
+ width="1em"
2127
+ height="1em"
2128
+ >
2129
+ <path
2130
+ 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"
2131
+ />
2132
+ </svg>
1944
2133
  </span>
1945
2134
 
1946
2135
  <a
@@ -2005,10 +2194,25 @@ section: components
2005
2194
  aria-label="Sort"
2006
2195
  >
2007
2196
  <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>
2197
+ <span class="pf-v6-c-icon">
2198
+ <span
2199
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2200
+ >
2201
+ <svg
2202
+ class="pf-v6-svg"
2203
+ viewBox="0 0 512 512"
2204
+ fill="currentColor"
2205
+ aria-hidden="true"
2206
+ role="img"
2207
+ width="1em"
2208
+ height="1em"
2209
+ >
2210
+ <path
2211
+ 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"
2212
+ />
2213
+ </svg>
2214
+ </span>
2215
+ </span>
2012
2216
  </span>
2013
2217
  </button>
2014
2218
  </div>
@@ -2615,7 +2819,19 @@ section: components
2615
2819
  aria-label="Close drawer panel"
2616
2820
  >
2617
2821
  <span class="pf-v6-c-button__icon">
2618
- <i class="fas fa-times" aria-hidden="true"></i>
2822
+ <svg
2823
+ class="pf-v6-svg"
2824
+ viewBox="0 0 20 20"
2825
+ fill="currentColor"
2826
+ aria-hidden="true"
2827
+ role="img"
2828
+ width="1em"
2829
+ height="1em"
2830
+ >
2831
+ <path
2832
+ 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"
2833
+ />
2834
+ </svg>
2619
2835
  </span>
2620
2836
  </button>
2621
2837
  </div>
@@ -2636,6 +2852,7 @@ section: components
2636
2852
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
2637
2853
  <div
2638
2854
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
2855
+ aria-label="Node 2"
2639
2856
  role="region"
2640
2857
  id="-tabs"
2641
2858
  >
@@ -2646,11 +2863,27 @@ section: components
2646
2863
  aria-label="Scroll left"
2647
2864
  >
2648
2865
  <span class="pf-v6-c-button__icon">
2649
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2866
+ <svg
2867
+ class="pf-v6-svg"
2868
+ viewBox="0 0 20 20"
2869
+ fill="currentColor"
2870
+ aria-hidden="true"
2871
+ role="img"
2872
+ width="1em"
2873
+ height="1em"
2874
+ >
2875
+ <path
2876
+ 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"
2877
+ />
2878
+ </svg>
2650
2879
  </span>
2651
2880
  </button>
2652
2881
  </div>
2653
- <ul class="pf-v6-c-tabs__list" role="tablist">
2882
+ <ul
2883
+ class="pf-v6-c-tabs__list"
2884
+ role="tablist"
2885
+ aria-label="Node 2"
2886
+ >
2654
2887
  <li
2655
2888
  class="pf-v6-c-tabs__item pf-m-current"
2656
2889
  role="presentation"
@@ -2659,6 +2892,7 @@ section: components
2659
2892
  type="button"
2660
2893
  class="pf-v6-c-tabs__link"
2661
2894
  role="tab"
2895
+ aria-selected="true"
2662
2896
  aria-controls="-tabs-tab1-panel"
2663
2897
  id="-tabs-tab1-link"
2664
2898
  >
@@ -2670,6 +2904,7 @@ section: components
2670
2904
  type="button"
2671
2905
  class="pf-v6-c-tabs__link"
2672
2906
  role="tab"
2907
+ aria-selected="false"
2673
2908
  aria-controls="-tabs-tab2-panel"
2674
2909
  id="-tabs-tab2-link"
2675
2910
  >
@@ -2684,7 +2919,19 @@ section: components
2684
2919
  aria-label="Scroll right"
2685
2920
  >
2686
2921
  <span class="pf-v6-c-button__icon">
2687
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2922
+ <svg
2923
+ class="pf-v6-svg"
2924
+ viewBox="0 0 20 20"
2925
+ fill="currentColor"
2926
+ aria-hidden="true"
2927
+ role="img"
2928
+ width="1em"
2929
+ height="1em"
2930
+ >
2931
+ <path
2932
+ 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"
2933
+ />
2934
+ </svg>
2688
2935
  </span>
2689
2936
  </button>
2690
2937
  </div>
@@ -2857,7 +3104,19 @@ section: components
2857
3104
  aria-label="Close"
2858
3105
  >
2859
3106
  <span class="pf-v6-c-button__icon">
2860
- <i class="fas fa-times" aria-hidden="true"></i>
3107
+ <svg
3108
+ class="pf-v6-svg"
3109
+ viewBox="0 0 20 20"
3110
+ fill="currentColor"
3111
+ aria-hidden="true"
3112
+ role="img"
3113
+ width="1em"
3114
+ height="1em"
3115
+ >
3116
+ <path
3117
+ 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"
3118
+ />
3119
+ </svg>
2861
3120
  </span>
2862
3121
  </button>
2863
3122
  </div>
@@ -2877,15 +3136,21 @@ section: components
2877
3136
  <div class="pf-v6-l-grid__item">
2878
3137
  <div
2879
3138
  class="pf-v6-c-tabs pf-m-inset-none"
3139
+ aria-label="PatternFly"
2880
3140
  role="region"
2881
3141
  id="modal-tabs-example-tabs"
2882
3142
  >
2883
- <ul class="pf-v6-c-tabs__list" role="tablist">
3143
+ <ul
3144
+ class="pf-v6-c-tabs__list"
3145
+ role="tablist"
3146
+ aria-label="PatternFly"
3147
+ >
2884
3148
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2885
3149
  <button
2886
3150
  type="button"
2887
3151
  class="pf-v6-c-tabs__link"
2888
3152
  role="tab"
3153
+ aria-selected="true"
2889
3154
  aria-controls="modal-tabs-example-tabs-details-panel"
2890
3155
  id="modal-tabs-example-tabs-details-link"
2891
3156
  >
@@ -2897,6 +3162,7 @@ section: components
2897
3162
  type="button"
2898
3163
  class="pf-v6-c-tabs__link"
2899
3164
  role="tab"
3165
+ aria-selected="false"
2900
3166
  aria-controls="modal-tabs-example-tabs-documentation-panel"
2901
3167
  id="modal-tabs-example-tabs-documentation-link"
2902
3168
  >
@@ -2956,7 +3222,8 @@ section: components
2956
3222
  <span class="pf-v6-c-button__text">Skip to content</span>
2957
3223
  </a>
2958
3224
  </div>
2959
- <header class="pf-v6-c-masthead" id="modal-tabs-example-masthead">
3225
+
3226
+ <header class="pf-v6-c-masthead" id="modal-tabs-example-docked">
2960
3227
  <div class="pf-v6-c-masthead__main">
2961
3228
  <span class="pf-v6-c-masthead__toggle">
2962
3229
  <button
@@ -2998,7 +3265,7 @@ section: components
2998
3265
  y1="2.25860997e-13%"
2999
3266
  x2="32%"
3000
3267
  y2="100%"
3001
- id="linearGradient-modal-tabs-example-masthead"
3268
+ id="linearGradient-modal-tabs-example-docked"
3002
3269
  >
3003
3270
  <stop stop-color="#2B9AF3" offset="0%" />
3004
3271
  <stop
@@ -3052,11 +3319,11 @@ section: components
3052
3319
  />
3053
3320
  <path
3054
3321
  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)"
3322
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3056
3323
  />
3057
3324
  <path
3058
3325
  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)"
3326
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3060
3327
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3061
3328
  />
3062
3329
  </g>
@@ -3068,7 +3335,7 @@ section: components
3068
3335
  <div class="pf-v6-c-masthead__content">
3069
3336
  <div
3070
3337
  class="pf-v6-c-toolbar pf-m-static"
3071
- id="modal-tabs-example-masthead-toolbar"
3338
+ id="modal-tabs-example-docked-toolbar"
3072
3339
  >
3073
3340
  <div class="pf-v6-c-toolbar__content">
3074
3341
  <div class="pf-v6-c-toolbar__content-section">
@@ -3135,44 +3402,46 @@ section: components
3135
3402
  </div>
3136
3403
  </header>
3137
3404
  <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>
3405
+ <div class="pf-v6-c-page__sidebar-main">
3406
+ <div class="pf-v6-c-page__sidebar-body">
3407
+ <nav
3408
+ class="pf-v6-c-nav"
3409
+ id="modal-tabs-example-primary-nav"
3410
+ aria-label="Global"
3411
+ >
3412
+ <ul class="pf-v6-c-nav__list" role="list">
3413
+ <li class="pf-v6-c-nav__item">
3414
+ <a href="#" class="pf-v6-c-nav__link">
3415
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3416
+ </a>
3417
+ </li>
3418
+ <li class="pf-v6-c-nav__item">
3419
+ <a
3420
+ href="#"
3421
+ class="pf-v6-c-nav__link pf-m-current"
3422
+ aria-current="page"
3423
+ >
3424
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3425
+ </a>
3426
+ </li>
3427
+ <li class="pf-v6-c-nav__item">
3428
+ <a href="#" class="pf-v6-c-nav__link">
3429
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3430
+ </a>
3431
+ </li>
3432
+ <li class="pf-v6-c-nav__item">
3433
+ <a href="#" class="pf-v6-c-nav__link">
3434
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3435
+ </a>
3436
+ </li>
3437
+ <li class="pf-v6-c-nav__item">
3438
+ <a href="#" class="pf-v6-c-nav__link">
3439
+ <span class="pf-v6-c-nav__link-text">Server</span>
3440
+ </a>
3441
+ </li>
3442
+ </ul>
3443
+ </nav>
3444
+ </div>
3176
3445
  </div>
3177
3446
  </div>
3178
3447
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3190,21 +3459,57 @@ section: components
3190
3459
  </li>
3191
3460
  <li class="pf-v6-c-breadcrumb__item">
3192
3461
  <span class="pf-v6-c-breadcrumb__item-divider">
3193
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3462
+ <svg
3463
+ class="pf-v6-svg"
3464
+ viewBox="0 0 20 20"
3465
+ fill="currentColor"
3466
+ aria-hidden="true"
3467
+ role="img"
3468
+ width="1em"
3469
+ height="1em"
3470
+ >
3471
+ <path
3472
+ 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"
3473
+ />
3474
+ </svg>
3194
3475
  </span>
3195
3476
 
3196
3477
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3197
3478
  </li>
3198
3479
  <li class="pf-v6-c-breadcrumb__item">
3199
3480
  <span class="pf-v6-c-breadcrumb__item-divider">
3200
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3481
+ <svg
3482
+ class="pf-v6-svg"
3483
+ viewBox="0 0 20 20"
3484
+ fill="currentColor"
3485
+ aria-hidden="true"
3486
+ role="img"
3487
+ width="1em"
3488
+ height="1em"
3489
+ >
3490
+ <path
3491
+ 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"
3492
+ />
3493
+ </svg>
3201
3494
  </span>
3202
3495
 
3203
3496
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3204
3497
  </li>
3205
3498
  <li class="pf-v6-c-breadcrumb__item">
3206
3499
  <span class="pf-v6-c-breadcrumb__item-divider">
3207
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3500
+ <svg
3501
+ class="pf-v6-svg"
3502
+ viewBox="0 0 20 20"
3503
+ fill="currentColor"
3504
+ aria-hidden="true"
3505
+ role="img"
3506
+ width="1em"
3507
+ height="1em"
3508
+ >
3509
+ <path
3510
+ 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"
3511
+ />
3512
+ </svg>
3208
3513
  </span>
3209
3514
 
3210
3515
  <a
@@ -3280,7 +3585,8 @@ section: components
3280
3585
  <span class="pf-v6-c-button__text">Skip to content</span>
3281
3586
  </a>
3282
3587
  </div>
3283
- <header class="pf-v6-c-masthead" id="gray-tabs-example-masthead">
3588
+
3589
+ <header class="pf-v6-c-masthead" id="gray-tabs-example-docked">
3284
3590
  <div class="pf-v6-c-masthead__main">
3285
3591
  <span class="pf-v6-c-masthead__toggle">
3286
3592
  <button
@@ -3322,7 +3628,7 @@ section: components
3322
3628
  y1="2.25860997e-13%"
3323
3629
  x2="32%"
3324
3630
  y2="100%"
3325
- id="linearGradient-gray-tabs-example-masthead"
3631
+ id="linearGradient-gray-tabs-example-docked"
3326
3632
  >
3327
3633
  <stop stop-color="#2B9AF3" offset="0%" />
3328
3634
  <stop
@@ -3376,11 +3682,11 @@ section: components
3376
3682
  />
3377
3683
  <path
3378
3684
  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)"
3685
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3380
3686
  />
3381
3687
  <path
3382
3688
  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)"
3689
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3384
3690
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3385
3691
  />
3386
3692
  </g>
@@ -3392,7 +3698,7 @@ section: components
3392
3698
  <div class="pf-v6-c-masthead__content">
3393
3699
  <div
3394
3700
  class="pf-v6-c-toolbar pf-m-static"
3395
- id="gray-tabs-example-masthead-toolbar"
3701
+ id="gray-tabs-example-docked-toolbar"
3396
3702
  >
3397
3703
  <div class="pf-v6-c-toolbar__content">
3398
3704
  <div class="pf-v6-c-toolbar__content-section">
@@ -3459,44 +3765,46 @@ section: components
3459
3765
  </div>
3460
3766
  </header>
3461
3767
  <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>
3768
+ <div class="pf-v6-c-page__sidebar-main">
3769
+ <div class="pf-v6-c-page__sidebar-body">
3770
+ <nav
3771
+ class="pf-v6-c-nav"
3772
+ id="gray-tabs-example-primary-nav"
3773
+ aria-label="Global"
3774
+ >
3775
+ <ul class="pf-v6-c-nav__list" role="list">
3776
+ <li class="pf-v6-c-nav__item">
3777
+ <a href="#" class="pf-v6-c-nav__link">
3778
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3779
+ </a>
3780
+ </li>
3781
+ <li class="pf-v6-c-nav__item">
3782
+ <a
3783
+ href="#"
3784
+ class="pf-v6-c-nav__link pf-m-current"
3785
+ aria-current="page"
3786
+ >
3787
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3788
+ </a>
3789
+ </li>
3790
+ <li class="pf-v6-c-nav__item">
3791
+ <a href="#" class="pf-v6-c-nav__link">
3792
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3793
+ </a>
3794
+ </li>
3795
+ <li class="pf-v6-c-nav__item">
3796
+ <a href="#" class="pf-v6-c-nav__link">
3797
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3798
+ </a>
3799
+ </li>
3800
+ <li class="pf-v6-c-nav__item">
3801
+ <a href="#" class="pf-v6-c-nav__link">
3802
+ <span class="pf-v6-c-nav__link-text">Server</span>
3803
+ </a>
3804
+ </li>
3805
+ </ul>
3806
+ </nav>
3807
+ </div>
3500
3808
  </div>
3501
3809
  </div>
3502
3810
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -3514,21 +3822,57 @@ section: components
3514
3822
  </li>
3515
3823
  <li class="pf-v6-c-breadcrumb__item">
3516
3824
  <span class="pf-v6-c-breadcrumb__item-divider">
3517
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3825
+ <svg
3826
+ class="pf-v6-svg"
3827
+ viewBox="0 0 20 20"
3828
+ fill="currentColor"
3829
+ aria-hidden="true"
3830
+ role="img"
3831
+ width="1em"
3832
+ height="1em"
3833
+ >
3834
+ <path
3835
+ 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"
3836
+ />
3837
+ </svg>
3518
3838
  </span>
3519
3839
 
3520
3840
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3521
3841
  </li>
3522
3842
  <li class="pf-v6-c-breadcrumb__item">
3523
3843
  <span class="pf-v6-c-breadcrumb__item-divider">
3524
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3844
+ <svg
3845
+ class="pf-v6-svg"
3846
+ viewBox="0 0 20 20"
3847
+ fill="currentColor"
3848
+ aria-hidden="true"
3849
+ role="img"
3850
+ width="1em"
3851
+ height="1em"
3852
+ >
3853
+ <path
3854
+ 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"
3855
+ />
3856
+ </svg>
3525
3857
  </span>
3526
3858
 
3527
3859
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3528
3860
  </li>
3529
3861
  <li class="pf-v6-c-breadcrumb__item">
3530
3862
  <span class="pf-v6-c-breadcrumb__item-divider">
3531
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3863
+ <svg
3864
+ class="pf-v6-svg"
3865
+ viewBox="0 0 20 20"
3866
+ fill="currentColor"
3867
+ aria-hidden="true"
3868
+ role="img"
3869
+ width="1em"
3870
+ height="1em"
3871
+ >
3872
+ <path
3873
+ 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"
3874
+ />
3875
+ </svg>
3532
3876
  </span>
3533
3877
 
3534
3878
  <a
@@ -3551,15 +3895,21 @@ section: components
3551
3895
  <div class="pf-v6-c-page__main-body">
3552
3896
  <div
3553
3897
  class="pf-v6-c-tabs pf-m-page-insets"
3898
+ aria-label="Red Hat Enterprise Linux"
3554
3899
  role="region"
3555
3900
  id="gray-tabs-example-tabs-tabs"
3556
3901
  >
3557
- <ul class="pf-v6-c-tabs__list" role="tablist">
3902
+ <ul
3903
+ class="pf-v6-c-tabs__list"
3904
+ role="tablist"
3905
+ aria-label="Red Hat Enterprise Linux"
3906
+ >
3558
3907
  <li class="pf-v6-c-tabs__item" role="presentation">
3559
3908
  <button
3560
3909
  type="button"
3561
3910
  class="pf-v6-c-tabs__link"
3562
3911
  role="tab"
3912
+ aria-selected="false"
3563
3913
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3564
3914
  id="gray-tabs-example-tabs-tabs-new-link"
3565
3915
  >
@@ -3571,6 +3921,7 @@ section: components
3571
3921
  type="button"
3572
3922
  class="pf-v6-c-tabs__link"
3573
3923
  role="tab"
3924
+ aria-selected="true"
3574
3925
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3575
3926
  id="gray-tabs-example-tabs-tabs-get-started-link"
3576
3927
  >
@@ -3582,6 +3933,7 @@ section: components
3582
3933
  type="button"
3583
3934
  class="pf-v6-c-tabs__link"
3584
3935
  role="tab"
3936
+ aria-selected="false"
3585
3937
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3586
3938
  id="gray-tabs-example-tabs-tabs-knowledge-link"
3587
3939
  >
@@ -3593,6 +3945,7 @@ section: components
3593
3945
  type="button"
3594
3946
  class="pf-v6-c-tabs__link"
3595
3947
  role="tab"
3948
+ aria-selected="false"
3596
3949
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3597
3950
  id="gray-tabs-example-tabs-tabs-support-link"
3598
3951
  >
@@ -3632,10 +3985,15 @@ section: components
3632
3985
  <div class="pf-v6-l-grid__item">
3633
3986
  <div
3634
3987
  class="pf-v6-c-tabs pf-m-inset-none"
3988
+ aria-label="Get started"
3635
3989
  role="region"
3636
3990
  id="gray-tabs-example-tabs-subtabs"
3637
3991
  >
3638
- <ul class="pf-v6-c-tabs__list" role="tablist">
3992
+ <ul
3993
+ class="pf-v6-c-tabs__list"
3994
+ role="tablist"
3995
+ aria-label="Get started"
3996
+ >
3639
3997
  <li
3640
3998
  class="pf-v6-c-tabs__item pf-m-current"
3641
3999
  role="presentation"
@@ -3644,6 +4002,7 @@ section: components
3644
4002
  type="button"
3645
4003
  class="pf-v6-c-tabs__link"
3646
4004
  role="tab"
4005
+ aria-selected="true"
3647
4006
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3648
4007
  id="gray-tabs-example-tabs-subtabs-x86-link"
3649
4008
  >
@@ -3655,6 +4014,7 @@ section: components
3655
4014
  type="button"
3656
4015
  class="pf-v6-c-tabs__link"
3657
4016
  role="tab"
4017
+ aria-selected="false"
3658
4018
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3659
4019
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3660
4020
  >