@patternfly/patternfly 6.5.0-prerelease.46 → 6.5.0-prerelease.47

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 (80) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Card/card.css +1 -1
  4. package/components/Card/card.scss +1 -1
  5. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  6. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  7. package/components/DataList/data-list.css +1 -1
  8. package/components/DataList/data-list.scss +1 -1
  9. package/components/DualListSelector/dual-list-selector.css +1 -1
  10. package/components/DualListSelector/dual-list-selector.scss +1 -1
  11. package/components/ExpandableSection/expandable-section.css +2 -2
  12. package/components/ExpandableSection/expandable-section.scss +2 -2
  13. package/components/Form/form.css +1 -1
  14. package/components/Form/form.scss +1 -1
  15. package/components/JumpLinks/jump-links.css +1 -1
  16. package/components/JumpLinks/jump-links.scss +1 -1
  17. package/components/Nav/nav.css +1 -1
  18. package/components/Nav/nav.scss +1 -1
  19. package/components/NotificationDrawer/notification-drawer.css +1 -1
  20. package/components/NotificationDrawer/notification-drawer.scss +1 -1
  21. package/components/Table/table.css +2 -2
  22. package/components/Table/table.scss +2 -2
  23. package/components/Tabs/tabs.css +2 -2
  24. package/components/Tabs/tabs.scss +2 -2
  25. package/components/Toolbar/toolbar.css +1 -1
  26. package/components/Toolbar/toolbar.scss +1 -1
  27. package/components/TreeView/tree-view.css +1 -1
  28. package/components/TreeView/tree-view.scss +1 -1
  29. package/components/Wizard/wizard.css +1 -1
  30. package/components/Wizard/wizard.scss +1 -1
  31. package/components/_index.css +18 -18
  32. package/docs/components/Accordion/examples/Accordion.md +390 -30
  33. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  34. package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
  35. package/docs/components/Card/examples/Card.md +52 -4
  36. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
  37. package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
  38. package/docs/components/DataList/examples/DataList.md +221 -17
  39. package/docs/components/DualListSelector/examples/DualListSelector.md +169 -13
  40. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  41. package/docs/components/Form/examples/Form.md +78 -6
  42. package/docs/components/Icon/examples/Icon.md +26 -2
  43. package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
  44. package/docs/components/Menu/examples/Menu.md +1456 -112
  45. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +39 -3
  46. package/docs/components/Nav/examples/Navigation.md +710 -62
  47. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +52 -4
  48. package/docs/components/Table/examples/Table.md +819 -63
  49. package/docs/components/Tabs/examples/Tabs.md +321 -213
  50. package/docs/components/TreeView/examples/TreeView.md +1300 -100
  51. package/docs/components/Wizard/examples/Wizard.md +323 -59
  52. package/docs/demos/AboutModal/examples/AboutModal.md +39 -3
  53. package/docs/demos/Alert/examples/Alert.md +117 -9
  54. package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
  55. package/docs/demos/Banner/examples/Banner.md +78 -6
  56. package/docs/demos/Card/examples/Card.md +230 -26
  57. package/docs/demos/CardView/examples/CardView.md +78 -6
  58. package/docs/demos/Compass/examples/Compass.md +71 -35
  59. package/docs/demos/Dashboard/examples/Dashboard.md +104 -8
  60. package/docs/demos/DataList/examples/DataList.md +234 -18
  61. package/docs/demos/DescriptionList/examples/DescriptionList.md +117 -9
  62. package/docs/demos/Drawer/examples/Drawer.md +141 -15
  63. package/docs/demos/Form/examples/BasicForms.md +143 -11
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +216 -27
  65. package/docs/demos/Masthead/examples/Masthead.md +355 -31
  66. package/docs/demos/Modal/examples/Modal.md +234 -18
  67. package/docs/demos/Nav/examples/Nav.md +320 -32
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +247 -19
  69. package/docs/demos/Page/examples/Page.md +546 -42
  70. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +281 -29
  71. package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
  72. package/docs/demos/Table/examples/Table.md +702 -54
  73. package/docs/demos/Tabs/examples/Tabs.md +238 -22
  74. package/docs/demos/Toolbar/examples/Toolbar.md +78 -6
  75. package/docs/demos/Wizard/examples/Wizard.md +621 -72
  76. package/package.json +1 -1
  77. package/patternfly-no-globals.css +18 -18
  78. package/patternfly.css +18 -18
  79. package/patternfly.min.css +1 -1
  80. package/patternfly.min.css.map +1 -1
