@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/Nav/examples/Navigation.md CHANGED
@@ -12,20 +12,24 @@ cssPrefix: pf-v6-c-nav
12
12
  <nav class="pf-v6-c-nav" aria-label="Global">
13
13
  <ul class="pf-v6-c-nav__list" role="list">
14
14
  <li class="pf-v6-c-nav__item">
15
- <a href="#" class="pf-v6-c-nav__link">Link 1</a>
15
+ <a href="#" class="pf-v6-c-nav__link">
16
+ <span class="pf-v6-c-nav__link-text">Link 1</span>
17
+ </a>
16
18
  </li>
17
19
  <li class="pf-v6-c-nav__item">
18
- <a
19
- href="#"
20
- class="pf-v6-c-nav__link pf-m-current"
21
- aria-current="page"
22
- >Current link</a>
20
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
21
+ <span class="pf-v6-c-nav__link-text">Current link</span>
22
+ </a>
23
23
  </li>
24
24
  <li class="pf-v6-c-nav__item">
25
- <a href="#" class="pf-v6-c-nav__link">Link 3</a>
25
+ <a href="#" class="pf-v6-c-nav__link">
26
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
27
+ </a>
26
28
  </li>
27
29
  <li class="pf-v6-c-nav__item">
28
- <a href="#" class="pf-v6-c-nav__link">Link 4</a>
30
+ <a href="#" class="pf-v6-c-nav__link">
31
+ <span class="pf-v6-c-nav__link-text">Link 4</span>
32
+ </a>
29
33
  </li>
30
34
  </ul>
31
35
  </nav>
@@ -40,13 +44,19 @@ cssPrefix: pf-v6-c-nav
40
44
  <h2 class="pf-v6-c-nav__section-title" id="grouped-title1">Section title 1</h2>
41
45
  <ul class="pf-v6-c-nav__list" role="list">
42
46
  <li class="pf-v6-c-nav__item">
43
- <a href="#" class="pf-v6-c-nav__link">Link 1</a>
47
+ <a href="#" class="pf-v6-c-nav__link">
48
+ <span class="pf-v6-c-nav__link-text">Link 1</span>
49
+ </a>
44
50
  </li>
45
51
  <li class="pf-v6-c-nav__item">
46
- <a href="#" class="pf-v6-c-nav__link">Link 2</a>
52
+ <a href="#" class="pf-v6-c-nav__link">
53
+ <span class="pf-v6-c-nav__link-text">Link 2</span>
54
+ </a>
47
55
  </li>
48
56
  <li class="pf-v6-c-nav__item">
49
- <a href="#" class="pf-v6-c-nav__link">Link 3</a>
57
+ <a href="#" class="pf-v6-c-nav__link">
58
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
59
+ </a>
50
60
  </li>
51
61
  </ul>
52
62
  </section>
@@ -55,17 +65,19 @@ cssPrefix: pf-v6-c-nav
55
65
  <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Section title 2</h2>
56
66
  <ul class="pf-v6-c-nav__list" role="list">
57
67
  <li class="pf-v6-c-nav__item">
58
- <a href="#" class="pf-v6-c-nav__link">Link 1</a>
68
+ <a href="#" class="pf-v6-c-nav__link">
69
+ <span class="pf-v6-c-nav__link-text">Link 1</span>
70
+ </a>
59
71
  </li>
60
72
  <li class="pf-v6-c-nav__item">
61
- <a
62
- href="#"
63
- class="pf-v6-c-nav__link pf-m-current"
64
- aria-current="page"
65
- >Current link</a>
73
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
74
+ <span class="pf-v6-c-nav__link-text">Current link</span>
75
+ </a>
66
76
  </li>
67
77
  <li class="pf-v6-c-nav__item">
68
- <a href="#" class="pf-v6-c-nav__link">Link 3</a>
78
+ <a href="#" class="pf-v6-c-nav__link">
79
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
80
+ </a>
69
81
  </li>
70
82
  </ul>
71
83
  </section>
@@ -80,13 +92,19 @@ cssPrefix: pf-v6-c-nav
80
92
  <section class="pf-v6-c-nav__section" aria-label="Section one">
81
93
  <ul class="pf-v6-c-nav__list" role="list">
82
94
  <li class="pf-v6-c-nav__item">
83
- <a href="#" class="pf-v6-c-nav__link">Link 1</a>
95
+ <a href="#" class="pf-v6-c-nav__link">
96
+ <span class="pf-v6-c-nav__link-text">Link 1</span>
97
+ </a>
84
98
  </li>
85
99
  <li class="pf-v6-c-nav__item">
86
- <a href="#" class="pf-v6-c-nav__link">Link 2</a>
100
+ <a href="#" class="pf-v6-c-nav__link">
101
+ <span class="pf-v6-c-nav__link-text">Link 2</span>
102
+ </a>
87
103
  </li>
88
104
  <li class="pf-v6-c-nav__item">
89
- <a href="#" class="pf-v6-c-nav__link">Link 3</a>
105
+ <a href="#" class="pf-v6-c-nav__link">
106
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
107
+ </a>
90
108
  </li>
91
109
  </ul>
92
110
  </section>
@@ -95,17 +113,19 @@ cssPrefix: pf-v6-c-nav
95
113
  <section class="pf-v6-c-nav__section" aria-label="Section two">
96
114
  <ul class="pf-v6-c-nav__list" role="list">
97
115
  <li class="pf-v6-c-nav__item">
98
- <a href="#" class="pf-v6-c-nav__link">Section 2, link 1</a>
116
+ <a href="#" class="pf-v6-c-nav__link">
117
+ <span class="pf-v6-c-nav__link-text">Section 2, link 1</span>
118
+ </a>
99
119
  </li>
