@patternfly/patternfly 6.5.0-prerelease.43 → 6.5.0-prerelease.45

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 (65) hide show
  1. package/components/Button/button.css +76 -3
  2. package/components/Button/button.scss +85 -4
  3. package/components/_index.css +76 -3
  4. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  5. package/docs/components/ActionList/examples/ActionList.md +143 -11
  6. package/docs/components/Alert/examples/Alert.md +182 -14
  7. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  8. package/docs/components/Button/examples/Button.md +2017 -157
  9. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  10. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +208 -16
  11. package/docs/components/CodeBlock/examples/CodeBlock.md +78 -6
  12. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  13. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  14. package/docs/components/DescriptionList/examples/DescriptionList.md +325 -25
  15. package/docs/components/Drawer/examples/Drawer.md +273 -21
  16. package/docs/components/DualListSelector/examples/DualListSelector.md +106 -112
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  18. package/docs/components/InputGroup/examples/InputGroup.md +26 -2
  19. package/docs/components/Label/examples/Label.md +242 -218
  20. package/docs/components/Login/examples/Login.md +26 -2
  21. package/docs/components/Masthead/examples/masthead.md +13 -1
  22. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  23. package/docs/components/ModalBox/examples/ModalBox.md +195 -15
  24. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +117 -9
  25. package/docs/components/Nav/examples/Navigation.md +52 -4
  26. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +26 -2
  27. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  28. package/docs/components/Page/examples/Page.md +13 -1
  29. package/docs/components/Pagination/examples/Pagination.md +624 -48
  30. package/docs/components/Popover/examples/Popover.md +208 -16
  31. package/docs/components/Slider/examples/Slider.md +4 -4
  32. package/docs/components/Table/examples/Table.md +52 -4
  33. package/docs/components/Tabs/examples/Tabs.md +1378 -106
  34. package/docs/components/TextInputGroup/examples/TextInputGroup.md +128 -44
  35. package/docs/components/Toolbar/examples/Toolbar.md +455 -35
  36. package/docs/components/TreeView/examples/TreeView.md +52 -4
  37. package/docs/components/Wizard/examples/Wizard.md +169 -13
  38. package/docs/demos/AboutModal/examples/AboutModal.md +13 -1
  39. package/docs/demos/Alert/examples/Alert.md +39 -3
  40. package/docs/demos/BackToTop/examples/BackToTop.md +13 -1
  41. package/docs/demos/Button/examples/Button.md +13 -1
  42. package/docs/demos/Card/examples/Card.md +65 -5
  43. package/docs/demos/CardView/examples/CardView.md +78 -6
  44. package/docs/demos/Compass/examples/Compass.md +323 -29
  45. package/docs/demos/Dashboard/examples/Dashboard.md +39 -3
  46. package/docs/demos/DataList/examples/DataList.md +312 -24
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -1
  48. package/docs/demos/Drawer/examples/Drawer.md +39 -3
  49. package/docs/demos/Form/examples/BasicForms.md +106 -10
  50. package/docs/demos/JumpLinks/examples/JumpLinks.md +26 -2
  51. package/docs/demos/Masthead/examples/Masthead.md +40 -4
  52. package/docs/demos/Modal/examples/Modal.md +78 -6
  53. package/docs/demos/Nav/examples/Nav.md +52 -4
  54. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  55. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  56. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +295 -55
  57. package/docs/demos/Table/examples/Table.md +1108 -145
  58. package/docs/demos/Tabs/examples/Tabs.md +53 -8
  59. package/docs/demos/Toolbar/examples/Toolbar.md +414 -36
  60. package/docs/demos/Wizard/examples/Wizard.md +130 -10
  61. package/package.json +2 -2
  62. package/patternfly-no-globals.css +76 -3
  63. package/patternfly.css +76 -3
  64. package/patternfly.min.css +1 -1
  65. package/patternfly.min.css.map +1 -1
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -517,7 +517,19 @@ section: patterns
517
517
  aria-label="Go to previous page"
