@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/Drawer/examples/Drawer.md CHANGED
@@ -16,7 +16,8 @@ wrapperTag: div
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="drawer-collapsed-example-masthead">
19
+
20
+ <header class="pf-v6-c-masthead" id="drawer-collapsed-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 @@ wrapperTag: div
58
59
  y1="2.25860997e-13%"
59
60
  x2="32%"
60
61
  y2="100%"
61
- id="linearGradient-drawer-collapsed-example-masthead"
62
+ id="linearGradient-drawer-collapsed-example-docked"
62
63
  >
63
64
  <stop stop-color="#2B9AF3" offset="0%" />
64
65
  <stop
@@ -112,11 +113,11 @@ wrapperTag: div
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-drawer-collapsed-example-masthead)"
116
+ fill="url(#linearGradient-drawer-collapsed-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-drawer-collapsed-example-masthead)"
120
+ fill="url(#linearGradient-drawer-collapsed-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 @@ wrapperTag: div
128
129
  <div class="pf-v6-c-masthead__content">
129
130
  <div
130
131
  class="pf-v6-c-toolbar pf-m-static"
131
- id="drawer-collapsed-example-masthead-toolbar"
132
+ id="drawer-collapsed-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 @@ wrapperTag: div
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="drawer-collapsed-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="drawer-collapsed-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__drawer">
@@ -258,7 +261,19 @@ wrapperTag: div
258
261
  </li>
259
262
  <li class="pf-v6-c-breadcrumb__item">
260
263
  <span class="pf-v6-c-breadcrumb__item-divider">
261
- <i class="fas fa-angle-right" aria-hidden="true"></i>
264
+ <svg
265
+ class="pf-v6-svg"
266
+ viewBox="0 0 20 20"
267
+ fill="currentColor"
268
+ aria-hidden="true"
269
+ role="img"
270
+ width="1em"
271
+ height="1em"
272
+ >
273
+ <path
274
+ 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"
275
+ />
276
+ </svg>
262
277
  </span>
263
278
 
264
279
  <a
@@ -268,7 +283,19 @@ wrapperTag: div
268
283
  </li>
269
284
  <li class="pf-v6-c-breadcrumb__item">
270
285
  <span class="pf-v6-c-breadcrumb__item-divider">
271
- <i class="fas fa-angle-right" aria-hidden="true"></i>
286
+ <svg
287
+ class="pf-v6-svg"
288
+ viewBox="0 0 20 20"
289
+ fill="currentColor"
290
+ aria-hidden="true"
291
+ role="img"
292
+ width="1em"
293
+ height="1em"
294
+ >
295
+ <path
296
+ 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"
297
+ />
298
+ </svg>
272
299
  </span>
273
300
 
274
301
  <a
@@ -278,7 +305,19 @@ wrapperTag: div
278
305
  </li>
279
306
  <li class="pf-v6-c-breadcrumb__item">
280
307
  <span class="pf-v6-c-breadcrumb__item-divider">
281
- <i class="fas fa-angle-right" aria-hidden="true"></i>
308
+ <svg
309
+ class="pf-v6-svg"
310
+ viewBox="0 0 20 20"
311
+ fill="currentColor"
312
+ aria-hidden="true"
313
+ role="img"
314
+ width="1em"
315
+ height="1em"
316
+ >
317
+ <path
318
+ 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"
319
+ />
320
+ </svg>
282
321
  </span>
283
322
 
284
323
  <a
@@ -358,7 +397,19 @@ wrapperTag: div
358
397
  aria-label="Close drawer panel"
359
398
  >
360
399
  <span class="pf-v6-c-button__icon">
361
- <i class="fas fa-times" aria-hidden="true"></i>
400
+ <svg
401
+ class="pf-v6-svg"
402
+ viewBox="0 0 20 20"
403
+ fill="currentColor"
404
+ aria-hidden="true"
405
+ role="img"
406
+ width="1em"
407
+ height="1em"
408
+ >
409
+ <path
410
+ 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"
411
+ />
412
+ </svg>
362
413
  </span>
363
414
  </button>
364
415
  </div>
