@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +42 -4
  59. package/components/Menu/menu.scss +39 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +14 -1
  71. package/components/Panel/panel.scss +14 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1404 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2851 -437
  165. package/patternfly.css +2853 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/components/Page/examples/Page.md CHANGED
@@ -15,12 +15,31 @@ wrapperTag: div
15
15
  <div class="pf-v6-c-masthead__main">
16
16
  <span class="pf-v6-c-masthead__toggle">
17
17
  <button
18
- class="pf-v6-c-button pf-m-plain"
18
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
19
19
  type="button"
20
20
  aria-label="Global navigation"
21
21
  >
22
22
  <span class="pf-v6-c-button__icon">
23
- <i class="fas fa-bars" aria-hidden="true"></i>
23
+ <svg
24
+ viewBox="0 0 10 10"
25
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
26
+ width="1em"
27
+ height="1em"
28
+ >
29
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
30
+ <path
31
+ class="pf-v6-c-button--hamburger-icon--middle"
32
+ d="M1,5 L9,5"
33
+ />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--arrow"
36
+ d="M1,5 L1,5 L1,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--bottom"
40
+ d="M9,9 L1,9"
41
+ />
42
+ </svg>
24
43
  </span>
25
44
  </button>
26
45
  </span>
@@ -81,12 +100,31 @@ wrapperTag: div
81
100
  <div class="pf-v6-c-masthead__main">
82
101
  <span class="pf-v6-c-masthead__toggle">
83
102
  <button
84
- class="pf-v6-c-button pf-m-plain"
103
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
85
104
  type="button"
86
105
  aria-label="Global navigation"
87
106
  >
88
107
  <span class="pf-v6-c-button__icon">
89
- <i class="fas fa-bars" aria-hidden="true"></i>
108
+ <svg
109
+ viewBox="0 0 10 10"
110
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
111
+ width="1em"
112
+ height="1em"
113
+ >
114
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
115
+ <path
116
+ class="pf-v6-c-button--hamburger-icon--middle"
117
+ d="M1,5 L9,5"
118
+ />
119
+ <path
120
+ class="pf-v6-c-button--hamburger-icon--arrow"
121
+ d="M1,5 L1,5 L1,5"
122
+ />
123
+ <path
124
+ class="pf-v6-c-button--hamburger-icon--bottom"
125
+ d="M9,9 L1,9"
126
+ />
127
+ </svg>
90
128
  </span>
91
129
  </button>
92
130
  </span>
@@ -133,12 +171,31 @@ wrapperTag: div
133
171
  <div class="pf-v6-c-masthead__main">
134
172
  <span class="pf-v6-c-masthead__toggle">
135
173
  <button
136
- class="pf-v6-c-button pf-m-plain"
174
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
137
175
  type="button"
138
176
  aria-label="Global navigation"
139
177
  >
140
178
  <span class="pf-v6-c-button__icon">
141
- <i class="fas fa-bars" aria-hidden="true"></i>
179
+ <svg
180
+ viewBox="0 0 10 10"
181
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
182
+ width="1em"
183
+ height="1em"
184
+ >
185
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
186
+ <path
187
+ class="pf-v6-c-button--hamburger-icon--middle"
188
+ d="M1,5 L9,5"
189
+ />
190
+ <path
191
+ class="pf-v6-c-button--hamburger-icon--arrow"
192
+ d="M1,5 L1,5 L1,5"
193
+ />
194
+ <path
195
+ class="pf-v6-c-button--hamburger-icon--bottom"
196
+ d="M9,9 L1,9"
197
+ />
198
+ </svg>
142
199
  </span>
143
200
  </button>
144
201
  </span>
@@ -177,12 +234,31 @@ wrapperTag: div
177
234
  <div class="pf-v6-c-masthead__main">
178
235
  <span class="pf-v6-c-masthead__toggle">
179
236
  <button
180
- class="pf-v6-c-button pf-m-plain"
237
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
181
238
  type="button"
