@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +5 -5
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/components/JumpLinks/examples/JumpLinks.md CHANGED
@@ -7,26 +7,26 @@ cssPrefix: pf-v5-c-jump-links
7
7
  ### Horizontal default
8
8
 
9
9
  ```html
10
- <nav class="pf-v5-c-jump-links">
11
- <ul class="pf-v5-c-jump-links__list" role="list">
12
- <li class="pf-v5-c-jump-links__item">
13
- <span class="pf-v5-c-jump-links__link">
14
- <a class="pf-v5-c-button pf-m-link" href="#">
15
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
10
+ <nav class="pf-v6-c-jump-links">
11
+ <ul class="pf-v6-c-jump-links__list" role="list">
12
+ <li class="pf-v6-c-jump-links__item">
13
+ <span class="pf-v6-c-jump-links__link">
14
+ <a class="pf-v6-c-button pf-m-link" href="#">
15
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
16
16
  </a>
17
17
  </span>
18
18
  </li>
19
- <li class="pf-v5-c-jump-links__item pf-m-current">
20
- <span class="pf-v5-c-jump-links__link">
21
- <a class="pf-v5-c-button pf-m-link" href="#">
22
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
19
+ <li class="pf-v6-c-jump-links__item pf-m-current">
20
+ <span class="pf-v6-c-jump-links__link">
21
+ <a class="pf-v6-c-button pf-m-link" href="#">
22
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
23
23
  </a>
24
24
  </span>
25
25
  </li>
26
- <li class="pf-v5-c-jump-links__item">
27
- <span class="pf-v5-c-jump-links__link">
28
- <a class="pf-v5-c-button pf-m-link" href="#">
29
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
26
+ <li class="pf-v6-c-jump-links__item">
27
+ <span class="pf-v6-c-jump-links__link">
28
+ <a class="pf-v6-c-button pf-m-link" href="#">
29
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
30
30
  </a>
31
31
  </span>
32
32
  </li>
@@ -38,26 +38,26 @@ cssPrefix: pf-v5-c-jump-links
38
38
  ### Horizontal with centered list
39
39
 
40
40
  ```html
41
- <nav class="pf-v5-c-jump-links pf-m-center">
42
- <ul class="pf-v5-c-jump-links__list" role="list">
43
- <li class="pf-v5-c-jump-links__item">
44
- <span class="pf-v5-c-jump-links__link">
45
- <a class="pf-v5-c-button pf-m-link" href="#">
46
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
41
+ <nav class="pf-v6-c-jump-links pf-m-center">
42
+ <ul class="pf-v6-c-jump-links__list" role="list">
43
+ <li class="pf-v6-c-jump-links__item">
44
+ <span class="pf-v6-c-jump-links__link">
45
+ <a class="pf-v6-c-button pf-m-link" href="#">
46
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
47
47
  </a>
48
48
  </span>
49
49
  </li>
50
- <li class="pf-v5-c-jump-links__item pf-m-current">
51
- <span class="pf-v5-c-jump-links__link">
52
- <a class="pf-v5-c-button pf-m-link" href="#">
53
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
50
+ <li class="pf-v6-c-jump-links__item pf-m-current">
51
+ <span class="pf-v6-c-jump-links__link">
52
+ <a class="pf-v6-c-button pf-m-link" href="#">
53
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
54
54
  </a>
55
55
  </span>
56
56
  </li>
57
- <li class="pf-v5-c-jump-links__item">
58
- <span class="pf-v5-c-jump-links__link">
59
- <a class="pf-v5-c-button pf-m-link" href="#">
60
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
57
+ <li class="pf-v6-c-jump-links__item">
58
+ <span class="pf-v6-c-jump-links__link">
59
+ <a class="pf-v6-c-button pf-m-link" href="#">
60
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
61
61
  </a>
62
62
  </span>
63
63
  </li>
@@ -69,30 +69,30 @@ cssPrefix: pf-v5-c-jump-links
69
69
  ### Horizontal with label
70
70
 
