@patternfly/patternfly 6.5.0-prerelease.25 → 6.5.0-prerelease.26

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 (17) hide show
  1. package/components/Compass/compass.css +78 -9
  2. package/components/Compass/compass.scss +85 -50
  3. package/components/_index.css +78 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +6 -5
  6. package/docs/components/Tabs/examples/Tabs.md +813 -77
  7. package/docs/demos/Card/examples/Card.md +14 -2
  8. package/docs/demos/Compass/examples/Compass.md +109 -30
  9. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -2
  10. package/docs/demos/Drawer/examples/Drawer.md +11 -2
  11. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -2
  12. package/docs/demos/Tabs/examples/Tabs.md +72 -9
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +78 -9
  15. package/patternfly.css +78 -9
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -769,13 +769,21 @@ cssPrefix: pf-d-description-list
769
769
  </div>
770
770
  </div>
771
771
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
772
- <div class="pf-v6-c-tabs pf-m-box pf-m-fill">
773
- <ul class="pf-v6-c-tabs__list" role="tablist">
772
+ <div
773
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
774
+ aria-label="Drawer panel"
775
+ >
776
+ <ul
777
+ class="pf-v6-c-tabs__list"
778
+ role="tablist"
779
+ aria-label="Drawer panel"
780
+ >
774
781
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
775
782
  <button
776
783
  type="button"
777
784
  class="pf-v6-c-tabs__link"
778
785
  role="tab"
786
+ aria-selected="true"
779
787
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
780
788
  >
781
789
  <span class="pf-v6-c-tabs__item-text">Overview</span>
@@ -786,6 +794,7 @@ cssPrefix: pf-d-description-list
786
794
  type="button"
787
795
  class="pf-v6-c-tabs__link"
788
796
  role="tab"
797
+ aria-selected="false"
789
798
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
790
799
  >
791
800
  <span class="pf-v6-c-tabs__item-text">Activity</span>
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -380,13 +380,21 @@ wrapperTag: div
380
380
  </div>
381
381
  </div>
382
382
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
383
- <div class="pf-v6-c-tabs pf-m-box pf-m-fill">
384
- <ul class="pf-v6-c-tabs__list" role="tablist">
383
+ <div
384
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
385
+ aria-label="Drawer panel"
386
+ >
387
+ <ul
388
+ class="pf-v6-c-tabs__list"
389
+ role="tablist"
390
+ aria-label="Drawer panel"
391
+ >
385
392
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
386
393
  <button
387
394
  type="button"
388
395
  class="pf-v6-c-tabs__link"
389
396
  role="tab"
397
+ aria-selected="true"
390
398
  id="drawer-collapsed-example-panel-tabs-tab1-link"
391
399
  >
392
400
  <span class="pf-v6-c-tabs__item-text">Overview</span>
@@ -397,6 +405,7 @@ wrapperTag: div
397
405
  type="button"
398
406
  class="pf-v6-c-tabs__link"
399
407
  role="tab"
408
+ aria-selected="false"
400
409
  id="drawer-collapsed-example-panel-tabs-tab2-link"
401
410
  >
402
411
  <span class="pf-v6-c-tabs__item-text">Activity</span>
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -1112,6 +1112,7 @@ wrapperTag: div
1112
1112
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
1113
1113
  <div
1114
1114
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
1115
+ aria-label="Node 2"
1115
1116
  role="region"
1116
1117
  id="primary-detail-expanded-example-drawer-tabs"
1117
1118
  >
@@ -1126,7 +1127,11 @@ wrapperTag: div
1126
1127
  </span>
1127
1128
  </button>
1128
1129
  </div>
1129
- <ul class="pf-v6-c-tabs__list" role="tablist">
1130
+ <ul
1131
+ class="pf-v6-c-tabs__list"
1132
+ role="tablist"
1133
+ aria-label="Node 2"
1134
+ >
1130
1135
  <li
1131
1136
  class="pf-v6-c-tabs__item pf-m-current"
1132
1137
  role="presentation"
@@ -1135,6 +1140,7 @@ wrapperTag: div
1135
1140
  type="button"
1136
1141
  class="pf-v6-c-tabs__link"
1137
1142
  role="tab"
