@patternfly/patternfly 6.6.0-prerelease.8 → 6.6.0

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 (66) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/pf-logo-avatar.jpg +0 -0
  8. package/base/patternfly-fonts.css +4 -4
  9. package/base/patternfly-fonts.scss +4 -4
  10. package/base/patternfly-variables.css +6 -6
  11. package/base/tokens/tokens-charts-dark.scss +1 -1
  12. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  14. package/base/tokens/tokens-charts.scss +1 -1
  15. package/base/tokens/tokens-dark.scss +1 -1
  16. package/base/tokens/tokens-default.scss +4 -4
  17. package/base/tokens/tokens-felt-dark.scss +1 -1
  18. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass.scss +1 -1
  20. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  21. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  22. package/base/tokens/tokens-felt.scss +1 -1
  23. package/base/tokens/tokens-glass-dark.scss +1 -1
  24. package/base/tokens/tokens-glass.scss +1 -1
  25. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  26. package/base/tokens/tokens-highcontrast.scss +4 -4
  27. package/base/tokens/tokens-palette.scss +1 -1
  28. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  29. package/components/Alert/alert.css +1 -0
  30. package/components/Alert/alert.scss +1 -0
  31. package/components/Avatar/avatar.css +54 -51
  32. package/components/Avatar/avatar.scss +82 -81
  33. package/components/Banner/banner.css +7 -0
  34. package/components/Banner/banner.scss +7 -0
  35. package/components/Button/button.css +15 -1
  36. package/components/Button/button.scss +17 -1
  37. package/components/DragDrop/drag-drop.css +4 -0
  38. package/components/DragDrop/drag-drop.scss +4 -0
  39. package/components/Page/page.css +7 -5
  40. package/components/Page/page.scss +9 -8
  41. package/components/Panel/panel.css +1 -1
  42. package/components/Panel/panel.scss +2 -2
  43. package/components/Table/table.css +26 -18
  44. package/components/Table/table.scss +37 -27
  45. package/components/_index.css +115 -76
  46. package/docs/components/Avatar/examples/Avatar.css +6 -0
  47. package/docs/components/Avatar/examples/Avatar.md +182 -121
  48. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  49. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  50. package/docs/components/Pagination/examples/Pagination.md +120 -120
  51. package/docs/components/Table/examples/Table.md +7 -0
  52. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  53. package/docs/demos/CardView/examples/CardView.md +12 -12
  54. package/docs/demos/Compass/examples/Compass.md +91 -35
  55. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  56. package/docs/demos/DataList/examples/DataList.md +48 -48
  57. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  58. package/docs/demos/Table/examples/Table.md +160 -160
  59. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  60. package/package.json +2 -2
  61. package/patternfly-base-no-globals.css +10 -10
  62. package/patternfly-base.css +10 -10
  63. package/patternfly-no-globals.css +125 -86
  64. package/patternfly.css +125 -86
  65. package/patternfly.min.css +1 -1
  66. package/patternfly.min.css.map +1 -1
package/docs/components/Table/examples/Table.md CHANGED
@@ -29085,6 +29085,13 @@ For sticky columns to function correctly, the parent table's width must be contr
29085
29085
  </button>
29086
29086
  </th>
29087
29087
  </tr>
29088
+ <tr
29089
+ class="pf-v6-c-table__tr pf-m-border-row"
29090
+ role="row"
29091
+ aria-hidden="true"
29092
+ >
29093
+ <td class="pf-v6-c-table__td" role="cell" colspan="6"></td>
29094
+ </tr>
29088
29095
  </thead>
29089
29096
 
29090
29097
  <tbody class="pf-v6-c-table__tbody" role="rowgroup">
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -2711,14 +2711,14 @@ Several components in the following examples do not include functional and/or ac
2711
2711
  <svg
2712
2712
  class="pf-v6-svg"
2713
2713
  fill="currentColor"
2714
- viewBox="0 0 448 512"
2714
+ viewBox="0 0 20 20"
2715
2715
  aria-hidden="true"
2716
2716
  role="img"
2717
2717
  width="1em"
2718
2718
  height="1em"
2719
2719
  >
2720
2720
  <path
2721
- d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
2721
+ d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
2722
2722
  />
2723
2723
  </svg>
2724
2724
  </span>
@@ -2735,14 +2735,14 @@ Several components in the following examples do not include functional and/or ac
2735
2735
  <svg
