@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) 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.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -15,7 +15,7 @@ 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
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-docked">
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
@@ -57,7 +57,7 @@ section: components
57
57
  y1="2.25860997e-13%"
58
58
  x2="32%"
59
59
  y2="100%"
60
- id="linearGradient-tabs-tables-and-tabs-example-masthead"
60
+ id="linearGradient-tabs-tables-and-tabs-example-docked"
61
61
  >
62
62
  <stop stop-color="#2B9AF3" offset="0%" />
63
63
  <stop
@@ -111,11 +111,11 @@ section: components
111
111
  />
112
112
  <path
113
113
  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)"
114
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
115
115
  />
116
116
  <path
117
117
  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)"
118
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
119
119
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
120
120
  />
121
121
  </g>
@@ -127,7 +127,7 @@ section: components
127
127
  <div class="pf-v6-c-masthead__content">
128
128
  <div
129
129
  class="pf-v6-c-toolbar pf-m-static"
130
- id="tabs-tables-and-tabs-example-masthead-toolbar"
130
+ id="tabs-tables-and-tabs-example-docked-toolbar"
131
131
  >
132
132
  <div class="pf-v6-c-toolbar__content">
133
133
  <div class="pf-v6-c-toolbar__content-section">
@@ -249,21 +249,57 @@ section: components
249
249
  </li>
250
250
  <li class="pf-v6-c-breadcrumb__item">
251
251
  <span class="pf-v6-c-breadcrumb__item-divider">
252
- <i class="fas fa-angle-right" aria-hidden="true"></i>
252
+ <svg
253
+ class="pf-v6-svg"
254
+ viewBox="0 0 20 20"
255
+ fill="currentColor"
256
+ aria-hidden="true"
257
+ role="img"
258
+ width="1em"
259
+ height="1em"
260
+ >
261
+ <path
262
+ 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"
263
+ />
264
+ </svg>
253
265
  </span>
254
266
 
255
267
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
268
  </li>
257
269
  <li class="pf-v6-c-breadcrumb__item">
258
270
  <span class="pf-v6-c-breadcrumb__item-divider">
259
- <i class="fas fa-angle-right" aria-hidden="true"></i>
271
+ <svg
272
+ class="pf-v6-svg"
273
+ viewBox="0 0 20 20"
274
+ fill="currentColor"
275
+ aria-hidden="true"
276
+ role="img"
277
+ width="1em"
278
+ height="1em"
279
+ >
280
+ <path
281
+ 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"
282
+ />
283
+ </svg>
260
284
  </span>
261
285
 
262
286
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
263
287
  </li>
264
288
  <li class="pf-v6-c-breadcrumb__item">
265
289
  <span class="pf-v6-c-breadcrumb__item-divider">
266
- <i class="fas fa-angle-right" aria-hidden="true"></i>
290
+ <svg
291
+ class="pf-v6-svg"
292
+ viewBox="0 0 20 20"
293
+ fill="currentColor"
294
+ aria-hidden="true"
295
+ role="img"
296
+ width="1em"
297
+ height="1em"
298
+ >
299
+ <path
300
+ 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"
301
+ />
302
+ </svg>
267
303
  </span>
268
304
 
269
305
  <a
@@ -287,15 +323,17 @@ section: components
287
323
  <div class="pf-v6-c-page__main-body">
288
324
  <div
289
325
  class="pf-v6-c-tabs pf-m-page-insets"
326
+ aria-label="Pod"
290
327
  role="region"
291
328
  id="tabs-tables-and-tabs-example-tabs"
292
329
  >
293
- <ul class="pf-v6-c-tabs__list" role="tablist">
330
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
294
331
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
295
332
  <button
296
333
  type="button"
297
334
  class="pf-v6-c-tabs__link"
298
335
  role="tab"
336
+ aria-selected="true"
299
337
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
300
338
  id="tabs-tables-and-tabs-example-tabs-details-link"
301
339
  >
@@ -307,6 +345,7 @@ section: components
307
345
  type="button"
308
346
  class="pf-v6-c-tabs__link"
309
347
  role="tab"
348
+ aria-selected="false"
310
349
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
311
350
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
312
351
  >
@@ -318,6 +357,7 @@ section: components
318
357
  type="button"
319
358
  class="pf-v6-c-tabs__link"
320
359
  role="tab"
360
+ aria-selected="false"
321
361
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
322
362
  id="tabs-tables-and-tabs-example-tabs-environment-link"
323
363
  >
@@ -329,6 +369,7 @@ section: components
329
369
  type="button"
330
370
  class="pf-v6-c-tabs__link"
331
371
  role="tab"
372
+ aria-selected="false"
332
373
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
333
374
  id="tabs-tables-and-tabs-example-tabs-logs-link"
334
375
  >
@@ -340,6 +381,7 @@ section: components
340
381
  type="button"
341
382
  class="pf-v6-c-tabs__link"
342
383
  role="tab"
384
+ aria-selected="false"
343
385
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
344
386
  id="tabs-tables-and-tabs-example-tabs-events-link"
