@patternfly/patternfly 6.5.0-prerelease.45 → 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 (94) 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 +11 -3
  20. package/components/NotificationDrawer/notification-drawer.scss +12 -5
  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 +28 -20
  32. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  33. package/docs/components/Accordion/examples/Accordion.md +390 -30
  34. package/docs/components/ActionList/examples/ActionList.md +10 -10
  35. package/docs/components/Alert/examples/Alert.md +30 -30
  36. package/docs/components/Banner/examples/Banner.md +65 -5
  37. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  38. package/docs/components/CalendarMonth/examples/CalendarMonth.md +16 -16
  39. package/docs/components/Card/examples/Card.md +52 -4
  40. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +78 -6
  41. package/docs/components/CodeBlock/examples/CodeBlock.md +26 -2
  42. package/docs/components/DataList/examples/DataList.md +221 -17
  43. package/docs/components/Drawer/examples/Drawer.md +42 -42
  44. package/docs/components/DualListSelector/examples/DualListSelector.md +961 -85
  45. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  46. package/docs/components/Form/examples/Form.md +78 -6
  47. package/docs/components/Icon/examples/Icon.md +91 -7
  48. package/docs/components/InlineEdit/examples/InlineEdit.md +16 -16
  49. package/docs/components/JumpLinks/examples/JumpLinks.md +52 -4
  50. package/docs/components/Label/examples/Label.md +2812 -220
  51. package/docs/components/Menu/examples/Menu.md +1456 -112
  52. package/docs/components/MenuToggle/examples/MenuToggle.md +13 -1
  53. package/docs/components/ModalBox/examples/ModalBox.md +121 -37
  54. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +57 -21
  55. package/docs/components/Nav/examples/Navigation.md +710 -62
  56. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +576 -48
  57. package/docs/components/Popover/examples/Popover.md +110 -38
  58. package/docs/components/ProgressStepper/examples/ProgressStepper.md +273 -21
  59. package/docs/components/Slider/examples/Slider.md +52 -4
  60. package/docs/components/Table/examples/Table.md +819 -63
  61. package/docs/components/Tabs/examples/Tabs.md +1959 -339
  62. package/docs/components/TextInputGroup/examples/TextInputGroup.md +509 -41
  63. package/docs/components/Toolbar/examples/Toolbar.md +48 -48
  64. package/docs/components/TreeView/examples/TreeView.md +1300 -100
  65. package/docs/components/Wizard/examples/Wizard.md +349 -85
  66. package/docs/demos/AboutModal/examples/AboutModal.md +41 -5
  67. package/docs/demos/Alert/examples/Alert.md +123 -15
  68. package/docs/demos/BackToTop/examples/BackToTop.md +39 -3
  69. package/docs/demos/Banner/examples/Banner.md +78 -6
  70. package/docs/demos/Card/examples/Card.md +310 -34
  71. package/docs/demos/CardView/examples/CardView.md +78 -6
  72. package/docs/demos/Compass/examples/Compass.md +73 -37
  73. package/docs/demos/Dashboard/examples/Dashboard.md +128 -14
  74. package/docs/demos/DataList/examples/DataList.md +234 -18
  75. package/docs/demos/DescriptionList/examples/DescriptionList.md +119 -11
  76. package/docs/demos/Drawer/examples/Drawer.md +147 -21
  77. package/docs/demos/Form/examples/BasicForms.md +169 -13
  78. package/docs/demos/JumpLinks/examples/JumpLinks.md +220 -31
  79. package/docs/demos/Masthead/examples/Masthead.md +370 -34
  80. package/docs/demos/Modal/examples/Modal.md +246 -30
  81. package/docs/demos/Nav/examples/Nav.md +320 -32
  82. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1063 -115
  83. package/docs/demos/Page/examples/Page.md +548 -44
  84. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +371 -47
  85. package/docs/demos/Skeleton/examples/Skeleton.md +39 -3
  86. package/docs/demos/Table/examples/Table.md +934 -73
  87. package/docs/demos/Tabs/examples/Tabs.md +261 -27
  88. package/docs/demos/Toolbar/examples/Toolbar.md +102 -30
  89. package/docs/demos/Wizard/examples/Wizard.md +641 -92
  90. package/package.json +1 -1
  91. package/patternfly-no-globals.css +28 -20
  92. package/patternfly.css +28 -20
  93. package/patternfly.min.css +1 -1
  94. package/patternfly.min.css.map +1 -1