182
239
  aria-label="Global navigation"
183
240
  >
184
241
  <span class="pf-v6-c-button__icon">
185
- <i class="fas fa-bars" aria-hidden="true"></i>
242
+ <svg
243
+ viewBox="0 0 10 10"
244
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
245
+ width="1em"
246
+ height="1em"
247
+ >
248
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
249
+ <path
250
+ class="pf-v6-c-button--hamburger-icon--middle"
251
+ d="M1,5 L9,5"
252
+ />
253
+ <path
254
+ class="pf-v6-c-button--hamburger-icon--arrow"
255
+ d="M1,5 L1,5 L1,5"
256
+ />
257
+ <path
258
+ class="pf-v6-c-button--hamburger-icon--bottom"
259
+ d="M9,9 L1,9"
260
+ />
261
+ </svg>
186
262
  </span>
187
263
  </button>
188
264
  </span>
@@ -227,12 +303,31 @@ wrapperTag: div
227
303
  <div class="pf-v6-c-masthead__main">
228
304
  <span class="pf-v6-c-masthead__toggle">
229
305
  <button
230
- class="pf-v6-c-button pf-m-plain"
306
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
231
307
  type="button"
232
308
  aria-label="Global navigation"
233
309
  >
234
310
  <span class="pf-v6-c-button__icon">
235
- <i class="fas fa-bars" aria-hidden="true"></i>
311
+ <svg
312
+ viewBox="0 0 10 10"
313
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
314
+ width="1em"
315
+ height="1em"
316
+ >
317
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
318
+ <path
319
+ class="pf-v6-c-button--hamburger-icon--middle"
320
+ d="M1,5 L9,5"
321
+ />
322
+ <path
323
+ class="pf-v6-c-button--hamburger-icon--arrow"
324
+ d="M1,5 L1,5 L1,5"
325
+ />
326
+ <path
327
+ class="pf-v6-c-button--hamburger-icon--bottom"
328
+ d="M9,9 L1,9"
329
+ />
330
+ </svg>
236
331
  </span>
237
332
  </button>
238
333
  </span>
@@ -286,12 +381,31 @@ wrapperTag: div
286
381
  <div class="pf-v6-c-masthead__main">
287
382
  <span class="pf-v6-c-masthead__toggle">
288
383
  <button
289
- class="pf-v6-c-button pf-m-plain"
384
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
290
385
  type="button"
291
386
  aria-label="Global navigation"
292
387
  >
293
388
  <span class="pf-v6-c-button__icon">
294
- <i class="fas fa-bars" aria-hidden="true"></i>
389
+ <svg
390
+ viewBox="0 0 10 10"
391
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
392
+ width="1em"
393
+ height="1em"
394
+ >
395
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
396
+ <path
397
+ class="pf-v6-c-button--hamburger-icon--middle"
398
+ d="M1,5 L9,5"
399
+ />
400
+ <path
401
+ class="pf-v6-c-button--hamburger-icon--arrow"
402
+ d="M1,5 L1,5 L1,5"
403
+ />
404
+ <path
405
+ class="pf-v6-c-button--hamburger-icon--bottom"
406
+ d="M9,9 L1,9"
407
+ />
408
+ </svg>
295
409
  </span>
296
410
  </button>
297
411
  </span>
@@ -342,12 +456,31 @@ wrapperTag: div
342
456
  <div class="pf-v6-c-masthead__main">
343
457
  <span class="pf-v6-c-masthead__toggle">
344
458
  <button
345
- class="pf-v6-c-button pf-m-plain"
459
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
346
460
  type="button"
347
461
  aria-label="Global navigation"
348
462
  >
349
463
  <span class="pf-v6-c-button__icon">
