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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -17,7 +17,8 @@ wrapperTag: div
17
17
  <span class="pf-v6-c-button__text">Skip to content</span>
18
18
  </a>
19
19
  </div>
20
- <header class="pf-v6-c-masthead" id="banner-basic-example-masthead">
20
+
21
+ <header class="pf-v6-c-masthead" id="banner-basic-example-docked">
21
22
  <div class="pf-v6-c-masthead__main">
22
23
  <span class="pf-v6-c-masthead__toggle">
23
24
  <button
@@ -59,7 +60,7 @@ wrapperTag: div
59
60
  y1="2.25860997e-13%"
60
61
  x2="32%"
61
62
  y2="100%"
62
- id="linearGradient-banner-basic-example-masthead"
63
+ id="linearGradient-banner-basic-example-docked"
63
64
  >
64
65
  <stop stop-color="#2B9AF3" offset="0%" />
65
66
  <stop
@@ -113,11 +114,11 @@ wrapperTag: div
113
114
  />
114
115
  <path
115
116
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
116
- fill="url(#linearGradient-banner-basic-example-masthead)"
117
+ fill="url(#linearGradient-banner-basic-example-docked)"
117
118
  />
118
119
  <path
119
120
  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"
120
- fill="url(#linearGradient-banner-basic-example-masthead)"
121
+ fill="url(#linearGradient-banner-basic-example-docked)"
121
122
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
122
123
  />
123
124
  </g>
@@ -129,7 +130,7 @@ wrapperTag: div
129
130
  <div class="pf-v6-c-masthead__content">
130
131
  <div
131
132
  class="pf-v6-c-toolbar pf-m-static"
132
- id="banner-basic-example-masthead-toolbar"
133
+ id="banner-basic-example-docked-toolbar"
133
134
  >
134
135
  <div class="pf-v6-c-toolbar__content">
135
136
  <div class="pf-v6-c-toolbar__content-section">
@@ -147,7 +148,19 @@ wrapperTag: div
147
148
  aria-label="Application launcher"
148
149
  >
149
150
  <span class="pf-v6-c-menu-toggle__icon">
150
- <i class="fas fa-th" aria-hidden="true"></i>
151
+ <svg
152
+ class="pf-v6-svg"
153
+ viewBox="0 0 512 512"
154
+ fill="currentColor"
155
+ aria-hidden="true"
156
+ role="img"
157
+ width="1em"
158
+ height="1em"
159
+ >
160
+ <path
161
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
162
+ />
163
+ </svg>
151
164
  </span>
152
165
  </button>
153
166
  </div>
@@ -159,7 +172,19 @@ wrapperTag: div
159
172
  aria-label="Settings"
160
173
  >
161
174
  <span class="pf-v6-c-menu-toggle__icon">
162
- <i class="fas fa-cog" aria-hidden="true"></i>
175
+ <svg
176
+ class="pf-v6-svg"
177
+ viewBox="0 0 32 32"
178
+ fill="currentColor"
179
+ aria-hidden="true"
180
+ role="img"
181
+ width="1em"
182
+ height="1em"
183
+ >
184
+ <path
185
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
186
+ />
187
+ </svg>
163
188
  </span>
164
189
  </button>
165
190
  </div>
@@ -171,7 +196,19 @@ wrapperTag: div
171
196
  aria-label="Help"
172
197
  >
173
198
  <span class="pf-v6-c-menu-toggle__icon">
174
- <i class="fas fa-question-circle" aria-hidden="true"></i>
199
+ <svg
200
+ class="pf-v6-svg"
201
+ viewBox="0 0 512 512"
202
+ fill="currentColor"
203
+ aria-hidden="true"
204
+ role="img"
205
+ width="1em"
206
+ height="1em"
207
+ >
208
+ <path
209
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
210
+ />
211
+ </svg>
175
212
  </span>
176
213
  </button>
177
214
  </div>
@@ -185,7 +222,19 @@ wrapperTag: div
185
222
  aria-label="Actions"
186
223
  >
187
224
  <span class="pf-v6-c-menu-toggle__icon">
188
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
225
+ <svg
226
+ class="pf-v6-svg"
227
+ viewBox="0 0 32 32"
228
+ fill="currentColor"
229
+ aria-hidden="true"
230
+ role="img"
231
+ width="1em"
232
+ height="1em"
233
+ >
234
+ <path
235
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
236
+ />
237
+ </svg>
189
238
  </span>
