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

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 (83) hide show
  1. package/components/Accordion/accordion.css +1 -1
  2. package/components/Accordion/accordion.scss +1 -1
  3. package/components/Alert/alert.css +2 -1
  4. package/components/Alert/alert.scss +2 -1
  5. package/components/Card/card.css +1 -1
  6. package/components/Card/card.scss +1 -1
  7. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  8. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  9. package/components/DataList/data-list.css +1 -1
  10. package/components/DataList/data-list.scss +1 -1
  11. package/components/DualListSelector/dual-list-selector.css +1 -1
  12. package/components/DualListSelector/dual-list-selector.scss +1 -1
  13. package/components/ExpandableSection/expandable-section.css +2 -2
  14. package/components/ExpandableSection/expandable-section.scss +2 -2
  15. package/components/Form/form.css +1 -1
  16. package/components/Form/form.scss +1 -1
  17. package/components/JumpLinks/jump-links.css +1 -1
  18. package/components/JumpLinks/jump-links.scss +1 -1
  19. package/components/Nav/nav.css +1 -1
  20. package/components/Nav/nav.scss +1 -1
  21. package/components/NotificationDrawer/notification-drawer.css +1 -1
  22. package/components/NotificationDrawer/notification-drawer.scss +1 -1
  23. package/components/Table/table.css +2 -2
  24. package/components/Table/table.scss +2 -2
  25. package/components/Tabs/tabs.css +2 -2
  26. package/components/Tabs/tabs.scss +2 -2
  27. package/components/Toolbar/toolbar.css +1 -1
  28. package/components/Toolbar/toolbar.scss +1 -1
  29. package/components/TreeView/tree-view.css +1 -1
  30. package/components/TreeView/tree-view.scss +1 -1
  31. package/components/Wizard/wizard.css +1 -1
  32. package/components/Wizard/wizard.scss +1 -1
  33. package/components/_index.css +20 -19
  34. package/docs/components/Accordion/examples/Accordion.md +390 -30
  35. package/docs/components/Alert/examples/Alert.md +494 -38
  36. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  37. package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
  38. package/docs/components/Card/examples/Card.md +52 -4
  39. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
  40. package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
  41. package/docs/components/DataList/examples/DataList.md +221 -17
  42. package/docs/components/DualListSelector/examples/DualListSelector.md +169 -13
  43. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  44. package/docs/components/Form/examples/Form.md +78 -6
  45. package/docs/components/Icon/examples/Icon.md +26 -2
  46. package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
  47. package/docs/components/Menu/examples/Menu.md +1456 -112
  48. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +39 -3
  49. package/docs/components/Nav/examples/Navigation.md +710 -62
  50. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +52 -4
  51. package/docs/components/Table/examples/Table.md +819 -63
  52. package/docs/components/Tabs/examples/Tabs.md +321 -213
  53. package/docs/components/TreeView/examples/TreeView.md +1300 -100
  54. package/docs/components/Wizard/examples/Wizard.md +323 -59
  55. package/docs/demos/AboutModal/examples/AboutModal.md +39 -3
  56. package/docs/demos/Alert/examples/Alert.md +182 -14
  57. package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
  58. package/docs/demos/Banner/examples/Banner.md +78 -6
  59. package/docs/demos/Card/examples/Card.md +242 -29
  60. package/docs/demos/CardView/examples/CardView.md +78 -6
  61. package/docs/demos/Compass/examples/Compass.md +71 -35
  62. package/docs/demos/Dashboard/examples/Dashboard.md +104 -8
  63. package/docs/demos/DataList/examples/DataList.md +234 -18
  64. package/docs/demos/DescriptionList/examples/DescriptionList.md +117 -9
  65. package/docs/demos/Drawer/examples/Drawer.md +141 -15
  66. package/docs/demos/Form/examples/BasicForms.md +143 -11
  67. package/docs/demos/JumpLinks/examples/JumpLinks.md +216 -27
  68. package/docs/demos/Masthead/examples/Masthead.md +355 -31
  69. package/docs/demos/Modal/examples/Modal.md +234 -18
  70. package/docs/demos/Nav/examples/Nav.md +320 -32
  71. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +247 -19
  72. package/docs/demos/Page/examples/Page.md +546 -42
  73. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +281 -29
  74. package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
  75. package/docs/demos/Table/examples/Table.md +702 -54
  76. package/docs/demos/Tabs/examples/Tabs.md +238 -22
  77. package/docs/demos/Toolbar/examples/Toolbar.md +78 -6
  78. package/docs/demos/Wizard/examples/Wizard.md +621 -72
  79. package/package.json +1 -1
  80. package/patternfly-no-globals.css +20 -19
  81. package/patternfly.css +20 -19
  82. package/patternfly.min.css +1 -1
  83. 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>
@@ -1571,10 +1628,19 @@ wrapperTag: div
1571
1628
  aria-label="Inline danger alert"
1572
1629
  >
1573
1630
  <div class="pf-v6-c-alert__icon">
