@patternfly/patternfly 6.5.0-prerelease.52 → 6.5.0-prerelease.54

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 (15) hide show
  1. package/components/Card/card.css +20 -8
  2. package/components/Card/card.scss +26 -7
  3. package/components/Wizard/wizard.css +20 -2
  4. package/components/Wizard/wizard.scss +22 -2
  5. package/components/_index.css +40 -10
  6. package/docs/components/Wizard/examples/Wizard.md +323 -0
  7. package/docs/demos/Card/examples/Card.md +564 -86
  8. package/docs/demos/CardView/examples/CardView.md +15 -1
  9. package/docs/demos/Compass/examples/Compass.md +393 -82
  10. package/docs/demos/Dashboard/examples/Dashboard.md +434 -100
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +40 -10
  13. package/patternfly.css +40 -10
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/docs/demos/Dashboard/examples/Dashboard.md CHANGED
@@ -395,10 +395,19 @@ cssPrefix: pf-d-dashboard
395
395
  >
396
396
  <span class="pf-v6-c-label__content">
397
397
  <span class="pf-v6-c-label__icon">
398
- <i
399
- class="pf-v6-pficon pf-v6-pficon-port"
398
+ <svg
399
+ class="pf-v6-svg"
400
+ viewBox="0 0 32 32"
401
+ fill="currentColor"
400
402
  aria-hidden="true"
401
- ></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>
402
411
  </span>
403
412
  <span
404
413
  class="pf-v6-c-label__text"
@@ -432,11 +441,25 @@ cssPrefix: pf-d-dashboard
432
441
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
433
442
  style="row-gap: var(--pf-6-global--spacer--md);"
434
443
  >
435
- <i
436
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
437
- style="line-height: 1"
438
- aria-hidden="true"
439
- ></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>
440
463
  <p class="pf-v6-u-color-200">
441
464
  System reboot
442
465
  <b class="pf-v6-u-color-100">is not</b> required
@@ -497,10 +520,19 @@ cssPrefix: pf-d-dashboard
497
520
  >
498
521
  <span class="pf-v6-c-label__content">
499
522
  <span class="pf-v6-c-label__icon">
500
- <i
501
- class="fas fa-cube"
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
502
527
  aria-hidden="true"
503
- ></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>
504
536
  </span>
505
537
  <span
506
538
  class="pf-v6-c-label__text"
@@ -534,11 +566,23 @@ cssPrefix: pf-d-dashboard
534
566
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
535
567
  style="row-gap: var(--pf-6-global--spacer--md);"
536
568
  >
537
- <i
538
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-danger-color-100"
539
- style="line-height: 1"
540
- aria-hidden="true"
541
- ></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>
542
586
  <p class="pf-v6-u-color-200">
543
587
  System reboot
544
588
  <b class="pf-v6-u-color-100">is</b> required
@@ -599,10 +643,19 @@ cssPrefix: pf-d-dashboard
599
643
  >
600
644
  <span class="pf-v6-c-label__content">
601
645
  <span class="pf-v6-c-label__icon">
602
- <i
603
- class="pf-v6-pficon pf-v6-pficon-automation"
646
+ <svg
647
+ class="pf-v6-svg"
648
+ viewBox="0 0 32 32"
649
+ fill="currentColor"
604
650
  aria-hidden="true"
605
- ></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>
606
659
  </span>
607
660
  <span
608
661
  class="pf-v6-c-label__text"
@@ -636,11 +689,25 @@ cssPrefix: pf-d-dashboard
636
689
  class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
637
690
  style="row-gap: var(--pf-6-global--spacer--md);"
638
691
  >
639
- <i
640
- class="pf-v6-pficon pf-v6-pficon-on pf-v6-u-color-400"
641
- style="line-height: 1"
642
- aria-hidden="true"
643
- ></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>
644
711
  <p class="pf-v6-u-color-200">
645
712
  System reboot
646
713
  <b class="pf-v6-u-color-100">is not</b> required