@@ -380,13 +431,21 @@ wrapperTag: div
380
431
  </div>
381
432
  </div>
382
433
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
383
- <div class="pf-v6-c-tabs pf-m-box pf-m-fill">
384
- <ul class="pf-v6-c-tabs__list" role="tablist">
434
+ <div
435
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
436
+ aria-label="Drawer panel"
437
+ >
438
+ <ul
439
+ class="pf-v6-c-tabs__list"
440
+ role="tablist"
441
+ aria-label="Drawer panel"
442
+ >
385
443
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
386
444
  <button
387
445
  type="button"
388
446
  class="pf-v6-c-tabs__link"
389
447
  role="tab"
448
+ aria-selected="true"
390
449
  id="drawer-collapsed-example-panel-tabs-tab1-link"
391
450
  >
392
451
  <span class="pf-v6-c-tabs__item-text">Overview</span>
@@ -397,6 +456,7 @@ wrapperTag: div
397
456
  type="button"
398
457
  class="pf-v6-c-tabs__link"
399
458
  role="tab"
459
+ aria-selected="false"
400
460
  id="drawer-collapsed-example-panel-tabs-tab2-link"
401
461
  >
402
462
  <span class="pf-v6-c-tabs__item-text">Activity</span>
@@ -502,7 +562,8 @@ wrapperTag: div
502
562
  <span class="pf-v6-c-button__text">Skip to content</span>
503
563
  </a>
504
564
  </div>
505
- <header class="pf-v6-c-masthead" id="drawer-expanded-example-masthead">
565
+
566
+ <header class="pf-v6-c-masthead" id="drawer-expanded-example-docked">
506
567
  <div class="pf-v6-c-masthead__main">
507
568
  <span class="pf-v6-c-masthead__toggle">
508
569
  <button
@@ -544,7 +605,7 @@ wrapperTag: div
544
605
  y1="2.25860997e-13%"
545
606
  x2="32%"
546
607
  y2="100%"
547
- id="linearGradient-drawer-expanded-example-masthead"
608
+ id="linearGradient-drawer-expanded-example-docked"
548
609
  >
549
610
  <stop stop-color="#2B9AF3" offset="0%" />
550
611
  <stop
@@ -598,11 +659,11 @@ wrapperTag: div
598
659
  />
599
660
  <path
600
661
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
601
- fill="url(#linearGradient-drawer-expanded-example-masthead)"
662
+ fill="url(#linearGradient-drawer-expanded-example-docked)"
602
663
  />
603
664
  <path
604
665
  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"
605
- fill="url(#linearGradient-drawer-expanded-example-masthead)"
666
+ fill="url(#linearGradient-drawer-expanded-example-docked)"
606
667
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
607
668
  />
608
669
  </g>
@@ -614,7 +675,7 @@ wrapperTag: div
614
675
  <div class="pf-v6-c-masthead__content">
615
676
  <div
616
677
  class="pf-v6-c-toolbar pf-m-static"
617
- id="drawer-expanded-example-masthead-toolbar"
678
+ id="drawer-expanded-example-docked-toolbar"
618
679
  >
619
680
  <div class="pf-v6-c-toolbar__content">
620
681
  <div class="pf-v6-c-toolbar__content-section">
@@ -681,44 +742,46 @@ wrapperTag: div
681
742
  </div>
682
743
  </header>
683
744
  <div class="pf-v6-c-page__sidebar">
