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

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 (68) hide show
  1. package/components/Button/button.css +75 -2
  2. package/components/Button/button.scss +84 -3
  3. package/components/Compass/compass.css +5 -5
  4. package/components/Compass/compass.scss +5 -4
  5. package/components/_index.css +80 -7
  6. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  7. package/docs/components/ActionList/examples/ActionList.md +143 -11
  8. package/docs/components/Alert/examples/Alert.md +182 -14
  9. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  10. package/docs/components/Button/examples/Button.md +2017 -157
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  12. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +208 -16
  13. package/docs/components/CodeBlock/examples/CodeBlock.md +78 -6
  14. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  15. package/docs/components/Compass/examples/Compass.md +1 -0
  16. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  17. package/docs/components/DescriptionList/examples/DescriptionList.md +325 -25
  18. package/docs/components/Drawer/examples/Drawer.md +273 -21
  19. package/docs/components/DualListSelector/examples/DualListSelector.md +106 -112
  20. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  21. package/docs/components/InputGroup/examples/InputGroup.md +26 -2
  22. package/docs/components/Label/examples/Label.md +242 -218
  23. package/docs/components/Login/examples/Login.md +26 -2
  24. package/docs/components/Masthead/examples/masthead.md +13 -1
  25. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -1
  26. package/docs/components/ModalBox/examples/ModalBox.md +195 -15
  27. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +117 -9
  28. package/docs/components/Nav/examples/Navigation.md +52 -4
  29. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +26 -2
  30. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  31. package/docs/components/Page/examples/Page.md +13 -1
  32. package/docs/components/Pagination/examples/Pagination.md +624 -48
  33. package/docs/components/Popover/examples/Popover.md +208 -16
  34. package/docs/components/Slider/examples/Slider.md +4 -4
  35. package/docs/components/Table/examples/Table.md +52 -4
  36. package/docs/components/Tabs/examples/Tabs.md +1378 -106
  37. package/docs/components/TextInputGroup/examples/TextInputGroup.md +128 -44
  38. package/docs/components/Toolbar/examples/Toolbar.md +455 -35
  39. package/docs/components/TreeView/examples/TreeView.md +52 -4
  40. package/docs/components/Wizard/examples/Wizard.md +169 -13
  41. package/docs/demos/AboutModal/examples/AboutModal.md +13 -1
  42. package/docs/demos/Alert/examples/Alert.md +39 -3
  43. package/docs/demos/BackToTop/examples/BackToTop.md +13 -1
  44. package/docs/demos/Button/examples/Button.md +13 -1
  45. package/docs/demos/Card/examples/Card.md +65 -5
  46. package/docs/demos/CardView/examples/CardView.md +78 -6
  47. package/docs/demos/Compass/examples/Compass.md +689 -359
  48. package/docs/demos/Dashboard/examples/Dashboard.md +39 -3
  49. package/docs/demos/DataList/examples/DataList.md +312 -24
  50. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -1
  51. package/docs/demos/Drawer/examples/Drawer.md +39 -3
  52. package/docs/demos/Form/examples/BasicForms.md +106 -10
  53. package/docs/demos/JumpLinks/examples/JumpLinks.md +26 -2
  54. package/docs/demos/Masthead/examples/Masthead.md +40 -4
  55. package/docs/demos/Modal/examples/Modal.md +78 -6
  56. package/docs/demos/Nav/examples/Nav.md +52 -4
  57. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  58. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  59. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +295 -55
  60. package/docs/demos/Table/examples/Table.md +1108 -145
  61. package/docs/demos/Tabs/examples/Tabs.md +53 -8
  62. package/docs/demos/Toolbar/examples/Toolbar.md +414 -36
  63. package/docs/demos/Wizard/examples/Wizard.md +130 -10
  64. package/package.json +2 -2
  65. package/patternfly-no-globals.css +80 -7
  66. package/patternfly.css +80 -7
  67. package/patternfly.min.css +1 -1
  68. package/patternfly.min.css.map +1 -1
@@ -123,34 +123,16 @@ This demo populates the main Compass section with a card view, which is one of t
123
123
  >
124
124
  <span class="pf-v6-c-button__icon">
125
125
  <svg
126
- fill="none"
127
- width="1em"
128
- height="1em"
129
126
  class="pf-v6-svg"
130
- viewBox="0 0 20 20"
131
- xmlns="http://www.w3.org/2000/svg"
127
+ viewBox="0 0 32 32"
128
+ fill="currentColor"
132
129
  aria-hidden="true"
130
+ role="img"
131
+ width="1em"
132
+ height="1em"
133
133
  >
134
134
  <path
135
- d="M8.33268 13.334H11.666"
136
- stroke="currentcolor"
137
- stroke-width="1.5"
138
- stroke-linecap="round"
139
- stroke-linejoin="round"
140
- />
141
- <path
142
- d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
143
- stroke="currentcolor"
144
- stroke-width="1.5"
145
- stroke-linecap="round"
146
- stroke-linejoin="round"
147
- />
148
- <path
149
- d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
150
- stroke="currentcolor"
151
- stroke-width="1.5"
152
- stroke-linecap="round"
153
- stroke-linejoin="round"
135
+ d="M30.707 15.435 17.061 1.789a1.501 1.501 0 0 0-2.121 0L1.293 15.435a.999.999 0 1 0 1.414 1.414L3 16.556V29.5c0 .827.673 1.5 1.5 1.5h23c.827 0 1.5-.673 1.5-1.5V16.556l.293.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414ZM19 29h-6V19h6v10Zm8-10v10h-6V18.5c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5V29H5V14.556l11-11 11 11V19Z"
154
136
  />
155
137
  </svg>
156
138
  </span>
@@ -166,7 +148,19 @@ This demo populates the main Compass section with a card view, which is one of t
166
148
  disabled
167
149
  >
168
150
  <span class="pf-v6-c-button__icon">
169
- <i class="fas fa-angle-left" aria-hidden="true"></i>
151
+ <svg
152
+ class="pf-v6-svg"
153
+ viewBox="0 0 256 512"
154
+ fill="currentColor"
155
+ aria-hidden="true"
156
+ role="img"
157
+ width="1em"
158
+ height="1em"
159
+ >
160
+ <path
161
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
162
+ />
163
+ </svg>
170
164
  </span>
171
165
  </button>
172
166
  </div>
@@ -252,7 +246,19 @@ This demo populates the main Compass section with a card view, which is one of t
252
246
  disabled
253
247
  >
254
248
  <span class="pf-v6-c-button__icon">
255
- <i class="fas fa-angle-right" aria-hidden="true"></i>
249
+ <svg
250
+ class="pf-v6-svg"
251
+ viewBox="0 0 256 512"
252
+ fill="currentColor"
253
+ aria-hidden="true"
254
+ role="img"
255
+ width="1em"
256
+ height="1em"
257
+ >
258
+ <path
259
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
260
+ />
261
+ </svg>
256
262
  </span>
257
263
  </button>
258
264
  </div>
@@ -266,27 +272,16 @@ This demo populates the main Compass section with a card view, which is one of t
266
272
  >
267
273
  <span class="pf-v6-c-button__icon">
268
274
  <svg
269
- fill="none"
270
- width="1em"
271
- height="1em"
272
275
  class="pf-v6-svg"
273
- viewBox="0 0 20 20"
274
- xmlns="http://www.w3.org/2000/svg"
276
+ viewBox="0 0 32 32"
277
+ fill="currentColor"
275
278
  aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
276
282
  >
277
283
  <path
278
- d="M14.166 14.166L17.4993 17.4993"
279
- stroke="currentcolor"
280
- stroke-width="1.5"
281
- stroke-linecap="round"
282
- stroke-linejoin="round"
283
- />
284
- <path
285
- d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
286
- stroke="currentcolor"
287
- stroke-width="1.5"
288
- stroke-linecap="round"
289
- stroke-linejoin="round"
284
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
290
285
  />
291
286
  </svg>
292
287
  </span>
@@ -309,7 +304,19 @@ This demo populates the main Compass section with a card view, which is one of t
309
304
  disabled
310
305
  >
311
306
  <span class="pf-v6-c-button__icon">
312
- <i class="fas fa-angle-left" aria-hidden="true"></i>
307
+ <svg
308
+ class="pf-v6-svg"
309
+ viewBox="0 0 256 512"
310
+ fill="currentColor"
311
+ aria-hidden="true"
312
+ role="img"
313
+ width="1em"
314
+ height="1em"
315
+ >
316
+ <path
317
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
318
+ />
319
+ </svg>
313
320
  </span>
314
321
  </button>
315
322
  </div>
@@ -398,7 +405,19 @@ This demo populates the main Compass section with a card view, which is one of t
398
405
  disabled
399
406
  >
400
407
  <span class="pf-v6-c-button__icon">
401
- <i class="fas fa-angle-right" aria-hidden="true"></i>
408
+ <svg
409
+ class="pf-v6-svg"
410
+ viewBox="0 0 256 512"
411
+ fill="currentColor"
412
+ aria-hidden="true"
413
+ role="img"
414
+ width="1em"
415
+ height="1em"
416
+ >
417
+ <path
418
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
419
+ />
420
+ </svg>
402
421
  </span>
403
422
  </button>
404
423
  </div>
@@ -442,15 +461,15 @@ This demo populates the main Compass section with a card view, which is one of t
442
461
  <span class="pf-v6-c-button__icon">
443
462
  <svg
444
463
  class="pf-v6-svg"
445
- viewBox="0 0 448 512"
464
+ viewBox="0 0 32 32"
446
465
  fill="currentColor"
466
+ aria-hidden="true"
447
467
  role="img"
448
468
  width="1em"
449
469
  height="1em"
450
- aria-hidden="true"
451
470
  >
452
471
  <path
453
- d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
472
+ d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5ZM28 28H4V4h24v24ZM8 16a1 1 0 0 1 1-1h6V9a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H9a1 1 0 0 1-1-1Z"
454
473
  />
455
474
  </svg>
456
475
  </span>
@@ -460,20 +479,20 @@ This demo populates the main Compass section with a card view, which is one of t
460
479
  <button
461
480
  class="pf-v6-c-button pf-m-circle pf-m-plain"
462
481
  type="button"
463
- aria-label="Help"
482
+ aria-label="Collections"
464
483
  >
465
484
  <span class="pf-v6-c-button__icon">
466
485
  <svg
467
486
  class="pf-v6-svg"
468
- viewBox="0 0 512 512"
487
+ viewBox="0 0 32 32"
469
488
  fill="currentColor"
489
+ aria-hidden="true"
470
490
  role="img"
