@patternfly/patternfly 6.5.0-prerelease.63 → 6.5.0-prerelease.64

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 (31) hide show
  1. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  2. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  3. package/components/_index.css +7 -1
  4. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  5. package/docs/components/Page/examples/Page.md +62 -15
  6. package/docs/demos/AboutModal/examples/AboutModal.md +8 -2
  7. package/docs/demos/Alert/examples/Alert.md +24 -6
  8. package/docs/demos/BackToTop/examples/BackToTop.md +8 -2
  9. package/docs/demos/Banner/examples/Banner.md +16 -4
  10. package/docs/demos/CardView/examples/CardView.md +8 -2
  11. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  12. package/docs/demos/DataList/examples/DataList.md +32 -8
  13. package/docs/demos/DescriptionList/examples/DescriptionList.md +24 -6
  14. package/docs/demos/Drawer/examples/Drawer.md +24 -6
  15. package/docs/demos/JumpLinks/examples/JumpLinks.md +32 -8
  16. package/docs/demos/Masthead/examples/Masthead.md +72 -18
  17. package/docs/demos/Modal/examples/Modal.md +48 -12
  18. package/docs/demos/Nav/examples/Nav.md +80 -20
  19. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +40 -10
  20. package/docs/demos/Page/examples/Page.md +113 -28
  21. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +56 -14
  22. package/docs/demos/Skeleton/examples/Skeleton.md +8 -2
  23. package/docs/demos/Table/examples/Table.md +128 -32
  24. package/docs/demos/Tabs/examples/Tabs.md +48 -12
  25. package/docs/demos/Toolbar/examples/Toolbar.md +16 -4
  26. package/docs/demos/Wizard/examples/Wizard.md +72 -18
  27. package/package.json +1 -1
  28. package/patternfly-no-globals.css +7 -1
  29. package/patternfly.css +7 -1
  30. package/patternfly.min.css +1 -1
  31. package/patternfly.min.css.map +1 -1
@@ -339,9 +339,15 @@ wrapperTag: div
339
339
  </nav>
340
340
  </div>
341
341
  </section>
342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
343
346
  <div class="pf-v6-c-page__main-body">
344
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
345
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
346
352
  </div>
347
353
  </section>
@@ -741,9 +747,15 @@ wrapperTag: div
741
747
  </nav>
742
748
  </div>
743
749
  </section>
744
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
750
+ <section
751
+ class="pf-v6-c-page__main-section pf-m-limit-width"
752
+ aria-labelledby="main-title"
753
+ >
745
754
  <div class="pf-v6-c-page__main-body">
746
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
755
+ <h1
756
+ class="pf-v6-c-content--h1 pf-m-page-title"
757
+ id="main-title"
758
+ >Main title</h1>
747
759
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
748
760
  </div>
749
761
  </section>
@@ -1155,9 +1167,15 @@ wrapperTag: div
1155
1167
  </nav>
1156
1168
  </div>
1157
1169
  </section>
1158
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1170
+ <section
1171
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1172
+ aria-labelledby="main-title"
1173
+ >
1159
1174
  <div class="pf-v6-c-page__main-body">
1160
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1175
+ <h1
1176
+ class="pf-v6-c-content--h1 pf-m-page-title"
1177
+ id="main-title"
1178
+ >Main title</h1>
1161
1179
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1162
1180
  </div>
1163
1181
  </section>
@@ -1661,9 +1679,15 @@ wrapperTag: div
1661
1679
  </nav>
1662
1680
  </div>
1663
1681
  </section>
1664
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1682
+ <section
1683
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1684
+ aria-labelledby="main-title"
1685
+ >
1665
1686
  <div class="pf-v6-c-page__main-body">
1666
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1687
+ <h1
1688
+ class="pf-v6-c-content--h1 pf-m-page-title"
1689
+ id="main-title"
1690
+ >Main title</h1>
1667
1691
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1668
1692
  </div>