71
71
  ```html
72
- <nav class="pf-v5-c-jump-links" aria-label="Jump to section">
73
- <div class="pf-v5-c-jump-links__main">
74
- <div class="pf-v5-c-jump-links__header">
75
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
72
+ <nav class="pf-v6-c-jump-links" aria-label="Jump to section">
73
+ <div class="pf-v6-c-jump-links__main">
74
+ <div class="pf-v6-c-jump-links__header">
75
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
76
76
  </div>
77
- <ul class="pf-v5-c-jump-links__list" role="list">
78
- <li class="pf-v5-c-jump-links__item">
79
- <span class="pf-v5-c-jump-links__link">
80
- <a class="pf-v5-c-button pf-m-link" href="#">
81
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
77
+ <ul class="pf-v6-c-jump-links__list" role="list">
78
+ <li class="pf-v6-c-jump-links__item">
79
+ <span class="pf-v6-c-jump-links__link">
80
+ <a class="pf-v6-c-button pf-m-link" href="#">
81
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
82
82
  </a>
83
83
  </span>
84
84
  </li>
85
- <li class="pf-v5-c-jump-links__item pf-m-current">
86
- <span class="pf-v5-c-jump-links__link">
87
- <a class="pf-v5-c-button pf-m-link" href="#">
88
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
85
+ <li class="pf-v6-c-jump-links__item pf-m-current">
86
+ <span class="pf-v6-c-jump-links__link">
87
+ <a class="pf-v6-c-button pf-m-link" href="#">
88
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
89
89
  </a>
90
90
  </span>
91
91
  </li>
92
- <li class="pf-v5-c-jump-links__item">
93
- <span class="pf-v5-c-jump-links__link">
94
- <a class="pf-v5-c-button pf-m-link" href="#">
95
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
92
+ <li class="pf-v6-c-jump-links__item">
93
+ <span class="pf-v6-c-jump-links__link">
94
+ <a class="pf-v6-c-button pf-m-link" href="#">
95
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
96
96
  </a>
97
97
  </span>
98
98
  </li>
@@ -100,30 +100,30 @@ cssPrefix: pf-v5-c-jump-links
100
100
  </div>
101
101
  </nav>
102
102
  <br />
103
- <nav class="pf-v5-c-jump-links pf-m-center" aria-label="Jump to section">
104
- <div class="pf-v5-c-jump-links__main">
105
- <div class="pf-v5-c-jump-links__header">
106
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
103
+ <nav class="pf-v6-c-jump-links pf-m-center" aria-label="Jump to section">
104
+ <div class="pf-v6-c-jump-links__main">
105
+ <div class="pf-v6-c-jump-links__header">
106
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
107
107
  </div>
108
- <ul class="pf-v5-c-jump-links__list" role="list">
109
- <li class="pf-v5-c-jump-links__item">
110
- <span class="pf-v5-c-jump-links__link">
111
- <a class="pf-v5-c-button pf-m-link" href="#">
112
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
108
+ <ul class="pf-v6-c-jump-links__list" role="list">
109
+ <li class="pf-v6-c-jump-links__item">
110
+ <span class="pf-v6-c-jump-links__link">
111
+ <a class="pf-v6-c-button pf-m-link" href="#">
112
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
113
113
  </a>
114
114
  </span>
115
115
  </li>
116
- <li class="pf-v5-c-jump-links__item pf-m-current">
117
- <span class="pf-v5-c-jump-links__link">
118
- <a class="pf-v5-c-button pf-m-link" href="#">
119
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
116
+ <li class="pf-v6-c-jump-links__item pf-m-current">
117
+ <span class="pf-v6-c-jump-links__link">
118
+ <a class="pf-v6-c-button pf-m-link" href="#">
119
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
120
120
  </a>
121
121
  </span>
122
122
  </li>
123
- <li class="pf-v5-c-jump-links__item">
124
- <span class="pf-v5-c-jump-links__link">
125
- <a class="pf-v5-c-button pf-m-link" href="#">
126
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
123
+ <li class="pf-v6-c-jump-links__item">
124
+ <span class="pf-v6-c-jump-links__link">
125
+ <a class="pf-v6-c-button pf-m-link" href="#">
126
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
127
127
  </a>
128
128
  </span>
129
129
  </li>
@@ -136,40 +136,40 @@ cssPrefix: pf-v5-c-jump-links
136
136
  ### Vertical default
137
137
 
138
138
  ```html
139
- <nav class="pf-v5-c-jump-links pf-m-vertical">
140
- <ul class="pf-v5-c-jump-links__list" role="list">
141
- <li class="pf-v5-c-jump-links__item">
142
- <span class="pf-v5-c-jump-links__link">
143
- <a class="pf-v5-c-button pf-m-link" href="#">
144
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
139
+ <nav class="pf-v6-c-jump-links pf-m-vertical">
140
+ <ul class="pf-v6-c-jump-links__list" role="list">
141
+ <li class="pf-v6-c-jump-links__item">
142
+ <span class="pf-v6-c-jump-links__link">
143
+ <a class="pf-v6-c-button pf-m-link" href="#">
144
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
145
145
  </a>
146
146
  </span>
147
147
  </li>
148
- <li class="pf-v5-c-jump-links__item pf-m-current">
149
- <span class="pf-v5-c-jump-links__link">
150
- <a class="pf-v5-c-button pf-m-link" href="#">
151
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
148
+ <li class="pf-v6-c-jump-links__item pf-m-current">
149
+ <span class="pf-v6-c-jump-links__link">
150
+ <a class="pf-v6-c-button pf-m-link" href="#">
151
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
152
152
  </a>