684
- <div class="pf-v6-c-page__sidebar-body">
685
- <nav
686
- class="pf-v6-c-nav"
687
- id="drawer-expanded-example-primary-nav"
688
- aria-label="Global"
689
- >
690
- <ul class="pf-v6-c-nav__list" role="list">
691
- <li class="pf-v6-c-nav__item">
692
- <a href="#" class="pf-v6-c-nav__link">
693
- <span class="pf-v6-c-nav__link-text">System panel</span>
694
- </a>
695
- </li>
696
- <li class="pf-v6-c-nav__item">
697
- <a
698
- href="#"
699
- class="pf-v6-c-nav__link pf-m-current"
700
- aria-current="page"
701
- >
702
- <span class="pf-v6-c-nav__link-text">Policy</span>
703
- </a>
704
- </li>
705
- <li class="pf-v6-c-nav__item">
706
- <a href="#" class="pf-v6-c-nav__link">
707
- <span class="pf-v6-c-nav__link-text">Authentication</span>
708
- </a>
709
- </li>
710
- <li class="pf-v6-c-nav__item">
711
- <a href="#" class="pf-v6-c-nav__link">
712
- <span class="pf-v6-c-nav__link-text">Network services</span>
713
- </a>
714
- </li>
715
- <li class="pf-v6-c-nav__item">
716
- <a href="#" class="pf-v6-c-nav__link">
717
- <span class="pf-v6-c-nav__link-text">Server</span>
718
- </a>
719
- </li>
720
- </ul>
721
- </nav>
745
+ <div class="pf-v6-c-page__sidebar-main">
746
+ <div class="pf-v6-c-page__sidebar-body">
747
+ <nav
748
+ class="pf-v6-c-nav"
749
+ id="drawer-expanded-example-primary-nav"
750
+ aria-label="Global"
751
+ >
752
+ <ul class="pf-v6-c-nav__list" role="list">
753
+ <li class="pf-v6-c-nav__item">
754
+ <a href="#" class="pf-v6-c-nav__link">
755
+ <span class="pf-v6-c-nav__link-text">System panel</span>
756
+ </a>
757
+ </li>
758
+ <li class="pf-v6-c-nav__item">
759
+ <a
760
+ href="#"
761
+ class="pf-v6-c-nav__link pf-m-current"
762
+ aria-current="page"
763
+ >
764
+ <span class="pf-v6-c-nav__link-text">Policy</span>
765
+ </a>
766
+ </li>
767
+ <li class="pf-v6-c-nav__item">
768
+ <a href="#" class="pf-v6-c-nav__link">
769
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
770
+ </a>
771
+ </li>
772
+ <li class="pf-v6-c-nav__item">
773
+ <a href="#" class="pf-v6-c-nav__link">
774
+ <span class="pf-v6-c-nav__link-text">Network services</span>
775
+ </a>
776
+ </li>
777
+ <li class="pf-v6-c-nav__item">
778
+ <a href="#" class="pf-v6-c-nav__link">
779
+ <span class="pf-v6-c-nav__link-text">Server</span>
780
+ </a>
781
+ </li>
782
+ </ul>
783
+ </nav>
784
+ </div>
722
785
  </div>
723
786
  </div>
724
787
  <div class="pf-v6-c-page__drawer">
@@ -744,7 +807,19 @@ wrapperTag: div
744
807
  </li>
745
808
  <li class="pf-v6-c-breadcrumb__item">
746
809
  <span class="pf-v6-c-breadcrumb__item-divider">
747
- <i class="fas fa-angle-right" aria-hidden="true"></i>
810
+ <svg
811
+ class="pf-v6-svg"
812
+ viewBox="0 0 20 20"
813
+ fill="currentColor"
814
+ aria-hidden="true"
815
+ role="img"
816
+ width="1em"
817
+ height="1em"
818
+ >
819
+ <path
820
+ 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"
821
+ />
822
+ </svg>
748
823
  </span>
749
824
 
750
825
  <a
@@ -754,7 +829,19 @@ wrapperTag: div
754
829
  </li>
755
830
  <li class="pf-v6-c-breadcrumb__item">
756
831
  <span class="pf-v6-c-breadcrumb__item-divider">
757
- <i class="fas fa-angle-right" aria-hidden="true"></i>
832
+ <svg
833
+ class="pf-v6-svg"
834
+ viewBox="0 0 20 20"
835
+ fill="currentColor"
836
+ aria-hidden="true"
837
+ role="img"
838
+ width="1em"
839
+ height="1em"
840
+ >
841
+ <path
842
+ 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"
843
+ />
844
+ </svg>
758
845
  </span>
759
846
 
760
847
  <a
@@ -764,7 +851,19 @@ wrapperTag: div
764
851
  </li>
765
852
  <li class="pf-v6-c-breadcrumb__item">
