@patternfly/patternfly 6.3.0 → 6.4.0-prerelease.1

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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +41 -1
  74. package/components/Table/table.scss +48 -2
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +7 -0
  78. package/components/TextInputGroup/text-input-group.scss +8 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +631 -168
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1803 -169
  138. package/patternfly.css +1838 -200
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/components/Login/examples/Login.md CHANGED
@@ -23,12 +23,12 @@ wrapperTag: div
23
23
  />
24
24
  </header>
25
25
  <main class="pf-v6-c-login__main">
26
- <header class="pf-v6-c-login__main-header">
26
+ <div class="pf-v6-c-login__main-header">
27
27
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
28
28
  <p
29
29
  class="pf-v6-c-login__main-header-desc"
30
30
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
31
- </header>
31
+ </div>
32
32
  <div class="pf-v6-c-login__main-body">
33
33
  <form class="pf-v6-c-form" novalidate>
34
34
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -37,9 +37,10 @@ wrapperTag: div
37
37
  <span class="pf-v6-c-helper-text__item-icon">
38
38
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
39
39
  </span>
40
- <span
41
- class="pf-v6-c-helper-text__item-text"
42
- >Invalid login credentials.</span>
40
+ <span class="pf-v6-c-helper-text__item-text">
41
+ <span class="pf-v6-screen-reader">Error:</span>
42
+ Invalid login credentials.
43
+ </span>
43
44
  </div>
44
45
  </div>
45
46
  </div>
@@ -100,7 +101,7 @@ wrapperTag: div
100
101
  </form>
101
102
  </div>
102
103
 
103
- <footer class="pf-v6-c-login__main-footer">
104
+ <div class="pf-v6-c-login__main-footer">
104
105
  <ul class="pf-v6-c-login__main-footer-links" role="list">
105
106
  <li class="pf-v6-c-login__main-footer-links-item">
106
107
  <button
@@ -217,7 +218,7 @@ wrapperTag: div
217
218
  <a href="#">Forgot username or password?</a>
218
219
  </p>
219
220
  </div>
220
- </footer>
221
+ </div>
221
222
  </main>
222
223
  <footer class="pf-v6-c-login__footer">
223
224
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -256,12 +257,12 @@ wrapperTag: div
256
257
  />
257
258
  </header>
258
259
  <main class="pf-v6-c-login__main">
259
- <header class="pf-v6-c-login__main-header">
260
+ <div class="pf-v6-c-login__main-header">
260
261
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
261
262
  <p
262
263
  class="pf-v6-c-login__main-header-desc"
263
264
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
264
- </header>
265
+ </div>
265
266
  <div class="pf-v6-c-login__main-body">
266
267
  <form class="pf-v6-c-form" novalidate>
267
268
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -270,9 +271,10 @@ wrapperTag: div
270
271
  <span class="pf-v6-c-helper-text__item-icon">
271
272
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
272
273
  </span>
273
- <span
274
- class="pf-v6-c-helper-text__item-text"
275
- >Invalid login credentials.</span>
274
+ <span class="pf-v6-c-helper-text__item-text">
275
+ <span class="pf-v6-screen-reader">Error:</span>
276
+ Invalid login credentials.
277
+ </span>
276
278
  </div>
277
279
  </div>
278
280
  </div>
@@ -350,7 +352,7 @@ wrapperTag: div
350
352
  </form>
351
353
  </div>
352
354
 
353
- <footer class="pf-v6-c-login__main-footer">
355
+ <div class="pf-v6-c-login__main-footer">
354
356
  <ul class="pf-v6-c-login__main-footer-links" role="list">
355
357
  <li class="pf-v6-c-login__main-footer-links-item">
356
358
  <button
@@ -467,7 +469,7 @@ wrapperTag: div
467
469
  <a href="#">Forgot username or password?</a>
468
470
  </p>
469
471
  </div>
470
- </footer>
472
+ </div>
471
473
  </main>
472
474
  <footer class="pf-v6-c-login__footer">
473
475
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -506,12 +508,12 @@ wrapperTag: div
506
508
  />
507
509
  </header>
508
510
  <main class="pf-v6-c-login__main">
509
- <header class="pf-v6-c-login__main-header">
511
+ <div class="pf-v6-c-login__main-header">
510
512
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
511
513
  <p
512
514
  class="pf-v6-c-login__main-header-desc"
513
515
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
514
- </header>
516
+ </div>
515
517
  <div class="pf-v6-c-login__main-body">
516
518
  <form class="pf-v6-c-form" novalidate>
517
519
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -520,9 +522,10 @@ wrapperTag: div
520
522
  <span class="pf-v6-c-helper-text__item-icon">
521
523
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
522
524
  </span>
