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

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 (24) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +2 -2
  3. package/components/ClipboardCopy/clipboard-copy.css +2 -2
  4. package/components/ClipboardCopy/clipboard-copy.scss +2 -2
  5. package/components/Compass/compass.css +5 -5
  6. package/components/Compass/compass.scss +5 -4
  7. package/components/FormControl/form-control.css +2 -2
  8. package/components/FormControl/form-control.scss +2 -2
  9. package/components/MenuToggle/menu-toggle.css +1 -1
  10. package/components/MenuToggle/menu-toggle.scss +1 -1
  11. package/components/Switch/switch.css +1 -1
  12. package/components/Switch/switch.scss +1 -1
  13. package/components/TextInputGroup/text-input-group.css +2 -2
  14. package/components/TextInputGroup/text-input-group.scss +2 -2
  15. package/components/ToggleGroup/toggle-group.css +1 -1
  16. package/components/ToggleGroup/toggle-group.scss +1 -1
  17. package/components/_index.css +16 -16
  18. package/docs/components/Compass/examples/Compass.md +1 -0
  19. package/docs/demos/Compass/examples/Compass.md +366 -330
  20. package/package.json +2 -2
  21. package/patternfly-no-globals.css +16 -16
  22. package/patternfly.css +16 -16
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -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>
@@ -266,27 +248,16 @@ This demo populates the main Compass section with a card view, which is one of t
266
248
  >
267
249
  <span class="pf-v6-c-button__icon">
268
250
  <svg
269
- fill="none"
270
- width="1em"
271
- height="1em"
272
251
  class="pf-v6-svg"
273
- viewBox="0 0 20 20"
274
- xmlns="http://www.w3.org/2000/svg"
252
+ viewBox="0 0 32 32"
253
+ fill="currentColor"
275
254
  aria-hidden="true"
255
+ role="img"
256
+ width="1em"
257
+ height="1em"
276
258
  >
277
259
  <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"
260
+ 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
261
  />
291
262
  </svg>
292
263
  </span>
@@ -442,15 +413,15 @@ This demo populates the main Compass section with a card view, which is one of t
442
413
  <span class="pf-v6-c-button__icon">
443
414
  <svg
444
415
  class="pf-v6-svg"
445
- viewBox="0 0 448 512"
416
+ viewBox="0 0 32 32"
446
417
  fill="currentColor"
418
+ aria-hidden="true"
447
419
  role="img"
448
420
  width="1em"
449
421
  height="1em"
450
- aria-hidden="true"
451
422
  >
452
423
  <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"
424
+ 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
425
  />
455
426
  </svg>
456
427
  </span>
@@ -460,20 +431,20 @@ This demo populates the main Compass section with a card view, which is one of t
460
431
  <button
461
432
  class="pf-v6-c-button pf-m-circle pf-m-plain"
462
433
  type="button"
463
- aria-label="Help"
434
+ aria-label="Collections"
464
435
  >
465
436
  <span class="pf-v6-c-button__icon">
466
437
  <svg
467
438
  class="pf-v6-svg"
468
- viewBox="0 0 512 512"
439
+ viewBox="0 0 32 32"
469
440
  fill="currentColor"
441
+ aria-hidden="true"
470
442
  role="img"
471
443
  width="1em"
472
444
  height="1em"
473
- aria-hidden="true"
474
445
  >
475
446
  <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"
447
+ 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
448
  />
478
449
  </svg>
479
450
  </span>
@@ -487,26 +458,17 @@ This demo populates the main Compass section with a card view, which is one of t
487
458
  >
488
459
  <span class="pf-v6-c-button__icon">
489
460
  <svg
461
+ class="pf-v6-svg"
462
+ viewBox="0 0 32 32"
490
463
  fill="currentColor"
464
+ aria-hidden="true"
465
+ role="img"
491
466
  width="1em"
492
467
  height="1em"
493
- viewBox="0 0 32 32"
494
- style="translate: .05em .1em; scale: 1.1"
495
- aria-hidden="true"
496
468
  >
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>
469
+ <path
470
+ 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"
471
+ />
510
472
  </svg>
511
473
  </span>
512
474
  </button>
@@ -515,20 +477,20 @@ This demo populates the main Compass section with a card view, which is one of t
515
477
  <button
516
478
  class="pf-v6-c-button pf-m-circle pf-m-plain"
517
479
  type="button"
518
- aria-label="User profile"
480
+ aria-label="Volume"
519
481
  >
520
482
  <span class="pf-v6-c-button__icon">
521
483
  <svg
522
484
  class="pf-v6-svg"
523
- viewBox="0 0 448 512"
485
+ viewBox="0 0 32 32"
524
486
  fill="currentColor"
487
+ aria-hidden="true"
525
488
  role="img"
526
489
  width="1em"
527
490
  height="1em"
528
- aria-hidden="true"
529
491
  >
530
492
  <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"
493
+ 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
494
  />