100
120
  <li class="pf-v6-c-nav__item">
101
- <a
102
- href="#"
103
- class="pf-v6-c-nav__link pf-m-current"
104
- aria-current="page"
105
- >Current link</a>
121
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
122
+ <span class="pf-v6-c-nav__link-text">Current link</span>
123
+ </a>
106
124
  </li>
107
125
  <li class="pf-v6-c-nav__item">
108
- <a href="#" class="pf-v6-c-nav__link">Link 3</a>
126
+ <a href="#" class="pf-v6-c-nav__link">
127
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
128
+ </a>
109
129
  </li>
110
130
  </ul>
111
131
  </section>
@@ -118,13 +138,15 @@ cssPrefix: pf-v6-c-nav
118
138
  ```html
119
139
  <nav class="pf-v6-c-nav" aria-label="Global">
120
140
  <ul class="pf-v6-c-nav__list" role="list">
121
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
141
+ <li class="pf-v6-c-nav__item pf-m-expanded">
122
142
  <button
123
143
  class="pf-v6-c-nav__link"
124
144
  aria-expanded="true"
125
145
  id="expandable-example1"
126
146
  >
127
- Link 1 (current and expanded example)
147
+ <span
148
+ class="pf-v6-c-nav__link-text"
149
+ >Link 1 (current and expanded example)</span>
128
150
  <span class="pf-v6-c-nav__toggle">
129
151
  <span class="pf-v6-c-nav__toggle-icon">
130
152
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -137,31 +159,37 @@ cssPrefix: pf-v6-c-nav
137
159
  >
138
160
  <ul class="pf-v6-c-nav__list" role="list">
139
161
  <li class="pf-v6-c-nav__item">
140
- <a href="#" class="pf-v6-c-nav__link">Current link</a>
162
+ <a href="#" class="pf-v6-c-nav__link">
163
+ <span class="pf-v6-c-nav__link-text">Current link</span>
164
+ </a>
141
165
  </li>
142
166
  <li class="pf-v6-c-nav__item">
143
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
167
+ <a href="#" class="pf-v6-c-nav__link">
168
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
169
+ </a>
144
170
  </li>
145
171
  <li class="pf-v6-c-nav__item">
146
172
  <a
147
173
  href="#"
148
174
  class="pf-v6-c-nav__link pf-m-current"
149
175
  aria-current="page"
150
- >Subnav link 3</a>
176
+ >
177
+ <span class="pf-v6-c-nav__link-text">Subnav link 3</span>
178
+ </a>
151
179
  </li>
152
180
  </ul>
153
181
  </section>
154
182
  </li>
155
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
183
+ <li class="pf-v6-c-nav__item pf-m-expanded">
156
184
  <button
157
185
  class="pf-v6-c-nav__link"
158
186
  aria-expanded="true"
159
187
  id="expandable-example2"
160
188
  >
161
- Link 2 (expanded, but not current example)
162
189
  <span
163
- class="pf-v6-c-nav__toggle"
164
- >
190
+ class="pf-v6-c-nav__link-text"
191
+ >Link 2 (expanded, but not current example)</span>
192
+ <span class="pf-v6-c-nav__toggle">
165
193
  <span class="pf-v6-c-nav__toggle-icon">
166
194
  <i class="fas fa-angle-right" aria-hidden="true"></i>
167
195
  </span>
@@ -173,21 +201,25 @@ cssPrefix: pf-v6-c-nav
173
201
  >
174
202
  <ul class="pf-v6-c-nav__list" role="list">
175
203
  <li class="pf-v6-c-nav__item">
176
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
204
+ <a href="#" class="pf-v6-c-nav__link">
205
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
206
+ </a>
177
207
  </li>
178
208
  <li class="pf-v6-c-nav__item">
179
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
209
+ <a href="#" class="pf-v6-c-nav__link">
210
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
211
+ </a>
180
212
  </li>
181
213
  </ul>
182
214
  </section>
183
215
  </li>
184
- <li class="pf-v6-c-nav__item pf-m-expandable">
216
+ <li class="pf-v6-c-nav__item">
185
217
  <button
186
218
  class="pf-v6-c-nav__link"
187
219
  aria-expanded="false"
188
220
  id="expandable-example3"
189
221
  >
190
- Link 3
222
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
191
223
  <span class="pf-v6-c-nav__toggle">
192
224
  <span class="pf-v6-c-nav__toggle-icon">
193
225
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -201,10 +233,14 @@ cssPrefix: pf-v6-c-nav
201
233
  >
202
234
  <ul class="pf-v6-c-nav__list" role="list">
203
235
  <li class="pf-v6-c-nav__item">
204
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
236
+ <a href="#" class="pf-v6-c-nav__link">
237
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
238
+ </a>
205
239
  </li>
206
240
  <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
241
+ <a href="#" class="pf-v6-c-nav__link">
242
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
243
+ </a>
208
244
  </li>
209
245
  </ul>
210
246
  </section>
@@ -219,9 +255,9 @@ cssPrefix: pf-v6-c-nav
219
255
  ```html
220
256
  <nav class="pf-v6-c-nav" aria-label="Global">
221
257
  <ul class="pf-v6-c-nav__list" role="list">
222
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
258
+ <li class="pf-v6-c-nav__item pf-m-expanded">
223
259
  <button class="pf-v6-c-nav__link" aria-expanded="true">
224
- Link 1
260
+ <span class="pf-v6-c-nav__link-text">Link 1</span>
225
261
  <span class="pf-v6-c-nav__toggle">
226
262
  <span class="pf-v6-c-nav__toggle-icon">
227
263
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -231,24 +267,30 @@ cssPrefix: pf-v6-c-nav
231
267
  <section class="pf-v6-c-nav__subnav" aria-labelledby="subnav-title1">