345
387
  >
@@ -351,6 +393,7 @@ section: components
351
393
  type="button"
352
394
  class="pf-v6-c-tabs__link"
353
395
  role="tab"
396
+ aria-selected="false"
354
397
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
355
398
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
356
399
  >
@@ -601,7 +644,7 @@ section: components
601
644
  <span class="pf-v6-c-button__text">Skip to content</span>
602
645
  </a>
603
646
  </div>
604
- <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-masthead">
647
+ <header class="pf-v6-c-masthead" id="tabs-tables-and-tabs-example-docked">
605
648
  <div class="pf-v6-c-masthead__main">
606
649
  <span class="pf-v6-c-masthead__toggle">
607
650
  <button
@@ -643,7 +686,7 @@ section: components
643
686
  y1="2.25860997e-13%"
644
687
  x2="32%"
645
688
  y2="100%"
646
- id="linearGradient-tabs-tables-and-tabs-example-masthead"
689
+ id="linearGradient-tabs-tables-and-tabs-example-docked"
647
690
  >
648
691
  <stop stop-color="#2B9AF3" offset="0%" />
649
692
  <stop
@@ -697,11 +740,11 @@ section: components
697
740
  />
698
741
  <path
699
742
  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)"
743
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
701
744
  />
702
745
  <path
703
746
  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)"
747
+ fill="url(#linearGradient-tabs-tables-and-tabs-example-docked)"
705
748
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
706
749
  />
707
750
  </g>
@@ -713,7 +756,7 @@ section: components
713
756
  <div class="pf-v6-c-masthead__content">
714
757
  <div
715
758
  class="pf-v6-c-toolbar pf-m-static"
716
- id="tabs-tables-and-tabs-example-masthead-toolbar"
759
+ id="tabs-tables-and-tabs-example-docked-toolbar"
717
760
  >
718
761
  <div class="pf-v6-c-toolbar__content">
719
762
  <div class="pf-v6-c-toolbar__content-section">
@@ -835,21 +878,57 @@ section: components
835
878
  </li>
836
879
  <li class="pf-v6-c-breadcrumb__item">
837
880
  <span class="pf-v6-c-breadcrumb__item-divider">
838
- <i class="fas fa-angle-right" aria-hidden="true"></i>
881
+ <svg
882
+ class="pf-v6-svg"
883
+ viewBox="0 0 20 20"
884
+ fill="currentColor"
885
+ aria-hidden="true"
886
+ role="img"
887
+ width="1em"
888
+ height="1em"
889
+ >
890
+ <path
891
+ 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"
892
+ />
893
+ </svg>
839
894
  </span>
840
895
 
841
896
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
842
897
  </li>
843
898
  <li class="pf-v6-c-breadcrumb__item">
844
899
  <span class="pf-v6-c-breadcrumb__item-divider">
845
- <i class="fas fa-angle-right" aria-hidden="true"></i>
900
+ <svg
901
+ class="pf-v6-svg"
902
+ viewBox="0 0 20 20"
903
+ fill="currentColor"
904
+ aria-hidden="true"
905
+ role="img"
906
+ width="1em"
907
+ height="1em"
908
+ >
909
+ <path
910
+ 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"
911
+ />
912
+ </svg>
846
913
  </span>
847
914
 
848
915
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
849
916
  </li>
850
917
  <li class="pf-v6-c-breadcrumb__item">
851
918
  <span class="pf-v6-c-breadcrumb__item-divider">
852
- <i class="fas fa-angle-right" aria-hidden="true"></i>
919
+ <svg
920
+ class="pf-v6-svg"
921
+ viewBox="0 0 20 20"
922
+ fill="currentColor"
923
+ aria-hidden="true"
924
+ role="img"
925
+ width="1em"
926
+ height="1em"
927
+ >
928
+ <path
929
+ 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"
930
+ />
931
+ </svg>
853
932
  </span>
854
933
 
855
934
  <a
@@ -872,15 +951,17 @@ section: components
872
951
  <div class="pf-v6-c-page__main-body">
873
952
  <div
874
953
  class="pf-v6-c-tabs pf-m-page-insets"
954
+ aria-label="Pod"
875
955
  role="region"
876
956
  id="tabs-tables-and-tabs-example-tabs"
877
957
  >
878
- <ul class="pf-v6-c-tabs__list" role="tablist">
958
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
879
959
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
880
960
  <button
881
961
  type="button"
882
962
  class="pf-v6-c-tabs__link"
883
963
  role="tab"
964
+ aria-selected="true"
884
965
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
885
966
  id="tabs-tables-and-tabs-example-tabs-details-link"
886
967
  >
@@ -892,6 +973,7 @@ section: components
892
973
  type="button"
893
974
  class="pf-v6-c-tabs__link"
894
975
  role="tab"
976
+ aria-selected="false"
895
977
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
896
978
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
897
979
  >
@@ -903,6 +985,7 @@ section: components
903
985
  type="button"