@@ -21,7 +21,19 @@ wrapperTag: div
21
21
  >
22
22
  <span class="pf-v6-c-button__icon pf-m-start">
23
23
  <span class="pf-v6-c-card__header-toggle-icon">
24
- <i class="fas fa-angle-right" aria-hidden="true"></i>
24
+ <svg
25
+ class="pf-v6-svg"
26
+ viewBox="0 0 20 20"
27
+ fill="currentColor"
28
+ aria-hidden="true"
29
+ role="img"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path
34
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
35
+ />
36
+ </svg>
25
37
  </span>
26
38
  </span>
27
39
  </button>
@@ -122,7 +134,19 @@ wrapperTag: div
122
134
  >
123
135
  <span class="pf-v6-c-button__icon pf-m-start">
124
136
  <span class="pf-v6-c-card__header-toggle-icon">
125
- <i class="fas fa-angle-right" aria-hidden="true"></i>
137
+ <svg
138
+ class="pf-v6-svg"
139
+ viewBox="0 0 20 20"
140
+ fill="currentColor"
141
+ aria-hidden="true"
142
+ role="img"
143
+ width="1em"
144
+ height="1em"
145
+ >
146
+ <path
147
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
148
+ />
149
+ </svg>
126
150
  </span>
127
151
  </span>
128
152
  </button>
@@ -1115,7 +1139,19 @@ wrapperTag: div
1115
1139
  </div>
1116
1140
  </div>
1117
1141
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1118
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1142
+ <svg
1143
+ class="pf-v6-svg"
1144
+ viewBox="0 0 20 20"
1145
+ fill="currentColor"
1146
+ aria-hidden="true"
1147
+ role="img"
1148
+ width="1em"
1149
+ height="1em"
1150
+ >
1151
+ <path
1152
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1153
+ />
1154
+ </svg>
1119
1155
  </span>
1120
1156
  </button>
1121
1157
  <ul class="pf-v6-c-notification-drawer__list" role="list" hidden>
@@ -1328,7 +1364,19 @@ wrapperTag: div
1328
1364
  </div>
1329
1365
  </div>
1330
1366
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1331
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1367
+ <svg
1368
+ class="pf-v6-svg"
1369
+ viewBox="0 0 20 20"
1370
+ fill="currentColor"
1371
+ aria-hidden="true"
1372
+ role="img"
1373
+ width="1em"
1374
+ height="1em"
1375
+ >
1376
+ <path
1377
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1378
+ />
1379
+ </svg>
1332
1380
  </span>
1333
1381
  </button>
1334
1382
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -1523,10 +1571,19 @@ wrapperTag: div
1523
1571
  >
1524
1572
  <span class="pf-v6-c-button__icon">
1525
1573
  <div class="pf-v6-c-table__toggle-icon">
1526
- <i
1527
- class="fas fa-angle-down"
1574
+ <svg
1575
+ class="pf-v6-svg"
1576
+ viewBox="0 0 20 20"
1577
+ fill="currentColor"
1528
1578
  aria-hidden="true"
1529
- ></i>
1579
+ role="img"
1580
+ width="1em"
1581
+ height="1em"
1582
+ >
1583
+ <path
1584
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1585
+ />
1586
+ </svg>
1530
1587
  </div>
1531
1588
  </span>
1532
1589
  </button>
@@ -1605,10 +1662,19 @@ wrapperTag: div
1605
1662
  >
1606
1663
  <span class="pf-v6-c-button__icon">
1607
1664
  <div class="pf-v6-c-table__toggle-icon">
1608
- <i
1609
- class="fas fa-angle-down"
1665
+ <svg
1666
+ class="pf-v6-svg"
1667
+ viewBox="0 0 20 20"
1668
+ fill="currentColor"
1610
1669
  aria-hidden="true"
