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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -16,7 +16,8 @@ cssPrefix: pf-d-description-list
16
16
  <span class="pf-v6-c-button__text">Skip to content</span>
17
17
  </a>
18
18
  </div>
19
- <header class="pf-v6-c-masthead" id="description-list-basic-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="description-list-basic-example-docked">
20
21
  <div class="pf-v6-c-masthead__main">
21
22
  <span class="pf-v6-c-masthead__toggle">
22
23
  <button
@@ -58,7 +59,7 @@ cssPrefix: pf-d-description-list
58
59
  y1="2.25860997e-13%"
59
60
  x2="32%"
60
61
  y2="100%"
61
- id="linearGradient-description-list-basic-example-masthead"
62
+ id="linearGradient-description-list-basic-example-docked"
62
63
  >
63
64
  <stop stop-color="#2B9AF3" offset="0%" />
64
65
  <stop
@@ -112,11 +113,11 @@ cssPrefix: pf-d-description-list
112
113
  />
113
114
  <path
114
115
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
115
- fill="url(#linearGradient-description-list-basic-example-masthead)"
116
+ fill="url(#linearGradient-description-list-basic-example-docked)"
116
117
  />
117
118
  <path
118
119
  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"
119
- fill="url(#linearGradient-description-list-basic-example-masthead)"
120
+ fill="url(#linearGradient-description-list-basic-example-docked)"
120
121
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
121
122
  />
122
123
  </g>
@@ -128,7 +129,7 @@ cssPrefix: pf-d-description-list
128
129
  <div class="pf-v6-c-masthead__content">
129
130
  <div
130
131
  class="pf-v6-c-toolbar pf-m-static"
131
- id="description-list-basic-example-masthead-toolbar"
132
+ id="description-list-basic-example-docked-toolbar"
132
133
  >
133
134
  <div class="pf-v6-c-toolbar__content">
134
135
  <div class="pf-v6-c-toolbar__content-section">
@@ -146,7 +147,19 @@ cssPrefix: pf-d-description-list
146
147
  aria-label="Application launcher"
147
148
  >
148
149
  <span class="pf-v6-c-menu-toggle__icon">
149
- <i class="fas fa-th" aria-hidden="true"></i>
150
+ <svg
151
+ class="pf-v6-svg"
152
+ viewBox="0 0 512 512"
153
+ fill="currentColor"
154
+ aria-hidden="true"
155
+ role="img"
156
+ width="1em"
157
+ height="1em"
158
+ >
159
+ <path
160
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
161
+ />
162
+ </svg>
150
163
  </span>
151
164
  </button>
152
165
  </div>
@@ -158,7 +171,19 @@ cssPrefix: pf-d-description-list
158
171
  aria-label="Settings"
159
172
  >
160
173
  <span class="pf-v6-c-menu-toggle__icon">
161
- <i class="fas fa-cog" aria-hidden="true"></i>
174
+ <svg
175
+ class="pf-v6-svg"
176
+ viewBox="0 0 32 32"
177
+ fill="currentColor"
178
+ aria-hidden="true"
179
+ role="img"
180
+ width="1em"
181
+ height="1em"
182
+ >
183
+ <path
184
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
185
+ />
186
+ </svg>
162
187
  </span>
163
188
  </button>
164
189
  </div>
@@ -170,7 +195,19 @@ cssPrefix: pf-d-description-list
170
195
  aria-label="Help"
171
196
  >
172
197
  <span class="pf-v6-c-menu-toggle__icon">
173
- <i class="fas fa-question-circle" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 512 512"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
209
+ />
210
+ </svg>
174
211
  </span>
175
212
  </button>
176
213
  </div>
@@ -184,7 +221,19 @@ cssPrefix: pf-d-description-list
184
221
  aria-label="Actions"
185
222
  >
186
223
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
224
+ <svg
225
+ class="pf-v6-svg"
226
+ viewBox="0 0 32 32"
227
+ fill="currentColor"
228
+ aria-hidden="true"
229
+ role="img"
230
+ width="1em"
231
+ height="1em"
232
+ >
233
+ <path
234
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
235
+ />
236
+ </svg>
188
237
  </span>
189
238
  </button>
190
239
  </div>