904
986
  class="pf-v6-c-tabs__link"
905
987
  role="tab"
988
+ aria-selected="false"
906
989
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
907
990
  id="tabs-tables-and-tabs-example-tabs-environment-link"
908
991
  >
@@ -914,6 +997,7 @@ section: components
914
997
  type="button"
915
998
  class="pf-v6-c-tabs__link"
916
999
  role="tab"
1000
+ aria-selected="false"
917
1001
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
918
1002
  id="tabs-tables-and-tabs-example-tabs-logs-link"
919
1003
  >
@@ -925,6 +1009,7 @@ section: components
925
1009
  type="button"
926
1010
  class="pf-v6-c-tabs__link"
927
1011
  role="tab"
1012
+ aria-selected="false"
928
1013
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
929
1014
  id="tabs-tables-and-tabs-example-tabs-events-link"
930
1015
  >
@@ -936,6 +1021,7 @@ section: components
936
1021
  type="button"
937
1022
  class="pf-v6-c-tabs__link"
938
1023
  role="tab"
1024
+ aria-selected="false"
939
1025
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
940
1026
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
941
1027
  >
@@ -950,15 +1036,21 @@ section: components
950
1036
  <div class="pf-v6-c-page__main-body">
951
1037
  <div
952
1038
  class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
1039
+ aria-label="Pod details"
953
1040
  role="region"
954
1041
  id="tabs-tables-and-tabs-example-tabs-secondary"
955
1042
  >
956
- <ul class="pf-v6-c-tabs__list" role="tablist">
1043
+ <ul
1044
+ class="pf-v6-c-tabs__list"
1045
+ role="tablist"
1046
+ aria-label="Pod details"
1047
+ >
957
1048
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
958
1049
  <button
959
1050
  type="button"
960
1051
  class="pf-v6-c-tabs__link"
961
1052
  role="tab"
1053
+ aria-selected="true"
962
1054
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
963
1055
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
964
1056
  >
@@ -970,6 +1062,7 @@ section: components
970
1062
  type="button"
971
1063
  class="pf-v6-c-tabs__link"
972
1064
  role="tab"
1065
+ aria-selected="false"
973
1066
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
974
1067
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
975
1068
  >
@@ -1187,7 +1280,7 @@ section: components
1187
1280
  <span class="pf-v6-c-button__text">Skip to content</span>
1188
1281
  </a>
1189
1282
  </div>
1190
- <header class="pf-v6-c-masthead" id="nested-tabs-example-masthead">
1283
+ <header class="pf-v6-c-masthead" id="nested-tabs-example-docked">
1191
1284
  <div class="pf-v6-c-masthead__main">
1192
1285
  <span class="pf-v6-c-masthead__toggle">
1193
1286
  <button
@@ -1229,7 +1322,7 @@ section: components
1229
1322
  y1="2.25860997e-13%"
1230
1323
  x2="32%"
1231
1324
  y2="100%"
1232
- id="linearGradient-nested-tabs-example-masthead"
1325
+ id="linearGradient-nested-tabs-example-docked"
1233
1326
  >
1234
1327
  <stop stop-color="#2B9AF3" offset="0%" />
1235
1328
  <stop
@@ -1283,11 +1376,11 @@ section: components
1283
1376
  />
1284
1377
  <path
1285
1378
  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)"
1379
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1287
1380
  />
1288
1381
  <path
1289
1382
  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)"
1383
+ fill="url(#linearGradient-nested-tabs-example-docked)"
1291
1384
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1292
1385
  />
1293
1386
  </g>
@@ -1299,7 +1392,7 @@ section: components
1299
1392
  <div class="pf-v6-c-masthead__content">
1300
1393
  <div
1301
1394
  class="pf-v6-c-toolbar pf-m-static"
1302
- id="nested-tabs-example-masthead-toolbar"
1395
+ id="nested-tabs-example-docked-toolbar"
1303
1396
  >
1304
1397
  <div class="pf-v6-c-toolbar__content">
1305
1398
  <div class="pf-v6-c-toolbar__content-section">
@@ -1421,21 +1514,57 @@ section: components
1421
1514
  </li>
1422
1515
  <li class="pf-v6-c-breadcrumb__item">
1423
1516
  <span class="pf-v6-c-breadcrumb__item-divider">
1424
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1517
+ <svg
1518
+ class="pf-v6-svg"
1519
+ viewBox="0 0 20 20"
1520
+ fill="currentColor"
1521
+ aria-hidden="true"
1522
+ role="img"
1523
+ width="1em"
1524
+ height="1em"
1525
+ >
1526
+ <path
1527
+ 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"
1528
+ />
1529
+ </svg>
1425
1530
  </span>
1426
1531
 
1427
1532
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1428
1533
  </li>
1429
1534
  <li class="pf-v6-c-breadcrumb__item">
1430
1535
  <span class="pf-v6-c-breadcrumb__item-divider">