232
268
  <ul class="pf-v6-c-nav__list" role="list">
233
269
  <li class="pf-v6-c-nav__item">
234
- <a href="#" class="pf-v6-c-nav__link">Current link</a>
270
+ <a href="#" class="pf-v6-c-nav__link">
271
+ <span class="pf-v6-c-nav__link-text">Current link</span>
272
+ </a>
235
273
  </li>
236
274
  <li class="pf-v6-c-nav__item">
237
275
  <a
238
276
  href="#"
239
277
  class="pf-v6-c-nav__link pf-m-current"
240
278
  aria-current="page"
241
- >Subnav link 2</a>
279
+ >
280
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
281
+ </a>
242
282
  </li>
243
283
  <li class="pf-v6-c-nav__item">
244
- <a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
284
+ <a href="#" class="pf-v6-c-nav__link">
285
+ <span class="pf-v6-c-nav__link-text">Subnav link 3</span>
286
+ </a>
245
287
  </li>
246
288
  </ul>
247
289
  </section>
248
290
  </li>
249
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
291
+ <li class="pf-v6-c-nav__item pf-m-expanded">
250
292
  <button class="pf-v6-c-nav__link" aria-expanded="true">
251
- Link 2
293
+ <span class="pf-v6-c-nav__link-text">Link 2</span>
252
294
  <span class="pf-v6-c-nav__toggle">
253
295
  <span class="pf-v6-c-nav__toggle-icon">
254
296
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -258,10 +300,14 @@ cssPrefix: pf-v6-c-nav
258
300
  <section class="pf-v6-c-nav__subnav" aria-labelledby="subnav-title2">
259
301
  <ul class="pf-v6-c-nav__list" role="list">
260
302
  <li class="pf-v6-c-nav__item">
261
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
303
+ <a href="#" class="pf-v6-c-nav__link">
304
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
305
+ </a>
262
306
  </li>
263
307
  <li class="pf-v6-c-nav__item">
264
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
308
+ <a href="#" class="pf-v6-c-nav__link">
309
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
310
+ </a>
265
311
  </li>
266
312
  </ul>
267
313
  </section>
@@ -277,18 +323,20 @@ cssPrefix: pf-v6-c-nav
277
323
  <nav class="pf-v6-c-nav" aria-label="Global">
278
324
  <ul class="pf-v6-c-nav__list" role="list">
279
325
  <li class="pf-v6-c-nav__item">
280
- <a href="#" class="pf-v6-c-nav__link">Link 1 (not expandable)</a>
326
+ <a href="#" class="pf-v6-c-nav__link">
327
+ <span class="pf-v6-c-nav__link-text">Link 1 (not expandable)</span>
328
+ </a>
281
329
  </li>
282
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
330
+ <li class="pf-v6-c-nav__item pf-m-expanded">
283
331
  <button
284
332
  class="pf-v6-c-nav__link"
285
333
  aria-expanded="true"
286
334
  id="nav-mixed-link2"
287
335
  >
288
- Link 2 (expanded, but not current example)
289
336
  <span
290
- class="pf-v6-c-nav__toggle"
291
- >
337
+ class="pf-v6-c-nav__link-text"
338
+ >Link 2 (expanded, but not current example)</span>
339
+ <span class="pf-v6-c-nav__toggle">
292
340
  <span class="pf-v6-c-nav__toggle-icon">
293
341
  <i class="fas fa-angle-right" aria-hidden="true"></i>
294
342
  </span>
@@ -297,24 +345,28 @@ cssPrefix: pf-v6-c-nav
297
345
  <section class="pf-v6-c-nav__subnav" aria-labelledby="nav-mixed-link2">
298
346
  <ul class="pf-v6-c-nav__list" role="list">
299
347
  <li class="pf-v6-c-nav__item">
300
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
348
+ <a href="#" class="pf-v6-c-nav__link">
349
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
350
+ </a>
301
351
  </li>
302
352
  <li class="pf-v6-c-nav__item">
303
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
353
+ <a href="#" class="pf-v6-c-nav__link">
354
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
355
+ </a>
304
356
  </li>
305
357
  </ul>
306
358
  </section>
307
359
  </li>
308
- <li class="pf-v6-c-nav__item pf-m-expandable">
360
+ <li class="pf-v6-c-nav__item">
309
361
  <button
310
362
  class="pf-v6-c-nav__link"
311
363
  aria-expanded="false"
312
364
  id="nav-mixed-link4"
313
365
  >
314
- Link 3 (current, but not expanded example)
315
366
  <span
316
- class="pf-v6-c-nav__toggle"
317
- >
367
+ class="pf-v6-c-nav__link-text"
368
+ >Link 3 (current, but not expanded example)</span>
369
+ <span class="pf-v6-c-nav__toggle">
318
370
  <span class="pf-v6-c-nav__toggle-icon">
319
371
  <i class="fas fa-angle-right" aria-hidden="true"></i>
320
372
  </span>
@@ -327,17 +379,23 @@ cssPrefix: pf-v6-c-nav
327
379
  >
328
380
  <ul class="pf-v6-c-nav__list" role="list">
329
381
  <li class="pf-v6-c-nav__item">
330
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
382
+ <a href="#" class="pf-v6-c-nav__link">
383
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
384
+ </a>
331
385
  </li>
332
386
  <li class="pf-v6-c-nav__item">
333
387
  <a
334
388
  href="#"
335
389
  class="pf-v6-c-nav__link pf-m-current"
336
390
  aria-current="page"
337
- >Subnav link 2</a>
391
+ >
392
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
393
+ </a>
338
394
  </li>
339
395
  <li class="pf-v6-c-nav__item">