153
153
  </span>
154
154
  </li>
155
- <li class="pf-v5-c-jump-links__item">
156
- <span class="pf-v5-c-jump-links__link">
157
- <a class="pf-v5-c-button pf-m-link" href="#">
158
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
155
+ <li class="pf-v6-c-jump-links__item">
156
+ <span class="pf-v6-c-jump-links__link">
157
+ <a class="pf-v6-c-button pf-m-link" href="#">
158
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
159
159
  </a>
160
160
  </span>
161
161
  </li>
162
- <li class="pf-v5-c-jump-links__item">
163
- <span class="pf-v5-c-jump-links__link">
164
- <a class="pf-v5-c-button pf-m-link" href="#">
165
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
162
+ <li class="pf-v6-c-jump-links__item">
163
+ <span class="pf-v6-c-jump-links__link">
164
+ <a class="pf-v6-c-button pf-m-link" href="#">
165
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
166
166
  </a>
167
167
  </span>
168
168
  </li>
169
- <li class="pf-v5-c-jump-links__item">
170
- <span class="pf-v5-c-jump-links__link">
171
- <a class="pf-v5-c-button pf-m-link" href="#">
172
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
169
+ <li class="pf-v6-c-jump-links__item">
170
+ <span class="pf-v6-c-jump-links__link">
171
+ <a class="pf-v6-c-button pf-m-link" href="#">
172
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
173
173
  </a>
174
174
  </span>
175
175
  </li>
@@ -181,43 +181,43 @@ cssPrefix: pf-v5-c-jump-links
181
181
  ### Vertical with label
182
182
 
183
183
  ```html
184
- <nav class="pf-v5-c-jump-links pf-m-vertical" aria-label="Jump to section">
185
- <div class="pf-v5-c-jump-links__header">
186
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
184
+ <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
185
+ <div class="pf-v6-c-jump-links__header">
186
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
187
187
  </div>
188
- <ul class="pf-v5-c-jump-links__list" role="list">
189
- <li class="pf-v5-c-jump-links__item">
190
- <span class="pf-v5-c-jump-links__link">
191
- <a class="pf-v5-c-button pf-m-link" href="#">
192
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
188
+ <ul class="pf-v6-c-jump-links__list" role="list">
189
+ <li class="pf-v6-c-jump-links__item">
190
+ <span class="pf-v6-c-jump-links__link">
191
+ <a class="pf-v6-c-button pf-m-link" href="#">
192
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
193
193
  </a>
194
194
  </span>
195
195
  </li>
196
- <li class="pf-v5-c-jump-links__item pf-m-current">
197
- <span class="pf-v5-c-jump-links__link">
198
- <a class="pf-v5-c-button pf-m-link" href="#">
199
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
196
+ <li class="pf-v6-c-jump-links__item pf-m-current">
197
+ <span class="pf-v6-c-jump-links__link">
198
+ <a class="pf-v6-c-button pf-m-link" href="#">
199
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
200
200
  </a>
201
201
  </span>
202
202
  </li>
203
- <li class="pf-v5-c-jump-links__item">
204
- <span class="pf-v5-c-jump-links__link">
205
- <a class="pf-v5-c-button pf-m-link" href="#">
206
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
203
+ <li class="pf-v6-c-jump-links__item">
204
+ <span class="pf-v6-c-jump-links__link">
205
+ <a class="pf-v6-c-button pf-m-link" href="#">
206
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
207
207
  </a>
208
208
  </span>
209
209
  </li>
210
- <li class="pf-v5-c-jump-links__item">
211
- <span class="pf-v5-c-jump-links__link">
212
- <a class="pf-v5-c-button pf-m-link" href="#">
213
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
210
+ <li class="pf-v6-c-jump-links__item">
211
+ <span class="pf-v6-c-jump-links__link">
212
+ <a class="pf-v6-c-button pf-m-link" href="#">
213
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
214
214
  </a>
215
215
  </span>
216
216
  </li>
217
- <li class="pf-v5-c-jump-links__item">
218
- <span class="pf-v5-c-jump-links__link">
219
- <a class="pf-v5-c-button pf-m-link" href="#">
220
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
217
+ <li class="pf-v6-c-jump-links__item">
218
+ <span class="pf-v6-c-jump-links__link">
219
+ <a class="pf-v6-c-button pf-m-link" href="#">
220
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
221
221
  </a>
222
222
  </span>
223
223
  </li>
@@ -229,59 +229,59 @@ cssPrefix: pf-v5-c-jump-links
229
229
  ### Vertical with inactive subsections
230
230
 
231
231
  ```html
