@patternfly/patternfly 6.5.0-prerelease.51 → 6.5.0-prerelease.53

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 (49) hide show
  1. package/components/Button/button.css +22 -2
  2. package/components/Button/button.scss +26 -2
  3. package/components/Card/card.css +20 -8
  4. package/components/Card/card.scss +26 -7
  5. package/components/Masthead/masthead.css +38 -4
  6. package/components/Masthead/masthead.scss +52 -4
  7. package/components/MenuToggle/menu-toggle.css +26 -2
  8. package/components/MenuToggle/menu-toggle.scss +30 -2
  9. package/components/Nav/nav.css +16 -8
  10. package/components/Nav/nav.scss +16 -8
  11. package/components/Page/page.css +59 -7
  12. package/components/Page/page.scss +79 -15
  13. package/components/_index.css +181 -31
  14. package/docs/components/Breadcrumb/examples/Breadcrumb.md +0 -1
  15. package/docs/components/Button/examples/Button.md +339 -0
  16. package/docs/components/Masthead/examples/masthead.md +1 -1
  17. package/docs/components/Menu/examples/Menu.md +0 -2
  18. package/docs/components/MenuToggle/examples/MenuToggle.md +1 -4
  19. package/docs/components/Pagination/examples/Pagination.md +0 -13
  20. package/docs/components/Toolbar/examples/Toolbar.md +0 -2
  21. package/docs/demos/AboutModal/examples/AboutModal.md +1 -0
  22. package/docs/demos/Alert/examples/Alert.md +3 -0
  23. package/docs/demos/BackToTop/examples/BackToTop.md +1 -0
  24. package/docs/demos/Banner/examples/Banner.md +2 -0
  25. package/docs/demos/Card/examples/Card.md +564 -86
  26. package/docs/demos/CardView/examples/CardView.md +16 -3
  27. package/docs/demos/Compass/examples/Compass.md +551 -134
  28. package/docs/demos/Dashboard/examples/Dashboard.md +435 -100
  29. package/docs/demos/DataList/examples/DataList.md +4 -8
  30. package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -0
  31. package/docs/demos/Drawer/examples/Drawer.md +5 -0
  32. package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -0
  33. package/docs/demos/Masthead/examples/Masthead.md +9 -58
  34. package/docs/demos/Modal/examples/Modal.md +6 -0
  35. package/docs/demos/Nav/examples/Nav.md +305 -160
  36. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -0
  37. package/docs/demos/Page/examples/Page.md +14 -0
  38. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -6
  39. package/docs/demos/Skeleton/examples/Skeleton.md +1 -0
  40. package/docs/demos/Table/examples/Table.md +16 -27
  41. package/docs/demos/Tabs/examples/Tabs.md +6 -0
  42. package/docs/demos/Toolbar/examples/Toolbar.md +2 -8
  43. package/docs/demos/Wizard/examples/Wizard.md +9 -0
  44. package/package.json +1 -1
  45. package/patternfly-no-globals.css +181 -31
  46. package/patternfly.css +181 -31
  47. package/patternfly.min.css +1 -1
  48. package/patternfly.min.css.map +1 -1
  49. package/sass-utilities/scss-variables.scss +3 -0
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -13,6 +13,7 @@ cssPrefix: pf-d-dashboard
13
13
  <span class="pf-v6-c-button__text">Skip to content</span>
14
14
  </a>
15
15
  </div>
16
+
16
17
  <header class="pf-v6-c-masthead" id="dashboard-demo-docked">
17
18
  <div class="pf-v6-c-masthead__main">
18
19
  <span class="pf-v6-c-masthead__toggle">
@@ -394,10 +395,19 @@ cssPrefix: pf-d-dashboard
394
395
  >
395
396
  <span class="pf-v6-c-label__content">
396
397
  <span class="pf-v6-c-label__icon">
397
- <i
398
- class="pf-v6-pficon pf-v6-pficon-port"
398
+ <svg
399
+ class="pf-v6-svg"
400
+ viewBox="0 0 32 32"
401
+ fill="currentColor"
399
402
  aria-hidden="true"