471
491
  width="1em"
472
492
  height="1em"
473
- aria-hidden="true"
474
493
  >
475
494
  <path
476
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
495
+ d="M28.5 11h-25c-.827 0-1.5.673-1.5 1.5v17c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM28 29H4V13h24v16ZM6 2a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1ZM4 7a1 1 0 0 1 1-1h22a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1Z"
477
496
  />
478
497
  </svg>
479
498
  </span>
@@ -487,26 +506,17 @@ This demo populates the main Compass section with a card view, which is one of t
487
506
  >
488
507
  <span class="pf-v6-c-button__icon">
489
508
  <svg
509
+ class="pf-v6-svg"
510
+ viewBox="0 0 32 32"
490
511
  fill="currentColor"
512
+ aria-hidden="true"
513
+ role="img"
491
514
  width="1em"
492
515
  height="1em"
493
- viewBox="0 0 32 32"
494
- style="translate: .05em .1em; scale: 1.1"
495
- aria-hidden="true"
496
516
  >
497
- <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
498
- <rect width="32" height="32" fill="none" />
499
- </g>
500
- <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
501
- <path
502
- fill="var(--pf-t--global--icon--color--regular)"
503
- d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
504
- />
505
- <path
506
- fill="var(--pf-t--global--icon--color--regular)"
507
- d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
508
- />
509
- </g>
517
+ <path
518
+ d="M30.502 7c0 .29-.209.536-.498.59a5.523 5.523 0 0 0-4.417 4.417c-.054.289-.3.498-.59.498s-.536-.21-.59-.498A5.52 5.52 0 0 0 19.99 7.59c-.289-.054-.498-.3-.498-.59s.21-.536.498-.59a5.52 5.52 0 0 0 4.417-4.417c.054-.289.301-.498.59-.498s.536.21.59.498a5.523 5.523 0 0 0 4.417 4.417c.289.054.498.3.498.59Zm-4.465 9.962A11.932 11.932 0 0 1 15.038 5.97C15.001 5.447 14.524 5 14 5c-.521 0-.997.442-1.038.962a11.932 11.932 0 0 1-10.992 11C1.447 16.999 1 17.476 1 18c0 .521.442.997.962 1.038a11.932 11.932 0 0 1 11 10.992c.037.524.514.97 1.038.97.521 0 .997-.442 1.038-.962a11.933 11.933 0 0 1 11-10.999c.519-.042.961-.516.961-1.038 0-.521-.442-.997-.962-1.038Z"
519
+ />
510
520
  </svg>
511
521
  </span>
512
522
  </button>
@@ -515,20 +525,20 @@ This demo populates the main Compass section with a card view, which is one of t
515
525
  <button
516
526
  class="pf-v6-c-button pf-m-circle pf-m-plain"
517
527
  type="button"
518
- aria-label="User profile"
528
+ aria-label="Volume"
519
529
  >
520
530
  <span class="pf-v6-c-button__icon">
521
531
  <svg
522
532
  class="pf-v6-svg"
523
- viewBox="0 0 448 512"
533
+ viewBox="0 0 32 32"
524
534
  fill="currentColor"
535
+ aria-hidden="true"
525
536
  role="img"
526
537
  width="1em"
527
538
  height="1em"
528
- aria-hidden="true"
529
539
  >
530
540
  <path
531
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
541
+ d="M17.439 2.102a1 1 0 0 0-1.054.109L7.656 9H2.5C1.673 9 1 9.673 1 10.5v11c0 .827.673 1.5 1.5 1.5h5.157l8.729 6.789a.998.998 0 0 0 1.053.109c.343-.168.561-.517.561-.898V3a1 1 0 0 0-.561-.898ZM16 26.955l-7.386-5.744A1 1 0 0 0 8 21H3V11h5a.997.997 0 0 0 .614-.211L16 5.045v21.91ZM31 16a14.94 14.94 0 0 1-4.284 10.488.997.997 0 0 1-1.414.018 1 1 0 0 1-.018-1.414C27.68 22.637 29 19.408 29 16s-1.319-6.637-3.716-9.092a.999.999 0 1 1 1.432-1.396A14.94 14.94 0 0 1 31 16Zm-6 0a9.007 9.007 0 0 1-2.249 5.95.996.996 0 0 1-1.411.091 1 1 0 0 1-.091-1.411C22.378 19.346 23 17.702 23 16s-.622-3.346-1.751-4.63a1 1 0 0 1 1.502-1.32A9.007 9.007 0 0 1 25 16Z"
532
542
  />
533
543
  </svg>
534
544
  </span>
@@ -538,20 +548,20 @@ This demo populates the main Compass section with a card view, which is one of t
538
548
  <button
539
549
  class="pf-v6-c-button pf-m-circle pf-m-plain"
540
550
  type="button"
541
- aria-label="Send"
551
+ aria-label="Use microphone"
542
552
  >
543
553
  <span class="pf-v6-c-button__icon">
544
554
  <svg
545
555
  class="pf-v6-svg"
546
- viewBox="0 0 512 512"
556
+ viewBox="0 0 32 32"
547
557
  fill="currentColor"
558
+ aria-hidden="true"
548
559
  role="img"
549
560
  width="1em"
550
561
  height="1em"
551
- aria-hidden="true"
552
562
  >
553
563
  <path
554
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
564
+ d="M16 22c3.86 0 7-3.141 7-7V8c0-3.859-3.14-7-7-7S9 4.141 9 8v7c0 3.859 3.14 7 7 7ZM11 8c0-2.757 2.243-5 5-5s5 2.243 5 5v7c0 2.757-2.243 5-5 5s-5-2.243-5-5V8Zm5.99 17.95c0 .018.01.032.01.05v2.021h5a1 1 0 1 1 0 2H10.02a1 1 0 1 1 0-2H15V26c0-.018.009-.033.01-.05C9.407 25.447 5 20.731 5 15a1 1 0 1 1 2 0c0 4.963 4.038 9 9 9s9-4.037 9-9a1 1 0 1 1 2 0c0 5.731-4.407 10.447-10.01 10.95Z"
555
565
  />
556
566
  </svg>
557
567
  </span>
@@ -727,7 +737,19 @@ This demo populates the main Compass section with a card view, which is one of t
727
737
  aria-label="Go to previous page"
728
738
  >
729
739
  <span class="pf-v6-c-button__icon">
730
- <i class="fas fa-angle-left" aria-hidden="true"></i>
740
+ <svg
741
+ class="pf-v6-svg"
742
+ viewBox="0 0 256 512"
743
+ fill="currentColor"
744
+ aria-hidden="true"
745
+ role="img"
746
+ width="1em"
747
+ height="1em"
748
+ >
749
+ <path
750
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
751
+ />
752
+ </svg>
731
753
  </span>
732
754
  </button>
733
755
  </div>
@@ -738,7 +760,19 @@ This demo populates the main Compass section with a card view, which is one of t
738
760
  aria-label="Go to next page"
739
761
  >
740
762
  <span class="pf-v6-c-button__icon">
741
- <i class="fas fa-angle-right" aria-hidden="true"></i>
763
+ <svg
764
+ class="pf-v6-svg"
765
+ viewBox="0 0 256 512"
766
+ fill="currentColor"
767
+ aria-hidden="true"
768
+ role="img"
769
+ width="1em"
770
+ height="1em"
771
+ >
772
+ <path
773
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
774
+ />
775
+ </svg>
742
776
  </span>
743
777
  </button>
744
778
  </div>
@@ -1252,20 +1286,20 @@ This demo populates the main Compass section with a card view, which is one of t
1252
1286
  <button
1253
1287
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1254
1288
  type="button"
1255
- aria-label="Help"
1289
+ aria-label="Notifications"
1256
1290
  >
1257
1291
  <span class="pf-v6-c-button__icon">
1258
1292
  <svg
1259
1293
  class="pf-v6-svg"
1260
- viewBox="0 0 512 512"
1294
+ viewBox="0 0 32 32"
1261
1295
  fill="currentColor"
1296
+ aria-hidden="true"
1262
1297
  role="img"
1263
1298
  width="1em"
1264
1299
  height="1em"
1265
- aria-hidden="true"
1266
1300
  >
1267
1301
  <path
1268
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
1302
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.885-3.523-8.955-8.159-9.823.405-.445.659-1.03.659-1.677C18.5 2.122 17.379 1 16 1s-2.5 1.122-2.5 2.5c0 .647.254 1.233.659 1.677C9.523 6.045 6 10.115 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1Zm-1 4H5v-2.126A4.006 4.006 0 0 0 8 19v-4c0-4.411 3.589-8 8-8s8 3.589 8 8v4a4.008 4.008 0 0 0 3 3.874V25Z"
1269
1303
  />
1270
1304
  </svg>
1271
1305
  </span>
@@ -1275,20 +1309,43 @@ This demo populates the main Compass section with a card view, which is one of t
1275
1309
  <button
1276
1310
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1277
1311
  type="button"
1278
- aria-label="User profile"
1312
+ aria-label="List"
1279
1313
  >
1280
1314
  <span class="pf-v6-c-button__icon">
1281
1315
  <svg
1282
1316
  class="pf-v6-svg"
1283
- viewBox="0 0 448 512"
1317
+ viewBox="0 0 32 32"
1284
1318
  fill="currentColor"
1319
+ aria-hidden="true"
1285
1320
  role="img"
1286
1321
  width="1em"
1287
1322
  height="1em"
1323
+ >
1324
+ <path
1325
+ d="M31 16a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h21a1 1 0 0 1 1 1Zm-1 9H9a1 1 0 0 0 0 2h21a1 1 0 0 0 0-2ZM9 7h21a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM2 4.51a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 4.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 14.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 24.51Z"
1326
+ />
1327
+ </svg>
1328
+ </span>
1329
+ </button>
1330
+ </div>
1331
+ <div class="pf-v6-c-action-list__item">
1332
+ <button
1333
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1334
+ type="button"
1335
+ aria-label="Zap"
1336
+ >
1337
+ <span class="pf-v6-c-button__icon">
1338
+ <svg
1339
+ class="pf-v6-svg"
1340
+ viewBox="0 0 32 32"
1341
+ fill="currentColor"
1288
1342
  aria-hidden="true"
1343
+ role="img"
1344
+ width="1em"
1345
+ height="1em"
1289
1346
  >
1290
1347
  <path
1291
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
1348
+ d="M15 31a1 1 0 0 1-1-1V19h-4a.999.999 0 0 1-.916-1.401l7-16A1 1 0 0 1 18 2v11h4a.999.999 0 0 1 .916 1.401l-7 16A.998.998 0 0 1 15 31Zm-3.471-14H14.5c.827 0 1.5.673 1.5 1.5v6.719L20.471 15H17.5c-.827 0-1.5-.673-1.5-1.5V6.781L11.529 17Z"
1292
1349
  />
