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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (392) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  10. package/assets/images/compass--wallpaper-dark.png +0 -0
  11. package/assets/images/compass--wallpaper-light.jpg +0 -0
  12. package/assets/images/compass--wallpaper-light.png +0 -0
  13. package/assets/images/glass-brand-dark.jpg +0 -0
  14. package/assets/images/glass-brand-dark.png +0 -0
  15. package/assets/images/glass-brand-light.jpg +0 -0
  16. package/assets/images/glass-brand-light.png +0 -0
  17. package/base/normalize.scss +7 -0
  18. package/base/patternfly-common.css +50 -0
  19. package/base/patternfly-common.scss +59 -0
  20. package/base/patternfly-svg-icons.css +11 -0
  21. package/base/patternfly-svg-icons.scss +14 -0
  22. package/base/patternfly-variables.css +926 -513
  23. package/base/patternfly-variables.scss +46 -4
  24. package/base/tokens/tokens-dark.scss +56 -8
  25. package/base/tokens/tokens-default.scss +69 -14
  26. package/base/tokens/tokens-glass-dark.scss +26 -0
  27. package/base/tokens/tokens-glass.scss +22 -0
  28. package/base/tokens/tokens-local.scss +17 -0
  29. package/base/tokens/tokens-palette.scss +3 -1
  30. package/base/tokens/tokens-redhat-dark.scss +21 -0
  31. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  32. package/base/tokens/tokens-redhat-glass.scss +30 -0
  33. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  34. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  35. package/base/tokens/tokens-redhat.scss +15 -0
  36. package/components/AboutModalBox/about-modal-box.css +36 -26
  37. package/components/Accordion/accordion.css +27 -14
  38. package/components/Accordion/accordion.scss +12 -2
  39. package/components/ActionList/action-list.css +2 -0
  40. package/components/ActionList/action-list.scss +2 -0
  41. package/components/Alert/alert.css +7 -5
  42. package/components/Alert/alert.scss +2 -1
  43. package/components/Avatar/avatar.css +12 -4
  44. package/components/BackgroundImage/background-image.css +6 -3
  45. package/components/Banner/banner.css +8 -6
  46. package/components/Brand/brand.css +3 -1
  47. package/components/Breadcrumb/breadcrumb.css +4 -3
  48. package/components/Button/button.css +121 -30
  49. package/components/Button/button.scss +131 -26
  50. package/components/CalendarMonth/calendar-month.css +4 -3
  51. package/components/Card/card.css +51 -13
  52. package/components/Card/card.scss +61 -8
  53. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  54. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  55. package/components/CodeEditor/code-editor.css +1 -1
  56. package/components/CodeEditor/code-editor.scss +1 -1
  57. package/components/Compass/compass.css +320 -0
  58. package/components/Compass/compass.scss +350 -0
  59. package/components/DataList/data-list.css +34 -23
  60. package/components/DataList/data-list.scss +8 -2
  61. package/components/DescriptionList/description-list-order.scss +5 -1
  62. package/components/DescriptionList/description-list.css +7 -5
  63. package/components/DescriptionList/description-list.scss +5 -1
  64. package/components/Divider/divider.css +7 -5
  65. package/components/Drawer/drawer.css +115 -56
  66. package/components/Drawer/drawer.scss +82 -9
  67. package/components/DualListSelector/dual-list-selector.css +18 -12
  68. package/components/DualListSelector/dual-list-selector.scss +1 -1
  69. package/components/ExpandableSection/expandable-section.css +21 -16
  70. package/components/ExpandableSection/expandable-section.scss +6 -3
  71. package/components/Form/form.css +2 -2
  72. package/components/Form/form.scss +2 -2
  73. package/components/FormControl/form-control.css +3 -3
  74. package/components/FormControl/form-control.scss +3 -3
  75. package/components/Hero/hero.css +74 -0
  76. package/components/Hero/hero.scss +86 -0
  77. package/components/JumpLinks/jump-links.css +16 -5
  78. package/components/JumpLinks/jump-links.scss +17 -3
  79. package/components/Label/label-group.css +2 -2
  80. package/components/Label/label-group.scss +2 -2
  81. package/components/Label/label.css +4 -3
  82. package/components/Login/login.css +58 -40
  83. package/components/Login/login.scss +7 -3
  84. package/components/Masthead/masthead.css +112 -16
  85. package/components/Masthead/masthead.scss +112 -1
  86. package/components/Menu/menu.css +23 -14
  87. package/components/MenuToggle/menu-toggle.css +26 -3
  88. package/components/MenuToggle/menu-toggle.scss +30 -3
  89. package/components/ModalBox/modal-box.css +9 -7
  90. package/components/ModalBox/modal-box.scss +2 -2
  91. package/components/Nav/nav.css +82 -11
  92. package/components/Nav/nav.scss +85 -5
  93. package/components/NotificationDrawer/notification-drawer.css +19 -9
  94. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  95. package/components/Page/page.css +214 -29
  96. package/components/Page/page.scss +228 -13
  97. package/components/Pagination/pagination.scss +5 -1
  98. package/components/Panel/panel.css +14 -0
  99. package/components/Panel/panel.scss +18 -0
  100. package/components/Progress/progress.css +3 -1
  101. package/components/Progress/progress.scss +3 -1
  102. package/components/ProgressStepper/progress-stepper.scss +5 -1
  103. package/components/Sidebar/sidebar.css +1 -1
  104. package/components/Sidebar/sidebar.scss +7 -3
  105. package/components/Skeleton/skeleton.css +16 -15
  106. package/components/Slider/slider.css +32 -18
  107. package/components/Switch/switch.css +4 -2
  108. package/components/Switch/switch.scss +1 -1
  109. package/components/Table/table-grid.css +28 -36
  110. package/components/Table/table-grid.scss +4 -4
  111. package/components/Table/table-tree-view.css +4 -2
  112. package/components/Table/table.css +45 -36
  113. package/components/Table/table.scss +15 -11
  114. package/components/Tabs/tabs.css +51 -33
  115. package/components/Tabs/tabs.scss +54 -26
  116. package/components/TextInputGroup/text-input-group.css +2 -2
  117. package/components/TextInputGroup/text-input-group.scss +2 -2
  118. package/components/ToggleGroup/toggle-group.css +34 -17
  119. package/components/ToggleGroup/toggle-group.scss +36 -20
  120. package/components/Toolbar/toolbar.css +47 -15
  121. package/components/Toolbar/toolbar.scss +34 -6
  122. package/components/TreeView/tree-view.css +45 -14
  123. package/components/TreeView/tree-view.scss +32 -1
  124. package/components/Wizard/wizard.css +41 -19
  125. package/components/Wizard/wizard.scss +26 -6
  126. package/components/_index.css +1936 -700
  127. package/components/_index.scss +3 -1
  128. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  129. package/docs/components/Accordion/examples/Accordion.md +392 -30
  130. package/docs/components/ActionList/examples/ActionList.md +143 -11
  131. package/docs/components/Alert/examples/Alert.md +678 -54
  132. package/docs/components/Avatar/examples/Avatar.md +4 -4
  133. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  134. package/docs/components/Banner/examples/Banner.md +65 -5
  135. package/docs/components/Brand/examples/Brand.md +2 -2
  136. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -24
  137. package/docs/components/Button/examples/Button.md +2362 -163
  138. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  139. package/docs/components/Card/examples/Card.md +207 -4
  140. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  141. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  142. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  143. package/docs/components/Compass/examples/Compass.css +17 -0
  144. package/docs/components/Compass/examples/Compass.md +119 -0
  145. package/docs/components/DataList/examples/DataList.md +406 -205
  146. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  147. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  148. package/docs/components/Divider/examples/Divider.md +2 -2
  149. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  150. package/docs/components/Drawer/examples/Drawer.md +355 -35
  151. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  152. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  153. package/docs/components/Form/examples/Form.md +78 -6
  154. package/docs/components/Hero/examples/Hero.md +25 -0
  155. package/docs/components/Icon/examples/Icon.md +92 -8
  156. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  157. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  158. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  159. package/docs/components/Label/examples/Label.md +2834 -218
  160. package/docs/components/Login/examples/Login.md +26 -2
  161. package/docs/components/Masthead/examples/masthead.md +80 -1
  162. package/docs/components/Menu/examples/Menu.md +1458 -116
  163. package/docs/components/MenuToggle/examples/MenuToggle.md +14 -5
  164. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  165. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  166. package/docs/components/Nav/examples/Navigation.md +798 -58
  167. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  168. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  169. package/docs/components/Page/examples/Page.md +72 -11
  170. package/docs/components/Pagination/examples/Pagination.md +627 -64
  171. package/docs/components/Panel/examples/Panel.md +12 -0
  172. package/docs/components/Popover/examples/Popover.md +286 -22
  173. package/docs/components/Progress/examples/Progress.md +91 -7
  174. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  175. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  176. package/docs/components/Slider/examples/Slider.md +52 -4
  177. package/docs/components/Table/examples/Table.md +876 -70
  178. package/docs/components/Tabs/examples/Tabs.md +5908 -457
  179. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  181. package/docs/components/Toolbar/examples/Toolbar.md +490 -44
  182. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  183. package/docs/components/Wizard/examples/Wizard.md +815 -72
  184. package/docs/demos/AboutModal/examples/AboutModal.md +98 -47
  185. package/docs/demos/Alert/examples/Alert.md +359 -146
  186. package/docs/demos/BackToTop/examples/BackToTop.md +98 -47
  187. package/docs/demos/Banner/examples/Banner.md +170 -92
  188. package/docs/demos/Button/examples/Button.md +13 -1
  189. package/docs/demos/Card/examples/Card.md +963 -128
  190. package/docs/demos/CardView/examples/CardView.md +435 -252
  191. package/docs/demos/Compass/examples/Compass.md +5930 -0
  192. package/docs/demos/Dashboard/examples/Dashboard.md +648 -164
  193. package/docs/demos/DataList/examples/DataList.md +730 -225
  194. package/docs/demos/DescriptionList/examples/DescriptionList.md +279 -141
  195. package/docs/demos/Drawer/examples/Drawer.md +421 -235
  196. package/docs/demos/Form/examples/BasicForms.md +273 -21
  197. package/docs/demos/JumpLinks/examples/JumpLinks.md +518 -287
  198. package/docs/demos/Masthead/examples/Masthead.md +787 -451
  199. package/docs/demos/Modal/examples/Modal.md +588 -285
  200. package/docs/demos/Nav/examples/Nav.md +2913 -493
  201. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1273 -310
  202. package/docs/demos/Page/examples/Page.md +1236 -689
  203. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  204. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  205. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +978 -385
  206. package/docs/demos/Skeleton/examples/Skeleton.md +85 -46
  207. package/docs/demos/Table/examples/Table.md +4531 -838
  208. package/docs/demos/Tabs/examples/Tabs.md +653 -293
  209. package/docs/demos/Toolbar/examples/Toolbar.md +584 -136
  210. package/docs/demos/Wizard/examples/Wizard.md +1165 -472
  211. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  212. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  213. package/docs/layouts/Flex/examples/Flex.css +3 -3
  214. package/docs/layouts/Flex/examples/Flex.md +3 -2
  215. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  216. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  217. package/docs/layouts/Grid/examples/Grid.css +1 -1
  218. package/docs/layouts/Grid/examples/Grid.md +6 -5
  219. package/docs/layouts/Level/examples/Level.css +3 -3
  220. package/docs/layouts/Level/examples/Level.md +2 -1
  221. package/docs/layouts/Split/examples/Split.css +1 -1
  222. package/docs/layouts/Split/examples/Split.md +2 -1
  223. package/docs/layouts/Stack/examples/Stack.css +3 -3
  224. package/docs/layouts/Stack/examples/Stack.md +2 -1
  225. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  226. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  227. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  228. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  229. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  230. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  231. package/docs/utilities/Display/examples/Display.css +1 -1
  232. package/docs/utilities/Display/examples/Display.md +3 -2
  233. package/docs/utilities/Flex/examples/Flex.css +7 -7
  234. package/docs/utilities/Flex/examples/Flex.md +3 -2
  235. package/docs/utilities/Float/examples/Float.css +2 -2
  236. package/docs/utilities/Float/examples/Float.md +3 -2
  237. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  238. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  239. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  240. package/docs/utilities/Text/examples/Text.md +5 -4
  241. package/icons/PfIcons/add-circle-o.svg +4 -0
  242. package/icons/PfIcons/ansible-tower.svg +4 -0
  243. package/icons/PfIcons/applications.svg +4 -0
  244. package/icons/PfIcons/arrow.svg +4 -0
  245. package/icons/PfIcons/asleep.svg +4 -0
  246. package/icons/PfIcons/attention-bell.svg +4 -0
  247. package/icons/PfIcons/automation.svg +4 -0
  248. package/icons/PfIcons/bell.svg +4 -0
  249. package/icons/PfIcons/blueprint.svg +4 -0
  250. package/icons/PfIcons/build.svg +4 -0
  251. package/icons/PfIcons/builder-image.svg +4 -0
  252. package/icons/PfIcons/bundle.svg +4 -0
  253. package/icons/PfIcons/catalog.svg +4 -0
  254. package/icons/PfIcons/chat.svg +4 -0
  255. package/icons/PfIcons/close.svg +4 -0
  256. package/icons/PfIcons/cloud-security.svg +4 -0
  257. package/icons/PfIcons/cloud-tenant.svg +4 -0
  258. package/icons/PfIcons/cluster.svg +4 -0
  259. package/icons/PfIcons/connected.svg +4 -0
  260. package/icons/PfIcons/container-node.svg +4 -0
  261. package/icons/PfIcons/cpu.svg +4 -0
  262. package/icons/PfIcons/critical-risk.svg +4 -0
  263. package/icons/PfIcons/data-processor.svg +4 -0
  264. package/icons/PfIcons/data-sink.svg +4 -0
  265. package/icons/PfIcons/data-source.svg +4 -0
  266. package/icons/PfIcons/degraded.svg +4 -0
  267. package/icons/PfIcons/disconnected.svg +4 -0
  268. package/icons/PfIcons/domain.svg +4 -0
  269. package/icons/PfIcons/edit.svg +4 -0
  270. package/icons/PfIcons/enhancement.svg +4 -0
  271. package/icons/PfIcons/enterprise.svg +4 -0
  272. package/icons/PfIcons/equalizer.svg +4 -0
  273. package/icons/PfIcons/error-circle-o.svg +4 -0
  274. package/icons/PfIcons/export.svg +4 -0
  275. package/icons/PfIcons/filter.svg +4 -0
  276. package/icons/PfIcons/flavor.svg +4 -0
  277. package/icons/PfIcons/folder-close.svg +4 -0
  278. package/icons/PfIcons/folder-open.svg +4 -0
  279. package/icons/PfIcons/globe-route.svg +4 -0
  280. package/icons/PfIcons/help.svg +4 -0
  281. package/icons/PfIcons/history.svg +4 -0
  282. package/icons/PfIcons/home.svg +4 -0
  283. package/icons/PfIcons/import.svg +4 -0
  284. package/icons/PfIcons/in-progress.svg +4 -0
  285. package/icons/PfIcons/info.svg +4 -0
  286. package/icons/PfIcons/infrastructure.svg +4 -0
  287. package/icons/PfIcons/integration.svg +4 -0
  288. package/icons/PfIcons/key.svg +4 -0
  289. package/icons/PfIcons/locked.svg +4 -0
  290. package/icons/PfIcons/maintenance.svg +4 -0
  291. package/icons/PfIcons/memory.svg +4 -0
  292. package/icons/PfIcons/messages.svg +4 -0
  293. package/icons/PfIcons/middleware.svg +4 -0
  294. package/icons/PfIcons/migration.svg +4 -0
  295. package/icons/PfIcons/module.svg +4 -0
  296. package/icons/PfIcons/monitoring.svg +4 -0
  297. package/icons/PfIcons/multicluster.svg +4 -0
  298. package/icons/PfIcons/namespaces.svg +4 -0
  299. package/icons/PfIcons/network.svg +4 -0
  300. package/icons/PfIcons/new-process.svg +4 -0
  301. package/icons/PfIcons/not-started.svg +4 -0
  302. package/icons/PfIcons/off.svg +4 -0
  303. package/icons/PfIcons/ok.svg +4 -0
  304. package/icons/PfIcons/on-running.svg +4 -0
  305. package/icons/PfIcons/on.svg +4 -0
  306. package/icons/PfIcons/open-drawer-right.svg +4 -0
  307. package/icons/PfIcons/openshift.svg +4 -0
  308. package/icons/PfIcons/openstack.svg +4 -0
  309. package/icons/PfIcons/optimize.svg +4 -0
  310. package/icons/PfIcons/orders.svg +4 -0
  311. package/icons/PfIcons/os-image.svg +4 -0
  312. package/icons/PfIcons/package.svg +4 -0
  313. package/icons/PfIcons/panel-close.svg +4 -0
  314. package/icons/PfIcons/panel-open.svg +4 -0
  315. package/icons/PfIcons/paused.svg +4 -0
  316. package/icons/PfIcons/pending.svg +4 -0
  317. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  318. package/icons/PfIcons/pficon-history.svg +4 -0
  319. package/icons/PfIcons/pficon-network-range.svg +4 -0
  320. package/icons/PfIcons/pficon-satellite.svg +4 -0
  321. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  322. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  323. package/icons/PfIcons/pficon-template.svg +4 -0
  324. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  325. package/icons/PfIcons/plugged.svg +4 -0
  326. package/icons/PfIcons/port.svg +4 -0
  327. package/icons/PfIcons/print.svg +4 -0
  328. package/icons/PfIcons/private.svg +4 -0
  329. package/icons/PfIcons/process-automation.svg +4 -0
  330. package/icons/PfIcons/project.svg +4 -0
  331. package/icons/PfIcons/rebalance.svg +4 -0
  332. package/icons/PfIcons/rebooting.svg +4 -0
  333. package/icons/PfIcons/regions.svg +4 -0
  334. package/icons/PfIcons/registry.svg +4 -0
  335. package/icons/PfIcons/remove2.svg +4 -0
  336. package/icons/PfIcons/replicator.svg +4 -0
  337. package/icons/PfIcons/repository.svg +4 -0
  338. package/icons/PfIcons/resource-pool.svg +4 -0
  339. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  340. package/icons/PfIcons/resources-almost-full.svg +4 -0
  341. package/icons/PfIcons/resources-empty.svg +4 -0
  342. package/icons/PfIcons/resources-full.svg +4 -0
  343. package/icons/PfIcons/running.svg +4 -0
  344. package/icons/PfIcons/save.svg +4 -0
  345. package/icons/PfIcons/screen.svg +4 -0
  346. package/icons/PfIcons/security.svg +4 -0
  347. package/icons/PfIcons/server-group.svg +4 -0
  348. package/icons/PfIcons/server.svg +4 -0
  349. package/icons/PfIcons/service-catalog.svg +4 -0
  350. package/icons/PfIcons/service.svg +4 -0
  351. package/icons/PfIcons/services.svg +4 -0
  352. package/icons/PfIcons/severity-critical.svg +4 -0
  353. package/icons/PfIcons/severity-important.svg +4 -0
  354. package/icons/PfIcons/severity-minor.svg +4 -0
  355. package/icons/PfIcons/severity-moderate.svg +4 -0
  356. package/icons/PfIcons/severity-none.svg +4 -0
  357. package/icons/PfIcons/severity-undefined.svg +4 -0
  358. package/icons/PfIcons/spinner.svg +4 -0
  359. package/icons/PfIcons/spinner2.svg +4 -0
  360. package/icons/PfIcons/storage-domain.svg +4 -0
  361. package/icons/PfIcons/task.svg +4 -0
  362. package/icons/PfIcons/tenant.svg +4 -0
  363. package/icons/PfIcons/thumb-tack.svg +4 -0
  364. package/icons/PfIcons/topology.svg +4 -0
  365. package/icons/PfIcons/treeview.svg +4 -0
  366. package/icons/PfIcons/trend-down.svg +4 -0
  367. package/icons/PfIcons/trend-up.svg +4 -0
  368. package/icons/PfIcons/unknown.svg +4 -0
  369. package/icons/PfIcons/unlocked.svg +4 -0
  370. package/icons/PfIcons/unplugged.svg +4 -0
  371. package/icons/PfIcons/user.svg +4 -0
  372. package/icons/PfIcons/users.svg +4 -0
  373. package/icons/PfIcons/virtual-machine.svg +4 -0
  374. package/icons/PfIcons/volume.svg +4 -0
  375. package/icons/PfIcons/warning-triangle.svg +4 -0
  376. package/icons/PfIcons/zone.svg +4 -0
  377. package/layouts/Flex/flex.scss +83 -19
  378. package/layouts/Gallery/gallery.css +6 -2
  379. package/layouts/_index.css +6 -2
  380. package/package.json +34 -16
  381. package/patternfly-base-no-globals.css +965 -491
  382. package/patternfly-base.css +972 -491
  383. package/patternfly-charts.css +3 -3
  384. package/patternfly-no-globals.css +2801 -1070
  385. package/patternfly.css +2808 -1070
  386. package/patternfly.min.css +1 -1
  387. package/patternfly.min.css.map +1 -1
  388. package/patternfly.scss +27 -0
  389. package/sass-utilities/functions.scss +32 -25
  390. package/sass-utilities/mixins.scss +36 -20
  391. package/sass-utilities/namespaces-components.scss +6 -0
  392. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/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">
