@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
@@ -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>
@@ -376,7 +472,19 @@ cssPrefix: pf-v6-c-notification-drawer
376
472
  <span class="pf-v6-c-badge pf-m-unread">2</span>
377
473
  </div>
378
474
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
379
- <i class="fas fa-angle-right" aria-hidden="true"></i>
475
+ <svg
476
+ class="pf-v6-svg"
477
+ viewBox="0 0 20 20"
478
+ fill="currentColor"
479
+ aria-hidden="true"
480
+ role="img"
481
+ width="1em"
482
+ height="1em"
483
+ >
484
+ <path
485
+ 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"
486
+ />
487
+ </svg>
380
488
  </span>
381
489
  </button>
382
490
  </h1>
@@ -387,7 +495,19 @@ cssPrefix: pf-v6-c-notification-drawer
387
495
  >
388
496
  <div class="pf-v6-c-notification-drawer__list-item-header">
389
497
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
390
- <i class="fas fa-info-circle" aria-hidden="true"></i>
498
+ <svg
499
+ class="pf-v6-svg"
500
+ viewBox="0 0 32 32"
501
+ fill="currentColor"
502
+ aria-hidden="true"
503
+ role="img"
504
+ width="1em"
505
+ height="1em"
506
+ >
507
+ <path
508
+ 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"
509
+ />
510
+ </svg>
391
511
  </span>
392
512
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
393
513
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -422,7 +542,19 @@ cssPrefix: pf-v6-c-notification-drawer
422
542
  >
423
543
  <div class="pf-v6-c-notification-drawer__list-item-header">
424
544
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
425
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
545
+ <svg
546
+ class="pf-v6-svg"
547
+ viewBox="0 0 32 32"
548
+ fill="currentColor"
549
+ aria-hidden="true"
550
+ role="img"
551
+ width="1em"
552
+ height="1em"
553
+ >
554
+ <path
555
+ 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"
556
+ />
557
+ </svg>
426
558
  </span>
427
559
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
428
560
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -457,7 +589,19 @@ cssPrefix: pf-v6-c-notification-drawer
457
589
  >
458
590
  <div class="pf-v6-c-notification-drawer__list-item-header">
459
591
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
460
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
592
+ <svg
593
+ class="pf-v6-svg"
594
+ viewBox="0 0 32 32"
595
+ fill="currentColor"
596
+ aria-hidden="true"
597
+ role="img"
598
+ width="1em"
599
+ height="1em"
600
+ >
601
+ <path
602
+ 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"
603
+ />
604
+ </svg>
461
605
  </span>
462
606
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
463
607
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -490,7 +634,19 @@ cssPrefix: pf-v6-c-notification-drawer
490
634
  >
491
635
  <div class="pf-v6-c-notification-drawer__list-item-header">
492
636
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
493
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
637
+ <svg
638
+ class="pf-v6-svg"
639
+ viewBox="0 0 32 32"
640
+ fill="currentColor"
641
+ aria-hidden="true"
642
+ role="img"
643
+ width="1em"
644
+ height="1em"
645
+ >
646
+ <path
647
+ 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"
648
+ />
649
+ </svg>
494
650
  </span>
495
651
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
496
652
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -522,7 +678,19 @@ cssPrefix: pf-v6-c-notification-drawer
522
678
  >
523
679
  <div class="pf-v6-c-notification-drawer__list-item-header">
524
680
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
525
- <i class="fas fa-check-circle" aria-hidden="true"></i>
681
+ <svg
682
+ class="pf-v6-svg"
683
+ viewBox="0 0 32 32"
684
+ fill="currentColor"
685
+ aria-hidden="true"
686
+ role="img"
687
+ width="1em"
688
+ height="1em"
689
+ >
690
+ <path
691
+ 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"
692
+ />
693
+ </svg>
526
694
  </span>
527
695
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
528
696
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -554,7 +722,19 @@ cssPrefix: pf-v6-c-notification-drawer
554
722
  >
555
723
  <div class="pf-v6-c-notification-drawer__list-item-header">