766
853
  <span class="pf-v6-c-breadcrumb__item-divider">
767
- <i class="fas fa-angle-right" aria-hidden="true"></i>
854
+ <svg
855
+ class="pf-v6-svg"
856
+ viewBox="0 0 20 20"
857
+ fill="currentColor"
858
+ aria-hidden="true"
859
+ role="img"
860
+ width="1em"
861
+ height="1em"
862
+ >
863
+ <path
864
+ 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"
865
+ />
866
+ </svg>
768
867
  </span>
769
868
 
770
869
  <a
@@ -845,7 +944,8 @@ wrapperTag: div
845
944
  <span class="pf-v6-c-button__text">Skip to content</span>
846
945
  </a>
847
946
  </div>
848
- <header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-masthead">
947
+
948
+ <header class="pf-v6-c-masthead" id="drawer-expanded-bottom-example-docked">
849
949
  <div class="pf-v6-c-masthead__main">
850
950
  <span class="pf-v6-c-masthead__toggle">
851
951
  <button
@@ -887,7 +987,7 @@ wrapperTag: div
887
987
  y1="2.25860997e-13%"
888
988
  x2="32%"
889
989
  y2="100%"
890
- id="linearGradient-drawer-expanded-bottom-example-masthead"
990
+ id="linearGradient-drawer-expanded-bottom-example-docked"
891
991
  >
892
992
  <stop stop-color="#2B9AF3" offset="0%" />
893
993
  <stop
@@ -941,11 +1041,11 @@ wrapperTag: div
941
1041
  />
942
1042
  <path
943
1043
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
944
- fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
1044
+ fill="url(#linearGradient-drawer-expanded-bottom-example-docked)"
945
1045
  />
946
1046
  <path
947
1047
  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"
948
- fill="url(#linearGradient-drawer-expanded-bottom-example-masthead)"
1048
+ fill="url(#linearGradient-drawer-expanded-bottom-example-docked)"
949
1049
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
950
1050
  />
951
1051
  </g>
@@ -957,7 +1057,7 @@ wrapperTag: div
957
1057
  <div class="pf-v6-c-masthead__content">
958
1058
  <div
959
1059
  class="pf-v6-c-toolbar pf-m-static"
960
- id="drawer-expanded-bottom-example-masthead-toolbar"
1060
+ id="drawer-expanded-bottom-example-docked-toolbar"
961
1061
  >
962
1062
  <div class="pf-v6-c-toolbar__content">
963
1063
  <div class="pf-v6-c-toolbar__content-section">
@@ -1024,44 +1124,46 @@ wrapperTag: div
1024
1124
  </div>
1025
1125
  </header>
1026
1126
  <div class="pf-v6-c-page__sidebar">