1293
1350
  </svg>
1294
1351
  </span>
@@ -1298,20 +1355,43 @@ This demo populates the main Compass section with a card view, which is one of t
1298
1355
  <button
1299
1356
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1300
1357
  type="button"
1301
- aria-label="Send"
1358
+ aria-label="Download"
1302
1359
  >
1303
1360
  <span class="pf-v6-c-button__icon">
1304
1361
  <svg
1305
1362
  class="pf-v6-svg"
1306
- viewBox="0 0 512 512"
1363
+ viewBox="0 0 32 32"
1307
1364
  fill="currentColor"
1365
+ aria-hidden="true"
1308
1366
  role="img"
1309
1367
  width="1em"
1310
1368
  height="1em"
1369
+ >
1370
+ <path
1371
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
1372
+ />
1373
+ </svg>
1374
+ </span>
1375
+ </button>
1376
+ </div>
1377
+ <div class="pf-v6-c-action-list__item">
1378
+ <button
1379
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1380
+ type="button"
1381
+ aria-label="Help"
1382
+ >
1383
+ <span class="pf-v6-c-button__icon">
1384
+ <svg
1385
+ class="pf-v6-svg"
1386
+ viewBox="0 0 32 32"
1387
+ fill="currentColor"
1311
1388
  aria-hidden="true"
1389
+ role="img"
1390
+ width="1em"
1391
+ height="1em"
1312
1392
  >
1313
1393
  <path
1314
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
1394
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
1315
1395
  />
1316
1396
  </svg>
1317
1397
  </span>
@@ -1442,41 +1522,23 @@ This demo populates the main Compass section with a dashboard, which is often us
1442
1522
  >
1443
1523
  <span class="pf-v6-c-button__icon">
1444
1524
  <svg
1445
- fill="none"
1446
- width="1em"
1447
- height="1em"
1448
1525
  class="pf-v6-svg"
1449
- viewBox="0 0 20 20"
1450
- xmlns="http://www.w3.org/2000/svg"
1526
+ viewBox="0 0 32 32"
1527
+ fill="currentColor"
1451
1528
  aria-hidden="true"
1529
+ role="img"
1530
+ width="1em"
1531
+ height="1em"
1452
1532
  >
1453
1533
  <path
1454
- d="M8.33268 13.334H11.666"
1455
- stroke="currentcolor"
1456
- stroke-width="1.5"
1457
- stroke-linecap="round"
1458
- stroke-linejoin="round"
1459
- />
1460
- <path
1461
- d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
1462
- stroke="currentcolor"
1463
- stroke-width="1.5"
1464
- stroke-linecap="round"
1465
- stroke-linejoin="round"
1466
- />
1467
- <path
1468
- d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
1469
- stroke="currentcolor"
1470
- stroke-width="1.5"
1471
- stroke-linecap="round"
1472
- stroke-linejoin="round"
1534
+ d="M30.707 15.435 17.061 1.789a1.501 1.501 0 0 0-2.121 0L1.293 15.435a.999.999 0 1 0 1.414 1.414L3 16.556V29.5c0 .827.673 1.5 1.5 1.5h23c.827 0 1.5-.673 1.5-1.5V16.556l.293.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414ZM19 29h-6V19h6v10Zm8-10v10h-6V18.5c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5V29H5V14.556l11-11 11 11V19Z"
1473
1535
  />
1474
1536
  </svg>
1475
1537
  </span>
1476
1538
  </button>
1477
1539
  </div>
1478
1540
  <div class="pf-v6-c-compass__nav-main">
1479
- <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
1541
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Compass primary">
1480
1542
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1481
1543
  <button
1482
1544
  class="pf-v6-c-button pf-m-small pf-m-plain"
@@ -1485,11 +1547,27 @@ This demo populates the main Compass section with a dashboard, which is often us
1485
1547
  disabled
1486
1548
  >
1487
1549
  <span class="pf-v6-c-button__icon">
1488
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1550
+ <svg
1551
+ class="pf-v6-svg"
1552
+ viewBox="0 0 256 512"
1553
+ fill="currentColor"
1554
+ aria-hidden="true"
1555
+ role="img"
1556
+ width="1em"
1557
+ height="1em"
1558
+ >
1559
+ <path
1560
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1561
+ />
1562
+ </svg>
1489
1563
  </span>
1490
1564
  </button>
1491
1565
  </div>
1492
- <ul class="pf-v6-c-tabs__list" role="tablist">
1566
+ <ul
1567
+ class="pf-v6-c-tabs__list"
1568
+ role="tablist"
1569
+ aria-label="Compass primary"
1570
+ >
1493
1571
  <li class="pf-v6-c-tabs__item" role="presentation">
1494
1572
  <a
1495
1573
  class="pf-v6-c-tabs__link"
@@ -1567,7 +1645,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1567
1645
  disabled
1568
1646
  >
1569
1647
  <span class="pf-v6-c-button__icon">
1570
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1648
+ <svg
1649
+ class="pf-v6-svg"
1650
+ viewBox="0 0 256 512"
1651
+ fill="currentColor"
1652
+ aria-hidden="true"
1653
+ role="img"
1654
+ width="1em"
1655
+ height="1em"
1656
+ >
1657
+ <path
1658
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1659
+ />
1660
+ </svg>
1571
1661
  </span>
1572
1662
  </button>
1573
1663
  </div>
@@ -1581,27 +1671,16 @@ This demo populates the main Compass section with a dashboard, which is often us
1581
1671
  >
1582
1672
  <span class="pf-v6-c-button__icon">
1583
1673
  <svg
1584
- fill="none"
1585
- width="1em"
1586
- height="1em"
1587
1674
  class="pf-v6-svg"
1588
- viewBox="0 0 20 20"
1589
- xmlns="http://www.w3.org/2000/svg"
1675
+ viewBox="0 0 32 32"
1676
+ fill="currentColor"
1590
1677
  aria-hidden="true"
1678
+ role="img"
1679
+ width="1em"
1680
+ height="1em"
1591
1681
  >
1592
1682
  <path
1593
- d="M14.166 14.166L17.4993 17.4993"
1594
- stroke="currentcolor"
1595
- stroke-width="1.5"
1596
- stroke-linecap="round"
1597
- stroke-linejoin="round"
1598
- />
1599
- <path
1600
- d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
1601
- stroke="currentcolor"
1602
- stroke-width="1.5"
1603
- stroke-linecap="round"
1604
- stroke-linejoin="round"
1683
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
1605
1684
  />
1606
1685
  </svg>
1607
1686
  </span>
@@ -1624,7 +1703,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1624
1703
  disabled
1625
1704
  >
1626
1705
  <span class="pf-v6-c-button__icon">
1627
- <i class="fas fa-angle-left" aria-hidden="true"></i>
1706
+ <svg
1707
+ class="pf-v6-svg"
1708
+ viewBox="0 0 256 512"
1709
+ fill="currentColor"
1710
+ aria-hidden="true"
1711
+ role="img"
1712
+ width="1em"
1713
+ height="1em"
1714
+ >
1715
+ <path
1716
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
1717
+ />
1718
+ </svg>
1628
1719
  </span>
1629
1720
  </button>
1630
1721
  </div>
@@ -1713,7 +1804,19 @@ This demo populates the main Compass section with a dashboard, which is often us
1713
1804
  disabled
1714
1805
  >
1715
1806
  <span class="pf-v6-c-button__icon">
1716
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1807
+ <svg
1808
+ class="pf-v6-svg"
1809
+ viewBox="0 0 256 512"
1810
+ fill="currentColor"
1811
+ aria-hidden="true"
1812
+ role="img"
1813
+ width="1em"
1814
+ height="1em"
1815
+ >
1816
+ <path
1817
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
1818
+ />
1819
+ </svg>
1717
1820
  </span>
1718
1821
  </button>
1719
1822
  </div>
@@ -1757,15 +1860,15 @@ This demo populates the main Compass section with a dashboard, which is often us
1757
1860
  <span class="pf-v6-c-button__icon">
1758
1861
  <svg
1759
1862
  class="pf-v6-svg"
1760
- viewBox="0 0 448 512"
1863
+ viewBox="0 0 32 32"
1761
1864
  fill="currentColor"
1865
+ aria-hidden="true"
1762
1866
  role="img"
1763
1867
  width="1em"
1764
1868
  height="1em"
1765
- aria-hidden="true"
1766
1869
  >
1767
1870
  <path
1768
- d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
1871
+ d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5ZM28 28H4V4h24v24ZM8 16a1 1 0 0 1 1-1h6V9a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H9a1 1 0 0 1-1-1Z"
1769
1872
  />
1770
1873
  </svg>
1771
1874
  </span>
@@ -1775,20 +1878,20 @@ This demo populates the main Compass section with a dashboard, which is often us
1775
1878
  <button
1776
1879
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1777
1880
  type="button"
1778
- aria-label="Help"
1881
+ aria-label="Collections"
1779
1882
  >
1780
1883
  <span class="pf-v6-c-button__icon">
1781
1884
  <svg
1782
1885
  class="pf-v6-svg"
1783
- viewBox="0 0 512 512"
1886
+ viewBox="0 0 32 32"
1784
1887
  fill="currentColor"
1888
+ aria-hidden="true"
1785
1889
  role="img"
1786
1890
  width="1em"
1787
1891
  height="1em"
1788
- aria-hidden="true"
1789
1892
  >
1790
1893
  <path
1791
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
1894
+ d="M28.5 11h-25c-.827 0-1.5.673-1.5 1.5v17c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM28 29H4V13h24v16ZM6 2a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1ZM4 7a1 1 0 0 1 1-1h22a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1Z"
1792
1895
  />
1793
1896
  </svg>
1794
1897
  </span>
@@ -1802,26 +1905,17 @@ This demo populates the main Compass section with a dashboard, which is often us
1802
1905
  >
1803
1906
  <span class="pf-v6-c-button__icon">
1804
1907
  <svg
1908
+ class="pf-v6-svg"
1909
+ viewBox="0 0 32 32"
1805
1910
  fill="currentColor"
1911
+ aria-hidden="true"
1912
+ role="img"
1806
1913
  width="1em"
1807
1914
  height="1em"
1808
- viewBox="0 0 32 32"
1809
- style="translate: .05em .1em; scale: 1.1"
1810
- aria-hidden="true"
1811
1915
  >