@@ -195,44 +244,46 @@ cssPrefix: pf-d-description-list
195
244
  </div>
196
245
  </header>
197
246
  <div class="pf-v6-c-page__sidebar">
198
- <div class="pf-v6-c-page__sidebar-body">
199
- <nav
200
- class="pf-v6-c-nav"
201
- id="description-list-basic-example-primary-nav"
202
- aria-label="Global"
203
- >
204
- <ul class="pf-v6-c-nav__list" role="list">
205
- <li class="pf-v6-c-nav__item">
206
- <a href="#" class="pf-v6-c-nav__link">
207
- <span class="pf-v6-c-nav__link-text">System panel</span>
208
- </a>
209
- </li>
210
- <li class="pf-v6-c-nav__item">
211
- <a
212
- href="#"
213
- class="pf-v6-c-nav__link pf-m-current"
214
- aria-current="page"
215
- >
216
- <span class="pf-v6-c-nav__link-text">Policy</span>
217
- </a>
218
- </li>
219
- <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">
221
- <span class="pf-v6-c-nav__link-text">Authentication</span>
222
- </a>
223
- </li>
224
- <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">
226
- <span class="pf-v6-c-nav__link-text">Network services</span>
227
- </a>
228
- </li>
229
- <li class="pf-v6-c-nav__item">
230
- <a href="#" class="pf-v6-c-nav__link">
231
- <span class="pf-v6-c-nav__link-text">Server</span>
232
- </a>
233
- </li>
234
- </ul>
235
- </nav>
247
+ <div class="pf-v6-c-page__sidebar-main">
248
+ <div class="pf-v6-c-page__sidebar-body">
249
+ <nav
250
+ class="pf-v6-c-nav"
251
+ id="description-list-basic-example-primary-nav"
252
+ aria-label="Global"
253
+ >
254
+ <ul class="pf-v6-c-nav__list" role="list">
255
+ <li class="pf-v6-c-nav__item">
256
+ <a href="#" class="pf-v6-c-nav__link">
257
+ <span class="pf-v6-c-nav__link-text">System panel</span>
258
+ </a>
259
+ </li>
260
+ <li class="pf-v6-c-nav__item">
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-nav__link pf-m-current"
264
+ aria-current="page"
265
+ >
266
+ <span class="pf-v6-c-nav__link-text">Policy</span>
267
+ </a>
268
+ </li>
269
+ <li class="pf-v6-c-nav__item">
270
+ <a href="#" class="pf-v6-c-nav__link">
271
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
272
+ </a>
273
+ </li>
274
+ <li class="pf-v6-c-nav__item">
275
+ <a href="#" class="pf-v6-c-nav__link">
276
+ <span class="pf-v6-c-nav__link-text">Network services</span>
277
+ </a>
278
+ </li>
279
+ <li class="pf-v6-c-nav__item">
280
+ <a href="#" class="pf-v6-c-nav__link">
281
+ <span class="pf-v6-c-nav__link-text">Server</span>
282
+ </a>
283
+ </li>
284
+ </ul>
285
+ </nav>
286
+ </div>
236
287
  </div>
237
288
  </div>
238
289
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -250,21 +301,57 @@ cssPrefix: pf-d-description-list
250
301
  </li>
251
302
  <li class="pf-v6-c-breadcrumb__item">
252
303
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
304
+ <svg
305
+ class="pf-v6-svg"
306
+ viewBox="0 0 20 20"
307
+ fill="currentColor"
308
+ aria-hidden="true"
309
+ role="img"
310
+ width="1em"
311
+ height="1em"
312
+ >
313
+ <path
314
+ 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"
315
+ />
316
+ </svg>
254
317
  </span>
255
318
 
256
319
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
320
  </li>
258
321
  <li class="pf-v6-c-breadcrumb__item">
259
322
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
323
+ <svg
324
+ class="pf-v6-svg"
325
+ viewBox="0 0 20 20"
326
+ fill="currentColor"
327
+ aria-hidden="true"
328
+ role="img"
329
+ width="1em"
330
+ height="1em"
331
+ >
332
+ <path
333
+ 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"
334
+ />
335
+ </svg>
261
336
  </span>
262
337
 
263
338
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
339
  </li>
265
340
  <li class="pf-v6-c-breadcrumb__item">