@@ -195,44 +196,46 @@ cssPrefix: pf-d-description-list
195
196
  </div>
196
197
  </header>
197
198
  <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>
199
+ <div class="pf-v6-c-page__sidebar-main">
200
+ <div class="pf-v6-c-page__sidebar-body">
201
+ <nav
202
+ class="pf-v6-c-nav"
203
+ id="description-list-basic-example-primary-nav"
204
+ aria-label="Global"
205
+ >
206
+ <ul class="pf-v6-c-nav__list" role="list">
207
+ <li class="pf-v6-c-nav__item">
208
+ <a href="#" class="pf-v6-c-nav__link">
209
+ <span class="pf-v6-c-nav__link-text">System panel</span>
210
+ </a>
211
+ </li>
212
+ <li class="pf-v6-c-nav__item">
213
+ <a
214
+ href="#"
215
+ class="pf-v6-c-nav__link pf-m-current"
216
+ aria-current="page"
217
+ >
218
+ <span class="pf-v6-c-nav__link-text">Policy</span>
219
+ </a>
220
+ </li>
221
+ <li class="pf-v6-c-nav__item">
222
+ <a href="#" class="pf-v6-c-nav__link">
223
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
224
+ </a>
225
+ </li>
226
+ <li class="pf-v6-c-nav__item">
227
+ <a href="#" class="pf-v6-c-nav__link">
228
+ <span class="pf-v6-c-nav__link-text">Network services</span>
229
+ </a>
230
+ </li>
231
+ <li class="pf-v6-c-nav__item">
232
+ <a href="#" class="pf-v6-c-nav__link">
233
+ <span class="pf-v6-c-nav__link-text">Server</span>
234
+ </a>
235
+ </li>
236
+ </ul>
237
+ </nav>
238
+ </div>
236
239
  </div>
