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

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 (48) hide show
  1. package/components/Button/button.css +1 -1
  2. package/components/Button/button.scss +1 -1
  3. package/components/NotificationDrawer/notification-drawer.css +10 -2
  4. package/components/NotificationDrawer/notification-drawer.scss +11 -4
  5. package/components/_index.css +11 -3
  6. package/docs/components/AboutModalBox/examples/AboutModalBox.md +2 -2
  7. package/docs/components/ActionList/examples/ActionList.md +10 -10
  8. package/docs/components/Alert/examples/Alert.md +30 -30
  9. package/docs/components/Banner/examples/Banner.md +65 -5
  10. package/docs/components/Drawer/examples/Drawer.md +42 -42
  11. package/docs/components/DualListSelector/examples/DualListSelector.md +792 -72
  12. package/docs/components/Icon/examples/Icon.md +65 -5
  13. package/docs/components/InlineEdit/examples/InlineEdit.md +16 -16
  14. package/docs/components/Label/examples/Label.md +2812 -220
  15. package/docs/components/MenuToggle/examples/MenuToggle.md +13 -1
  16. package/docs/components/ModalBox/examples/ModalBox.md +121 -37
  17. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +18 -18
  18. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +524 -44
  19. package/docs/components/Popover/examples/Popover.md +110 -38
  20. package/docs/components/ProgressStepper/examples/ProgressStepper.md +273 -21
  21. package/docs/components/Slider/examples/Slider.md +52 -4
  22. package/docs/components/Tabs/examples/Tabs.md +1638 -126
  23. package/docs/components/TextInputGroup/examples/TextInputGroup.md +509 -41
  24. package/docs/components/Toolbar/examples/Toolbar.md +48 -48
  25. package/docs/components/Wizard/examples/Wizard.md +26 -26
  26. package/docs/demos/AboutModal/examples/AboutModal.md +2 -2
  27. package/docs/demos/Alert/examples/Alert.md +6 -6
  28. package/docs/demos/Card/examples/Card.md +80 -8
  29. package/docs/demos/Compass/examples/Compass.md +2 -2
  30. package/docs/demos/Dashboard/examples/Dashboard.md +24 -6
  31. package/docs/demos/DescriptionList/examples/DescriptionList.md +2 -2
  32. package/docs/demos/Drawer/examples/Drawer.md +6 -6
  33. package/docs/demos/Form/examples/BasicForms.md +26 -2
  34. package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -4
  35. package/docs/demos/Masthead/examples/Masthead.md +15 -3
  36. package/docs/demos/Modal/examples/Modal.md +12 -12
  37. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +816 -96
  38. package/docs/demos/Page/examples/Page.md +2 -2
  39. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +90 -18
  40. package/docs/demos/Table/examples/Table.md +232 -19
  41. package/docs/demos/Tabs/examples/Tabs.md +23 -5
  42. package/docs/demos/Toolbar/examples/Toolbar.md +24 -24
  43. package/docs/demos/Wizard/examples/Wizard.md +20 -20
  44. package/package.json +1 -1
  45. package/patternfly-no-globals.css +11 -3
  46. package/patternfly.css +11 -3
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
@@ -32,7 +32,7 @@ cssPrefix: pf-v6-c-notification-drawer
32
32
  <span class="pf-v6-c-button__icon">
33
33
  <svg
34
34
  class="pf-v6-svg"
35
- viewBox="0 0 352 512"
35
+ viewBox="0 0 20 20"
36
36
  fill="currentColor"
37
37
  aria-hidden="true"
38
38
  role="img"
@@ -40,7 +40,7 @@ cssPrefix: pf-v6-c-notification-drawer
40
40
  height="1em"
41
41
  >
42
42
  <path
43
- 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"
43
+ 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"
44
44
  />
45
45
  </svg>
46
46
  </span>
@@ -56,7 +56,19 @@ cssPrefix: pf-v6-c-notification-drawer
56
56
  >
57
57
  <div class="pf-v6-c-notification-drawer__list-item-header">
58
58
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
59
- <i class="fas fa-info-circle" aria-hidden="true"></i>
59
+ <svg
60
+ class="pf-v6-svg"
61
+ viewBox="0 0 32 32"
62
+ fill="currentColor"
63
+ aria-hidden="true"
64
+ role="img"
65
+ width="1em"
66
+ height="1em"
67
+ >
68
+ <path
69
+ 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"
70
+ />
71
+ </svg>
60
72
  </span>