1812
- <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
1813
- <rect width="32" height="32" fill="none" />
1814
- </g>
1815
- <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
1816
- <path
1817
- fill="var(--pf-t--global--icon--color--regular)"
1818
- d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
1819
- />
1820
- <path
1821
- fill="var(--pf-t--global--icon--color--regular)"
1822
- d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
1823
- />
1824
- </g>
1916
+ <path
1917
+ d="M30.502 7c0 .29-.209.536-.498.59a5.523 5.523 0 0 0-4.417 4.417c-.054.289-.3.498-.59.498s-.536-.21-.59-.498A5.52 5.52 0 0 0 19.99 7.59c-.289-.054-.498-.3-.498-.59s.21-.536.498-.59a5.52 5.52 0 0 0 4.417-4.417c.054-.289.301-.498.59-.498s.536.21.59.498a5.523 5.523 0 0 0 4.417 4.417c.289.054.498.3.498.59Zm-4.465 9.962A11.932 11.932 0 0 1 15.038 5.97C15.001 5.447 14.524 5 14 5c-.521 0-.997.442-1.038.962a11.932 11.932 0 0 1-10.992 11C1.447 16.999 1 17.476 1 18c0 .521.442.997.962 1.038a11.932 11.932 0 0 1 11 10.992c.037.524.514.97 1.038.97.521 0 .997-.442 1.038-.962a11.933 11.933 0 0 1 11-10.999c.519-.042.961-.516.961-1.038 0-.521-.442-.997-.962-1.038Z"
1918
+ />
1825
1919
  </svg>
1826
1920
  </span>
1827
1921
  </button>
@@ -1830,20 +1924,20 @@ This demo populates the main Compass section with a dashboard, which is often us
1830
1924
  <button
1831
1925
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1832
1926
  type="button"
1833
- aria-label="User profile"
1927
+ aria-label="Volume"
1834
1928
  >
1835
1929
  <span class="pf-v6-c-button__icon">
1836
1930
  <svg
1837
1931
  class="pf-v6-svg"
1838
- viewBox="0 0 448 512"
1932
+ viewBox="0 0 32 32"
1839
1933
  fill="currentColor"
1934
+ aria-hidden="true"
1840
1935
  role="img"
1841
1936
  width="1em"
1842
1937
  height="1em"
1843
- aria-hidden="true"
1844
1938
  >
1845
1939
  <path
1846
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
1940
+ d="M17.439 2.102a1 1 0 0 0-1.054.109L7.656 9H2.5C1.673 9 1 9.673 1 10.5v11c0 .827.673 1.5 1.5 1.5h5.157l8.729 6.789a.998.998 0 0 0 1.053.109c.343-.168.561-.517.561-.898V3a1 1 0 0 0-.561-.898ZM16 26.955l-7.386-5.744A1 1 0 0 0 8 21H3V11h5a.997.997 0 0 0 .614-.211L16 5.045v21.91ZM31 16a14.94 14.94 0 0 1-4.284 10.488.997.997 0 0 1-1.414.018 1 1 0 0 1-.018-1.414C27.68 22.637 29 19.408 29 16s-1.319-6.637-3.716-9.092a.999.999 0 1 1 1.432-1.396A14.94 14.94 0 0 1 31 16Zm-6 0a9.007 9.007 0 0 1-2.249 5.95.996.996 0 0 1-1.411.091 1 1 0 0 1-.091-1.411C22.378 19.346 23 17.702 23 16s-.622-3.346-1.751-4.63a1 1 0 0 1 1.502-1.32A9.007 9.007 0 0 1 25 16Z"
1847
1941
  />
1848
1942
  </svg>
1849
1943
  </span>
@@ -1853,20 +1947,20 @@ This demo populates the main Compass section with a dashboard, which is often us
1853
1947
  <button
1854
1948
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1855
1949
  type="button"
1856
- aria-label="Send"
1950
+ aria-label="Use microphone"
1857
1951
  >
1858
1952
  <span class="pf-v6-c-button__icon">
1859
1953
  <svg
1860
1954
  class="pf-v6-svg"
1861
- viewBox="0 0 512 512"
1955
+ viewBox="0 0 32 32"
1862
1956
  fill="currentColor"
1957
+ aria-hidden="true"
1863
1958
  role="img"
1864
1959
  width="1em"
1865
1960
  height="1em"
1866
- aria-hidden="true"
1867
1961
  >
1868
1962
  <path
1869
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
1963
+ d="M16 22c3.86 0 7-3.141 7-7V8c0-3.859-3.14-7-7-7S9 4.141 9 8v7c0 3.859 3.14 7 7 7ZM11 8c0-2.757 2.243-5 5-5s5 2.243 5 5v7c0 2.757-2.243 5-5 5s-5-2.243-5-5V8Zm5.99 17.95c0 .018.01.032.01.05v2.021h5a1 1 0 1 1 0 2H10.02a1 1 0 1 1 0-2H15V26c0-.018.009-.033.01-.05C9.407 25.447 5 20.731 5 15a1 1 0 1 1 2 0c0 4.963 4.038 9 9 9s9-4.037 9-9a1 1 0 1 1 2 0c0 5.731-4.407 10.447-10.01 10.95Z"
1870
1964
  />
1871
1965
  </svg>
1872
1966
  </span>
@@ -2793,20 +2887,20 @@ This demo populates the main Compass section with a dashboard, which is often us
2793
2887
  <button
2794
2888
  class="pf-v6-c-button pf-m-circle pf-m-plain"
2795
2889
  type="button"
2796
- aria-label="Help"
2890
+ aria-label="Notifications"
2797
2891
  >
2798
2892
  <span class="pf-v6-c-button__icon">
2799
2893
  <svg
2800
2894
  class="pf-v6-svg"
2801
- viewBox="0 0 512 512"
2895
+ viewBox="0 0 32 32"
2802
2896
  fill="currentColor"
2897
+ aria-hidden="true"
2803
2898
  role="img"
2804
2899
  width="1em"
2805
2900
  height="1em"
2806
- aria-hidden="true"
2807
2901
  >
2808
2902
  <path
2809
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
2903
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.885-3.523-8.955-8.159-9.823.405-.445.659-1.03.659-1.677C18.5 2.122 17.379 1 16 1s-2.5 1.122-2.5 2.5c0 .647.254 1.233.659 1.677C9.523 6.045 6 10.115 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1Zm-1 4H5v-2.126A4.006 4.006 0 0 0 8 19v-4c0-4.411 3.589-8 8-8s8 3.589 8 8v4a4.008 4.008 0 0 0 3 3.874V25Z"
2810
2904
  />
2811
2905
  </svg>
2812
2906
  </span>
@@ -2816,20 +2910,43 @@ This demo populates the main Compass section with a dashboard, which is often us
2816
2910
  <button
2817
2911
  class="pf-v6-c-button pf-m-circle pf-m-plain"
2818
2912
  type="button"
2819
- aria-label="User profile"
2913
+ aria-label="List"
2820
2914
  >
2821
2915
  <span class="pf-v6-c-button__icon">
2822
2916
  <svg
2823
2917
  class="pf-v6-svg"
2824
- viewBox="0 0 448 512"
2918
+ viewBox="0 0 32 32"
2825
2919
  fill="currentColor"
2920
+ aria-hidden="true"
2826
2921
  role="img"
2827
2922
  width="1em"
2828
2923
  height="1em"
2924
+ >
2925
+ <path
2926
+ d="M31 16a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h21a1 1 0 0 1 1 1Zm-1 9H9a1 1 0 0 0 0 2h21a1 1 0 0 0 0-2ZM9 7h21a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM2 4.51a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 4.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 14.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 24.51Z"
2927
+ />
2928
+ </svg>
2929
+ </span>
2930
+ </button>
2931
+ </div>
2932
+ <div class="pf-v6-c-action-list__item">
2933
+ <button
2934
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2935
+ type="button"
2936
+ aria-label="Zap"
2937
+ >
2938
+ <span class="pf-v6-c-button__icon">
2939
+ <svg
2940
+ class="pf-v6-svg"
2941
+ viewBox="0 0 32 32"
2942
+ fill="currentColor"
2829
2943
  aria-hidden="true"
2944
+ role="img"
2945
+ width="1em"
2946
+ height="1em"
2830
2947
  >
2831
2948
  <path
2832
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
2949
+ d="M15 31a1 1 0 0 1-1-1V19h-4a.999.999 0 0 1-.916-1.401l7-16A1 1 0 0 1 18 2v11h4a.999.999 0 0 1 .916 1.401l-7 16A.998.998 0 0 1 15 31Zm-3.471-14H14.5c.827 0 1.5.673 1.5 1.5v6.719L20.471 15H17.5c-.827 0-1.5-.673-1.5-1.5V6.781L11.529 17Z"
2833
2950
  />
2834
2951
  </svg>
2835
2952
  </span>
@@ -2839,20 +2956,43 @@ This demo populates the main Compass section with a dashboard, which is often us
2839
2956
  <button
2840
2957
  class="pf-v6-c-button pf-m-circle pf-m-plain"
2841
2958
  type="button"
2842
- aria-label="Send"
2959
+ aria-label="Download"
2843
2960
  >
2844
2961
  <span class="pf-v6-c-button__icon">
2845
2962
  <svg
2846
2963
  class="pf-v6-svg"
2847
- viewBox="0 0 512 512"
2964
+ viewBox="0 0 32 32"
2848
2965
  fill="currentColor"
2966
+ aria-hidden="true"
2849
2967
  role="img"
2850
2968
  width="1em"
2851
2969
  height="1em"
2970
+ >
2971
+ <path
2972
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
2973
+ />
2974
+ </svg>
2975
+ </span>
2976
+ </button>
2977
+ </div>
2978
+ <div class="pf-v6-c-action-list__item">
2979
+ <button
2980
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2981
+ type="button"
2982
+ aria-label="Help"
2983
+ >
2984
+ <span class="pf-v6-c-button__icon">
2985
+ <svg
2986
+ class="pf-v6-svg"
2987
+ viewBox="0 0 32 32"
2988
+ fill="currentColor"
2852
2989
  aria-hidden="true"
2990
+ role="img"
2991
+ width="1em"
2992
+ height="1em"
2853
2993
  >
2854
2994
  <path
2855
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
2995
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
2856
2996
  />
2857
2997
  </svg>
2858
2998
  </span>
@@ -2982,34 +3122,16 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
2982
3122
  >
2983
3123
  <span class="pf-v6-c-button__icon">
2984
3124
  <svg
2985
- fill="none"
2986
- width="1em"
2987
- height="1em"
2988
3125
  class="pf-v6-svg"