237
240
  </div>
238
241
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -250,21 +253,57 @@ cssPrefix: pf-d-description-list
250
253
  </li>
251
254
  <li class="pf-v6-c-breadcrumb__item">
252
255
  <span class="pf-v6-c-breadcrumb__item-divider">
253
- <i class="fas fa-angle-right" aria-hidden="true"></i>
256
+ <svg
257
+ class="pf-v6-svg"
258
+ viewBox="0 0 20 20"
259
+ fill="currentColor"
260
+ aria-hidden="true"
261
+ role="img"
262
+ width="1em"
263
+ height="1em"
264
+ >
265
+ <path
266
+ 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"
267
+ />
268
+ </svg>
254
269
  </span>
255
270
 
256
271
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
272
  </li>
258
273
  <li class="pf-v6-c-breadcrumb__item">
259
274
  <span class="pf-v6-c-breadcrumb__item-divider">
260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
275
+ <svg
276
+ class="pf-v6-svg"
277
+ viewBox="0 0 20 20"
278
+ fill="currentColor"
279
+ aria-hidden="true"
280
+ role="img"
281
+ width="1em"
282
+ height="1em"
283
+ >
284
+ <path
285
+ 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"
286
+ />
287
+ </svg>
261
288
  </span>
262
289
 
263
290
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
291
  </li>