266
341
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
342
+ <svg
343
+ class="pf-v6-svg"
344
+ viewBox="0 0 20 20"
345
+ fill="currentColor"
346
+ aria-hidden="true"
347
+ role="img"
348
+ width="1em"
349
+ height="1em"
350
+ >
351
+ <path
352
+ 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"
353
+ />
354
+ </svg>
268
355
  </span>
269
356
 
270
357
  <a
@@ -277,9 +364,15 @@ cssPrefix: pf-d-description-list
277
364
  </nav>
278
365
  </div>
279
366
  </section>
280
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
367
+ <section
368
+ class="pf-v6-c-page__main-section pf-m-limit-width"
369
+ aria-labelledby="main-title"
370
+ >
281
371
  <div class="pf-v6-c-page__main-body">
282
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
372
+ <h1
373
+ class="pf-v6-c-content--h1 pf-m-page-title"
374
+ id="main-title"
375
+ >Main title</h1>
283
376
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
284
377
  </div>
285
378
  </section>
@@ -402,9 +495,10 @@ cssPrefix: pf-d-description-list
402
495
  <span class="pf-v6-c-button__text">Skip to content</span>
403
496
  </a>
404
497
  </div>
498
+
405
499
  <header
406
500
  class="pf-v6-c-masthead"
407
- id="description-list-in-drawer-example-masthead"
501
+ id="description-list-in-drawer-example-docked"
408
502
  >
409
503
  <div class="pf-v6-c-masthead__main">
410
504
  <span class="pf-v6-c-masthead__toggle">
@@ -447,7 +541,7 @@ cssPrefix: pf-d-description-list
447
541
  y1="2.25860997e-13%"
448
542
  x2="32%"
449
543
  y2="100%"
450
- id="linearGradient-description-list-in-drawer-example-masthead"
544
+ id="linearGradient-description-list-in-drawer-example-docked"
451
545
  >
452
546
  <stop stop-color="#2B9AF3" offset="0%" />
453
547
  <stop
@@ -501,11 +595,11 @@ cssPrefix: pf-d-description-list
501
595
  />
502
596
  <path
503
597
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
504
- fill="url(#linearGradient-description-list-in-drawer-example-masthead)"
598
+ fill="url(#linearGradient-description-list-in-drawer-example-docked)"
505
599
  />
506
600
  <path
507
601
  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"
508
- fill="url(#linearGradient-description-list-in-drawer-example-masthead)"
602
+ fill="url(#linearGradient-description-list-in-drawer-example-docked)"
509
603
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
510
604
  />
511
605
  </g>
@@ -517,7 +611,7 @@ cssPrefix: pf-d-description-list
517
611
  <div class="pf-v6-c-masthead__content">
518
612
  <div
519
613
  class="pf-v6-c-toolbar pf-m-static"
520
- id="description-list-in-drawer-example-masthead-toolbar"
614
+ id="description-list-in-drawer-example-docked-toolbar"
521
615
  >
522
616
  <div class="pf-v6-c-toolbar__content">
523
617
  <div class="pf-v6-c-toolbar__content-section">
@@ -535,7 +629,19 @@ cssPrefix: pf-d-description-list
535
629
  aria-label="Application launcher"
536
630
  >
537
631
  <span class="pf-v6-c-menu-toggle__icon">
538
- <i class="fas fa-th" aria-hidden="true"></i>
632
+ <svg
633
+ class="pf-v6-svg"
634
+ viewBox="0 0 512 512"
635
+ fill="currentColor"
636
+ aria-hidden="true"
637
+ role="img"
638
+ width="1em"
639
+ height="1em"
640
+ >
641
+ <path
642
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
643
+ />
644
+ </svg>
539
645
  </span>
540
646
  </button>
541
647
  </div>
@@ -547,7 +653,19 @@ cssPrefix: pf-d-description-list
547
653
  aria-label="Settings"
548
654
  >
549
655
  <span class="pf-v6-c-menu-toggle__icon">
550
- <i class="fas fa-cog" aria-hidden="true"></i>
656
+ <svg
657
+ class="pf-v6-svg"
658
+ viewBox="0 0 32 32"
659
+ fill="currentColor"
660
+ aria-hidden="true"
661
+ role="img"
662
+ width="1em"
663
+ height="1em"
664
+ >
665
+ <path
666
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
667
+ />
668
+ </svg>
551
669
  </span>