340
- <a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
396
+ <a href="#" class="pf-v6-c-nav__link">
397
+ <span class="pf-v6-c-nav__link-text">Subnav link 3</span>
398
+ </a>
341
399
  </li>
342
400
  </ul>
343
401
  </section>
@@ -353,21 +411,27 @@ cssPrefix: pf-v6-c-nav
353
411
  <nav class="pf-v6-c-nav" aria-label="Global">
354
412
  <ul class="pf-v6-c-nav__list" role="list">
355
413
  <li class="pf-v6-c-nav__item">
356
- <a href="#" class="pf-v6-c-nav__link">Clusters</a>
414
+ <a href="#" class="pf-v6-c-nav__link">
415
+ <span class="pf-v6-c-nav__link-text">Clusters</span>
416
+ </a>
357
417
  </li>
358
418
  <li class="pf-v6-c-nav__item">
359
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
419
+ <a href="#" class="pf-v6-c-nav__link">
420
+ <span class="pf-v6-c-nav__link-text">Overview</span>
421
+ </a>
360
422
  </li>
361
423
  <li class="pf-v6-c-nav__item">
362
- <a href="#" class="pf-v6-c-nav__link">Releases</a>
424
+ <a href="#" class="pf-v6-c-nav__link">
425
+ <span class="pf-v6-c-nav__link-text">Releases</span>
426
+ </a>
363
427
  </li>
364
- <li class="pf-v6-c-nav__item pf-m-expandable">
428
+ <li class="pf-v6-c-nav__item">
365
429
  <button
366
430
  class="pf-v6-c-nav__link"
367
431
  aria-expanded="false"
368
432
  id="expandable-third-level-example-example-1"
369
433
  >
370
- Subscriptions
434
+ <span class="pf-v6-c-nav__link-text">Subscriptions</span>
371
435
  <span class="pf-v6-c-nav__toggle">
372
436
  <span class="pf-v6-c-nav__toggle-icon">
373
437
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -381,21 +445,25 @@ cssPrefix: pf-v6-c-nav
381
445
  >
382
446
  <ul class="pf-v6-c-nav__list" role="list">
383
447
  <li class="pf-v6-c-nav__item">
384
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
448
+ <a href="#" class="pf-v6-c-nav__link">
449
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
450
+ </a>
385
451
  </li>
386
452
  <li class="pf-v6-c-nav__item">
387
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
453
+ <a href="#" class="pf-v6-c-nav__link">
454
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
455
+ </a>
388
456
  </li>
389
457
  </ul>
390
458
  </section>
391
459
  </li>
392
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
460
+ <li class="pf-v6-c-nav__item pf-m-expanded">
393
461
  <button
394
462
  class="pf-v6-c-nav__link"
395
463
  aria-expanded="true"
396
464
  id="expandable-third-level-example-example-2"
397
465
  >
398
- Cost management
466
+ <span class="pf-v6-c-nav__link-text">Cost management</span>
399
467
  <span class="pf-v6-c-nav__toggle">
400
468
  <span class="pf-v6-c-nav__toggle-icon">
401
469
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -408,18 +476,22 @@ cssPrefix: pf-v6-c-nav
408
476
  >
409
477
  <ul class="pf-v6-c-nav__list" role="list">
410
478
  <li class="pf-v6-c-nav__item">
411
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
479
+ <a href="#" class="pf-v6-c-nav__link">
480
+ <span class="pf-v6-c-nav__link-text">Overview</span>
481
+ </a>
412
482
  </li>
413
483
  <li class="pf-v6-c-nav__item">
414
- <a href="#" class="pf-v6-c-nav__link">Openshift</a>
484
+ <a href="#" class="pf-v6-c-nav__link">
485
+ <span class="pf-v6-c-nav__link-text">Openshift</span>
486
+ </a>
415
487
  </li>
416
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
488
+ <li class="pf-v6-c-nav__item pf-m-expanded">
417
489
  <button
418
490
  class="pf-v6-c-nav__link"
419
491
  aria-expanded="true"
420
492
  id="-sub-example-1"
421
493
  >
422
- Public clouds
494
+ <span class="pf-v6-c-nav__link-text">Public clouds</span>
423
495
  <span class="pf-v6-c-nav__toggle">
424
496
  <span class="pf-v6-c-nav__toggle-icon">
425
497
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -432,28 +504,40 @@ cssPrefix: pf-v6-c-nav
432
504
  >
433
505
  <ul class="pf-v6-c-nav__list" role="list">
434
506
  <li class="pf-v6-c-nav__item">
435
- <a href="#" class="pf-v6-c-nav__link">Amazon Web Services</a>
507
+ <a href="#" class="pf-v6-c-nav__link">
508
+ <span class="pf-v6-c-nav__link-text">Amazon Web Services</span>
509
+ </a>
436
510
  </li>
437
511
  <li class="pf-v6-c-nav__item">
438
- <a href="#" class="pf-v6-c-nav__link">Microsoft Azure</a>
512
+ <a href="#" class="pf-v6-c-nav__link">
513
+ <span class="pf-v6-c-nav__link-text">Microsoft Azure</span>
514
+ </a>
439
515
  </li>
440
516
  <li class="pf-v6-c-nav__item">
441
- <a href="#" class="pf-v6-c-nav__link">Google Cloud Services</a>
517
+ <a href="#" class="pf-v6-c-nav__link">
518
+ <span class="pf-v6-c-nav__link-text">Google Cloud Services</span>
519
+ </a>
442
520
  </li>
443
521
  </ul>
444
522
  </section>
445
523
  </li>
446
524
  <li class="pf-v6-c-nav__item">
447
- <a href="#" class="pf-v6-c-nav__link">Cost Models</a>
525
+ <a href="#" class="pf-v6-c-nav__link">
526
+ <span class="pf-v6-c-nav__link-text">Cost Models</span>
527
+ </a>
448
528
  </li>