533
495
  </svg>
534
496
  </span>
@@ -538,20 +500,20 @@ This demo populates the main Compass section with a card view, which is one of t
538
500
  <button
539
501
  class="pf-v6-c-button pf-m-circle pf-m-plain"
540
502
  type="button"
541
- aria-label="Send"
503
+ aria-label="Use microphone"
542
504
  >
543
505
  <span class="pf-v6-c-button__icon">
544
506
  <svg
545
507
  class="pf-v6-svg"
546
- viewBox="0 0 512 512"
508
+ viewBox="0 0 32 32"
547
509
  fill="currentColor"
510
+ aria-hidden="true"
548
511
  role="img"
549
512
  width="1em"
550
513
  height="1em"
551
- aria-hidden="true"
552
514
  >
553
515
  <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"
516
+ 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
517
  />
556
518
  </svg>
557
519
  </span>
@@ -1252,20 +1214,20 @@ This demo populates the main Compass section with a card view, which is one of t
1252
1214
  <button
1253
1215
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1254
1216
  type="button"
1255
- aria-label="Help"
1217
+ aria-label="Notifications"
1256
1218
  >
1257
1219
  <span class="pf-v6-c-button__icon">
1258
1220
  <svg
1259
1221
  class="pf-v6-svg"
1260
- viewBox="0 0 512 512"
1222
+ viewBox="0 0 32 32"
1261
1223
  fill="currentColor"
1224
+ aria-hidden="true"
1262
1225
  role="img"
1263
1226
  width="1em"
1264
1227
  height="1em"
1265
- aria-hidden="true"
1266
1228
  >
1267
1229
  <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"
1230
+ 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
1231
  />
1270
1232
  </svg>
1271
1233
  </span>
@@ -1275,20 +1237,43 @@ This demo populates the main Compass section with a card view, which is one of t
1275
1237
  <button
1276
1238
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1277
1239
  type="button"
1278
- aria-label="User profile"
1240
+ aria-label="List"
1279
1241
  >
1280
1242
  <span class="pf-v6-c-button__icon">
1281
1243
  <svg
1282
1244
  class="pf-v6-svg"
1283
- viewBox="0 0 448 512"
1245
+ viewBox="0 0 32 32"
1284
1246
  fill="currentColor"
1247
+ aria-hidden="true"
1285
1248
  role="img"
1286
1249
  width="1em"
1287
1250
  height="1em"
1251
+ >
1252
+ <path
1253
+ 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"
1254
+ />
1255
+ </svg>
1256
+ </span>
1257
+ </button>
1258
+ </div>
1259
+ <div class="pf-v6-c-action-list__item">
1260
+ <button
1261
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1262
+ type="button"
1263
+ aria-label="Zap"
1264
+ >
1265
+ <span class="pf-v6-c-button__icon">
1266
+ <svg
1267
+ class="pf-v6-svg"
1268
+ viewBox="0 0 32 32"
1269
+ fill="currentColor"
1288
1270
  aria-hidden="true"
1271
+ role="img"
1272
+ width="1em"
1273
+ height="1em"
1289
1274
  >
1290
1275
  <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"
1276
+ 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
1277
  />
1293
1278
  </svg>
1294
1279
  </span>
@@ -1298,20 +1283,43 @@ This demo populates the main Compass section with a card view, which is one of t
1298
1283
  <button
1299
1284
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1300
1285
  type="button"
1301
- aria-label="Send"
1286
+ aria-label="Download"
1302
1287
  >
1303
1288
  <span class="pf-v6-c-button__icon">
1304
1289
  <svg
1305
1290
  class="pf-v6-svg"
1306
- viewBox="0 0 512 512"
1291
+ viewBox="0 0 32 32"
1307
1292
  fill="currentColor"
1293
+ aria-hidden="true"
1308
1294
  role="img"
1309
1295
  width="1em"
1310
1296
  height="1em"
1297
+ >
1298
+ <path
1299
+ 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"
1300
+ />
1301
+ </svg>
1302
+ </span>
1303
+ </button>
1304
+ </div>
1305
+ <div class="pf-v6-c-action-list__item">
1306
+ <button
1307
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1308
+ type="button"
1309
+ aria-label="Help"
1310
+ >
1311
+ <span class="pf-v6-c-button__icon">
1312
+ <svg
1313
+ class="pf-v6-svg"
1314
+ viewBox="0 0 32 32"
1315
+ fill="currentColor"
1311
1316
  aria-hidden="true"
1317
+ role="img"
1318
+ width="1em"
1319
+ height="1em"
1312
1320
  >
1313
1321
  <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"
1322
+ 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
1323
  />
1316
1324
  </svg>
1317
1325
  </span>
@@ -1442,41 +1450,23 @@ This demo populates the main Compass section with a dashboard, which is often us
1442
1450
  >
1443
1451
  <span class="pf-v6-c-button__icon">
1444
1452
  <svg