265
292
  <li class="pf-v6-c-breadcrumb__item">
266
293
  <span class="pf-v6-c-breadcrumb__item-divider">
267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
+ <svg
295
+ class="pf-v6-svg"
296
+ viewBox="0 0 20 20"
297
+ fill="currentColor"
298
+ aria-hidden="true"
299
+ role="img"
300
+ width="1em"
301
+ height="1em"
302
+ >
303
+ <path
304
+ 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"
305
+ />
306
+ </svg>
268
307
  </span>
269
308
 
270
309
  <a
@@ -402,9 +441,10 @@ cssPrefix: pf-d-description-list
402
441
  <span class="pf-v6-c-button__text">Skip to content</span>
403
442
  </a>
404
443
  </div>
444
+
405
445
  <header
406
446
  class="pf-v6-c-masthead"
407
- id="description-list-in-drawer-example-masthead"
447
+ id="description-list-in-drawer-example-docked"
408
448
  >
409
449
  <div class="pf-v6-c-masthead__main">
410
450
  <span class="pf-v6-c-masthead__toggle">
@@ -447,7 +487,7 @@ cssPrefix: pf-d-description-list
447
487
  y1="2.25860997e-13%"
448
488
  x2="32%"
449
489
  y2="100%"
450
- id="linearGradient-description-list-in-drawer-example-masthead"
490
+ id="linearGradient-description-list-in-drawer-example-docked"
451
491
  >
