@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
@@ -8,7 +8,7 @@ cssPrefix: pf-v5-c-avatar
8
8
 
9
9
  ```html
10
10
  <img
11
- class="pf-v5-c-avatar"
11
+ class="pf-v6-c-avatar"
12
12
  alt="Avatar image"
13
13
  src="/assets/images/img_avatar-light.svg"
14
14
  />
@@ -19,7 +19,7 @@ cssPrefix: pf-v5-c-avatar
19
19
 
20
20
  ```html
21
21
  <img
22
- class="pf-v5-c-avatar pf-m-bordered"
22
+ class="pf-v6-c-avatar pf-m-bordered"
23
23
  alt="Avatar image bordered"
24
24
  src="/assets/images/img_avatar-light.svg"
25
25
  />
@@ -30,7 +30,7 @@ cssPrefix: pf-v5-c-avatar
30
30
 
31
31
  ```html
32
32
  <img
33
- class="pf-v5-c-avatar pf-m-sm"
33
+ class="pf-v6-c-avatar pf-m-sm"
34
34
  alt="Avatar image small"
35
35
  src="/assets/images/img_avatar-light.svg"
36
36
  />
@@ -41,7 +41,7 @@ cssPrefix: pf-v5-c-avatar
41
41
 
42
42
  ```html
43
43
  <img
44
- class="pf-v5-c-avatar pf-m-md"
44
+ class="pf-v6-c-avatar pf-m-md"
45
45
  alt="Avatar image medium"
46
46
  src="/assets/images/img_avatar-light.svg"
47
47
  />
@@ -52,7 +52,7 @@ cssPrefix: pf-v5-c-avatar
52
52
 
53
53
  ```html
54
54
  <img
55
- class="pf-v5-c-avatar pf-m-lg"
55
+ class="pf-v6-c-avatar pf-m-lg"
56
56
  alt="Avatar image large"
57
57
  src="/assets/images/img_avatar-light.svg"
58
58
  />
@@ -63,7 +63,7 @@ cssPrefix: pf-v5-c-avatar
63
63
 
64
64
  ```html
65
65
  <img
66
- class="pf-v5-c-avatar pf-m-xl"
66
+ class="pf-v6-c-avatar pf-m-xl"
67
67
  alt="Avatar image extra large"
68
68
  src="/assets/images/img_avatar-light.svg"
69
69
  />
@@ -9,10 +9,10 @@ cssPrefix: pf-v5-c-back-to-top
9
9
  ### Basic
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-back-to-top">
13
- <a class="pf-v5-c-button pf-m-primary" href="#">
12
+ <div class="pf-v6-c-back-to-top">
13
+ <a class="pf-v6-c-button pf-m-primary" href="#">
14
14
  Back to top
15
- <span class="pf-v5-c-button__icon pf-m-end">
15
+ <span class="pf-v6-c-button__icon pf-m-end">
16
16
  <i class="fas fa-angle-up" aria-hidden="true"></i>
17
17
  </span>
18
18
  </a>
@@ -7,7 +7,7 @@ cssPrefix: pf-v5-c-backdrop
7
7
  ### Basic
8
8
 
9
9
  ```html isFullscreen
10
- <div class="pf-v5-c-backdrop"></div>
10
+ <div class="pf-v6-c-backdrop"></div>
11
11
 
12
12
  ```
13
13
 
@@ -8,8 +8,8 @@ cssPrefix: pf-v5-c-background-image
8
8
 
9
9
  ```html isFullscreen
10
10
  <div
11
- class="pf-v5-c-background-image"
12
- style="--pf-v5-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
11
+ class="pf-v6-c-background-image"
12
+ style="--pf-v6-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
13
13
  ></div>
14
14
 
15
15
  ```
@@ -7,31 +7,31 @@ cssPrefix: pf-v5-c-badge
7
7
  ### Read
8
8
 