2989
- viewBox="0 0 20 20"
2990
- xmlns="http://www.w3.org/2000/svg"
3126
+ viewBox="0 0 32 32"
3127
+ fill="currentColor"
2991
3128
  aria-hidden="true"
3129
+ role="img"
3130
+ width="1em"
3131
+ height="1em"
2992
3132
  >
2993
3133
  <path
2994
- d="M8.33268 13.334H11.666"
2995
- stroke="currentcolor"
2996
- stroke-width="1.5"
2997
- stroke-linecap="round"
2998
- stroke-linejoin="round"
2999
- />
3000
- <path
3001
- d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
3002
- stroke="currentcolor"
3003
- stroke-width="1.5"
3004
- stroke-linecap="round"
3005
- stroke-linejoin="round"
3006
- />
3007
- <path
3008
- d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
3009
- stroke="currentcolor"
3010
- stroke-width="1.5"
3011
- stroke-linecap="round"
3012
- stroke-linejoin="round"
3134
+ d="M30.707 15.435 17.061 1.789a1.501 1.501 0 0 0-2.121 0L1.293 15.435a.999.999 0 1 0 1.414 1.414L3 16.556V29.5c0 .827.673 1.5 1.5 1.5h23c.827 0 1.5-.673 1.5-1.5V16.556l.293.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414ZM19 29h-6V19h6v10Zm8-10v10h-6V18.5c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5V29H5V14.556l11-11 11 11V19Z"
3013
3135
  />
3014
3136
  </svg>
3015
3137
  </span>
@@ -3025,7 +3147,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3025
3147
  disabled
3026
3148
  >
3027
3149
  <span class="pf-v6-c-button__icon">
3028
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3150
+ <svg
3151
+ class="pf-v6-svg"
3152
+ viewBox="0 0 256 512"
3153
+ fill="currentColor"
3154
+ aria-hidden="true"
3155
+ role="img"
3156
+ width="1em"
3157
+ height="1em"
3158
+ >
3159
+ <path
3160
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3161
+ />
3162
+ </svg>
3029
3163
  </span>
3030
3164
  </button>
3031
3165
  </div>
@@ -3111,7 +3245,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3111
3245
  disabled
3112
3246
  >
3113
3247
  <span class="pf-v6-c-button__icon">
3114
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3248
+ <svg
3249
+ class="pf-v6-svg"
3250
+ viewBox="0 0 256 512"
3251
+ fill="currentColor"
3252
+ aria-hidden="true"
3253
+ role="img"
3254
+ width="1em"
3255
+ height="1em"
3256
+ >
3257
+ <path
3258
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3259
+ />
3260
+ </svg>
3115
3261
  </span>
3116
3262
  </button>
3117
3263
  </div>
@@ -3125,27 +3271,16 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3125
3271
  >
3126
3272
  <span class="pf-v6-c-button__icon">
3127
3273
  <svg
3128
- fill="none"
3129
- width="1em"
3130
- height="1em"
3131
3274
  class="pf-v6-svg"
3132
- viewBox="0 0 20 20"
3133
- xmlns="http://www.w3.org/2000/svg"
3275
+ viewBox="0 0 32 32"
3276
+ fill="currentColor"
3134
3277
  aria-hidden="true"
3278
+ role="img"
3279
+ width="1em"
3280
+ height="1em"
3135
3281
  >
3136
3282
  <path
3137
- d="M14.166 14.166L17.4993 17.4993"
3138
- stroke="currentcolor"
3139
- stroke-width="1.5"
3140
- stroke-linecap="round"
3141
- stroke-linejoin="round"
3142
- />
3143
- <path
3144
- d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
3145
- stroke="currentcolor"
3146
- stroke-width="1.5"
3147
- stroke-linecap="round"
3148
- stroke-linejoin="round"
3283
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
3149
3284
  />
3150
3285
  </svg>
3151
3286
  </span>
@@ -3168,7 +3303,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3168
3303
  disabled
3169
3304
  >
3170
3305
  <span class="pf-v6-c-button__icon">
3171
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3306
+ <svg
3307
+ class="pf-v6-svg"
3308
+ viewBox="0 0 256 512"
3309
+ fill="currentColor"
3310
+ aria-hidden="true"
3311
+ role="img"
3312
+ width="1em"
3313
+ height="1em"
3314
+ >
3315
+ <path
3316
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3317
+ />
3318
+ </svg>
3172
3319
  </span>
3173
3320
  </button>
3174
3321
  </div>
@@ -3257,7 +3404,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3257
3404
  disabled
3258
3405
  >
3259
3406
  <span class="pf-v6-c-button__icon">
3260
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3407
+ <svg
3408
+ class="pf-v6-svg"
3409
+ viewBox="0 0 256 512"
3410
+ fill="currentColor"
3411
+ aria-hidden="true"
3412
+ role="img"
3413
+ width="1em"
3414
+ height="1em"
3415
+ >
3416
+ <path
3417
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3418
+ />
3419
+ </svg>
3261
3420
  </span>
3262
3421
  </button>
3263
3422
  </div>
@@ -3301,15 +3460,15 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3301
3460
  <span class="pf-v6-c-button__icon">
3302
3461
  <svg
3303
3462
  class="pf-v6-svg"
3304
- viewBox="0 0 448 512"
3463
+ viewBox="0 0 32 32"
3305
3464
  fill="currentColor"
3465
+ aria-hidden="true"
3306
3466
  role="img"
3307
3467
  width="1em"
3308
3468
  height="1em"
3309
- aria-hidden="true"
3310
3469
  >
3311
3470
  <path
3312
- d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
3471
+ d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5ZM28 28H4V4h24v24ZM8 16a1 1 0 0 1 1-1h6V9a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H9a1 1 0 0 1-1-1Z"
3313
3472
  />
3314
3473
  </svg>
3315
3474
  </span>
@@ -3319,20 +3478,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3319
3478
  <button
3320
3479
  class="pf-v6-c-button pf-m-circle pf-m-plain"
3321
3480
  type="button"
3322
- aria-label="Help"
3481
+ aria-label="Collections"
3323
3482
  >
3324
3483
  <span class="pf-v6-c-button__icon">
3325
3484
  <svg
3326
3485
  class="pf-v6-svg"
3327
- viewBox="0 0 512 512"
3486
+ viewBox="0 0 32 32"
3328
3487
  fill="currentColor"
3488
+ aria-hidden="true"
3329
3489
  role="img"
3330
3490
  width="1em"
3331
3491
  height="1em"
3332
- aria-hidden="true"
3333
3492
  >
3334
3493
  <path
3335
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
3494
+ d="M28.5 11h-25c-.827 0-1.5.673-1.5 1.5v17c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM28 29H4V13h24v16ZM6 2a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1ZM4 7a1 1 0 0 1 1-1h22a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1Z"
3336
3495
  />
3337
3496
  </svg>
3338
3497
  </span>
@@ -3346,26 +3505,17 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3346
3505
  >
3347
3506
  <span class="pf-v6-c-button__icon">
3348
3507
  <svg
3508
+ class="pf-v6-svg"
3509
+ viewBox="0 0 32 32"
3349
3510
  fill="currentColor"
3511
+ aria-hidden="true"
3512
+ role="img"
3350
3513
  width="1em"
3351
3514
  height="1em"
3352
- viewBox="0 0 32 32"
3353
- style="translate: .05em .1em; scale: 1.1"
3354
- aria-hidden="true"
3355
3515
  >
3356
- <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
3357
- <rect width="32" height="32" fill="none" />
3358
- </g>
3359
- <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
3360
- <path
3361
- fill="var(--pf-t--global--icon--color--regular)"
3362
- d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
3363
- />
3364
- <path
3365
- fill="var(--pf-t--global--icon--color--regular)"
3366
- d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
3367
- />
3368
- </g>
3516
+ <path
3517
+ d="M30.502 7c0 .29-.209.536-.498.59a5.523 5.523 0 0 0-4.417 4.417c-.054.289-.3.498-.59.498s-.536-.21-.59-.498A5.52 5.52 0 0 0 19.99 7.59c-.289-.054-.498-.3-.498-.59s.21-.536.498-.59a5.52 5.52 0 0 0 4.417-4.417c.054-.289.301-.498.59-.498s.536.21.59.498a5.523 5.523 0 0 0 4.417 4.417c.289.054.498.3.498.59Zm-4.465 9.962A11.932 11.932 0 0 1 15.038 5.97C15.001 5.447 14.524 5 14 5c-.521 0-.997.442-1.038.962a11.932 11.932 0 0 1-10.992 11C1.447 16.999 1 17.476 1 18c0 .521.442.997.962 1.038a11.932 11.932 0 0 1 11 10.992c.037.524.514.97 1.038.97.521 0 .997-.442 1.038-.962a11.933 11.933 0 0 1 11-10.999c.519-.042.961-.516.961-1.038 0-.521-.442-.997-.962-1.038Z"
3518
+ />
3369
3519
  </svg>
3370
3520
  </span>
3371
3521
  </button>
@@ -3374,20 +3524,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3374
3524
  <button
3375
3525
  class="pf-v6-c-button pf-m-circle pf-m-plain"
3376
3526
  type="button"
3377
- aria-label="User profile"
3527
+ aria-label="Volume"
3378
3528
  >
3379
3529
  <span class="pf-v6-c-button__icon">
3380
3530
  <svg
3381
3531
  class="pf-v6-svg"
3382
- viewBox="0 0 448 512"
3532
+ viewBox="0 0 32 32"
3383
3533
  fill="currentColor"
3534
+ aria-hidden="true"
3384
3535
  role="img"
3385
3536
  width="1em"
3386
3537
  height="1em"
3387
- aria-hidden="true"
3388
3538
  >
3389
3539
  <path
3390
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
3540
+ d="M17.439 2.102a1 1 0 0 0-1.054.109L7.656 9H2.5C1.673 9 1 9.673 1 10.5v11c0 .827.673 1.5 1.5 1.5h5.157l8.729 6.789a.998.998 0 0 0 1.053.109c.343-.168.561-.517.561-.898V3a1 1 0 0 0-.561-.898ZM16 26.955l-7.386-5.744A1 1 0 0 0 8 21H3V11h5a.997.997 0 0 0 .614-.211L16 5.045v21.91ZM31 16a14.94 14.94 0 0 1-4.284 10.488.997.997 0 0 1-1.414.018 1 1 0 0 1-.018-1.414C27.68 22.637 29 19.408 29 16s-1.319-6.637-3.716-9.092a.999.999 0 1 1 1.432-1.396A14.94 14.94 0 0 1 31 16Zm-6 0a9.007 9.007 0 0 1-2.249 5.95.996.996 0 0 1-1.411.091 1 1 0 0 1-.091-1.411C22.378 19.346 23 17.702 23 16s-.622-3.346-1.751-4.63a1 1 0 0 1 1.502-1.32A9.007 9.007 0 0 1 25 16Z"
3391
3541
  />