1445
- fill="none"
1446
- width="1em"
1447
- height="1em"
1448
1453
  class="pf-v6-svg"
1449
- viewBox="0 0 20 20"
1450
- xmlns="http://www.w3.org/2000/svg"
1454
+ viewBox="0 0 32 32"
1455
+ fill="currentColor"
1451
1456
  aria-hidden="true"
1457
+ role="img"
1458
+ width="1em"
1459
+ height="1em"
1452
1460
  >
1453
1461
  <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"
1462
+ 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
1463
  />
1474
1464
  </svg>
1475
1465
  </span>
1476
1466
  </button>
1477
1467
  </div>
1478
1468
  <div class="pf-v6-c-compass__nav-main">
1479
- <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Primary nav">
1469
+ <nav class="pf-v6-c-tabs pf-m-nav" aria-label="Compass primary">
1480
1470
  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1481
1471
  <button
1482
1472
  class="pf-v6-c-button pf-m-small pf-m-plain"
@@ -1489,7 +1479,11 @@ This demo populates the main Compass section with a dashboard, which is often us
1489
1479
  </span>
1490
1480
  </button>
1491
1481
  </div>
1492
- <ul class="pf-v6-c-tabs__list" role="tablist">
1482
+ <ul
1483
+ class="pf-v6-c-tabs__list"
1484
+ role="tablist"
1485
+ aria-label="Compass primary"
1486
+ >
1493
1487
  <li class="pf-v6-c-tabs__item" role="presentation">
1494
1488
  <a
1495
1489
  class="pf-v6-c-tabs__link"
@@ -1581,27 +1575,16 @@ This demo populates the main Compass section with a dashboard, which is often us
1581
1575
  >
1582
1576
  <span class="pf-v6-c-button__icon">
1583
1577
  <svg
1584
- fill="none"
1585
- width="1em"
1586
- height="1em"
1587
1578
  class="pf-v6-svg"
1588
- viewBox="0 0 20 20"
1589
- xmlns="http://www.w3.org/2000/svg"
1579
+ viewBox="0 0 32 32"
1580
+ fill="currentColor"
1590
1581
  aria-hidden="true"
1582
+ role="img"
1583
+ width="1em"
1584
+ height="1em"
1591
1585
  >
1592
1586
  <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"
1587
+ 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
1588
  />
1606
1589
  </svg>
1607
1590
  </span>
@@ -1757,15 +1740,15 @@ This demo populates the main Compass section with a dashboard, which is often us
1757
1740
  <span class="pf-v6-c-button__icon">
1758
1741
  <svg
1759
1742
  class="pf-v6-svg"
1760
- viewBox="0 0 448 512"
1743
+ viewBox="0 0 32 32"
1761
1744
  fill="currentColor"
1745
+ aria-hidden="true"
1762
1746
  role="img"
1763
1747
  width="1em"
1764
1748
  height="1em"
1765
- aria-hidden="true"
1766
1749
  >
1767
1750
  <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"
1751
+ 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
1752
  />
1770
1753
  </svg>
1771
1754
  </span>
@@ -1775,20 +1758,20 @@ This demo populates the main Compass section with a dashboard, which is often us
1775
1758
  <button
1776
1759
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1777
1760
  type="button"
1778
- aria-label="Help"
1761
+ aria-label="Collections"
1779
1762
  >
1780
1763
  <span class="pf-v6-c-button__icon">
1781
1764
  <svg
1782
1765
  class="pf-v6-svg"
1783
- viewBox="0 0 512 512"
1766
+ viewBox="0 0 32 32"
1784
1767
  fill="currentColor"
1768
+ aria-hidden="true"
1785
1769
  role="img"
1786
1770
  width="1em"
1787
1771
  height="1em"
1788
- aria-hidden="true"
1789
1772
  >
1790
1773
  <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"
1774
+ 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
1775
  />
1793
1776
  </svg>
1794
1777
  </span>
@@ -1802,26 +1785,17 @@ This demo populates the main Compass section with a dashboard, which is often us
1802
1785
  >
1803
1786
  <span class="pf-v6-c-button__icon">
1804
1787
  <svg
1788
+ class="pf-v6-svg"
1789
+ viewBox="0 0 32 32"
1805
1790
  fill="currentColor"
1791
+ aria-hidden="true"
1792
+ role="img"
1806
1793
  width="1em"
1807
1794
  height="1em"
1808
- viewBox="0 0 32 32"
1809
- style="translate: .05em .1em; scale: 1.1"
1810
- aria-hidden="true"
1811
1795
  >
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>
1796
+ <path
1797
+ 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"
1798
+ />
1825
1799
  </svg>
1826
1800
  </span>
1827
1801
  </button>
@@ -1830,20 +1804,20 @@ This demo populates the main Compass section with a dashboard, which is often us
1830
1804
  <button
1831
1805
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1832
1806
  type="button"