1143
+ aria-selected="true"
1138
1144
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1139
1145
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
1140
1146
  >
@@ -1146,6 +1152,7 @@ wrapperTag: div
1146
1152
  type="button"
1147
1153
  class="pf-v6-c-tabs__link"
1148
1154
  role="tab"
1155
+ aria-selected="false"
1149
1156
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1150
1157
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
1151
1158
  >
@@ -6727,6 +6734,7 @@ wrapperTag: div
6727
6734
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
6728
6735
  <div
6729
6736
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
6737
+ aria-label="Node 2"
6730
6738
  role="region"
6731
6739
  id="primary-detail-inline-modifier-example-drawer-tabs"
6732
6740
  >
@@ -6741,7 +6749,11 @@ wrapperTag: div
6741
6749
  </span>
6742
6750
  </button>
6743
6751
  </div>
6744
- <ul class="pf-v6-c-tabs__list" role="tablist">
6752
+ <ul
6753
+ class="pf-v6-c-tabs__list"
6754
+ role="tablist"
6755
+ aria-label="Node 2"
6756
+ >
6745
6757
  <li
6746
6758
  class="pf-v6-c-tabs__item pf-m-current"
6747
6759
  role="presentation"
@@ -6750,6 +6762,7 @@ wrapperTag: div
6750
6762
  type="button"
6751
6763
  class="pf-v6-c-tabs__link"
6752
6764
  role="tab"
6765
+ aria-selected="true"
6753
6766
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6754
6767
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
6755
6768
  >
@@ -6761,6 +6774,7 @@ wrapperTag: div
6761
6774
  type="button"
6762
6775
  class="pf-v6-c-tabs__link"
6763
6776
  role="tab"
6777
+ aria-selected="false"
6764
6778
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6765
6779
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"
6766
6780
  >
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -287,15 +287,17 @@ section: components
287
287
  <div class="pf-v6-c-page__main-body">
288
288
  <div
289
289
  class="pf-v6-c-tabs pf-m-page-insets"
290
+ aria-label="Pod"
290
291
  role="region"
291
292
  id="tabs-tables-and-tabs-example-tabs"
292
293
  >
293
- <ul class="pf-v6-c-tabs__list" role="tablist">
294
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
294
295
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
295
296
  <button
296
297
  type="button"
297
298
  class="pf-v6-c-tabs__link"
298
299
  role="tab"
300
+ aria-selected="true"
299
301
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
300
302
  id="tabs-tables-and-tabs-example-tabs-details-link"
301
303
  >
@@ -307,6 +309,7 @@ section: components
307
309
  type="button"
308
310
  class="pf-v6-c-tabs__link"
309
311
  role="tab"
312
+ aria-selected="false"
310
313
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
311
314
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
312
315
  >
@@ -318,6 +321,7 @@ section: components
318
321
  type="button"
319
322
  class="pf-v6-c-tabs__link"
320
323
  role="tab"
324
+ aria-selected="false"
321
325
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
322
326
  id="tabs-tables-and-tabs-example-tabs-environment-link"
323
327
  >
@@ -329,6 +333,7 @@ section: components
329
333
  type="button"
330
334
  class="pf-v6-c-tabs__link"
331
335
  role="tab"
336
+ aria-selected="false"
332
337
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
333
338
  id="tabs-tables-and-tabs-example-tabs-logs-link"
334
339
  >
@@ -340,6 +345,7 @@ section: components
340
345
  type="button"
341
346
  class="pf-v6-c-tabs__link"
342
347
  role="tab"
348
+ aria-selected="false"
343
349
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
344
350
  id="tabs-tables-and-tabs-example-tabs-events-link"
345
351
  >
@@ -351,6 +357,7 @@ section: components
351
357
  type="button"
352
358
  class="pf-v6-c-tabs__link"
353
359
  role="tab"
360
+ aria-selected="false"
354
361
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
355
362
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
356
363
  >
@@ -872,15 +879,17 @@ section: components
872
879
  <div class="pf-v6-c-page__main-body">
873
880
  <div
874
881
  class="pf-v6-c-tabs pf-m-page-insets"
882
+ aria-label="Pod"
875
883
  role="region"
876
884
  id="tabs-tables-and-tabs-example-tabs"
877
885
  >