1431
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1536
+ <svg
1537
+ class="pf-v6-svg"
1538
+ viewBox="0 0 20 20"
1539
+ fill="currentColor"
1540
+ aria-hidden="true"
1541
+ role="img"
1542
+ width="1em"
1543
+ height="1em"
1544
+ >
1545
+ <path
1546
+ 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"
1547
+ />
1548
+ </svg>
1432
1549
  </span>
1433
1550
 
1434
1551
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1435
1552
  </li>
1436
1553
  <li class="pf-v6-c-breadcrumb__item">
1437
1554
  <span class="pf-v6-c-breadcrumb__item-divider">
1438
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1555
+ <svg
1556
+ class="pf-v6-svg"
1557
+ viewBox="0 0 20 20"
1558
+ fill="currentColor"
1559
+ aria-hidden="true"
1560
+ role="img"
1561
+ width="1em"
1562
+ height="1em"
1563
+ >
1564
+ <path
1565
+ 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"
1566
+ />
1567
+ </svg>
1439
1568
  </span>
1440
1569
 
1441
1570
  <a
@@ -1458,15 +1587,17 @@ section: components
1458
1587
  <div class="pf-v6-c-page__main-body">
1459
1588
  <div
1460
1589
  class="pf-v6-c-tabs pf-m-page-insets"
1590
+ aria-label="Clusters"
1461
1591
  role="region"
1462
1592
  id="nested-tabs-example-tabs-tabs"
1463
1593
  >
1464
- <ul class="pf-v6-c-tabs__list" role="tablist">
1594
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Clusters">
1465
1595
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1466
1596
  <button
1467
1597
  type="button"
1468
1598
  class="pf-v6-c-tabs__link"
1469
1599
  role="tab"
1600
+ aria-selected="true"
1470
1601
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1471
1602
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
1472
1603
  >
@@ -1478,6 +1609,7 @@ section: components
1478
1609
  type="button"
1479
1610
  class="pf-v6-c-tabs__link"
1480
1611
  role="tab"
1612
+ aria-selected="false"
1481
1613
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1482
1614
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
1483
1615
  >
@@ -1511,10 +1643,15 @@ section: components
1511
1643
  <div class="pf-v6-l-flex__item">
1512
1644
  <div
1513
1645
  class="pf-v6-c-tabs"
1646
+ aria-label="Cluster 1"
1514
1647
  role="region"
1515
1648
  id="nested-tabs-example-tabs-tabs-subtabs"
1516
1649
  >
1517
- <ul class="pf-v6-c-tabs__list" role="tablist">
1650
+ <ul
1651
+ class="pf-v6-c-tabs__list"
1652
+ role="tablist"
1653
+ aria-label="Cluster 1"
1654
+ >
1518
1655
  <li
1519
1656
  class="pf-v6-c-tabs__item pf-m-current"
1520
1657
  role="presentation"
@@ -1523,6 +1660,7 @@ section: components
1523
1660
  type="button"
1524
1661
  class="pf-v6-c-tabs__link"
1525
1662
  role="tab"
1663
+ aria-selected="true"
1526
1664
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1527
1665
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1528
1666
  >
@@ -1537,6 +1675,7 @@ section: components
1537
1675
  type="button"
1538
1676
  class="pf-v6-c-tabs__link"
1539
1677
  role="tab"
1678
+ aria-selected="false"
1540
1679
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1541
1680
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1542
1681
  >
@@ -1553,6 +1692,7 @@ section: components
1553
1692
  type="button"
1554
1693
  class="pf-v6-c-tabs__link"
1555
1694
  role="tab"
1695
+ aria-selected="false"
1556
1696
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1557
1697
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1558
1698
  >
@@ -1569,6 +1709,7 @@ section: components
1569
1709
  type="button"
1570
1710
  class="pf-v6-c-tabs__link"
1571
1711
  role="tab"
1712
+ aria-selected="false"
1572
1713
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1573
1714
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1574
1715
  >
@@ -1692,7 +1833,7 @@ section: components
1692
1833
  <span class="pf-v6-c-button__text">Skip to content</span>
1693
1834
  </a>
1694
1835
  </div>
1695
- <header class="pf-v6-c-masthead" id="table-tabs-example-masthead">
1836
+ <header class="pf-v6-c-masthead" id="table-tabs-example-docked">
1696
1837
  <div class="pf-v6-c-masthead__main">
1697
1838
  <span class="pf-v6-c-masthead__toggle">
1698
1839
  <button
@@ -1734,7 +1875,7 @@ section: components
1734
1875
  y1="2.25860997e-13%"
1735
1876
  x2="32%"
1736
1877
  y2="100%"
1737
- id="linearGradient-table-tabs-example-masthead"
1878
+ id="linearGradient-table-tabs-example-docked"
1738
1879
  >
1739
1880
  <stop stop-color="#2B9AF3" offset="0%" />
1740
1881
  <stop
@@ -1788,11 +1929,11 @@ section: components
1788
1929
  />
1789
1930
  <path
1790
1931
  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)"