61
73
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
62
74
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -91,7 +103,19 @@ cssPrefix: pf-v6-c-notification-drawer
91
103
  >
92
104
  <div class="pf-v6-c-notification-drawer__list-item-header">
93
105
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
94
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
106
+ <svg
107
+ class="pf-v6-svg"
108
+ viewBox="0 0 32 32"
109
+ fill="currentColor"
110
+ aria-hidden="true"
111
+ role="img"
112
+ width="1em"
113
+ height="1em"
114
+ >
115
+ <path
116
+ 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"
117
+ />
118
+ </svg>
95
119
  </span>
96
120
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
97
121
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -126,7 +150,19 @@ cssPrefix: pf-v6-c-notification-drawer
126
150
  >
127
151
  <div class="pf-v6-c-notification-drawer__list-item-header">
128
152
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
129
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
153
+ <svg
154
+ class="pf-v6-svg"
155
+ viewBox="0 0 32 32"
156
+ fill="currentColor"
157
+ aria-hidden="true"
158
+ role="img"
159
+ width="1em"
160
+ height="1em"
161
+ >
162
+ <path
163
+ 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"
164
+ />
165
+ </svg>
130
166
  </span>
131
167
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
132
168
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -159,7 +195,19 @@ cssPrefix: pf-v6-c-notification-drawer
159
195
  >
160
196
  <div class="pf-v6-c-notification-drawer__list-item-header">
161
197
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
162
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
198
+ <svg
199
+ class="pf-v6-svg"
200
+ viewBox="0 0 32 32"
201
+ fill="currentColor"
202
+ aria-hidden="true"
203
+ role="img"
204
+ width="1em"
205
+ height="1em"
206
+ >
207
+ <path
208
+ 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"
209
+ />
210
+ </svg>
163
211
  </span>
164
212
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
165
213
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -191,7 +239,19 @@ cssPrefix: pf-v6-c-notification-drawer
191
239
  >
192
240
  <div class="pf-v6-c-notification-drawer__list-item-header">
193
241
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
194
- <i class="fas fa-check-circle" aria-hidden="true"></i>
242
+ <svg
243
+ class="pf-v6-svg"
244
+ viewBox="0 0 32 32"
245
+ fill="currentColor"
246
+ aria-hidden="true"
247
+ role="img"
248
+ width="1em"
249
+ height="1em"
250
+ >
251
+ <path
252
+ 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"
253
+ />
254
+ </svg>
195
255
  </span>
196
256
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
197
257
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -223,7 +283,19 @@ cssPrefix: pf-v6-c-notification-drawer
223
283
  >
224
284
  <div class="pf-v6-c-notification-drawer__list-item-header">
225
285
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
226
- <i class="fas fa-check-circle" aria-hidden="true"></i>
286
+ <svg
287
+ class="pf-v6-svg"
288
+ viewBox="0 0 32 32"
289
+ fill="currentColor"
290
+ aria-hidden="true"
291
+ role="img"
292
+ width="1em"
293
+ height="1em"
294
+ >
295
+ <path
296
+ 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"
297
+ />
298
+ </svg>
227
299
  </span>
228
300
  <h2
229
301
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -257,7 +329,19 @@ cssPrefix: pf-v6-c-notification-drawer
257
329
  >
258
330
  <div class="pf-v6-c-notification-drawer__list-item-header">
259
331
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
260
- <i class="fas fa-check-circle" aria-hidden="true"></i>
332
+ <svg
333
+ class="pf-v6-svg"
334
+ viewBox="0 0 32 32"
335
+ fill="currentColor"
336
+ aria-hidden="true"
337
+ role="img"
338
+ width="1em"
339
+ height="1em"
340
+ >
341
+ <path
342
+ 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"
343
+ />
344
+ </svg>
261
345
  </span>
262
346
  <h2
263
347
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -290,7 +374,19 @@ cssPrefix: pf-v6-c-notification-drawer
290
374
  <li class="pf-v6-c-notification-drawer__list-item pf-m-read pf-m-success">
291
375
  <div class="pf-v6-c-notification-drawer__list-item-header">