1611
- ></i>
1670
+ role="img"
1671
+ width="1em"
1672
+ height="1em"
1673
+ >
1674
+ <path
1675
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1676
+ />
1677
+ </svg>
1612
1678
  </div>
1613
1679
  </span>
1614
1680
  </button>
@@ -1673,10 +1739,19 @@ wrapperTag: div
1673
1739
  >
1674
1740
  <span class="pf-v6-c-button__icon">
1675
1741
  <div class="pf-v6-c-table__toggle-icon">
1676
- <i
1677
- class="fas fa-angle-down"
1742
+ <svg
1743
+ class="pf-v6-svg"
1744
+ viewBox="0 0 20 20"
1745
+ fill="currentColor"
1678
1746
  aria-hidden="true"
1679
- ></i>
1747
+ role="img"
1748
+ width="1em"
1749
+ height="1em"
1750
+ >
1751
+ <path
1752
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1753
+ />
1754
+ </svg>
1680
1755
  </div>
1681
1756
  </span>
1682
1757
  </button>
@@ -1739,10 +1814,19 @@ wrapperTag: div
1739
1814
  >
1740
1815
  <span class="pf-v6-c-button__icon">
1741
1816
  <div class="pf-v6-c-table__toggle-icon">
1742
- <i
1743
- class="fas fa-angle-down"
1817
+ <svg
1818
+ class="pf-v6-svg"
1819
+ viewBox="0 0 20 20"
1820
+ fill="currentColor"
1744
1821
  aria-hidden="true"
1745
- ></i>
1822
+ role="img"
1823
+ width="1em"
1824
+ height="1em"
1825
+ >
1826
+ <path
1827
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1828
+ />
1829
+ </svg>
1746
1830
  </div>
1747
1831
  </span>
1748
1832
  </button>
@@ -1899,7 +1983,19 @@ wrapperTag: div
1899
1983
  </div>
1900
1984
  </div>
1901
1985
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1902
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1986
+ <svg
1987
+ class="pf-v6-svg"
1988
+ viewBox="0 0 20 20"
1989
+ fill="currentColor"
1990
+ aria-hidden="true"
1991
+ role="img"
1992
+ width="1em"
1993
+ height="1em"
1994
+ >
1995
+ <path
1996
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
1997
+ />
1998
+ </svg>
1903
1999
  </span>
1904
2000
  </button>
1905
2001
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -2166,7 +2262,19 @@ wrapperTag: div
2166
2262
  >
2167
2263
  <span class="pf-v6-c-button__icon pf-m-start">
2168
2264
  <span class="pf-v6-c-card__header-toggle-icon">
2169
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2265
+ <svg
2266
+ class="pf-v6-svg"
2267
+ viewBox="0 0 20 20"
2268
+ fill="currentColor"
2269
+ aria-hidden="true"
2270
+ role="img"
2271
+ width="1em"
2272
+ height="1em"
2273
+ >
2274
+ <path
2275
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2276
+ />
2277
+ </svg>
2170
2278
  </span>
2171
2279
  </span>
2172
2280
  </button>
@@ -2279,7 +2387,19 @@ wrapperTag: div
2279
2387
  >
2280
2388
  <span class="pf-v6-c-button__icon pf-m-start">
2281
2389
  <span class="pf-v6-c-card__header-toggle-icon">
2282
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2390
+ <svg
2391
+ class="pf-v6-svg"
2392
+ viewBox="0 0 20 20"
2393
+ fill="currentColor"
2394
+ aria-hidden="true"
2395
+ role="img"
2396
+ width="1em"
2397
+ height="1em"
2398
+ >
2399
+ <path
2400
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2401
+ />
2402
+ </svg>
2283
2403
  </span>
2284
2404
  </span>
2285
2405
  </button>
@@ -2309,7 +2429,19 @@ wrapperTag: div
2309
2429
  >
2310
2430
  <span class="pf-v6-c-button__icon pf-m-start">
2311
2431
  <span class="pf-v6-c-card__header-toggle-icon">
2312
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2432
+ <svg
2433
+ class="pf-v6-svg"
2434
+ viewBox="0 0 20 20"
2435
+ fill="currentColor"
2436
+ aria-hidden="true"
2437
+ role="img"
2438
+ width="1em"
2439
+ height="1em"
2440
+ >
2441
+ <path
2442
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2443
+ />
2444
+ </svg>
2313
2445
  </span>