1932
+ fill="url(#linearGradient-table-tabs-example-docked)"
1792
1933
  />
1793
1934
  <path
1794
1935
  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)"
1936
+ fill="url(#linearGradient-table-tabs-example-docked)"
1796
1937
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1797
1938
  />
1798
1939
  </g>
@@ -1804,7 +1945,7 @@ section: components
1804
1945
  <div class="pf-v6-c-masthead__content">
1805
1946
  <div
1806
1947
  class="pf-v6-c-toolbar pf-m-static"
1807
- id="table-tabs-example-masthead-toolbar"
1948
+ id="table-tabs-example-docked-toolbar"
1808
1949
  >
1809
1950
  <div class="pf-v6-c-toolbar__content">
1810
1951
  <div class="pf-v6-c-toolbar__content-section">
@@ -1926,21 +2067,57 @@ section: components
1926
2067
  </li>
1927
2068
  <li class="pf-v6-c-breadcrumb__item">
1928
2069
  <span class="pf-v6-c-breadcrumb__item-divider">
1929
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2070
+ <svg
2071
+ class="pf-v6-svg"
2072
+ viewBox="0 0 20 20"
2073
+ fill="currentColor"
2074
+ aria-hidden="true"
2075
+ role="img"
2076
+ width="1em"
2077
+ height="1em"
2078
+ >
2079
+ <path
2080
+ 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"
2081
+ />
2082
+ </svg>
1930
2083
  </span>
1931
2084
 
1932
2085
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1933
2086
  </li>
1934
2087
  <li class="pf-v6-c-breadcrumb__item">
1935
2088
  <span class="pf-v6-c-breadcrumb__item-divider">
1936
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2089
+ <svg
2090
+ class="pf-v6-svg"
2091
+ viewBox="0 0 20 20"
2092
+ fill="currentColor"
2093
+ aria-hidden="true"
2094
+ role="img"
2095
+ width="1em"
2096
+ height="1em"
2097
+ >
2098
+ <path
2099
+ 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"
2100
+ />
2101
+ </svg>
1937
2102
  </span>
1938
2103
 
1939
2104
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1940
2105
  </li>
1941
2106
  <li class="pf-v6-c-breadcrumb__item">
1942
2107
  <span class="pf-v6-c-breadcrumb__item-divider">
1943
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2108
+ <svg
2109
+ class="pf-v6-svg"
2110
+ viewBox="0 0 20 20"
2111
+ fill="currentColor"
2112
+ aria-hidden="true"
2113
+ role="img"
2114
+ width="1em"
2115
+ height="1em"
2116
+ >
2117
+ <path
2118
+ 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"
2119
+ />
2120
+ </svg>
1944
2121
  </span>
1945
2122
 
1946
2123
  <a
@@ -2005,10 +2182,25 @@ section: components
2005
2182
  aria-label="Sort"
2006
2183
  >
2007
2184
  <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>
2185
+ <span class="pf-v6-c-icon">
2186
+ <span
2187
+ class="pf-v6-c-icon__content pf-v6-m-mirror-inline-rtl"
2188
+ >
2189
+ <svg
2190
+ class="pf-v6-svg"
2191
+ viewBox="0 0 512 512"
2192
+ fill="currentColor"
2193
+ aria-hidden="true"
2194
+ role="img"
2195
+ width="1em"
2196
+ height="1em"
2197
+ >
2198
+ <path
2199
+ 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"
2200
+ />
2201
+ </svg>
2202
+ </span>
2203
+ </span>
2012
2204
  </span>
2013
2205
  </button>
2014
2206
  </div>
@@ -2615,7 +2807,19 @@ section: components
2615
2807
  aria-label="Close drawer panel"
2616
2808
  >
2617
2809
  <span class="pf-v6-c-button__icon">
2618
- <i class="fas fa-times" aria-hidden="true"></i>
2810
+ <svg
2811
+ class="pf-v6-svg"
2812
+ viewBox="0 0 20 20"
2813
+ fill="currentColor"
2814
+ aria-hidden="true"
2815
+ role="img"
2816
+ width="1em"
2817
+ height="1em"
2818
+ >
2819
+ <path
2820
+ 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"
2821
+ />
2822
+ </svg>
2619
2823
  </span>
2620
2824
  </button>
2621
2825
  </div>
@@ -2636,6 +2840,7 @@ section: components
2636
2840
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
2637
2841
  <div
2638
2842
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
2843
+ aria-label="Node 2"
2639
2844
  role="region"
2640
2845
  id="-tabs"
2641
2846
  >
@@ -2646,11 +2851,27 @@ section: components
2646
2851
  aria-label="Scroll left"
2647
2852
  >
2648
2853
  <span class="pf-v6-c-button__icon">
2649
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2854
+ <svg
2855
+ class="pf-v6-svg"
2856
+ viewBox="0 0 20 20"
2857
+ fill="currentColor"
2858
+ aria-hidden="true"
2859
+ role="img"
2860
+ width="1em"
2861
+ height="1em"
2862
+ >
2863
+ <path
2864
+ 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"
2865
+ />
2866
+ </svg>
2650
2867
  </span>