@@ -693,10 +760,23 @@ cssPrefix: pf-d-dashboard
693
760
  >
694
761
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
695
762
  <div class="pf-v6-l-flex__item">
696
- <i
697
- class="fas fa-check-circle pf-v6-u-success-color-100"
698
- aria-hidden="true"
699
- ></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>
700
780
  </div>
701
781
  <div class="pf-v6-l-flex__item">
702
782
  <span>Cluster</span>
@@ -704,10 +784,23 @@ cssPrefix: pf-d-dashboard
704
784
  </div>
705
785
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
706
786
  <div class="pf-v6-l-flex__item">
707
- <i
708
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
709
- aria-hidden="true"
710
- ></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>
711
804
  </div>
712
805
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
713
806
  <span class="popover-parent">
@@ -717,10 +810,23 @@ cssPrefix: pf-d-dashboard
717
810
  </div>
718
811
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
719
812
  <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
720
- <i
721
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
722
- aria-hidden="true"
723
- ></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>
724
830
  </div>
725
831
  <div
726
832
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -735,10 +841,23 @@ cssPrefix: pf-d-dashboard
735
841
  </div>
736
842
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
737
843
  <div class="pf-v6-l-flex__item">
738
- <i
739
- class="fas fa-check-circle pf-v6-u-success-color-100"
740
- aria-hidden="true"
741
- ></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>
742
861
  </div>
743
862
  <div
744
863
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -753,10 +872,23 @@ cssPrefix: pf-d-dashboard
753
872
  </div>
754
873
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
755
874
  <div class="pf-v6-l-flex__item">
756
- <i
757
- class="fas fa-check-circle pf-v6-u-success-color-100"
758
- aria-hidden="true"
759
- ></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>
760
892
  </div>
761
893
  <div
762
894
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -771,10 +903,23 @@ cssPrefix: pf-d-dashboard
771
903
  </div>
772
904
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
773
905
  <div class="pf-v6-l-flex__item">
774
- <i
775
- class="fas fa-check-circle pf-v6-u-success-color-100"
776
- aria-hidden="true"
777
- ></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>
778
923
  </div>
779
924
  <div
780
925
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -786,10 +931,23 @@ cssPrefix: pf-d-dashboard
786
931
  </div>
787
932
  <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
788
933
  <div class="pf-v6-l-flex__item">
789
- <i
790
- class="fas fa-check-circle pf-v6-u-success-color-100"
791
- aria-hidden="true"
792
- ></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>
793
951
  </div>
794
952
  <div
795
953
  class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
@@ -1385,10 +1543,25 @@ cssPrefix: pf-d-dashboard
1385
1543
  <a href="#">
1386
1544
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1387
1545
  <span>3</span>
1388
- <i
1389
- class="fas fa-check-circle pf-v6-u-success-color-100"
1390
- aria-hidden="true"
1391
- ></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>
1392
1565
  </div>
1393
1566
  </a>
1394
1567
  </div>
@@ -1408,10 +1581,25 @@ cssPrefix: pf-d-dashboard
1408
1581
  <a href="#">
1409
1582
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1410
1583
  <span>8</span>
1411
- <i
1412
- class="fas fa-check-circle pf-v6-u-success-color-100"
1413
- aria-hidden="true"
1414
- ></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>
1415
1603
  </div>
1416
1604
  </a>
1417
1605
  </div>
@@ -1431,10 +1619,25 @@ cssPrefix: pf-d-dashboard
1431
1619
  <a href="#">
1432
1620
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1433
1621
  <span>20</span>
1434
- <i
1435
- class="fas fa-check-circle pf-v6-u-success-color-100"
1436
- aria-hidden="true"
1437
- ></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>
1438
1641
  </div>
1439
1642
  </a>
1440
1643
  </div>
@@ -1454,10 +1657,25 @@ cssPrefix: pf-d-dashboard
1454
1657
  <a href="#">
1455
1658
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1456
1659
  <span>12</span>
1457
- <i
1458
- class="fas fa-check-circle pf-v6-u-success-color-100"
1459
- aria-hidden="true"
1460
- ></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>
1461
1679
  </div>