2736
2736
  class="pf-v6-svg"
2737
2737
  fill="currentColor"
2738
- viewBox="0 0 256 512"
2738
+ viewBox="0 0 20 20"
2739
2739
  aria-hidden="true"
2740
2740
  role="img"
2741
2741
  width="1em"
2742
2742
  height="1em"
2743
2743
  >
2744
2744
  <path
2745
- 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"
2745
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
2746
2746
  />
2747
2747
  </svg>
2748
2748
  </span>
@@ -2774,14 +2774,14 @@ Several components in the following examples do not include functional and/or ac
2774
2774
  <svg
2775
2775
  class="pf-v6-svg"
2776
2776
  fill="currentColor"
2777
- viewBox="0 0 256 512"
2777
+ viewBox="0 0 20 20"
2778
2778
  aria-hidden="true"
2779
2779
  role="img"
2780
2780
  width="1em"
2781
2781
  height="1em"
2782
2782
  >
2783
2783
  <path
2784
- 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"
2784
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
2785
2785
  />
2786
2786
  </svg>
2787
2787
  </span>
@@ -2797,14 +2797,14 @@ Several components in the following examples do not include functional and/or ac
2797
2797
  <svg
2798
2798
  class="pf-v6-svg"
2799
2799
  fill="currentColor"
2800
- viewBox="0 0 448 512"
2800
+ viewBox="0 0 20 20"
2801
2801
  aria-hidden="true"
2802
2802
  role="img"
2803
2803
  width="1em"
2804
2804
  height="1em"
2805
2805
  >
2806
2806
  <path
2807
- 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
2807
+ d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
2808
2808
  />
2809
2809
  </svg>
2810
2810
  </span>
@@ -3323,14 +3323,14 @@ Several components in the following examples do not include functional and/or ac
3323
3323
  <svg
3324
3324
  class="pf-v6-svg"
3325
3325
  fill="currentColor"
3326
- viewBox="0 0 448 512"
3326
+ viewBox="0 0 20 20"
3327
3327
  aria-hidden="true"
3328
3328
  role="img"
3329
3329
  width="1em"
3330
3330
  height="1em"
3331
3331
  >
3332
3332
  <path
3333
- d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
3333
+ d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
3334
3334
  />
3335
3335
  </svg>
3336
3336
  </span>
@@ -3347,14 +3347,14 @@ Several components in the following examples do not include functional and/or ac
3347
3347
  <svg
3348
3348
  class="pf-v6-svg"
3349
3349
  fill="currentColor"
3350
- viewBox="0 0 256 512"
3350
+ viewBox="0 0 20 20"
3351
3351
  aria-hidden="true"
3352
3352
  role="img"
3353
3353
  width="1em"
3354
3354
  height="1em"
3355
3355
  >
3356
3356
  <path
3357
- 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"
3357
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
3358
3358
  />
3359
3359
  </svg>
3360
3360
  </span>
@@ -3386,14 +3386,14 @@ Several components in the following examples do not include functional and/or ac
3386
3386
  <svg
3387
3387
  class="pf-v6-svg"
3388
3388
  fill="currentColor"
3389
- viewBox="0 0 256 512"
3389
+ viewBox="0 0 20 20"
3390
3390
  aria-hidden="true"
3391
3391
  role="img"
3392
3392
  width="1em"
3393
3393
  height="1em"
3394
3394
  >
3395
3395
  <path
3396
- 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"
3396
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
3397
3397
  />
3398
3398
  </svg>
3399
3399
  </span>
@@ -3409,14 +3409,14 @@ Several components in the following examples do not include functional and/or ac
3409
3409
  <svg
3410
3410
  class="pf-v6-svg"
3411
3411
  fill="currentColor"
3412
- viewBox="0 0 448 512"
3412
+ viewBox="0 0 20 20"
3413
3413
  aria-hidden="true"
3414
3414
  role="img"
3415
3415
  width="1em"
3416
3416
  height="1em"
3417
3417
  >
3418
3418
  <path
3419
- 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
3419
+ d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
3420
3420
  />
3421
3421
  </svg>
3422
3422
  </span>
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -702,14 +702,14 @@ section: patterns
702
702
  <svg
703
703
  class="pf-v6-svg"
704
704
  fill="currentColor"
705
- viewBox="0 0 256 512"
705
+ viewBox="0 0 20 20"
706
706
  aria-hidden="true"