3392
3542
  </svg>
3393
3543
  </span>
@@ -3397,20 +3547,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3397
3547
  <button
3398
3548
  class="pf-v6-c-button pf-m-circle pf-m-plain"
3399
3549
  type="button"
3400
- aria-label="Send"
3550
+ aria-label="Use microphone"
3401
3551
  >
3402
3552
  <span class="pf-v6-c-button__icon">
3403
3553
  <svg
3404
3554
  class="pf-v6-svg"
3405
- viewBox="0 0 512 512"
3555
+ viewBox="0 0 32 32"
3406
3556
  fill="currentColor"
3557
+ aria-hidden="true"
3407
3558
  role="img"
3408
3559
  width="1em"
3409
3560
  height="1em"
3410
- aria-hidden="true"
3411
3561
  >
3412
3562
  <path
3413
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
3563
+ d="M16 22c3.86 0 7-3.141 7-7V8c0-3.859-3.14-7-7-7S9 4.141 9 8v7c0 3.859 3.14 7 7 7ZM11 8c0-2.757 2.243-5 5-5s5 2.243 5 5v7c0 2.757-2.243 5-5 5s-5-2.243-5-5V8Zm5.99 17.95c0 .018.01.032.01.05v2.021h5a1 1 0 1 1 0 2H10.02a1 1 0 1 1 0-2H15V26c0-.018.009-.033.01-.05C9.407 25.447 5 20.731 5 15a1 1 0 1 1 2 0c0 4.963 4.038 9 9 9s9-4.037 9-9a1 1 0 1 1 2 0c0 5.731-4.407 10.447-10.01 10.95Z"
3414
3564
  />
3415
3565
  </svg>
3416
3566
  </span>
@@ -3595,7 +3745,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3595
3745
  aria-label="Go to previous page"
3596
3746
  >
3597
3747
  <span class="pf-v6-c-button__icon">
3598
- <i class="fas fa-angle-left" aria-hidden="true"></i>
3748
+ <svg
3749
+ class="pf-v6-svg"
3750
+ viewBox="0 0 256 512"
3751
+ fill="currentColor"
3752
+ aria-hidden="true"
3753
+ role="img"
3754
+ width="1em"
3755
+ height="1em"
3756
+ >
3757
+ <path
3758
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
3759
+ />
3760
+ </svg>
3599
3761
  </span>
3600
3762
  </button>
3601
3763
  </div>
@@ -3606,7 +3768,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3606
3768
  aria-label="Go to next page"
3607
3769
  >
3608
3770
  <span class="pf-v6-c-button__icon">
3609
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3771
+ <svg
3772
+ class="pf-v6-svg"
3773
+ viewBox="0 0 256 512"
3774
+ fill="currentColor"
3775
+ aria-hidden="true"
3776
+ role="img"
3777
+ width="1em"
3778
+ height="1em"
3779
+ >
3780
+ <path
3781
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
3782
+ />
3783
+ </svg>
3610
3784
  </span>
3611
3785
  </button>
3612
3786
  </div>
@@ -4255,7 +4429,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4255
4429
  aria-label="Go to previous page"
4256
4430
  >
4257
4431
  <span class="pf-v6-c-button__icon">
4258
- <i class="fas fa-angle-left" aria-hidden="true"></i>
4432
+ <svg
4433
+ class="pf-v6-svg"
4434
+ viewBox="0 0 256 512"
4435
+ fill="currentColor"
4436
+ aria-hidden="true"
4437
+ role="img"
4438
+ width="1em"
4439
+ height="1em"
4440
+ >
4441
+ <path
4442
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
4443
+ />
4444
+ </svg>
4259
4445
  </span>
4260
4446
  </button>
4261
4447
  </div>
@@ -4266,7 +4452,19 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4266
4452
  aria-label="Go to next page"
4267
4453
  >
4268
4454
  <span class="pf-v6-c-button__icon">
4269
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4455
+ <svg
4456
+ class="pf-v6-svg"
4457
+ viewBox="0 0 256 512"
4458
+ fill="currentColor"
4459
+ aria-hidden="true"
4460
+ role="img"
4461
+ width="1em"
4462
+ height="1em"
4463
+ >
4464
+ <path
4465
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
4466
+ />
4467
+ </svg>
4270
4468
  </span>
4271
4469
  </button>
4272
4470
  </div>
@@ -4784,20 +4982,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4784
4982
  <button
4785
4983
  class="pf-v6-c-button pf-m-circle pf-m-plain"
4786
4984
  type="button"
4787
- aria-label="Help"
4985
+ aria-label="Notifications"
4788
4986
  >
4789
4987
  <span class="pf-v6-c-button__icon">
4790
4988
  <svg
4791
4989
  class="pf-v6-svg"
4792
- viewBox="0 0 512 512"
4990
+ viewBox="0 0 32 32"
4793
4991
  fill="currentColor"
4992
+ aria-hidden="true"
4794
4993
  role="img"
4795
4994
  width="1em"
4796
4995
  height="1em"
4797
- aria-hidden="true"
4798
4996
  >
4799
4997
  <path
4800
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
4998
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.885-3.523-8.955-8.159-9.823.405-.445.659-1.03.659-1.677C18.5 2.122 17.379 1 16 1s-2.5 1.122-2.5 2.5c0 .647.254 1.233.659 1.677C9.523 6.045 6 10.115 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1Zm-1 4H5v-2.126A4.006 4.006 0 0 0 8 19v-4c0-4.411 3.589-8 8-8s8 3.589 8 8v4a4.008 4.008 0 0 0 3 3.874V25Z"
4801
4999
  />
4802
5000
  </svg>
4803
5001
  </span>
@@ -4807,20 +5005,43 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4807
5005
  <button
4808
5006
  class="pf-v6-c-button pf-m-circle pf-m-plain"
4809
5007
  type="button"
4810
- aria-label="User profile"
5008
+ aria-label="List"
4811
5009
  >
4812
5010
  <span class="pf-v6-c-button__icon">
4813
5011
  <svg
4814
5012
  class="pf-v6-svg"
4815
- viewBox="0 0 448 512"
5013
+ viewBox="0 0 32 32"
4816
5014
  fill="currentColor"
5015
+ aria-hidden="true"
4817
5016
  role="img"
4818
5017
  width="1em"
4819
5018
  height="1em"
5019
+ >
5020
+ <path
5021
+ d="M31 16a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h21a1 1 0 0 1 1 1Zm-1 9H9a1 1 0 0 0 0 2h21a1 1 0 0 0 0-2ZM9 7h21a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM2 4.51a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 4.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 14.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 24.51Z"
5022
+ />
5023
+ </svg>
5024
+ </span>
5025
+ </button>
5026
+ </div>
5027
+ <div class="pf-v6-c-action-list__item">
5028
+ <button
5029
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
5030
+ type="button"
5031
+ aria-label="Zap"
5032
+ >
5033
+ <span class="pf-v6-c-button__icon">
5034
+ <svg
5035
+ class="pf-v6-svg"
5036
+ viewBox="0 0 32 32"
5037
+ fill="currentColor"
4820
5038
  aria-hidden="true"
5039
+ role="img"
5040
+ width="1em"
5041
+ height="1em"
4821
5042
  >
4822
5043
  <path
4823
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
5044
+ d="M15 31a1 1 0 0 1-1-1V19h-4a.999.999 0 0 1-.916-1.401l7-16A1 1 0 0 1 18 2v11h4a.999.999 0 0 1 .916 1.401l-7 16A.998.998 0 0 1 15 31Zm-3.471-14H14.5c.827 0 1.5.673 1.5 1.5v6.719L20.471 15H17.5c-.827 0-1.5-.673-1.5-1.5V6.781L11.529 17Z"
4824
5045
  />
4825
5046
  </svg>
4826
5047
  </span>
@@ -4830,20 +5051,43 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4830
5051
  <button
4831
5052
  class="pf-v6-c-button pf-m-circle pf-m-plain"
4832
5053
  type="button"
4833
- aria-label="Send"
5054
+ aria-label="Download"
4834
5055
  >
4835
5056
  <span class="pf-v6-c-button__icon">
4836
5057
  <svg
4837
5058
  class="pf-v6-svg"
4838
- viewBox="0 0 512 512"
5059
+ viewBox="0 0 32 32"
4839
5060
  fill="currentColor"
5061
+ aria-hidden="true"
4840
5062
  role="img"
4841
5063
  width="1em"
4842
5064
  height="1em"
5065
+ >
5066
+ <path
5067
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
5068
+ />
5069
+ </svg>
5070
+ </span>
5071
+ </button>
5072
+ </div>
5073
+ <div class="pf-v6-c-action-list__item">
5074
+ <button
5075
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
5076
+ type="button"
5077
+ aria-label="Help"
5078
+ >
5079
+ <span class="pf-v6-c-button__icon">
5080
+ <svg
5081
+ class="pf-v6-svg"
5082
+ viewBox="0 0 32 32"
5083
+ fill="currentColor"
4843
5084
  aria-hidden="true"
5085
+ role="img"
5086
+ width="1em"
5087
+ height="1em"
4844
5088
  >
4845
5089
  <path
4846
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
5090
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
4847
5091
  />
4848
5092
  </svg>
4849
5093
  </span>
@@ -4975,34 +5219,16 @@ This demo showcases how you can position a side-panel drawer on top of the other
4975
5219
  >
4976
5220
  <span class="pf-v6-c-button__icon">
4977
5221
  <svg
4978
- fill="none"
4979
- width="1em"
4980
- height="1em"
4981
5222
  class="pf-v6-svg"
4982
- viewBox="0 0 20 20"
4983
- xmlns="http://www.w3.org/2000/svg"
5223
+ viewBox="0 0 32 32"
5224
+ fill="currentColor"
4984
5225
  aria-hidden="true"
5226
+ role="img"
5227
+ width="1em"
5228
+ height="1em"
4985
5229
  >
4986
5230
  <path