452
492
  <stop stop-color="#2B9AF3" offset="0%" />
453
493
  <stop
@@ -501,11 +541,11 @@ cssPrefix: pf-d-description-list
501
541
  />
502
542
  <path
503
543
  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)"
544
+ fill="url(#linearGradient-description-list-in-drawer-example-docked)"
505
545
  />
506
546
  <path
507
547
  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)"
548
+ fill="url(#linearGradient-description-list-in-drawer-example-docked)"
509
549
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
510
550
  />
511
551
  </g>
@@ -517,7 +557,7 @@ cssPrefix: pf-d-description-list
517
557
  <div class="pf-v6-c-masthead__content">
518
558
  <div
519
559
  class="pf-v6-c-toolbar pf-m-static"
520
- id="description-list-in-drawer-example-masthead-toolbar"
560
+ id="description-list-in-drawer-example-docked-toolbar"
521
561
  >
522
562
  <div class="pf-v6-c-toolbar__content">
523
563
  <div class="pf-v6-c-toolbar__content-section">
@@ -584,44 +624,46 @@ cssPrefix: pf-d-description-list
584
624
  </div>
585
625
  </header>
586
626
  <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>
627
+ <div class="pf-v6-c-page__sidebar-main">
628
+ <div class="pf-v6-c-page__sidebar-body">
629
+ <nav
630
+ class="pf-v6-c-nav"
631
+ id="description-list-in-drawer-example-primary-nav"
632
+ aria-label="Global"
633
+ >
634
+ <ul class="pf-v6-c-nav__list" role="list">
635
+ <li class="pf-v6-c-nav__item">
636
+ <a href="#" class="pf-v6-c-nav__link">
637
+ <span class="pf-v6-c-nav__link-text">System panel</span>
638
+ </a>
639
+ </li>
640
+ <li class="pf-v6-c-nav__item">
641
+ <a
642
+ href="#"
643
+ class="pf-v6-c-nav__link pf-m-current"
644
+ aria-current="page"
645
+ >
646
+ <span class="pf-v6-c-nav__link-text">Policy</span>
647
+ </a>
648
+ </li>
649
+ <li class="pf-v6-c-nav__item">
650
+ <a href="#" class="pf-v6-c-nav__link">
651
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
652
+ </a>
653
+ </li>
654
+ <li class="pf-v6-c-nav__item">
655
+ <a href="#" class="pf-v6-c-nav__link">
656
+ <span class="pf-v6-c-nav__link-text">Network services</span>
657
+ </a>
658
+ </li>
659
+ <li class="pf-v6-c-nav__item">
660
+ <a href="#" class="pf-v6-c-nav__link">
661
+ <span class="pf-v6-c-nav__link-text">Server</span>
662
+ </a>
663
+ </li>
664
+ </ul>
665
+ </nav>
666
+ </div>
625
667
  </div>