556
724
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
557
- <i class="fas fa-check-circle" aria-hidden="true"></i>
725
+ <svg
726
+ class="pf-v6-svg"
727
+ viewBox="0 0 32 32"
728
+ fill="currentColor"
729
+ aria-hidden="true"
730
+ role="img"
731
+ width="1em"
732
+ height="1em"
733
+ >
734
+ <path
735
+ 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"
736
+ />
737
+ </svg>
558
738
  </span>
559
739
  <h2
560
740
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -588,7 +768,19 @@ cssPrefix: pf-v6-c-notification-drawer
588
768
  >
589
769
  <div class="pf-v6-c-notification-drawer__list-item-header">
590
770
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
591
- <i class="fas fa-check-circle" aria-hidden="true"></i>
771
+ <svg
772
+ class="pf-v6-svg"
773
+ viewBox="0 0 32 32"
774
+ fill="currentColor"
775
+ aria-hidden="true"
776
+ role="img"
777
+ width="1em"
778
+ height="1em"
779
+ >
780
+ <path
781
+ 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"
782
+ />
783
+ </svg>
592
784
  </span>
593
785
  <h2
594
786
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -623,7 +815,19 @@ cssPrefix: pf-v6-c-notification-drawer
623
815
  >
624
816
  <div class="pf-v6-c-notification-drawer__list-item-header">
625
817
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
626
- <i class="fas fa-check-circle" aria-hidden="true"></i>
818
+ <svg
819
+ class="pf-v6-svg"
820
+ viewBox="0 0 32 32"
821
+ fill="currentColor"
822
+ aria-hidden="true"
823
+ role="img"
824
+ width="1em"
825
+ height="1em"
826
+ >
827
+ <path
828
+ 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"
829
+ />
830
+ </svg>
627
831
  </span>
628
832
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
629
833
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -659,7 +863,19 @@ cssPrefix: pf-v6-c-notification-drawer
659
863
  <span class="pf-v6-c-badge pf-m-unread">2</span>
660
864
  </div>
661
865
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
662
- <i class="fas fa-angle-right" aria-hidden="true"></i>
866
+ <svg
867
+ class="pf-v6-svg"
868
+ viewBox="0 0 20 20"
869
+ fill="currentColor"
870
+ aria-hidden="true"
871
+ role="img"
872
+ width="1em"
873
+ height="1em"
874
+ >
875
+ <path
876
+ 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"
877
+ />
878
+ </svg>
663
879
  </span>
664
880
  </button>
665
881
  </h1>
@@ -670,7 +886,19 @@ cssPrefix: pf-v6-c-notification-drawer
670
886
  >
671
887
  <div class="pf-v6-c-notification-drawer__list-item-header">
672
888
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
673
- <i class="fas fa-info-circle" aria-hidden="true"></i>
889
+ <svg
890
+ class="pf-v6-svg"
891
+ viewBox="0 0 32 32"
892
+ fill="currentColor"
893
+ aria-hidden="true"
894
+ role="img"
895
+ width="1em"
896
+ height="1em"
897
+ >
898
+ <path
899
+ 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"
900
+ />
901
+ </svg>
674
902
  </span>
675
903
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
676
904
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -705,7 +933,19 @@ cssPrefix: pf-v6-c-notification-drawer
705
933
  >
706
934
  <div class="pf-v6-c-notification-drawer__list-item-header">
707
935
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
708
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
936
+ <svg
937
+ class="pf-v6-svg"
938
+ viewBox="0 0 32 32"
939
+ fill="currentColor"
940
+ aria-hidden="true"
941
+ role="img"
942
+ width="1em"
943
+ height="1em"
944
+ >
945
+ <path
946
+ 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"
947
+ />
948
+ </svg>
709
949
  </span>
710
950
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
711
951
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -740,7 +980,19 @@ cssPrefix: pf-v6-c-notification-drawer
740
980
  >
741
981
  <div class="pf-v6-c-notification-drawer__list-item-header">