2651
2868
  </button>
2652
2869
  </div>
2653
- <ul class="pf-v6-c-tabs__list" role="tablist">
2870
+ <ul
2871
+ class="pf-v6-c-tabs__list"
2872
+ role="tablist"
2873
+ aria-label="Node 2"
2874
+ >
2654
2875
  <li
2655
2876
  class="pf-v6-c-tabs__item pf-m-current"
2656
2877
  role="presentation"
@@ -2659,6 +2880,7 @@ section: components
2659
2880
  type="button"
2660
2881
  class="pf-v6-c-tabs__link"
2661
2882
  role="tab"
2883
+ aria-selected="true"
2662
2884
  aria-controls="-tabs-tab1-panel"
2663
2885
  id="-tabs-tab1-link"
2664
2886
  >
@@ -2670,6 +2892,7 @@ section: components
2670
2892
  type="button"
2671
2893
  class="pf-v6-c-tabs__link"
2672
2894
  role="tab"
2895
+ aria-selected="false"
2673
2896
  aria-controls="-tabs-tab2-panel"
2674
2897
  id="-tabs-tab2-link"
2675
2898
  >
@@ -2684,7 +2907,19 @@ section: components
2684
2907
  aria-label="Scroll right"
2685
2908
  >
2686
2909
  <span class="pf-v6-c-button__icon">
2687
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2910
+ <svg
2911
+ class="pf-v6-svg"
2912
+ viewBox="0 0 20 20"
2913
+ fill="currentColor"
2914
+ aria-hidden="true"
2915
+ role="img"
2916
+ width="1em"
2917
+ height="1em"
2918
+ >
2919
+ <path
2920
+ 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"
2921
+ />
2922
+ </svg>
2688
2923
  </span>
2689
2924
  </button>
2690
2925
  </div>
@@ -2857,7 +3092,19 @@ section: components
2857
3092
  aria-label="Close"
2858
3093
  >
2859
3094
  <span class="pf-v6-c-button__icon">
2860
- <i class="fas fa-times" aria-hidden="true"></i>
3095
+ <svg
3096
+ class="pf-v6-svg"
3097
+ viewBox="0 0 20 20"
3098
+ fill="currentColor"
3099
+ aria-hidden="true"
3100
+ role="img"
3101
+ width="1em"
3102
+ height="1em"
3103
+ >
3104
+ <path
3105
+ 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"
3106
+ />
3107
+ </svg>
2861
3108
  </span>
2862
3109
  </button>
2863
3110
  </div>
@@ -2877,15 +3124,21 @@ section: components
2877
3124
  <div class="pf-v6-l-grid__item">
2878
3125
  <div
2879
3126
  class="pf-v6-c-tabs pf-m-inset-none"
3127
+ aria-label="PatternFly"
2880
3128
  role="region"
2881
3129
  id="modal-tabs-example-tabs"
2882
3130
  >
2883
- <ul class="pf-v6-c-tabs__list" role="tablist">
3131
+ <ul
3132
+ class="pf-v6-c-tabs__list"
3133
+ role="tablist"
3134
+ aria-label="PatternFly"
3135
+ >
2884
3136
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2885
3137
  <button
2886
3138
  type="button"
2887
3139
  class="pf-v6-c-tabs__link"
2888
3140
  role="tab"
3141
+ aria-selected="true"
2889
3142
  aria-controls="modal-tabs-example-tabs-details-panel"
2890
3143
  id="modal-tabs-example-tabs-details-link"
2891
3144
  >
@@ -2897,6 +3150,7 @@ section: components
2897
3150
  type="button"
2898
3151
  class="pf-v6-c-tabs__link"
2899
3152
  role="tab"
3153
+ aria-selected="false"
2900
3154
  aria-controls="modal-tabs-example-tabs-documentation-panel"
2901
3155
  id="modal-tabs-example-tabs-documentation-link"
2902
3156
  >
@@ -2956,7 +3210,7 @@ section: components
2956
3210
  <span class="pf-v6-c-button__text">Skip to content</span>
2957
3211
  </a>
2958
3212
  </div>
2959
- <header class="pf-v6-c-masthead" id="modal-tabs-example-masthead">
3213
+ <header class="pf-v6-c-masthead" id="modal-tabs-example-docked">
2960
3214
  <div class="pf-v6-c-masthead__main">
2961
3215
  <span class="pf-v6-c-masthead__toggle">
2962
3216
  <button
@@ -2998,7 +3252,7 @@ section: components
2998
3252
  y1="2.25860997e-13%"
2999
3253
  x2="32%"
3000
3254
  y2="100%"
3001
- id="linearGradient-modal-tabs-example-masthead"
3255
+ id="linearGradient-modal-tabs-example-docked"
3002
3256
  >
3003
3257
  <stop stop-color="#2B9AF3" offset="0%" />
3004
3258
  <stop
