@patternfly/patternfly 6.6.0-prerelease.9 → 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 (60) 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/base/patternfly-fonts.css +4 -4
  8. package/base/patternfly-fonts.scss +4 -4
  9. package/base/patternfly-variables.css +6 -6
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  12. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  13. package/base/tokens/tokens-charts.scss +1 -1
  14. package/base/tokens/tokens-dark.scss +1 -1
  15. package/base/tokens/tokens-default.scss +4 -4
  16. package/base/tokens/tokens-felt-dark.scss +1 -1
  17. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  18. package/base/tokens/tokens-felt-glass.scss +1 -1
  19. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  21. package/base/tokens/tokens-felt.scss +1 -1
  22. package/base/tokens/tokens-glass-dark.scss +1 -1
  23. package/base/tokens/tokens-glass.scss +1 -1
  24. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  25. package/base/tokens/tokens-highcontrast.scss +4 -4
  26. package/base/tokens/tokens-palette.scss +1 -1
  27. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  28. package/components/Alert/alert.css +1 -0
  29. package/components/Alert/alert.scss +1 -0
  30. package/components/Banner/banner.css +7 -0
  31. package/components/Banner/banner.scss +7 -0
  32. package/components/Button/button.css +15 -1
  33. package/components/Button/button.scss +17 -1
  34. package/components/DragDrop/drag-drop.css +4 -0
  35. package/components/DragDrop/drag-drop.scss +4 -0
  36. package/components/Page/page.css +7 -5
  37. package/components/Page/page.scss +9 -8
  38. package/components/Panel/panel.css +1 -1
  39. package/components/Panel/panel.scss +2 -2
  40. package/components/Table/table.css +26 -18
  41. package/components/Table/table.scss +37 -27
  42. package/components/_index.css +61 -25
  43. package/docs/components/DualListSelector/examples/DualListSelector.md +72 -72
  44. package/docs/components/Pagination/examples/Pagination.md +120 -120
  45. package/docs/components/Table/examples/Table.md +7 -0
  46. package/docs/components/Toolbar/examples/Toolbar.md +16 -16
  47. package/docs/demos/CardView/examples/CardView.md +12 -12
  48. package/docs/demos/Compass/examples/Compass.md +16 -16
  49. package/docs/demos/Dashboard/examples/Dashboard.md +27 -30
  50. package/docs/demos/DataList/examples/DataList.md +48 -48
  51. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +20 -20
  52. package/docs/demos/Table/examples/Table.md +160 -160
  53. package/docs/demos/Toolbar/examples/Toolbar.md +36 -36
  54. package/package.json +2 -2
  55. package/patternfly-base-no-globals.css +10 -10
  56. package/patternfly-base.css +10 -10
  57. package/patternfly-no-globals.css +71 -35
  58. package/patternfly.css +71 -35
  59. package/patternfly.min.css +1 -1
  60. package/patternfly.min.css.map +1 -1
@@ -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">
@@ -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>
@@ -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>
@@ -855,14 +855,14 @@ This demo populates the main Compass section with a card view, which is one of t
855
855
  <svg
856
856
  class="pf-v6-svg"
857
857
  fill="currentColor"
858
- viewBox="0 0 256 512"
858
+ viewBox="0 0 20 20"
859
859
  aria-hidden="true"
860
860
  role="img"
861
861
  width="1em"
862
862
  height="1em"
863
863
  >
864
864
  <path
865
- 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"
866
866
  />
867
867
  </svg>
868
868
  </span>
@@ -880,14 +880,14 @@ This demo populates the main Compass section with a card view, which is one of t
880
880
  <svg
881
881
  class="pf-v6-svg"
882
882
  fill="currentColor"
883
- viewBox="0 0 256 512"
883
+ viewBox="0 0 20 20"
884
884
  aria-hidden="true"
885
885
  role="img"
886
886
  width="1em"
887
887
  height="1em"
888
888
  >
889
889
  <path
890
- 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"
891
891
  />
892
892
  </svg>
893
893
  </span>
@@ -4476,14 +4476,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4476
4476
  <svg
4477
4477
  class="pf-v6-svg"
4478
4478
  fill="currentColor"
4479
- viewBox="0 0 256 512"
4479
+ viewBox="0 0 20 20"
4480
4480
  aria-hidden="true"
4481
4481
  role="img"
4482
4482
  width="1em"
4483
4483
  height="1em"
4484
4484
  >
4485
4485
  <path
4486
- 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"
4487
4487
  />
4488
4488
  </svg>
4489
4489
  </span>
@@ -4501,14 +4501,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
4501
4501
  <svg
4502
4502
  class="pf-v6-svg"
4503
4503
  fill="currentColor"
4504
- viewBox="0 0 256 512"
4504
+ viewBox="0 0 20 20"
4505
4505
  aria-hidden="true"