552
670
  </button>
553
671
  </div>
@@ -559,7 +677,19 @@ cssPrefix: pf-d-description-list
559
677
  aria-label="Help"
560
678
  >
561
679
  <span class="pf-v6-c-menu-toggle__icon">
562
- <i class="fas fa-question-circle" aria-hidden="true"></i>
680
+ <svg
681
+ class="pf-v6-svg"
682
+ viewBox="0 0 512 512"
683
+ fill="currentColor"
684
+ aria-hidden="true"
685
+ role="img"
686
+ width="1em"
687
+ height="1em"
688
+ >
689
+ <path
690
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
691
+ />
692
+ </svg>
563
693
  </span>
564
694
  </button>
565
695
  </div>
@@ -573,7 +703,19 @@ cssPrefix: pf-d-description-list
573
703
  aria-label="Actions"
574
704
  >
575
705
  <span class="pf-v6-c-menu-toggle__icon">
576
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
706
+ <svg
707
+ class="pf-v6-svg"
708
+ viewBox="0 0 32 32"
709
+ fill="currentColor"
710
+ aria-hidden="true"
711
+ role="img"
712
+ width="1em"
713
+ height="1em"
714
+ >
715
+ <path
716
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
717
+ />
718
+ </svg>
577
719
  </span>
578
720
  </button>
579
721
  </div>
@@ -584,44 +726,46 @@ cssPrefix: pf-d-description-list
584
726
  </div>
585
727
  </header>
586
728
  <div class="pf-v6-c-page__sidebar">
587
- <div class="pf-v6-c-page__sidebar-body">
588
- <nav
589
- class="pf-v6-c-nav"
590
- id="description-list-in-drawer-example-primary-nav"
591
- aria-label="Global"
592
- >
593
- <ul class="pf-v6-c-nav__list" role="list">
594
- <li class="pf-v6-c-nav__item">
595
- <a href="#" class="pf-v6-c-nav__link">
596
- <span class="pf-v6-c-nav__link-text">System panel</span>
597
- </a>
598
- </li>
599
- <li class="pf-v6-c-nav__item">
600
- <a
601
- href="#"
602
- class="pf-v6-c-nav__link pf-m-current"
603
- aria-current="page"
604
- >
605
- <span class="pf-v6-c-nav__link-text">Policy</span>
606
- </a>
607
- </li>
608
- <li class="pf-v6-c-nav__item">
609
- <a href="#" class="pf-v6-c-nav__link">
610
- <span class="pf-v6-c-nav__link-text">Authentication</span>
611
- </a>
612
- </li>
613
- <li class="pf-v6-c-nav__item">
614
- <a href="#" class="pf-v6-c-nav__link">
615
- <span class="pf-v6-c-nav__link-text">Network services</span>
616
- </a>
617
- </li>
618
- <li class="pf-v6-c-nav__item">
619
- <a href="#" class="pf-v6-c-nav__link">
620
- <span class="pf-v6-c-nav__link-text">Server</span>
621
- </a>
622
- </li>
623
- </ul>
624
- </nav>
729
+ <div class="pf-v6-c-page__sidebar-main">
730
+ <div class="pf-v6-c-page__sidebar-body">
731
+ <nav
732
+ class="pf-v6-c-nav"
733
+ id="description-list-in-drawer-example-primary-nav"
734
+ aria-label="Global"
735
+ >
736
+ <ul class="pf-v6-c-nav__list" role="list">
737
+ <li class="pf-v6-c-nav__item">
738
+ <a href="#" class="pf-v6-c-nav__link">
739
+ <span class="pf-v6-c-nav__link-text">System panel</span>
740
+ </a>
741
+ </li>
742
+ <li class="pf-v6-c-nav__item">
743
+ <a
744
+ href="#"
745
+ class="pf-v6-c-nav__link pf-m-current"
746
+ aria-current="page"
747
+ >
748
+ <span class="pf-v6-c-nav__link-text">Policy</span>
749
+ </a>
750
+ </li>
751
+ <li class="pf-v6-c-nav__item">
752
+ <a href="#" class="pf-v6-c-nav__link">
753
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
754
+ </a>
755
+ </li>
756
+ <li class="pf-v6-c-nav__item">
757
+ <a href="#" class="pf-v6-c-nav__link">
758
+ <span class="pf-v6-c-nav__link-text">Network services</span>
759
+ </a>
760
+ </li>
761
+ <li class="pf-v6-c-nav__item">
762
+ <a href="#" class="pf-v6-c-nav__link">
763
+ <span class="pf-v6-c-nav__link-text">Server</span>
764
+ </a>
765
+ </li>
766
+ </ul>
767
+ </nav>
768
+ </div>
625
769
  </div>
