@patternfly/patternfly 6.0.0-alpha.139 → 6.0.0-alpha.140

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 (34) hide show
  1. package/components/MultipleFileUpload/multiple-file-upload.css +1 -1
  2. package/components/MultipleFileUpload/multiple-file-upload.scss +1 -1
  3. package/components/Nav/nav.css +7 -0
  4. package/components/Nav/nav.scss +11 -0
  5. package/components/_index.css +8 -1
  6. package/docs/components/Nav/examples/Navigation.md +253 -194
  7. package/docs/demos/AboutModal/examples/AboutModal.md +15 -5
  8. package/docs/demos/Alert/examples/Alert.md +45 -15
  9. package/docs/demos/BackToTop/examples/BackToTop.md +15 -5
  10. package/docs/demos/Banner/examples/Banner.md +30 -10
  11. package/docs/demos/CardView/examples/CardView.md +33 -13
  12. package/docs/demos/ContextSelector/examples/ContextSelector.md +60 -20
  13. package/docs/demos/Dashboard/examples/Dashboard.md +15 -5
  14. package/docs/demos/DataList/examples/DataList.md +60 -20
  15. package/docs/demos/DescriptionList/examples/DescriptionList.md +45 -15
  16. package/docs/demos/Drawer/examples/Drawer.md +75 -25
  17. package/docs/demos/JumpLinks/examples/JumpLinks.md +90 -30
  18. package/docs/demos/Masthead/examples/Masthead.md +135 -45
  19. package/docs/demos/Modal/examples/Modal.md +90 -30
  20. package/docs/demos/Nav/examples/Nav.md +132 -46
  21. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +75 -25
  22. package/docs/demos/Page/examples/Page.md +141 -47
  23. package/docs/demos/Page/examples/Penta.md +36 -12
  24. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +105 -35
  25. package/docs/demos/Skeleton/examples/Skeleton.md +15 -5
  26. package/docs/demos/Table/examples/Table.md +225 -75
  27. package/docs/demos/Tabs/examples/Tabs.md +90 -30
  28. package/docs/demos/Toolbar/examples/Toolbar.md +30 -10
  29. package/docs/demos/Wizard/examples/Wizard.md +135 -45
  30. package/package.json +1 -1
  31. package/patternfly-no-globals.css +8 -1
  32. package/patternfly.css +8 -1
  33. package/patternfly.min.css +1 -1
  34. package/patternfly.min.css.map +1 -1
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -204,23 +204,33 @@ section: components
204
204
  >
205
205
  <ul class="pf-v6-c-nav__list" role="list">
206
206
  <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
208
210
  </li>
209
211
  <li class="pf-v6-c-nav__item">
210
212
  <a
211
213
  href="#"
212
214
  class="pf-v6-c-nav__link pf-m-current"
213
215
  aria-current="page"
214
- >Policy</a>
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
215
219
  </li>
216
220
  <li class="pf-v6-c-nav__item">
217
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
218
224
  </li>
219
225
  <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
221
229
  </li>
222
230
  <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">Server</a>
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
224
234
  </li>
225
235
  </ul>
226
236
  </nav>
@@ -560,23 +570,33 @@ section: components
560
570
  >
561
571
  <ul class="pf-v6-c-nav__list" role="list">
562
572
  <li class="pf-v6-c-nav__item">
563
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
573
+ <a href="#" class="pf-v6-c-nav__link">
574
+ <span class="pf-v6-c-nav__link-text">System panel</span>
575
+ </a>
564
576
  </li>
565
577
  <li class="pf-v6-c-nav__item">
566
578
  <a
567
579
  href="#"
568
580
  class="pf-v6-c-nav__link pf-m-current"
569
581
  aria-current="page"
570
- >Policy</a>
582
+ >
583
+ <span class="pf-v6-c-nav__link-text">Policy</span>
584
+ </a>
571
585
  </li>
572
586
  <li class="pf-v6-c-nav__item">
573
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
587
+ <a href="#" class="pf-v6-c-nav__link">
588
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
589
+ </a>
574
590
  </li>
575
591
  <li class="pf-v6-c-nav__item">
576
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
592
+ <a href="#" class="pf-v6-c-nav__link">
593
+ <span class="pf-v6-c-nav__link-text">Network services</span>
594
+ </a>
577
595
  </li>