523
- <span
524
- class="pf-v6-c-helper-text__item-text"
525
- >Invalid login credentials.</span>
525
+ <span class="pf-v6-c-helper-text__item-text">
526
+ <span class="pf-v6-screen-reader">Error:</span>
527
+ Invalid login credentials.
528
+ </span>
526
529
  </div>
527
530
  </div>
528
531
  </div>
@@ -595,7 +598,7 @@ wrapperTag: div
595
598
  </form>
596
599
  </div>
597
600
 
598
- <footer class="pf-v6-c-login__main-footer">
601
+ <div class="pf-v6-c-login__main-footer">
599
602
  <ul class="pf-v6-c-login__main-footer-links" role="list">
600
603
  <li class="pf-v6-c-login__main-footer-links-item">
601
604
  <button
@@ -712,7 +715,7 @@ wrapperTag: div
712
715
  <a href="#">Forgot username or password?</a>
713
716
  </p>
714
717
  </div>
715
- </footer>
718
+ </div>
716
719
  </main>
717
720
  <footer class="pf-v6-c-login__footer">
718
721
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -751,12 +754,12 @@ wrapperTag: div
751
754
  />
752
755
  </header>
753
756
  <main class="pf-v6-c-login__main">
754
- <header class="pf-v6-c-login__main-header">
757
+ <div class="pf-v6-c-login__main-header">
755
758
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
756
759
  <p
757
760
  class="pf-v6-c-login__main-header-desc"
758
761
  >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
759
- </header>
762
+ </div>
760
763
  <div class="pf-v6-c-login__main-body">
761
764
  <form class="pf-v6-c-form" novalidate>
762
765
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -765,9 +768,10 @@ wrapperTag: div
765
768
  <span class="pf-v6-c-helper-text__item-icon">
766
769
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
767
770
  </span>
768
- <span
769
- class="pf-v6-c-helper-text__item-text"
770
- >Invalid login credentials.</span>
771
+ <span class="pf-v6-c-helper-text__item-text">
772
+ <span class="pf-v6-screen-reader">Error:</span>
773
+ Invalid login credentials.
774
+ </span>
771
775
  </div>
772
776
  </div>
773
777
  </div>
@@ -847,7 +851,7 @@ wrapperTag: div
847
851
  </form>
848
852
  </div>
849
853
 
850
- <footer class="pf-v6-c-login__main-footer">
854
+ <div class="pf-v6-c-login__main-footer">
851
855
  <ul class="pf-v6-c-login__main-footer-links" role="list">
852
856
  <li class="pf-v6-c-login__main-footer-links-item">
853
857
  <button
@@ -964,7 +968,7 @@ wrapperTag: div
964
968
  <a href="#">Forgot username or password?</a>
965
969
  </p>
966
970
  </div>
967
- </footer>
971
+ </div>
968
972
  </main>
969
973
  <footer class="pf-v6-c-login__footer">
970
974
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -1003,7 +1007,7 @@ wrapperTag: div
1003
1007
  />
1004
1008
  </header>
1005
1009
  <main class="pf-v6-c-login__main">
1006
- <header class="pf-v6-c-login__main-header">
1010
+ <div class="pf-v6-c-login__main-header">
1007
1011
  <h1 class="pf-v6-c-title pf-m-3xl">Log in to your account</h1>
1008
1012
  <p
1009
1013
  class="pf-v6-c-login__main-header-desc"
@@ -1023,7 +1027,7 @@ wrapperTag: div
1023
1027
  </span>
1024
1028
  </button>
1025
1029
  </div>
1026
- </header>
1030
+ </div>
1027
1031
  <div class="pf-v6-c-login__main-body">
1028
1032
  <form class="pf-v6-c-form" novalidate>
1029
1033
  <div class="pf-v6-c-form__helper-text" aria-live="polite">
@@ -1032,9 +1036,10 @@ wrapperTag: div
1032
1036
  <span class="pf-v6-c-helper-text__item-icon">
1033
1037
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1034
1038
  </span>
1035
- <span
1036
- class="pf-v6-c-helper-text__item-text"
1037
- >Invalid login credentials.</span>
1039
+ <span class="pf-v6-c-helper-text__item-text">
1040
+ <span class="pf-v6-screen-reader">Error:</span>
1041
+ Invalid login credentials.
1042
+ </span>
1038
1043
  </div>
1039
1044
  </div>
1040
1045
  </div>
@@ -1094,7 +1099,7 @@ wrapperTag: div
1094
1099
  </form>
1095
1100
  </div>
1096
1101
 
1097
- <footer class="pf-v6-c-login__main-footer">
1102
+ <div class="pf-v6-c-login__main-footer">
1098
1103
  <ul class="pf-v6-c-login__main-footer-links" role="list">