2314
2446
  </span>
2315
2447
  </button>
@@ -2354,7 +2486,19 @@ wrapperTag: div
2354
2486
  >
2355
2487
  <span class="pf-v6-c-button__icon pf-m-start">
2356
2488
  <span class="pf-v6-c-card__header-toggle-icon">
2357
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2489
+ <svg
2490
+ class="pf-v6-svg"
2491
+ viewBox="0 0 20 20"
2492
+ fill="currentColor"
2493
+ aria-hidden="true"
2494
+ role="img"
2495
+ width="1em"
2496
+ height="1em"
2497
+ >
2498
+ <path
2499
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2500
+ />
2501
+ </svg>
2358
2502
  </span>
2359
2503
  </span>
2360
2504
  </button>
@@ -2464,7 +2608,19 @@ wrapperTag: div
2464
2608
  >
2465
2609
  <span class="pf-v6-c-button__icon pf-m-start">
2466
2610
  <span class="pf-v6-c-card__header-toggle-icon">
2467
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2611
+ <svg
2612
+ class="pf-v6-svg"
2613
+ viewBox="0 0 20 20"
2614
+ fill="currentColor"
2615
+ aria-hidden="true"
2616
+ role="img"
2617
+ width="1em"
2618
+ height="1em"
2619
+ >
2620
+ <path
2621
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2622
+ />
2623
+ </svg>
2468
2624
  </span>
2469
2625
  </span>
2470
2626
  </button>
@@ -2491,7 +2647,19 @@ wrapperTag: div
2491
2647
  >
2492
2648
  <span class="pf-v6-c-button__icon pf-m-start">
2493
2649
  <span class="pf-v6-c-card__header-toggle-icon">
2494
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2650
+ <svg
2651
+ class="pf-v6-svg"
2652
+ viewBox="0 0 20 20"
2653
+ fill="currentColor"
2654
+ aria-hidden="true"
2655
+ role="img"
2656
+ width="1em"
2657
+ height="1em"
2658
+ >
2659
+ <path
2660
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2661
+ />
2662
+ </svg>
2495
2663
  </span>
2496
2664
  </span>
2497
2665
  </button>
@@ -2531,7 +2699,19 @@ wrapperTag: div
2531
2699
  >
2532
2700
  <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2533
2701
  <span class="pf-v6-c-accordion__toggle-icon">
2534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2702
+ <svg
2703
+ class="pf-v6-svg"
2704
+ viewBox="0 0 20 20"
2705
+ fill="currentColor"
2706
+ aria-hidden="true"
2707
+ role="img"
2708
+ width="1em"
2709
+ height="1em"
2710
+ >
2711
+ <path
2712
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2713
+ />
2714
+ </svg>
2535
2715
  </span>
2536
2716
  </button>
2537
2717
  </h3>
@@ -2627,7 +2807,19 @@ wrapperTag: div
2627
2807
  >
2628
2808
  <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2629
2809
  <span class="pf-v6-c-accordion__toggle-icon">
2630
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2810
+ <svg
2811
+ class="pf-v6-svg"
2812
+ viewBox="0 0 20 20"
2813
+ fill="currentColor"
2814
+ aria-hidden="true"
2815
+ role="img"
2816
+ width="1em"
2817
+ height="1em"
2818
+ >
2819
+ <path
2820
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2821
+ />
2822
+ </svg>
2631
2823
  </span>
2632
2824
  </button>
2633
2825
  </h3>
@@ -2721,7 +2913,19 @@ wrapperTag: div
2721
2913
  >
2722
2914
  <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2723
2915
  <span class="pf-v6-c-accordion__toggle-icon">
2724
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2916
+ <svg
2917
+ class="pf-v6-svg"
2918
+ viewBox="0 0 20 20"
2919
+ fill="currentColor"
2920
+ aria-hidden="true"
2921
+ role="img"
2922
+ width="1em"
2923
+ height="1em"
2924
+ >
2925
+ <path
2926
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
2927
+ />
2928
+ </svg>
2725
2929
  </span>
2726
2930
  </button>