1833
- aria-label="User profile"
1807
+ aria-label="Volume"
1834
1808
  >
1835
1809
  <span class="pf-v6-c-button__icon">
1836
1810
  <svg
1837
1811
  class="pf-v6-svg"
1838
- viewBox="0 0 448 512"
1812
+ viewBox="0 0 32 32"
1839
1813
  fill="currentColor"
1814
+ aria-hidden="true"
1840
1815
  role="img"
1841
1816
  width="1em"
1842
1817
  height="1em"
1843
- aria-hidden="true"
1844
1818
  >
1845
1819
  <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"
1820
+ 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
1821
  />
1848
1822
  </svg>
1849
1823
  </span>
@@ -1853,20 +1827,20 @@ This demo populates the main Compass section with a dashboard, which is often us
1853
1827
  <button
1854
1828
  class="pf-v6-c-button pf-m-circle pf-m-plain"
1855
1829
  type="button"
1856
- aria-label="Send"
1830
+ aria-label="Use microphone"
1857
1831
  >
1858
1832
  <span class="pf-v6-c-button__icon">
1859
1833
  <svg
1860
1834
  class="pf-v6-svg"
1861
- viewBox="0 0 512 512"
1835
+ viewBox="0 0 32 32"
1862
1836
  fill="currentColor"
1837
+ aria-hidden="true"
1863
1838
  role="img"
1864
1839
  width="1em"
1865
1840
  height="1em"
1866
- aria-hidden="true"
1867
1841
  >
1868
1842
  <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"
1843
+ 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
1844
  />
1871
1845
  </svg>
1872
1846
  </span>
@@ -2793,20 +2767,20 @@ This demo populates the main Compass section with a dashboard, which is often us
2793
2767
  <button
2794
2768
  class="pf-v6-c-button pf-m-circle pf-m-plain"
2795
2769
  type="button"
2796
- aria-label="Help"
2770
+ aria-label="Notifications"
2797
2771
  >
2798
2772
  <span class="pf-v6-c-button__icon">
2799
2773
  <svg
2800
2774
  class="pf-v6-svg"
2801
- viewBox="0 0 512 512"
2775
+ viewBox="0 0 32 32"
2802
2776
  fill="currentColor"
2777
+ aria-hidden="true"
2803
2778
  role="img"
2804
2779
  width="1em"
2805
2780
  height="1em"
2806
- aria-hidden="true"
2807
2781
  >
2808
2782
  <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"
2783
+ 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
2784
  />
2811
2785
  </svg>
2812
2786
  </span>
@@ -2816,20 +2790,43 @@ This demo populates the main Compass section with a dashboard, which is often us
2816
2790
  <button
2817
2791
  class="pf-v6-c-button pf-m-circle pf-m-plain"
2818
2792
  type="button"
2819
- aria-label="User profile"
2793
+ aria-label="List"
2820
2794
  >
2821
2795
  <span class="pf-v6-c-button__icon">
2822
2796
  <svg
2823
2797
  class="pf-v6-svg"
2824
- viewBox="0 0 448 512"
2798
+ viewBox="0 0 32 32"
2825
2799
  fill="currentColor"
2800
+ aria-hidden="true"
2826
2801
  role="img"
2827
2802
  width="1em"
2828
2803
  height="1em"
2804
+ >
2805
+ <path
2806
+ 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"
2807
+ />
2808
+ </svg>
2809
+ </span>
2810
+ </button>
2811
+ </div>
2812
+ <div class="pf-v6-c-action-list__item">
2813
+ <button
2814
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2815
+ type="button"
2816
+ aria-label="Zap"
2817
+ >
2818
+ <span class="pf-v6-c-button__icon">
2819
+ <svg
2820
+ class="pf-v6-svg"
2821
+ viewBox="0 0 32 32"
2822
+ fill="currentColor"
2829
2823
  aria-hidden="true"
2824
+ role="img"
2825
+ width="1em"
2826
+ height="1em"
2830
2827
  >
2831
2828
  <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"
2829
+ 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
2830
  />
2834
2831
  </svg>
2835
2832
  </span>
@@ -2839,20 +2836,43 @@ This demo populates the main Compass section with a dashboard, which is often us
2839
2836
  <button
2840
2837
  class="pf-v6-c-button pf-m-circle pf-m-plain"
2841
2838
  type="button"
2842
- aria-label="Send"
2839
+ aria-label="Download"
2843
2840
  >
2844
2841
  <span class="pf-v6-c-button__icon">
2845
2842
  <svg
2846
2843
  class="pf-v6-svg"
2847
- viewBox="0 0 512 512"
2844
+ viewBox="0 0 32 32"
2848
2845
  fill="currentColor"
2846
+ aria-hidden="true"
2849
2847
  role="img"
2850
2848
  width="1em"
2851
2849
  height="1em"