578
596
  <li class="pf-v6-c-nav__item">
579
- <a href="#" class="pf-v6-c-nav__link">Server</a>
597
+ <a href="#" class="pf-v6-c-nav__link">
598
+ <span class="pf-v6-c-nav__link-text">Server</span>
599
+ </a>
580
600
  </li>
581
601
  </ul>
582
602
  </nav>
@@ -922,23 +942,33 @@ section: components
922
942
  >
923
943
  <ul class="pf-v6-c-nav__list" role="list">
924
944
  <li class="pf-v6-c-nav__item">
925
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
945
+ <a href="#" class="pf-v6-c-nav__link">
946
+ <span class="pf-v6-c-nav__link-text">System panel</span>
947
+ </a>
926
948
  </li>
927
949
  <li class="pf-v6-c-nav__item">
928
950
  <a
929
951
  href="#"
930
952
  class="pf-v6-c-nav__link pf-m-current"
931
953
  aria-current="page"
932
- >Policy</a>
954
+ >
955
+ <span class="pf-v6-c-nav__link-text">Policy</span>
956
+ </a>
933
957
  </li>
934
958
  <li class="pf-v6-c-nav__item">
935
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
959
+ <a href="#" class="pf-v6-c-nav__link">
960
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
961
+ </a>
936
962
  </li>
937
963
  <li class="pf-v6-c-nav__item">
938
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
964
+ <a href="#" class="pf-v6-c-nav__link">
965
+ <span class="pf-v6-c-nav__link-text">Network services</span>
966
+ </a>
939
967
  </li>
940
968
  <li class="pf-v6-c-nav__item">
941
- <a href="#" class="pf-v6-c-nav__link">Server</a>
969
+ <a href="#" class="pf-v6-c-nav__link">
970
+ <span class="pf-v6-c-nav__link-text">Server</span>
971
+ </a>
942
972
  </li>
943
973
  </ul>
944
974
  </nav>
@@ -1274,23 +1304,33 @@ section: components
1274
1304
  >
1275
1305
  <ul class="pf-v6-c-nav__list" role="list">
1276
1306
  <li class="pf-v6-c-nav__item">
1277
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1307
+ <a href="#" class="pf-v6-c-nav__link">
1308
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1309
+ </a>
1278
1310
  </li>
1279
1311
  <li class="pf-v6-c-nav__item">
1280
1312
  <a
1281
1313
  href="#"
1282
1314
  class="pf-v6-c-nav__link pf-m-current"
1283
1315
  aria-current="page"
1284
- >Policy</a>
1316
+ >
1317
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1318
+ </a>
1285
1319
  </li>
1286
1320
  <li class="pf-v6-c-nav__item">
1287
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1321
+ <a href="#" class="pf-v6-c-nav__link">
1322
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1323
+ </a>
1288
1324
  </li>
1289
1325
  <li class="pf-v6-c-nav__item">
1290
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1326
+ <a href="#" class="pf-v6-c-nav__link">
1327
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1328
+ </a>
1291
1329
  </li>
1292
1330
  <li class="pf-v6-c-nav__item">
1293
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1331
+ <a href="#" class="pf-v6-c-nav__link">
1332
+ <span class="pf-v6-c-nav__link-text">Server</span>
1333
+ </a>
1294
1334
  </li>
1295
1335
  </ul>
1296
1336
  </nav>
@@ -1626,23 +1666,33 @@ section: components
1626
1666
  >
1627
1667
  <ul class="pf-v6-c-nav__list" role="list">
1628
1668
  <li class="pf-v6-c-nav__item">
1629
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1669
+ <a href="#" class="pf-v6-c-nav__link">
1670
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1671
+ </a>
1630
1672
  </li>
1631
1673
  <li class="pf-v6-c-nav__item">
1632
1674
  <a
1633
1675
  href="#"
1634
1676
  class="pf-v6-c-nav__link pf-m-current"
1635
1677
  aria-current="page"
1636
- >Policy</a>
1678
+ >
1679
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1680
+ </a>
1637
1681
  </li>
1638
1682
  <li class="pf-v6-c-nav__item">
1639
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1683
+ <a href="#" class="pf-v6-c-nav__link">
1684
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1685
+ </a>
1640
1686
  </li>