1099
1104
  <li class="pf-v6-c-login__main-footer-links-item">
1100
1105
  <button
@@ -1211,7 +1216,7 @@ wrapperTag: div
1211
1216
  <a href="#">Forgot username or password?</a>
1212
1217
  </p>
1213
1218
  </div>
1214
- </footer>
1219
+ </div>
1215
1220
  </main>
1216
1221
  <footer class="pf-v6-c-login__footer">
1217
1222
  <p>This is placeholder text only. Use this area to place any information or introductory message about your application that may be relevant to users.</p>
@@ -1243,14 +1248,14 @@ wrapperTag: div
1243
1248
  | `.pf-v6-c-login__header` | `<header>` | Positions the login header. **Required**|
1244
1249
  | `.pf-v6-c-login__header .pf-v6-c-brand` | `<img>` | Creates a brand image inside of login header. **Required** |
1245
1250
  | `.pf-v6-c-login__main` | `<main>` | Positions the login main area. **Required** |
1246
- | `.pf-v6-c-login__main-header` | `<header>` | Creates the header of the main area. **Required** |
1251
+ | `.pf-v6-c-login__main-header` | `<div>` | Creates the header of the main area. **Required** |
1247
1252
  | `.pf-v6-c-login__main-header .pf-v6-c-title` | `<h1>,<h2>,<h3>,<h4>,<h5>,<h6>` | Creates a title in the main header area. **Required** |
1248
1253
  | `.pf-v6-c-login__main-header-desc` | `<p>` | Creates the description in the main area header. |
1249
1254
  | `.pf-v6-c-login__main-header-utilities` | `<div>` | Creates a utilities section in the main header area. **Note:** For use with a language selector menu. |
1250
1255
  | `.pf-v6-c-login__main-body` | `<div>` | Creates the body of the main area. **Required** |
1251
1256
  | `.pf-v6-c-login__main-body .pf-v6-c-form` | `<form>` | Creates the login form in the main body area. **Required**|
1252
1257
  | `.pf-v6-c-login__main-body .pf-v6-c-form .pf-v6-c-form-helper-text` | `<form>` | Creates the error messages shown when the form has errors. When not active, apply `.pf-m-hidden`. **Required** |
1253
- | `.pf-v6-c-login__main-footer` | `<footer>` | Creates the footer of the main area. **Required** |
1258
+ | `.pf-v6-c-login__main-footer` | `<div>` | Creates the footer of the main area. **Required** |
1254
1259
  | `.pf-v6-c-login__main-footer-links` | `<ul>` | Creates a list of links in the main footer. **Required** |
1255
1260
  | `.pf-v6-c-login__main-footer-links-item` | `<li>` | Creates proper spacing for links in the main footer. **Required** |
1256
1261
  | `.pf-v6-c-login__main-footer-links-item-link` | `<a>` | Creates link in links list in footer. **Required** |
package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md CHANGED
@@ -139,7 +139,7 @@ cssPrefix: pf-v6-c-multiple-file-upload
139
139
  <div class="pf-v6-c-multiple-file-upload__status">
140
140
  <div class="pf-v6-c-expandable-section">
141
141
  <div class="pf-v6-c-expandable-section__toggle">
142
- <button class="pf-v6-c-button pf-m-link" type="button">
142
+ <button class="pf-v6-c-button pf-m-link" id="-toggle" type="button">
143
143
  <span class="pf-v6-c-button__icon pf-m-start">
144
144
  <span class="pf-v6-c-expandable-section__toggle-icon">
145
145
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -157,7 +157,13 @@ cssPrefix: pf-v6-c-multiple-file-upload
157
157
  </span>
158
158
  </button>
159
159
  </div>
160
- <div class="pf-v6-c-expandable-section__content" hidden>
160
+ <div
161
+ class="pf-v6-c-expandable-section__content"
162
+ hidden
163
+ id="-content"
164
+ role="region"
165
+ aria-labelledby="-toggle"
166
+ >
161
167
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
162
168
  <li class="pf-v6-c-multiple-file-upload__status-item">
163
169
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
@@ -346,7 +352,12 @@ cssPrefix: pf-v6-c-multiple-file-upload
346
352
  <div class="pf-v6-c-multiple-file-upload__status">
347
353
  <div class="pf-v6-c-expandable-section pf-m-expanded">
348
354
  <div class="pf-v6-c-expandable-section__toggle">
349
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
355
+ <button
356
+ class="pf-v6-c-button pf-m-link"
357
+ id="-toggle"
358
+ type="button"
359
+ aria-expanded="true"
360
+ >
350
361
  <span class="pf-v6-c-button__icon pf-m-start">