@@ -3052,11 +3306,11 @@ section: components
3052
3306
  />
3053
3307
  <path
3054
3308
  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)"
3309
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3056
3310
  />
3057
3311
  <path
3058
3312
  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)"
3313
+ fill="url(#linearGradient-modal-tabs-example-docked)"
3060
3314
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3061
3315
  />
3062
3316
  </g>
@@ -3068,7 +3322,7 @@ section: components
3068
3322
  <div class="pf-v6-c-masthead__content">
3069
3323
  <div
3070
3324
  class="pf-v6-c-toolbar pf-m-static"
3071
- id="modal-tabs-example-masthead-toolbar"
3325
+ id="modal-tabs-example-docked-toolbar"
3072
3326
  >
3073
3327
  <div class="pf-v6-c-toolbar__content">
3074
3328
  <div class="pf-v6-c-toolbar__content-section">
@@ -3190,21 +3444,57 @@ section: components
3190
3444
  </li>
3191
3445
  <li class="pf-v6-c-breadcrumb__item">
3192
3446
  <span class="pf-v6-c-breadcrumb__item-divider">
3193
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3447
+ <svg
3448
+ class="pf-v6-svg"
3449
+ viewBox="0 0 20 20"
3450
+ fill="currentColor"
3451
+ aria-hidden="true"
3452
+ role="img"
3453
+ width="1em"
3454
+ height="1em"
3455
+ >
3456
+ <path
3457
+ 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"
3458
+ />
3459
+ </svg>
3194
3460
  </span>
3195
3461
 
3196
3462
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3197
3463
  </li>
3198
3464
  <li class="pf-v6-c-breadcrumb__item">
3199
3465
  <span class="pf-v6-c-breadcrumb__item-divider">
3200
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3466
+ <svg
3467
+ class="pf-v6-svg"
3468
+ viewBox="0 0 20 20"
3469
+ fill="currentColor"
3470
+ aria-hidden="true"
3471
+ role="img"
3472
+ width="1em"
3473
+ height="1em"
3474
+ >
3475
+ <path
3476
+ 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"
3477
+ />
3478
+ </svg>
3201
3479
  </span>
3202
3480
 
3203
3481
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3204
3482
  </li>
3205
3483
  <li class="pf-v6-c-breadcrumb__item">
3206
3484
  <span class="pf-v6-c-breadcrumb__item-divider">
3207
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3485
+ <svg
3486
+ class="pf-v6-svg"
3487
+ viewBox="0 0 20 20"
3488
+ fill="currentColor"
3489
+ aria-hidden="true"
3490
+ role="img"
3491
+ width="1em"
3492
+ height="1em"
3493
+ >
3494
+ <path
3495
+ 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"
3496
+ />
3497
+ </svg>
3208
3498
  </span>
3209
3499
 
3210
3500
  <a
@@ -3280,7 +3570,7 @@ section: components
3280
3570
  <span class="pf-v6-c-button__text">Skip to content</span>
3281
3571
  </a>
3282
3572
  </div>
3283
- <header class="pf-v6-c-masthead" id="gray-tabs-example-masthead">
3573
+ <header class="pf-v6-c-masthead" id="gray-tabs-example-docked">
3284
3574
  <div class="pf-v6-c-masthead__main">
3285
3575
  <span class="pf-v6-c-masthead__toggle">
3286
3576
  <button
@@ -3322,7 +3612,7 @@ section: components
3322
3612
  y1="2.25860997e-13%"
3323
3613
  x2="32%"
3324
3614
  y2="100%"
3325
- id="linearGradient-gray-tabs-example-masthead"
3615
+ id="linearGradient-gray-tabs-example-docked"
3326
3616
  >
3327
3617
  <stop stop-color="#2B9AF3" offset="0%" />
3328
3618
  <stop
@@ -3376,11 +3666,11 @@ section: components
3376
3666
  />
3377
3667
  <path
3378
3668
  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)"
3669
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3380
3670
  />
3381
3671
  <path
3382
3672
  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)"
3673
+ fill="url(#linearGradient-gray-tabs-example-docked)"
3384
3674
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3385
3675
  />
3386
3676
  </g>
@@ -3392,7 +3682,7 @@ section: components
3392
3682
  <div class="pf-v6-c-masthead__content">
3393
3683
  <div
3394
3684
  class="pf-v6-c-toolbar pf-m-static"
3395
- id="gray-tabs-example-masthead-toolbar"
3685
+ id="gray-tabs-example-docked-toolbar"
3396
3686
  >
3397
3687
  <div class="pf-v6-c-toolbar__content">
3398
3688
  <div class="pf-v6-c-toolbar__content-section">
@@ -3514,21 +3804,57 @@ section: components
3514
3804
  </li>
3515
3805
  <li class="pf-v6-c-breadcrumb__item">
3516
3806
  <span class="pf-v6-c-breadcrumb__item-divider">