1641
1687
  <li class="pf-v6-c-nav__item">
1642
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1688
+ <a href="#" class="pf-v6-c-nav__link">
1689
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1690
+ </a>
1643
1691
  </li>
1644
1692
  <li class="pf-v6-c-nav__item">
1645
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1693
+ <a href="#" class="pf-v6-c-nav__link">
1694
+ <span class="pf-v6-c-nav__link-text">Server</span>
1695
+ </a>
1646
1696
  </li>
1647
1697
  </ul>
1648
1698
  </nav>
@@ -1978,23 +2028,33 @@ section: components
1978
2028
  >
1979
2029
  <ul class="pf-v6-c-nav__list" role="list">
1980
2030
  <li class="pf-v6-c-nav__item">
1981
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
2031
+ <a href="#" class="pf-v6-c-nav__link">
2032
+ <span class="pf-v6-c-nav__link-text">System panel</span>
2033
+ </a>
1982
2034
  </li>
1983
2035
  <li class="pf-v6-c-nav__item">
1984
2036
  <a
1985
2037
  href="#"
1986
2038
  class="pf-v6-c-nav__link pf-m-current"
1987
2039
  aria-current="page"
1988
- >Policy</a>
2040
+ >
2041
+ <span class="pf-v6-c-nav__link-text">Policy</span>
2042
+ </a>
1989
2043
  </li>
1990
2044
  <li class="pf-v6-c-nav__item">
1991
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
2045
+ <a href="#" class="pf-v6-c-nav__link">
2046
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
2047
+ </a>
1992
2048
  </li>
1993
2049
  <li class="pf-v6-c-nav__item">
1994
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
2050
+ <a href="#" class="pf-v6-c-nav__link">
2051
+ <span class="pf-v6-c-nav__link-text">Network services</span>
2052
+ </a>
1995
2053
  </li>
1996
2054
  <li class="pf-v6-c-nav__item">
1997
- <a href="#" class="pf-v6-c-nav__link">Server</a>
2055
+ <a href="#" class="pf-v6-c-nav__link">
2056
+ <span class="pf-v6-c-nav__link-text">Server</span>
2057
+ </a>
1998
2058
  </li>
1999
2059
  </ul>
2000
2060
  </nav>
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -204,23 +204,33 @@ section: components
204
204
  >
205
205
  <ul class="pf-v6-c-nav__list" role="list">
206
206
  <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">System panel</span>
209
+ </a>
208
210
  </li>
209
211
  <li class="pf-v6-c-nav__item">
210
212
  <a
211
213
  href="#"
212
214
  class="pf-v6-c-nav__link pf-m-current"
213
215
  aria-current="page"
214
- >Policy</a>
216
+ >
217
+ <span class="pf-v6-c-nav__link-text">Policy</span>
218
+ </a>
215
219
  </li>
216
220
  <li class="pf-v6-c-nav__item">
217
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
221
+ <a href="#" class="pf-v6-c-nav__link">
222
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
223
+ </a>
218
224
  </li>
219
225
  <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
226
+ <a href="#" class="pf-v6-c-nav__link">
227
+ <span class="pf-v6-c-nav__link-text">Network services</span>
228
+ </a>
221
229
  </li>
222
230
  <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">Server</a>
231
+ <a href="#" class="pf-v6-c-nav__link">
232
+ <span class="pf-v6-c-nav__link-text">Server</span>
233
+ </a>
224
234
  </li>
225
235
  </ul>
226
236
  </nav>
@@ -524,26 +534,38 @@ section: components
524
534
  >System panel</h2>
525
535
  <ul class="pf-v6-c-nav__list" role="list">
526
536
  <li class="pf-v6-c-nav__item">
527
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
537
+ <a href="#" class="pf-v6-c-nav__link">
538
+ <span class="pf-v6-c-nav__link-text">Overview</span>
539
+ </a>
528
540
  </li>
529
541
  <li class="pf-v6-c-nav__item">
530
- <a href="#" class="pf-v6-c-nav__link">Resource usage</a>
542
+ <a href="#" class="pf-v6-c-nav__link">
543
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
544
+ </a>
531
545
  </li>
532
546
  <li class="pf-v6-c-nav__item">
533
547
  <a
534
548
  href="#"
535
549
  class="pf-v6-c-nav__link pf-m-current"