292
376
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
293
- <i class="fas fa-check-circle" aria-hidden="true"></i>
377
+ <svg
378
+ class="pf-v6-svg"
379
+ viewBox="0 0 32 32"
380
+ fill="currentColor"
381
+ aria-hidden="true"
382
+ role="img"
383
+ width="1em"
384
+ height="1em"
385
+ >
386
+ <path
387
+ 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"
388
+ />
389
+ </svg>
294
390
  </span>
295
391
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
296
392
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -345,7 +441,7 @@ cssPrefix: pf-v6-c-notification-drawer
345
441
  <span class="pf-v6-c-button__icon">
346
442
  <svg
347
443
  class="pf-v6-svg"
348
- viewBox="0 0 352 512"
444
+ viewBox="0 0 20 20"
349
445
  fill="currentColor"
350
446
  aria-hidden="true"
351
447
  role="img"
@@ -353,7 +449,7 @@ cssPrefix: pf-v6-c-notification-drawer
353
449
  height="1em"
354
450
  >
355
451
  <path
356
- 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"
452
+ 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"
357
453
  />
358
454
  </svg>
359
455
  </span>
@@ -387,7 +483,19 @@ cssPrefix: pf-v6-c-notification-drawer
387
483
  >
388
484
  <div class="pf-v6-c-notification-drawer__list-item-header">
389
485
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
390
- <i class="fas fa-info-circle" aria-hidden="true"></i>
486
+ <svg
487
+ class="pf-v6-svg"
488
+ viewBox="0 0 32 32"
489
+ fill="currentColor"
490
+ aria-hidden="true"
491
+ role="img"
492
+ width="1em"
493
+ height="1em"
494
+ >
495
+ <path
496
+ 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"
497
+ />
498
+ </svg>
391
499
  </span>
392
500
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
393
501
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -422,7 +530,19 @@ cssPrefix: pf-v6-c-notification-drawer
422
530
  >
423
531
  <div class="pf-v6-c-notification-drawer__list-item-header">
424
532
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
425
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
533
+ <svg
534
+ class="pf-v6-svg"
535
+ viewBox="0 0 32 32"
536
+ fill="currentColor"
537
+ aria-hidden="true"
538
+ role="img"
539
+ width="1em"
540
+ height="1em"
541
+ >
542
+ <path
543
+ 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"
544
+ />
545
+ </svg>
426
546
  </span>
427
547
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
428
548
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -457,7 +577,19 @@ cssPrefix: pf-v6-c-notification-drawer
457
577
  >
458
578
  <div class="pf-v6-c-notification-drawer__list-item-header">
459
579
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
460
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
580
+ <svg
581
+ class="pf-v6-svg"
582
+ viewBox="0 0 32 32"
583
+ fill="currentColor"
584
+ aria-hidden="true"
585
+ role="img"
586
+ width="1em"
587
+ height="1em"
588
+ >
589
+ <path
590
+ 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"
591
+ />
592
+ </svg>
461
593
  </span>
462
594
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
463
595
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -490,7 +622,19 @@ cssPrefix: pf-v6-c-notification-drawer
490
622
  >
491
623
  <div class="pf-v6-c-notification-drawer__list-item-header">
492
624
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
493
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
625
+ <svg
626
+ class="pf-v6-svg"
627
+ viewBox="0 0 32 32"
628
+ fill="currentColor"
629
+ aria-hidden="true"
630
+ role="img"
631
+ width="1em"
632
+ height="1em"
633
+ >
634
+ <path
635
+ 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"
636
+ />
637
+ </svg>
494
638
  </span>
495
639
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
496
640
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -522,7 +666,19 @@ cssPrefix: pf-v6-c-notification-drawer
522
666
  >
523
667
  <div class="pf-v6-c-notification-drawer__list-item-header">
524
668
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
525
- <i class="fas fa-check-circle" aria-hidden="true"></i>
669
+ <svg
670
+ class="pf-v6-svg"
671
+ viewBox="0 0 32 32"
672
+ fill="currentColor"
673
+ aria-hidden="true"
674
+ role="img"
675
+ width="1em"
676
+ height="1em"
677
+ >
678
+ <path
679
+ 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"
680
+ />
681
+ </svg>
526
682
  </span>
527
683
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
528
684
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -554,7 +710,19 @@ cssPrefix: pf-v6-c-notification-drawer
554
710
  >
555
711
  <div class="pf-v6-c-notification-drawer__list-item-header">