742
982
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
743
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
983
+ <svg
984
+ class="pf-v6-svg"
985
+ viewBox="0 0 32 32"
986
+ fill="currentColor"
987
+ aria-hidden="true"
988
+ role="img"
989
+ width="1em"
990
+ height="1em"
991
+ >
992
+ <path
993
+ 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"
994
+ />
995
+ </svg>
744
996
  </span>
745
997
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
746
998
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -773,7 +1025,19 @@ cssPrefix: pf-v6-c-notification-drawer
773
1025
  >
774
1026
  <div class="pf-v6-c-notification-drawer__list-item-header">
775
1027
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
776
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1028
+ <svg
1029
+ class="pf-v6-svg"
1030
+ viewBox="0 0 32 32"
1031
+ fill="currentColor"
1032
+ aria-hidden="true"
1033
+ role="img"
1034
+ width="1em"
1035
+ height="1em"
1036
+ >
1037
+ <path
1038
+ 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"
1039
+ />
1040
+ </svg>
777
1041
  </span>
778
1042
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
779
1043
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -805,7 +1069,19 @@ cssPrefix: pf-v6-c-notification-drawer
805
1069
  >
806
1070
  <div class="pf-v6-c-notification-drawer__list-item-header">
807
1071
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
808
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1072
+ <svg
1073
+ class="pf-v6-svg"
1074
+ viewBox="0 0 32 32"
1075
+ fill="currentColor"
1076
+ aria-hidden="true"
1077
+ role="img"
1078
+ width="1em"
1079
+ height="1em"
1080
+ >
1081
+ <path
1082
+ 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"
1083
+ />
1084
+ </svg>
809
1085
  </span>
810
1086
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
811
1087
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -837,7 +1113,19 @@ cssPrefix: pf-v6-c-notification-drawer
837
1113
  >
838
1114
  <div class="pf-v6-c-notification-drawer__list-item-header">
839
1115
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
840
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1116
+ <svg
1117
+ class="pf-v6-svg"
1118
+ viewBox="0 0 32 32"
1119
+ fill="currentColor"
1120
+ aria-hidden="true"
1121
+ role="img"
1122
+ width="1em"
1123
+ height="1em"
1124
+ >
1125
+ <path
1126
+ 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"
1127
+ />
1128
+ </svg>
841
1129
  </span>
842
1130
  <h2
843
1131
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -871,7 +1159,19 @@ cssPrefix: pf-v6-c-notification-drawer
871
1159
  >
872
1160
  <div class="pf-v6-c-notification-drawer__list-item-header">
873
1161
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
874
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1162
+ <svg
1163
+ class="pf-v6-svg"
1164
+ viewBox="0 0 32 32"
1165
+ fill="currentColor"
1166
+ aria-hidden="true"
1167
+ role="img"
1168
+ width="1em"
1169
+ height="1em"
1170
+ >
1171
+ <path
1172
+ 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"
1173
+ />
1174
+ </svg>
875
1175
  </span>
876
1176
  <h2
877
1177
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -906,7 +1206,19 @@ cssPrefix: pf-v6-c-notification-drawer
906
1206
  >
907
1207
  <div class="pf-v6-c-notification-drawer__list-item-header">
908
1208
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
909
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1209
+ <svg
1210
+ class="pf-v6-svg"
1211
+ viewBox="0 0 32 32"
1212
+ fill="currentColor"
1213
+ aria-hidden="true"
1214
+ role="img"
1215
+ width="1em"
1216
+ height="1em"
1217
+ >
1218
+ <path
1219
+ 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"
1220
+ />
1221
+ </svg>
910
1222
  </span>
911
1223
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
912
1224
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -942,7 +1254,19 @@ cssPrefix: pf-v6-c-notification-drawer
942
1254
  <span class="pf-v6-c-badge pf-m-unread">3</span>
943
1255
  </div>
944
1256
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
945
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1257
+ <svg
1258
+ class="pf-v6-svg"
1259
+ viewBox="0 0 20 20"
1260
+ fill="currentColor"
1261
+ aria-hidden="true"
1262
+ role="img"
1263
+ width="1em"
1264
+ height="1em"
1265
+ >
1266
+ <path
1267
+ 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"
1268
+ />
1269
+ </svg>
946
1270
  </span>