2850
+ >
2851
+ <path
2852
+ 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"
2853
+ />
2854
+ </svg>
2855
+ </span>
2856
+ </button>
2857
+ </div>
2858
+ <div class="pf-v6-c-action-list__item">
2859
+ <button
2860
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2861
+ type="button"
2862
+ aria-label="Help"
2863
+ >
2864
+ <span class="pf-v6-c-button__icon">
2865
+ <svg
2866
+ class="pf-v6-svg"
2867
+ viewBox="0 0 32 32"
2868
+ fill="currentColor"
2852
2869
  aria-hidden="true"
2870
+ role="img"
2871
+ width="1em"
2872
+ height="1em"
2853
2873
  >
2854
2874
  <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"
2875
+ 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
2876
  />
2857
2877
  </svg>
2858
2878
  </span>
@@ -2982,34 +3002,16 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
2982
3002
  >
2983
3003
  <span class="pf-v6-c-button__icon">
2984
3004
  <svg
2985
- fill="none"
2986
- width="1em"
2987
- height="1em"
2988
3005
  class="pf-v6-svg"
2989
- viewBox="0 0 20 20"
2990
- xmlns="http://www.w3.org/2000/svg"
3006
+ viewBox="0 0 32 32"
3007
+ fill="currentColor"
2991
3008
  aria-hidden="true"
3009
+ role="img"
3010
+ width="1em"
3011
+ height="1em"
2992
3012
  >
2993
3013
  <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"
3014
+ 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
3015
  />
3014
3016
  </svg>
3015
3017
  </span>
@@ -3125,27 +3127,16 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3125
3127
  >
3126
3128
  <span class="pf-v6-c-button__icon">
3127
3129
  <svg
3128
- fill="none"
3129
- width="1em"
3130
- height="1em"
3131
3130
  class="pf-v6-svg"
3132
- viewBox="0 0 20 20"
3133
- xmlns="http://www.w3.org/2000/svg"
3131
+ viewBox="0 0 32 32"
3132
+ fill="currentColor"
3134
3133
  aria-hidden="true"
3134
+ role="img"
3135
+ width="1em"
3136
+ height="1em"
3135
3137
  >
3136
3138
  <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"
3139
+ 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
3140
  />
3150
3141
  </svg>
3151
3142
  </span>
@@ -3301,15 +3292,15 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3301
3292
  <span class="pf-v6-c-button__icon">
3302
3293
  <svg
3303
3294
  class="pf-v6-svg"
3304
- viewBox="0 0 448 512"
3295
+ viewBox="0 0 32 32"
3305
3296
  fill="currentColor"
3297
+ aria-hidden="true"
3306
3298
  role="img"
3307
3299
  width="1em"
3308
3300
  height="1em"
3309
- aria-hidden="true"
3310
3301
  >
3311
3302
  <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"
3303
+ 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
3304
  />
3314
3305
  </svg>
3315
3306
  </span>
@@ -3319,20 +3310,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3319
3310
  <button
3320
3311
  class="pf-v6-c-button pf-m-circle pf-m-plain"
3321
3312
  type="button"
3322
- aria-label="Help"
3313
+ aria-label="Collections"
3323
3314
  >
3324
3315
  <span class="pf-v6-c-button__icon">
3325
3316
  <svg
3326
3317
  class="pf-v6-svg"
3327
- viewBox="0 0 512 512"
3318
+ viewBox="0 0 32 32"
3328
3319
  fill="currentColor"
3320
+ aria-hidden="true"
3329
3321
  role="img"
3330
3322
  width="1em"
3331
3323
  height="1em"
3332
- aria-hidden="true"
3333
3324
  >
3334
3325
  <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"
3326
+ 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
3327
  />
3337
3328
  </svg>
3338
3329
  </span>
@@ -3346,26 +3337,17 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3346
3337
  >
3347
3338
  <span class="pf-v6-c-button__icon">
3348
3339
  <svg
3340
+ class="pf-v6-svg"
3341
+ viewBox="0 0 32 32"
3349
3342
  fill="currentColor"
3343
+ aria-hidden="true"
3344
+ role="img"
3350
3345
  width="1em"
3351
3346
  height="1em"
3352
- viewBox="0 0 32 32"
3353
- style="translate: .05em .1em; scale: 1.1"
3354
- aria-hidden="true"
3355
3347
  >
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>
3348
+ <path
3349
+ 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"
3350
+ />
3369
3351
  </svg>
3370
3352
  </span>
3371
3353
  </button>
@@ -3374,20 +3356,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3374
3356
  <button
3375
3357
  class="pf-v6-c-button pf-m-circle pf-m-plain"
3376
3358
  type="button"
3377
- aria-label="User profile"
3359
+ aria-label="Volume"
3378
3360
  >
3379
3361
  <span class="pf-v6-c-button__icon">
3380
3362
  <svg
3381
3363
  class="pf-v6-svg"
3382
- viewBox="0 0 448 512"
3364
+ viewBox="0 0 32 32"
3383
3365
  fill="currentColor"