556
712
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
557
- <i class="fas fa-check-circle" aria-hidden="true"></i>
713
+ <svg
714
+ class="pf-v6-svg"
715
+ viewBox="0 0 32 32"
716
+ fill="currentColor"
717
+ aria-hidden="true"
718
+ role="img"
719
+ width="1em"
720
+ height="1em"
721
+ >
722
+ <path
723
+ 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"
724
+ />
725
+ </svg>
558
726
  </span>
559
727
  <h2
560
728
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -588,7 +756,19 @@ cssPrefix: pf-v6-c-notification-drawer
588
756
  >
589
757
  <div class="pf-v6-c-notification-drawer__list-item-header">
590
758
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
591
- <i class="fas fa-check-circle" aria-hidden="true"></i>
759
+ <svg
760
+ class="pf-v6-svg"
761
+ viewBox="0 0 32 32"
762
+ fill="currentColor"
763
+ aria-hidden="true"
764
+ role="img"
765
+ width="1em"
766
+ height="1em"
767
+ >
768
+ <path
769
+ 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"
770
+ />
771
+ </svg>
592
772
  </span>
593
773
  <h2
594
774
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -623,7 +803,19 @@ cssPrefix: pf-v6-c-notification-drawer
623
803
  >
624
804
  <div class="pf-v6-c-notification-drawer__list-item-header">
625
805
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
626
- <i class="fas fa-check-circle" aria-hidden="true"></i>
806
+ <svg
807
+ class="pf-v6-svg"
808
+ viewBox="0 0 32 32"
809
+ fill="currentColor"
810
+ aria-hidden="true"
811
+ role="img"
812
+ width="1em"
813
+ height="1em"
814
+ >
815
+ <path
816
+ 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"
817
+ />
818
+ </svg>
627
819
  </span>
628
820
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
629
821
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -670,7 +862,19 @@ cssPrefix: pf-v6-c-notification-drawer
670
862
  >
671
863
  <div class="pf-v6-c-notification-drawer__list-item-header">
672
864
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
673
- <i class="fas fa-info-circle" aria-hidden="true"></i>
865
+ <svg
866
+ class="pf-v6-svg"
867
+ viewBox="0 0 32 32"
868
+ fill="currentColor"
869
+ aria-hidden="true"
870
+ role="img"
871
+ width="1em"
872
+ height="1em"
873
+ >
874
+ <path
875
+ 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"
876
+ />
877
+ </svg>
674
878
  </span>
675
879
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
676
880
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -705,7 +909,19 @@ cssPrefix: pf-v6-c-notification-drawer
705
909
  >
706
910
  <div class="pf-v6-c-notification-drawer__list-item-header">
707
911
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
708
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
912
+ <svg
913
+ class="pf-v6-svg"
914
+ viewBox="0 0 32 32"
915
+ fill="currentColor"
916
+ aria-hidden="true"
917
+ role="img"
918
+ width="1em"
919
+ height="1em"
920
+ >
921
+ <path
922
+ 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"
923
+ />
924
+ </svg>
709
925
  </span>
710
926
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
711
927
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -740,7 +956,19 @@ cssPrefix: pf-v6-c-notification-drawer
740
956
  >
741
957
  <div class="pf-v6-c-notification-drawer__list-item-header">
742
958
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
743
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
959
+ <svg
960
+ class="pf-v6-svg"
961
+ viewBox="0 0 32 32"
962
+ fill="currentColor"
963
+ aria-hidden="true"
964
+ role="img"
965
+ width="1em"
966
+ height="1em"
967
+ >
968
+ <path
969
+ 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"
970
+ />
971
+ </svg>
744
972
  </span>
745
973
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
746
974
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -773,7 +1001,19 @@ cssPrefix: pf-v6-c-notification-drawer
773
1001
  >
774
1002
  <div class="pf-v6-c-notification-drawer__list-item-header">
775
1003
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
776
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1004
+ <svg
1005
+ class="pf-v6-svg"
1006
+ viewBox="0 0 32 32"
1007
+ fill="currentColor"
1008
+ aria-hidden="true"
1009
+ role="img"
1010
+ width="1em"
1011
+ height="1em"
1012
+ >
1013
+ <path
1014
+ 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"
1015
+ />
1016
+ </svg>
777
1017
  </span>
778
1018
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
779
1019
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -805,7 +1045,19 @@ cssPrefix: pf-v6-c-notification-drawer
805
1045
  >