350
- <i class="fas fa-bars" aria-hidden="true"></i>
464
+ <svg
465
+ viewBox="0 0 10 10"
466
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
467
+ width="1em"
468
+ height="1em"
469
+ >
470
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
471
+ <path
472
+ class="pf-v6-c-button--hamburger-icon--middle"
473
+ d="M1,5 L9,5"
474
+ />
475
+ <path
476
+ class="pf-v6-c-button--hamburger-icon--arrow"
477
+ d="M1,5 L1,5 L1,5"
478
+ />
479
+ <path
480
+ class="pf-v6-c-button--hamburger-icon--bottom"
481
+ d="M9,9 L1,9"
482
+ />
483
+ </svg>
351
484
  </span>
352
485
  </button>
353
486
  </span>
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -14,7 +14,7 @@ cssPrefix: pf-v6-c-pagination
14
14
  </div>
15
15
  <div class="pf-v6-c-pagination__page-menu">
16
16
  <button
17
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
17
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
18
18
  type="button"
19
19
  aria-expanded="false"
20
20
  aria-label="Menu toggle"
@@ -109,7 +109,7 @@ cssPrefix: pf-v6-c-pagination
109
109
  </div>
110
110
  <div class="pf-v6-c-pagination__page-menu">
111
111
  <button
112
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
112
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
113
113
  type="button"
114
114
  aria-expanded="false"
115
115
  aria-label="Menu toggle"
@@ -214,7 +214,7 @@ cssPrefix: pf-v6-c-pagination
214
214
  </div>
215
215
  <div class="pf-v6-c-pagination__page-menu">
216
216
  <button
217
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
217
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
218
218
  type="button"
219
219
  aria-expanded="false"
220
220
  aria-label="Menu toggle"
@@ -301,10 +301,20 @@ cssPrefix: pf-v6-c-pagination
301
301
  ### Bottom
302
302
 