3366
+ aria-hidden="true"
3384
3367
  role="img"
3385
3368
  width="1em"
3386
3369
  height="1em"
3387
- aria-hidden="true"
3388
3370
  >
3389
3371
  <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"
3372
+ 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
3373
  />
3392
3374
  </svg>
3393
3375
  </span>
@@ -3397,20 +3379,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
3397
3379
  <button
3398
3380
  class="pf-v6-c-button pf-m-circle pf-m-plain"
3399
3381
  type="button"
3400
- aria-label="Send"
3382
+ aria-label="Use microphone"
3401
3383
  >
3402
3384
  <span class="pf-v6-c-button__icon">
3403
3385
  <svg
3404
3386
  class="pf-v6-svg"
3405
- viewBox="0 0 512 512"
3387
+ viewBox="0 0 32 32"
3406
3388
  fill="currentColor"
3389
+ aria-hidden="true"
3407
3390
  role="img"
3408
3391
  width="1em"
3409
3392
  height="1em"
3410
- aria-hidden="true"
3411
3393
  >
3412
3394
  <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"
3395
+ 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
3396
  />
3415
3397
  </svg>
3416
3398
  </span>
@@ -4784,20 +4766,20 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4784
4766
  <button
4785
4767
  class="pf-v6-c-button pf-m-circle pf-m-plain"
4786
4768
  type="button"
4787
- aria-label="Help"
4769
+ aria-label="Notifications"
4788
4770
  >
4789
4771
  <span class="pf-v6-c-button__icon">
4790
4772
  <svg
4791
4773
  class="pf-v6-svg"
4792
- viewBox="0 0 512 512"
4774
+ viewBox="0 0 32 32"
4793
4775
  fill="currentColor"
4776
+ aria-hidden="true"
4794
4777
  role="img"
4795
4778
  width="1em"
4796
4779
  height="1em"
4797
- aria-hidden="true"
4798
4780
  >
4799
4781
  <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"
4782
+ 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
4783
  />
4802
4784
  </svg>
4803
4785
  </span>
@@ -4807,20 +4789,43 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4807
4789
  <button
4808
4790
  class="pf-v6-c-button pf-m-circle pf-m-plain"
4809
4791
  type="button"
4810
- aria-label="User profile"
4792
+ aria-label="List"
4811
4793
  >
4812
4794
  <span class="pf-v6-c-button__icon">
4813
4795
  <svg
4814
4796
  class="pf-v6-svg"
4815
- viewBox="0 0 448 512"
4797
+ viewBox="0 0 32 32"
4816
4798
  fill="currentColor"
4799
+ aria-hidden="true"
4817
4800
  role="img"
4818
4801
  width="1em"
4819
4802
  height="1em"
4803
+ >
4804
+ <path
4805
+ 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"
4806
+ />
4807
+ </svg>
4808
+ </span>
4809
+ </button>
4810
+ </div>
4811
+ <div class="pf-v6-c-action-list__item">
4812
+ <button
4813
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4814
+ type="button"
4815
+ aria-label="Zap"
4816
+ >
4817
+ <span class="pf-v6-c-button__icon">
4818
+ <svg
4819
+ class="pf-v6-svg"
4820
+ viewBox="0 0 32 32"
4821
+ fill="currentColor"
4820
4822
  aria-hidden="true"
4823
+ role="img"
4824
+ width="1em"
4825
+ height="1em"
4821
4826
  >
4822
4827
  <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"
4828
+ 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
4829
  />
4825
4830
  </svg>
4826
4831
  </span>
@@ -4830,20 +4835,43 @@ Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rou
4830
4835
  <button
4831
4836
  class="pf-v6-c-button pf-m-circle pf-m-plain"
4832
4837
  type="button"
4833
- aria-label="Send"
4838
+ aria-label="Download"
4834
4839
  >
4835
4840
  <span class="pf-v6-c-button__icon">
4836
4841
  <svg
4837
4842
  class="pf-v6-svg"
4838
- viewBox="0 0 512 512"
4843
+ viewBox="0 0 32 32"
4839
4844
  fill="currentColor"
4845
+ aria-hidden="true"
4840
4846
  role="img"
4841
4847
  width="1em"
4842
4848
  height="1em"
4849
+ >
4850
+ <path
4851
+ 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"
4852
+ />
4853
+ </svg>
4854
+ </span>
4855
+ </button>
4856
+ </div>
4857
+ <div class="pf-v6-c-action-list__item">
4858
+ <button
4859
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4860
+ type="button"
4861
+ aria-label="Help"
4862
+ >
4863
+ <span class="pf-v6-c-button__icon">
4864
+ <svg
4865
+ class="pf-v6-svg"
4866
+ viewBox="0 0 32 32"
4867
+ fill="currentColor"
4843
4868
  aria-hidden="true"
4869
+ role="img"
4870
+ width="1em"
4871
+ height="1em"
4844
4872
  >