190
239
  </button>
191
240
  </div>
@@ -196,44 +245,46 @@ wrapperTag: div
196
245
  </div>
197
246
  </header>
198
247
  <div class="pf-v6-c-page__sidebar">
199
- <div class="pf-v6-c-page__sidebar-body">
200
- <nav
201
- class="pf-v6-c-nav"
202
- id="banner-basic-example-primary-nav"
203
- aria-label="Global"
204
- >
205
- <ul class="pf-v6-c-nav__list" role="list">
206
- <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">
208
- <span class="pf-v6-c-nav__link-text">System panel</span>
209
- </a>
210
- </li>
211
- <li class="pf-v6-c-nav__item">
212
- <a
213
- href="#"
214
- class="pf-v6-c-nav__link pf-m-current"
215
- aria-current="page"
216
- >
217
- <span class="pf-v6-c-nav__link-text">Policy</span>
218
- </a>
219
- </li>
220
- <li class="pf-v6-c-nav__item">
221
- <a href="#" class="pf-v6-c-nav__link">
222
- <span class="pf-v6-c-nav__link-text">Authentication</span>
223
- </a>
224
- </li>
225
- <li class="pf-v6-c-nav__item">
226
- <a href="#" class="pf-v6-c-nav__link">
227
- <span class="pf-v6-c-nav__link-text">Network services</span>
228
- </a>
229
- </li>
230
- <li class="pf-v6-c-nav__item">
231
- <a href="#" class="pf-v6-c-nav__link">
232
- <span class="pf-v6-c-nav__link-text">Server</span>
233
- </a>
234
- </li>
235
- </ul>
236
- </nav>
248
+ <div class="pf-v6-c-page__sidebar-main">
249
+ <div class="pf-v6-c-page__sidebar-body">
250
+ <nav
251
+ class="pf-v6-c-nav"
252
+ id="banner-basic-example-primary-nav"
253
+ aria-label="Global"
254
+ >
255
+ <ul class="pf-v6-c-nav__list" role="list">
256
+ <li class="pf-v6-c-nav__item">
257
+ <a href="#" class="pf-v6-c-nav__link">
258
+ <span class="pf-v6-c-nav__link-text">System panel</span>
259
+ </a>
260
+ </li>
261
+ <li class="pf-v6-c-nav__item">
262
+ <a
263
+ href="#"
264
+ class="pf-v6-c-nav__link pf-m-current"
265
+ aria-current="page"
266
+ >
267
+ <span class="pf-v6-c-nav__link-text">Policy</span>
268
+ </a>
269
+ </li>
270
+ <li class="pf-v6-c-nav__item">
271
+ <a href="#" class="pf-v6-c-nav__link">
272
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
273
+ </a>
274
+ </li>
275
+ <li class="pf-v6-c-nav__item">
276
+ <a href="#" class="pf-v6-c-nav__link">
277
+ <span class="pf-v6-c-nav__link-text">Network services</span>
278
+ </a>
279
+ </li>
280
+ <li class="pf-v6-c-nav__item">
281
+ <a href="#" class="pf-v6-c-nav__link">
282
+ <span class="pf-v6-c-nav__link-text">Server</span>
283
+ </a>
284
+ </li>
285
+ </ul>
286
+ </nav>
287
+ </div>
237
288
  </div>
238
289
  </div>
239
290
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -269,21 +320,57 @@ wrapperTag: div
269
320
  </li>
270
321
  <li class="pf-v6-c-breadcrumb__item">
271
322
  <span class="pf-v6-c-breadcrumb__item-divider">
272
- <i class="fas fa-angle-right" aria-hidden="true"></i>
323
+ <svg
324
+ class="pf-v6-svg"
325
+ viewBox="0 0 20 20"
326
+ fill="currentColor"
327
+ aria-hidden="true"
328
+ role="img"
329
+ width="1em"
330
+ height="1em"
331
+ >
332
+ <path
333
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
334
+ />
335
+ </svg>
273
336
  </span>
274
337
 
275
338
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
276
339
  </li>
277
340
  <li class="pf-v6-c-breadcrumb__item">
278
341
  <span class="pf-v6-c-breadcrumb__item-divider">