518
518
  >
519
519
  <span class="pf-v6-c-button__icon">
520
- <i class="fas fa-angle-left" aria-hidden="true"></i>
520
+ <svg
521
+ class="pf-v6-svg"
522
+ viewBox="0 0 256 512"
523
+ fill="currentColor"
524
+ aria-hidden="true"
525
+ role="img"
526
+ width="1em"
527
+ height="1em"
528
+ >
529
+ <path
530
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
531
+ />
532
+ </svg>
521
533
  </span>
522
534
  </button>
523
535
  </div>
@@ -528,7 +540,19 @@ section: patterns
528
540
  aria-label="Go to next page"
529
541
  >
530
542
  <span class="pf-v6-c-button__icon">
531
- <i class="fas fa-angle-right" aria-hidden="true"></i>
543
+ <svg
544
+ class="pf-v6-svg"
545
+ viewBox="0 0 256 512"
546
+ fill="currentColor"
547
+ aria-hidden="true"
548
+ role="img"
549
+ width="1em"
550
+ height="1em"
551
+ >
552
+ <path
553
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
554
+ />
555
+ </svg>
532
556
  </span>
533
557
  </button>
534
558
  </div>
@@ -1059,7 +1083,19 @@ section: patterns
1059
1083
  aria-label="Go to first page"
1060
1084
  >
1061
1085
  <span class="pf-v6-c-button__icon">
1062
- <i class="fas fa-angle-double-left" aria-hidden="true"></i>
1086
+ <svg
1087
+ class="pf-v6-svg"
1088
+ viewBox="0 0 448 512"
1089
+ fill="currentColor"
1090
+ aria-hidden="true"
1091
+ role="img"
1092
+ width="1em"
1093
+ height="1em"
1094
+ >
1095
+ <path
1096
+ d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
1097
+ />
1098
+ </svg>
1063
1099
  </span>
1064
1100
  </button>
1065
1101
  </div>
@@ -1071,7 +1107,19 @@ section: patterns
1071
1107
  aria-label="Go to previous page"
1072
1108
  >
1073
1109
  <span class="pf-v6-c-button__icon">
1074
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1110
+ <svg
1111
+ class="pf-v6-svg"
1112
+ viewBox="0 0 256 512"
1113
+ fill="currentColor"
1114
+ aria-hidden="true"
1115
+ role="img"
1116
+ width="1em"
1117
+ height="1em"
1118
+ >
1119
+ <path
1120
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1121
+ />
1122
+ </svg>
1075
1123
  </span>
1076
1124
  </button>
1077
1125
  </div>
@@ -1094,7 +1142,19 @@ section: patterns
1094
1142
  aria-label="Go to next page"
1095
1143
  >
1096
1144
  <span class="pf-v6-c-button__icon">
1097
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1145
+ <svg
1146
+ class="pf-v6-svg"
1147
+ viewBox="0 0 256 512"
1148
+ fill="currentColor"
1149
+ aria-hidden="true"
1150
+ role="img"
1151
+ width="1em"
1152
+ height="1em"
1153
+ >
1154
+ <path
1155
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1156
+ />
1157
+ </svg>
1098
1158
  </span>
1099
1159
  </button>
1100
1160
  </div>
@@ -1106,7 +1166,19 @@ section: patterns
1106
1166
  aria-label="Go to last page"
1107
1167
  >
1108
1168
  <span class="pf-v6-c-button__icon">
1109
- <i class="fas fa-angle-double-right" aria-hidden="true"></i>
1169
+ <svg
1170
+ class="pf-v6-svg"
1171
+ viewBox="0 0 448 512"
1172
+ fill="currentColor"
1173
+ aria-hidden="true"
1174
+ role="img"
1175
+ width="1em"
1176
+ height="1em"
1177
+ >
1178
+ <path
1179
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
1180
+ />
1181
+ </svg>
1110
1182
  </span>
1111
1183
  </button>