626
668
  </div>
627
669
  <div class="pf-v6-c-page__drawer">
@@ -647,7 +689,19 @@ cssPrefix: pf-d-description-list
647
689
  </li>
648
690
  <li class="pf-v6-c-breadcrumb__item">
649
691
  <span class="pf-v6-c-breadcrumb__item-divider">
650
- <i class="fas fa-angle-right" aria-hidden="true"></i>
692
+ <svg
693
+ class="pf-v6-svg"
694
+ viewBox="0 0 20 20"
695
+ fill="currentColor"
696
+ aria-hidden="true"
697
+ role="img"
698
+ width="1em"
699
+ height="1em"
700
+ >
701
+ <path
702
+ 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"
703
+ />
704
+ </svg>
651
705
  </span>
652
706
 
653
707
  <a
@@ -657,7 +711,19 @@ cssPrefix: pf-d-description-list
657
711
  </li>
658
712
  <li class="pf-v6-c-breadcrumb__item">
659
713
  <span class="pf-v6-c-breadcrumb__item-divider">
660
- <i class="fas fa-angle-right" aria-hidden="true"></i>
714
+ <svg
715
+ class="pf-v6-svg"
716
+ viewBox="0 0 20 20"
717
+ fill="currentColor"
718
+ aria-hidden="true"
719
+ role="img"
720
+ width="1em"
721
+ height="1em"
722
+ >
723
+ <path
724
+ 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"
725
+ />
726
+ </svg>
661
727
  </span>