400
- ></i>
403
+ role="img"
404
+ width="1em"
405
+ height="1em"
406
+ >
407
+ <path
408
+ d="M23 23.917a1.62 1.62 0 0 1-1.149-.475L9 10.59l-6.204 6.205a1.127 1.127 0 0 1-1.592-1.592L7.85 8.557a1.629 1.629 0 0 1 2.299 0L23 21.409l6.204-6.205a1.127 1.127 0 0 1 1.592 1.592l-6.646 6.646a1.624 1.624 0 0 1-1.149.475Z"
409
+ />
410
+ </svg>
401
411
  </span>
402
412
  <span
403
413
  class="pf-v6-c-label__text"
@@ -431,11 +441,25 @@ cssPrefix: pf-d-dashboard
431
441
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
432
442
  style="row-gap: var(--pf-6-global--spacer--md);"
433
443
  >
434
- <i
435
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
436
- style="line-height: 1"
437
- aria-hidden="true"
438
- ></i>
444
+ <span class="pf-v6-c-icon">
445
+ <span
446
+ class="pf-v6-c-icon__content pf-m-success"
447
+ >
448
+ <svg
449
+ class="pf-v6-svg"
450
+ viewBox="0 0 32 32"
451
+ fill="currentColor"
452
+ aria-hidden="true"
453
+ role="img"
454
+ width="1em"
455
+ height="1em"
456
+ >
457
+ <path
458
+ d="M19 16c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3ZM3 16c0-3.472 1.353-6.737 3.808-9.192a.999.999 0 1 0-1.414-1.414C2.561 8.227 1 11.994 1 16s1.561 7.773 4.394 10.606a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414A12.918 12.918 0 0 1 3 16ZM26.606 5.394a.999.999 0 1 0-1.414 1.414C27.647 9.264 29 12.528 29 16s-1.353 6.737-3.808 9.192a.999.999 0 1 0 1.414 1.414C29.439 23.773 31 20.006 31 16s-1.561-7.773-4.394-10.606ZM11.05 9.636a.999.999 0 0 0-1.414 0c-3.509 3.509-3.509 9.219 0 12.728a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414 7.008 7.008 0 0 1 0-9.899.999.999 0 0 0 0-1.414Zm11.314 0a.999.999 0 1 0-1.414 1.414 7.008 7.008 0 0 1 0 9.899.999.999 0 1 0 1.414 1.414c3.509-3.509 3.509-9.219 0-12.728Z"
459
+ />
460
+ </svg>
461
+ </span>
462
+ </span>
439
463
  <p class="pf-v6-u-color-200">
440
464
  System reboot
441
465
  <b class="pf-v6-u-color-100">is not</b> required
@@ -496,10 +520,19 @@ cssPrefix: pf-d-dashboard
496
520
  >
497
521
  <span class="pf-v6-c-label__content">
498
522
  <span class="pf-v6-c-label__icon">
499
- <i
500
- class="fas fa-cube"
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
501
527
  aria-hidden="true"
502
- ></i>
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ d="M16 30.856a1 1 0 0 1-.5-.134l-12-6.929a1 1 0 0 1-.5-.866V9.072c0-.357.19-.688.5-.866l12-6.929a1.003 1.003 0 0 1 1 0l12 6.929a1 1 0 0 1 .5.866v13.855c0 .357-.19.688-.5.866l-12 6.929a1 1 0 0 1-.5.134ZM5 22.351l11 6.352 11-6.352V9.65L16 3.298 5 9.65v12.701Zm23 .577h.01H28Z"
534
+ />
535
+ </svg>
503
536
  </span>
504
537
  <span
505
538
  class="pf-v6-c-label__text"
@@ -533,11 +566,23 @@ cssPrefix: pf-d-dashboard
533
566
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
534
567
  style="row-gap: var(--pf-6-global--spacer--md);"
535
568
  >