1112
1184
  </div>
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -148,7 +148,19 @@ This demo populates the main Compass section with a card view, which is one of t
148
148
  disabled
149
149
  >
150
150
  <span class="pf-v6-c-button__icon">
151
- <i class="fas fa-angle-left" aria-hidden="true"></i>
151
+ <svg
152
+ class="pf-v6-svg"
153
+ viewBox="0 0 256 512"
154
+ fill="currentColor"
155
+ aria-hidden="true"
156
+ role="img"
157
+ width="1em"
158
+ height="1em"
159
+ >
160
+ <path
161
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
162
+ />
163
+ </svg>
152
164
  </span>
153
165
  </button>
154
166
  </div>
@@ -234,7 +246,19 @@ This demo populates the main Compass section with a card view, which is one of t
234
246
  disabled
235
247
  >
236
248
  <span class="pf-v6-c-button__icon">
237
- <i class="fas fa-angle-right" aria-hidden="true"></i>
249
+ <svg
250
+ class="pf-v6-svg"
251
+ viewBox="0 0 256 512"
252
+ fill="currentColor"
253
+ aria-hidden="true"
254
+ role="img"
255
+ width="1em"
256
+ height="1em"
257
+ >
258
+ <path
259
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
260
+ />
261
+ </svg>
238
262
  </span>
239
263
  </button>
240
264
  </div>
@@ -280,7 +304,19 @@ This demo populates the main Compass section with a card view, which is one of t
280
304
  disabled
281
305
  >
282
306
  <span class="pf-v6-c-button__icon">
283
- <i class="fas fa-angle-left" aria-hidden="true"></i>
307
+ <svg
308
+ class="pf-v6-svg"
309
+ viewBox="0 0 256 512"
310
+ fill="currentColor"
311
+ aria-hidden="true"
312
+ role="img"
313
+ width="1em"
314
+ height="1em"
315
+ >
316
+ <path
317
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
318
+ />
319
+ </svg>
284
320
  </span>
285
321
  </button>
286
322
  </div>
@@ -369,7 +405,19 @@ This demo populates the main Compass section with a card view, which is one of t
369
405
  disabled
370
406
  >
371
407
  <span class="pf-v6-c-button__icon">
372
- <i class="fas fa-angle-right" aria-hidden="true"></i>
408
+ <svg
409
+ class="pf-v6-svg"
410
+ viewBox="0 0 256 512"
411
+ fill="currentColor"
412
+ aria-hidden="true"
413
+ role="img"
414
+ width="1em"
415
+ height="1em"
416
+ >
417
+ <path
418
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
419
+ />
420
+ </svg>
373
421
  </span>
374
422
  </button>
375
423
  </div>
@@ -689,7 +737,19 @@ This demo populates the main Compass section with a card view, which is one of t
689
737
  aria-label="Go to previous page"
690
738
  >
691
739
  <span class="pf-v6-c-button__icon">
692
- <i class="fas fa-angle-left" aria-hidden="true"></i>
740
+ <svg
741
+ class="pf-v6-svg"
742
+ viewBox="0 0 256 512"
743
+ fill="currentColor"
744
+ aria-hidden="true"
745
+ role="img"
746
+ width="1em"
747
+ height="1em"
748
+ >
749
+ <path
750
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
751
+ />
752
+ </svg>
693
753
  </span>
694
754
  </button>
695
755
  </div>
@@ -700,7 +760,19 @@ This demo populates the main Compass section with a card view, which is one of t
700
760
  aria-label="Go to next page"
701
761
  >
702
762
  <span class="pf-v6-c-button__icon">
703
- <i class="fas fa-angle-right" aria-hidden="true"></i>
763
+ <svg
764
+ class="pf-v6-svg"
765
+ viewBox="0 0 256 512"
766
+ fill="currentColor"
767
+ aria-hidden="true"
768
+ role="img"
769
+ width="1em"
770
+ height="1em"
771
+ >
772
+ <path
773
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
774
+ />
775
+ </svg>
704
776
  </span>