878
- <ul class="pf-v6-c-tabs__list" role="tablist">
886
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Pod">
879
887
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
880
888
  <button
881
889
  type="button"
882
890
  class="pf-v6-c-tabs__link"
883
891
  role="tab"
892
+ aria-selected="true"
884
893
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
885
894
  id="tabs-tables-and-tabs-example-tabs-details-link"
886
895
  >
@@ -892,6 +901,7 @@ section: components
892
901
  type="button"
893
902
  class="pf-v6-c-tabs__link"
894
903
  role="tab"
904
+ aria-selected="false"
895
905
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
896
906
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
897
907
  >
@@ -903,6 +913,7 @@ section: components
903
913
  type="button"
904
914
  class="pf-v6-c-tabs__link"
905
915
  role="tab"
916
+ aria-selected="false"
906
917
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
907
918
  id="tabs-tables-and-tabs-example-tabs-environment-link"
908
919
  >
@@ -914,6 +925,7 @@ section: components
914
925
  type="button"
915
926
  class="pf-v6-c-tabs__link"
916
927
  role="tab"
928
+ aria-selected="false"
917
929
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
918
930
  id="tabs-tables-and-tabs-example-tabs-logs-link"
919
931
  >
@@ -925,6 +937,7 @@ section: components
925
937
  type="button"
926
938
  class="pf-v6-c-tabs__link"
927
939
  role="tab"
940
+ aria-selected="false"
928
941
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
929
942
  id="tabs-tables-and-tabs-example-tabs-events-link"
930
943
  >
@@ -936,6 +949,7 @@ section: components
936
949
  type="button"
937
950
  class="pf-v6-c-tabs__link"
938
951
  role="tab"
952
+ aria-selected="false"
939
953
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
940
954
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
941
955
  >
@@ -950,15 +964,21 @@ section: components
950
964
  <div class="pf-v6-c-page__main-body">
951
965
  <div
952
966
  class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
967
+ aria-label="Pod details"
953
968
  role="region"
954
969
  id="tabs-tables-and-tabs-example-tabs-secondary"
955
970
  >
956
- <ul class="pf-v6-c-tabs__list" role="tablist">
971
+ <ul
972
+ class="pf-v6-c-tabs__list"
973
+ role="tablist"
974
+ aria-label="Pod details"
975
+ >
957
976
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
958
977
  <button
959
978
  type="button"
960
979
  class="pf-v6-c-tabs__link"
961
980
  role="tab"
981
+ aria-selected="true"
962
982
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
963
983
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
964
984
  >
@@ -970,6 +990,7 @@ section: components
970
990
  type="button"
971
991
  class="pf-v6-c-tabs__link"
972
992
  role="tab"
993
+ aria-selected="false"
973
994
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
974
995
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
975
996
  >
@@ -1458,15 +1479,17 @@ section: components
1458
1479
  <div class="pf-v6-c-page__main-body">
1459
1480
  <div
1460
1481
  class="pf-v6-c-tabs pf-m-page-insets"
1482
+ aria-label="Clusters"
1461
1483
  role="region"
1462
1484
  id="nested-tabs-example-tabs-tabs"
1463
1485
  >
1464
- <ul class="pf-v6-c-tabs__list" role="tablist">
1486
+ <ul class="pf-v6-c-tabs__list" role="tablist" aria-label="Clusters">
1465
1487
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1466
1488
  <button
1467
1489
  type="button"
1468
1490
  class="pf-v6-c-tabs__link"
1469
1491
  role="tab"
1492
+ aria-selected="true"
1470
1493
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1471
1494
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
1472
1495
  >
@@ -1478,6 +1501,7 @@ section: components
1478
1501
  type="button"
1479
1502
  class="pf-v6-c-tabs__link"
1480
1503
  role="tab"
1504
+ aria-selected="false"
1481
1505
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1482
1506
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
1483
1507
  >
@@ -1511,10 +1535,15 @@ section: components
1511
1535
  <div class="pf-v6-l-flex__item">
1512
1536
  <div
1513
1537
  class="pf-v6-c-tabs"
1538
+ aria-label="Cluster 1"
1514
1539
  role="region"
1515
1540
  id="nested-tabs-example-tabs-tabs-subtabs"
1516
1541
  >