232
- <nav class="pf-v5-c-jump-links pf-m-vertical" aria-label="Jump to section">
233
- <div class="pf-v5-c-jump-links__header">
234
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
232
+ <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
233
+ <div class="pf-v6-c-jump-links__header">
234
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
235
235
  </div>
236
- <ul class="pf-v5-c-jump-links__list" role="list">
237
- <li class="pf-v5-c-jump-links__item pf-m-current">
238
- <span class="pf-v5-c-jump-links__link">
239
- <a class="pf-v5-c-button pf-m-link" href="#">
240
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
236
+ <ul class="pf-v6-c-jump-links__list" role="list">
237
+ <li class="pf-v6-c-jump-links__item pf-m-current">
238
+ <span class="pf-v6-c-jump-links__link">
239
+ <a class="pf-v6-c-button pf-m-link" href="#">
240
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
241
241
  </a>
242
242
  </span>
243
243
  </li>
244
- <li class="pf-v5-c-jump-links__item">
245
- <span class="pf-v5-c-jump-links__link">
246
- <a class="pf-v5-c-button pf-m-link" href="#">
247
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
244
+ <li class="pf-v6-c-jump-links__item">
245
+ <span class="pf-v6-c-jump-links__link">
246
+ <a class="pf-v6-c-button pf-m-link" href="#">
247
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
248
248
  </a>
249
249
  </span>
250
250
  </li>
251
- <li class="pf-v5-c-jump-links__item">
252
- <span class="pf-v5-c-jump-links__link">
253
- <a class="pf-v5-c-button pf-m-link" href="#">
254
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
251
+ <li class="pf-v6-c-jump-links__item">
252
+ <span class="pf-v6-c-jump-links__link">
253
+ <a class="pf-v6-c-button pf-m-link" href="#">
254
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
255
255
  </a>
256
256
  </span>
257
- <ul class="pf-v5-c-jump-links__list" role="list">
258
- <li class="pf-v5-c-jump-links__item">
259
- <span class="pf-v5-c-jump-links__link">
260
- <a class="pf-v5-c-button pf-m-link" href="#">
261
- <span class="pf-v5-c-jump-links__link-text">Inactive subsection</span>
257
+ <ul class="pf-v6-c-jump-links__list" role="list">
258
+ <li class="pf-v6-c-jump-links__item">
259
+ <span class="pf-v6-c-jump-links__link">
260
+ <a class="pf-v6-c-button pf-m-link" href="#">
261
+ <span class="pf-v6-c-jump-links__link-text">Inactive subsection</span>
262
262
  </a>
263
263
  </span>
264
264
  </li>
265
- <li class="pf-v5-c-jump-links__item">
266
- <span class="pf-v5-c-jump-links__link">
267
- <a class="pf-v5-c-button pf-m-link" href="#">
268
- <span class="pf-v5-c-jump-links__link-text">Inactive subsection</span>
265
+ <li class="pf-v6-c-jump-links__item">
266
+ <span class="pf-v6-c-jump-links__link">
267
+ <a class="pf-v6-c-button pf-m-link" href="#">
268
+ <span class="pf-v6-c-jump-links__link-text">Inactive subsection</span>
269
269
  </a>
270
270
  </span>
271
271
  </li>
272
272
  </ul>
273
273
  </li>
274
- <li class="pf-v5-c-jump-links__item">
275
- <span class="pf-v5-c-jump-links__link">
276
- <a class="pf-v5-c-button pf-m-link" href="#">
277
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
274
+ <li class="pf-v6-c-jump-links__item">
275
+ <span class="pf-v6-c-jump-links__link">
276
+ <a class="pf-v6-c-button pf-m-link" href="#">
277
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
278
278
  </a>
279
279
  </span>
280
280
  </li>
281
- <li class="pf-v5-c-jump-links__item">
282
- <span class="pf-v5-c-jump-links__link">
283
- <a class="pf-v5-c-button pf-m-link" href="#">
284
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
281
+ <li class="pf-v6-c-jump-links__item">
282
+ <span class="pf-v6-c-jump-links__link">
283
+ <a class="pf-v6-c-button pf-m-link" href="#">
284
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
285
285
  </a>
286
286
  </span>
287
287
  </li>
@@ -293,59 +293,59 @@ cssPrefix: pf-v5-c-jump-links
293
293
  ### Vertical with active subsections
294
294
 