536
550
  aria-current="page"
537
- >Hypervisors</a>
551
+ >
552
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
553
+ </a>
538
554
  </li>
539
555
  <li class="pf-v6-c-nav__item">
540
- <a href="#" class="pf-v6-c-nav__link">Instances</a>
556
+ <a href="#" class="pf-v6-c-nav__link">
557
+ <span class="pf-v6-c-nav__link-text">Instances</span>
558
+ </a>
541
559
  </li>
542
560
  <li class="pf-v6-c-nav__item">
543
- <a href="#" class="pf-v6-c-nav__link">Volumes</a>
561
+ <a href="#" class="pf-v6-c-nav__link">
562
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
563
+ </a>
544
564
  </li>
545
565
  <li class="pf-v6-c-nav__item">
546
- <a href="#" class="pf-v6-c-nav__link">Networks</a>
566
+ <a href="#" class="pf-v6-c-nav__link">
567
+ <span class="pf-v6-c-nav__link-text">Networks</span>
568
+ </a>
547
569
  </li>
548
570
  </ul>
549
571
  </section>
@@ -552,13 +574,19 @@ section: components
552
574
  <h2 class="pf-v6-c-nav__section-title" id="grouped-title2">Policy</h2>
553
575
  <ul class="pf-v6-c-nav__list" role="list">
554
576
  <li class="pf-v6-c-nav__item">
555
- <a href="#" class="pf-v6-c-nav__link">Hosts</a>
577
+ <a href="#" class="pf-v6-c-nav__link">
578
+ <span class="pf-v6-c-nav__link-text">Hosts</span>
579
+ </a>
556
580
  </li>
557
581
  <li class="pf-v6-c-nav__item">
558
- <a href="#" class="pf-v6-c-nav__link">Virtual machines</a>
582
+ <a href="#" class="pf-v6-c-nav__link">
583
+ <span class="pf-v6-c-nav__link-text">Virtual machines</span>
584
+ </a>
559
585
  </li>
560
586
  <li class="pf-v6-c-nav__item">
561
- <a href="#" class="pf-v6-c-nav__link">Storage</a>
587
+ <a href="#" class="pf-v6-c-nav__link">
588
+ <span class="pf-v6-c-nav__link-text">Storage</span>
589
+ </a>
562
590
  </li>
563
591
  </ul>
564
592
  </section>
@@ -863,7 +891,7 @@ section: components
863
891
  aria-expanded="true"
864
892
  id="nav-expandable-example-expandable-nav-link1"
865
893
  >
866
- System panel
894
+ <span class="pf-v6-c-nav__link-text">System panel</span>
867
895
  <span class="pf-v6-c-nav__toggle">
868
896
  <span class="pf-v6-c-nav__toggle-icon">
869
897
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -876,26 +904,38 @@ section: components
876
904
  >
877
905
  <ul class="pf-v6-c-nav__list" role="list">
878
906
  <li class="pf-v6-c-nav__item">
879
- <a href="#" class="pf-v6-c-nav__link">Overview</a>
907
+ <a href="#" class="pf-v6-c-nav__link">
908
+ <span class="pf-v6-c-nav__link-text">Overview</span>
909
+ </a>
880
910
  </li>
881
911
  <li class="pf-v6-c-nav__item">
882
912
  <a
883
913
  href="#"
884
914
  class="pf-v6-c-nav__link pf-m-current"
885
915
  aria-current="page"
886
- >Resource usage</a>
916
+ >
917
+ <span class="pf-v6-c-nav__link-text">Resource usage</span>
918
+ </a>
887
919
  </li>
888
920
  <li class="pf-v6-c-nav__item">
889
- <a href="#" class="pf-v6-c-nav__link">Hypervisors</a>
921
+ <a href="#" class="pf-v6-c-nav__link">
922
+ <span class="pf-v6-c-nav__link-text">Hypervisors</span>
923
+ </a>
890
924
  </li>
891
925
  <li class="pf-v6-c-nav__item">
892
- <a href="#" class="pf-v6-c-nav__link">Instances</a>
926
+ <a href="#" class="pf-v6-c-nav__link">
927
+ <span class="pf-v6-c-nav__link-text">Instances</span>
928
+ </a>
893
929
  </li>
894
930
  <li class="pf-v6-c-nav__item">