1669
1693
  </section>
@@ -2167,9 +2191,15 @@ wrapperTag: div
2167
2191
  </nav>
2168
2192
  </div>
2169
2193
  </section>
2170
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2194
+ <section
2195
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2196
+ aria-labelledby="main-title"
2197
+ >
2171
2198
  <div class="pf-v6-c-page__main-body">
2172
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2199
+ <h1
2200
+ class="pf-v6-c-content--h1 pf-m-page-title"
2201
+ id="main-title"
2202
+ >Main title</h1>
2173
2203
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2174
2204
  </div>
2175
2205
  </section>
@@ -2675,9 +2705,15 @@ wrapperTag: div
2675
2705
  </nav>
2676
2706
  </div>
2677
2707
  </section>
2678
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2708
+ <section
2709
+ class="pf-v6-c-page__main-section pf-m-limit-width"
2710
+ aria-labelledby="main-title"
2711
+ >
2679
2712
  <div class="pf-v6-c-page__main-body">
2680
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2713
+ <h1
2714
+ class="pf-v6-c-content--h1 pf-m-page-title"
2715
+ id="main-title"
2716
+ >Main title</h1>
2681
2717
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
2682
2718
  </div>
2683
2719
  </section>
@@ -3180,9 +3216,15 @@ wrapperTag: div
3180
3216
  </nav>
3181
3217
  </div>
3182
3218
  </section>
3183
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3219
+ <section
3220
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3221
+ aria-labelledby="main-title"
3222
+ >
3184
3223
  <div class="pf-v6-c-page__main-body">
3185
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3224
+ <h1
3225
+ class="pf-v6-c-content--h1 pf-m-page-title"
3226
+ id="main-title"
3227
+ >Main title</h1>
3186
3228
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3187
3229
  </div>
3188
3230
  </section>
@@ -3693,9 +3735,13 @@ wrapperTag: div
3693
3735
  </section>
3694
3736
  <section
3695
3737
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-shadow-bottom"
3738
+ aria-labelledby="main-title"
3696
3739
  >
3697
3740
  <div class="pf-v6-c-page__main-body">
3698
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3741
+ <h1
3742
+ class="pf-v6-c-content--h1 pf-m-page-title"
3743
+ id="main-title"
3744
+ >Main title</h1>
3699
3745
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3700
3746
  </div>
3701
3747
  </section>
@@ -4137,10 +4183,11 @@ wrapperTag: div
4137
4183
  >
4138
4184
  <section
4139
4185
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4186
+ aria-labelledby="centered-page-sections-title"
4140
4187
  >
4141
4188
  <div class="pf-v6-c-page__main-body">
4142
4189
  <div class="pf-v6-c-content">
4143
- <h1>Centering page sections</h1>
4190
+ <h1 id="centered-page-sections-title">Centering page sections</h1>
4144
4191
  <p>
4145
4192
  When a width limited page section is wider than the value of
4146
4193
  <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
@@ -4152,6 +4199,7 @@ wrapperTag: div
4152
4199
  <hr class="pf-v6-c-divider" />
4153
4200
  <section
4154
4201
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
4202
+ aria-label="Gallery cards section"
4155
4203
  >
4156
4204
  <div class="pf-v6-c-page__main-body">
4157
4205
  <div class="pf-v6-l-gallery pf-m-gutter">
@@ -4191,6 +4239,7 @@ wrapperTag: div
4191
4239
  <hr class="pf-v6-c-divider" />
4192
4240
  <section
4193
4241
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v6-u-text-align-center"
4242
+ aria-label="Centered text section"
4194
4243
  >
4195
4244
  <div class="pf-v6-c-page__main-body">
4196
4245
  <div class="pf-v6-c-card">
@@ -4574,9 +4623,15 @@ wrapperTag: div
4574
4623
  </nav>
4575
4624
  </div>
4576
4625
  </section>