295
295
  ```html
296
- <nav class="pf-v5-c-jump-links pf-m-vertical" aria-label="Jump to section">
297
- <div class="pf-v5-c-jump-links__header">
298
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
296
+ <nav class="pf-v6-c-jump-links pf-m-vertical" aria-label="Jump to section">
297
+ <div class="pf-v6-c-jump-links__header">
298
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
299
299
  </div>
300
- <ul class="pf-v5-c-jump-links__list" role="list">
301
- <li class="pf-v5-c-jump-links__item">
302
- <span class="pf-v5-c-jump-links__link">
303
- <a class="pf-v5-c-button pf-m-link" href="#">
304
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
300
+ <ul class="pf-v6-c-jump-links__list" role="list">
301
+ <li class="pf-v6-c-jump-links__item">
302
+ <span class="pf-v6-c-jump-links__link">
303
+ <a class="pf-v6-c-button pf-m-link" href="#">
304
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
305
305
  </a>
306
306
  </span>
307
307
  </li>
308
- <li class="pf-v5-c-jump-links__item">
309
- <span class="pf-v5-c-jump-links__link">
310
- <a class="pf-v5-c-button pf-m-link" href="#">
311
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
308
+ <li class="pf-v6-c-jump-links__item">
309
+ <span class="pf-v6-c-jump-links__link">
310
+ <a class="pf-v6-c-button pf-m-link" href="#">
311
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
312
312
  </a>
313
313
  </span>
314
314
  </li>
315
- <li class="pf-v5-c-jump-links__item">
316
- <span class="pf-v5-c-jump-links__link">
317
- <a class="pf-v5-c-button pf-m-link" href="#">
318
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
315
+ <li class="pf-v6-c-jump-links__item">
316
+ <span class="pf-v6-c-jump-links__link">
317
+ <a class="pf-v6-c-button pf-m-link" href="#">
318
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
319
319
  </a>
320
320
  </span>
321
- <ul class="pf-v5-c-jump-links__list" role="list">
322
- <li class="pf-v5-c-jump-links__item pf-m-current">
323
- <span class="pf-v5-c-jump-links__link">
324
- <a class="pf-v5-c-button pf-m-link" href="#">
325
- <span class="pf-v5-c-jump-links__link-text">Active subsection</span>
321
+ <ul class="pf-v6-c-jump-links__list" role="list">
322
+ <li class="pf-v6-c-jump-links__item pf-m-current">
323
+ <span class="pf-v6-c-jump-links__link">
324
+ <a class="pf-v6-c-button pf-m-link" href="#">
325
+ <span class="pf-v6-c-jump-links__link-text">Active subsection</span>
326
326
  </a>
327
327
  </span>
328
328
  </li>
329
- <li class="pf-v5-c-jump-links__item">
330
- <span class="pf-v5-c-jump-links__link">
331
- <a class="pf-v5-c-button pf-m-link" href="#">
332
- <span class="pf-v5-c-jump-links__link-text">Inactive subsection</span>
329
+ <li class="pf-v6-c-jump-links__item">
330
+ <span class="pf-v6-c-jump-links__link">
331
+ <a class="pf-v6-c-button pf-m-link" href="#">
332
+ <span class="pf-v6-c-jump-links__link-text">Inactive subsection</span>
333
333
  </a>
334
334
  </span>
335
335
  </li>
336
336
  </ul>
337
337
  </li>
338
- <li class="pf-v5-c-jump-links__item">
339
- <span class="pf-v5-c-jump-links__link">
340
- <a class="pf-v5-c-button pf-m-link" href="#">
341
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
338
+ <li class="pf-v6-c-jump-links__item">
339
+ <span class="pf-v6-c-jump-links__link">
340
+ <a class="pf-v6-c-button pf-m-link" href="#">
341
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
342
342
  </a>
343
343
  </span>
344
344
  </li>
345
- <li class="pf-v5-c-jump-links__item">
346
- <span class="pf-v5-c-jump-links__link">
347
- <a class="pf-v5-c-button pf-m-link" href="#">
348
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
345
+ <li class="pf-v6-c-jump-links__item">
346
+ <span class="pf-v6-c-jump-links__link">
347
+ <a class="pf-v6-c-button pf-m-link" href="#">
348
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
349
349
  </a>
350
350
  </span>
351
351
  </li>
@@ -358,58 +358,58 @@ cssPrefix: pf-v5-c-jump-links
358
358
 
359
359
  ```html
360
360
  <nav
361
- class="pf-v5-c-jump-links pf-m-vertical pf-m-expandable"
361
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
362
362
  aria-label="Jump to section"
363
363
  >
364
- <div class="pf-v5-c-jump-links__header">
365
- <div class="pf-v5-c-jump-links__toggle">
364
+ <div class="pf-v6-c-jump-links__header">
365
+ <div class="pf-v6-c-jump-links__toggle">
366
366
  <button
367
- class="pf-v5-c-button pf-m-plain"
367
+ class="pf-v6-c-button pf-m-plain"
368
368
  type="button"
369
369
  aria-label="Toggle jump links"
370
370
  aria-expanded="false"
371
371
  >
372
- <span class="pf-v5-c-jump-links__toggle-icon">
372
+ <span class="pf-v6-c-jump-links__toggle-icon">
373
373
  <i class="fas fa-angle-right" aria-hidden="true"></i>