9
9
  ```html
10
- <span class="pf-v5-c-badge pf-m-read">7</span>
11
- <span class="pf-v5-c-badge pf-m-read">24</span>
12
- <span class="pf-v5-c-badge pf-m-read">240</span>
13
- <span class="pf-v5-c-badge pf-m-read">999+</span>
10
+ <span class="pf-v6-c-badge pf-m-read">7</span>
11
+ <span class="pf-v6-c-badge pf-m-read">24</span>
12
+ <span class="pf-v6-c-badge pf-m-read">240</span>
13
+ <span class="pf-v6-c-badge pf-m-read">999+</span>
14
14
 
15
15
  ```
16
16
 
17
17
  ### Unread
18
18
 
19
19
  ```html
20
- <span class="pf-v5-c-badge pf-m-unread">
20
+ <span class="pf-v6-c-badge pf-m-unread">
21
21
  7
22
- <span class="pf-v5-screen-reader">unread messages</span>
22
+ <span class="pf-v6-screen-reader">unread messages</span>
23
23
  </span>
24
- <span class="pf-v5-c-badge pf-m-unread">
24
+ <span class="pf-v6-c-badge pf-m-unread">
25
25
  24
26
- <span class="pf-v5-screen-reader">unread messages</span>
26
+ <span class="pf-v6-screen-reader">unread messages</span>
27
27
  </span>
28
- <span class="pf-v5-c-badge pf-m-unread">
28
+ <span class="pf-v6-c-badge pf-m-unread">
29
29
  240
30
- <span class="pf-v5-screen-reader">unread messages</span>
30
+ <span class="pf-v6-screen-reader">unread messages</span>
31
31
  </span>
32
- <span class="pf-v5-c-badge pf-m-unread">
32
+ <span class="pf-v6-c-badge pf-m-unread">
33
33
  999+
34
- <span class="pf-v5-screen-reader">unread messages</span>
34
+ <span class="pf-v6-screen-reader">unread messages</span>
35
35
  </span>
36
36
 
37
37
  ```
@@ -39,17 +39,17 @@ cssPrefix: pf-v5-c-badge
39
39
  ### Badge as toggle
40
40
 
41
41
  ```html
42
- <span class="pf-v5-c-badge pf-m-read">
42
+ <span class="pf-v6-c-badge pf-m-read">
43
43
  7
44
- <span class="pf-v5-c-badge__toggle-icon">
44
+ <span class="pf-v6-c-badge__toggle-icon">
45
45
  <i class="fas fa-caret-down"></i>
46
46
  </span>
47
47
  </span>
48
- <span class="pf-v5-c-badge pf-m-unread">
48
+ <span class="pf-v6-c-badge pf-m-unread">
49
49
  7
50
- <span class="pf-v5-screen-reader">unread messages</span>
50
+ <span class="pf-v6-screen-reader">unread messages</span>
51
51
 
52
- <span class="pf-v5-c-badge__toggle-icon">
52
+ <span class="pf-v6-c-badge__toggle-icon">
53
53
  <i class="fas fa-caret-down"></i>
54
54
  </span>
55
55
  </span>
@@ -9,53 +9,53 @@ cssPrefix: pf-v5-c-banner
9
9
  Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
10
10
 
11
11
  ```html
12
- <div class="pf-v5-c-banner">Default banner</div>
12
+ <div class="pf-v6-c-banner">Default banner</div>
13
13
 
14
14
  <br />
15
15
 
16
- <div class="pf-v5-c-banner pf-m-red">Red banner</div>
16
+ <div class="pf-v6-c-banner pf-m-red">Red banner</div>
17
17
 
18
18
  <br />
19
19
 
20
- <div class="pf-v5-c-banner pf-m-orangered">Orangered banner</div>
20
+ <div class="pf-v6-c-banner pf-m-orangered">Orangered banner</div>
21
21
 
22
22
  <br />
23
23
 
24
- <div class="pf-v5-c-banner pf-m-orange">Orange banner</div>
24
+ <div class="pf-v6-c-banner pf-m-orange">Orange banner</div>
25
25
 
26
26
  <br />
27
27
 
28
- <div class="pf-v5-c-banner pf-m-gold">Gold banner</div>
28
+ <div class="pf-v6-c-banner pf-m-gold">Gold banner</div>
29
29
 
30
30
  <br />
31
31
 