1027
- <div class="pf-v6-c-page__sidebar-body">
1028
- <nav
1029
- class="pf-v6-c-nav"
1030
- id="drawer-expanded-bottom-example-primary-nav"
1031
- aria-label="Global"
1032
- >
1033
- <ul class="pf-v6-c-nav__list" role="list">
1034
- <li class="pf-v6-c-nav__item">
1035
- <a href="#" class="pf-v6-c-nav__link">
1036
- <span class="pf-v6-c-nav__link-text">System panel</span>
1037
- </a>
1038
- </li>
1039
- <li class="pf-v6-c-nav__item">
1040
- <a
1041
- href="#"
1042
- class="pf-v6-c-nav__link pf-m-current"
1043
- aria-current="page"
1044
- >
1045
- <span class="pf-v6-c-nav__link-text">Policy</span>
1046
- </a>
1047
- </li>
1048
- <li class="pf-v6-c-nav__item">
1049
- <a href="#" class="pf-v6-c-nav__link">
1050
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1051
- </a>
1052
- </li>
1053
- <li class="pf-v6-c-nav__item">
1054
- <a href="#" class="pf-v6-c-nav__link">
1055
- <span class="pf-v6-c-nav__link-text">Network services</span>
1056
- </a>
1057
- </li>
1058
- <li class="pf-v6-c-nav__item">
1059
- <a href="#" class="pf-v6-c-nav__link">
1060
- <span class="pf-v6-c-nav__link-text">Server</span>
1061
- </a>
1062
- </li>
1063
- </ul>
1064
- </nav>
1127
+ <div class="pf-v6-c-page__sidebar-main">
1128
+ <div class="pf-v6-c-page__sidebar-body">
1129
+ <nav
1130
+ class="pf-v6-c-nav"
1131
+ id="drawer-expanded-bottom-example-primary-nav"
1132
+ aria-label="Global"
1133
+ >
1134
+ <ul class="pf-v6-c-nav__list" role="list">
1135
+ <li class="pf-v6-c-nav__item">
1136
+ <a href="#" class="pf-v6-c-nav__link">
1137
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1138
+ </a>
1139
+ </li>
1140
+ <li class="pf-v6-c-nav__item">
1141
+ <a
1142
+ href="#"
1143
+ class="pf-v6-c-nav__link pf-m-current"
1144
+ aria-current="page"
1145
+ >
1146
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1147
+ </a>
1148
+ </li>
1149
+ <li class="pf-v6-c-nav__item">
1150
+ <a href="#" class="pf-v6-c-nav__link">
1151
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1152
+ </a>
1153
+ </li>
1154
+ <li class="pf-v6-c-nav__item">
1155
+ <a href="#" class="pf-v6-c-nav__link">
1156
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1157
+ </a>
1158
+ </li>
1159
+ <li class="pf-v6-c-nav__item">
1160
+ <a href="#" class="pf-v6-c-nav__link">
1161
+ <span class="pf-v6-c-nav__link-text">Server</span>
1162
+ </a>
1163
+ </li>
1164
+ </ul>
1165
+ </nav>
1166
+ </div>
1065
1167
  </div>
1066
1168
  </div>
1067
1169
  <div class="pf-v6-c-page__drawer">
@@ -1087,7 +1189,19 @@ wrapperTag: div
1087
1189
  </li>
1088
1190
  <li class="pf-v6-c-breadcrumb__item">
1089
1191
  <span class="pf-v6-c-breadcrumb__item-divider">
1090
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1192
+ <svg
1193
+ class="pf-v6-svg"
1194
+ viewBox="0 0 20 20"
1195
+ fill="currentColor"
1196
+ aria-hidden="true"
1197
+ role="img"
1198
+ width="1em"
1199
+ height="1em"
1200
+ >
1201
+ <path
1202
+ 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"
1203
+ />
1204
+ </svg>
1091
1205
  </span>
1092
1206
 
1093
1207
  <a
@@ -1097,7 +1211,19 @@ wrapperTag: div
1097
1211
  </li>
1098
1212
  <li class="pf-v6-c-breadcrumb__item">
1099
1213
  <span class="pf-v6-c-breadcrumb__item-divider">
1100
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1214
+ <svg
1215
+ class="pf-v6-svg"
1216
+ viewBox="0 0 20 20"
1217
+ fill="currentColor"
1218
+ aria-hidden="true"
1219
+ role="img"
1220
+ width="1em"
1221
+ height="1em"
1222
+ >
1223
+ <path
1224
+ 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"
1225
+ />
1226
+ </svg>
1101
1227
  </span>
1102
1228
 
1103
1229
  <a
@@ -1107,7 +1233,19 @@ wrapperTag: div
1107
1233
  </li>
1108
1234
  <li class="pf-v6-c-breadcrumb__item">
1109
1235
  <span class="pf-v6-c-breadcrumb__item-divider">
1110
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1236
+ <svg
1237
+ class="pf-v6-svg"
1238
+ viewBox="0 0 20 20"
1239
+ fill="currentColor"
1240
+ aria-hidden="true"
1241
+ role="img"
1242
+ width="1em"
1243
+ height="1em"
1244
+ >
1245
+ <path
1246
+ 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"
1247
+ />
1248
+ </svg>
1111
1249
  </span>
1112
1250
 
1113
1251
  <a
@@ -1188,7 +1326,8 @@ wrapperTag: div
1188
1326
  <span class="pf-v6-c-button__text">Skip to content</span>