@@ -18,7 +18,19 @@ cssPrefix: pf-v6-c-expandable-section
18
18
  >
19
19
  <span class="pf-v6-c-button__icon pf-m-start">
20
20
  <span class="pf-v6-c-expandable-section__toggle-icon">
21
- <i class="fas fa-angle-right" aria-hidden="true"></i>
21
+ <svg
22
+ class="pf-v6-svg"
23
+ viewBox="0 0 20 20"
24
+ fill="currentColor"
25
+ aria-hidden="true"
26
+ role="img"
27
+ width="1em"
28
+ height="1em"
29
+ >
30
+ <path
31
+ 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"
32
+ />
33
+ </svg>
22
34
  </span>
23
35
  </span>
24
36
  <span class="pf-v6-c-button__text">Show more hidden example content</span>
@@ -49,7 +61,19 @@ cssPrefix: pf-v6-c-expandable-section
49
61
  >
50
62
  <span class="pf-v6-c-button__icon pf-m-start">
51
63
  <span class="pf-v6-c-expandable-section__toggle-icon">
52
- <i class="fas fa-angle-right" aria-hidden="true"></i>
64
+ <svg
65
+ class="pf-v6-svg"
66
+ viewBox="0 0 20 20"
67
+ fill="currentColor"
68
+ aria-hidden="true"
69
+ role="img"
70
+ width="1em"
71
+ height="1em"
72
+ >
73
+ <path
74
+ 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"
75
+ />
76
+ </svg>
53
77
  </span>
54
78
  </span>
55
79
  <span class="pf-v6-c-button__text">Show less expanded example content</span>
@@ -79,7 +103,19 @@ cssPrefix: pf-v6-c-expandable-section
79
103
  >
80
104
  <span class="pf-v6-c-button__icon pf-m-start">
81
105
  <span class="pf-v6-c-expandable-section__toggle-icon">
82
- <i class="fas fa-angle-right" aria-hidden="true"></i>
106
+ <svg
107
+ class="pf-v6-svg"
108
+ viewBox="0 0 20 20"
109
+ fill="currentColor"
110
+ aria-hidden="true"
111
+ role="img"
112
+ width="1em"
113
+ height="1em"
114
+ >
115
+ <path
116
+ 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"
117
+ />
118
+ </svg>
83
119
  </span>
84
120
  </span>
85
121
  <span class="pf-v6-c-button__text">Show less indented example content</span>
@@ -109,7 +145,19 @@ cssPrefix: pf-v6-c-expandable-section
109
145
  >
110
146
  <span class="pf-v6-c-button__icon pf-m-start">
111
147
  <span class="pf-v6-c-expandable-section__toggle-icon">
112
- <i class="fas fa-angle-right" aria-hidden="true"></i>
148
+ <svg
149
+ class="pf-v6-svg"
150
+ viewBox="0 0 20 20"
151
+ fill="currentColor"
152
+ aria-hidden="true"
153
+ role="img"
154
+ width="1em"
155
+ height="1em"
156
+ >
157
+ <path
158
+ 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"
159
+ />
160
+ </svg>
113
161
  </span>
114
162
  </span>
115
163
  <span
@@ -144,7 +192,19 @@ cssPrefix: pf-v6-c-expandable-section
144
192
  >
145
193
  <span class="pf-v6-c-button__icon pf-m-start">
146
194
  <span class="pf-v6-c-expandable-section__toggle-icon">
147
- <i class="fas fa-angle-right" aria-hidden="true"></i>
195
+ <svg
196
+ class="pf-v6-svg"
197
+ viewBox="0 0 20 20"
198
+ fill="currentColor"
199
+ aria-hidden="true"
200
+ role="img"
201
+ width="1em"
202
+ height="1em"
203
+ >
204
+ <path
205
+ 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"
206
+ />
207
+ </svg>
148
208
  </span>
149
209
  </span>
150
210
  <span
@@ -178,7 +238,19 @@ cssPrefix: pf-v6-c-expandable-section
178
238
  >
179
239
  <span class="pf-v6-c-button__icon pf-m-start">
180
240
  <span class="pf-v6-c-expandable-section__toggle-icon">
181
- <i class="fas fa-angle-right" aria-hidden="true"></i>
241
+ <svg
242
+ class="pf-v6-svg"
243
+ viewBox="0 0 20 20"
244
+ fill="currentColor"
245
+ aria-hidden="true"
246
+ role="img"
247
+ width="1em"
248
+ height="1em"
249
+ >
250
+ <path
251
+ 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"
252
+ />
253
+ </svg>
182
254
  </span>