4506
4506
  role="img"
4507
4507
  width="1em"
4508
4508
  height="1em"
4509
4509
  >
4510
4510
  <path
4511
- 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"
4512
4512
  />
4513
4513
  </svg>
4514
4514
  </span>
@@ -5366,14 +5366,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5366
5366
  <svg
5367
5367
  class="pf-v6-svg"
5368
5368
  fill="currentColor"
5369
- viewBox="0 0 256 512"
5369
+ viewBox="0 0 20 20"
5370
5370
  aria-hidden="true"
5371
5371
  role="img"
5372
5372
  width="1em"
5373
5373
  height="1em"
5374
5374
  >
5375
5375
  <path
5376
- 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"
5377
5377
  />
5378
5378
  </svg>
5379
5379
  </span>
@@ -5391,14 +5391,14 @@ Without a glass panel component wrapping all of the content, there is no rounded
5391
5391
  <svg
5392
5392
  class="pf-v6-svg"
5393
5393
  fill="currentColor"
5394
- viewBox="0 0 256 512"
5394
+ viewBox="0 0 20 20"
5395
5395
  aria-hidden="true"
5396
5396
  role="img"
5397
5397
  width="1em"
5398
5398
  height="1em"
5399
5399
  >
5400
5400
  <path
5401
- 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"
5402
5402
  />
5403
5403
  </svg>
5404
5404
  </span>
@@ -7104,14 +7104,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7104
7104
  <svg
7105
7105
  class="pf-v6-svg"
7106
7106
  fill="currentColor"
7107
- viewBox="0 0 256 512"
7107
+ viewBox="0 0 20 20"
7108
7108
  aria-hidden="true"
7109
7109
  role="img"
7110
7110
  width="1em"
7111
7111
  height="1em"
7112
7112
  >
7113
7113
  <path
7114
- 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"
7115
7115
  />
7116
7116
  </svg>
7117
7117
  </span>
@@ -7129,14 +7129,14 @@ This demo showcases how you can position a side-panel drawer on top of the other
7129
7129
  <svg
7130
7130
  class="pf-v6-svg"
7131
7131
  fill="currentColor"
7132
- viewBox="0 0 256 512"
7132
+ viewBox="0 0 20 20"
7133
7133
  aria-hidden="true"
7134
7134
  role="img"
7135
7135
  width="1em"
7136
7136
  height="1em"
7137
7137
  >
7138
7138
  <path
7139
- 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"
7140
7140
  />
7141
7141
  </svg>
7142
7142
  </span>
@@ -499,8 +499,14 @@ cssPrefix: pf-d-dashboard
499
499
  class="pf-v6-l-flex__item"
500
500
  style="margin-block-end: -.25em"
501
501
  >
502
- <span class="pf-v6-c-label pf-m-red">
502
+ <span class="pf-v6-c-label pf-m-danger">
503
503
  <span class="pf-v6-c-label__content">
504
+ <span class="pf-v6-c-label__icon">
505
+ <i
506
+ class="fas fa-fw fa-exclamation-circle"
507
+ aria-hidden="true"
508
+ ></i>
509
+ </span>
504
510
  <span class="pf-v6-c-label__text">Incident</span>
505
511
  </span>
506
512
  </span>
@@ -510,9 +516,7 @@ cssPrefix: pf-d-dashboard
510
516
  style="row-gap: var(--pf-6-global--spacer--md);"
511
517
  >
512
518
  <span class="pf-v6-c-icon">
513
- <span
514
- class="pf-v6-c-icon__content pf-m-success"
515
- >
519
+ <span class="pf-v6-c-icon__content pf-m-danger">
516
520
  <svg
517
521
  class="pf-v6-svg"
518
522
  fill="currentColor"
@@ -530,7 +534,7 @@ cssPrefix: pf-d-dashboard
530
534
  </span>
531
535
  <p class="pf-v6-u-color-200">
532
536
  System reboot
533
- <b class="pf-v6-u-color-100">is not</b> required
537
+ <b class="pf-v6-u-color-100">is</b> required
534
538
  </p>
535
539
  </div>
536
540
  </div>
@@ -635,7 +639,9 @@ cssPrefix: pf-d-dashboard
635
639
  style="row-gap: var(--pf-6-global--spacer--md);"
636
640
  >
637
641
  <span class="pf-v6-c-icon">
638
- <span class="pf-v6-c-icon__content pf-m-danger">
642
+ <span
643
+ class="pf-v6-c-icon__content pf-m-success"
644
+ >
639
645
  <svg
640
646
  class="pf-v6-svg"
641
647
  fill="currentColor"
@@ -653,7 +659,7 @@ cssPrefix: pf-d-dashboard
653
659
  </span>
654
660
  <p class="pf-v6-u-color-200">
