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

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 +1 -1
  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/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -6,25 +6,25 @@ section: components
6
6
  ### Skeleton card
7
7
 
8
8
  ```html isFullscreen
9
- <div class="pf-v5-c-page" id="skeleton-basic-example">
10
- <div class="pf-v5-c-skip-to-content">
9
+ <div class="pf-v6-c-page" id="skeleton-basic-example">
10
+ <div class="pf-v6-c-skip-to-content">
11
11
  <a
12
- class="pf-v5-c-button pf-m-primary"
12
+ class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-skeleton-basic-example"
14
14
  >Skip to content</a>
15
15
  </div>
16
- <header class="pf-v5-c-masthead" id="skeleton-basic-example-masthead">
17
- <span class="pf-v5-c-masthead__toggle">
16
+ <header class="pf-v6-c-masthead" id="skeleton-basic-example-masthead">
17
+ <span class="pf-v6-c-masthead__toggle">
18
18
  <button
19
- class="pf-v5-c-button pf-m-plain"
19
+ class="pf-v6-c-button pf-m-plain"
20
20
  type="button"
21
21
  aria-label="Global navigation"
22
22
  >
23
23
  <i class="fas fa-bars" aria-hidden="true"></i>
24
24
  </button>
25
25
  </span>
26
- <div class="pf-v5-c-masthead__main">
27
- <a class="pf-v5-c-masthead__brand" href="#">
26
+ <div class="pf-v6-c-masthead__main">
27
+ <a class="pf-v6-c-masthead__brand" href="#">
28
28
  <svg height="40px" viewBox="0 0 679 158">
29
29
  <title>PF-HorizontalLogo-Color</title>
30
30
  <defs>
@@ -97,37 +97,37 @@ section: components
97
97
  </svg>
98
98
  </a>
99
99
  </div>
100
- <div class="pf-v5-c-masthead__content">
100
+ <div class="pf-v6-c-masthead__content">
101
101
  <div
102
- class="pf-v5-c-toolbar pf-m-static"
102
+ class="pf-v6-c-toolbar pf-m-static"
103
103
  id="skeleton-basic-example-masthead-toolbar"
104
104
  >
105
- <div class="pf-v5-c-toolbar__content">
106
- <div class="pf-v5-c-toolbar__content-section">
107
- <div class="pf-v5-c-toolbar__item">
105
+ <div class="pf-v6-c-toolbar__content">
106
+ <div class="pf-v6-c-toolbar__content-section">
107
+ <div class="pf-v6-c-toolbar__item">
108
108
  <button
109
- class="pf-v5-c-menu-toggle"
109
+ class="pf-v6-c-menu-toggle"
110
110
  type="button"
111
111
  aria-expanded="false"
112
112
  >
113
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
- <span class="pf-v5-c-menu-toggle__controls">
115
- <span class="pf-v5-c-menu-toggle__toggle-icon">
113
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v6-c-menu-toggle__controls">
115
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
116
116
  <i class="fas fa-caret-down" aria-hidden="true"></i>
117
117
  </span>
118
118
  </span>
119
119
  </button>
120
120
  </div>
121
121
 
122
- <div class="pf-v5-c-toolbar__item">
122
+ <div class="pf-v6-c-toolbar__item">
123
123
  <button
124
- class="pf-v5-c-menu-toggle"
124
+ class="pf-v6-c-menu-toggle"
125
125
  type="button"
126
126
  aria-expanded="false"
127
127
  >
128
- <span class="pf-v5-c-menu-toggle__text">Services</span>
129
- <span class="pf-v5-c-menu-toggle__controls">
130
- <span class="pf-v5-c-menu-toggle__toggle-icon">
128
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v6-c-menu-toggle__controls">
130
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
131
131
  <i class="fas fa-caret-down" aria-hidden="true"></i>
132
132
  </span>
133
133
  </span>
@@ -135,56 +135,56 @@ section: components
135
135
  </div>
136
136
 
137
137
  <div
138
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
138
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
139
139
  >
140
140
  <div
141
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
141
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
142
142
  >
143
- <div class="pf-v5-c-toolbar__item">
143
+ <div class="pf-v6-c-toolbar__item">
144
144
  <button
145
- class="pf-v5-c-menu-toggle pf-m-plain"
145
+ class="pf-v6-c-menu-toggle pf-m-plain"
146
146
  type="button"
147
147
  aria-expanded="false"
148
148
  aria-label="Application launcher"
149
149
  >
150
- <span class="pf-v5-c-menu-toggle__icon">
150
+ <span class="pf-v6-c-menu-toggle__icon">
151
151
  <i class="fas fa-th" aria-hidden="true"></i>
152
152
  </span>
153
153
  </button>
154
154
  </div>
155
- <div class="pf-v5-c-toolbar__item">
155
+ <div class="pf-v6-c-toolbar__item">
156
156
  <button
157
- class="pf-v5-c-menu-toggle pf-m-plain"
157
+ class="pf-v6-c-menu-toggle pf-m-plain"
158
158
  type="button"
159
159
  aria-expanded="false"
160
160
  aria-label="Settings"
161
161
  >
162
- <span class="pf-v5-c-menu-toggle__icon">
162
+ <span class="pf-v6-c-menu-toggle__icon">
163
163
  <i class="fas fa-cog" aria-hidden="true"></i>
164
164
  </span>
165
165
  </button>
166
166
  </div>
167
- <div class="pf-v5-c-toolbar__item">
167
+ <div class="pf-v6-c-toolbar__item">
168
168
  <button
169
- class="pf-v5-c-menu-toggle pf-m-plain"
169
+ class="pf-v6-c-menu-toggle pf-m-plain"
170
170
  type="button"
171
171
  aria-expanded="false"
172
172
  aria-label="Help"
173
173
  >
174
- <span class="pf-v5-c-menu-toggle__icon">
174
+ <span class="pf-v6-c-menu-toggle__icon">
175
175
  <i class="fas fa-question-circle" aria-hidden="true"></i>
176
176
  </span>
177
177
  </button>
178
178
  </div>
179
179
  </div>
180
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
180
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
181
181
  <button
182
- class="pf-v5-c-menu-toggle pf-m-plain"
182
+ class="pf-v6-c-menu-toggle pf-m-plain"
183
183
  type="button"
184
184
  aria-expanded="false"
185
185
  aria-label="Actions"
186
186
  >
187
- <span class="pf-v5-c-menu-toggle__icon">
187
+ <span class="pf-v6-c-menu-toggle__icon">
188
188
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
189
189
  </span>
190
190
  </button>
@@ -195,71 +195,71 @@ section: components
195
195
  </div>
196
196
  </div>
197
197
  </header>
198
- <div class="pf-v5-c-page__sidebar">
199
- <div class="pf-v5-c-page__sidebar-body">
198
+ <div class="pf-v6-c-page__sidebar">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
200
  <nav
201
- class="pf-v5-c-nav"
201
+ class="pf-v6-c-nav"
202
202
  id="skeleton-basic-example-primary-nav"
203
203
  aria-label="Global"
204
204
  >
205
- <ul class="pf-v5-c-nav__list" role="list">
206
- <li class="pf-v5-c-nav__item">
207
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
208
208
  </li>
209
- <li class="pf-v5-c-nav__item">
209
+ <li class="pf-v6-c-nav__item">
210
210
  <a
211
211
  href="#"
212
- class="pf-v5-c-nav__link pf-m-current"
212
+ class="pf-v6-c-nav__link pf-m-current"
213
213
  aria-current="page"
214
214
  >Policy</a>
215
215
  </li>
216
- <li class="pf-v5-c-nav__item">
217
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
216
+ <li class="pf-v6-c-nav__item">
217
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
218
218
  </li>
219
- <li class="pf-v5-c-nav__item">
220
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
219
+ <li class="pf-v6-c-nav__item">
220
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
221
221
  </li>
222
- <li class="pf-v5-c-nav__item">
223
- <a href="#" class="pf-v5-c-nav__link">Server</a>
222
+ <li class="pf-v6-c-nav__item">
223
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
224
224
  </li>
225
225
  </ul>
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
229
  <main
230
- class="pf-v5-c-page__main"
230
+ class="pf-v6-c-page__main"
231
231
  tabindex="-1"
232
232
  id="main-content-skeleton-basic-example"
233
233
  >
234
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v5-c-page__main-body">
236
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v5-c-breadcrumb__list" role="list">
238
- <li class="pf-v5-c-breadcrumb__item">
239
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
234
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
+ <div class="pf-v6-c-page__main-body">
236
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
238
+ <li class="pf-v6-c-breadcrumb__item">
239
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
240
  </li>
241
- <li class="pf-v5-c-breadcrumb__item">
242
- <span class="pf-v5-c-breadcrumb__item-divider">
241
+ <li class="pf-v6-c-breadcrumb__item">
242
+ <span class="pf-v6-c-breadcrumb__item-divider">
243
243
  <i class="fas fa-angle-right" aria-hidden="true"></i>
244
244
  </span>
245
245
 
246
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
246
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
247
  </li>
248
- <li class="pf-v5-c-breadcrumb__item">
249
- <span class="pf-v5-c-breadcrumb__item-divider">
248
+ <li class="pf-v6-c-breadcrumb__item">
249
+ <span class="pf-v6-c-breadcrumb__item-divider">
250
250
  <i class="fas fa-angle-right" aria-hidden="true"></i>
251
251
  </span>
252
252
 
253
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
253
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
254
  </li>
255
- <li class="pf-v5-c-breadcrumb__item">
256
- <span class="pf-v5-c-breadcrumb__item-divider">
255
+ <li class="pf-v6-c-breadcrumb__item">
256
+ <span class="pf-v6-c-breadcrumb__item-divider">
257
257
  <i class="fas fa-angle-right" aria-hidden="true"></i>
258
258
  </span>
259
259
 
260
260
  <a
261
261
  href="#"
262
- class="pf-v5-c-breadcrumb__link pf-m-current"
262
+ class="pf-v6-c-breadcrumb__link pf-m-current"
263
263
  aria-current="page"
264
264
  >Section landing</a>
265
265
  </li>
@@ -267,160 +267,160 @@ section: components
267
267
  </nav>
268
268
  </div>
269
269
  </section>
270
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v5-c-page__main-body">
272
- <div class="pf-v5-c-content">
270
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
+ <div class="pf-v6-c-page__main-body">
272
+ <div class="pf-v6-c-content">
273
273
  <h1>Main title</h1>
274
274
  <p>This is a full page demo.</p>
275
275
  </div>
276
276
  </div>
277
277
  </section>
278
- <section class="pf-v5-c-page__main-section">
279
- <div class="pf-v5-l-gallery pf-m-gutter">
280
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
281
- <div class="pf-v5-c-card__body">
282
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
283
- <div class="pf-v5-c-skeleton"></div>
284
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
285
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
286
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
278
+ <section class="pf-v6-c-page__main-section">
279
+ <div class="pf-v6-l-gallery pf-m-gutter">
280
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
281
+ <div class="pf-v6-c-card__body">
282
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
283
+ <div class="pf-v6-c-skeleton"></div>
284
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
285
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
286
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
287
287
  </div>
288
288
  </div>
289
- <div class="pf-v5-c-card__body">
290
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
289
+ <div class="pf-v6-c-card__body">
290
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
291
291
  </div>
292
- <div class="pf-v5-c-card__body">
293
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
294
- <div class="pf-v5-c-skeleton"></div>
295
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
296
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
297
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
292
+ <div class="pf-v6-c-card__body">
293
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
294
+ <div class="pf-v6-c-skeleton"></div>
295
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
296
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
297
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
298
298
  </div>
299
299
  </div>
300
300
  </div>
301
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
302
- <div class="pf-v5-c-card__body">
303
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
304
- <div class="pf-v5-c-skeleton"></div>
305
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
306
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
307
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
301
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
302
+ <div class="pf-v6-c-card__body">
303
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
304
+ <div class="pf-v6-c-skeleton"></div>
305
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
306
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
307
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
308
308
  </div>
309
309
  </div>
310
- <div class="pf-v5-c-card__body">
311
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
310
+ <div class="pf-v6-c-card__body">
311
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
312
312
  </div>
313
- <div class="pf-v5-c-card__body">
314
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
315
- <div class="pf-v5-c-skeleton"></div>
316
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
317
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
318
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
313
+ <div class="pf-v6-c-card__body">
314
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
315
+ <div class="pf-v6-c-skeleton"></div>
316
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
317
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
318
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
319
319
  </div>
320
320
  </div>
321
321
  </div>
322
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
323
- <div class="pf-v5-c-card__body">
324
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
325
- <div class="pf-v5-c-skeleton"></div>
326
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
327
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
328
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
322
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
323
+ <div class="pf-v6-c-card__body">
324
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
325
+ <div class="pf-v6-c-skeleton"></div>
326
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
327
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
328
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
329
329
  </div>
330
330
  </div>
331
- <div class="pf-v5-c-card__body">
332
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
331
+ <div class="pf-v6-c-card__body">
332
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
333
333
  </div>
334
- <div class="pf-v5-c-card__body">
335
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
336
- <div class="pf-v5-c-skeleton"></div>
337
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
338
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
339
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
334
+ <div class="pf-v6-c-card__body">
335
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
336
+ <div class="pf-v6-c-skeleton"></div>
337
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
338
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
339
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
340
340
  </div>
341
341
  </div>
342
342
  </div>
343
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
344
- <div class="pf-v5-c-card__body">
345
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
346
- <div class="pf-v5-c-skeleton"></div>
347
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
348
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
349
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
343
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
344
+ <div class="pf-v6-c-card__body">
345
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
346
+ <div class="pf-v6-c-skeleton"></div>
347
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
348
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
349
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
350
350
  </div>
351
351
  </div>
352
- <div class="pf-v5-c-card__body">
353
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
352
+ <div class="pf-v6-c-card__body">
353
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
354
354
  </div>
355
- <div class="pf-v5-c-card__body">
356
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
357
- <div class="pf-v5-c-skeleton"></div>
358
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
359
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
360
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
355
+ <div class="pf-v6-c-card__body">
356
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
357
+ <div class="pf-v6-c-skeleton"></div>
358
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
359
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
360
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
361
361
  </div>
362
362
  </div>
363
363
  </div>
364
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
365
- <div class="pf-v5-c-card__body">
366
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
367
- <div class="pf-v5-c-skeleton"></div>
368
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
369
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
370
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
364
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
365
+ <div class="pf-v6-c-card__body">
366
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
367
+ <div class="pf-v6-c-skeleton"></div>
368
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
369
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
370
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
371
371
  </div>
372
372
  </div>
373
- <div class="pf-v5-c-card__body">
374
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
373
+ <div class="pf-v6-c-card__body">
374
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
375
375
  </div>
376
- <div class="pf-v5-c-card__body">
377
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
378
- <div class="pf-v5-c-skeleton"></div>
379
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
380
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
381
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
376
+ <div class="pf-v6-c-card__body">
377
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
378
+ <div class="pf-v6-c-skeleton"></div>
379
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
380
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
381
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
382
382
  </div>
383
383
  </div>
384
384
  </div>
385
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
386
- <div class="pf-v5-c-card__body">
387
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
388
- <div class="pf-v5-c-skeleton"></div>
389
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
390
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
391
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
385
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
386
+ <div class="pf-v6-c-card__body">
387
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
388
+ <div class="pf-v6-c-skeleton"></div>
389
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
390
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
391
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
392
392
  </div>
393
393
  </div>
394
- <div class="pf-v5-c-card__body">
395
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
394
+ <div class="pf-v6-c-card__body">
395
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
396
396
  </div>
397
- <div class="pf-v5-c-card__body">
398
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
399
- <div class="pf-v5-c-skeleton"></div>
400
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
401
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
402
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
397
+ <div class="pf-v6-c-card__body">
398
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
399
+ <div class="pf-v6-c-skeleton"></div>
400
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
401
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
402
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
403
403
  </div>
404
404
  </div>
405
405
  </div>
406
- <div class="pf-v5-c-card pf-m-hoverable pf-m-compact">
407
- <div class="pf-v5-c-card__body">
408
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
409
- <div class="pf-v5-c-skeleton"></div>
410
- <div class="pf-v5-c-skeleton pf-m-width-66"></div>
411
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
412
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
406
+ <div class="pf-v6-c-card pf-m-hoverable pf-m-compact">
407
+ <div class="pf-v6-c-card__body">
408
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
409
+ <div class="pf-v6-c-skeleton"></div>
410
+ <div class="pf-v6-c-skeleton pf-m-width-66"></div>
411
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
412
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
413
413
  </div>
414
414
  </div>
415
- <div class="pf-v5-c-card__body">
416
- <div class="pf-v5-c-skeleton pf-m-square pf-m-width-md"></div>
415
+ <div class="pf-v6-c-card__body">
416
+ <div class="pf-v6-c-skeleton pf-m-square pf-m-width-md"></div>
417
417
  </div>
418
- <div class="pf-v5-c-card__body">
419
- <div class="pf-v5-l-flex pf-m-column pf-m-spacer-md">
420
- <div class="pf-v5-c-skeleton"></div>
421
- <div class="pf-v5-c-skeleton pf-m-width-25"></div>
422
- <div class="pf-v5-c-skeleton pf-m-width-75"></div>
423
- <div class="pf-v5-c-skeleton pf-m-width-50"></div>
418
+ <div class="pf-v6-c-card__body">
419
+ <div class="pf-v6-l-flex pf-m-column pf-m-spacer-md">
420
+ <div class="pf-v6-c-skeleton"></div>
421
+ <div class="pf-v6-c-skeleton pf-m-width-25"></div>
422
+ <div class="pf-v6-c-skeleton pf-m-width-75"></div>
423
+ <div class="pf-v6-c-skeleton pf-m-width-50"></div>
424
424
  </div>
425
425
  </div>
426
426
  </div>