662
728
 
663
729
  <a
@@ -667,7 +733,19 @@ cssPrefix: pf-d-description-list
667
733
  </li>
668
734
  <li class="pf-v6-c-breadcrumb__item">
669
735
  <span class="pf-v6-c-breadcrumb__item-divider">
670
- <i class="fas fa-angle-right" aria-hidden="true"></i>
736
+ <svg
737
+ class="pf-v6-svg"
738
+ viewBox="0 0 20 20"
739
+ fill="currentColor"
740
+ aria-hidden="true"
741
+ role="img"
742
+ width="1em"
743
+ height="1em"
744
+ >
745
+ <path
746
+ 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"
747
+ />
748
+ </svg>
671
749
  </span>
672
750
 
673
751
  <a
@@ -747,7 +825,19 @@ cssPrefix: pf-d-description-list
747
825
  aria-label="Close drawer panel"
748
826
  >
749
827
  <span class="pf-v6-c-button__icon">
750
- <i class="fas fa-times" aria-hidden="true"></i>
828
+ <svg
829
+ class="pf-v6-svg"
830
+ viewBox="0 0 20 20"
831
+ fill="currentColor"
832
+ aria-hidden="true"
833
+ role="img"
834
+ width="1em"
835
+ height="1em"
836
+ >
837
+ <path
838
+ 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"
839
+ />
840
+ </svg>
751
841
  </span>
752
842
  </button>
753
843
  </div>
@@ -769,13 +859,21 @@ cssPrefix: pf-d-description-list
769
859
  </div>
770
860
  </div>
771
861
  <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">
862
+ <div
863
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
864
+ aria-label="Drawer panel"
865
+ >
866
+ <ul
867
+ class="pf-v6-c-tabs__list"
868
+ role="tablist"
869
+ aria-label="Drawer panel"
870
+ >
774
871
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
775
872
  <button
776
873
  type="button"
777
874
  class="pf-v6-c-tabs__link"
778
875
  role="tab"
876
+ aria-selected="true"
779
877
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
780
878
  >
781
879
  <span class="pf-v6-c-tabs__item-text">Overview</span>
@@ -786,6 +884,7 @@ cssPrefix: pf-d-description-list
786
884
  type="button"
787
885
  class="pf-v6-c-tabs__link"
788
886
  role="tab"
887
+ aria-selected="false"
789
888
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
790
889
  >
791
890
  <span class="pf-v6-c-tabs__item-text">Activity</span>
@@ -1056,9 +1155,10 @@ cssPrefix: pf-d-description-list
1056
1155
  <span class="pf-v6-c-button__text">Skip to content</span>
1057
1156
  </a>
1058
1157
  </div>
1158
+
1059
1159
  <header
1060
1160
  class="pf-v6-c-masthead"
1061
- id="description-list-complex-content-example-masthead"
1161
+ id="description-list-complex-content-example-docked"
1062
1162
  >
1063
1163
  <div class="pf-v6-c-masthead__main">
1064
1164
  <span class="pf-v6-c-masthead__toggle">
@@ -1101,7 +1201,7 @@ cssPrefix: pf-d-description-list
1101
1201
  y1="2.25860997e-13%"
1102
1202
  x2="32%"
1103
1203
  y2="100%"
1104
- id="linearGradient-description-list-complex-content-example-masthead"
1204
+ id="linearGradient-description-list-complex-content-example-docked"
1105
1205
  >