183
255
  </span>
184
256
  <span
@@ -227,7 +299,19 @@ cssPrefix: pf-v6-c-expandable-section
227
299
  >
228
300
  <span class="pf-v6-c-button__icon pf-m-start">
229
301
  <span class="pf-v6-c-expandable-section__toggle-icon">
230
- <i class="fas fa-angle-right" aria-hidden="true"></i>
302
+ <svg
303
+ class="pf-v6-svg"
304
+ viewBox="0 0 20 20"
305
+ fill="currentColor"
306
+ aria-hidden="true"
307
+ role="img"
308
+ width="1em"
309
+ height="1em"
310
+ >
311
+ <path
312
+ 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"
313
+ />
314
+ </svg>
231
315
  </span>
232
316
  </span>
233
317
  <span class="pf-v6-c-button__text">Show less detached example content</span>
@@ -803,7 +803,19 @@ cssPrefix: pf-v6-c-form
803
803
  >
804
804
  <span class="pf-v6-c-button__icon">
805
805
  <span class="pf-v6-c-form__field-group-toggle-icon">
806
- <i class="fas fa-angle-right" aria-hidden="true"></i>
806
+ <svg
807
+ class="pf-v6-svg"
808
+ viewBox="0 0 20 20"
809
+ fill="currentColor"
810
+ aria-hidden="true"
811
+ role="img"
812
+ width="1em"
813
+ height="1em"
814
+ >
815
+ <path
816
+ 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"
817
+ />
818
+ </svg>
807
819
  </span>
808
820
  </span>
809
821
  </button>
@@ -845,7 +857,19 @@ cssPrefix: pf-v6-c-form
845
857
  >
846
858
  <span class="pf-v6-c-button__icon">
847
859
  <span class="pf-v6-c-form__field-group-toggle-icon">
848
- <i class="fas fa-angle-right" aria-hidden="true"></i>
860
+ <svg
861
+ class="pf-v6-svg"
862
+ viewBox="0 0 20 20"
863
+ fill="currentColor"
864
+ aria-hidden="true"
865
+ role="img"
866
+ width="1em"
867
+ height="1em"
868
+ >
869
+ <path
870
+ 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"
871
+ />
872
+ </svg>
849
873
  </span>
850
874
  </span>
851
875
  </button>
@@ -980,7 +1004,19 @@ cssPrefix: pf-v6-c-form
980
1004
  >
981
1005
  <span class="pf-v6-c-button__icon">
982
1006
  <span class="pf-v6-c-form__field-group-toggle-icon">
983
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1007
+ <svg
1008
+ class="pf-v6-svg"
1009
+ viewBox="0 0 20 20"
1010
+ fill="currentColor"
1011
+ aria-hidden="true"
1012
+ role="img"
1013
+ width="1em"
1014
+ height="1em"
1015
+ >
1016
+ <path
1017
+ 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"
1018
+ />
1019
+ </svg>
984
1020
  </span>
985
1021
  </span>
986
1022
  </button>
@@ -1112,7 +1148,19 @@ cssPrefix: pf-v6-c-form
1112
1148
  >
1113
1149
  <span class="pf-v6-c-button__icon">
1114
1150
  <span class="pf-v6-c-form__field-group-toggle-icon">
1115
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1151
+ <svg
1152
+ class="pf-v6-svg"
1153
+ viewBox="0 0 20 20"
1154
+ fill="currentColor"
1155
+ aria-hidden="true"
1156
+ role="img"
1157
+ width="1em"
1158
+ height="1em"
1159
+ >
1160
+ <path
1161
+ 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"
1162
+ />
1163
+ </svg>
1116
1164
  </span>
1117
1165
  </span>
1118
1166
  </button>
@@ -1287,7 +1335,19 @@ cssPrefix: pf-v6-c-form
1287
1335
  >
1288
1336
  <span class="pf-v6-c-button__icon">
1289
1337
  <span class="pf-v6-c-form__field-group-toggle-icon">
1290
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1338
+ <svg
1339
+ class="pf-v6-svg"
1340
+ viewBox="0 0 20 20"
1341
+ fill="currentColor"
1342
+ aria-hidden="true"
1343
+ role="img"
1344
+ width="1em"
1345
+ height="1em"
1346
+ >
1347
+ <path
1348
+ 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"
1349
+ />
1350
+ </svg>
1291
1351
  </span>