32
- <div class="pf-v5-c-banner pf-m-green">Green banner</div>
32
+ <div class="pf-v6-c-banner pf-m-green">Green banner</div>
33
33
 
34
34
  <br />
35
35
 
36
- <div class="pf-v5-c-banner pf-m-cyan">Cyan banner</div>
36
+ <div class="pf-v6-c-banner pf-m-cyan">Cyan banner</div>
37
37
 
38
38
  <br />
39
39
 
40
- <div class="pf-v5-c-banner pf-m-blue">Blue banner</div>
40
+ <div class="pf-v6-c-banner pf-m-blue">Blue banner</div>
41
41
 
42
42
  <br />
43
43
 
44
- <div class="pf-v5-c-banner pf-m-purple">Purple banner</div>
44
+ <div class="pf-v6-c-banner pf-m-purple">Purple banner</div>
45
45
 
46
46
  ```
47
47
 
48
48
  ### Banner with links
49
49
 
50
50
  ```html
51
- <div class="pf-v5-c-banner">
51
+ <div class="pf-v6-c-banner">
52
52
  Default banner with a
53
53
  <a
54
54
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
55
55
  >link</a>
56
56
  </div>
57
57
  <br />
58
- <div class="pf-v5-c-banner">
58
+ <div class="pf-v6-c-banner">
59
59
  Default banner with a
60
60
  <a
61
61
  class="pf-m-disabled"
@@ -64,26 +64,26 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
64
64
  >disabled link</a>
65
65
  </div>
66
66
  <br />
67
- <div class="pf-v5-c-banner pf-m-blue">
67
+ <div class="pf-v6-c-banner pf-m-blue">
68
68
  Blue banner with an
69
69
  <button
70
- class="pf-v5-c-button pf-m-inline pf-m-link"
70
+ class="pf-v6-c-button pf-m-inline pf-m-link"
71
71
  type="button"
72
72
  >inline link button</button>
73
73
  </div>
74
74
  <br />
75
- <div class="pf-v5-c-banner pf-m-gold">
75
+ <div class="pf-v6-c-banner pf-m-gold">
76
76
  Gold banner with an
77
77
  <a
78
- class="pf-v5-c-button pf-m-inline pf-m-link"
78
+ class="pf-v6-c-button pf-m-inline pf-m-link"
79
79
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
80
80
  >inline link button (anchor)</a>
81
81
  </div>
82
82
  <br />
83
- <div class="pf-v5-c-banner pf-m-red">
83
+ <div class="pf-v6-c-banner pf-m-red">
84
84
  Red banner with a
85
85
  <button
86
- class="pf-v5-c-button pf-m-link pf-m-inline"
86
+ class="pf-v6-c-button pf-m-link pf-m-inline"
87
87
  type="button"
88
88
  disabled
89
89
  >disabled inline link button</button>
@@ -96,66 +96,66 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
96
96
  When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
97
97
 