4845
4873
  <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"
4874
+ 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
4875
  />
4848
4876
  </svg>
4849
4877
  </span>
@@ -4975,34 +5003,16 @@ This demo showcases how you can position a side-panel drawer on top of the other
4975
5003
  >
4976
5004
  <span class="pf-v6-c-button__icon">
4977
5005
  <svg
4978
- fill="none"
4979
- width="1em"
4980
- height="1em"
4981
5006
  class="pf-v6-svg"
4982
- viewBox="0 0 20 20"
4983
- xmlns="http://www.w3.org/2000/svg"
5007
+ viewBox="0 0 32 32"
5008
+ fill="currentColor"
4984
5009
  aria-hidden="true"
5010
+ role="img"
5011
+ width="1em"
5012
+ height="1em"
4985
5013
  >
4986
5014
  <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"
5015
+ 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
5016
  />
5007
5017
  </svg>
5008
5018
  </span>
@@ -5130,27 +5140,16 @@ This demo showcases how you can position a side-panel drawer on top of the other
5130
5140
  >
5131
5141
  <span class="pf-v6-c-button__icon">
5132
5142
  <svg
5133
- fill="none"
5134
- width="1em"
5135
- height="1em"
5136
5143
  class="pf-v6-svg"
5137
- viewBox="0 0 20 20"
5138
- xmlns="http://www.w3.org/2000/svg"
5144
+ viewBox="0 0 32 32"
5145
+ fill="currentColor"
5139
5146
  aria-hidden="true"
5147
+ role="img"
5148
+ width="1em"
5149
+ height="1em"
5140
5150
  >
5141
5151
  <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"
5152
+ 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
5153
  />
5155
5154
  </svg>
5156
5155
  </span>
@@ -5315,15 +5314,15 @@ This demo showcases how you can position a side-panel drawer on top of the other
5315
5314
  <span class="pf-v6-c-button__icon">
5316
5315
  <svg
5317
5316
  class="pf-v6-svg"
5318
- viewBox="0 0 448 512"
5317
+ viewBox="0 0 32 32"
5319
5318
  fill="currentColor"
5319
+ aria-hidden="true"
5320
5320
  role="img"
5321
5321
  width="1em"
5322
5322
  height="1em"
5323
- aria-hidden="true"
5324
5323
  >
5325
5324
  <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"
5325
+ 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
5326
  />
5328
5327
  </svg>
5329
5328
  </span>
@@ -5333,20 +5332,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
5333
5332
  <button
5334
5333
  class="pf-v6-c-button pf-m-circle pf-m-plain"
5335
5334
  type="button"
5336
- aria-label="Help"
5335
+ aria-label="Collections"
5337
5336
  >
5338
5337
  <span class="pf-v6-c-button__icon">
5339
5338
  <svg
5340
5339
  class="pf-v6-svg"
5341
- viewBox="0 0 512 512"
5340
+ viewBox="0 0 32 32"
5342
5341
  fill="currentColor"
5342
+ aria-hidden="true"
5343
5343
  role="img"
5344
5344
  width="1em"
5345
5345
  height="1em"
5346
- aria-hidden="true"
5347
5346
  >
5348
5347
  <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"
5348
+ 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
5349
  />
5351
5350
  </svg>
5352
5351
  </span>
@@ -5360,26 +5359,17 @@ This demo showcases how you can position a side-panel drawer on top of the other
5360
5359
  >
5361
5360
  <span class="pf-v6-c-button__icon">
5362
5361
  <svg
5362
+ class="pf-v6-svg"
5363
+ viewBox="0 0 32 32"
5363
5364
  fill="currentColor"
5365
+ aria-hidden="true"
5366
+ role="img"
5364
5367
  width="1em"
5365
5368
  height="1em"
5366
- viewBox="0 0 32 32"
5367
- style="translate: .05em .1em; scale: 1.1"
5368
- aria-hidden="true"
5369
5369
  >
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>
5370
+ <path
5371
+ 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"
5372
+ />
5383
5373
  </svg>
5384
5374
  </span>
5385
5375
  </button>
@@ -5388,20 +5378,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
5388
5378
  <button
5389
5379
  class="pf-v6-c-button pf-m-circle pf-m-plain"
5390
5380
  type="button"
5391
- aria-label="User profile"
5381
+ aria-label="Volume"
5392
5382
  >
5393
5383
  <span class="pf-v6-c-button__icon">
5394
5384
  <svg
5395
5385
  class="pf-v6-svg"
5396
- viewBox="0 0 448 512"
5386
+ viewBox="0 0 32 32"
5397
5387
  fill="currentColor"
5388
+ aria-hidden="true"
5398
5389
  role="img"
5399
5390
  width="1em"
5400
5391
  height="1em"
5401
- aria-hidden="true"
5402
5392
  >
5403
5393
  <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"
5394
+ 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
5395
  />
5406
5396
  </svg>
5407
5397
  </span>