626
770
  </div>
627
771
  <div class="pf-v6-c-page__drawer">
@@ -647,7 +791,19 @@ cssPrefix: pf-d-description-list
647
791
  </li>
648
792
  <li class="pf-v6-c-breadcrumb__item">
649
793
  <span class="pf-v6-c-breadcrumb__item-divider">
650
- <i class="fas fa-angle-right" aria-hidden="true"></i>
794
+ <svg
795
+ class="pf-v6-svg"
796
+ viewBox="0 0 20 20"
797
+ fill="currentColor"
798
+ aria-hidden="true"
799
+ role="img"
800
+ width="1em"
801
+ height="1em"
802
+ >
803
+ <path
804
+ 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"
805
+ />
806
+ </svg>
651
807
  </span>
652
808
 
653
809
  <a
@@ -657,7 +813,19 @@ cssPrefix: pf-d-description-list
657
813
  </li>
658
814
  <li class="pf-v6-c-breadcrumb__item">
659
815
  <span class="pf-v6-c-breadcrumb__item-divider">
660
- <i class="fas fa-angle-right" aria-hidden="true"></i>
816
+ <svg
817
+ class="pf-v6-svg"
818
+ viewBox="0 0 20 20"
819
+ fill="currentColor"
820
+ aria-hidden="true"
821
+ role="img"
822
+ width="1em"
823
+ height="1em"
824
+ >
825
+ <path
826
+ 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"
827
+ />
828
+ </svg>
661
829
  </span>
662
830
 
663
831
  <a
@@ -667,7 +835,19 @@ cssPrefix: pf-d-description-list
667
835
  </li>
668
836
  <li class="pf-v6-c-breadcrumb__item">
669
837
  <span class="pf-v6-c-breadcrumb__item-divider">
670
- <i class="fas fa-angle-right" aria-hidden="true"></i>
838
+ <svg
839
+ class="pf-v6-svg"
840
+ viewBox="0 0 20 20"
841
+ fill="currentColor"
842
+ aria-hidden="true"
843
+ role="img"
844
+ width="1em"
845
+ height="1em"
846
+ >
847
+ <path
848
+ 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"
849
+ />
850
+ </svg>
671
851
  </span>
672
852
 
673
853
  <a
@@ -680,9 +860,15 @@ cssPrefix: pf-d-description-list
680
860
  </nav>
681
861
  </div>
682
862
  </section>
683
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
863
+ <section
864
+ class="pf-v6-c-page__main-section pf-m-limit-width"
865
+ aria-labelledby="main-title"
866
+ >
684
867
  <div class="pf-v6-c-page__main-body">
685
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
868
+ <h1
869
+ class="pf-v6-c-content--h1 pf-m-page-title"
870
+ id="main-title"
871
+ >Main title</h1>
686
872
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
687
873
  </div>
688
874
  </section>
@@ -737,7 +923,19 @@ cssPrefix: pf-d-description-list
737
923
  id="description-list-in-drawer-example-toggle"
738
924
  >
739
925
  <span class="pf-v6-c-menu-toggle__icon">
740
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
926
+ <svg
927
+ class="pf-v6-svg"
928
+ viewBox="0 0 32 32"
929
+ fill="currentColor"
930
+ aria-hidden="true"
931
+ role="img"
932
+ width="1em"
933
+ height="1em"
934
+ >
935
+ <path
936
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
937
+ />
938
+ </svg>
741
939
  </span>
742
940
  </button>
743
941
  <div class="pf-v6-c-drawer__close">
@@ -747,7 +945,19 @@ cssPrefix: pf-d-description-list
747
945
  aria-label="Close drawer panel"