536
- <i
537
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-danger-color-100"
538
- style="line-height: 1"
539
- aria-hidden="true"
540
- ></i>
569
+ <span class="pf-v6-c-icon">
570
+ <span class="pf-v6-c-icon__content pf-m-danger">
571
+ <svg
572
+ class="pf-v6-svg"
573
+ viewBox="0 0 32 32"
574
+ fill="currentColor"
575
+ aria-hidden="true"
576
+ role="img"
577
+ width="1em"
578
+ height="1em"
579
+ >
580
+ <path
581
+ d="M19 16c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3ZM3 16c0-3.472 1.353-6.737 3.808-9.192a.999.999 0 1 0-1.414-1.414C2.561 8.227 1 11.994 1 16s1.561 7.773 4.394 10.606a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414A12.918 12.918 0 0 1 3 16ZM26.606 5.394a.999.999 0 1 0-1.414 1.414C27.647 9.264 29 12.528 29 16s-1.353 6.737-3.808 9.192a.999.999 0 1 0 1.414 1.414C29.439 23.773 31 20.006 31 16s-1.561-7.773-4.394-10.606ZM11.05 9.636a.999.999 0 0 0-1.414 0c-3.509 3.509-3.509 9.219 0 12.728a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414 7.008 7.008 0 0 1 0-9.899.999.999 0 0 0 0-1.414Zm11.314 0a.999.999 0 1 0-1.414 1.414 7.008 7.008 0 0 1 0 9.899.999.999 0 1 0 1.414 1.414c3.509-3.509 3.509-9.219 0-12.728Z"
582
+ />
583
+ </svg>
584
+ </span>
585
+ </span>
541
586
  <p class="pf-v6-u-color-200">
542
587
  System reboot
543
588
  <b class="pf-v6-u-color-100">is</b> required
@@ -598,10 +643,19 @@ cssPrefix: pf-d-dashboard
598
643
  >
599
644
  <span class="pf-v6-c-label__content">
600
645
  <span class="pf-v6-c-label__icon">
601
- <i
602
- class="pf-v6-pficon pf-v6-pficon-automation"
646
+ <svg
647
+ class="pf-v6-svg"
648
+ viewBox="0 0 32 32"
649
+ fill="currentColor"
603
650
  aria-hidden="true"
604
- ></i>
651
+ role="img"
652
+ width="1em"
653
+ height="1em"
654
+ >
655
+ <path
656
+ d="M22 17v3.5c0 .827-.673 1.5-1.5 1.5H17a1 1 0 1 1 0-2h1.596l-3.302-3.292s-3.186-3.174-4.109-4.098c-.905-.906-2.109-1.404-3.39-1.404s-2.485.498-3.391 1.404C3.499 13.515 3 14.719 3 16s.499 2.484 1.404 3.39c.905.906 2.109 1.404 3.391 1.404s2.484-.498 3.39-1.404l1.109-1.107a.999.999 0 1 1 1.412 1.416l-1.107 1.105c-1.283 1.284-2.989 1.99-4.804 1.99s-3.521-.706-4.805-1.99C1.707 19.521 1 17.815 1 16s.707-3.521 1.99-4.804c1.283-1.284 2.989-1.99 4.805-1.99s3.521.706 4.804 1.99c.924.924 4.107 4.096 4.107 4.096L20 18.576V17a1 1 0 1 1 2 0Zm7.01-5.804c-1.283-1.284-2.989-1.991-4.805-1.991s-3.521.707-4.804 1.991L18.295 12.3a.999.999 0 1 0 1.41 1.418l1.11-1.108c.905-.906 2.109-1.405 3.39-1.405s2.485.499 3.391 1.405C28.501 13.515 29 14.719 29 16s-.499 2.484-1.404 3.39a4.748 4.748 0 0 1-2.732 1.36 1 1 0 1 0 .273 1.98 6.727 6.727 0 0 0 3.873-1.927C30.293 19.52 31 17.814 31 15.999s-.707-3.521-1.99-4.804Z"
657
+ />
658
+ </svg>
605
659
  </span>
606
660
  <span
607
661
  class="pf-v6-c-label__text"