707
707
  role="img"
708
708
  width="1em"
709
709
  height="1em"
710
710
  >
711
711
  <path
712
- 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"
712
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
713
713
  />
714
714
  </svg>
715
715
  </span>
@@ -725,14 +725,14 @@ section: patterns
725
725
  <svg
726
726
  class="pf-v6-svg"
727
727
  fill="currentColor"
728
- viewBox="0 0 256 512"
728
+ viewBox="0 0 20 20"
729
729
  aria-hidden="true"
730
730
  role="img"
731
731
  width="1em"
732
732
  height="1em"
733
733
  >
734
734
  <path
735
- 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"
735
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
736
736
  />
737
737
  </svg>
738
738
  </span>
@@ -1413,14 +1413,14 @@ section: patterns
1413
1413
  <svg
1414
1414
  class="pf-v6-svg"
1415
1415
  fill="currentColor"
1416
- viewBox="0 0 448 512"
1416
+ viewBox="0 0 20 20"
1417
1417
  aria-hidden="true"
1418
1418
  role="img"
1419
1419
  width="1em"
1420
1420
  height="1em"
1421
1421
  >
1422
1422
  <path
1423
- d="M223.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.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 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 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
1423
+ d="M10 19a.997.997 0 0 1-.707-.293l-7.647-7.646c-.283-.284-.439-.66-.439-1.061s.156-.777.44-1.06l7.646-7.647a1 1 0 1 1 1.414 1.414L3.414 10l7.293 7.293A1 1 0 0 1 10 19Zm8.707-.293a1 1 0 0 0 0-1.414L11.414 10l7.293-7.293a1 1 0 1 0-1.414-1.414L9.646 8.939c-.283.284-.439.66-.439 1.061s.156.777.44 1.06l7.646 7.647a.997.997 0 0 0 1.414 0Z"
1424
1424
  />
1425
1425
  </svg>
1426
1426
  </span>
@@ -1437,14 +1437,14 @@ section: patterns
1437
1437
  <svg
1438
1438
  class="pf-v6-svg"
1439
1439
  fill="currentColor"
1440
- viewBox="0 0 256 512"
1440
+ viewBox="0 0 20 20"
1441
1441
  aria-hidden="true"
1442
1442
  role="img"
1443
1443
  width="1em"
1444
1444
  height="1em"
1445
1445
  >
1446
1446
  <path
1447
- 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"
1447
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
1448
1448
  />
1449
1449
  </svg>
1450
1450
  </span>
@@ -1472,14 +1472,14 @@ section: patterns
1472
1472
  <svg
1473
1473
  class="pf-v6-svg"
1474
1474
  fill="currentColor"
1475
- viewBox="0 0 256 512"
1475
+ viewBox="0 0 20 20"
1476
1476
  aria-hidden="true"
1477
1477
  role="img"
1478
1478
  width="1em"
1479
1479
  height="1em"
1480
1480
  >
1481
1481
  <path
1482
- 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"
1482
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
1483
1483
  />
1484
1484
  </svg>
1485
1485
  </span>
@@ -1496,14 +1496,14 @@ section: patterns
1496
1496
  <svg
1497
1497
  class="pf-v6-svg"
1498
1498
  fill="currentColor"
1499
- viewBox="0 0 448 512"
1499
+ viewBox="0 0 20 20"
1500
1500
  aria-hidden="true"
1501
1501
  role="img"
1502
1502
  width="1em"
1503
1503
  height="1em"
1504
1504
  >
1505
1505
  <path
1506
- 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 34zm192-34l-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.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
1506
+ d="M10 19a1 1 0 0 1-.707-1.707L16.586 10 9.293 2.707a1 1 0 1 1 1.414-1.414l7.647 7.646c.283.284.439.66.439 1.061s-.156.777-.44 1.06l-7.646 7.647A.997.997 0 0 1 10 19Zm-7.293-.293 7.647-7.646c.283-.284.439-.66.439-1.061s-.156-.777-.44-1.06L2.708 1.292a1 1 0 1 0-1.414 1.414L8.586 10l-7.293 7.293a1 1 0 1 0 1.414 1.414Z"
1507
1507
  />
1508
1508
  </svg>
1509
1509
  </span>
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -444,11 +444,24 @@ This demo populates the main Compass section with a card view, which is one of t
444
444
  aria-expanded="false"