705
777
  </button>
706
778
  </div>
@@ -1475,7 +1547,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1475
1547
  disabled
1476
1548
  >
1477
1549
  <span class="pf-v6-c-button__icon">
1478
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1550
+ <svg
1551
+ class="pf-v6-svg"
1552
+ viewBox="0 0 256 512"
1553
+ fill="currentColor"
1554
+ aria-hidden="true"
1555
+ role="img"
1556
+ width="1em"
1557
+ height="1em"
1558
+ >
1559
+ <path
1560
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1561
+ />
1562
+ </svg>
1479
1563
  </span>
1480
1564
  </button>
1481
1565
  </div>
@@ -1561,7 +1645,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1561
1645
  disabled
1562
1646
  >
1563
1647
  <span class="pf-v6-c-button__icon">
1564
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1648
+ <svg
1649
+ class="pf-v6-svg"
1650
+ viewBox="0 0 256 512"
1651
+ fill="currentColor"
1652
+ aria-hidden="true"
1653
+ role="img"
1654
+ width="1em"
1655
+ height="1em"
1656
+ >
1657
+ <path
1658
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1659
+ />
1660
+ </svg>
1565
1661
  </span>
1566
1662
  </button>
1567
1663
  </div>
@@ -1607,7 +1703,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1607
1703
  disabled
1608
1704
  >
1609
1705
  <span class="pf-v6-c-button__icon">
1610
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1706
+ <svg
1707
+ class="pf-v6-svg"
1708
+ viewBox="0 0 256 512"
1709
+ fill="currentColor"
1710
+ aria-hidden="true"
1711
+ role="img"
1712
+ width="1em"
1713
+ height="1em"
1714
+ >
1715
+ <path
1716
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1717
+ />
1718
+ </svg>
1611
1719
  </span>
1612
1720
  </button>
1613
1721
  </div>
@@ -1696,7 +1804,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1696
1804
  disabled
1697
1805
  >
1698
1806
  <span class="pf-v6-c-button__icon">
1699
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1807
+ <svg
1808
+ class="pf-v6-svg"
1809
+ viewBox="0 0 256 512"
1810
+ fill="currentColor"
1811
+ aria-hidden="true"
1812
+ role="img"
1813
+ width="1em"
1814
+ height="1em"
1815
+ >
1816
+ <path
1817
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1818
+ />
1819
+ </svg>
1700
1820
  </span>
1701
1821
  </button>
1702
1822
  </div>
@@ -3027,7 +3147,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3027
3147
  disabled
3028
3148
  >
3029
3149
  <span class="pf-v6-c-button__icon">
3030
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3150
+ <svg
3151
+ class="pf-v6-svg"
3152
+ viewBox="0 0 256 512"
3153
+ fill="currentColor"
3154
+ aria-hidden="true"
3155
+ role="img"
3156
+ width="1em"
3157
+ height="1em"
3158
+ >
3159
+ <path
3160
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3161
+ />
3162
+ </svg>
3031
3163
  </span>
3032
3164
  </button>
3033
3165
  </div>
@@ -3113,7 +3245,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3113
3245
  disabled
3114
3246
  >
3115
3247
  <span class="pf-v6-c-button__icon">
3116
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3248
+ <svg
3249
+ class="pf-v6-svg"
3250
+ viewBox="0 0 256 512"
3251
+ fill="currentColor"
3252
+ aria-hidden="true"
3253
+ role="img"
3254
+ width="1em"
3255
+ height="1em"
3256
+ >
3257
+ <path
3258
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3259
+ />
3260
+ </svg>
3117
3261
  </span>
3118
3262
  </button>
3119
3263
  </div>
@@ -3159,7 +3303,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3159
3303
  disabled
3160
3304
  >
3161
3305
  <span class="pf-v6-c-button__icon">