4577
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4626
+ <section
4627
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4628
+ aria-labelledby="main-title"
4629
+ >
4578
4630
  <div class="pf-v6-c-page__main-body">
4579
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4631
+ <h1
4632
+ class="pf-v6-c-content--h1 pf-m-page-title"
4633
+ id="main-title"
4634
+ >Main title</h1>
4580
4635
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4581
4636
  </div>
4582
4637
  </section>
@@ -5035,9 +5090,15 @@ wrapperTag: div
5035
5090
  </nav>
5036
5091
  </div>
5037
5092
  </section>
5038
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5093
+ <section
5094
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5095
+ aria-labelledby="main-title"
5096
+ >
5039
5097
  <div class="pf-v6-c-page__main-body">
5040
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5098
+ <h1
5099
+ class="pf-v6-c-content--h1 pf-m-page-title"
5100
+ id="main-title"
5101
+ >Main title</h1>
5041
5102
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5042
5103
  </div>
5043
5104
  </section>
@@ -5419,9 +5480,15 @@ wrapperTag: div
5419
5480
  </nav>
5420
5481
  </div>
5421
5482
  </section>
5422
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5483
+ <section
5484
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5485
+ aria-labelledby="main-title"
5486
+ >
5423
5487
  <div class="pf-v6-c-page__main-body">
5424
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5488
+ <h1
5489
+ class="pf-v6-c-content--h1 pf-m-page-title"
5490
+ id="main-title"
5491
+ >Main title</h1>
5425
5492
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5426
5493
  </div>
5427
5494
  </section>
@@ -5803,9 +5870,15 @@ wrapperTag: div
5803
5870
  </nav>
5804
5871
  </div>
5805
5872
  </section>
5806
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5873
+ <section
5874
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5875
+ aria-labelledby="main-title"
5876
+ >
5807
5877
  <div class="pf-v6-c-page__main-body">
5808
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5878
+ <h1
5879
+ class="pf-v6-c-content--h1 pf-m-page-title"
5880
+ id="main-title"
5881
+ >Main title</h1>
5809
5882
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5810
5883
  </div>
5811
5884
  </section>
@@ -6144,9 +6217,15 @@ wrapperTag: div
6144
6217
  </nav>
6145
6218
  </div>
6146
6219
  </section>
6147
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6220
+ <section
6221
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6222
+ aria-labelledby="main-title"
6223
+ >
6148
6224
  <div class="pf-v6-c-page__main-body">
6149
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6225
+ <h1
6226
+ class="pf-v6-c-content--h1 pf-m-page-title"
6227
+ id="main-title"
6228
+ >Main title</h1>
6150
6229
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6151
6230
  </div>
6152
6231
  </section>
@@ -6274,9 +6353,15 @@ wrapperTag: div
6274
6353
  </nav>
6275
6354
  </div>
6276
6355
  </section>
6277
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6356
+ <section
6357
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6358
+ aria-labelledby="main-title"
6359
+ >
6278
6360
  <div class="pf-v6-c-page__main-body">
6279
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6361
+ <h1
6362
+ class="pf-v6-c-content--h1 pf-m-page-title"
6363
+ id="main-title"
6364
+ >Main title</h1>
6280
6365
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6281
6366
  </div>
6282
6367
  </section>
@@ -343,9 +343,15 @@ wrapperTag: div
343
343
  </nav>
344
344
  </div>
345
345
  </section>
346
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
346
+ <section
347
+ class="pf-v6-c-page__main-section pf-m-limit-width"
348
+ aria-labelledby="main-title"
349
+ >
347
350
  <div class="pf-v6-c-page__main-body">
348
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
351
+ <h1
352
+ class="pf-v6-c-content--h1 pf-m-page-title"
353
+ id="main-title"
354
+ >Main title</h1>
349
355
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
350
356
  </div>
351
357
  </section>
@@ -1793,9 +1799,15 @@ wrapperTag: div
1793
1799
  </nav>
1794
1800
  </div>