806
1046
  <div class="pf-v6-c-notification-drawer__list-item-header">
807
1047
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
808
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1048
+ <svg
1049
+ class="pf-v6-svg"
1050
+ viewBox="0 0 32 32"
1051
+ fill="currentColor"
1052
+ aria-hidden="true"
1053
+ role="img"
1054
+ width="1em"
1055
+ height="1em"
1056
+ >
1057
+ <path
1058
+ 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"
1059
+ />
1060
+ </svg>
809
1061
  </span>
810
1062
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
811
1063
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -837,7 +1089,19 @@ cssPrefix: pf-v6-c-notification-drawer
837
1089
  >
838
1090
  <div class="pf-v6-c-notification-drawer__list-item-header">
839
1091
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
840
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1092
+ <svg
1093
+ class="pf-v6-svg"
1094
+ viewBox="0 0 32 32"
1095
+ fill="currentColor"
1096
+ aria-hidden="true"
1097
+ role="img"
1098
+ width="1em"
1099
+ height="1em"
1100
+ >
1101
+ <path
1102
+ 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"
1103
+ />
1104
+ </svg>
841
1105
  </span>
842
1106
  <h2
843
1107
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -871,7 +1135,19 @@ cssPrefix: pf-v6-c-notification-drawer
871
1135
  >
872
1136
  <div class="pf-v6-c-notification-drawer__list-item-header">
873
1137
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
874
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1138
+ <svg
1139
+ class="pf-v6-svg"
1140
+ viewBox="0 0 32 32"
1141
+ fill="currentColor"
1142
+ aria-hidden="true"
1143
+ role="img"
1144
+ width="1em"
1145
+ height="1em"
1146
+ >
1147
+ <path
1148
+ 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"
1149
+ />
1150
+ </svg>
875
1151
  </span>
876
1152
  <h2
877
1153
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -906,7 +1182,19 @@ cssPrefix: pf-v6-c-notification-drawer
906
1182
  >
907
1183
  <div class="pf-v6-c-notification-drawer__list-item-header">
908
1184
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
909
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1185
+ <svg
1186
+ class="pf-v6-svg"
1187
+ viewBox="0 0 32 32"
1188
+ fill="currentColor"
1189
+ aria-hidden="true"
1190
+ role="img"
1191
+ width="1em"
1192
+ height="1em"
1193
+ >
1194
+ <path
1195
+ 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"
1196
+ />
1197
+ </svg>
910
1198
  </span>
911
1199
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
912
1200
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -953,7 +1241,19 @@ cssPrefix: pf-v6-c-notification-drawer
953
1241
  >
954
1242
  <div class="pf-v6-c-notification-drawer__list-item-header">
955
1243
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
956
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1244
+ <svg
1245
+ class="pf-v6-svg"
1246
+ viewBox="0 0 32 32"
1247
+ fill="currentColor"
1248
+ aria-hidden="true"
1249
+ role="img"
1250
+ width="1em"
1251
+ height="1em"
1252
+ >
1253
+ <path
1254
+ 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"
1255
+ />
1256
+ </svg>
957
1257
  </span>
958
1258
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
959
1259
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -988,7 +1288,19 @@ cssPrefix: pf-v6-c-notification-drawer
988
1288
  >
989
1289
  <div class="pf-v6-c-notification-drawer__list-item-header">
990
1290
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
991
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1291
+ <svg
1292
+ class="pf-v6-svg"
1293
+ viewBox="0 0 32 32"
1294
+ fill="currentColor"
1295
+ aria-hidden="true"
1296
+ role="img"
1297
+ width="1em"
1298
+ height="1em"
1299
+ >
1300
+ <path
1301
+ 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"
1302
+ />
1303
+ </svg>
992
1304
  </span>
993
1305
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
994
1306
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1023,7 +1335,19 @@ cssPrefix: pf-v6-c-notification-drawer
1023
1335
  >
1024
1336
  <div class="pf-v6-c-notification-drawer__list-item-header">
1025
1337
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1026
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1338
+ <svg
1339
+ class="pf-v6-svg"
1340
+ viewBox="0 0 32 32"
1341
+ fill="currentColor"
1342
+ aria-hidden="true"
1343
+ role="img"
1344
+ width="1em"
1345
+ height="1em"
1346
+ >
1347
+ <path
1348
+ 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"
1349
+ />
1350
+ </svg>
1027
1351
  </span>