2727
2931
  </h3>
@@ -210,7 +210,19 @@ section: patterns
210
210
  <span class="pf-v6-c-nav__link-text">System panel</span>
211
211
  <span class="pf-v6-c-nav__toggle">
212
212
  <span class="pf-v6-c-nav__toggle-icon">
213
- <i class="fas fa-angle-right" aria-hidden="true"></i>
213
+ <svg
214
+ class="pf-v6-svg"
215
+ viewBox="0 0 20 20"
216
+ fill="currentColor"
217
+ aria-hidden="true"
218
+ role="img"
219
+ width="1em"
220
+ height="1em"
221
+ >
222
+ <path
223
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
224
+ />
225
+ </svg>
214
226
  </span>
215
227
  </span>
216
228
  </button>
@@ -265,7 +277,19 @@ section: patterns
265
277
  <span class="pf-v6-c-nav__link-text">Policy</span>
266
278
  <span class="pf-v6-c-nav__toggle">
267
279
  <span class="pf-v6-c-nav__toggle-icon">
268
- <i class="fas fa-angle-right" aria-hidden="true"></i>
280
+ <svg
281
+ class="pf-v6-svg"
282
+ viewBox="0 0 20 20"
283
+ fill="currentColor"
284
+ aria-hidden="true"
285
+ role="img"
286
+ width="1em"
287
+ height="1em"
288
+ >
289
+ <path
290
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
291
+ />
292
+ </svg>
269
293
  </span>
270
294
  </span>
271
295
  </button>
@@ -298,7 +322,19 @@ section: patterns
298
322
  <span class="pf-v6-c-nav__link-text">Authentication</span>
299
323
  <span class="pf-v6-c-nav__toggle">
300
324
  <span class="pf-v6-c-nav__toggle-icon">
301
- <i class="fas fa-angle-right" aria-hidden="true"></i>
325
+ <svg
326
+ class="pf-v6-svg"
327
+ viewBox="0 0 20 20"
328
+ fill="currentColor"
329
+ aria-hidden="true"
330
+ role="img"
331
+ width="1em"
332
+ height="1em"
333
+ >
334
+ <path
335
+ d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
336
+ />
337
+ </svg>
302
338
  </span>
303
339
  </span>
304
340
  </button>
@@ -341,21 +377,57 @@ section: patterns
341
377
  </li>
342
378
  <li class="pf-v6-c-breadcrumb__item">
343
379
  <span class="pf-v6-c-breadcrumb__item-divider">
344
- <i class="fas fa-angle-right" aria-hidden="true"></i>
380
+ <svg
381
+ class="pf-v6-svg"
382
+ viewBox="0 0 20 20"
383
+ fill="currentColor"
384
+ aria-hidden="true"
385
+ role="img"
386
+ width="1em"
387
+ height="1em"
388
+ >
389
+ <path
390
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
391
+ />
392
+ </svg>
345
393
  </span>
346
394
 
347
395
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
348
396
  </li>
349
397
  <li class="pf-v6-c-breadcrumb__item">
350
398
  <span class="pf-v6-c-breadcrumb__item-divider">
351
- <i class="fas fa-angle-right" aria-hidden="true"></i>
399
+ <svg
400
+ class="pf-v6-svg"
401
+ viewBox="0 0 20 20"
402
+ fill="currentColor"
403
+ aria-hidden="true"
404
+ role="img"
405
+ width="1em"
406
+ height="1em"
407
+ >
408
+ <path
409
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
410
+ />
411
+ </svg>
352
412
  </span>
353
413
 
354
414
  <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
355
415
  </li>
356
416
  <li class="pf-v6-c-breadcrumb__item">
357
417
  <span class="pf-v6-c-breadcrumb__item-divider">
358
- <i class="fas fa-angle-right" aria-hidden="true"></i>
418
+ <svg
419
+ class="pf-v6-svg"
420
+ viewBox="0 0 20 20"
421
+ fill="currentColor"
422
+ aria-hidden="true"
423
+ role="img"
424
+ width="1em"
425
+ height="1em"
426
+ >
427
+ <path
428
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
429
+ />
430
+ </svg>
359
431
  </span>
360
432
 
361
433
  <a