3162
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3306
+ <svg
3307
+ class="pf-v6-svg"
3308
+ viewBox="0 0 256 512"
3309
+ fill="currentColor"
3310
+ aria-hidden="true"
3311
+ role="img"
3312
+ width="1em"
3313
+ height="1em"
3314
+ >
3315
+ <path
3316
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3317
+ />
3318
+ </svg>
3163
3319
  </span>
3164
3320
  </button>
3165
3321
  </div>
@@ -3248,7 +3404,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3248
3404
  disabled
3249
3405
  >
3250
3406
  <span class="pf-v6-c-button__icon">
3251
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3407
+ <svg
3408
+ class="pf-v6-svg"
3409
+ viewBox="0 0 256 512"
3410
+ fill="currentColor"
3411
+ aria-hidden="true"
3412
+ role="img"
3413
+ width="1em"
3414
+ height="1em"
3415
+ >
3416
+ <path
3417
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3418
+ />
3419
+ </svg>
3252
3420
  </span>
3253
3421
  </button>
3254
3422
  </div>
@@ -3577,7 +3745,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3577
3745
  aria-label="Go to previous page"
3578
3746
  >
3579
3747
  <span class="pf-v6-c-button__icon">
3580
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3748
+ <svg
3749
+ class="pf-v6-svg"
3750
+ viewBox="0 0 256 512"
3751
+ fill="currentColor"
3752
+ aria-hidden="true"
3753
+ role="img"
3754
+ width="1em"
3755
+ height="1em"
3756
+ >
3757
+ <path
3758
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3759
+ />
3760
+ </svg>
3581
3761
  </span>
3582
3762
  </button>
3583
3763
  </div>
@@ -3588,7 +3768,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3588
3768
  aria-label="Go to next page"
3589
3769
  >
3590
3770
  <span class="pf-v6-c-button__icon">
3591
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3771
+ <svg
3772
+ class="pf-v6-svg"
3773
+ viewBox="0 0 256 512"
3774
+ fill="currentColor"
3775
+ aria-hidden="true"
3776
+ role="img"
3777
+ width="1em"
3778
+ height="1em"
3779
+ >
3780
+ <path
3781
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3782
+ />
3783
+ </svg>
3592
3784
  </span>
3593
3785
  </button>
3594
3786
  </div>
@@ -4237,7 +4429,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4237
4429
  aria-label="Go to previous page"
4238
4430
  >
4239
4431
  <span class="pf-v6-c-button__icon">
4240
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4432
+ <svg
4433
+ class="pf-v6-svg"
4434
+ viewBox="0 0 256 512"
4435
+ fill="currentColor"
4436
+ aria-hidden="true"
4437
+ role="img"
4438
+ width="1em"
4439
+ height="1em"
4440
+ >
4441
+ <path
4442
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4443
+ />
4444
+ </svg>
4241
4445
  </span>
4242
4446
  </button>
4243
4447
  </div>
@@ -4248,7 +4452,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4248
4452
  aria-label="Go to next page"
4249
4453
  >
4250
4454
  <span class="pf-v6-c-button__icon">
4251
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4455
+ <svg
4456
+ class="pf-v6-svg"
4457
+ viewBox="0 0 256 512"
4458
+ fill="currentColor"
4459
+ aria-hidden="true"
4460
+ role="img"
4461
+ width="1em"
4462
+ height="1em"
4463
+ >
4464
+ <path
4465
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4466
+ />
4467
+ </svg>
4252
4468
  </span>
4253
4469
  </button>
4254
4470
  </div>
@@ -5034,7 +5250,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5034
5250
  disabled
5035
5251
  >
5036
5252
  <span class="pf-v6-c-button__icon">
5037
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5253
+ <svg
5254
+ class="pf-v6-svg"
5255
+ viewBox="0 0 256 512"
5256
+ fill="currentColor"
5257
+ aria-hidden="true"
5258
+ role="img"
5259
+ width="1em"
5260
+ height="1em"
5261
+ >
5262
+ <path
5263
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5264
+ />
5265
+ </svg>
5038
5266
  </span>