895
- <a href="#" class="pf-v6-c-nav__link">Volumes</a>
931
+ <a href="#" class="pf-v6-c-nav__link">
932
+ <span class="pf-v6-c-nav__link-text">Volumes</span>
933
+ </a>
896
934
  </li>
897
935
  <li class="pf-v6-c-nav__item">
898
- <a href="#" class="pf-v6-c-nav__link">Networks</a>
936
+ <a href="#" class="pf-v6-c-nav__link">
937
+ <span class="pf-v6-c-nav__link-text">Networks</span>
938
+ </a>
899
939
  </li>
900
940
  </ul>
901
941
  </section>
@@ -906,7 +946,7 @@ section: components
906
946
  aria-expanded="false"
907
947
  id="nav-expandable-example-expandable-nav-link2"
908
948
  >
909
- Policy
949
+ <span class="pf-v6-c-nav__link-text">Policy</span>
910
950
  <span class="pf-v6-c-nav__toggle">
911
951
  <span class="pf-v6-c-nav__toggle-icon">
912
952
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -920,10 +960,14 @@ section: components
920
960
  >
921
961
  <ul class="pf-v6-c-nav__list" role="list">
922
962
  <li class="pf-v6-c-nav__item">
923
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
963
+ <a href="#" class="pf-v6-c-nav__link">
964
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
965
+ </a>
924
966
  </li>
925
967
  <li class="pf-v6-c-nav__item">
926
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
968
+ <a href="#" class="pf-v6-c-nav__link">
969
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
970
+ </a>
927
971
  </li>
928
972
  </ul>
929
973
  </section>
@@ -934,7 +978,7 @@ section: components
934
978
  aria-expanded="false"
935
979
  id="nav-expandable-example-expandable-nav-link3"
936
980
  >
937
- Authentication
981
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
938
982
  <span class="pf-v6-c-nav__toggle">
939
983
  <span class="pf-v6-c-nav__toggle-icon">
940
984
  <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -948,10 +992,14 @@ section: components
948
992
  >
949
993
  <ul class="pf-v6-c-nav__list" role="list">
950
994
  <li class="pf-v6-c-nav__item">
951
- <a href="#" class="pf-v6-c-nav__link">Subnav link 1</a>
995
+ <a href="#" class="pf-v6-c-nav__link">
996
+ <span class="pf-v6-c-nav__link-text">Subnav link 1</span>
997
+ </a>
952
998
  </li>
953
999
  <li class="pf-v6-c-nav__item">
954
- <a href="#" class="pf-v6-c-nav__link">Subnav link 2</a>
1000
+ <a href="#" class="pf-v6-c-nav__link">
1001
+ <span class="pf-v6-c-nav__link-text">Subnav link 2</span>
1002
+ </a>
955
1003
  </li>
956
1004
  </ul>
957
1005
  </section>
@@ -1194,23 +1242,33 @@ section: components
1194
1242
  </div>
1195
1243
  <ul class="pf-v6-c-nav__list" role="list">
1196
1244
  <li class="pf-v6-c-nav__item">
1197
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
1245
+ <a href="#" class="pf-v6-c-nav__link">
1246
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
1247
+ </a>
1198
1248
  </li>
1199
1249
  <li class="pf-v6-c-nav__item">
1200
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
1250
+ <a href="#" class="pf-v6-c-nav__link">
1251
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
1252
+ </a>
1201
1253
  </li>
1202
1254
  <li class="pf-v6-c-nav__item">
1203
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
1255
+ <a href="#" class="pf-v6-c-nav__link">
1256
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
1257
+ </a>
1204
1258
  </li>
1205
1259
  <li class="pf-v6-c-nav__item">
1206
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
1260
+ <a href="#" class="pf-v6-c-nav__link">
1261
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
1262
+ </a>
1207
1263
  </li>
1208
1264
  <li class="pf-v6-c-nav__item">
1209
1265
  <a
1210
1266
  href="#"
1211
1267
  class="pf-v6-c-nav__link pf-m-current"
1212
1268
  aria-current="page"
1213
- >Horizontal nav item 5</a>
1269
+ >
1270
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
1271
+ </a>
1214
1272
  </li>
1215
1273
  </ul>
1216
1274
  <div class="pf-v6-c-nav__scroll-button">