947
1271
  </button>
948
1272
  </h1>
@@ -953,7 +1277,19 @@ cssPrefix: pf-v6-c-notification-drawer
953
1277
  >
954
1278
  <div class="pf-v6-c-notification-drawer__list-item-header">
955
1279
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
956
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1280
+ <svg
1281
+ class="pf-v6-svg"
1282
+ viewBox="0 0 32 32"
1283
+ fill="currentColor"
1284
+ aria-hidden="true"
1285
+ role="img"
1286
+ width="1em"
1287
+ height="1em"
1288
+ >
1289
+ <path
1290
+ 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"
1291
+ />
1292
+ </svg>
957
1293
  </span>
958
1294
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
959
1295
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -988,7 +1324,19 @@ cssPrefix: pf-v6-c-notification-drawer
988
1324
  >
989
1325
  <div class="pf-v6-c-notification-drawer__list-item-header">
990
1326
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
991
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1327
+ <svg
1328
+ class="pf-v6-svg"
1329
+ viewBox="0 0 32 32"
1330
+ fill="currentColor"
1331
+ aria-hidden="true"
1332
+ role="img"
1333
+ width="1em"
1334
+ height="1em"
1335
+ >
1336
+ <path
1337
+ 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"
1338
+ />
1339
+ </svg>
992
1340
  </span>
993
1341
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
994
1342
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1023,7 +1371,19 @@ cssPrefix: pf-v6-c-notification-drawer
1023
1371
  >
1024
1372
  <div class="pf-v6-c-notification-drawer__list-item-header">
1025
1373
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1026
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1374
+ <svg
1375
+ class="pf-v6-svg"
1376
+ viewBox="0 0 32 32"
1377
+ fill="currentColor"
1378
+ aria-hidden="true"
1379
+ role="img"
1380
+ width="1em"
1381
+ height="1em"
1382
+ >
1383
+ <path
1384
+ 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"
1385
+ />
1386
+ </svg>
1027
1387
  </span>
1028
1388
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1029
1389
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1056,7 +1416,19 @@ cssPrefix: pf-v6-c-notification-drawer
1056
1416
  >
1057
1417
  <div class="pf-v6-c-notification-drawer__list-item-header">
1058
1418
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1059
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1419
+ <svg
1420
+ class="pf-v6-svg"
1421
+ viewBox="0 0 32 32"
1422
+ fill="currentColor"
1423
+ aria-hidden="true"
1424
+ role="img"
1425
+ width="1em"
1426
+ height="1em"
1427
+ >
1428
+ <path
1429
+ 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"
1430
+ />
1431
+ </svg>
1060
1432
  </span>
1061
1433
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1062
1434
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1088,7 +1460,19 @@ cssPrefix: pf-v6-c-notification-drawer
1088
1460
  >
1089
1461
  <div class="pf-v6-c-notification-drawer__list-item-header">
1090
1462
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1091
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1463
+ <svg
1464
+ class="pf-v6-svg"
1465
+ viewBox="0 0 32 32"
1466
+ fill="currentColor"
1467
+ aria-hidden="true"
1468
+ role="img"
1469
+ width="1em"
1470
+ height="1em"
1471
+ >
1472
+ <path
1473
+ 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"
1474
+ />
1475
+ </svg>
1092
1476
  </span>
1093
1477
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1094
1478
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1120,7 +1504,19 @@ cssPrefix: pf-v6-c-notification-drawer
1120
1504
  >
1121
1505
  <div class="pf-v6-c-notification-drawer__list-item-header">
1122
1506
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1123
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1507
+ <svg
1508
+ class="pf-v6-svg"
1509
+ viewBox="0 0 32 32"
1510
+ fill="currentColor"
1511
+ aria-hidden="true"
1512
+ role="img"
1513
+ width="1em"
1514
+ height="1em"
1515
+ >
1516
+ <path
1517
+ 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"
1518
+ />
1519
+ </svg>
1124
1520
  </span>
1125
1521
  <h2