449
529
  <li class="pf-v6-c-nav__item">
450
- <a href="#" class="pf-v6-c-nav__link">Cost Explorer</a>
530
+ <a href="#" class="pf-v6-c-nav__link">
531
+ <span class="pf-v6-c-nav__link-text">Cost Explorer</span>
532
+ </a>
451
533
  </li>
452
534
  </ul>
453
535
  </section>
454
536
  </li>
455
537
  <li class="pf-v6-c-nav__item">
456
- <a href="#" class="pf-v6-c-nav__link">Support Cases</a>
538
+ <a href="#" class="pf-v6-c-nav__link">
539
+ <span class="pf-v6-c-nav__link-text">Support Cases</span>
540
+ </a>
457
541
  </li>
458
542
  </ul>
459
543
  </nav>
@@ -466,17 +550,19 @@ cssPrefix: pf-v6-c-nav
466
550
  <nav class="pf-v6-c-nav pf-m-horizontal" aria-label="Global">
467
551
  <ul class="pf-v6-c-nav__list" role="list">
468
552
  <li class="pf-v6-c-nav__item">
469
- <a
470
- href="#"
471
- class="pf-v6-c-nav__link pf-m-current"
472
- aria-current="page"
473
- >Item 1</a>
553
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
554
+ <span class="pf-v6-c-nav__link-text">Item 1</span>
555
+ </a>
474
556
  </li>
475
557
  <li class="pf-v6-c-nav__item">
476
- <a href="#" class="pf-v6-c-nav__link">Item 2</a>
558
+ <a href="#" class="pf-v6-c-nav__link">
559
+ <span class="pf-v6-c-nav__link-text">Item 2</span>
560
+ </a>
477
561
  </li>
478
562
  <li class="pf-v6-c-nav__item">
479
- <a href="#" class="pf-v6-c-nav__link">Item 3</a>
563
+ <a href="#" class="pf-v6-c-nav__link">
564
+ <span class="pf-v6-c-nav__link-text">Item 3</span>
565
+ </a>
480
566
  </li>
481
567
  </ul>
482
568
  </nav>
@@ -494,28 +580,36 @@ cssPrefix: pf-v6-c-nav
494
580
  aria-label="Scroll start"
495
581
  disabled
496
582
  >
497
- <i class="fas fa-angle-left" aria-hidden="true"></i>
583
+ <span class="pf-v6-c-button__icon">
584
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
585
+ </span>
498
586
  </button>
499
587
  </div>
500
588
  <ul class="pf-v6-c-nav__list" role="list">
501
589
  <li class="pf-v6-c-nav__item">
502
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
590
+ <a href="#" class="pf-v6-c-nav__link">
591
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
592
+ </a>
503
593
  </li>
504
594
  <li class="pf-v6-c-nav__item">
505
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
595
+ <a href="#" class="pf-v6-c-nav__link">
596
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
597
+ </a>
506
598
  </li>
507
599
  <li class="pf-v6-c-nav__item">
508
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
600
+ <a href="#" class="pf-v6-c-nav__link">
601
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
602
+ </a>
509
603
  </li>
510
604
  <li class="pf-v6-c-nav__item">
511
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
605
+ <a href="#" class="pf-v6-c-nav__link">
606
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
607
+ </a>
512
608
  </li>
513
609
  <li class="pf-v6-c-nav__item">
514
- <a
515
- href="#"
516
- class="pf-v6-c-nav__link pf-m-current"
517
- aria-current="page"
518
- >Horizontal nav item 5</a>
610
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
611
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
612
+ </a>
519
613
  </li>
520
614
  </ul>
521
615
  <div class="pf-v6-c-nav__scroll-button">
@@ -524,7 +618,9 @@ cssPrefix: pf-v6-c-nav
524
618
  type="button"
525
619
  aria-label="Scroll end"
526
620
  >
527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
621
+ <span class="pf-v6-c-button__icon">
622
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
623
+ </span>
528
624
  </button>
529
625
  </div>
530
626
  </nav>
@@ -537,17 +633,19 @@ cssPrefix: pf-v6-c-nav
537
633
  <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
538
634
  <ul class="pf-v6-c-nav__list" role="list">
539
635
  <li class="pf-v6-c-nav__item">
540
- <a
541
- href="#"
542
- class="pf-v6-c-nav__link pf-m-current"
543
- aria-current="page"
544
- >Item 1</a>
636
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
637
+ <span class="pf-v6-c-nav__link-text">Item 1</span>
638
+ </a>
545
639
  </li>
546
640
  <li class="pf-v6-c-nav__item">
547
- <a href="#" class="pf-v6-c-nav__link">Item 2</a>
641
+ <a href="#" class="pf-v6-c-nav__link">
642
+ <span class="pf-v6-c-nav__link-text">Item 2</span>
643
+ </a>
548
644
  </li>
549
645
  <li class="pf-v6-c-nav__item">
550
- <a href="#" class="pf-v6-c-nav__link">Item 3</a>
646
+ <a href="#" class="pf-v6-c-nav__link">
647
+ <span class="pf-v6-c-nav__link-text">Item 3</span>
648
+ </a>
551
649
  </li>
552
650
  </ul>
553
651
  </nav>
@@ -568,28 +666,36 @@ cssPrefix: pf-v6-c-nav
568
666
  aria-label="Scroll start"
569
667
  disabled
570
668
  >
571
- <i class="fas fa-angle-left" aria-hidden="true"></i>
669
+ <span class="pf-v6-c-button__icon">
670
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
671
+ </span>
572
672
  </button>
573
673
  </div>
574
674
  <ul class="pf-v6-c-nav__list" role="list">