@@ -635,11 +689,25 @@ cssPrefix: pf-d-dashboard
635
689
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
636
690
  style="row-gap: var(--pf-6-global--spacer--md);"
637
691
  >
638
- <i
639
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
640
- style="line-height: 1"
641
- aria-hidden="true"
642
- ></i>
692
+ <span class="pf-v6-c-icon">
693
+ <span
694
+ class="pf-v6-c-icon__content pf-m-success"
695
+ >
696
+ <svg
697
+ class="pf-v6-svg"
698
+ viewBox="0 0 32 32"
699
+ fill="currentColor"
700
+ aria-hidden="true"
701
+ role="img"
702
+ width="1em"
703
+ height="1em"
704
+ >
705
+ <path
706
+ d="M19 16c0 1.654-1.346 3-3 3s-3-1.346-3-3 1.346-3 3-3 3 1.346 3 3ZM3 16c0-3.472 1.353-6.737 3.808-9.192a.999.999 0 1 0-1.414-1.414C2.561 8.227 1 11.994 1 16s1.561 7.773 4.394 10.606a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414A12.918 12.918 0 0 1 3 16ZM26.606 5.394a.999.999 0 1 0-1.414 1.414C27.647 9.264 29 12.528 29 16s-1.353 6.737-3.808 9.192a.999.999 0 1 0 1.414 1.414C29.439 23.773 31 20.006 31 16s-1.561-7.773-4.394-10.606ZM11.05 9.636a.999.999 0 0 0-1.414 0c-3.509 3.509-3.509 9.219 0 12.728a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414 7.008 7.008 0 0 1 0-9.899.999.999 0 0 0 0-1.414Zm11.314 0a.999.999 0 1 0-1.414 1.414 7.008 7.008 0 0 1 0 9.899.999.999 0 1 0 1.414 1.414c3.509-3.509 3.509-9.219 0-12.728Z"
707
+ />
708
+ </svg>
709
+ </span>
710
+ </span>
643
711
  <p class="pf-v6-u-color-200">
644
712
  System reboot
645
713
  <b class="pf-v6-u-color-100">is not</b> required
@@ -692,10 +760,23 @@ cssPrefix: pf-d-dashboard
692
760
  >
693
761
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
694
762
  <div class="pf-v6-l-flex__item">
695
- <i
696
- class="fas fa-check-circle pf-v6-u-success-color-100"
697
- aria-hidden="true"
698
- ></i>
763
+ <span class="pf-v6-c-icon">
764
+ <span class="pf-v6-c-icon__content pf-m-success">
765
+ <svg
766
+ class="pf-v6-svg"
767
+ viewBox="0 0 32 32"
768
+ fill="currentColor"
769
+ aria-hidden="true"
770
+ role="img"
771
+ width="1em"
772
+ height="1em"
773
+ >
774
+ <path
775
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
776
+ />
777
+ </svg>
778
+ </span>
779
+ </span>
699
780
  </div>
700
781
  <div class="pf-v6-l-flex__item">
701
782
  <span>Cluster</span>
@@ -703,10 +784,23 @@ cssPrefix: pf-d-dashboard
703
784
  </div>
704
785
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
705
786
  <div class="pf-v6-l-flex__item">
706
- <i
707
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
708
- aria-hidden="true"
709
- ></i>
787
+ <span class="pf-v6-c-icon">
788
+ <span class="pf-v6-c-icon__content pf-m-danger">
789
+ <svg
790
+ class="pf-v6-svg"
791
+ viewBox="0 0 32 32"
792
+ fill="currentColor"
793
+ aria-hidden="true"
794
+ role="img"
795
+ width="1em"
796
+ height="1em"
797
+ >
798
+ <path
799
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
800
+ />
801
+ </svg>
802
+ </span>
803
+ </span>
710
804
  </div>
711
805
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
712
806
  <span class="popover-parent">
@@ -716,10 +810,23 @@ cssPrefix: pf-d-dashboard
716
810
  </div>