748
946
  >
749
947
  <span class="pf-v6-c-button__icon">
750
- <i class="fas fa-times" aria-hidden="true"></i>
948
+ <svg
949
+ class="pf-v6-svg"
950
+ viewBox="0 0 20 20"
951
+ fill="currentColor"
952
+ aria-hidden="true"
953
+ role="img"
954
+ width="1em"
955
+ height="1em"
956
+ >
957
+ <path
958
+ 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"
959
+ />
960
+ </svg>
751
961
  </span>
752
962
  </button>
753
963
  </div>
@@ -769,13 +979,21 @@ cssPrefix: pf-d-description-list
769
979
  </div>
770
980
  </div>
771
981
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
772
- <div class="pf-v6-c-tabs pf-m-box pf-m-fill">
773
- <ul class="pf-v6-c-tabs__list" role="tablist">
982
+ <div
983
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
984
+ aria-label="Drawer panel"
985
+ >
986
+ <ul
987
+ class="pf-v6-c-tabs__list"
988
+ role="tablist"
989
+ aria-label="Drawer panel"
990
+ >
774
991
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
775
992
  <button
776
993
  type="button"
777
994
  class="pf-v6-c-tabs__link"
778
995
  role="tab"
996
+ aria-selected="true"
779
997
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
780
998
  >
781
999
  <span class="pf-v6-c-tabs__item-text">Overview</span>
@@ -786,6 +1004,7 @@ cssPrefix: pf-d-description-list
786
1004
  type="button"
787
1005
  class="pf-v6-c-tabs__link"
788
1006
  role="tab"
1007
+ aria-selected="false"
789
1008
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
790
1009
  >
791
1010
  <span class="pf-v6-c-tabs__item-text">Activity</span>
@@ -1056,9 +1275,10 @@ cssPrefix: pf-d-description-list
1056
1275
  <span class="pf-v6-c-button__text">Skip to content</span>
1057
1276
  </a>
1058
1277
  </div>
1278
+
1059
1279
  <header
1060
1280
  class="pf-v6-c-masthead"
1061
- id="description-list-complex-content-example-masthead"
1281
+ id="description-list-complex-content-example-docked"
1062
1282
  >
1063
1283
  <div class="pf-v6-c-masthead__main">
1064
1284
  <span class="pf-v6-c-masthead__toggle">
@@ -1101,7 +1321,7 @@ cssPrefix: pf-d-description-list
1101
1321
  y1="2.25860997e-13%"
1102
1322
  x2="32%"
1103
1323
  y2="100%"
1104
- id="linearGradient-description-list-complex-content-example-masthead"
1324
+ id="linearGradient-description-list-complex-content-example-docked"
1105
1325
  >
1106
1326
  <stop stop-color="#2B9AF3" offset="0%" />
1107
1327
  <stop
@@ -1155,11 +1375,11 @@ cssPrefix: pf-d-description-list
1155
1375
  />
1156
1376
  <path
1157
1377
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1158
- fill="url(#linearGradient-description-list-complex-content-example-masthead)"
1378
+ fill="url(#linearGradient-description-list-complex-content-example-docked)"
1159
1379
  />
1160
1380
  <path
1161
1381
  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"
1162
- fill="url(#linearGradient-description-list-complex-content-example-masthead)"
1382
+ fill="url(#linearGradient-description-list-complex-content-example-docked)"
1163
1383
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1164
1384
  />
1165
1385
  </g>
@@ -1171,7 +1391,7 @@ cssPrefix: pf-d-description-list
1171
1391
  <div class="pf-v6-c-masthead__content">
1172
1392
  <div
1173
1393
  class="pf-v6-c-toolbar pf-m-static"
1174
- id="description-list-complex-content-example-masthead-toolbar"
1394
+ id="description-list-complex-content-example-docked-toolbar"
1175
1395
  >
1176
1396
  <div class="pf-v6-c-toolbar__content">
1177
1397
  <div class="pf-v6-c-toolbar__content-section">
@@ -1189,7 +1409,19 @@ cssPrefix: pf-d-description-list
1189
1409
  aria-label="Application launcher"
1190
1410
  >
1191
1411
  <span class="pf-v6-c-menu-toggle__icon">