1292
1352
  </span>
1293
1353
  </button>
@@ -1519,7 +1579,19 @@ cssPrefix: pf-v6-c-form
1519
1579
  >
1520
1580
  <span class="pf-v6-c-button__icon">
1521
1581
  <span class="pf-v6-c-form__field-group-toggle-icon">
1522
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1582
+ <svg
1583
+ class="pf-v6-svg"
1584
+ viewBox="0 0 20 20"
1585
+ fill="currentColor"
1586
+ aria-hidden="true"
1587
+ role="img"
1588
+ width="1em"
1589
+ height="1em"
1590
+ >
1591
+ <path
1592
+ 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"
1593
+ />
1594
+ </svg>
1523
1595
  </span>
1524
1596
  </span>
1525
1597
  </button>
@@ -15,13 +15,37 @@ cssPrefix: pf-v6-c-icon
15
15
 
16
16
  <span class="pf-v6-c-icon">
17
17
  <span class="pf-v6-c-icon__content">
18
- <i class="fas fa-angle-right" aria-hidden="true"></i>
18
+ <svg
19
+ class="pf-v6-svg"
20
+ viewBox="0 0 20 20"
21
+ fill="currentColor"
22
+ aria-hidden="true"
23
+ role="img"
24
+ width="1em"
25
+ height="1em"
26
+ >
27
+ <path
28
+ 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"
29
+ />
30
+ </svg>
19
31
  </span>
20
32
  </span>
21
33
 
22
34
  <span class="pf-v6-c-icon">
23
35
  <span class="pf-v6-c-icon__content">
24
- <i class="fas fa-angle-down" aria-hidden="true"></i>
36
+ <svg
37
+ class="pf-v6-svg"
38
+ viewBox="0 0 20 20"
39
+ fill="currentColor"
40
+ aria-hidden="true"
41
+ role="img"
42
+ width="1em"
43
+ height="1em"
44
+ >
45
+ <path
46
+ 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"
47
+ />
48
+ </svg>
25
49
  </span>
26
50
  </span>
27
51
 