717
811
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
718
812
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
719
- <i
720
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
721
- aria-hidden="true"
722
- ></i>
813
+ <span class="pf-v6-c-icon">
814
+ <span class="pf-v6-c-icon__content pf-m-danger">
815
+ <svg
816
+ class="pf-v6-svg"
817
+ viewBox="0 0 32 32"
818
+ fill="currentColor"
819
+ aria-hidden="true"
820
+ role="img"
821
+ width="1em"
822
+ height="1em"
823
+ >
824
+ <path
825
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
826
+ />
827
+ </svg>
828
+ </span>
829
+ </span>
723
830
  </div>
724
831
  <div
725
832
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -734,10 +841,23 @@ cssPrefix: pf-d-dashboard
734
841
  </div>
735
842
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
736
843
  <div class="pf-v6-l-flex__item">
737
- <i
738
- class="fas fa-check-circle pf-v6-u-success-color-100"
739
- aria-hidden="true"
740
- ></i>
844
+ <span class="pf-v6-c-icon">
845
+ <span class="pf-v6-c-icon__content pf-m-success">
846
+ <svg
847
+ class="pf-v6-svg"
848
+ viewBox="0 0 32 32"
849
+ fill="currentColor"
850
+ aria-hidden="true"
851
+ role="img"
852
+ width="1em"
853
+ height="1em"
854
+ >
855
+ <path
856
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
857
+ />
858
+ </svg>
859
+ </span>
860
+ </span>
741
861
  </div>
742
862
  <div
743
863
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -752,10 +872,23 @@ cssPrefix: pf-d-dashboard
752
872
  </div>
753
873
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
754
874
  <div class="pf-v6-l-flex__item">
755
- <i
756
- class="fas fa-check-circle pf-v6-u-success-color-100"
757
- aria-hidden="true"
758
- ></i>
875
+ <span class="pf-v6-c-icon">
876
+ <span class="pf-v6-c-icon__content pf-m-success">
877
+ <svg
878
+ class="pf-v6-svg"
879
+ viewBox="0 0 32 32"
880
+ fill="currentColor"
881
+ aria-hidden="true"
882
+ role="img"
883
+ width="1em"
884
+ height="1em"
885
+ >
886
+ <path
887
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
888
+ />
889
+ </svg>
890
+ </span>
891
+ </span>
759
892
  </div>
760
893
  <div
761
894
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -770,10 +903,23 @@ cssPrefix: pf-d-dashboard
770
903
  </div>
771
904
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
772
905
  <div class="pf-v6-l-flex__item">
773
- <i
774
- class="fas fa-check-circle pf-v6-u-success-color-100"
775
- aria-hidden="true"
776
- ></i>
906
+ <span class="pf-v6-c-icon">
907
+ <span class="pf-v6-c-icon__content pf-m-success">
908
+ <svg
909
+ class="pf-v6-svg"
910
+ viewBox="0 0 32 32"
911
+ fill="currentColor"
912
+ aria-hidden="true"
913
+ role="img"
914
+ width="1em"
915
+ height="1em"
916
+ >
917
+ <path
918
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
919
+ />
920
+ </svg>
921
+ </span>
922
+ </span>
777
923
  </div>
778
924
  <div
779
925
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -785,10 +931,23 @@ cssPrefix: pf-d-dashboard
785
931
  </div>
786
932
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
787
933
  <div class="pf-v6-l-flex__item">
788
- <i
789
- class="fas fa-check-circle pf-v6-u-success-color-100"
790
- aria-hidden="true"
791
- ></i>
934
+ <span class="pf-v6-c-icon">
935
+ <span class="pf-v6-c-icon__content pf-m-success">
936
+ <svg
937
+ class="pf-v6-svg"
938
+ viewBox="0 0 32 32"
939
+ fill="currentColor"
940
+ aria-hidden="true"
941
+ role="img"
942
+ width="1em"
943
+ height="1em"
944
+ >
945
+ <path
946
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
947
+ />
948
+ </svg>
949
+ </span>
950
+ </span>
792
951
  </div>
793
952
  <div
794
953
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -1384,10 +1543,25 @@ cssPrefix: pf-d-dashboard
1384
1543
  <a href="#">