1192
- <i class="fas fa-th" aria-hidden="true"></i>
1412
+ <svg
1413
+ class="pf-v6-svg"
1414
+ viewBox="0 0 512 512"
1415
+ fill="currentColor"
1416
+ aria-hidden="true"
1417
+ role="img"
1418
+ width="1em"
1419
+ height="1em"
1420
+ >
1421
+ <path
1422
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
1423
+ />
1424
+ </svg>
1193
1425
  </span>
1194
1426
  </button>
1195
1427
  </div>
@@ -1201,7 +1433,19 @@ cssPrefix: pf-d-description-list
1201
1433
  aria-label="Settings"
1202
1434
  >
1203
1435
  <span class="pf-v6-c-menu-toggle__icon">
1204
- <i class="fas fa-cog" aria-hidden="true"></i>
1436
+ <svg
1437
+ class="pf-v6-svg"
1438
+ viewBox="0 0 32 32"
1439
+ fill="currentColor"
1440
+ aria-hidden="true"
1441
+ role="img"
1442
+ width="1em"
1443
+ height="1em"
1444
+ >
1445
+ <path
1446
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1447
+ />
1448
+ </svg>
1205
1449
  </span>
1206
1450
  </button>
1207
1451
  </div>
@@ -1213,7 +1457,19 @@ cssPrefix: pf-d-description-list
1213
1457
  aria-label="Help"
1214
1458
  >
1215
1459
  <span class="pf-v6-c-menu-toggle__icon">
1216
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1460
+ <svg
1461
+ class="pf-v6-svg"
1462
+ viewBox="0 0 512 512"
1463
+ fill="currentColor"
1464
+ aria-hidden="true"
1465
+ role="img"
1466
+ width="1em"
1467
+ height="1em"
1468
+ >
1469
+ <path
1470
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
1471
+ />
1472
+ </svg>
1217
1473
  </span>
1218
1474
  </button>
1219
1475
  </div>
@@ -1227,7 +1483,19 @@ cssPrefix: pf-d-description-list
1227
1483
  aria-label="Actions"
1228
1484
  >
1229
1485
  <span class="pf-v6-c-menu-toggle__icon">
1230
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1486
+ <svg
1487
+ class="pf-v6-svg"
1488
+ viewBox="0 0 32 32"
1489
+ fill="currentColor"
1490
+ aria-hidden="true"
1491
+ role="img"
1492
+ width="1em"
1493
+ height="1em"
1494
+ >
1495
+ <path
1496
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1497
+ />
1498
+ </svg>
1231
1499
  </span>
1232
1500
  </button>
1233
1501
  </div>
@@ -1238,44 +1506,46 @@ cssPrefix: pf-d-description-list
1238
1506
  </div>
1239
1507
  </header>
1240
1508
  <div class="pf-v6-c-page__sidebar">