1795
1801
  </section>
1796
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1802
+ <section
1803
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1804
+ aria-labelledby="main-title"
1805
+ >
1797
1806
  <div class="pf-v6-c-page__main-body">
1798
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1807
+ <h1
1808
+ class="pf-v6-c-content--h1 pf-m-page-title"
1809
+ id="main-title"
1810
+ >Main title</h1>
1799
1811
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1800
1812
  </div>
1801
1813
  </section>
@@ -3132,9 +3144,15 @@ wrapperTag: div
3132
3144
  </nav>
3133
3145
  </div>
3134
3146
  </section>
3135
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3147
+ <section
3148
+ class="pf-v6-c-page__main-section pf-m-limit-width"
3149
+ aria-labelledby="main-title"
3150
+ >
3136
3151
  <div class="pf-v6-c-page__main-body">
3137
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3152
+ <h1
3153
+ class="pf-v6-c-content--h1 pf-m-page-title"
3154
+ id="main-title"
3155
+ >Main title</h1>
3138
3156
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
3139
3157
  </div>
3140
3158
  </section>
@@ -4406,9 +4424,15 @@ wrapperTag: div
4406
4424
  </nav>
4407
4425
  </div>
4408
4426
  </section>
4409
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4427
+ <section
4428
+ class="pf-v6-c-page__main-section pf-m-limit-width"
4429
+ aria-labelledby="main-title"
4430
+ >
4410
4431
  <div class="pf-v6-c-page__main-body">
4411
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4432
+ <h1
4433
+ class="pf-v6-c-content--h1 pf-m-page-title"
4434
+ id="main-title"
4435
+ >Main title</h1>
4412
4436
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
4413
4437
  </div>
4414
4438
  </section>
@@ -5826,9 +5850,15 @@ wrapperTag: div
5826
5850
  </nav>
5827
5851
  </div>
5828
5852
  </section>
5829
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
5853
+ <section
5854
+ class="pf-v6-c-page__main-section pf-m-limit-width"
5855
+ aria-labelledby="main-title"
5856
+ >
5830
5857
  <div class="pf-v6-c-page__main-body">
5831
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5858
+ <h1
5859
+ class="pf-v6-c-content--h1 pf-m-page-title"
5860
+ id="main-title"
5861
+ >Main title</h1>
5832
5862
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
5833
5863
  </div>
5834
5864
  </section>
@@ -6374,9 +6404,15 @@ wrapperTag: div
6374
6404
  </nav>
6375
6405
  </div>
6376
6406
  </section>
6377
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
6407
+ <section
6408
+ class="pf-v6-c-page__main-section pf-m-limit-width"
6409
+ aria-labelledby="main-title"
6410
+ >
6378
6411
  <div class="pf-v6-c-page__main-body">
6379
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
6412
+ <h1
6413
+ class="pf-v6-c-content--h1 pf-m-page-title"
6414
+ id="main-title"
6415
+ >Main title</h1>
6380
6416
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
6381
6417
  </div>
6382
6418
  </section>
@@ -7071,9 +7107,15 @@ wrapperTag: div
7071
7107
  </nav>
7072
7108
  </div>
7073
7109
  </section>
7074
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
7110
+ <section
7111
+ class="pf-v6-c-page__main-section pf-m-limit-width"
7112
+ aria-labelledby="main-title"
7113
+ >
7075
7114
  <div class="pf-v6-c-page__main-body">
7076
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
7115
+ <h1
7116
+ class="pf-v6-c-content--h1 pf-m-page-title"
7117
+ id="main-title"
7118
+ >Main title</h1>
7077
7119
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
7078
7120
  </div>
7079
7121
  </section>
@@ -339,9 +339,15 @@ section: components
339
339
  </nav>
340
340
  </div>
341
341
  </section>
342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
343
346
  <div class="pf-v6-c-page__main-body">
344
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
345
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
346
352
  </div>
347
353
  </section>