575
675
  <li class="pf-v6-c-nav__item">
576
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
676
+ <a href="#" class="pf-v6-c-nav__link">
677
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
678
+ </a>
577
679
  </li>
578
680
  <li class="pf-v6-c-nav__item">
579
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
681
+ <a href="#" class="pf-v6-c-nav__link">
682
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
683
+ </a>
580
684
  </li>
581
685
  <li class="pf-v6-c-nav__item">
582
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
686
+ <a href="#" class="pf-v6-c-nav__link">
687
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
688
+ </a>
583
689
  </li>
584
690
  <li class="pf-v6-c-nav__item">
585
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
691
+ <a href="#" class="pf-v6-c-nav__link">
692
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
693
+ </a>
586
694
  </li>
587
695
  <li class="pf-v6-c-nav__item">
588
- <a
589
- href="#"
590
- class="pf-v6-c-nav__link pf-m-current"
591
- aria-current="page"
592
- >Horizontal nav item 5</a>
696
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
697
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
698
+ </a>
593
699
  </li>
594
700
  </ul>
595
701
  <div class="pf-v6-c-nav__scroll-button">
@@ -598,7 +704,9 @@ cssPrefix: pf-v6-c-nav
598
704
  type="button"
599
705
  aria-label="Scroll end"
600
706
  >
601
- <i class="fas fa-angle-right" aria-hidden="true"></i>
707
+ <span class="pf-v6-c-button__icon">
708
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
709
+ </span>
602
710
  </button>
603
711
  </div>
604
712
  </nav>
@@ -607,17 +715,23 @@ cssPrefix: pf-v6-c-nav
607
715
 
608
716
  ### Nav with flyout
609
717
 
610
- ```html isBeta
718
+ ```html
611
719
  <nav class="pf-v6-c-nav" aria-label="Global">
612
720
  <ul class="pf-v6-c-nav__list" role="list">
613
721
  <li class="pf-v6-c-nav__item">
614
- <a href="#" class="pf-v6-c-nav__link">Clusters</a>
722
+ <a href="#" class="pf-v6-c-nav__link">
723
+ <span class="pf-v6-c-nav__link-text">Clusters</span>
724
+ </a>
615
725
  </li>
616
726
  <li class="pf-v6-c-nav__item">
617
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
727
+ <a href="#" class="pf-v6-c-nav__link">
728
+ <span class="pf-v6-c-nav__link-text">Overview</span>
729
+ </a>
618
730
  </li>
619
731
  <li class="pf-v6-c-nav__item">
620
- <a href="#" class="pf-v6-c-nav__link">Releases</a>
732
+ <a href="#" class="pf-v6-c-nav__link">
733
+ <span class="pf-v6-c-nav__link-text">Releases</span>
734
+ </a>
621
735
  </li>
622
736
  <li class="pf-v6-c-nav__item pf-m-flyout">
623
737
  <a
@@ -627,7 +741,7 @@ cssPrefix: pf-v6-c-nav
627
741
  aria-haspopup="true"
628
742
  aria-expanded="true"
629
743
  >
630
- Subscriptions
744
+ <span class="pf-v6-c-nav__link-text">Subscriptions</span>
631
745
  <span class="pf-v6-c-nav__toggle">
632
746
  <span class="pf-v6-c-nav__toggle-icon">
633
747
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -636,82 +750,92 @@ cssPrefix: pf-v6-c-nav
636
750
  </a>
637
751
  </li>
638
752
  <li class="pf-v6-c-nav__item">
639
- <a href="#" class="pf-v6-c-nav__link">Support cases</a>
753
+ <a href="#" class="pf-v6-c-nav__link">
754
+ <span class="pf-v6-c-nav__link-text">Support cases</span>
755
+ </a>
640
756
  </li>
641
757
  <li class="pf-v6-c-nav__item">
642
- <a href="#" class="pf-v6-c-nav__link">Cluster manager feedback</a>
758
+ <a href="#" class="pf-v6-c-nav__link">
759
+ <span class="pf-v6-c-nav__link-text">Cluster manager feedback</span>
760
+ </a>
643
761
  </li>
644
762
  <li class="pf-v6-c-nav__item">
645
- <a href="#" class="pf-v6-c-nav__link">Red Hat Marketplace</a>
763
+ <a href="#" class="pf-v6-c-nav__link">
764
+ <span class="pf-v6-c-nav__link-text">Red Hat Marketplace</span>
765
+ </a>
646
766
  </li>
647
767
  <li class="pf-v6-c-nav__item">
648
- <a href="#" class="pf-v6-c-nav__link">Documentation</a>
768
+ <a href="#" class="pf-v6-c-nav__link">
769
+ <span class="pf-v6-c-nav__link-text">Documentation</span>
770
+ </a>
649
771
  </li>
650
772
  </ul>
651
- </nav>
652
- <div class="pf-v6-c-menu pf-m-flyout pf-m-nav">
653
- <div class="pf-v6-c-menu__content">
654
- <ul class="pf-v6-c-menu__list" role="menu">
655
- <li class="pf-v6-c-menu__list-item" role="none">
656
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
657
- <span class="pf-v6-c-menu__item-main">
658
- <span class="pf-v6-c-menu__item-text">Container platform</span>
659
- </span>
660
- </a>
661
- </li>
662
- <li class="pf-v6-c-menu__list-item" role="none">
663
- <button
664
- class="pf-v6-c-menu__item"
665
- type="button"
666
- role="menuitem"
667
- aria-expanded="true"
668
- >
669
- <span class="pf-v6-c-menu__item-main">
670
- <span class="pf-v6-c-menu__item-text">Dedicated</span>
671
- <span class="pf-v6-c-menu__item-toggle-icon">
672
- <i class="fas fa-angle-right"></i>
773
+ <div class="pf-v6-c-menu pf-m-flyout pf-m-nav">
774
+ <div class="pf-v6-c-menu__content">
775
+ <ul class="pf-v6-c-menu__list" role="menu">
776
+ <li class="pf-v6-c-menu__list-item" role="none">
777
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
778
+ <span class="pf-v6-c-menu__item-main">
779
+ <span class="pf-v6-c-menu__item-text">Container platform</span>
673
780
  </span>