4987
- d="M8.33268 13.334H11.666"
4988
- stroke="currentcolor"
4989
- stroke-width="1.5"
4990
- stroke-linecap="round"
4991
- stroke-linejoin="round"
4992
- />
4993
- <path
4994
- d="M1.66602 6.66602L9.73102 2.63351C9.89994 2.54905 10.0988 2.54905 10.2677 2.63351L18.3327 6.66602"
4995
- stroke="currentcolor"
4996
- stroke-width="1.5"
4997
- stroke-linecap="round"
4998
- stroke-linejoin="round"
4999
- />
5000
- <path
5001
- d="M16.6673 9.16602V15.4993C16.6673 16.6039 15.7719 17.4993 14.6673 17.4993H5.33398C4.22941 17.4993 3.33398 16.6039 3.33398 15.4993V9.16602"
5002
- stroke="currentcolor"
5003
- stroke-width="1.5"
5004
- stroke-linecap="round"
5005
- stroke-linejoin="round"
5231
+ d="M30.707 15.435 17.061 1.789a1.501 1.501 0 0 0-2.121 0L1.293 15.435a.999.999 0 1 0 1.414 1.414L3 16.556V29.5c0 .827.673 1.5 1.5 1.5h23c.827 0 1.5-.673 1.5-1.5V16.556l.293.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414ZM19 29h-6V19h6v10Zm8-10v10h-6V18.5c0-.827-.673-1.5-1.5-1.5h-7c-.827 0-1.5.673-1.5 1.5V29H5V14.556l11-11 11 11V19Z"
5006
5232
  />
5007
5233
  </svg>
5008
5234
  </span>
@@ -5024,7 +5250,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5024
5250
  disabled
5025
5251
  >
5026
5252
  <span class="pf-v6-c-button__icon">
5027
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5253
+ <svg
5254
+ class="pf-v6-svg"
5255
+ viewBox="0 0 256 512"
5256
+ fill="currentColor"
5257
+ aria-hidden="true"
5258
+ role="img"
5259
+ width="1em"
5260
+ height="1em"
5261
+ >
5262
+ <path
5263
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5264
+ />
5265
+ </svg>
5028
5266
  </span>
5029
5267
  </button>
5030
5268
  </div>
@@ -5116,7 +5354,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5116
5354
  disabled
5117
5355
  >
5118
5356
  <span class="pf-v6-c-button__icon">
5119
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5357
+ <svg
5358
+ class="pf-v6-svg"
5359
+ viewBox="0 0 256 512"
5360
+ fill="currentColor"
5361
+ aria-hidden="true"
5362
+ role="img"
5363
+ width="1em"
5364
+ height="1em"
5365
+ >
5366
+ <path
5367
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5368
+ />
5369
+ </svg>
5120
5370
  </span>
5121
5371
  </button>
5122
5372
  </div>
@@ -5130,27 +5380,16 @@ This demo showcases how you can position a side-panel drawer on top of the other
5130
5380
  >
5131
5381
  <span class="pf-v6-c-button__icon">
5132
5382
  <svg
5133
- fill="none"
5134
- width="1em"
5135
- height="1em"
5136
5383
  class="pf-v6-svg"
5137
- viewBox="0 0 20 20"
5138
- xmlns="http://www.w3.org/2000/svg"
5384
+ viewBox="0 0 32 32"
5385
+ fill="currentColor"
5139
5386
  aria-hidden="true"
5387
+ role="img"
5388
+ width="1em"
5389
+ height="1em"
5140
5390
  >
5141
5391
  <path
5142
- d="M14.166 14.166L17.4993 17.4993"
5143
- stroke="currentcolor"
5144
- stroke-width="1.5"
5145
- stroke-linecap="round"
5146
- stroke-linejoin="round"
5147
- />
5148
- <path
5149
- d="M2.5 9.16667C2.5 12.8486 5.48477 15.8333 9.16667 15.8333C11.0108 15.8333 12.6801 15.0846 13.887 13.8744C15.0897 12.6685 15.8333 11.0044 15.8333 9.16667C15.8333 5.48477 12.8486 2.5 9.16667 2.5C5.48477 2.5 2.5 5.48477 2.5 9.16667Z"
5150
- stroke="currentcolor"
5151
- stroke-width="1.5"
5152
- stroke-linecap="round"
5153
- stroke-linejoin="round"
5392
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
5154
5393
  />
5155
5394
  </svg>
5156
5395
  </span>
@@ -5176,7 +5415,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5176
5415
  disabled
5177
5416
  >
5178
5417
  <span class="pf-v6-c-button__icon">
5179
- <i class="fas fa-angle-left" aria-hidden="true"></i>
5418
+ <svg
5419
+ class="pf-v6-svg"
5420
+ viewBox="0 0 256 512"
5421
+ fill="currentColor"
5422
+ aria-hidden="true"
5423
+ role="img"
5424
+ width="1em"
5425
+ height="1em"
5426
+ >
5427
+ <path
5428
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5429
+ />
5430
+ </svg>
5180
5431
  </span>
5181
5432
  </button>
5182
5433
  </div>
@@ -5271,7 +5522,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5271
5522
  disabled
5272
5523
  >
5273
5524
  <span class="pf-v6-c-button__icon">
5274
- <i class="fas fa-angle-right" aria-hidden="true"></i>
5525
+ <svg
5526
+ class="pf-v6-svg"
5527
+ viewBox="0 0 256 512"
5528
+ fill="currentColor"
5529
+ aria-hidden="true"
5530
+ role="img"
5531
+ width="1em"
5532
+ height="1em"
5533
+ >
5534
+ <path
5535
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5536
+ />
5537
+ </svg>
5275
5538
  </span>
5276
5539
  </button>
5277
5540
  </div>
@@ -5315,15 +5578,15 @@ This demo showcases how you can position a side-panel drawer on top of the other
5315
5578
  <span class="pf-v6-c-button__icon">
5316
5579
  <svg
5317
5580
  class="pf-v6-svg"
5318
- viewBox="0 0 448 512"
5581
+ viewBox="0 0 32 32"
5319
5582
  fill="currentColor"
5583
+ aria-hidden="true"
5320
5584
  role="img"
5321
5585
  width="1em"
5322
5586
  height="1em"
5323
- aria-hidden="true"
5324
5587
  >
5325
5588
  <path
5326
- d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
5589
+ d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5ZM28 28H4V4h24v24ZM8 16a1 1 0 0 1 1-1h6V9a1 1 0 1 1 2 0v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H9a1 1 0 0 1-1-1Z"
5327
5590
  />
5328
5591
  </svg>
5329
5592
  </span>
@@ -5333,20 +5596,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
5333
5596
  <button
5334
5597
  class="pf-v6-c-button pf-m-circle pf-m-plain"
5335
5598
  type="button"
5336
- aria-label="Help"
5599
+ aria-label="Collections"
5337
5600
  >
5338
5601
  <span class="pf-v6-c-button__icon">
5339
5602
  <svg
5340
5603
  class="pf-v6-svg"
5341
- viewBox="0 0 512 512"
5604
+ viewBox="0 0 32 32"
5342
5605
  fill="currentColor"
5606
+ aria-hidden="true"
5343
5607
  role="img"
5344
5608
  width="1em"
5345
5609
  height="1em"
5346
- aria-hidden="true"
5347
5610
  >
5348
5611
  <path
5349
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
5612
+ d="M28.5 11h-25c-.827 0-1.5.673-1.5 1.5v17c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-17c0-.827-.673-1.5-1.5-1.5ZM28 29H4V13h24v16ZM6 2a1 1 0 0 1 1-1h18a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1ZM4 7a1 1 0 0 1 1-1h22a1 1 0 0 1 0 2H5a1 1 0 0 1-1-1Z"
5350
5613
  />
5351
5614
  </svg>
5352
5615
  </span>
@@ -5360,26 +5623,17 @@ This demo showcases how you can position a side-panel drawer on top of the other
5360
5623
  >
5361
5624
  <span class="pf-v6-c-button__icon">
5362
5625
  <svg
5626
+ class="pf-v6-svg"
5627
+ viewBox="0 0 32 32"
5363
5628
  fill="currentColor"
5629
+ aria-hidden="true"
5630
+ role="img"
5364
5631
  width="1em"
5365
5632
  height="1em"
5366
- viewBox="0 0 32 32"
5367
- style="translate: .05em .1em; scale: 1.1"
5368
- aria-hidden="true"
5369
5633
  >
5370
- <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
5371
- <rect width="32" height="32" fill="none" />
5372
- </g>
5373
- <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
5374
- <path
5375
- fill="var(--pf-t--global--icon--color--regular)"
5376
- d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
5377
- />
5378
- <path
5379
- fill="var(--pf-t--global--icon--color--regular)"
5380
- d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
5381
- />
5382
- </g>
5634
+ <path
5635
+ d="M30.502 7c0 .29-.209.536-.498.59a5.523 5.523 0 0 0-4.417 4.417c-.054.289-.3.498-.59.498s-.536-.21-.59-.498A5.52 5.52 0 0 0 19.99 7.59c-.289-.054-.498-.3-.498-.59s.21-.536.498-.59a5.52 5.52 0 0 0 4.417-4.417c.054-.289.301-.498.59-.498s.536.21.59.498a5.523 5.523 0 0 0 4.417 4.417c.289.054.498.3.498.59Zm-4.465 9.962A11.932 11.932 0 0 1 15.038 5.97C15.001 5.447 14.524 5 14 5c-.521 0-.997.442-1.038.962a11.932 11.932 0 0 1-10.992 11C1.447 16.999 1 17.476 1 18c0 .521.442.997.962 1.038a11.932 11.932 0 0 1 11 10.992c.037.524.514.97 1.038.97.521 0 .997-.442 1.038-.962a11.933 11.933 0 0 1 11-10.999c.519-.042.961-.516.961-1.038 0-.521-.442-.997-.962-1.038Z"
5636
+ />
5383
5637
  </svg>
5384
5638
  </span>
5385
5639
  </button>
@@ -5388,20 +5642,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
5388
5642
  <button
5389
5643
  class="pf-v6-c-button pf-m-circle pf-m-plain"
5390
5644
  type="button"
5391
- aria-label="User profile"
5645
+ aria-label="Volume"
5392
5646
  >
5393
5647
  <span class="pf-v6-c-button__icon">
5394
5648
  <svg
5395
5649
  class="pf-v6-svg"
5396
- viewBox="0 0 448 512"
5650
+ viewBox="0 0 32 32"
5397
5651
  fill="currentColor"
5652
+ aria-hidden="true"
5398
5653
  role="img"
5399
5654
  width="1em"
5400
5655
  height="1em"
5401
- aria-hidden="true"
5402
5656
  >
5403
5657
  <path