1126
1522
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1154,7 +1550,19 @@ cssPrefix: pf-v6-c-notification-drawer
1154
1550
  >
1155
1551
  <div class="pf-v6-c-notification-drawer__list-item-header">
1156
1552
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1157
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1553
+ <svg
1554
+ class="pf-v6-svg"
1555
+ viewBox="0 0 32 32"
1556
+ fill="currentColor"
1557
+ aria-hidden="true"
1558
+ role="img"
1559
+ width="1em"
1560
+ height="1em"
1561
+ >
1562
+ <path
1563
+ 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"
1564
+ />
1565
+ </svg>
1158
1566
  </span>
1159
1567
  <h2
1160
1568
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1189,7 +1597,19 @@ cssPrefix: pf-v6-c-notification-drawer
1189
1597
  >
1190
1598
  <div class="pf-v6-c-notification-drawer__list-item-header">
1191
1599
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1192
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1600
+ <svg
1601
+ class="pf-v6-svg"
1602
+ viewBox="0 0 32 32"
1603
+ fill="currentColor"
1604
+ aria-hidden="true"
1605
+ role="img"
1606
+ width="1em"
1607
+ height="1em"
1608
+ >
1609
+ <path
1610
+ 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"
1611
+ />
1612
+ </svg>
1193
1613
  </span>
1194
1614
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1195
1615
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1225,7 +1645,19 @@ cssPrefix: pf-v6-c-notification-drawer
1225
1645
  <span class="pf-v6-c-badge pf-m-unread">2</span>
1226
1646
  </div>
1227
1647
  <span class="pf-v6-c-notification-drawer__group-toggle-icon">
1228
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1648
+ <svg
1649
+ class="pf-v6-svg"
1650
+ viewBox="0 0 20 20"
1651
+ fill="currentColor"
1652
+ aria-hidden="true"
1653
+ role="img"
1654
+ width="1em"
1655
+ height="1em"
1656
+ >
1657
+ <path
1658
+ 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"
1659
+ />
1660
+ </svg>
1229
1661
  </span>
1230
1662
  </button>
1231
1663
  </h1>
@@ -1236,7 +1668,19 @@ cssPrefix: pf-v6-c-notification-drawer
1236
1668
  >
1237
1669
  <div class="pf-v6-c-notification-drawer__list-item-header">
1238
1670
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1239
- <i class="fas fa-info-circle" aria-hidden="true"></i>
1671
+ <svg
1672
+ class="pf-v6-svg"
1673
+ viewBox="0 0 32 32"
1674
+ fill="currentColor"
1675
+ aria-hidden="true"
1676
+ role="img"
1677
+ width="1em"
1678
+ height="1em"
1679
+ >
1680
+ <path
1681
+ 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"
1682
+ />
1683
+ </svg>
1240
1684
  </span>
1241
1685
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1242
1686
  <span class="pf-v6-screen-reader">Info notification:</span>
@@ -1271,7 +1715,19 @@ cssPrefix: pf-v6-c-notification-drawer
1271
1715
  >
1272
1716
  <div class="pf-v6-c-notification-drawer__list-item-header">
1273
1717
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1274
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1718
+ <svg
1719
+ class="pf-v6-svg"
1720
+ viewBox="0 0 32 32"
1721
+ fill="currentColor"
1722
+ aria-hidden="true"
1723
+ role="img"
1724
+ width="1em"
1725
+ height="1em"
1726
+ >
1727
+ <path
1728
+ 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"
1729
+ />
1730
+ </svg>
1275
1731
  </span>
1276
1732
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1277
1733
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1306,7 +1762,19 @@ cssPrefix: pf-v6-c-notification-drawer
1306
1762
  >
1307
1763
  <div class="pf-v6-c-notification-drawer__list-item-header">
1308
1764
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1309
- <i class="fas fa-arrow-circle-up" aria-hidden="true"></i>
1765
+ <svg
1766
+ class="pf-v6-svg"
1767
+ viewBox="0 0 32 32"
1768
+ fill="currentColor"
1769
+ aria-hidden="true"
1770
+ role="img"
1771
+ width="1em"
1772
+ height="1em"
1773
+ >
1774
+ <path
1775
+ 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"
1776
+ />
1777
+ </svg>
1310
1778
  </span>