1189
1327
  </a>
1190
1328
  </div>
1191
- <header class="pf-v6-c-masthead" id="drawer-jump-links-masthead">
1329
+
1330
+ <header class="pf-v6-c-masthead" id="drawer-jump-links-docked">
1192
1331
  <div class="pf-v6-c-masthead__main">
1193
1332
  <span class="pf-v6-c-masthead__toggle">
1194
1333
  <button
@@ -1230,7 +1369,7 @@ wrapperTag: div
1230
1369
  y1="2.25860997e-13%"
1231
1370
  x2="32%"
1232
1371
  y2="100%"
1233
- id="linearGradient-drawer-jump-links-masthead"
1372
+ id="linearGradient-drawer-jump-links-docked"
1234
1373
  >
1235
1374
  <stop stop-color="#2B9AF3" offset="0%" />
1236
1375
  <stop
@@ -1284,11 +1423,11 @@ wrapperTag: div
1284
1423
  />
1285
1424
  <path
1286
1425
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1287
- fill="url(#linearGradient-drawer-jump-links-masthead)"
1426
+ fill="url(#linearGradient-drawer-jump-links-docked)"
1288
1427
  />
1289
1428
  <path
1290
1429
  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"
1291
- fill="url(#linearGradient-drawer-jump-links-masthead)"
1430
+ fill="url(#linearGradient-drawer-jump-links-docked)"
1292
1431
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1293
1432
  />
1294
1433
  </g>
@@ -1300,7 +1439,7 @@ wrapperTag: div
1300
1439
  <div class="pf-v6-c-masthead__content">
1301
1440
  <div
1302
1441
  class="pf-v6-c-toolbar pf-m-static"
1303
- id="drawer-jump-links-masthead-toolbar"
1442
+ id="drawer-jump-links-docked-toolbar"
1304
1443
  >
1305
1444
  <div class="pf-v6-c-toolbar__content">
1306
1445
  <div class="pf-v6-c-toolbar__content-section">
@@ -1367,44 +1506,46 @@ wrapperTag: div
1367
1506
  </div>
1368
1507
  </header>
1369
1508
  <div class="pf-v6-c-page__sidebar">
1370
- <div class="pf-v6-c-page__sidebar-body">
1371
- <nav
1372
- class="pf-v6-c-nav"
1373
- id="drawer-jump-links-primary-nav"
1374
- aria-label="Global"
1375
- >
1376
- <ul class="pf-v6-c-nav__list" role="list">
1377
- <li class="pf-v6-c-nav__item">
1378
- <a href="#" class="pf-v6-c-nav__link">
1379
- <span class="pf-v6-c-nav__link-text">System panel</span>
1380
- </a>
1381
- </li>
1382
- <li class="pf-v6-c-nav__item">
1383
- <a
1384
- href="#"
1385
- class="pf-v6-c-nav__link pf-m-current"
1386
- aria-current="page"
1387
- >
1388
- <span class="pf-v6-c-nav__link-text">Policy</span>
1389
- </a>
1390
- </li>
1391
- <li class="pf-v6-c-nav__item">
1392
- <a href="#" class="pf-v6-c-nav__link">
1393
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1394
- </a>
1395
- </li>
1396
- <li class="pf-v6-c-nav__item">
1397
- <a href="#" class="pf-v6-c-nav__link">
1398
- <span class="pf-v6-c-nav__link-text">Network services</span>
1399
- </a>
1400
- </li>
1401
- <li class="pf-v6-c-nav__item">
1402
- <a href="#" class="pf-v6-c-nav__link">
1403
- <span class="pf-v6-c-nav__link-text">Server</span>
1404
- </a>
1405
- </li>
1406
- </ul>
1407
- </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="drawer-jump-links-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>
1408
1549
  </div>
1409
1550
  </div>
1410
1551
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1437,10 +1578,19 @@ wrapperTag: div
1437
1578
  >
1438
1579
  <span class="pf-v6-c-button__icon pf-m-start">
1439
1580
  <span class="pf-v6-c-jump-links__toggle-icon">