374
374
  </span>
375
- <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
375
+ <span class="pf-v6-c-jump-links__toggle-text">Jump to section</span>
376
376
  </button>
377
377
  </div>
378
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
378
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
379
379
  </div>
380
- <ul class="pf-v5-c-jump-links__list" role="list">
381
- <li class="pf-v5-c-jump-links__item">
382
- <span class="pf-v5-c-jump-links__link">
383
- <a class="pf-v5-c-button pf-m-link" href="#">
384
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
380
+ <ul class="pf-v6-c-jump-links__list" role="list">
381
+ <li class="pf-v6-c-jump-links__item">
382
+ <span class="pf-v6-c-jump-links__link">
383
+ <a class="pf-v6-c-button pf-m-link" href="#">
384
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
385
385
  </a>
386
386
  </span>
387
387
  </li>
388
- <li class="pf-v5-c-jump-links__item pf-m-current">
389
- <span class="pf-v5-c-jump-links__link">
390
- <a class="pf-v5-c-button pf-m-link" href="#">
391
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
388
+ <li class="pf-v6-c-jump-links__item pf-m-current">
389
+ <span class="pf-v6-c-jump-links__link">
390
+ <a class="pf-v6-c-button pf-m-link" href="#">
391
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
392
392
  </a>
393
393
  </span>
394
394
  </li>
395
- <li class="pf-v5-c-jump-links__item">
396
- <span class="pf-v5-c-jump-links__link">
397
- <a class="pf-v5-c-button pf-m-link" href="#">
398
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
395
+ <li class="pf-v6-c-jump-links__item">
396
+ <span class="pf-v6-c-jump-links__link">
397
+ <a class="pf-v6-c-button pf-m-link" href="#">
398
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
399
399
  </a>
400
400
  </span>
401
401
  </li>
402
- <li class="pf-v5-c-jump-links__item">
403
- <span class="pf-v5-c-jump-links__link">
404
- <a class="pf-v5-c-button pf-m-link" href="#">
405
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
402
+ <li class="pf-v6-c-jump-links__item">
403
+ <span class="pf-v6-c-jump-links__link">
404
+ <a class="pf-v6-c-button pf-m-link" href="#">
405
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
406
406
  </a>
407
407
  </span>
408
408
  </li>
409
- <li class="pf-v5-c-jump-links__item">
410
- <span class="pf-v5-c-jump-links__link">
411
- <a class="pf-v5-c-button pf-m-link" href="#">
412
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
409
+ <li class="pf-v6-c-jump-links__item">
410
+ <span class="pf-v6-c-jump-links__link">
411
+ <a class="pf-v6-c-button pf-m-link" href="#">
412
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
413
413
  </a>
414
414
  </span>
415
415
  </li>
@@ -422,58 +422,58 @@ cssPrefix: pf-v5-c-jump-links
422
422
 