1385
1544
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1386
1545
  <span>3</span>
1387
- <i
1388
- class="fas fa-check-circle pf-v6-u-success-color-100"
1389
- aria-hidden="true"
1390
- ></i>
1546
+ <span class="pf-v6-c-icon">
1547
+ <span
1548
+ class="pf-v6-c-icon__content pf-m-success"
1549
+ >
1550
+ <svg
1551
+ class="pf-v6-svg"
1552
+ viewBox="0 0 32 32"
1553
+ fill="currentColor"
1554
+ aria-hidden="true"
1555
+ role="img"
1556
+ width="1em"
1557
+ height="1em"
1558
+ >
1559
+ <path
1560
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1561
+ />
1562
+ </svg>
1563
+ </span>
1564
+ </span>
1391
1565
  </div>
1392
1566
  </a>
1393
1567
  </div>
@@ -1407,10 +1581,25 @@ cssPrefix: pf-d-dashboard
1407
1581
  <a href="#">
1408
1582
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1409
1583
  <span>8</span>
1410
- <i
1411
- class="fas fa-check-circle pf-v6-u-success-color-100"
1412
- aria-hidden="true"
1413
- ></i>
1584
+ <span class="pf-v6-c-icon">
1585
+ <span
1586
+ class="pf-v6-c-icon__content pf-m-success"
1587
+ >
1588
+ <svg
1589
+ class="pf-v6-svg"
1590
+ viewBox="0 0 32 32"
1591
+ fill="currentColor"
1592
+ aria-hidden="true"
1593
+ role="img"
1594
+ width="1em"
1595
+ height="1em"
1596
+ >
1597
+ <path
1598
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1599
+ />
1600
+ </svg>
1601
+ </span>
1602
+ </span>
1414
1603
  </div>
1415
1604
  </a>
1416
1605
  </div>
@@ -1430,10 +1619,25 @@ cssPrefix: pf-d-dashboard
1430
1619
  <a href="#">
1431
1620
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1432
1621
  <span>20</span>
1433
- <i
1434
- class="fas fa-check-circle pf-v6-u-success-color-100"
1435
- aria-hidden="true"
1436
- ></i>
1622
+ <span class="pf-v6-c-icon">
1623
+ <span
1624
+ class="pf-v6-c-icon__content pf-m-success"
1625
+ >
1626
+ <svg
1627
+ class="pf-v6-svg"
1628
+ viewBox="0 0 32 32"
1629
+ fill="currentColor"
1630
+ aria-hidden="true"
1631
+ role="img"
1632
+ width="1em"
1633
+ height="1em"
1634
+ >
1635
+ <path
1636
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1637
+ />
1638
+ </svg>
1639
+ </span>
1640
+ </span>
1437
1641
  </div>
1438
1642
  </a>
1439
1643
  </div>
@@ -1453,10 +1657,25 @@ cssPrefix: pf-d-dashboard
1453
1657
  <a href="#">
1454
1658
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1455
1659
  <span>12</span>
1456
- <i
1457
- class="fas fa-check-circle pf-v6-u-success-color-100"
1458
- aria-hidden="true"
1459
- ></i>
1660
+ <span class="pf-v6-c-icon">
1661
+ <span
1662
+ class="pf-v6-c-icon__content pf-m-success"
1663
+ >
1664
+ <svg
1665
+ class="pf-v6-svg"
1666
+ viewBox="0 0 32 32"
1667
+ fill="currentColor"
1668
+ aria-hidden="true"
1669
+ role="img"
1670
+ width="1em"
1671
+ height="1em"
1672
+ >
1673
+ <path
1674
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1675
+ />
1676
+ </svg>
1677
+ </span>
1678
+ </span>
1460
1679
  </div>
1461
1680
  </a>
1462
1681
  </div>
@@ -1476,10 +1695,25 @@ cssPrefix: pf-d-dashboard
1476
1695
  <a href="#">
1477
1696
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1478
1697
  <span>18</span>