3517
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3807
+ <svg
3808
+ class="pf-v6-svg"
3809
+ viewBox="0 0 20 20"
3810
+ fill="currentColor"
3811
+ aria-hidden="true"
3812
+ role="img"
3813
+ width="1em"
3814
+ height="1em"
3815
+ >
3816
+ <path
3817
+ 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"
3818
+ />
3819
+ </svg>
3518
3820
  </span>
3519
3821
 
3520
3822
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3521
3823
  </li>
3522
3824
  <li class="pf-v6-c-breadcrumb__item">
3523
3825
  <span class="pf-v6-c-breadcrumb__item-divider">
3524
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3826
+ <svg
3827
+ class="pf-v6-svg"
3828
+ viewBox="0 0 20 20"
3829
+ fill="currentColor"
3830
+ aria-hidden="true"
3831
+ role="img"
3832
+ width="1em"
3833
+ height="1em"
3834
+ >
3835
+ <path
3836
+ 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"
3837
+ />
3838
+ </svg>
3525
3839
  </span>
3526
3840
 
3527
3841
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3528
3842
  </li>
3529
3843
  <li class="pf-v6-c-breadcrumb__item">
3530
3844
  <span class="pf-v6-c-breadcrumb__item-divider">
3531
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3845
+ <svg
3846
+ class="pf-v6-svg"
3847
+ viewBox="0 0 20 20"
3848
+ fill="currentColor"
3849
+ aria-hidden="true"
3850
+ role="img"
3851
+ width="1em"
3852
+ height="1em"
3853
+ >
3854
+ <path
3855
+ 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"
3856
+ />
3857
+ </svg>
3532
3858
  </span>
3533
3859
 
3534
3860
  <a
@@ -3551,15 +3877,21 @@ section: components
3551
3877
  <div class="pf-v6-c-page__main-body">
3552
3878
  <div
3553
3879
  class="pf-v6-c-tabs pf-m-page-insets"
3880
+ aria-label="Red Hat Enterprise Linux"
3554
3881
  role="region"
3555
3882
  id="gray-tabs-example-tabs-tabs"
3556
3883
  >
3557
- <ul class="pf-v6-c-tabs__list" role="tablist">
3884
+ <ul
3885
+ class="pf-v6-c-tabs__list"
3886
+ role="tablist"
3887
+ aria-label="Red Hat Enterprise Linux"
3888
+ >
3558
3889
  <li class="pf-v6-c-tabs__item" role="presentation">
3559
3890
  <button
3560
3891
  type="button"
3561
3892
  class="pf-v6-c-tabs__link"
3562
3893
  role="tab"
3894
+ aria-selected="false"
3563
3895
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3564
3896
  id="gray-tabs-example-tabs-tabs-new-link"
3565
3897
  >
@@ -3571,6 +3903,7 @@ section: components
3571
3903
  type="button"
3572
3904
  class="pf-v6-c-tabs__link"
3573
3905
  role="tab"
3906
+ aria-selected="true"
3574
3907
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3575
3908
  id="gray-tabs-example-tabs-tabs-get-started-link"
3576
3909
  >
@@ -3582,6 +3915,7 @@ section: components
3582
3915
  type="button"
3583
3916
  class="pf-v6-c-tabs__link"
3584
3917
  role="tab"
3918
+ aria-selected="false"
3585
3919
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3586
3920
  id="gray-tabs-example-tabs-tabs-knowledge-link"
3587
3921
  >
@@ -3593,6 +3927,7 @@ section: components
3593
3927
  type="button"
3594
3928
  class="pf-v6-c-tabs__link"
3595
3929
  role="tab"
3930
+ aria-selected="false"
3596
3931
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3597
3932
  id="gray-tabs-example-tabs-tabs-support-link"
3598
3933
  >
@@ -3632,10 +3967,15 @@ section: components
3632
3967
  <div class="pf-v6-l-grid__item">
3633
3968
  <div
3634
3969
  class="pf-v6-c-tabs pf-m-inset-none"
3970
+ aria-label="Get started"
3635
3971
  role="region"
3636
3972
  id="gray-tabs-example-tabs-subtabs"
3637
3973
  >
3638
- <ul class="pf-v6-c-tabs__list" role="tablist">
3974
+ <ul
3975
+ class="pf-v6-c-tabs__list"
3976
+ role="tablist"
3977
+ aria-label="Get started"
3978
+ >
3639
3979
  <li
3640
3980
  class="pf-v6-c-tabs__item pf-m-current"
3641
3981
  role="presentation"
@@ -3644,6 +3984,7 @@ section: components
3644
3984
  type="button"
3645
3985
  class="pf-v6-c-tabs__link"
3646
3986
  role="tab"
3987
+ aria-selected="true"
3647
3988
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3648
3989
  id="gray-tabs-example-tabs-subtabs-x86-link"
3649
3990
  >
@@ -3655,6 +3996,7 @@ section: components
3655
3996
  type="button"
3656
3997
  class="pf-v6-c-tabs__link"
3657
3998
  role="tab"
3999
+ aria-selected="false"
3658
4000
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3659
4001
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3660
4002
  >