5404
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
5658
+ d="M17.439 2.102a1 1 0 0 0-1.054.109L7.656 9H2.5C1.673 9 1 9.673 1 10.5v11c0 .827.673 1.5 1.5 1.5h5.157l8.729 6.789a.998.998 0 0 0 1.053.109c.343-.168.561-.517.561-.898V3a1 1 0 0 0-.561-.898ZM16 26.955l-7.386-5.744A1 1 0 0 0 8 21H3V11h5a.997.997 0 0 0 .614-.211L16 5.045v21.91ZM31 16a14.94 14.94 0 0 1-4.284 10.488.997.997 0 0 1-1.414.018 1 1 0 0 1-.018-1.414C27.68 22.637 29 19.408 29 16s-1.319-6.637-3.716-9.092a.999.999 0 1 1 1.432-1.396A14.94 14.94 0 0 1 31 16Zm-6 0a9.007 9.007 0 0 1-2.249 5.95.996.996 0 0 1-1.411.091 1 1 0 0 1-.091-1.411C22.378 19.346 23 17.702 23 16s-.622-3.346-1.751-4.63a1 1 0 0 1 1.502-1.32A9.007 9.007 0 0 1 25 16Z"
5405
5659
  />
5406
5660
  </svg>
5407
5661
  </span>
@@ -5411,20 +5665,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
5411
5665
  <button
5412
5666
  class="pf-v6-c-button pf-m-circle pf-m-plain"
5413
5667
  type="button"
5414
- aria-label="Send"
5668
+ aria-label="Use microphone"
5415
5669
  >
5416
5670
  <span class="pf-v6-c-button__icon">
5417
5671
  <svg
5418
5672
  class="pf-v6-svg"
5419
- viewBox="0 0 512 512"
5673
+ viewBox="0 0 32 32"
5420
5674
  fill="currentColor"
5675
+ aria-hidden="true"
5421
5676
  role="img"
5422
5677
  width="1em"
5423
5678
  height="1em"
5424
- aria-hidden="true"
5425
5679
  >
5426
5680
  <path
5427
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
5681
+ d="M16 22c3.86 0 7-3.141 7-7V8c0-3.859-3.14-7-7-7S9 4.141 9 8v7c0 3.859 3.14 7 7 7ZM11 8c0-2.757 2.243-5 5-5s5 2.243 5 5v7c0 2.757-2.243 5-5 5s-5-2.243-5-5V8Zm5.99 17.95c0 .018.01.032.01.05v2.021h5a1 1 0 1 1 0 2H10.02a1 1 0 1 1 0-2H15V26c0-.018.009-.033.01-.05C9.407 25.447 5 20.731 5 15a1 1 0 1 1 2 0c0 4.963 4.038 9 9 9s9-4.037 9-9a1 1 0 1 1 2 0c0 5.731-4.407 10.447-10.01 10.95Z"
5428
5682
  />
5429
5683
  </svg>
5430
5684
  </span>
@@ -5622,10 +5876,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5622
5876
  aria-label="Go to previous page"
5623
5877
  >
5624
5878
  <span class="pf-v6-c-button__icon">
5625
- <i
5626
- class="fas fa-angle-left"
5879
+ <svg
5880
+ class="pf-v6-svg"
5881
+ viewBox="0 0 256 512"
5882
+ fill="currentColor"
5627
5883
  aria-hidden="true"
5628
- ></i>
5884
+ role="img"
5885
+ width="1em"
5886
+ height="1em"
5887
+ >
5888
+ <path
5889
+ d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
5890
+ />
5891
+ </svg>
5629
5892
  </span>
5630
5893
  </button>
5631
5894
  </div>
@@ -5638,10 +5901,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
5638
5901
  aria-label="Go to next page"
5639
5902
  >
5640
5903
  <span class="pf-v6-c-button__icon">
5641
- <i
5642
- class="fas fa-angle-right"
5904
+ <svg
5905
+ class="pf-v6-svg"
5906
+ viewBox="0 0 256 512"
5907
+ fill="currentColor"
5643
5908
  aria-hidden="true"
5644
- ></i>
5909
+ role="img"
5910
+ width="1em"
5911
+ height="1em"
5912
+ >
5913
+ <path
5914
+ d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
5915
+ />
5916
+ </svg>
5645
5917
  </span>
5646
5918
  </button>
5647
5919
  </div>
@@ -6163,20 +6435,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
6163
6435
  <button
6164
6436
  class="pf-v6-c-button pf-m-circle pf-m-plain"
6165
6437
  type="button"
6166
- aria-label="Help"
6438
+ aria-label="Notifications"
6167
6439
  >
6168
6440
  <span class="pf-v6-c-button__icon">
6169
6441
  <svg
6170
6442
  class="pf-v6-svg"
6171
- viewBox="0 0 512 512"
6443
+ viewBox="0 0 32 32"
6172
6444
  fill="currentColor"
6445
+ aria-hidden="true"
6173
6446
  role="img"
6174
6447
  width="1em"
6175
6448
  height="1em"
6176
- aria-hidden="true"
6177
6449
  >
6178
6450
  <path
6179
- d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
6451
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.885-3.523-8.955-8.159-9.823.405-.445.659-1.03.659-1.677C18.5 2.122 17.379 1 16 1s-2.5 1.122-2.5 2.5c0 .647.254 1.233.659 1.677C9.523 6.045 6 10.115 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1Zm-1 4H5v-2.126A4.006 4.006 0 0 0 8 19v-4c0-4.411 3.589-8 8-8s8 3.589 8 8v4a4.008 4.008 0 0 0 3 3.874V25Z"
6180
6452
  />
6181
6453
  </svg>
6182
6454
  </span>
@@ -6186,20 +6458,43 @@ This demo showcases how you can position a side-panel drawer on top of the other
6186
6458
  <button
6187
6459
  class="pf-v6-c-button pf-m-circle pf-m-plain"
6188
6460
  type="button"
6189
- aria-label="User profile"
6461
+ aria-label="List"
6190
6462
  >
6191
6463
  <span class="pf-v6-c-button__icon">
6192
6464
  <svg
6193
6465
  class="pf-v6-svg"
6194
- viewBox="0 0 448 512"
6466
+ viewBox="0 0 32 32"
6195
6467
  fill="currentColor"
6468
+ aria-hidden="true"
6196
6469
  role="img"
6197
6470
  width="1em"
6198
6471
  height="1em"
6472
+ >
6473
+ <path
6474
+ d="M31 16a1 1 0 0 1-1 1H9a1 1 0 0 1 0-2h21a1 1 0 0 1 1 1Zm-1 9H9a1 1 0 0 0 0 2h21a1 1 0 0 0 0-2ZM9 7h21a1 1 0 0 0 0-2H9a1 1 0 0 0 0 2ZM2 4.51a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 4.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 14.51Zm0 10a1.5 1.5 0 1 0 .001 3.001A1.5 1.5 0 0 0 2 24.51Z"
6475
+ />
6476
+ </svg>
6477
+ </span>
6478
+ </button>
6479
+ </div>
6480
+ <div class="pf-v6-c-action-list__item">
6481
+ <button
6482
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
6483
+ type="button"
6484
+ aria-label="Zap"
6485
+ >
6486
+ <span class="pf-v6-c-button__icon">
6487
+ <svg
6488
+ class="pf-v6-svg"
6489
+ viewBox="0 0 32 32"
6490
+ fill="currentColor"
6199
6491
  aria-hidden="true"
6492
+ role="img"
6493
+ width="1em"
6494
+ height="1em"
6200
6495
  >
6201
6496
  <path
6202
- d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
6497
+ d="M15 31a1 1 0 0 1-1-1V19h-4a.999.999 0 0 1-.916-1.401l7-16A1 1 0 0 1 18 2v11h4a.999.999 0 0 1 .916 1.401l-7 16A.998.998 0 0 1 15 31Zm-3.471-14H14.5c.827 0 1.5.673 1.5 1.5v6.719L20.471 15H17.5c-.827 0-1.5-.673-1.5-1.5V6.781L11.529 17Z"
6203
6498
  />
6204
6499
  </svg>
6205
6500
  </span>
@@ -6209,20 +6504,43 @@ This demo showcases how you can position a side-panel drawer on top of the other
6209
6504
  <button
6210
6505
  class="pf-v6-c-button pf-m-circle pf-m-plain"
6211
6506
  type="button"
6212
- aria-label="Send"
6507
+ aria-label="Download"
6213
6508
  >
6214
6509
  <span class="pf-v6-c-button__icon">
6215
6510
  <svg
6216
6511
  class="pf-v6-svg"
6217
- viewBox="0 0 512 512"
6512
+ viewBox="0 0 32 32"
6218
6513
  fill="currentColor"
6514
+ aria-hidden="true"
6219
6515
  role="img"
6220
6516
  width="1em"
6221
6517
  height="1em"
6518
+ >
6519
+ <path
6520
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 0 1 0-2h26a1 1 0 0 1 1 1Zm-15.061-4.646c.292.292.676.438 1.061.438s.768-.146 1.061-.438l8.646-8.646a.999.999 0 1 0-1.414-1.414L17 21.587V3a1 1 0 0 0-2 0v18.586l-7.293-7.293a.999.999 0 1 0-1.414 1.414l8.646 8.646Z"
6521
+ />
6522
+ </svg>
6523
+ </span>
6524
+ </button>
6525
+ </div>
6526
+ <div class="pf-v6-c-action-list__item">
6527
+ <button
6528
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
6529
+ type="button"
6530
+ aria-label="Help"
6531
+ >
6532
+ <span class="pf-v6-c-button__icon">
6533
+ <svg
6534
+ class="pf-v6-svg"
6535
+ viewBox="0 0 32 32"
6536
+ fill="currentColor"
6222
6537
  aria-hidden="true"
6538
+ role="img"
6539
+ width="1em"
6540
+ height="1em"
6223
6541
  >
6224
6542
  <path
6225
- d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
6543
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
6226
6544
  />
6227
6545
  </svg>
6228
6546
  </span>
@@ -6245,7 +6563,19 @@ This demo showcases how you can position a side-panel drawer on top of the other
6245
6563
  aria-label="Close drawer panel"
6246
6564
  >
6247
6565
  <span class="pf-v6-c-button__icon">
6248
- <i class="fas fa-times" aria-hidden="true"></i>
6566
+ <svg
6567
+ class="pf-v6-svg"
6568
+ viewBox="0 0 352 512"
6569
+ fill="currentColor"
6570
+ aria-hidden="true"
6571
+ role="img"
6572
+ width="1em"
6573
+ height="1em"
6574
+ >
6575
+ <path
6576
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
6577
+ />
6578
+ </svg>
6249
6579
  </span>
6250
6580
  </button>
6251
6581
  </div>