423
423
  ```html
424
424
  <nav
425
- class="pf-v5-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
425
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable pf-m-expanded"
426
426
  aria-label="Jump to section"
427
427
  >
428
- <div class="pf-v5-c-jump-links__header">
429
- <div class="pf-v5-c-jump-links__toggle">
428
+ <div class="pf-v6-c-jump-links__header">
429
+ <div class="pf-v6-c-jump-links__toggle">
430
430
  <button
431
- class="pf-v5-c-button pf-m-plain"
431
+ class="pf-v6-c-button pf-m-plain"
432
432
  type="button"
433
433
  aria-label="Toggle jump links"
434
434
  aria-expanded="true"
435
435
  >
436
- <span class="pf-v5-c-jump-links__toggle-icon">
436
+ <span class="pf-v6-c-jump-links__toggle-icon">
437
437
  <i class="fas fa-angle-right" aria-hidden="true"></i>
438
438
  </span>
439
- <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
439
+ <span class="pf-v6-c-jump-links__toggle-text">Jump to section</span>
440
440
  </button>
441
441
  </div>
442
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
442
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
443
443
  </div>
444
- <ul class="pf-v5-c-jump-links__list" role="list">
445
- <li class="pf-v5-c-jump-links__item">
446
- <span class="pf-v5-c-jump-links__link">
447
- <a class="pf-v5-c-button pf-m-link" href="#">
448
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
444
+ <ul class="pf-v6-c-jump-links__list" role="list">
445
+ <li class="pf-v6-c-jump-links__item">
446
+ <span class="pf-v6-c-jump-links__link">
447
+ <a class="pf-v6-c-button pf-m-link" href="#">
448
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
449
449
  </a>
450
450
  </span>
451
451
  </li>
452
- <li class="pf-v5-c-jump-links__item pf-m-current">
453
- <span class="pf-v5-c-jump-links__link">
454
- <a class="pf-v5-c-button pf-m-link" href="#">
455
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
452
+ <li class="pf-v6-c-jump-links__item pf-m-current">
453
+ <span class="pf-v6-c-jump-links__link">
454
+ <a class="pf-v6-c-button pf-m-link" href="#">
455
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
456
456
  </a>
457
457
  </span>
458
458
  </li>
459
- <li class="pf-v5-c-jump-links__item">
460
- <span class="pf-v5-c-jump-links__link">
461
- <a class="pf-v5-c-button pf-m-link" href="#">
462
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
459
+ <li class="pf-v6-c-jump-links__item">
460
+ <span class="pf-v6-c-jump-links__link">
461
+ <a class="pf-v6-c-button pf-m-link" href="#">
462
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
463
463
  </a>
464
464
  </span>
465
465
  </li>
466
- <li class="pf-v5-c-jump-links__item">
467
- <span class="pf-v5-c-jump-links__link">
468
- <a class="pf-v5-c-button pf-m-link" href="#">
469
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
466
+ <li class="pf-v6-c-jump-links__item">
467
+ <span class="pf-v6-c-jump-links__link">
468
+ <a class="pf-v6-c-button pf-m-link" href="#">
469
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
470
470
  </a>
471
471
  </span>
472
472
  </li>
473
- <li class="pf-v5-c-jump-links__item">
474
- <span class="pf-v5-c-jump-links__link">
475
- <a class="pf-v5-c-button pf-m-link" href="#">
476
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
473
+ <li class="pf-v6-c-jump-links__item">
474
+ <span class="pf-v6-c-jump-links__link">
475
+ <a class="pf-v6-c-button pf-m-link" href="#">
476
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
477
477
  </a>
478
478
  </span>
479
479
  </li>
@@ -486,58 +486,58 @@ cssPrefix: pf-v5-c-jump-links
486
486
 
487
487
  ```html
488
488
  <nav
489
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
489
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
490
490
  aria-label="Jump to section"
491
491
  >
492
- <div class="pf-v5-c-jump-links__header">
493
- <div class="pf-v5-c-jump-links__toggle">
492
+ <div class="pf-v6-c-jump-links__header">
493
+ <div class="pf-v6-c-jump-links__toggle">
494
494
  <button
495
- class="pf-v5-c-button pf-m-plain"
495
+ class="pf-v6-c-button pf-m-plain"
496
496
  type="button"
497
497
  aria-label="Toggle jump links"
498
498
  aria-expanded="false"
499
499
  >
500
- <span class="pf-v5-c-jump-links__toggle-icon">
500
+ <span class="pf-v6-c-jump-links__toggle-icon">
501
501
  <i class="fas fa-angle-right" aria-hidden="true"></i>
502
502
  </span>
503
- <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
503
+ <span class="pf-v6-c-jump-links__toggle-text">Jump to section</span>
504
504
  </button>
505
505
  </div>
506
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
506
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
507
507
  </div>
508
- <ul class="pf-v5-c-jump-links__list" role="list">
509
- <li class="pf-v5-c-jump-links__item">
510
- <span class="pf-v5-c-jump-links__link">
511
- <a class="pf-v5-c-button pf-m-link" href="#">
512
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
508
+ <ul class="pf-v6-c-jump-links__list" role="list">
509
+ <li class="pf-v6-c-jump-links__item">
510
+ <span class="pf-v6-c-jump-links__link">
511
+ <a class="pf-v6-c-button pf-m-link" href="#">
512
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
513
513
  </a>
514
514
  </span>
515
515
  </li>
516
- <li class="pf-v5-c-jump-links__item pf-m-current">
517
- <span class="pf-v5-c-jump-links__link">
518
- <a class="pf-v5-c-button pf-m-link" href="#">
519
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
516
+ <li class="pf-v6-c-jump-links__item pf-m-current">
517
+ <span class="pf-v6-c-jump-links__link">
518
+ <a class="pf-v6-c-button pf-m-link" href="#">
519
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
520
520
  </a>
521
521
  </span>
522
522
  </li>
523
- <li class="pf-v5-c-jump-links__item">
524
- <span class="pf-v5-c-jump-links__link">
525
- <a class="pf-v5-c-button pf-m-link" href="#">
526
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
523
+ <li class="pf-v6-c-jump-links__item">
524
+ <span class="pf-v6-c-jump-links__link">
525
+ <a class="pf-v6-c-button pf-m-link" href="#">
526
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
527
527
  </a>
528
528
  </span>
529
529
  </li>
530
- <li class="pf-v5-c-jump-links__item">
531
- <span class="pf-v5-c-jump-links__link">
532
- <a class="pf-v5-c-button pf-m-link" href="#">
533
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
530
+ <li class="pf-v6-c-jump-links__item">
531
+ <span class="pf-v6-c-jump-links__link">
532
+ <a class="pf-v6-c-button pf-m-link" href="#">
533
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
534
534
  </a>