@@ -1578,23 +1636,33 @@ section: components
1578
1636
  >
1579
1637
  <ul class="pf-v6-c-nav__list" role="list">
1580
1638
  <li class="pf-v6-c-nav__item">
1581
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1639
+ <a href="#" class="pf-v6-c-nav__link">
1640
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1641
+ </a>
1582
1642
  </li>
1583
1643
  <li class="pf-v6-c-nav__item">
1584
1644
  <a
1585
1645
  href="#"
1586
1646
  class="pf-v6-c-nav__link pf-m-current"
1587
1647
  aria-current="page"
1588
- >Policy</a>
1648
+ >
1649
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1650
+ </a>
1589
1651
  </li>
1590
1652
  <li class="pf-v6-c-nav__item">
1591
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1653
+ <a href="#" class="pf-v6-c-nav__link">
1654
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1655
+ </a>
1592
1656
  </li>
1593
1657
  <li class="pf-v6-c-nav__item">
1594
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1658
+ <a href="#" class="pf-v6-c-nav__link">
1659
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1660
+ </a>
1595
1661
  </li>
1596
1662
  <li class="pf-v6-c-nav__item">
1597
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1663
+ <a href="#" class="pf-v6-c-nav__link">
1664
+ <span class="pf-v6-c-nav__link-text">Server</span>
1665
+ </a>
1598
1666
  </li>
1599
1667
  </ul>
1600
1668
  </nav>
@@ -1618,10 +1686,14 @@ section: components
1618
1686
  href="#"
1619
1687
  class="pf-v6-c-nav__link pf-m-current"
1620
1688
  aria-current="page"
1621
- >Horizontal subnav item 1</a>
1689
+ >
1690
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 1</span>
1691
+ </a>
1622
1692
  </li>
1623
1693
  <li class="pf-v6-c-nav__item">
1624
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1694
+ <a href="#" class="pf-v6-c-nav__link">
1695
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 2</span>
1696
+ </a>
1625
1697
  </li>
1626
1698
  </ul>
1627
1699
  </nav>
@@ -1867,23 +1939,33 @@ section: components
1867
1939
  </div>
1868
1940
  <ul class="pf-v6-c-nav__list" role="list">
1869
1941
  <li class="pf-v6-c-nav__item">
1870
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
1942
+ <a href="#" class="pf-v6-c-nav__link">
1943
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 1</span>
1944
+ </a>
1871
1945
  </li>
1872
1946
  <li class="pf-v6-c-nav__item">
1873
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
1947
+ <a href="#" class="pf-v6-c-nav__link">
1948
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 2</span>
1949
+ </a>
1874
1950
  </li>
1875
1951
  <li class="pf-v6-c-nav__item">
1876
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
1952
+ <a href="#" class="pf-v6-c-nav__link">
1953
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 3</span>
1954
+ </a>
1877
1955
  </li>
1878
1956
  <li class="pf-v6-c-nav__item">
1879
- <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
1957
+ <a href="#" class="pf-v6-c-nav__link">
1958
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 4</span>
1959
+ </a>
1880
1960
  </li>
1881
1961
  <li class="pf-v6-c-nav__item">
1882
1962
  <a
1883
1963
  href="#"
1884
1964
  class="pf-v6-c-nav__link pf-m-current"
1885
1965
  aria-current="page"
1886
- >Horizontal nav item 5</a>
1966
+ >
1967
+ <span class="pf-v6-c-nav__link-text">Horizontal nav item 5</span>
1968
+ </a>
1887
1969
  </li>
1888
1970
  </ul>
1889
1971
  <div class="pf-v6-c-nav__scroll-button">
@@ -1976,10 +2058,14 @@ section: components
1976
2058
  href="#"
1977
2059
  class="pf-v6-c-nav__link pf-m-current"
1978
2060
  aria-current="page"
1979
- >Horizontal subnav item 1</a>
2061
+ >
2062
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 1</span>
2063
+ </a>
1980
2064
  </li>
1981
2065
  <li class="pf-v6-c-nav__item">
1982
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
2066
+ <a href="#" class="pf-v6-c-nav__link">
2067
+ <span class="pf-v6-c-nav__link-text">Horizontal subnav item 2</span>
2068
+ </a>
1983
2069
  </li>
1984
2070
  </ul>
1985
2071
  </nav>