1028
1352
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1029
1353
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1056,7 +1380,19 @@ cssPrefix: pf-v6-c-notification-drawer
1056
1380
  >
1057
1381
  <div class="pf-v6-c-notification-drawer__list-item-header">
1058
1382
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1059
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1383
+ <svg
1384
+ class="pf-v6-svg"
1385
+ viewBox="0 0 32 32"
1386
+ fill="currentColor"
1387
+ aria-hidden="true"
1388
+ role="img"
1389
+ width="1em"
1390
+ height="1em"
1391
+ >
1392
+ <path
1393
+ 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"
1394
+ />
1395
+ </svg>
1060
1396
  </span>
1061
1397
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1062
1398
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1088,7 +1424,19 @@ cssPrefix: pf-v6-c-notification-drawer
1088
1424
  >
1089
1425
  <div class="pf-v6-c-notification-drawer__list-item-header">
1090
1426
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1091
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1427
+ <svg
1428
+ class="pf-v6-svg"
1429
+ viewBox="0 0 32 32"
1430
+ fill="currentColor"
1431
+ aria-hidden="true"
1432
+ role="img"
1433
+ width="1em"
1434
+ height="1em"
1435
+ >
1436
+ <path
1437
+ 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"
1438
+ />
1439
+ </svg>
1092
1440
  </span>
1093
1441
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1094
1442
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1120,7 +1468,19 @@ cssPrefix: pf-v6-c-notification-drawer
1120
1468
  >
1121
1469
  <div class="pf-v6-c-notification-drawer__list-item-header">
1122
1470
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1123
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1471
+ <svg
1472
+ class="pf-v6-svg"
1473
+ viewBox="0 0 32 32"
1474
+ fill="currentColor"
1475
+ aria-hidden="true"
1476
+ role="img"
1477
+ width="1em"
1478
+ height="1em"
1479
+ >
1480
+ <path
1481
+ 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"
1482
+ />
1483
+ </svg>
1124
1484
  </span>
1125
1485
  <h2
1126
1486
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1154,7 +1514,19 @@ cssPrefix: pf-v6-c-notification-drawer
1154
1514
  >
1155
1515
  <div class="pf-v6-c-notification-drawer__list-item-header">
1156
1516
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1157
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1517
+ <svg
1518
+ class="pf-v6-svg"
1519
+ viewBox="0 0 32 32"
1520
+ fill="currentColor"
1521
+ aria-hidden="true"
1522
+ role="img"
1523
+ width="1em"
1524
+ height="1em"
1525
+ >
1526
+ <path
1527
+ 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"
1528
+ />
1529
+ </svg>
1158
1530
  </span>
1159
1531
  <h2
1160
1532
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1189,7 +1561,19 @@ cssPrefix: pf-v6-c-notification-drawer
1189
1561
  >
1190
1562
  <div class="pf-v6-c-notification-drawer__list-item-header">
1191
1563
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1192
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1564
+ <svg
1565
+ class="pf-v6-svg"
1566
+ viewBox="0 0 32 32"
1567
+ fill="currentColor"
1568
+ aria-hidden="true"
1569
+ role="img"
1570
+ width="1em"
1571
+ height="1em"
1572
+ >
1573
+ <path
1574
+ 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"
1575
+ />
1576
+ </svg>
1193
1577
  </span>
1194
1578
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1195
1579
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1236,7 +1620,19 @@ cssPrefix: pf-v6-c-notification-drawer
1236
1620
  >
1237
1621
  <div class="pf-v6-c-notification-drawer__list-item-header">
1238
1622
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1239
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1623
+ <svg
1624
+ class="pf-v6-svg"
1625
+ viewBox="0 0 32 32"
1626
+ fill="currentColor"
1627
+ aria-hidden="true"
1628
+ role="img"
1629
+ width="1em"
1630
+ height="1em"
1631
+ >
1632
+ <path
1633
+ 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"
1634
+ />
1635
+ </svg>
1240
1636
  </span>
1241
1637
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1242
1638
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -1271,7 +1667,19 @@ cssPrefix: pf-v6-c-notification-drawer
1271
1667
  >
1272
1668
  <div class="pf-v6-c-notification-drawer__list-item-header">