1574
- <i
1575
- class="fas fa-fw fa-exclamation-circle"
1631
+ <svg
1632
+ class="pf-v6-svg"
1633
+ viewBox="0 0 512 512"
1634
+ fill="currentColor"
1576
1635
  aria-hidden="true"
1577
- ></i>
1636
+ role="img"
1637
+ width="1em"
1638
+ height="1em"
1639
+ >
1640
+ <path
1641
+ d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
1642
+ />
1643
+ </svg>
1578
1644
  </div>
1579
1645
  <p class="pf-v6-c-alert__title">
1580
1646
  <span
@@ -1605,10 +1671,19 @@ wrapperTag: div
1605
1671
  >
1606
1672
  <span class="pf-v6-c-button__icon">
1607
1673
  <div class="pf-v6-c-table__toggle-icon">
1608
- <i
1609
- class="fas fa-angle-down"
1674
+ <svg
1675
+ class="pf-v6-svg"
1676
+ viewBox="0 0 20 20"
1677
+ fill="currentColor"
1610
1678
  aria-hidden="true"
1611
- ></i>
1679
+ role="img"
1680
+ width="1em"
1681
+ height="1em"
1682
+ >
1683
+ <path
1684
+ 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"
1685
+ />
1686
+ </svg>
1612
1687
  </div>
1613
1688
  </span>
1614
1689
  </button>
@@ -1673,10 +1748,19 @@ wrapperTag: div
1673
1748
  >
1674
1749
  <span class="pf-v6-c-button__icon">
1675
1750
  <div class="pf-v6-c-table__toggle-icon">
1676
- <i
1677
- class="fas fa-angle-down"
1751
+ <svg
1752
+ class="pf-v6-svg"
1753
+ viewBox="0 0 20 20"
1754
+ fill="currentColor"
1678
1755
  aria-hidden="true"
1679
- ></i>
1756
+ role="img"
1757
+ width="1em"
1758
+ height="1em"
1759
+ >
1760
+ <path
1761
+ 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"
1762
+ />
1763
+ </svg>
1680
1764
  </div>
1681
1765
  </span>
1682
1766
  </button>
@@ -1739,10 +1823,19 @@ wrapperTag: div
1739
1823
  >
1740
1824
  <span class="pf-v6-c-button__icon">
1741
1825
  <div class="pf-v6-c-table__toggle-icon">
1742
- <i
1743
- class="fas fa-angle-down"
1826
+ <svg
1827
+ class="pf-v6-svg"
1828
+ viewBox="0 0 20 20"
1829
+ fill="currentColor"
1744
1830
  aria-hidden="true"
1745
- ></i>
1831
+ role="img"
1832
+ width="1em"
1833
+ height="1em"
1834
+ >
1835
+ <path
1836
+ 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"
1837
+ />
1838
+ </svg>
1746
1839
  </div>
1747
1840
  </span>
1748
1841
  </button>
@@ -1899,7 +1992,19 @@ wrapperTag: div
1899
1992
  </div>
1900
1993
  </div>
1901
1994
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1902
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1995
+ <svg
1996
+ class="pf-v6-svg"
1997
+ viewBox="0 0 20 20"
1998
+ fill="currentColor"
1999
+ aria-hidden="true"
2000
+ role="img"
2001
+ width="1em"
2002
+ height="1em"
2003
+ >
2004
+ <path
2005
+ 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"
2006
+ />
2007
+ </svg>
1903
2008
  </span>
1904
2009
  </button>
1905
2010
  <ul class="pf-v6-c-notification-drawer__list" role="list">
@@ -2166,7 +2271,19 @@ wrapperTag: div
2166
2271
  >
2167
2272
  <span class="pf-v6-c-button__icon pf-m-start">
2168
2273
  <span class="pf-v6-c-card__header-toggle-icon">
2169
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2274
+ <svg
2275
+ class="pf-v6-svg"
2276
+ viewBox="0 0 20 20"
2277
+ fill="currentColor"
2278
+ aria-hidden="true"
2279
+ role="img"
2280
+ width="1em"
2281
+ height="1em"
2282
+ >
2283
+ <path
2284
+ 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"
2285
+ />
2286
+ </svg>
2170
2287
  </span>
2171
2288
  </span>
2172
2289
  </button>
@@ -2279,7 +2396,19 @@ wrapperTag: div
2279
2396
  >
2280
2397
  <span class="pf-v6-c-button__icon pf-m-start">
2281
2398
  <span class="pf-v6-c-card__header-toggle-icon">
2282
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2399
+ <svg
2400
+ class="pf-v6-svg"
2401
+ viewBox="0 0 20 20"
2402
+ fill="currentColor"
2403
+ aria-hidden="true"
2404
+ role="img"
2405
+ width="1em"
2406
+ height="1em"
2407
+ >
2408
+ <path
2409
+ 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"
2410
+ />
2411
+ </svg>
2283
2412
  </span>
2284
2413
  </span>
2285
2414
  </button>