1311
1779
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1312
1780
  <span class="pf-v6-screen-reader">Custom notification:</span>
@@ -1339,7 +1807,19 @@ cssPrefix: pf-v6-c-notification-drawer
1339
1807
  >
1340
1808
  <div class="pf-v6-c-notification-drawer__list-item-header">
1341
1809
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1342
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
1810
+ <svg
1811
+ class="pf-v6-svg"
1812
+ viewBox="0 0 32 32"
1813
+ fill="currentColor"
1814
+ aria-hidden="true"
1815
+ role="img"
1816
+ width="1em"
1817
+ height="1em"
1818
+ >
1819
+ <path
1820
+ 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"
1821
+ />
1822
+ </svg>
1343
1823
  </span>
1344
1824
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1345
1825
  <span class="pf-v6-screen-reader">Warning notification:</span>
@@ -1371,7 +1851,19 @@ cssPrefix: pf-v6-c-notification-drawer
1371
1851
  >
1372
1852
  <div class="pf-v6-c-notification-drawer__list-item-header">
1373
1853
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1374
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1854
+ <svg
1855
+ class="pf-v6-svg"
1856
+ viewBox="0 0 32 32"
1857
+ fill="currentColor"
1858
+ aria-hidden="true"
1859
+ role="img"
1860
+ width="1em"
1861
+ height="1em"
1862
+ >
1863
+ <path
1864
+ 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"
1865
+ />
1866
+ </svg>
1375
1867
  </span>
1376
1868
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1377
1869
  <span class="pf-v6-screen-reader">Success notification:</span>
@@ -1403,7 +1895,19 @@ cssPrefix: pf-v6-c-notification-drawer
1403
1895
  >
1404
1896
  <div class="pf-v6-c-notification-drawer__list-item-header">
1405
1897
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1406
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1898
+ <svg
1899
+ class="pf-v6-svg"
1900
+ viewBox="0 0 32 32"
1901
+ fill="currentColor"
1902
+ aria-hidden="true"
1903
+ role="img"
1904
+ width="1em"
1905
+ height="1em"
1906
+ >
1907
+ <path
1908
+ 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"
1909
+ />
1910
+ </svg>
1407
1911
  </span>
1408
1912
  <h2
1409
1913
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1437,7 +1941,19 @@ cssPrefix: pf-v6-c-notification-drawer
1437
1941
  >
1438
1942
  <div class="pf-v6-c-notification-drawer__list-item-header">
1439
1943
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1440
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1944
+ <svg
1945
+ class="pf-v6-svg"
1946
+ viewBox="0 0 32 32"
1947
+ fill="currentColor"
1948
+ aria-hidden="true"
1949
+ role="img"
1950
+ width="1em"
1951
+ height="1em"
1952
+ >
1953
+ <path
1954
+ 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"
1955
+ />
1956
+ </svg>
1441
1957
  </span>
1442
1958
  <h2
1443
1959
  class="pf-v6-c-notification-drawer__list-item-header-title pf-m-truncate"
@@ -1472,7 +1988,19 @@ cssPrefix: pf-v6-c-notification-drawer
1472
1988
  >
1473
1989
  <div class="pf-v6-c-notification-drawer__list-item-header">
1474
1990
  <span class="pf-v6-c-notification-drawer__list-item-header-icon">
1475
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1991
+ <svg
1992
+ class="pf-v6-svg"
1993
+ viewBox="0 0 32 32"
1994
+ fill="currentColor"
1995
+ aria-hidden="true"
1996
+ role="img"
1997
+ width="1em"
1998
+ height="1em"
1999
+ >
2000
+ <path
2001
+ 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"
2002
+ />
2003
+ </svg>
1476
2004
  </span>
1477
2005
  <h2 class="pf-v6-c-notification-drawer__list-item-header-title">
1478
2006
  <span class="pf-v6-screen-reader">Success notification:</span>