1517
- <ul class="pf-v6-c-tabs__list" role="tablist">
1542
+ <ul
1543
+ class="pf-v6-c-tabs__list"
1544
+ role="tablist"
1545
+ aria-label="Cluster 1"
1546
+ >
1518
1547
  <li
1519
1548
  class="pf-v6-c-tabs__item pf-m-current"
1520
1549
  role="presentation"
@@ -1523,6 +1552,7 @@ section: components
1523
1552
  type="button"
1524
1553
  class="pf-v6-c-tabs__link"
1525
1554
  role="tab"
1555
+ aria-selected="true"
1526
1556
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1527
1557
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1528
1558
  >
@@ -1537,6 +1567,7 @@ section: components
1537
1567
  type="button"
1538
1568
  class="pf-v6-c-tabs__link"
1539
1569
  role="tab"
1570
+ aria-selected="false"
1540
1571
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1541
1572
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1542
1573
  >
@@ -1553,6 +1584,7 @@ section: components
1553
1584
  type="button"
1554
1585
  class="pf-v6-c-tabs__link"
1555
1586
  role="tab"
1587
+ aria-selected="false"
1556
1588
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1557
1589
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1558
1590
  >
@@ -1569,6 +1601,7 @@ section: components
1569
1601
  type="button"
1570
1602
  class="pf-v6-c-tabs__link"
1571
1603
  role="tab"
1604
+ aria-selected="false"
1572
1605
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1573
1606
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1574
1607
  >
@@ -2636,6 +2669,7 @@ section: components
2636
2669
  <div class="pf-v6-c-drawer__body pf-m-no-padding">
2637
2670
  <div
2638
2671
  class="pf-v6-c-tabs pf-m-box pf-m-fill"
2672
+ aria-label="Node 2"
2639
2673
  role="region"
2640
2674
  id="-tabs"
2641
2675
  >
@@ -2650,7 +2684,11 @@ section: components
2650
2684
  </span>
2651
2685
  </button>
2652
2686
  </div>
2653
- <ul class="pf-v6-c-tabs__list" role="tablist">
2687
+ <ul
2688
+ class="pf-v6-c-tabs__list"
2689
+ role="tablist"
2690
+ aria-label="Node 2"
2691
+ >
2654
2692
  <li
2655
2693
  class="pf-v6-c-tabs__item pf-m-current"
2656
2694
  role="presentation"
@@ -2659,6 +2697,7 @@ section: components
2659
2697
  type="button"
2660
2698
  class="pf-v6-c-tabs__link"
2661
2699
  role="tab"
2700
+ aria-selected="true"
2662
2701
  aria-controls="-tabs-tab1-panel"
2663
2702
  id="-tabs-tab1-link"
2664
2703
  >
@@ -2670,6 +2709,7 @@ section: components
2670
2709
  type="button"
2671
2710
  class="pf-v6-c-tabs__link"
2672
2711
  role="tab"
2712
+ aria-selected="false"
2673
2713
  aria-controls="-tabs-tab2-panel"
2674
2714
  id="-tabs-tab2-link"
2675
2715
  >
@@ -2877,15 +2917,21 @@ section: components
2877
2917
  <div class="pf-v6-l-grid__item">
2878
2918
  <div
2879
2919
  class="pf-v6-c-tabs pf-m-inset-none"
2920
+ aria-label="PatternFly"
2880
2921
  role="region"
2881
2922
  id="modal-tabs-example-tabs"
2882
2923
  >
2883
- <ul class="pf-v6-c-tabs__list" role="tablist">
2924
+ <ul
2925
+ class="pf-v6-c-tabs__list"
2926
+ role="tablist"
2927
+ aria-label="PatternFly"
2928
+ >
2884
2929
  <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2885
2930
  <button
2886
2931
  type="button"
2887
2932
  class="pf-v6-c-tabs__link"
2888
2933
  role="tab"
2934
+ aria-selected="true"
2889
2935
  aria-controls="modal-tabs-example-tabs-details-panel"
2890
2936
  id="modal-tabs-example-tabs-details-link"
2891
2937
  >
@@ -2897,6 +2943,7 @@ section: components
2897
2943
  type="button"
2898
2944
  class="pf-v6-c-tabs__link"