351
362
  <span class="pf-v6-c-expandable-section__toggle-icon">
352
363
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -364,7 +375,12 @@ cssPrefix: pf-v6-c-multiple-file-upload
364
375
  </span>
365
376
  </button>
366
377
  </div>
367
- <div class="pf-v6-c-expandable-section__content">
378
+ <div
379
+ class="pf-v6-c-expandable-section__content"
380
+ id="-content"
381
+ role="region"
382
+ aria-labelledby="-toggle"
383
+ >
368
384
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
369
385
  <li class="pf-v6-c-multiple-file-upload__status-item">
370
386
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
@@ -553,7 +569,12 @@ cssPrefix: pf-v6-c-multiple-file-upload
553
569
  <div class="pf-v6-c-multiple-file-upload__status">
554
570
  <div class="pf-v6-c-expandable-section pf-m-expanded">
555
571
  <div class="pf-v6-c-expandable-section__toggle">
556
- <button class="pf-v6-c-button pf-m-link" type="button" aria-expanded>
572
+ <button
573
+ class="pf-v6-c-button pf-m-link"
574
+ id="-toggle"
575
+ type="button"
576
+ aria-expanded="true"
577
+ >
557
578
  <span class="pf-v6-c-button__icon pf-m-start">
558
579
  <span class="pf-v6-c-expandable-section__toggle-icon">
559
580
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -571,7 +592,12 @@ cssPrefix: pf-v6-c-multiple-file-upload
571
592
  </span>
572
593
  </button>
573
594
  </div>
574
- <div class="pf-v6-c-expandable-section__content">
595
+ <div
596
+ class="pf-v6-c-expandable-section__content"
597
+ id="-content"
598
+ role="region"
599
+ aria-labelledby="-toggle"
600
+ >
575
601
  <ul class="pf-v6-c-multiple-file-upload__status-list" role="list">
576
602
  <li class="pf-v6-c-multiple-file-upload__status-item">
577
603
  <div class="pf-v6-c-multiple-file-upload__status-item-icon">
package/docs/components/Pagination/examples/Pagination.md CHANGED
@@ -301,6 +301,16 @@ 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
@@ -490,6 +500,107 @@ cssPrefix: pf-v6-c-pagination
490
500
 
491
501
  ```
492
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"
520
+ type="button"
521
+ aria-expanded="false"
522
+ aria-label="Menu toggle"
523
+ id="pagination-menu-toggle-bottom-sticky-example"
524
+ >
525
+ <span class="pf-v6-c-menu-toggle__text">
526
+ <b>1 - 10</b>&nbsp;of&nbsp;
527
+ <b>36</b>
528
+ </span>
529
+ <span class="pf-v6-c-menu-toggle__controls">
530
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
531
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
532
+ </span>
533
+ </span>
534
+ </button>
535
+ </div>
536
+ <nav
537
+ class="pf-v6-c-pagination__nav"
538
+ aria-label="Pagination nav - bottom sticky example"
539
+ >
540
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
541
+ <button
542
+ class="pf-v6-c-button pf-m-plain"
543
+ type="button"
544
+ disabled
545
+ aria-label="Go to first page"
546
+ >
547
+ <span class="pf-v6-c-button__icon">
548
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
549
+ </span>
550
+ </button>
551
+ </div>
552
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
553
+ <button
554
+ class="pf-v6-c-button pf-m-plain"
555
+ type="button"
556
+ disabled
557
+ aria-label="Go to previous page"
558
+ >
559
+ <span class="pf-v6-c-button__icon">
560
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
561
+ </span>
562
+ </button>
563
+ </div>
564
+ <div class="pf-v6-c-pagination__nav-page-select">
565
+ <span class="pf-v6-c-form-control">
566
+ <input
567
+ aria-label="Current page"
568
+ type="number"
569
+ min="1"
570
+ max="4"
571
+ value="1"
572
+ />
573
+ </span>
574
+ <span aria-hidden="true">of 4</span>
575
+ </div>
576
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
577
+ <button
578
+ class="pf-v6-c-button pf-m-plain"
579
+ type="button"
580
+ aria-label="Go to next page"
581
+ >
582
+ <span class="pf-v6-c-button__icon">
583
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
584
+ </span>
585
+ </button>
586
+ </div>
587
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
588
+ <button
589
+ class="pf-v6-c-button pf-m-plain"
590
+ type="button"
591
+ disabled
592
+ aria-label="Go to last page"
593
+ >
594
+ <span class="pf-v6-c-button__icon">
595
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
596
+ </span>
597
+ </button>
598
+ </div>
599
+ </nav>
600
+ </div>
601
+
602
+ ```
603
+
493
604
  ### Top disabled
494
605
 
495
606
  ```html
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