535
535
  </span>
536
536
  </li>
537
- <li class="pf-v5-c-jump-links__item">
538
- <span class="pf-v5-c-jump-links__link">
539
- <a class="pf-v5-c-button pf-m-link" href="#">
540
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
537
+ <li class="pf-v6-c-jump-links__item">
538
+ <span class="pf-v6-c-jump-links__link">
539
+ <a class="pf-v6-c-button pf-m-link" href="#">
540
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
541
541
  </a>
542
542
  </span>
543
543
  </li>
@@ -550,56 +550,56 @@ cssPrefix: pf-v5-c-jump-links
550
550
 
551
551
  ```html
552
552
  <nav
553
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
553
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable-on-lg pf-m-non-expandable-on-xl pf-m-expandable"
554
554
  >
555
- <div class="pf-v5-c-jump-links__header">
556
- <div class="pf-v5-c-jump-links__toggle">
555
+ <div class="pf-v6-c-jump-links__header">
556
+ <div class="pf-v6-c-jump-links__toggle">
557
557
  <button
558
- class="pf-v5-c-button pf-m-plain"
558
+ class="pf-v6-c-button pf-m-plain"
559
559
  type="button"
560
560
  aria-label="Toggle jump links"
561
561
  aria-expanded="false"
562
562
  >
563
- <span class="pf-v5-c-jump-links__toggle-icon">
563
+ <span class="pf-v6-c-jump-links__toggle-icon">
564
564
  <i class="fas fa-angle-right" aria-hidden="true"></i>
565
565
  </span>
566
- <span class="pf-v5-c-jump-links__toggle-text">Jump to section</span>
566
+ <span class="pf-v6-c-jump-links__toggle-text">Jump to section</span>
567
567
  </button>
568
568
  </div>
569
569
  </div>
570
- <ul class="pf-v5-c-jump-links__list" role="list">
571
- <li class="pf-v5-c-jump-links__item">
572
- <span class="pf-v5-c-jump-links__link">
573
- <a class="pf-v5-c-button pf-m-link" href="#">
574
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
570
+ <ul class="pf-v6-c-jump-links__list" role="list">
571
+ <li class="pf-v6-c-jump-links__item">
572
+ <span class="pf-v6-c-jump-links__link">
573
+ <a class="pf-v6-c-button pf-m-link" href="#">
574
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
575
575
  </a>
576
576
  </span>
577
577
  </li>
578
- <li class="pf-v5-c-jump-links__item pf-m-current">
579
- <span class="pf-v5-c-jump-links__link">
580
- <a class="pf-v5-c-button pf-m-link" href="#">
581
- <span class="pf-v5-c-jump-links__link-text">Active section</span>
578
+ <li class="pf-v6-c-jump-links__item pf-m-current">
579
+ <span class="pf-v6-c-jump-links__link">
580
+ <a class="pf-v6-c-button pf-m-link" href="#">
581
+ <span class="pf-v6-c-jump-links__link-text">Active section</span>
582
582
  </a>
583
583
  </span>
584
584
  </li>
585
- <li class="pf-v5-c-jump-links__item">
586
- <span class="pf-v5-c-jump-links__link">
587
- <a class="pf-v5-c-button pf-m-link" href="#">
588
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
585
+ <li class="pf-v6-c-jump-links__item">
586
+ <span class="pf-v6-c-jump-links__link">
587
+ <a class="pf-v6-c-button pf-m-link" href="#">
588
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
589
589
  </a>
590
590
  </span>
591
591
  </li>
592
- <li class="pf-v5-c-jump-links__item">
593
- <span class="pf-v5-c-jump-links__link">
594
- <a class="pf-v5-c-button pf-m-link" href="#">
595
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
592
+ <li class="pf-v6-c-jump-links__item">
593
+ <span class="pf-v6-c-jump-links__link">
594
+ <a class="pf-v6-c-button pf-m-link" href="#">
595
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
596
596
  </a>
597
597
  </span>
598
598
  </li>
599
- <li class="pf-v5-c-jump-links__item">
600
- <span class="pf-v5-c-jump-links__link">
601
- <a class="pf-v5-c-button pf-m-link" href="#">
602
- <span class="pf-v5-c-jump-links__link-text">Inactive section</span>
599
+ <li class="pf-v6-c-jump-links__item">
600
+ <span class="pf-v6-c-jump-links__link">
601
+ <a class="pf-v6-c-button pf-m-link" href="#">
602
+ <span class="pf-v6-c-jump-links__link-text">Inactive section</span>
603
603
  </a>
604
604
  </span>
605
605
  </li>