674
- </span>
675
- </button>
676
- <div class="pf-v6-c-menu">
677
- <div class="pf-v6-c-menu__content">
678
- <ul class="pf-v6-c-menu__list" role="menu">
679
- <li class="pf-v6-c-menu__list-item" role="none">
680
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
681
- <span class="pf-v6-c-menu__item-main">
682
- <span class="pf-v6-c-menu__item-text">Dedicated (Annual)</span>
683
- </span>
684
- </a>
685
- </li>
686
- <li class="pf-v6-c-menu__list-item" role="none">
687
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
688
- <span class="pf-v6-c-menu__item-main">
689
- <span class="pf-v6-c-menu__item-text">Dedicated (On-Demand)</span>
690
- </span>
691
- </a>
692
- </li>
693
- <li class="pf-v6-c-menu__list-item" role="none">
694
- <a class="pf-v6-c-menu__item" href="#" role="menuitem">
695
- <span class="pf-v6-c-menu__item-main">
696
- <span
697
- class="pf-v6-c-menu__item-text"
698
- >Dedicated (On-Demand limits)</span>
699
- </span>
700
- </a>
701
- </li>
702
- </ul>
781
+ </a>
782
+ </li>
783
+ <li class="pf-v6-c-menu__list-item" role="none">
784
+ <button
785
+ class="pf-v6-c-menu__item"
786
+ type="button"
787
+ role="menuitem"
788
+ aria-expanded="true"
789
+ >
790
+ <span class="pf-v6-c-menu__item-main">
791
+ <span class="pf-v6-c-menu__item-text">Dedicated</span>
792
+ <span class="pf-v6-c-menu__item-toggle-icon">
793
+ <i class="fas fa-angle-right"></i>
794
+ </span>
795
+ </span>
796
+ </button>
797
+ <div class="pf-v6-c-menu">
798
+ <div class="pf-v6-c-menu__content">
799
+ <ul class="pf-v6-c-menu__list" role="menu">
800
+ <li class="pf-v6-c-menu__list-item" role="none">
801
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
802
+ <span class="pf-v6-c-menu__item-main">
803
+ <span class="pf-v6-c-menu__item-text">Dedicated (Annual)</span>
804
+ </span>
805
+ </a>
806
+ </li>
807
+ <li class="pf-v6-c-menu__list-item" role="none">
808
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
809
+ <span class="pf-v6-c-menu__item-main">
810
+ <span
811
+ class="pf-v6-c-menu__item-text"
812
+ >Dedicated (On-Demand)</span>
813
+ </span>
814
+ </a>
815
+ </li>
816
+ <li class="pf-v6-c-menu__list-item" role="none">
817
+ <a class="pf-v6-c-menu__item" href="#" role="menuitem">
818
+ <span class="pf-v6-c-menu__item-main">
819
+ <span
820
+ class="pf-v6-c-menu__item-text"
821
+ >Dedicated (On-Demand limits)</span>
822
+ </span>
823
+ </a>
824
+ </li>
825
+ </ul>
826
+ </div>
703
827
  </div>
704
- </div>
705
- </li>
706
- </ul>
828
+ </li>
829
+ </ul>
830
+ </div>
707
831
  </div>
708
- </div>
832
+ </nav>
709
833
 
710
834
  ```
711
835
 
712
836
  ### Nav with drilldown menu
713
837
 
714
- ```html isBeta
838
+ ```html
715
839
  <nav class="pf-v6-c-nav" aria-label="Drilldown menu example">
716
840
  <div class="pf-v6-c-menu pf-m-drilldown">
717
841
  <div class="pf-v6-c-menu__content">
@@ -1240,7 +1364,7 @@ cssPrefix: pf-v6-c-nav
1240
1364
 
1241
1365
  ### Nav with drilldown menu level two
1242
1366
 
1243
- ```html isBeta
1367
+ ```html
1244
1368
  <nav class="pf-v6-c-nav" aria-label="Drilldown menu example">
1245
1369
  <div class="pf-v6-c-menu pf-m-drilldown pf-m-drilled-in">
1246
1370
  <div
@@ -1772,7 +1896,7 @@ cssPrefix: pf-v6-c-nav
1772
1896
 
1773
1897
  ### Nav with drilldown menu level three
1774
1898
 
1775
- ```html isBeta
1899
+ ```html
1776
1900
  <nav class="pf-v6-c-nav" aria-label="Drilldown menu example">
1777
1901
  <div class="pf-v6-c-menu pf-m-drilldown pf-m-drilled-in">
1778
1902
  <div
@@ -2305,98 +2429,42 @@ cssPrefix: pf-v6-c-nav
2305
2429
 
2306
2430
  ```
2307
2431
 