1479
- <i
1480
- class="fas fa-check-circle pf-v6-u-success-color-100"
1481
- aria-hidden="true"
1482
- ></i>
1698
+ <span class="pf-v6-c-icon">
1699
+ <span
1700
+ class="pf-v6-c-icon__content pf-m-success"
1701
+ >
1702
+ <svg
1703
+ class="pf-v6-svg"
1704
+ viewBox="0 0 32 32"
1705
+ fill="currentColor"
1706
+ aria-hidden="true"
1707
+ role="img"
1708
+ width="1em"
1709
+ height="1em"
1710
+ >
1711
+ <path
1712
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1713
+ />
1714
+ </svg>
1715
+ </span>
1716
+ </span>
1483
1717
  </div>
1484
1718
  </a>
1485
1719
  </div>
@@ -1533,10 +1767,23 @@ cssPrefix: pf-d-dashboard
1533
1767
  <dt class="pf-v6-c-description-list__term">
1534
1768
  <div class="pf-v6-l-flex pf-m-nowrap">
1535
1769
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1536
- <i
1537
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1538
- aria-hidden="true"
1539
- ></i>
1770
+ <span class="pf-v6-c-icon">
1771
+ <span class="pf-v6-c-icon__content pf-m-danger">
1772
+ <svg
1773
+ class="pf-v6-svg"
1774
+ viewBox="0 0 32 32"
1775
+ fill="currentColor"
1776
+ aria-hidden="true"
1777
+ role="img"
1778
+ width="1em"
1779
+ height="1em"
1780
+ >
1781
+ <path
1782
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1783
+ />
1784
+ </svg>
1785
+ </span>
1786
+ </span>
1540
1787
  </div>
1541
1788
  <div
1542
1789
  class="pf-v6-l-flex__item"
@@ -1560,10 +1807,25 @@ cssPrefix: pf-d-dashboard
1560
1807
  <dt class="pf-v6-c-description-list__term">
1561
1808
  <div class="pf-v6-l-flex pf-m-nowrap">
1562
1809
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1563
- <i
1564
- class="fas fa-check-circle pf-v6-u-success-color-100"
1565
- aria-hidden="true"
1566
- ></i>
1810
+ <span class="pf-v6-c-icon">
1811
+ <span
1812
+ class="pf-v6-c-icon__content pf-m-success"
1813
+ >
1814
+ <svg
1815
+ class="pf-v6-svg"
1816
+ viewBox="0 0 32 32"
1817
+ fill="currentColor"
1818
+ aria-hidden="true"
1819
+ role="img"
1820
+ width="1em"
1821
+ height="1em"
1822
+ >
1823
+ <path
1824
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1825
+ />
1826
+ </svg>
1827
+ </span>
1828
+ </span>
1567
1829
  </div>
1568
1830
  <div
1569
1831
  class="pf-v6-l-flex__item"
@@ -1622,10 +1884,25 @@ cssPrefix: pf-d-dashboard
1622
1884
  <dt class="pf-v6-c-description-list__term">
1623
1885
  <div class="pf-v6-l-flex pf-m-nowrap">
1624
1886
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1625
- <i
1626
- class="fas fa-check-circle pf-v6-u-success-color-100"
1627
- aria-hidden="true"
1628
- ></i>
1887
+ <span class="pf-v6-c-icon">
1888
+ <span
1889
+ class="pf-v6-c-icon__content pf-m-success"
1890
+ >
1891
+ <svg
1892
+ class="pf-v6-svg"
1893
+ viewBox="0 0 32 32"
1894
+ fill="currentColor"
1895
+ aria-hidden="true"
1896
+ role="img"
1897
+ width="1em"
1898
+ height="1em"
1899
+ >
1900
+ <path
1901
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
1902
+ />
1903
+ </svg>
1904
+ </span>
1905
+ </span>
1629
1906
  </div>
1630
1907
  <div class="pf-v6-l-flex__item">Created container</div>
1631
1908
  </div>
@@ -1648,10 +1925,25 @@ cssPrefix: pf-d-dashboard
1648
1925
  <dt class="pf-v6-c-description-list__term">