1440
- <i
1441
- class="fas fa-angle-right"
1581
+ <svg
1582
+ class="pf-v6-svg"
1583
+ viewBox="0 0 20 20"
1584
+ fill="currentColor"
1442
1585
  aria-hidden="true"
1443
- ></i>
1586
+ role="img"
1587
+ width="1em"
1588
+ height="1em"
1589
+ >
1590
+ <path
1591
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1592
+ />
1593
+ </svg>
1444
1594
  </span>
1445
1595
  </span>
1446
1596
  <span
@@ -1579,7 +1729,19 @@ wrapperTag: div
1579
1729
  aria-label="Close drawer panel"
1580
1730
  >
1581
1731
  <span class="pf-v6-c-button__icon">
1582
- <i class="fas fa-times" aria-hidden="true"></i>
1732
+ <svg
1733
+ class="pf-v6-svg"
1734
+ viewBox="0 0 20 20"
1735
+ fill="currentColor"
1736
+ aria-hidden="true"
1737
+ role="img"
1738
+ width="1em"
1739
+ height="1em"
1740
+ >
1741
+ <path
1742
+ 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"
1743
+ />
1744
+ </svg>
1583
1745
  </span>
1584
1746
  </button>
1585
1747
  </div>
@@ -1610,7 +1772,8 @@ wrapperTag: div
1610
1772
  <span class="pf-v6-c-button__text">Skip to content</span>
1611
1773
  </a>
1612
1774
  </div>
1613
- <header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-masthead">
1775
+
1776
+ <header class="pf-v6-c-masthead" id="drawer-expanded-jump-links-docked">
1614
1777
  <div class="pf-v6-c-masthead__main">
1615
1778
  <span class="pf-v6-c-masthead__toggle">
1616
1779
  <button
@@ -1652,7 +1815,7 @@ wrapperTag: div
1652
1815
  y1="2.25860997e-13%"
1653
1816
  x2="32%"
1654
1817
  y2="100%"
1655
- id="linearGradient-drawer-expanded-jump-links-masthead"
1818
+ id="linearGradient-drawer-expanded-jump-links-docked"
1656
1819
  >
1657
1820
  <stop stop-color="#2B9AF3" offset="0%" />
1658
1821
  <stop
@@ -1706,11 +1869,11 @@ wrapperTag: div
1706
1869
  />
1707
1870
  <path
1708
1871
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1709
- fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1872
+ fill="url(#linearGradient-drawer-expanded-jump-links-docked)"
1710
1873
  />
1711
1874
  <path
1712
1875
  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"
1713
- fill="url(#linearGradient-drawer-expanded-jump-links-masthead)"
1876
+ fill="url(#linearGradient-drawer-expanded-jump-links-docked)"
1714
1877
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1715
1878
  />
1716
1879
  </g>
@@ -1722,7 +1885,7 @@ wrapperTag: div
1722
1885
  <div class="pf-v6-c-masthead__content">
1723
1886
  <div
1724
1887
  class="pf-v6-c-toolbar pf-m-static"
1725
- id="drawer-expanded-jump-links-masthead-toolbar"
1888
+ id="drawer-expanded-jump-links-docked-toolbar"
1726
1889
  >
1727
1890
  <div class="pf-v6-c-toolbar__content">
1728
1891
  <div class="pf-v6-c-toolbar__content-section">
@@ -1789,44 +1952,46 @@ wrapperTag: div
1789
1952
  </div>
1790
1953
  </header>
1791
1954
  <div class="pf-v6-c-page__sidebar">