279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
342
+ <svg
343
+ class="pf-v6-svg"
344
+ viewBox="0 0 20 20"
345
+ fill="currentColor"
346
+ aria-hidden="true"
347
+ role="img"
348
+ width="1em"
349
+ height="1em"
350
+ >
351
+ <path
352
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
353
+ />
354
+ </svg>
280
355
  </span>
281
356
 
282
357
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
283
358
  </li>
284
359
  <li class="pf-v6-c-breadcrumb__item">
285
360
  <span class="pf-v6-c-breadcrumb__item-divider">
286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
361
+ <svg
362
+ class="pf-v6-svg"
363
+ viewBox="0 0 20 20"
364
+ fill="currentColor"
365
+ aria-hidden="true"
366
+ role="img"
367
+ width="1em"
368
+ height="1em"
369
+ >
370
+ <path
371
+ 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"
372
+ />
373
+ </svg>
287
374
  </span>
288
375
 
289
376
  <a
@@ -296,9 +383,15 @@ wrapperTag: div
296
383
  </nav>
297
384
  </div>
298
385
  </section>
299
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
386
+ <section
387
+ class="pf-v6-c-page__main-section pf-m-limit-width"
388
+ aria-labelledby="main-title"
389
+ >
300
390
  <div class="pf-v6-c-page__main-body">
301
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
391
+ <h1
392
+ class="pf-v6-c-content--h1 pf-m-page-title"
393
+ id="main-title"
394
+ >Main title</h1>
302
395
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
303
396
  </div>
304
397
  </section>
@@ -496,7 +589,8 @@ wrapperTag: div
496
589
  <span class="pf-v6-c-button__text">Skip to content</span>
497
590
  </a>
498
591
  </div>
499
- <header class="pf-v6-c-masthead" id="banner-top-bottom-example-masthead">
592
+
593
+ <header class="pf-v6-c-masthead" id="banner-top-bottom-example-docked">
500
594
  <div class="pf-v6-c-masthead__main">
501
595
  <span class="pf-v6-c-masthead__toggle">
502
596
  <button
@@ -541,7 +635,7 @@ wrapperTag: div
541
635
  y1="2.25860997e-13%"
542
636
  x2="32%"
543
637
  y2="100%"
544
- id="linearGradient-banner-top-bottom-example-masthead"
638
+ id="linearGradient-banner-top-bottom-example-docked"
545
639
  >
546
640
  <stop stop-color="#2B9AF3" offset="0%" />
547
641
  <stop
@@ -600,11 +694,11 @@ wrapperTag: div
600
694
  />
601
695
  <path
602
696
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
603
- fill="url(#linearGradient-banner-top-bottom-example-masthead)"
697
+ fill="url(#linearGradient-banner-top-bottom-example-docked)"
604
698
  />
605
699
  <path
606
700
  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"
607
- fill="url(#linearGradient-banner-top-bottom-example-masthead)"
701
+ fill="url(#linearGradient-banner-top-bottom-example-docked)"
608
702
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
609
703
  />
610
704
  </g>
@@ -616,7 +710,7 @@ wrapperTag: div
616
710
  <div class="pf-v6-c-masthead__content">
617
711
  <div
618
712
  class="pf-v6-c-toolbar pf-m-static"
619
- id="banner-top-bottom-example-masthead-toolbar"
713
+ id="banner-top-bottom-example-docked-toolbar"
620
714
  >
621
715
  <div class="pf-v6-c-toolbar__content">
622
716
  <div class="pf-v6-c-toolbar__content-section">
@@ -634,7 +728,19 @@ wrapperTag: div
634
728
  aria-label="Application launcher"
635
729
  >
636
730
  <span class="pf-v6-c-menu-toggle__icon">
637
- <i class="fas fa-th" aria-hidden="true"></i>
731
+ <svg
732
+ class="pf-v6-svg"
733
+ viewBox="0 0 512 512"
734
+ fill="currentColor"
735
+ aria-hidden="true"
736
+ role="img"
737
+ width="1em"
738
+ height="1em"
739
+ >
740
+ <path
741
+ d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z"
742
+ />
743
+ </svg>
638
744
  </span>
639
745
  </button>
640
746
  </div>
@@ -646,7 +752,19 @@ wrapperTag: div
646
752
  aria-label="Settings"
647
753
  >
648
754
  <span class="pf-v6-c-menu-toggle__icon">