1649
1926
  <div class="pf-v6-l-flex pf-m-nowrap">
1650
1927
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1651
- <i
1652
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1653
- aria-hidden="true"
1654
- ></i>
1928
+ <span class="pf-v6-c-icon">
1929
+ <span
1930
+ class="pf-v6-c-icon__content pf-m-warning"
1931
+ >
1932
+ <svg
1933
+ class="pf-v6-svg"
1934
+ viewBox="0 0 32 32"
1935
+ fill="currentColor"
1936
+ aria-hidden="true"
1937
+ role="img"
1938
+ width="1em"
1939
+ height="1em"
1940
+ >
1941
+ <path
1942
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
1943
+ />
1944
+ </svg>
1945
+ </span>
1946
+ </span>
1655
1947
  </div>
1656
1948
  <div
1657
1949
  class="pf-v6-l-flex__item"
@@ -1676,10 +1968,23 @@ cssPrefix: pf-d-dashboard
1676
1968
  <dt class="pf-v6-c-description-list__term">
1677
1969
  <div class="pf-v6-l-flex pf-m-nowrap">
1678
1970
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1679
- <i
1680
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1681
- aria-hidden="true"
1682
- ></i>
1971
+ <span class="pf-v6-c-icon">
1972
+ <span class="pf-v6-c-icon__content pf-m-danger">
1973
+ <svg
1974
+ class="pf-v6-svg"
1975
+ viewBox="0 0 32 32"
1976
+ fill="currentColor"
1977
+ aria-hidden="true"
1978
+ role="img"
1979
+ width="1em"
1980
+ height="1em"
1981
+ >
1982
+ <path
1983
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
1984
+ />
1985
+ </svg>
1986
+ </span>
1987
+ </span>
1683
1988
  </div>
1684
1989
  <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1685
1990
  </div>
@@ -1702,10 +2007,25 @@ cssPrefix: pf-d-dashboard
1702
2007
  <dt class="pf-v6-c-description-list__term">
1703
2008
  <div class="pf-v6-l-flex pf-m-nowrap">
1704
2009
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1705
- <i
1706
- class="fas fa-check-circle pf-v6-u-success-color-100"
1707
- aria-hidden="true"
1708
- ></i>
2010
+ <span class="pf-v6-c-icon">
2011
+ <span
2012
+ class="pf-v6-c-icon__content pf-m-success"
2013
+ >
2014
+ <svg
2015
+ class="pf-v6-svg"
2016
+ viewBox="0 0 32 32"
2017
+ fill="currentColor"
2018
+ aria-hidden="true"
2019
+ role="img"
2020
+ width="1em"
2021
+ height="1em"
2022
+ >
2023
+ <path
2024
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2025
+ />
2026
+ </svg>
2027
+ </span>
2028
+ </span>
1709
2029
  </div>
1710
2030
  <div class="pf-v6-l-flex__item">Created container</div>
1711
2031
  </div>
@@ -1728,10 +2048,25 @@ cssPrefix: pf-d-dashboard
1728
2048
  <dt class="pf-v6-c-description-list__term">
1729
2049
  <div class="pf-v6-l-flex pf-m-nowrap">
1730
2050
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1731
- <i
1732
- class="fas fa-check-circle pf-v6-u-success-color-100"
1733
- aria-hidden="true"
1734
- ></i>
2051
+ <span class="pf-v6-c-icon">
2052
+ <span
2053
+ class="pf-v6-c-icon__content pf-m-success"
2054
+ >
2055
+ <svg
2056
+ class="pf-v6-svg"
2057
+ viewBox="0 0 32 32"
2058
+ fill="currentColor"
2059
+ aria-hidden="true"
2060
+ role="img"
2061
+ width="1em"
2062
+ height="1em"
2063
+ >
2064
+ <path
2065
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
2066
+ />
2067
+ </svg>
2068
+ </span>
2069
+ </span>
1735
2070
  </div>
1736
2071
  <div class="pf-v6-l-flex__item">Created container</div>
1737
2072
  </div>