@@ -2309,7 +2438,19 @@ wrapperTag: div
2309
2438
  >
2310
2439
  <span class="pf-v6-c-button__icon pf-m-start">
2311
2440
  <span class="pf-v6-c-card__header-toggle-icon">
2312
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2441
+ <svg
2442
+ class="pf-v6-svg"
2443
+ viewBox="0 0 20 20"
2444
+ fill="currentColor"
2445
+ aria-hidden="true"
2446
+ role="img"
2447
+ width="1em"
2448
+ height="1em"
2449
+ >
2450
+ <path
2451
+ 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"
2452
+ />
2453
+ </svg>
2313
2454
  </span>
2314
2455
  </span>
2315
2456
  </button>
@@ -2354,7 +2495,19 @@ wrapperTag: div
2354
2495
  >
2355
2496
  <span class="pf-v6-c-button__icon pf-m-start">
2356
2497
  <span class="pf-v6-c-card__header-toggle-icon">
2357
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2498
+ <svg
2499
+ class="pf-v6-svg"
2500
+ viewBox="0 0 20 20"
2501
+ fill="currentColor"
2502
+ aria-hidden="true"
2503
+ role="img"
2504
+ width="1em"
2505
+ height="1em"
2506
+ >
2507
+ <path
2508
+ 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"
2509
+ />
2510
+ </svg>
2358
2511
  </span>
2359
2512
  </span>
2360
2513
  </button>
@@ -2464,7 +2617,19 @@ wrapperTag: div
2464
2617
  >
2465
2618
  <span class="pf-v6-c-button__icon pf-m-start">
2466
2619
  <span class="pf-v6-c-card__header-toggle-icon">
2467
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2620
+ <svg
2621
+ class="pf-v6-svg"
2622
+ viewBox="0 0 20 20"
2623
+ fill="currentColor"
2624
+ aria-hidden="true"
2625
+ role="img"
2626
+ width="1em"
2627
+ height="1em"
2628
+ >
2629
+ <path
2630
+ 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"
2631
+ />
2632
+ </svg>
2468
2633
  </span>
2469
2634
  </span>
2470
2635
  </button>
@@ -2491,7 +2656,19 @@ wrapperTag: div
2491
2656
  >
2492
2657
  <span class="pf-v6-c-button__icon pf-m-start">
2493
2658
  <span class="pf-v6-c-card__header-toggle-icon">
2494
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2659
+ <svg
2660
+ class="pf-v6-svg"
2661
+ viewBox="0 0 20 20"
2662
+ fill="currentColor"
2663
+ aria-hidden="true"
2664
+ role="img"
2665
+ width="1em"
2666
+ height="1em"
2667
+ >
2668
+ <path
2669
+ 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"
2670
+ />
2671
+ </svg>
2495
2672
  </span>
2496
2673
  </span>
2497
2674
  </button>
@@ -2531,7 +2708,19 @@ wrapperTag: div
2531
2708
  >
2532
2709
  <span class="pf-v6-c-accordion__toggle-text">CPU 1</span>
2533
2710
  <span class="pf-v6-c-accordion__toggle-icon">
2534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2711
+ <svg
2712
+ class="pf-v6-svg"
2713
+ viewBox="0 0 20 20"
2714
+ fill="currentColor"
2715
+ aria-hidden="true"
2716
+ role="img"
2717
+ width="1em"
2718
+ height="1em"
2719
+ >
2720
+ <path
2721
+ 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"
2722
+ />
2723
+ </svg>
2535
2724
  </span>
2536
2725
  </button>
2537
2726
  </h3>
@@ -2627,7 +2816,19 @@ wrapperTag: div
2627
2816
  >
2628
2817
  <span class="pf-v6-c-accordion__toggle-text">CPU 2</span>
2629
2818
  <span class="pf-v6-c-accordion__toggle-icon">
2630
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2819
+ <svg
2820
+ class="pf-v6-svg"
2821
+ viewBox="0 0 20 20"
2822
+ fill="currentColor"
2823
+ aria-hidden="true"
2824
+ role="img"
2825
+ width="1em"
2826
+ height="1em"
2827
+ >
2828
+ <path
2829
+ 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"
2830
+ />
2831
+ </svg>
2631
2832
  </span>
2632
2833
  </button>
2633
2834
  </h3>
@@ -2721,7 +2922,19 @@ wrapperTag: div
2721
2922
  >
2722
2923
  <span class="pf-v6-c-accordion__toggle-text">CPU 3</span>
2723
2924
  <span class="pf-v6-c-accordion__toggle-icon">
2724
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2925
+ <svg
2926
+ class="pf-v6-svg"
2927
+ viewBox="0 0 20 20"
2928
+ fill="currentColor"
2929
+ aria-hidden="true"
2930
+ role="img"
2931
+ width="1em"
2932
+ height="1em"
2933
+ >
2934
+ <path
2935
+ 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"
2936
+ />
2937
+ </svg>
2725
2938
  </span>
2726
2939
  </button>
2727
2940
  </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