649
- <i class="fas fa-cog" aria-hidden="true"></i>
755
+ <svg
756
+ class="pf-v6-svg"
757
+ viewBox="0 0 32 32"
758
+ fill="currentColor"
759
+ aria-hidden="true"
760
+ role="img"
761
+ width="1em"
762
+ height="1em"
763
+ >
764
+ <path
765
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
766
+ />
767
+ </svg>
650
768
  </span>
651
769
  </button>
652
770
  </div>
@@ -658,7 +776,19 @@ wrapperTag: div
658
776
  aria-label="Help"
659
777
  >
660
778
  <span class="pf-v6-c-menu-toggle__icon">
661
- <i class="fas fa-question-circle" aria-hidden="true"></i>
779
+ <svg
780
+ class="pf-v6-svg"
781
+ viewBox="0 0 512 512"
782
+ fill="currentColor"
783
+ aria-hidden="true"
784
+ role="img"
785
+ width="1em"
786
+ height="1em"
787
+ >
788
+ <path
789
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"
790
+ />
791
+ </svg>
662
792
  </span>
663
793
  </button>
664
794
  </div>
@@ -672,7 +802,19 @@ wrapperTag: div
672
802
  aria-label="Actions"
673
803
  >
674
804
  <span class="pf-v6-c-menu-toggle__icon">
675
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
805
+ <svg
806
+ class="pf-v6-svg"
807
+ viewBox="0 0 32 32"
808
+ fill="currentColor"
809
+ aria-hidden="true"
810
+ role="img"
811
+ width="1em"
812
+ height="1em"
813
+ >
814
+ <path
815
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
816
+ />
817
+ </svg>
676
818
  </span>
677
819
  </button>
678
820
  </div>
@@ -683,44 +825,46 @@ wrapperTag: div
683
825
  </div>
684
826
  </header>
685
827
  <div class="pf-v6-c-page__sidebar">
686
- <div class="pf-v6-c-page__sidebar-body">
687
- <nav
688
- class="pf-v6-c-nav"
689
- id="banner-top-bottom-example-primary-nav"
690
- aria-label="Global"
691
- >
692
- <ul class="pf-v6-c-nav__list" role="list">
693
- <li class="pf-v6-c-nav__item">
694
- <a href="#" class="pf-v6-c-nav__link">
695
- <span class="pf-v6-c-nav__link-text">System panel</span>
696
- </a>
697
- </li>
698
- <li class="pf-v6-c-nav__item">
699
- <a
700
- href="#"
701
- class="pf-v6-c-nav__link pf-m-current"
702
- aria-current="page"
703
- >
704
- <span class="pf-v6-c-nav__link-text">Policy</span>
705
- </a>
706
- </li>
707
- <li class="pf-v6-c-nav__item">
708
- <a href="#" class="pf-v6-c-nav__link">
709
- <span class="pf-v6-c-nav__link-text">Authentication</span>
710
- </a>
711
- </li>
712
- <li class="pf-v6-c-nav__item">
713
- <a href="#" class="pf-v6-c-nav__link">
714
- <span class="pf-v6-c-nav__link-text">Network services</span>
715
- </a>
716
- </li>
717
- <li class="pf-v6-c-nav__item">
718
- <a href="#" class="pf-v6-c-nav__link">
719
- <span class="pf-v6-c-nav__link-text">Server</span>
720
- </a>
721
- </li>
722
- </ul>
723
- </nav>
828
+ <div class="pf-v6-c-page__sidebar-main">
829
+ <div class="pf-v6-c-page__sidebar-body">
830
+ <nav
831
+ class="pf-v6-c-nav"
832
+ id="banner-top-bottom-example-primary-nav"
833
+ aria-label="Global"
834
+ >
835
+ <ul class="pf-v6-c-nav__list" role="list">
836
+ <li class="pf-v6-c-nav__item">
837
+ <a href="#" class="pf-v6-c-nav__link">
838
+ <span class="pf-v6-c-nav__link-text">System panel</span>
839
+ </a>
840
+ </li>
841
+ <li class="pf-v6-c-nav__item">
842
+ <a
843
+ href="#"
844
+ class="pf-v6-c-nav__link pf-m-current"
845
+ aria-current="page"
846
+ >
847
+ <span class="pf-v6-c-nav__link-text">Policy</span>
848
+ </a>
849
+ </li>
850
+ <li class="pf-v6-c-nav__item">
851
+ <a href="#" class="pf-v6-c-nav__link">
852
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
853
+ </a>
854
+ </li>
855
+ <li class="pf-v6-c-nav__item">
856
+ <a href="#" class="pf-v6-c-nav__link">
857
+ <span class="pf-v6-c-nav__link-text">Network services</span>
858
+ </a>
859
+ </li>
860
+ <li class="pf-v6-c-nav__item">
861
+ <a href="#" class="pf-v6-c-nav__link">
862
+ <span class="pf-v6-c-nav__link-text">Server</span>
863
+ </a>
864
+ </li>
865
+ </ul>
866
+ </nav>
867
+ </div>
724
868
  </div>