445
445
  >
446
446
  <span class="pf-v6-c-menu-toggle__icon">
447
- <img
448
- class="pf-v6-c-avatar pf-m-md"
449
- alt
450
- src="/assets/images/img_avatar-light.svg"
451
- />
447
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
448
+ <svg
449
+ aria-hidden="true"
450
+ data-name="Layer 1"
451
+ xmlns="http://www.w3.org/2000/svg"
452
+ version="1.1"
453
+ viewBox="0 0 36 36"
454
+ >
455
+ <path
456
+ fill="currentColor"
457
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
458
+ />
459
+ <path
460
+ fill="currentColor"
461
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
462
+ />
463
+ </svg>
464
+ </div>
452
465
  </span>
453
466
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
454
467
  <span class="pf-v6-c-menu-toggle__controls">
@@ -842,14 +855,14 @@ This demo populates the main Compass section with a card view, which is one of t
842
855
  <svg
843
856
  class="pf-v6-svg"
844
857
  fill="currentColor"
845
- viewBox="0 0 256 512"
858
+ viewBox="0 0 20 20"
846
859
  aria-hidden="true"
847
860
  role="img"
848
861
  width="1em"
849
862
  height="1em"
850
863
  >
851
864
  <path
852
- 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"
865
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
853
866
  />
854
867
  </svg>
855
868
  </span>
@@ -867,14 +880,14 @@ This demo populates the main Compass section with a card view, which is one of t
867
880
  <svg
868
881
  class="pf-v6-svg"
869
882
  fill="currentColor"
870
- viewBox="0 0 256 512"
883
+ viewBox="0 0 20 20"
871
884
  aria-hidden="true"
872
885
  role="img"
873
886
  width="1em"
874
887
  height="1em"
875
888
  >
876
889
  <path
877
- 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"
890
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
878
891
  />
879
892
  </svg>
880
893
  </span>
@@ -2095,11 +2108,24 @@ This demo populates the main Compass section with a dashboard, which is often us
2095
2108
  aria-expanded="false"
2096
2109
  >
2097
2110
  <span class="pf-v6-c-menu-toggle__icon">
2098
- <img
2099
- class="pf-v6-c-avatar pf-m-md"
2100
- alt
2101
- src="/assets/images/img_avatar-light.svg"
2102
- />
2111
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
2112
+ <svg
2113
+ aria-hidden="true"
2114
+ data-name="Layer 1"
2115
+ xmlns="http://www.w3.org/2000/svg"
2116
+ version="1.1"
2117
+ viewBox="0 0 36 36"
2118
+ >
2119
+ <path
2120
+ fill="currentColor"
2121
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
2122
+ />
2123
+ <path
2124
+ fill="currentColor"
2125
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
2126
+ />
2127
+ </svg>
2128
+ </div>
2103
2129
  </span>
2104
2130
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
2105
2131
  <span class="pf-v6-c-menu-toggle__controls">
@@ -4031,11 +4057,24 @@ Without a glass panel component wrapping all of the content, there is no rounded
4031
4057
  aria-expanded="false"
4032
4058
  >
4033
4059
  <span class="pf-v6-c-menu-toggle__icon">
4034
- <img
4035
- class="pf-v6-c-avatar pf-m-md"
4036
- alt
4037
- src="/assets/images/img_avatar-light.svg"
4038
- />
4060
+ <div class="pf-v6-c-avatar pf-m-md" role="img" aria-hidden="true">
4061
+ <svg
4062
+ aria-hidden="true"
4063
+ data-name="Layer 1"
4064
+ xmlns="http://www.w3.org/2000/svg"
4065
+ version="1.1"
4066
+ viewBox="0 0 36 36"
4067
+ >
4068
+ <path
4069
+ fill="currentColor"
4070
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
4071
+ />
4072
+ <path
4073
+ fill="currentColor"
4074
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
4075
+ />
4076
+ </svg>
4077
+ </div>
4039
4078
  </span>
4040
4079
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
4041
4080
  <span class="pf-v6-c-menu-toggle__controls">
@@ -4437,14 +4476,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4437
4476
  <svg
4438
4477
  class="pf-v6-svg"
4439
4478
  fill="currentColor"
4440
- viewBox="0 0 256 512"
4479
+ viewBox="0 0 20 20"
4441
4480
  aria-hidden="true"
4442
4481
  role="img"
4443
4482
  width="1em"