1106
1206
  <stop stop-color="#2B9AF3" offset="0%" />
1107
1207
  <stop
@@ -1155,11 +1255,11 @@ cssPrefix: pf-d-description-list
1155
1255
  />
1156
1256
  <path
1157
1257
  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)"
1258
+ fill="url(#linearGradient-description-list-complex-content-example-docked)"
1159
1259
  />
1160
1260
  <path
1161
1261
  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)"
1262
+ fill="url(#linearGradient-description-list-complex-content-example-docked)"
1163
1263
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1164
1264
  />
1165
1265
  </g>
@@ -1171,7 +1271,7 @@ cssPrefix: pf-d-description-list
1171
1271
  <div class="pf-v6-c-masthead__content">
1172
1272
  <div
1173
1273
  class="pf-v6-c-toolbar pf-m-static"
1174
- id="description-list-complex-content-example-masthead-toolbar"
1274
+ id="description-list-complex-content-example-docked-toolbar"
1175
1275
  >
1176
1276
  <div class="pf-v6-c-toolbar__content">
1177
1277
  <div class="pf-v6-c-toolbar__content-section">
@@ -1238,44 +1338,46 @@ cssPrefix: pf-d-description-list
1238
1338
  </div>
1239
1339
  </header>
1240
1340
  <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>
1341
+ <div class="pf-v6-c-page__sidebar-main">
1342
+ <div class="pf-v6-c-page__sidebar-body">
1343
+ <nav
1344
+ class="pf-v6-c-nav"
1345
+ id="description-list-complex-content-example-primary-nav"
1346
+ aria-label="Global"
1347
+ >
1348
+ <ul class="pf-v6-c-nav__list" role="list">
1349
+ <li class="pf-v6-c-nav__item">
1350
+ <a href="#" class="pf-v6-c-nav__link">
1351
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1352
+ </a>
1353
+ </li>
1354
+ <li class="pf-v6-c-nav__item">
1355
+ <a
1356
+ href="#"
1357
+ class="pf-v6-c-nav__link pf-m-current"
1358
+ aria-current="page"
1359
+ >
1360
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1361
+ </a>
1362
+ </li>
1363
+ <li class="pf-v6-c-nav__item">
1364
+ <a href="#" class="pf-v6-c-nav__link">
1365
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1366
+ </a>
1367
+ </li>
1368
+ <li class="pf-v6-c-nav__item">
1369
+ <a href="#" class="pf-v6-c-nav__link">
1370
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1371
+ </a>
1372
+ </li>
1373
+ <li class="pf-v6-c-nav__item">
1374
+ <a href="#" class="pf-v6-c-nav__link">
1375
+ <span class="pf-v6-c-nav__link-text">Server</span>
1376
+ </a>
1377
+ </li>
1378
+ </ul>
1379
+ </nav>
1380
+ </div>
1279
1381
  </div>
1280
1382
  </div>
1281
1383
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1293,21 +1395,57 @@ cssPrefix: pf-d-description-list
1293
1395
  </li>
1294
1396
  <li class="pf-v6-c-breadcrumb__item">
1295
1397
  <span class="pf-v6-c-breadcrumb__item-divider">
1296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1398
+ <svg
1399
+ class="pf-v6-svg"
1400
+ viewBox="0 0 20 20"
1401
+ fill="currentColor"
1402
+ aria-hidden="true"
1403
+ role="img"
1404
+ width="1em"
1405
+ height="1em"
1406
+ >
1407
+ <path
1408
+ 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"
1409
+ />
1410
+ </svg>
1297
1411
  </span>
1298
1412
 
1299
1413
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1300
1414
  </li>
1301
1415
  <li class="pf-v6-c-breadcrumb__item">
1302
1416
  <span class="pf-v6-c-breadcrumb__item-divider">
1303
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1417
+ <svg
1418
+ class="pf-v6-svg"
1419
+ viewBox="0 0 20 20"
1420
+ fill="currentColor"
1421
+ aria-hidden="true"
1422
+ role="img"
1423
+ width="1em"
1424
+ height="1em"
1425
+ >
1426
+ <path
1427
+ 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"
1428
+ />
1429
+ </svg>
1304
1430
  </span>
1305
1431
 
1306
1432
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1307
1433
  </li>
1308
1434
  <li class="pf-v6-c-breadcrumb__item">
1309
1435
  <span class="pf-v6-c-breadcrumb__item-divider">
1310
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1436
+ <svg
1437
+ class="pf-v6-svg"
1438
+ viewBox="0 0 20 20"
1439
+ fill="currentColor"
1440
+ aria-hidden="true"
1441
+ role="img"
1442
+ width="1em"
1443
+ height="1em"
1444
+ >
1445
+ <path
1446
+ 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"
1447
+ />
1448
+ </svg>
1311
1449
  </span>
1312
1450
 
1313
1451
  <a