655
661
  System reboot
656
- <b class="pf-v6-u-color-100">is</b> required
662
+ <b class="pf-v6-u-color-100">is not</b> required
657
663
  </p>
658
664
  </div>
659
665
  </div>
@@ -747,8 +753,14 @@ cssPrefix: pf-d-dashboard
747
753
  class="pf-v6-l-flex__item"
748
754
  style="margin-block-end: -.25em"
749
755
  >
750
- <span class="pf-v6-c-label pf-m-red">
756
+ <span class="pf-v6-c-label pf-m-danger">
751
757
  <span class="pf-v6-c-label__content">
758
+ <span class="pf-v6-c-label__icon">
759
+ <i
760
+ class="fas fa-fw fa-exclamation-circle"
761
+ aria-hidden="true"
762
+ ></i>
763
+ </span>
752
764
  <span class="pf-v6-c-label__text">Incident</span>
753
765
  </span>
754
766
  </span>
@@ -758,9 +770,7 @@ cssPrefix: pf-d-dashboard
758
770
  style="row-gap: var(--pf-6-global--spacer--md);"
759
771
  >
760
772
  <span class="pf-v6-c-icon">
761
- <span
762
- class="pf-v6-c-icon__content pf-m-success"
763
- >
773
+ <span class="pf-v6-c-icon__content pf-m-danger">
764
774
  <svg
765
775
  class="pf-v6-svg"
766
776
  fill="currentColor"
@@ -778,7 +788,7 @@ cssPrefix: pf-d-dashboard
778
788
  </span>
779
789
  <p class="pf-v6-u-color-200">
780
790
  System reboot
781
- <b class="pf-v6-u-color-100">is not</b> required
791
+ <b class="pf-v6-u-color-100">is</b> required
782
792
  </p>
783
793
  </div>
784
794
  </div>
@@ -1050,7 +1060,7 @@ cssPrefix: pf-d-dashboard
1050
1060
  aria-label="Group of labels"
1051
1061
  >
1052
1062
  <li class="pf-v6-c-label-group__list-item">
1053
- <span class="pf-v6-c-label pf-m-red">
1063
+ <span class="pf-v6-c-label pf-m-danger">
1054
1064
  <span class="pf-v6-c-label__content">
1055
1065
  <span class="pf-v6-c-label__icon">
1056
1066
  <i
@@ -1063,11 +1073,11 @@ cssPrefix: pf-d-dashboard
1063
1073
  </span>
1064
1074
  </li>
1065
1075
  <li class="pf-v6-c-label-group__list-item">
1066
- <span class="pf-v6-c-label pf-m-orange">
1076
+ <span class="pf-v6-c-label pf-m-warning">
1067
1077
  <span class="pf-v6-c-label__content">
1068
1078
  <span class="pf-v6-c-label__icon">
1069
1079
  <i
1070
- class="fas fa-fw fa-exclamation-circle"
1080
+ class="fas fa-fw fa-exclamation-triangle"
1071
1081
  aria-hidden="true"
1072
1082
  ></i>
1073
1083
  </span>
@@ -1076,7 +1086,7 @@ cssPrefix: pf-d-dashboard
1076
1086
  </span>
1077
1087
  </li>
1078
1088
  <li class="pf-v6-c-label-group__list-item">
1079
- <span class="pf-v6-c-label pf-m-green">
1089
+ <span class="pf-v6-c-label pf-m-success">
1080
1090
  <span class="pf-v6-c-label__content">
1081
1091
  <span class="pf-v6-c-label__icon">
1082
1092
  <i
@@ -1089,7 +1099,7 @@ cssPrefix: pf-d-dashboard
1089
1099
  </span>
1090
1100
  </li>
1091
1101
  <li class="pf-v6-c-label-group__list-item">
1092
- <span class="pf-v6-c-label pf-m-blue">
1102
+ <span class="pf-v6-c-label pf-m-info">
1093
1103
  <span class="pf-v6-c-label__content">
1094
1104
  <span class="pf-v6-c-label__icon">
1095
1105
  <i
@@ -1101,19 +1111,6 @@ cssPrefix: pf-d-dashboard
1101
1111
  </span>
1102
1112
  </span>
1103
1113
  </li>
1104
- <li class="pf-v6-c-label-group__list-item">
1105
- <span class="pf-v6-c-label pf-m-teal">
1106
- <span class="pf-v6-c-label__content">
1107
- <span class="pf-v6-c-label__icon">
1108
- <i
1109
- class="fas fa-fw fa-bell"
1110
- aria-hidden="true"
1111
- ></i>
1112
- </span>
1113
- <span class="pf-v6-c-label__text">3</span>
1114
- </span>
1115
- </span>
1116
- </li>
1117
1114
  </ul>
1118
1115
  </div>
1119
1116
  </div>