1273
1669
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1274
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1670
+ <svg
1671
+ class="pf-v6-svg"
1672
+ viewBox="0 0 32 32"
1673
+ fill="currentColor"
1674
+ aria-hidden="true"
1675
+ role="img"
1676
+ width="1em"
1677
+ height="1em"
1678
+ >
1679
+ <path
1680
+ 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"
1681
+ />
1682
+ </svg>
1275
1683
  </span>
1276
1684
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1277
1685
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1306,7 +1714,19 @@ cssPrefix: pf-v6-c-notification-drawer
1306
1714
  >
1307
1715
  <div class="pf-v6-c-notification-drawer__list-item-header">
1308
1716
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1309
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1717
+ <svg
1718
+ class="pf-v6-svg"
1719
+ viewBox="0 0 32 32"
1720
+ fill="currentColor"
1721
+ aria-hidden="true"
1722
+ role="img"
1723
+ width="1em"
1724
+ height="1em"
1725
+ >
1726
+ <path
1727
+ 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"
1728
+ />
1729
+ </svg>
1310
1730
  </span>
1311
1731
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1312
1732
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1339,7 +1759,19 @@ cssPrefix: pf-v6-c-notification-drawer
1339
1759
  >
1340
1760
  <div class="pf-v6-c-notification-drawer__list-item-header">
1341
1761
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1342
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1762
+ <svg
1763
+ class="pf-v6-svg"
1764
+ viewBox="0 0 32 32"
1765
+ fill="currentColor"
1766
+ aria-hidden="true"
1767
+ role="img"
1768
+ width="1em"
1769
+ height="1em"
1770
+ >
1771
+ <path
1772
+ 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"
1773
+ />
1774
+ </svg>
1343
1775
  </span>
1344
1776
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1345
1777
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1371,7 +1803,19 @@ cssPrefix: pf-v6-c-notification-drawer
1371
1803
  >
1372
1804
  <div class="pf-v6-c-notification-drawer__list-item-header">
1373
1805
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1374
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1806
+ <svg
1807
+ class="pf-v6-svg"
1808
+ viewBox="0 0 32 32"
1809
+ fill="currentColor"
1810
+ aria-hidden="true"
1811
+ role="img"
1812
+ width="1em"
1813
+ height="1em"
1814
+ >
1815
+ <path
1816
+ 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"
1817
+ />
1818
+ </svg>
1375
1819
  </span>
1376
1820
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1377
1821
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1403,7 +1847,19 @@ cssPrefix: pf-v6-c-notification-drawer
1403
1847
  >
1404
1848
  <div class="pf-v6-c-notification-drawer__list-item-header">
1405
1849
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1406
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1850
+ <svg
1851
+ class="pf-v6-svg"
1852
+ viewBox="0 0 32 32"
1853
+ fill="currentColor"
1854
+ aria-hidden="true"
1855
+ role="img"
1856
+ width="1em"
1857
+ height="1em"
1858
+ >
1859
+ <path
1860
+ 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"
1861
+ />
1862
+ </svg>
1407
1863
  </span>
1408
1864
  <h2
1409
1865
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1437,7 +1893,19 @@ cssPrefix: pf-v6-c-notification-drawer
1437
1893
  >
1438
1894
  <div class="pf-v6-c-notification-drawer__list-item-header">
1439
1895
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1440
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1896
+ <svg
1897
+ class="pf-v6-svg"
1898
+ viewBox="0 0 32 32"
1899
+ fill="currentColor"
1900
+ aria-hidden="true"
1901
+ role="img"
1902
+ width="1em"
1903
+ height="1em"
1904
+ >
1905
+ <path
1906
+ 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"
1907
+ />
1908
+ </svg>
1441
1909
  </span>
1442
1910
  <h2
1443
1911
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1472,7 +1940,19 @@ cssPrefix: pf-v6-c-notification-drawer
1472
1940
  >
1473
1941
  <div class="pf-v6-c-notification-drawer__list-item-header">
1474
1942
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1475
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1943
+ <svg
1944
+ class="pf-v6-svg"
1945
+ viewBox="0 0 32 32"
1946
+ fill="currentColor"
1947
+ aria-hidden="true"
1948
+ role="img"
1949
+ width="1em"
1950
+ height="1em"
1951
+ >
1952
+ <path
1953
+ 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"
1954
+ />
1955
+ </svg>
1476
1956
  </span>
1477
1957
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1478
1958
  <span class="pf-v6-screen-reader">Success notification:</span>