2899
2945
  role="tab"
2946
+ aria-selected="false"
2900
2947
  aria-controls="modal-tabs-example-tabs-documentation-panel"
2901
2948
  id="modal-tabs-example-tabs-documentation-link"
2902
2949
  >
@@ -3551,15 +3598,21 @@ section: components
3551
3598
  <div class="pf-v6-c-page__main-body">
3552
3599
  <div
3553
3600
  class="pf-v6-c-tabs pf-m-page-insets"
3601
+ aria-label="Red Hat Enterprise Linux"
3554
3602
  role="region"
3555
3603
  id="gray-tabs-example-tabs-tabs"
3556
3604
  >
3557
- <ul class="pf-v6-c-tabs__list" role="tablist">
3605
+ <ul
3606
+ class="pf-v6-c-tabs__list"
3607
+ role="tablist"
3608
+ aria-label="Red Hat Enterprise Linux"
3609
+ >
3558
3610
  <li class="pf-v6-c-tabs__item" role="presentation">
3559
3611
  <button
3560
3612
  type="button"
3561
3613
  class="pf-v6-c-tabs__link"
3562
3614
  role="tab"
3615
+ aria-selected="false"
3563
3616
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3564
3617
  id="gray-tabs-example-tabs-tabs-new-link"
3565
3618
  >
@@ -3571,6 +3624,7 @@ section: components
3571
3624
  type="button"
3572
3625
  class="pf-v6-c-tabs__link"
3573
3626
  role="tab"
3627
+ aria-selected="true"
3574
3628
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3575
3629
  id="gray-tabs-example-tabs-tabs-get-started-link"
3576
3630
  >
@@ -3582,6 +3636,7 @@ section: components
3582
3636
  type="button"
3583
3637
  class="pf-v6-c-tabs__link"
3584
3638
  role="tab"
3639
+ aria-selected="false"
3585
3640
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3586
3641
  id="gray-tabs-example-tabs-tabs-knowledge-link"
3587
3642
  >
@@ -3593,6 +3648,7 @@ section: components
3593
3648
  type="button"
3594
3649
  class="pf-v6-c-tabs__link"
3595
3650
  role="tab"
3651
+ aria-selected="false"
3596
3652
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3597
3653
  id="gray-tabs-example-tabs-tabs-support-link"
3598
3654
  >
@@ -3632,10 +3688,15 @@ section: components
3632
3688
  <div class="pf-v6-l-grid__item">
3633
3689
  <div
3634
3690
  class="pf-v6-c-tabs pf-m-inset-none"
3691
+ aria-label="Get started"
3635
3692
  role="region"
3636
3693
  id="gray-tabs-example-tabs-subtabs"
3637
3694
  >
3638
- <ul class="pf-v6-c-tabs__list" role="tablist">
3695
+ <ul
3696
+ class="pf-v6-c-tabs__list"
3697
+ role="tablist"
3698
+ aria-label="Get started"
3699
+ >
3639
3700
  <li
3640
3701
  class="pf-v6-c-tabs__item pf-m-current"
3641
3702
  role="presentation"
@@ -3644,6 +3705,7 @@ section: components
3644
3705
  type="button"
3645
3706
  class="pf-v6-c-tabs__link"
3646
3707
  role="tab"
3708
+ aria-selected="true"
3647
3709
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3648
3710
  id="gray-tabs-example-tabs-subtabs-x86-link"
3649
3711
  >
@@ -3655,6 +3717,7 @@ section: components
3655
3717
  type="button"
3656
3718
  class="pf-v6-c-tabs__link"
3657
3719
  role="tab"
3720
+ aria-selected="false"
3658
3721
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3659
3722
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3660
3723
  >
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.25",
4
+ "version": "6.5.0-prerelease.26",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12267,8 +12267,8 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12267
12267
  --pf-v6-c-compass--BackgroundImage--light: none;
12268
12268
  --pf-v6-c-compass--BackgroundImage--dark: none;
12269
12269
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12270
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--xl);
12271
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
12270
+ --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
12271
+ --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12272
12272
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12273
12273
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
12274
12274
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -12276,10 +12276,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12276
12276
  --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12277
12277
  --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