98
98
  ```html
99
- <div class="pf-v5-c-banner pf-m-success">
100
- <div class="pf-v5-l-flex pf-m-space-items-sm">
101
- <div class="pf-v5-l-flex__item">
102
- <span class="pf-v5-screen-reader">Success banner:</span>
99
+ <div class="pf-v6-c-banner pf-m-success">
100
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
101
+ <div class="pf-v6-l-flex__item">
102
+ <span class="pf-v6-screen-reader">Success banner:</span>
103
103
 
104
104
  <i class="fas fa-check-circle" aria-hidden="true"></i>
105
105
  </div>
106
- <div class="pf-v5-l-flex__item">Success banner</div>
106
+ <div class="pf-v6-l-flex__item">Success banner</div>
107
107
  </div>
108
108
  </div>
109
109
 
110
110
  <br />
111
111
 
112
- <div class="pf-v5-c-banner pf-m-warning">
113
- <div class="pf-v5-l-flex pf-m-space-items-sm">
114
- <div class="pf-v5-l-flex__item">
115
- <span class="pf-v5-screen-reader">Warning banner:</span>
112
+ <div class="pf-v6-c-banner pf-m-warning">
113
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
114
+ <div class="pf-v6-l-flex__item">
115
+ <span class="pf-v6-screen-reader">Warning banner:</span>
116
116
 
117
117
  <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
118
118
  </div>
119
- <div class="pf-v5-l-flex__item">Warning banner</div>
119
+ <div class="pf-v6-l-flex__item">Warning banner</div>
120
120
  </div>
121
121
  </div>
122
122
 
123
123
  <br />
124
124
 
125
- <div class="pf-v5-c-banner pf-m-danger">
126
- <div class="pf-v5-l-flex pf-m-space-items-sm">
127
- <div class="pf-v5-l-flex__item">
128
- <span class="pf-v5-screen-reader">Danger banner:</span>
125
+ <div class="pf-v6-c-banner pf-m-danger">
126
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
127
+ <div class="pf-v6-l-flex__item">
128
+ <span class="pf-v6-screen-reader">Danger banner:</span>
129
129
 
130
130
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
131
131
  </div>
132
- <div class="pf-v5-l-flex__item">Danger banner</div>
132
+ <div class="pf-v6-l-flex__item">Danger banner</div>
133
133
  </div>
134
134
  </div>
135
135
 
136
136
  <br />
137
137
 
138
- <div class="pf-v5-c-banner pf-m-info">
139
- <div class="pf-v5-l-flex pf-m-space-items-sm">
140
- <div class="pf-v5-l-flex__item">
141
- <span class="pf-v5-screen-reader">Custom status banner:</span>
138
+ <div class="pf-v6-c-banner pf-m-info">
139
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
140
+ <div class="pf-v6-l-flex__item">
141
+ <span class="pf-v6-screen-reader">Custom status banner:</span>
142
142
 
143
143
  <i class="fas fa-info-circle" aria-hidden="true"></i>
144
144
  </div>
145
- <div class="pf-v5-l-flex__item">Info banner</div>
145
+ <div class="pf-v6-l-flex__item">Info banner</div>
146
146
  </div>
147
147
  </div>
148
148
 
149
149
  <br />
150
150
 
151
- <div class="pf-v5-c-banner pf-m-custom">
152
- <div class="pf-v5-l-flex pf-m-space-items-sm">
153
- <div class="pf-v5-l-flex__item">
154
- <span class="pf-v5-screen-reader">Custom status banner:</span>
151
+ <div class="pf-v6-c-banner pf-m-custom">
152
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
153
+ <div class="pf-v6-l-flex__item">
154
+ <span class="pf-v6-screen-reader">Custom status banner:</span>
155
155
 
156
156
  <i class="fas fa-bell" aria-hidden="true"></i>
157
157
  </div>
158
- <div class="pf-v5-l-flex__item">Custom banner</div>
158
+ <div class="pf-v6-l-flex__item">Custom banner</div>
159
159
  </div>
160
160
  </div>
161
161
 
@@ -10,7 +10,7 @@ section: components
10
10
  ```html
11
11
  <div class="show-light">
12
12
  <img
13
- class="pf-v5-c-brand"
13
+ class="pf-v6-c-brand"
14
14
  src="/assets/images/PF-HorizontalLogo-Color.svg"
15
15
  alt="PatternFly logo"
16
16
  />
@@ -18,7 +18,7 @@ section: components
18
18
 
19
19
  <div class="show-dark">
20
20
  <img
21
- class="pf-v5-c-brand"
21
+ class="pf-v6-c-brand"
22
22
  src="/assets/images/PF-HorizontalLogo-Reverse.svg"
23
23
  alt="PatternFly logo"
24
24
  />
@@ -31,7 +31,7 @@ section: components
31
31
  ```html
32
32
  <div class="show-light">
33
33
  <picture
34
- class="pf-v5-c-brand pf-m-picture"
34
+ class="pf-v6-c-brand pf-m-picture"
35
35
  style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
36
36
  >
37
37
  <source
@@ -48,7 +48,7 @@ section: components
48
48
 
49
49
  <div class="show-dark">
50
50
  <picture
51
- class="pf-v5-c-brand pf-m-picture"
51
+ class="pf-v6-c-brand pf-m-picture"
52
52
  style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
53
53
  >
54
54
  <source