1462
1680
  </a>
1463
1681
  </div>
@@ -1477,10 +1695,25 @@ cssPrefix: pf-d-dashboard
1477
1695
  <a href="#">
1478
1696
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1479
1697
  <span>18</span>
1480
- <i
1481
- class="fas fa-check-circle pf-v6-u-success-color-100"
1482
- aria-hidden="true"
1483
- ></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>
1484
1717
  </div>
1485
1718
  </a>
1486
1719
  </div>
@@ -1534,10 +1767,23 @@ cssPrefix: pf-d-dashboard
1534
1767
  <dt class="pf-v6-c-description-list__term">
1535
1768
  <div class="pf-v6-l-flex pf-m-nowrap">
1536
1769
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1537
- <i
1538
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1539
- aria-hidden="true"
1540
- ></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>
1541
1787
  </div>
1542
1788
  <div
1543
1789
  class="pf-v6-l-flex__item"
@@ -1561,10 +1807,25 @@ cssPrefix: pf-d-dashboard
1561
1807
  <dt class="pf-v6-c-description-list__term">
1562
1808
  <div class="pf-v6-l-flex pf-m-nowrap">
1563
1809
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1564
- <i
1565
- class="fas fa-check-circle pf-v6-u-success-color-100"
1566
- aria-hidden="true"
1567
- ></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>
1568
1829
  </div>
1569
1830
  <div
1570
1831
  class="pf-v6-l-flex__item"
@@ -1623,10 +1884,25 @@ cssPrefix: pf-d-dashboard
1623
1884
  <dt class="pf-v6-c-description-list__term">
1624
1885
  <div class="pf-v6-l-flex pf-m-nowrap">
1625
1886
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1626
- <i
1627
- class="fas fa-check-circle pf-v6-u-success-color-100"
1628
- aria-hidden="true"
1629
- ></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>
1630
1906
  </div>
1631
1907
  <div class="pf-v6-l-flex__item">Created container</div>
1632
1908
  </div>
@@ -1649,10 +1925,25 @@ cssPrefix: pf-d-dashboard
1649
1925
  <dt class="pf-v6-c-description-list__term">
1650
1926
  <div class="pf-v6-l-flex pf-m-nowrap">
1651
1927
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1652
- <i
1653
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1654
- aria-hidden="true"
1655
- ></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>
1656
1947
  </div>
1657
1948
  <div
1658
1949
  class="pf-v6-l-flex__item"
@@ -1677,10 +1968,23 @@ cssPrefix: pf-d-dashboard
1677
1968
  <dt class="pf-v6-c-description-list__term">
1678
1969
  <div class="pf-v6-l-flex pf-m-nowrap">
1679
1970
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1680
- <i
1681
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1682
- aria-hidden="true"
1683
- ></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>
1684
1988
  </div>
1685
1989
  <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1686
1990
  </div>
@@ -1703,10 +2007,25 @@ cssPrefix: pf-d-dashboard
1703
2007
  <dt class="pf-v6-c-description-list__term">
1704
2008
  <div class="pf-v6-l-flex pf-m-nowrap">
1705
2009
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1706
- <i
1707
- class="fas fa-check-circle pf-v6-u-success-color-100"
1708
- aria-hidden="true"
1709
- ></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>
1710
2029
  </div>
1711
2030
  <div class="pf-v6-l-flex__item">Created container</div>
1712
2031
  </div>
@@ -1729,10 +2048,25 @@ cssPrefix: pf-d-dashboard
1729
2048
  <dt class="pf-v6-c-description-list__term">
1730
2049
  <div class="pf-v6-l-flex pf-m-nowrap">
1731
2050
  <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1732
- <i
1733
- class="fas fa-check-circle pf-v6-u-success-color-100"
1734
- aria-hidden="true"
1735
- ></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>
1736
2070
  </div>
1737
2071
  <div class="pf-v6-l-flex__item">Created container</div>
1738
2072
  </div>