4444
4483
  height="1em"
4445
4484
  >
4446
4485
  <path
4447
- 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"
4486
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
4448
4487
  />
4449
4488
  </svg>
4450
4489
  </span>
@@ -4462,14 +4501,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4462
4501
  <svg
4463
4502
  class="pf-v6-svg"
4464
4503
  fill="currentColor"
4465
- viewBox="0 0 256 512"
4504
+ viewBox="0 0 20 20"
4466
4505
  aria-hidden="true"
4467
4506
  role="img"
4468
4507
  width="1em"
4469
4508
  height="1em"
4470
4509
  >
4471
4510
  <path
4472
- 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"
4511
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
4473
4512
  />
4474
4513
  </svg>
4475
4514
  </span>
@@ -5327,14 +5366,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5327
5366
  <svg
5328
5367
  class="pf-v6-svg"
5329
5368
  fill="currentColor"
5330
- viewBox="0 0 256 512"
5369
+ viewBox="0 0 20 20"
5331
5370
  aria-hidden="true"
5332
5371
  role="img"
5333
5372
  width="1em"
5334
5373
  height="1em"
5335
5374
  >
5336
5375
  <path
5337
- 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"
5376
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
5338
5377
  />
5339
5378
  </svg>
5340
5379
  </span>
@@ -5352,14 +5391,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5352
5391
  <svg
5353
5392
  class="pf-v6-svg"
5354
5393
  fill="currentColor"
5355
- viewBox="0 0 256 512"
5394
+ viewBox="0 0 20 20"
5356
5395
  aria-hidden="true"
5357
5396
  role="img"
5358
5397
  width="1em"
5359
5398
  height="1em"
5360
5399
  >
5361
5400
  <path
5362
- 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"
5401
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
5363
5402
  />
5364
5403
  </svg>
5365
5404
  </span>
@@ -6628,11 +6667,28 @@ This demo showcases how you can position a side-panel drawer on top of the other
6628
6667
  aria-expanded="false"
6629
6668
  >
6630
6669
  <span class="pf-v6-c-menu-toggle__icon">
6631
- <img
6670
+ <div
6632
6671
  class="pf-v6-c-avatar pf-m-md"
6633
- alt
6634
- src="/assets/images/img_avatar-light.svg"
6635
- />
6672
+ role="img"
6673
+ aria-hidden="true"
6674
+ >
6675
+ <svg
6676
+ aria-hidden="true"
6677
+ data-name="Layer 1"
6678
+ xmlns="http://www.w3.org/2000/svg"
6679
+ version="1.1"
6680
+ viewBox="0 0 36 36"
6681
+ >
6682
+ <path
6683
+ fill="currentColor"
6684
+ d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"
6685
+ />
6686
+ <path
6687
+ fill="currentColor"
6688
+ d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"
6689
+ />
6690
+ </svg>
6691
+ </div>
6636
6692
  </span>
6637
6693
  <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
6638
6694
  <span class="pf-v6-c-menu-toggle__controls">
@@ -7048,14 +7104,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7048
7104
  <svg
7049
7105
  class="pf-v6-svg"
7050
7106
  fill="currentColor"
7051
- viewBox="0 0 256 512"
7107
+ viewBox="0 0 20 20"
7052
7108
  aria-hidden="true"
7053
7109
  role="img"
7054
7110
  width="1em"
7055
7111
  height="1em"
7056
7112
  >
7057
7113
  <path
7058
- 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"
7114
+ d="m6.41 10 7.29-7.29.02-.02c.38-.4.37-1.03-.02-1.41-.4-.38-1.03-.37-1.41.02L4.64 8.95a1.49 1.49 0 0 0 0 2.12l7.65 7.65c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41l-7.29-7.29Z"
7059
7115
  />
7060
7116
  </svg>
7061
7117
  </span>
@@ -7073,14 +7129,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7073
7129
  <svg
7074
7130
  class="pf-v6-svg"
7075
7131
  fill="currentColor"
7076
- viewBox="0 0 256 512"
7132
+ viewBox="0 0 20 20"
7077
7133
  aria-hidden="true"
7078
7134
  role="img"
7079
7135
  width="1em"
7080
7136
  height="1em"
7081
7137
  >
7082
7138
  <path
7083
- 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"
7139
+ d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
7084
7140
  />
7085
7141
  </svg>
7086
7142
  </span>