1792
- <div class="pf-v6-c-page__sidebar-body">
1793
- <nav
1794
- class="pf-v6-c-nav"
1795
- id="drawer-expanded-jump-links-primary-nav"
1796
- aria-label="Global"
1797
- >
1798
- <ul class="pf-v6-c-nav__list" role="list">
1799
- <li class="pf-v6-c-nav__item">
1800
- <a href="#" class="pf-v6-c-nav__link">
1801
- <span class="pf-v6-c-nav__link-text">System panel</span>
1802
- </a>
1803
- </li>
1804
- <li class="pf-v6-c-nav__item">
1805
- <a
1806
- href="#"
1807
- class="pf-v6-c-nav__link pf-m-current"
1808
- aria-current="page"
1809
- >
1810
- <span class="pf-v6-c-nav__link-text">Policy</span>
1811
- </a>
1812
- </li>
1813
- <li class="pf-v6-c-nav__item">
1814
- <a href="#" class="pf-v6-c-nav__link">
1815
- <span class="pf-v6-c-nav__link-text">Authentication</span>
1816
- </a>
1817
- </li>
1818
- <li class="pf-v6-c-nav__item">
1819
- <a href="#" class="pf-v6-c-nav__link">
1820
- <span class="pf-v6-c-nav__link-text">Network services</span>
1821
- </a>
1822
- </li>
1823
- <li class="pf-v6-c-nav__item">
1824
- <a href="#" class="pf-v6-c-nav__link">
1825
- <span class="pf-v6-c-nav__link-text">Server</span>
1826
- </a>
1827
- </li>
1828
- </ul>
1829
- </nav>
1955
+ <div class="pf-v6-c-page__sidebar-main">
1956
+ <div class="pf-v6-c-page__sidebar-body">
1957
+ <nav
1958
+ class="pf-v6-c-nav"
1959
+ id="drawer-expanded-jump-links-primary-nav"
1960
+ aria-label="Global"
1961
+ >
1962
+ <ul class="pf-v6-c-nav__list" role="list">
1963
+ <li class="pf-v6-c-nav__item">
1964
+ <a href="#" class="pf-v6-c-nav__link">
1965
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1966
+ </a>
1967
+ </li>
1968
+ <li class="pf-v6-c-nav__item">
1969
+ <a
1970
+ href="#"
1971
+ class="pf-v6-c-nav__link pf-m-current"
1972
+ aria-current="page"
1973
+ >
1974
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1975
+ </a>
1976
+ </li>
1977
+ <li class="pf-v6-c-nav__item">
1978
+ <a href="#" class="pf-v6-c-nav__link">
1979
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1980
+ </a>
1981
+ </li>
1982
+ <li class="pf-v6-c-nav__item">
1983
+ <a href="#" class="pf-v6-c-nav__link">
1984
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1985
+ </a>
1986
+ </li>
1987
+ <li class="pf-v6-c-nav__item">
1988
+ <a href="#" class="pf-v6-c-nav__link">
1989
+ <span class="pf-v6-c-nav__link-text">Server</span>
1990
+ </a>
1991
+ </li>
1992
+ </ul>
1993
+ </nav>
1994
+ </div>
1830
1995
  </div>
1831
1996
  </div>
1832
1997
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -1859,10 +2024,19 @@ wrapperTag: div
1859
2024
  >
1860
2025
  <span class="pf-v6-c-button__icon pf-m-start">
1861
2026
  <span class="pf-v6-c-jump-links__toggle-icon">
1862
- <i
1863
- class="fas fa-angle-right"
2027
+ <svg
2028
+ class="pf-v6-svg"
2029
+ viewBox="0 0 20 20"
2030
+ fill="currentColor"
1864
2031
  aria-hidden="true"
1865
- ></i>
2032
+ role="img"
2033
+ width="1em"
2034
+ height="1em"
2035
+ >
2036
+ <path
2037
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2038
+ />
2039
+ </svg>
1866
2040
  </span>
1867
2041
  </span>
1868
2042
  <span
@@ -2001,7 +2175,19 @@ wrapperTag: div
2001
2175
  aria-label="Close drawer panel"
2002
2176
  >
2003
2177
  <span class="pf-v6-c-button__icon">
2004
- <i class="fas fa-times" aria-hidden="true"></i>
2178
+ <svg
2179
+ class="pf-v6-svg"
2180
+ viewBox="0 0 20 20"
2181
+ fill="currentColor"
2182
+ aria-hidden="true"
2183
+ role="img"
2184
+ width="1em"
2185
+ height="1em"
2186
+ >
2187
+ <path
2188
+ 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"
2189
+ />
2190
+ </svg>
2005
2191
  </span>
2006
2192
  </button>
2007
2193
  </div>