303
303
  ```html
304
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
305
+ <br />
306
+ <br />
307
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
308
+ <br />
309
+ <br />
310
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
311
+ <br />
312
+ <br />
313
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
304
314
  <div class="pf-v6-c-pagination pf-m-bottom">
305
315
  <div class="pf-v6-c-pagination__page-menu">
306
316
  <button
307
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
317
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
308
318
  type="button"
309
319
  aria-expanded="false"
310
320
  aria-label="Menu toggle"
@@ -405,7 +415,108 @@ cssPrefix: pf-v6-c-pagination
405
415
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-sticky">
406
416
  <div class="pf-v6-c-pagination__page-menu">
407
417
  <button
408
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
418
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
419
+ type="button"
420
+ aria-expanded="false"
421
+ aria-label="Menu toggle"
422
+ id="pagination-menu-toggle-bottom-sticky-example"
423
+ >
424
+ <span class="pf-v6-c-menu-toggle__text">
425
+ <b>1 - 10</b>&nbsp;of&nbsp;
426
+ <b>36</b>
427
+ </span>
428
+ <span class="pf-v6-c-menu-toggle__controls">
429
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
430
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
431
+ </span>
432
+ </span>
433
+ </button>
434
+ </div>
435
+ <nav
436
+ class="pf-v6-c-pagination__nav"
437
+ aria-label="Pagination nav - bottom sticky example"
438
+ >
439
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
440
+ <button
441
+ class="pf-v6-c-button pf-m-plain"
442
+ type="button"
443
+ disabled
444
+ aria-label="Go to first page"
445
+ >
446
+ <span class="pf-v6-c-button__icon">
447
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
448
+ </span>
449
+ </button>
450
+ </div>
451
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
452
+ <button
453
+ class="pf-v6-c-button pf-m-plain"
454
+ type="button"
455
+ disabled
456
+ aria-label="Go to previous page"
457
+ >
458
+ <span class="pf-v6-c-button__icon">
459
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
460
+ </span>
461
+ </button>
462
+ </div>
463
+ <div class="pf-v6-c-pagination__nav-page-select">
464
+ <span class="pf-v6-c-form-control">
465
+ <input
466
+ aria-label="Current page"
467
+ type="number"
468
+ min="1"
469
+ max="4"
470
+ value="1"
471
+ />
472
+ </span>
473
+ <span aria-hidden="true">of 4</span>
474
+ </div>
475
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
476
+ <button
477
+ class="pf-v6-c-button pf-m-plain"
478
+ type="button"
479
+ aria-label="Go to next page"
480
+ >
481
+ <span class="pf-v6-c-button__icon">
482
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
483
+ </span>
484
+ </button>
485
+ </div>
486
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
487
+ <button
488
+ class="pf-v6-c-button pf-m-plain"
489
+ type="button"
490
+ disabled
491
+ aria-label="Go to last page"
492
+ >
493
+ <span class="pf-v6-c-button__icon">
494
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
495
+ </span>
496
+ </button>
497
+ </div>
498
+ </nav>
499
+ </div>
500
+
501
+ ```
502
+
503
+ ### Bottom static
504
+
505
+ ```html
506
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
507
+ <br />
508
+ <br />
509
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
510
+ <br />
511
+ <br />
512
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
513
+ <br />
514
+ <br />
515
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
516
+ <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
517
+ <div class="pf-v6-c-pagination__page-menu">
518
+ <button
519
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
409
520
  type="button"
410
521
  aria-expanded="false"
411
522
  aria-label="Menu toggle"
@@ -500,7 +611,7 @@ cssPrefix: pf-v6-c-pagination
500
611
  </div>
501
612
  <div class="pf-v6-c-pagination__page-menu">
502
613
  <button
503
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-disabled"
614
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain pf-m-disabled"
504
615
  type="button"
505
616
  aria-expanded="false"
506
617
  disabled
@@ -598,7 +709,7 @@ cssPrefix: pf-v6-c-pagination
598
709
  </div>
599
710
  <div class="pf-v6-c-pagination__page-menu">
600
711
  <button
601
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
712
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
602
713
  type="button"
603
714
  aria-expanded="false"
604
715
  aria-label="Menu toggle"
@@ -657,7 +768,7 @@ cssPrefix: pf-v6-c-pagination
657
768
  </div>
658
769
  <div class="pf-v6-c-pagination__page-menu">
659
770
  <button
660
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
771
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
661
772
  type="button"
662
773
  aria-expanded="false"
663
774
  aria-label="Menu toggle"
@@ -752,7 +863,7 @@ cssPrefix: pf-v6-c-pagination
752
863
  </div>
753
864
  <div class="pf-v6-c-pagination__page-menu">
754
865
  <button
755
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
866
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
756
867
  type="button"
757
868
  aria-expanded="false"
758
869
  aria-label="Menu toggle"
@@ -849,7 +960,7 @@ cssPrefix: pf-v6-c-pagination
849
960
  </div>
850
961
  <div class="pf-v6-c-pagination__page-menu">
851
962
  <button
852
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
963
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
853
964
  type="button"
854
965
  aria-expanded="false"
855
966
  aria-label="Menu toggle"
@@ -944,7 +1055,7 @@ cssPrefix: pf-v6-c-pagination
944
1055
  </div>
945
1056
  <div class="pf-v6-c-pagination__page-menu">
946
1057
  <button
947
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1058
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
948
1059
  type="button"
949
1060
  aria-expanded="false"
950
1061
  aria-label="Menu toggle"
@@ -1005,7 +1116,7 @@ cssPrefix: pf-v6-c-pagination
1005
1116
  </div>
1006
1117
  <div class="pf-v6-c-pagination__page-menu">
1007
1118
  <button
1008
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1119
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1009
1120
  type="button"
1010
1121
  aria-expanded="false"
1011
1122
  aria-label="Menu toggle"
package/docs/components/Popover/examples/Popover.md CHANGED
@@ -6,10 +6,6 @@ cssPrefix: pf-v6-c-popover
6
6
 
7
7
  ## Examples
8
8
 
9
- ```
10
- {{> popover-close}}
11
- ```
12
-
13
9
  ### Top
14
10
 
15
11
  ```html isFullscreen