@@ -5411,20 +5401,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
5411
5401
  <button
5412
5402
  class="pf-v6-c-button pf-m-circle pf-m-plain"
5413
5403
  type="button"
5414
- aria-label="Send"
5404
+ aria-label="Use microphone"
5415
5405
  >
5416
5406
  <span class="pf-v6-c-button__icon">
5417
5407
  <svg
5418
5408
  class="pf-v6-svg"
5419
- viewBox="0 0 512 512"
5409
+ viewBox="0 0 32 32"
5420
5410
  fill="currentColor"
5411
+ aria-hidden="true"
5421
5412
  role="img"
5422
5413
  width="1em"
5423
5414
  height="1em"
5424
- aria-hidden="true"
5425
5415
  >
5426
5416
  <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"
5417
+ 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
5418
  />
5429
5419
  </svg>
5430
5420
  </span>
@@ -6163,20 +6153,20 @@ This demo showcases how you can position a side-panel drawer on top of the other
6163
6153
  <button
6164
6154
  class="pf-v6-c-button pf-m-circle pf-m-plain"
6165
6155
  type="button"
6166
- aria-label="Help"
6156
+ aria-label="Notifications"
6167
6157
  >
6168
6158
  <span class="pf-v6-c-button__icon">
6169
6159
  <svg
6170
6160
  class="pf-v6-svg"
6171
- viewBox="0 0 512 512"
6161
+ viewBox="0 0 32 32"
6172
6162
  fill="currentColor"
6163
+ aria-hidden="true"
6173
6164
  role="img"
6174
6165
  width="1em"
6175
6166
  height="1em"
6176
- aria-hidden="true"
6177
6167
  >
6178
6168
  <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"
6169
+ 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
6170
  />
6181
6171
  </svg>
6182
6172
  </span>
@@ -6186,20 +6176,43 @@ This demo showcases how you can position a side-panel drawer on top of the other
6186
6176
  <button
6187
6177
  class="pf-v6-c-button pf-m-circle pf-m-plain"
6188
6178
  type="button"
6189
- aria-label="User profile"
6179
+ aria-label="List"
6190
6180
  >
6191
6181
  <span class="pf-v6-c-button__icon">
6192
6182
  <svg
6193
6183
  class="pf-v6-svg"
6194
- viewBox="0 0 448 512"
6184
+ viewBox="0 0 32 32"
6195
6185
  fill="currentColor"
6186
+ aria-hidden="true"
6196
6187
  role="img"
6197
6188
  width="1em"
6198
6189
  height="1em"
6190
+ >
6191
+ <path
6192
+ 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"
6193
+ />
6194
+ </svg>
6195
+ </span>
6196
+ </button>
6197
+ </div>
6198
+ <div class="pf-v6-c-action-list__item">
6199
+ <button
6200
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
6201
+ type="button"
6202
+ aria-label="Zap"
6203
+ >
6204
+ <span class="pf-v6-c-button__icon">
6205
+ <svg
6206
+ class="pf-v6-svg"
6207
+ viewBox="0 0 32 32"
6208
+ fill="currentColor"
6199
6209
  aria-hidden="true"
6210
+ role="img"
6211
+ width="1em"
6212
+ height="1em"
6200
6213
  >
6201
6214
  <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"
6215
+ 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
6216
  />
6204
6217
  </svg>
6205
6218
  </span>
@@ -6209,20 +6222,43 @@ This demo showcases how you can position a side-panel drawer on top of the other
6209
6222
  <button
6210
6223
  class="pf-v6-c-button pf-m-circle pf-m-plain"
6211
6224
  type="button"
6212
- aria-label="Send"
6225
+ aria-label="Download"
6213
6226
  >
6214
6227
  <span class="pf-v6-c-button__icon">
6215
6228
  <svg
6216
6229
  class="pf-v6-svg"
6217
- viewBox="0 0 512 512"
6230
+ viewBox="0 0 32 32"
6218
6231
  fill="currentColor"
6232
+ aria-hidden="true"
6219
6233
  role="img"
6220
6234
  width="1em"
6221
6235
  height="1em"
6236
+ >
6237
+ <path
6238
+ 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"
6239
+ />
6240
+ </svg>
6241
+ </span>
6242
+ </button>
6243
+ </div>
6244
+ <div class="pf-v6-c-action-list__item">
6245
+ <button
6246
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
6247
+ type="button"
6248
+ aria-label="Help"
6249
+ >
6250
+ <span class="pf-v6-c-button__icon">
6251
+ <svg
6252
+ class="pf-v6-svg"
6253
+ viewBox="0 0 32 32"
6254
+ fill="currentColor"
6222
6255
  aria-hidden="true"
6256
+ role="img"
6257
+ width="1em"
6258
+ height="1em"
6223
6259
  >
6224
6260
  <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"
6261
+ 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
6262
  />
6227
6263
  </svg>
6228
6264
  </span>