725
869
  </div>
726
870
  <div class="pf-v6-c-page__main-container" tabindex="-1">
@@ -738,21 +882,57 @@ wrapperTag: div
738
882
  </li>
739
883
  <li class="pf-v6-c-breadcrumb__item">
740
884
  <span class="pf-v6-c-breadcrumb__item-divider">
741
- <i class="fas fa-angle-right" aria-hidden="true"></i>
885
+ <svg
886
+ class="pf-v6-svg"
887
+ viewBox="0 0 20 20"
888
+ fill="currentColor"
889
+ aria-hidden="true"
890
+ role="img"
891
+ width="1em"
892
+ height="1em"
893
+ >
894
+ <path
895
+ 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"
896
+ />
897
+ </svg>
742
898
  </span>
743
899
 
744
900
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
745
901
  </li>
746
902
  <li class="pf-v6-c-breadcrumb__item">
747
903
  <span class="pf-v6-c-breadcrumb__item-divider">
748
- <i class="fas fa-angle-right" aria-hidden="true"></i>
904
+ <svg
905
+ class="pf-v6-svg"
906
+ viewBox="0 0 20 20"
907
+ fill="currentColor"
908
+ aria-hidden="true"
909
+ role="img"
910
+ width="1em"
911
+ height="1em"
912
+ >
913
+ <path
914
+ 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"
915
+ />
916
+ </svg>
749
917
  </span>
750
918
 
751
919
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
752
920
  </li>
753
921
  <li class="pf-v6-c-breadcrumb__item">
754
922
  <span class="pf-v6-c-breadcrumb__item-divider">
755
- <i class="fas fa-angle-right" aria-hidden="true"></i>
923
+ <svg
924
+ class="pf-v6-svg"
925
+ viewBox="0 0 20 20"
926
+ fill="currentColor"
927
+ aria-hidden="true"
928
+ role="img"
929
+ width="1em"
930
+ height="1em"
931
+ >
932
+ <path
933
+ 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"
934
+ />
935
+ </svg>
756
936
  </span>
757
937
 
758
938
  <a
@@ -765,9 +945,15 @@ wrapperTag: div
765
945
  </nav>
766
946
  </div>
767
947
  </section>
768
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
948
+ <section
949
+ class="pf-v6-c-page__main-section pf-m-limit-width"
950
+ aria-labelledby="main-title"
951
+ >
769
952
  <div class="pf-v6-c-page__main-body">
770
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
953
+ <h1
954
+ class="pf-v6-c-content--h1 pf-m-page-title"
955
+ id="main-title"
956
+ >Main title</h1>
771
957
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
772
958
  </div>
773
959
  </section>
package/docs/demos/Button/examples/Button.md CHANGED
@@ -170,7 +170,19 @@ cssPrefix: pf-d-button
170
170
  <div class="pf-v6-c-form__actions">
171
171
  <button class="pf-v6-c-button pf-m-primary" type="submit">
172
172
  <span class="pf-v6-c-button__icon pf-m-start">
173
- <i class="fas fa-check-circle" aria-hidden="true"></i>
173
+ <svg
174
+ class="pf-v6-svg"
175
+ viewBox="0 0 512 512"
176
+ fill="currentColor"
177
+ aria-hidden="true"
178
+ role="img"
179
+ width="1em"
180
+ height="1em"
181
+ >
182
+ <path
183
+ d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
184
+ />
185
+ </svg>
174
186
  </span>
175
187
  <span class="pf-v6-c-button__text">Logged in</span>
176
188
  </button>