12278
12278
  --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12279
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
12279
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
12280
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
12281
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12282
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
12280
12283
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12281
12284
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12282
12285
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12286
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12283
12287
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12284
12288
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12285
12289
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12294,6 +12298,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12294
12298
  --pf-v6-c-compass__message-bar--Width: 450px;
12295
12299
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12296
12300
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12301
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
12302
+ --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12303
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12304
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
12305
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12306
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
12307
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12308
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
12309
+ }
12310
+ @media screen and (prefers-reduced-motion: no-preference) {
12311
+ .pf-v6-c-compass {
12312
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
12313
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12314
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12315
+ --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
12316
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12317
+ }
12297
12318
  }
12298
12319
 
12299
12320
  .pf-v6-c-compass {
@@ -12307,6 +12328,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12307
12328
  justify-content: center;
12308
12329
  height: 100dvh;
12309
12330
  padding: var(--pf-v6-c-compass--Padding);
12331
+ overflow: hidden;
12310
12332
  background-image: var(--pf-v6-c-compass--BackgroundImage);
12311
12333
  background-size: cover;
12312
12334
  }
@@ -12317,11 +12339,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12317
12339
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
12318
12340
  }
12319
12341
 
12342
+ .pf-v6-c-compass__header,
12343
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
12344
+ .pf-v6-c-compass__main-footer,
12345
+ .pf-v6-c-compass__footer {
12346
+ visibility: hidden;
12347
+ opacity: 0;
12348
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
12349
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
12350
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
12351
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
12352
+ }
12353
+ .pf-v6-c-compass__header.pf-m-expanded,
12354
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
12355
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
12356
+ .pf-v6-c-compass__footer.pf-m-expanded {
12357
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
12358
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
12359
+ visibility: visible;
12360
+ opacity: 1;
12361
+ translate: 0;
12362
+ }
12363
+
12364
+ .pf-v6-c-compass__header,
12365
+ .pf-v6-c-compass__main-footer,
12366
+ .pf-v6-c-compass__footer {
12367
+ max-height: 0;
12368
+ }
12369
+ .pf-v6-c-compass__header.pf-m-expanded,
12370
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
12371
+ .pf-v6-c-compass__footer.pf-m-expanded {
12372
+ max-height: 9999px;
12373
+ }
12374
+
12320
12375
  .pf-v6-c-compass__header {
12321
12376
  display: grid;
12322
12377
  grid-area: header;
12323
12378
  grid-template-columns: 1fr auto 1fr;
12324
12379
  align-items: start;
12380
+ translate: 0 -100%;
12325
12381
  }
12326
12382
 
12327
12383
  .pf-v6-c-compass__profile {
@@ -12358,10 +12414,26 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12358
12414
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12359
12415
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12360
12416
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12417
+ max-width: 0;
12418
+ }
12419
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
12420
+ max-width: 9999px;
12361
12421
  }
12362
12422
  .pf-v6-c-compass__sidebar.pf-m-start {
12423
+ translate: -100%;
12363
12424
  grid-area: sidebar-start;
12364
12425
  }
12426
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
12427
+ translate: 100%;
12428
+ }
12429
+
12430
+ .pf-v6-c-compass__sidebar.pf-m-end {
12431
+ translate: 100%;
12432
+ grid-area: sidebar-end;
12433
+ }
12434
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
12435
+ translate: -100%;
12436
+ }
12365
12437
 
12366
12438
  .pf-v6-c-compass__main {
12367
12439
  display: flex;
@@ -12396,18 +12468,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12396
12468
  .pf-v6-c-compass__main-footer {
12397
12469
  display: flex;
12398
12470
  justify-content: center;
12399
- margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12400
- }
12401
-
12402
- .pf-v6-c-compass__sidebar.pf-m-end {
12403
- grid-area: sidebar-end;
12404
- padding: var(--pf-t--global--spacer--sm);
12471
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
12472
+ translate: 0 100%;
12405
12473
  }
12406
12474
 
12407
12475
  .pf-v6-c-compass__footer {
12408
12476
  display: flex;
12409
12477
  grid-column: 1/-1;
12410
12478
  justify-content: center;
12479
+ translate: 0 100%;
12411
12480
  }
12412
12481
 
12413
12482
  .pf-v6-c-compass__message-bar {