@@ -131,27 +155,87 @@ cssPrefix: pf-v6-c-icon
131
155
  ```html
132
156
  <span class="pf-v6-c-icon">
133
157
  <span class="pf-v6-c-icon__content pf-m-danger">
134
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
158
+ <svg
159
+ class="pf-v6-svg"
160
+ viewBox="0 0 32 32"
161
+ fill="currentColor"
162
+ aria-hidden="true"
163
+ role="img"
164
+ width="1em"
165
+ height="1em"
166
+ >
167
+ <path
168
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
169
+ />
170
+ </svg>
135
171
  </span>
136
172
  </span>
137
173
  <span class="pf-v6-c-icon">
138
174
  <span class="pf-v6-c-icon__content pf-m-warning">
139
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
175
+ <svg
176
+ class="pf-v6-svg"
177
+ viewBox="0 0 32 32"
178
+ fill="currentColor"
179
+ aria-hidden="true"
180
+ role="img"
181
+ width="1em"
182
+ height="1em"
183
+ >
184
+ <path
185
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
186
+ />
187
+ </svg>
140
188
  </span>
141
189
  </span>
142
190
  <span class="pf-v6-c-icon">
143
191
  <span class="pf-v6-c-icon__content pf-m-success">
144
- <i class="fas fa-check-circle" aria-hidden="true"></i>
192
+ <svg
193
+ class="pf-v6-svg"
194
+ viewBox="0 0 32 32"
195
+ fill="currentColor"
196
+ aria-hidden="true"
197
+ role="img"
198
+ width="1em"
199
+ height="1em"
200
+ >
201
+ <path
202
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
203
+ />
204
+ </svg>
145
205
  </span>
146
206
  </span>
147
207
  <span class="pf-v6-c-icon">
148
208
  <span class="pf-v6-c-icon__content pf-m-info">
149
- <i class="fas fa-info-circle" aria-hidden="true"></i>
209
+ <svg
210
+ class="pf-v6-svg"
211
+ viewBox="0 0 32 32"
212
+ fill="currentColor"
213
+ aria-hidden="true"
214
+ role="img"
215
+ width="1em"
216
+ height="1em"
217
+ >
218
+ <path
219
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm1.5 22a1.5 1.5 0 1 1-3 0v-5.157l-.188.04a1.5 1.5 0 0 1-.625-2.934l1.956-.416c.112-.024.223-.032.333-.03l.024-.002a1.5 1.5 0 0 1 1.5 1.5v7Zm-.08-12.58c-.38.37-.89.58-1.42.58a1.998 1.998 0 0 1-1.851-2.76c.051-.13.11-.24.19-.35.07-.11.15-.21.25-.3.74-.75 2.08-.75 2.83 0 .09.09.17.19.24.3.08.11.14.22.189.35.05.12.09.24.11.37.03.13.04.26.04.39 0 .53-.21 1.04-.58 1.42Z"
220
+ />
221
+ </svg>
150
222
  </span>
151
223
  </span>
152
224
  <span class="pf-v6-c-icon">
153
225
  <span class="pf-v6-c-icon__content pf-m-custom">
154
- <i class="fas fa-bell" aria-hidden="true"></i>
226
+ <svg
227
+ class="pf-v6-svg"
228
+ viewBox="0 0 32 32"
229
+ fill="currentColor"
230
+ aria-hidden="true"
231
+ role="img"
232
+ width="1em"
233
+ height="1em"
234
+ >
235
+ <path
236
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
237
+ />
238
+ </svg>
155
239
  </span>
156
240
  </span>
157
241
 
@@ -127,7 +127,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
127
127
  <span class="pf-v6-c-button__icon">
128
128
  <svg
129
129
  class="pf-v6-svg"
130
- viewBox="0 0 352 512"
130
+ viewBox="0 0 20 20"
131
131
  fill="currentColor"
132
132
  aria-hidden="true"
133
133
  role="img"
@@ -135,7 +135,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
135
135
  height="1em"
136
136
  >
137
137
  <path
138
- 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"
138
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
139
139
  />
140
140
  </svg>
141
141
  </span>
@@ -224,7 +224,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
224
224
  <span class="pf-v6-c-button__icon">
225
225
  <svg
226
226
  class="pf-v6-svg"
227
- viewBox="0 0 352 512"
227
+ viewBox="0 0 20 20"
228
228
  fill="currentColor"
229
229
  aria-hidden="true"
230
230
  role="img"
@@ -232,7 +232,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
232
232
  height="1em"
233
233
  >
234
234
  <path
235
- 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"
235
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
236
236
  />
237
237
  </svg>
238
238
  </span>
@@ -325,7 +325,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
325
325
  <span class="pf-v6-c-button__icon">
326
326
  <svg
327
327
  class="pf-v6-svg"
328
- viewBox="0 0 352 512"
328
+ viewBox="0 0 20 20"
329
329
  fill="currentColor"
330
330
  aria-hidden="true"
331
331
  role="img"
@@ -333,7 +333,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
333
333
  height="1em"
334
334
  >
335
335
  <path
336
- 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"
336
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
337
337
  />
338
338
  </svg>
339
339
  </span>
@@ -440,7 +440,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
440
440
  <span class="pf-v6-c-button__icon">
441
441
  <svg
442
442
  class="pf-v6-svg"
443
- viewBox="0 0 352 512"
443
+ viewBox="0 0 20 20"
444
444
  fill="currentColor"
445
445
  aria-hidden="true"
446
446
  role="img"
@@ -448,7 +448,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
448
448
  height="1em"
449
449
  >
450
450
  <path
451
- 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"
451
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
452
452
  />
453
453
  </svg>
454
454
  </span>
@@ -543,7 +543,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
543
543
  <span class="pf-v6-c-button__icon">
544
544
  <svg
545
545
  class="pf-v6-svg"
546
- viewBox="0 0 352 512"
546
+ viewBox="0 0 20 20"
547
547
  fill="currentColor"
548
548
  aria-hidden="true"
549
549
  role="img"
@@ -551,7 +551,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
551
551
  height="1em"
552
552
  >
553
553
  <path
554
- 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"
554
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
555
555
  />
556
556
  </svg>
557
557
  </span>
@@ -653,7 +653,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
653
653
  <span class="pf-v6-c-button__icon">
654
654
  <svg
655
655
  class="pf-v6-svg"
656
- viewBox="0 0 352 512"
656
+ viewBox="0 0 20 20"
657
657
  fill="currentColor"
658
658
  aria-hidden="true"
659
659
  role="img"
@@ -661,7 +661,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
661
661
  height="1em"
662
662
  >
663
663
  <path
664
- 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"
664
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
665
665
  />
666
666
  </svg>
667
667
  </span>
@@ -885,7 +885,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
885
885
  <span class="pf-v6-c-button__icon">
886
886
  <svg
887
887
  class="pf-v6-svg"
888
- viewBox="0 0 352 512"
888
+ viewBox="0 0 20 20"
889
889
  fill="currentColor"
890
890
  aria-hidden="true"
891
891
  role="img"
@@ -893,7 +893,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
893
893
  height="1em"
894
894
  >
895
895
  <path
896
- 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"
896
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
897
897
  />
898
898
  </svg>
899
899
  </span>
@@ -1110,7 +1110,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
1110
1110
  <span class="pf-v6-c-button__icon">
1111
1111
  <svg
1112
1112
  class="pf-v6-svg"
1113
- viewBox="0 0 352 512"
1113
+ viewBox="0 0 20 20"
1114
1114
  fill="currentColor"
1115
1115
  aria-hidden="true"
1116
1116
  role="img"
@@ -1118,7 +1118,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
1118
1118
  height="1em"
1119
1119
  >
1120
1120
  <path
1121
- 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"
1121
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1122
1122
  />
1123
1123
  </svg>
1124
1124
  </span>
@@ -525,7 +525,19 @@ cssPrefix: pf-v6-c-jump-links
525
525
  >
526
526
  <span class="pf-v6-c-button__icon pf-m-start">
527
527
  <span class="pf-v6-c-jump-links__toggle-icon">
528
- <i class="fas fa-angle-right" aria-hidden="true"></i>
528
+ <svg
529
+ class="pf-v6-svg"
530
+ viewBox="0 0 20 20"
531
+ fill="currentColor"
532
+ aria-hidden="true"
533
+ role="img"
534
+ width="1em"
535
+ height="1em"
536
+ >
537
+ <path
538
+ 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"
539
+ />
540
+ </svg>
529
541
  </span>
530
542
  </span>
531
543
  <span class="pf-v6-c-button__text">Jump to expandable example sections</span>
@@ -604,7 +616,19 @@ cssPrefix: pf-v6-c-jump-links
604
616
  >
605
617
  <span class="pf-v6-c-button__icon pf-m-start">
606
618
  <span class="pf-v6-c-jump-links__toggle-icon">
607
- <i class="fas fa-angle-right" aria-hidden="true"></i>
619
+ <svg
620
+ class="pf-v6-svg"
621
+ viewBox="0 0 20 20"
622
+ fill="currentColor"
623
+ aria-hidden="true"
624
+ role="img"
625
+ width="1em"
626
+ height="1em"
627
+ >
628
+ <path
629
+ 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"
630
+ />
631
+ </svg>
608
632
  </span>
609
633
  </span>
610
634
  <span class="pf-v6-c-button__text">Jump to expanded example sections</span>
@@ -683,7 +707,19 @@ cssPrefix: pf-v6-c-jump-links
683
707
  >
684
708
  <span class="pf-v6-c-button__icon pf-m-start">
685
709
  <span class="pf-v6-c-jump-links__toggle-icon">
686
- <i class="fas fa-angle-right" aria-hidden="true"></i>
710
+ <svg
711
+ class="pf-v6-svg"
712
+ viewBox="0 0 20 20"
713
+ fill="currentColor"
714
+ aria-hidden="true"
715
+ role="img"
716
+ width="1em"
717
+ height="1em"
718
+ >
719
+ <path
720
+ 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"
721
+ />
722
+ </svg>
687
723
  </span>
688
724
  </span>
689
725
  <span
@@ -766,7 +802,19 @@ cssPrefix: pf-v6-c-jump-links
766
802
  >
767
803
  <span class="pf-v6-c-button__icon pf-m-start">
768
804
  <span class="pf-v6-c-jump-links__toggle-icon">
769
- <i class="fas fa-angle-right" aria-hidden="true"></i>
805
+ <svg
806
+ class="pf-v6-svg"
807
+ viewBox="0 0 20 20"
808
+ fill="currentColor"
809
+ aria-hidden="true"
810
+ role="img"
811
+ width="1em"
812
+ height="1em"
813
+ >
814
+ <path
815
+ 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"
816
+ />
817
+ </svg>
770
818
  </span>
771
819
  </span>
772
820
  <span class="pf-v6-c-button__text">Jump to section</span>