5039
5267
  </button>
5040
5268
  </div>
@@ -5126,7 +5354,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5126
5354
  disabled
5127
5355
  >
5128
5356
  <span class="pf-v6-c-button__icon">
5129
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5357
+ <svg
5358
+ class="pf-v6-svg"
5359
+ viewBox="0 0 256 512"
5360
+ fill="currentColor"
5361
+ aria-hidden="true"
5362
+ role="img"
5363
+ width="1em"
5364
+ height="1em"
5365
+ >
5366
+ <path
5367
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5368
+ />
5369
+ </svg>
5130
5370
  </span>
5131
5371
  </button>
5132
5372
  </div>
@@ -5175,7 +5415,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5175
5415
  disabled
5176
5416
  >
5177
5417
  <span class="pf-v6-c-button__icon">
5178
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5418
+ <svg
5419
+ class="pf-v6-svg"
5420
+ viewBox="0 0 256 512"
5421
+ fill="currentColor"
5422
+ aria-hidden="true"
5423
+ role="img"
5424
+ width="1em"
5425
+ height="1em"
5426
+ >
5427
+ <path
5428
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5429
+ />
5430
+ </svg>
5179
5431
  </span>
5180
5432
  </button>
5181
5433
  </div>
@@ -5270,7 +5522,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5270
5522
  disabled
5271
5523
  >
5272
5524
  <span class="pf-v6-c-button__icon">
5273
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5525
+ <svg
5526
+ class="pf-v6-svg"
5527
+ viewBox="0 0 256 512"
5528
+ fill="currentColor"
5529
+ aria-hidden="true"
5530
+ role="img"
5531
+ width="1em"
5532
+ height="1em"
5533
+ >
5534
+ <path
5535
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5536
+ />
5537
+ </svg>
5274
5538
  </span>
5275
5539
  </button>
5276
5540
  </div>
@@ -5612,10 +5876,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5612
5876
  aria-label="Go to previous page"
5613
5877
  >
5614
5878
  <span class="pf-v6-c-button__icon">
5615
- <i
5616
- class="fas fa-angle-left"
5879
+ <svg
5880
+ class="pf-v6-svg"
5881
+ viewBox="0 0 256 512"
5882
+ fill="currentColor"
5617
5883
  aria-hidden="true"
5618
- ></i>
5884
+ role="img"
5885
+ width="1em"
5886
+ height="1em"
5887
+ >
5888
+ <path
5889
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5890
+ />
5891
+ </svg>
5619
5892
  </span>
5620
5893
  </button>
5621
5894
  </div>
@@ -5628,10 +5901,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5628
5901
  aria-label="Go to next page"
5629
5902
  >
5630
5903
  <span class="pf-v6-c-button__icon">
5631
- <i
5632
- class="fas fa-angle-right"
5904
+ <svg
5905
+ class="pf-v6-svg"
5906
+ viewBox="0 0 256 512"
5907
+ fill="currentColor"
5633
5908
  aria-hidden="true"
5634
- ></i>
5909
+ role="img"
5910
+ width="1em"
5911
+ height="1em"
5912
+ >
5913
+ <path
5914
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5915
+ />
5916
+ </svg>
5635
5917
  </span>
5636
5918
  </button>
5637
5919
  </div>
@@ -6281,7 +6563,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
6281
6563
  aria-label="Close drawer panel"
6282
6564
  >
6283
6565
  <span class="pf-v6-c-button__icon">
6284
- <i class="fas fa-times" aria-hidden="true"></i>
6566
+ <svg
6567
+ class="pf-v6-svg"
6568
+ viewBox="0 0 352 512"
6569
+ fill="currentColor"
6570
+ aria-hidden="true"
6571
+ role="img"
6572
+ width="1em"
6573
+ height="1em"
6574
+ >
6575
+ <path
6576
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
6577
+ />
6578
+ </svg>
6285
6579
  </span>
6286
6580
  </button>
6287
6581
  </div>