1241
- <div class="pf-v6-c-page__sidebar-body">
1242
- <nav
1243
- class="pf-v6-c-nav"
1244
- id="description-list-complex-content-example-primary-nav"
1245
- aria-label="Global"
1246
- >
1247
- <ul class="pf-v6-c-nav__list" role="list">
1248
- <li class="pf-v6-c-nav__item">
1249
- <a href="#" class="pf-v6-c-nav__link">
1250
- <span class="pf-v6-c-nav__link-text">System panel</span>
1251
- </a>
1252
- </li>
1253
- <li class="pf-v6-c-nav__item">
1254
- <a
1255
- href="#"
1256
- class="pf-v6-c-nav__link pf-m-current"
1257
- aria-current="page"
1258
- >
1259
- <span class="pf-v6-c-nav__link-text">Policy</span>
1260
- </a>
1261
- </li>
1262
- <li class="pf-v6-c-nav__item">
1263
- <a href="#" class="pf-v6-c-nav__link">
1264
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1265
- </a>
1266
- </li>
1267
- <li class="pf-v6-c-nav__item">
1268
- <a href="#" class="pf-v6-c-nav__link">
1269
- <span class="pf-v6-c-nav__link-text">Network services</span>
1270
- </a>
1271
- </li>
1272
- <li class="pf-v6-c-nav__item">
1273
- <a href="#" class="pf-v6-c-nav__link">
1274
- <span class="pf-v6-c-nav__link-text">Server</span>
1275
- </a>
1276
- </li>
1277
- </ul>
1278
- </nav>
1509
+ <div class="pf-v6-c-page__sidebar-main">
1510
+ <div class="pf-v6-c-page__sidebar-body">
1511
+ <nav
1512
+ class="pf-v6-c-nav"
1513
+ id="description-list-complex-content-example-primary-nav"
1514
+ aria-label="Global"
1515
+ >
1516
+ <ul class="pf-v6-c-nav__list" role="list">
1517
+ <li class="pf-v6-c-nav__item">
1518
+ <a href="#" class="pf-v6-c-nav__link">
1519
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1520
+ </a>
1521
+ </li>
1522
+ <li class="pf-v6-c-nav__item">
1523
+ <a
1524
+ href="#"
1525
+ class="pf-v6-c-nav__link pf-m-current"
1526
+ aria-current="page"
1527
+ >
1528
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1529
+ </a>
1530
+ </li>
1531
+ <li class="pf-v6-c-nav__item">
1532
+ <a href="#" class="pf-v6-c-nav__link">
1533
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1534
+ </a>
1535
+ </li>
1536
+ <li class="pf-v6-c-nav__item">
1537
+ <a href="#" class="pf-v6-c-nav__link">
1538
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1539
+ </a>
1540
+ </li>
1541
+ <li class="pf-v6-c-nav__item">
1542
+ <a href="#" class="pf-v6-c-nav__link">
1543
+ <span class="pf-v6-c-nav__link-text">Server</span>
1544
+ </a>
1545
+ </li>
1546
+ </ul>
1547
+ </nav>
1548
+ </div>
1279
1549
  </div>
1280
1550
  </div>
1281
1551
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1293,21 +1563,57 @@ cssPrefix: pf-d-description-list
1293
1563
  </li>
1294
1564
  <li class="pf-v6-c-breadcrumb__item">
1295
1565
  <span class="pf-v6-c-breadcrumb__item-divider">
1296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1566
+ <svg
1567
+ class="pf-v6-svg"
1568
+ viewBox="0 0 20 20"
1569
+ fill="currentColor"
1570
+ aria-hidden="true"
1571
+ role="img"
1572
+ width="1em"
1573
+ height="1em"
1574
+ >
1575
+ <path
1576
+ 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"
1577
+ />
1578
+ </svg>
1297
1579
  </span>
1298
1580
 
1299
1581
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1300
1582
  </li>
1301
1583
  <li class="pf-v6-c-breadcrumb__item">
1302
1584
  <span class="pf-v6-c-breadcrumb__item-divider">
1303
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1585
+ <svg
1586
+ class="pf-v6-svg"
1587
+ viewBox="0 0 20 20"
1588
+ fill="currentColor"
1589
+ aria-hidden="true"
1590
+ role="img"
1591
+ width="1em"
1592
+ height="1em"
1593
+ >
1594
+ <path
1595
+ 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"
1596
+ />
1597
+ </svg>
1304
1598
  </span>
1305
1599
 
1306
1600
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1307
1601
  </li>
1308
1602
  <li class="pf-v6-c-breadcrumb__item">
1309
1603
  <span class="pf-v6-c-breadcrumb__item-divider">
1310
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1604
+ <svg
1605
+ class="pf-v6-svg"
1606
+ viewBox="0 0 20 20"
1607
+ fill="currentColor"
1608
+ aria-hidden="true"
1609
+ role="img"
1610
+ width="1em"
1611
+ height="1em"
1612
+ >
1613
+ <path
1614
+ 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"
1615
+ />
1616
+ </svg>
1311
1617
  </span>
1312
1618
 
1313
1619
  <a
@@ -1320,9 +1626,15 @@ cssPrefix: pf-d-description-list
1320
1626
  </nav>
1321
1627
  </div>
1322
1628
  </section>
1323
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1629
+ <section
1630
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1631
+ aria-labelledby="main-title"
1632
+ >
1324
1633
  <div class="pf-v6-c-page__main-body">
1325
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1634
+ <h1
1635
+ class="pf-v6-c-content--h1 pf-m-page-title"
1636
+ id="main-title"
1637
+ >Main title</h1>
1326
1638
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1327
1639
  </div>
1328
1640
  </section>