2308
- ### Nav link text
2309
-
2310
- When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v6-c-nav__link-text`.
2432
+ ### Nav item icons
2311
2433
 
2312
- ```html isBeta
2434
+ ```html
2313
2435
  <nav class="pf-v6-c-nav" aria-label="Global">
2314
2436
  <ul class="pf-v6-c-nav__list" role="list">
2315
2437
  <li class="pf-v6-c-nav__item">
2316
2438
  <a href="#" class="pf-v6-c-nav__link">
2317
- <span class="pf-v6-c-nav__link-text">
2318
- Link 1
2319
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
2439
+ <span class="pf-v6-c-nav__link-icon">
2440
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
2320
2441
  </span>
2442
+ <span class="pf-v6-c-nav__link-text">Link 1</span>
2321
2443
  </a>
2322
2444
  </li>
2323
- <li class="pf-v6-c-nav__item pf-m-expandable pf-m-expanded">
2324
- <button
2325
- class="pf-v6-c-nav__link"
2326
- aria-expanded="true"
2327
- id="nav-link-text-link2"
2328
- >
2329
- <span class="pf-v6-c-nav__link-text">
2330
- Link 2
2331
- <small>(small text)</small>
2332
- </span>
2333
- <span class="pf-v6-c-nav__toggle">
2334
- <span class="pf-v6-c-nav__toggle-icon">
2335
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2336
- </span>
2445
+ <li class="pf-v6-c-nav__item">
2446
+ <a href="#" class="pf-v6-c-nav__link pf-m-current" aria-current="page">
2447
+ <span class="pf-v6-c-nav__link-icon">
2448
+ <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
2337
2449
  </span>
2338
- </button>
2339
- <section
2340
- class="pf-v6-c-nav__subnav"
2341
- aria-labelledby="nav-link-text-link2"
2342
- >
2343
- <ul class="pf-v6-c-nav__list" role="list">
2344
- <li class="pf-v6-c-nav__item">
2345
- <a href="#" class="pf-v6-c-nav__link">
2346
- <span class="pf-v6-c-nav__link-text">
2347
- <i class="fas fa-user" aria-hidden="true"></i>
2348
- Subnav link 1
2349
- </span>
2350
- </a>
2351
- </li>
2352
- <li class="pf-v6-c-nav__item">
2353
- <a href="#" class="pf-v6-c-nav__link">
2354
- <span class="pf-v6-c-nav__link-text">
2355
- <i class="fas fa-user" aria-hidden="true"></i>
2356
- Subnav link 2
2357
- </span>
2358
- </a>
2359
- </li>
2360
- </ul>
2361
- </section>
2450
+ <span class="pf-v6-c-nav__link-text">Current link</span>
2451
+ </a>
2362
2452
  </li>
2363
- <li class="pf-v6-c-nav__item pf-m-expandable">
2364
- <button
2365
- class="pf-v6-c-nav__link"
2366
- aria-expanded="false"
2367
- id="nav-link-text-link4"
2368
- >
2369
- <span class="pf-v6-c-nav__link-text">
2370
- Link 3
2371
- <strong>(strong text)</strong>
2453
+ <li class="pf-v6-c-nav__item">
2454
+ <a href="#" class="pf-v6-c-nav__link">
2455
+ <span class="pf-v6-c-nav__link-icon">
2456
+ <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
2372
2457
  </span>
2373
- <span class="pf-v6-c-nav__toggle">
2374
- <span class="pf-v6-c-nav__toggle-icon">
2375
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2376
- </span>
2458
+ <span class="pf-v6-c-nav__link-text">Link 3</span>
2459
+ </a>
2460
+ </li>
2461
+ <li class="pf-v6-c-nav__item">
2462
+ <a href="#" class="pf-v6-c-nav__link">
2463
+ <span class="pf-v6-c-nav__link-icon">
2464
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
2377
2465
  </span>
2378
- </button>
2379
- <section
2380
- class="pf-v6-c-nav__subnav"
2381
- aria-labelledby="nav-link-text-link4"
2382
- hidden
2383
- >
2384
- <ul class="pf-v6-c-nav__list" role="list">
2385
- <li class="pf-v6-c-nav__item">
2386
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
2387
- </li>
2388
- <li class="pf-v6-c-nav__item">
2389
- <a
2390
- href="#"
2391
- class="pf-v6-c-nav__link pf-m-current"
2392
- aria-current="page"
2393
- >Subnav link 2</a>
2394
- </li>
2395
- <li class="pf-v6-c-nav__item">
2396
- <a href="#" class="pf-v6-c-nav__link">Subnav link 3</a>
2397
- </li>
2398
- </ul>
2399
- </section>
2466
+ <span class="pf-v6-c-nav__link-text">Link 4</span>
2467
+ </a>
2400
2468
  </li>
2401
2469
  </ul>
2402
2470
  </nav>
@@ -2434,6 +2502,7 @@ The navigation system relies on several different sub-components:
2434
2502
  | `.pf-v6-c-nav__list` | `<ul>` | Initiates nav list. |
2435
2503
  | `.pf-v6-c-nav__item` | `<li>` | Initiates nav list item. |
2436
2504
  | `.pf-v6-c-nav__link` | `<a>` | Initiates nav list link. |
2505
+ | `.pf-v6-c-nav__link-icon` | `<span>` | Initiates nav list link icon. |
2437
2506
  | `.pf-v6-c-nav__link-text` | `<span>` | Initiates nav list link text. |
2438
2507
  | `.pf-v6-c-nav__section` | `<section>` | Initiates a nav section element. |
2439
2508
  | `.pf-v6-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
@@ -2442,10 +2511,8 @@ The navigation system relies on several different sub-components:
2442
2511
  | `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
2443
2512
  | `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
2444
2513
  | `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
2445
- | `.pf-m-full-width` | `.pf-v6-c-nav` | Modifies nav for to full width of parent. |
2446
2514
  | `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
2447
2515
  | `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
2448
- | `.pf-m-expandable` | `.pf-v6-c-nav__item` | Modifies for the expandable state. |
2449
2516
  | `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |
2450
2517
  | `.pf-m-current` | `.pf-v6-c-nav__link` | Modifies for the current state. |
2451
2518
  | `.pf-m-hover` | `.pf-v6-c-nav__link` | Modifies for the hover state. |