@patternfly/patternfly 6.3.1 → 6.4.0-prerelease.1

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 (140) hide show
  1. package/README.md +23 -15
  2. package/base/normalize.scss +4 -0
  3. package/base/patternfly-variables.css +1172 -1
  4. package/base/patternfly-variables.scss +10 -0
  5. package/base/tokens/tokens-charts-dark.scss +1 -1
  6. package/base/tokens/tokens-charts.scss +1 -1
  7. package/base/tokens/tokens-dark.scss +13 -1
  8. package/base/tokens/tokens-default.scss +60 -2
  9. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  10. package/base/tokens/tokens-highcontrast.scss +703 -0
  11. package/base/tokens/tokens-local.scss +1 -0
  12. package/base/tokens/tokens-palette.scss +9 -1
  13. package/components/Accordion/accordion.css +42 -15
  14. package/components/Accordion/accordion.scss +48 -18
  15. package/components/Alert/alert-group.css +17 -15
  16. package/components/Alert/alert-group.scss +22 -18
  17. package/components/Badge/badge.css +2 -0
  18. package/components/Badge/badge.scss +2 -0
  19. package/components/Banner/banner.css +4 -0
  20. package/components/Banner/banner.scss +4 -0
  21. package/components/Button/button.css +34 -4
  22. package/components/Button/button.scss +36 -6
  23. package/components/CalendarMonth/calendar-month.css +35 -4
  24. package/components/CalendarMonth/calendar-month.scss +38 -4
  25. package/components/Card/card.css +7 -4
  26. package/components/Card/card.scss +7 -4
  27. package/components/CodeBlock/code-block.css +3 -0
  28. package/components/CodeBlock/code-block.scss +3 -0
  29. package/components/CodeEditor/code-editor.css +23 -3
  30. package/components/CodeEditor/code-editor.scss +28 -5
  31. package/components/DatePicker/date-picker.css +3 -0
  32. package/components/DatePicker/date-picker.scss +4 -0
  33. package/components/Divider/divider.css +2 -0
  34. package/components/Divider/divider.scss +2 -0
  35. package/components/Drawer/drawer.css +46 -41
  36. package/components/Drawer/drawer.scss +45 -36
  37. package/components/DualListSelector/dual-list-selector.css +21 -4
  38. package/components/DualListSelector/dual-list-selector.scss +23 -4
  39. package/components/ExpandableSection/expandable-section.css +6 -2
  40. package/components/ExpandableSection/expandable-section.scss +7 -3
  41. package/components/FormControl/form-control.css +6 -7
  42. package/components/FormControl/form-control.scss +8 -10
  43. package/components/Label/label.css +20 -11
  44. package/components/Label/label.scss +21 -11
  45. package/components/Login/login.css +3 -0
  46. package/components/Login/login.scss +3 -0
  47. package/components/Menu/menu.css +18 -0
  48. package/components/Menu/menu.scss +19 -1
  49. package/components/MenuToggle/menu-toggle.css +13 -6
  50. package/components/MenuToggle/menu-toggle.scss +13 -6
  51. package/components/ModalBox/modal-box.css +3 -0
  52. package/components/ModalBox/modal-box.scss +3 -0
  53. package/components/Nav/nav.css +17 -0
  54. package/components/Nav/nav.scss +20 -0
  55. package/components/Page/page.css +73 -25
  56. package/components/Page/page.scss +60 -19
  57. package/components/Pagination/pagination.css +15 -2
  58. package/components/Pagination/pagination.scss +15 -2
  59. package/components/Panel/panel.css +14 -1
  60. package/components/Panel/panel.scss +14 -1
  61. package/components/Popover/popover.css +4 -0
  62. package/components/Popover/popover.scss +4 -0
  63. package/components/Progress/progress.css +19 -0
  64. package/components/Progress/progress.scss +22 -0
  65. package/components/Sidebar/sidebar.css +7 -0
  66. package/components/Sidebar/sidebar.scss +7 -0
  67. package/components/SimpleList/simple-list.css +15 -0
  68. package/components/SimpleList/simple-list.scss +17 -1
  69. package/components/Slider/slider.css +9 -0
  70. package/components/Slider/slider.scss +9 -0
  71. package/components/Switch/switch.css +7 -1
  72. package/components/Switch/switch.scss +7 -1
  73. package/components/Table/table.css +29 -0
  74. package/components/Table/table.scss +33 -0
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +3 -0
  78. package/components/TextInputGroup/text-input-group.scss +4 -1
  79. package/components/ToggleGroup/toggle-group.css +18 -9
  80. package/components/ToggleGroup/toggle-group.scss +24 -17
  81. package/components/Toolbar/toolbar.css +7 -0
  82. package/components/Toolbar/toolbar.scss +7 -0
  83. package/components/TreeView/tree-view.css +15 -0
  84. package/components/TreeView/tree-view.scss +17 -0
  85. package/components/Wizard/wizard.css +37 -6
  86. package/components/Wizard/wizard.scss +44 -10
  87. package/components/_index.css +615 -167
  88. package/docs/components/Alert/examples/Alert.md +3 -4
  89. package/docs/components/Button/examples/Button.md +1 -3
  90. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +25 -33
  91. package/docs/components/CodeBlock/examples/CodeBlock.md +13 -7
  92. package/docs/components/CodeEditor/examples/CodeEditor.md +20 -6
  93. package/docs/components/DataList/examples/DataList.md +66 -184
  94. package/docs/components/DatePicker/examples/DatePicker.md +4 -1
  95. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  96. package/docs/components/DualListSelector/examples/DualListSelector.md +0 -195
  97. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  98. package/docs/components/ExpandableSection/examples/ExpandableSection.md +92 -18
  99. package/docs/components/FileUpload/examples/FileUpload.md +4 -3
  100. package/docs/components/Form/examples/Form.md +19 -18
  101. package/docs/components/HelperText/examples/HelperText.md +65 -75
  102. package/docs/components/Hint/examples/Hint.md +3 -3
  103. package/docs/components/Icon/examples/Icon.md +0 -10
  104. package/docs/components/InlineEdit/examples/InlineEdit.md +0 -4
  105. package/docs/components/JumpLinks/examples/JumpLinks.md +164 -77
  106. package/docs/components/Label/examples/Label.md +2 -2
  107. package/docs/components/Login/examples/Login.md +42 -37
  108. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +32 -6
  109. package/docs/components/Pagination/examples/Pagination.md +111 -0
  110. package/docs/components/Popover/examples/Popover.md +0 -4
  111. package/docs/components/Progress/examples/Progress.md +223 -210
  112. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  113. package/docs/components/Table/examples/Table.md +947 -1423
  114. package/docs/components/TextInputGroup/examples/TextInputGroup.md +126 -47
  115. package/docs/components/Title/examples/Title.md +8 -8
  116. package/docs/components/Truncate/examples/Truncate.md +8 -6
  117. package/docs/components/Wizard/examples/Wizard.md +583 -0
  118. package/docs/demos/Alert/examples/Alert.md +28 -19
  119. package/docs/demos/Card/examples/Card.md +8 -5
  120. package/docs/demos/CardView/examples/CardView.md +81 -85
  121. package/docs/demos/Dashboard/examples/Dashboard.md +10 -22
  122. package/docs/demos/DataList/examples/DataList.md +528 -168
  123. package/docs/demos/DescriptionList/examples/DescriptionList.md +13 -3
  124. package/docs/demos/Drawer/examples/Drawer.md +0 -2
  125. package/docs/demos/Form/examples/BasicForms.md +93 -62
  126. package/docs/demos/HelperText/examples/HelperText.md +31 -23
  127. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -5
  128. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4 -4
  129. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +56 -38
  130. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +726 -312
  131. package/docs/demos/Skeleton/examples/Skeleton.md +3 -1
  132. package/docs/demos/Table/examples/Table.md +5 -20
  133. package/docs/demos/Tabs/examples/Tabs.md +2 -1
  134. package/package.json +12 -7
  135. package/patternfly-base-no-globals.css +1172 -1
  136. package/patternfly-base.css +1176 -1
  137. package/patternfly-no-globals.css +1787 -168
  138. package/patternfly.css +1822 -199
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -552,10 +552,7 @@ wrapperTag: div
552
552
  aria-label="Simple data list example"
553
553
  id="primary-detail-expanded-example-data-list"
554
554
  >
555
- <li
556
- class="pf-v6-c-data-list__item"
557
- aria-labelledby="primary-detail-expanded-example-data-list-item-1"
558
- >
555
+ <li class="pf-v6-c-data-list__item">
559
556
  <div class="pf-v6-c-data-list__item-row">
560
557
  <div class="pf-v6-c-data-list__item-content">
561
558
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -580,29 +577,52 @@ wrapperTag: div
580
577
  <div class="pf-v6-l-flex pf-m-wrap">
581
578
  <div class="pf-v6-l-flex pf-m-space-items-xs">
582
579
  <div class="pf-v6-l-flex__item">
583
- <i
584
- class="fas fa-code-branch"
585
- aria-hidden="true"
586
- ></i>
580
+ <span class="pf-v6-c-icon">
581
+ <span class="pf-v6-c-icon__content">
582
+ <i
583
+ class="fas fa-code-branch"
584
+ aria-hidden="true"
585
+ ></i>
586
+ </span>
587
+ </span>
587
588
  </div>
588
589
  <div class="pf-v6-l-flex__item">
589
590
  <span>10</span>
591
+ <span class="pf-v6-screen-reader">Branches</span>
590
592
  </div>
591
593
  </div>
592
594
  <div class="pf-v6-l-flex pf-m-space-items-xs">
593
595
  <div class="pf-v6-l-flex__item">
594
- <i class="fas fa-code" aria-hidden="true"></i>
596
+ <span class="pf-v6-c-icon">
597
+ <span class="pf-v6-c-icon__content">
598
+ <i
599
+ class="fas fa-code"
600
+ aria-hidden="true"
601
+ ></i>
602
+ </span>
603
+ </span>
595
604
  </div>
596
605
  <div class="pf-v6-l-flex__item">
597
606
  <span>4</span>
607
+ <span
608
+ class="pf-v6-screen-reader"
609
+ >Code blocks</span>
598
610
  </div>
599
611
  </div>
600
612
  <div class="pf-v6-l-flex pf-m-space-items-xs">
601
613
  <div class="pf-v6-l-flex__item">
602
- <i class="fas fa-cube" aria-hidden="true"></i>
614
+ <span class="pf-v6-c-icon">
615
+ <span class="pf-v6-c-icon__content">
616
+ <i
617
+ class="fas fa-cube"
618
+ aria-hidden="true"
619
+ ></i>
620
+ </span>
621
+ </span>
603
622
  </div>
604
623
  <div class="pf-v6-l-flex__item">
605
624
  <span>5</span>
625
+ <span class="pf-v6-screen-reader">Workspaces</span>
606
626
  </div>
607
627
  </div>
608
628
  <div
@@ -631,10 +651,7 @@ wrapperTag: div
631
651
  </div>
632
652
  </li>
633
653
 
634
- <li
635
- class="pf-v6-c-data-list__item"
636
- aria-labelledby="primary-detail-expanded-example-data-list-item-2"
637
- >
654
+ <li class="pf-v6-c-data-list__item">
638
655
  <div class="pf-v6-c-data-list__item-row">
639
656
  <div class="pf-v6-c-data-list__item-content">
640
657
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -656,62 +673,106 @@ wrapperTag: div
656
673
  <div class="pf-v6-l-flex pf-m-wrap">
657
674
  <div class="pf-v6-l-flex pf-m-space-items-xs">
658
675
  <div class="pf-v6-l-flex__item">
659
- <i
660
- class="fas fa-code-branch"
661
- aria-hidden="true"
662
- ></i>
676
+ <span class="pf-v6-c-icon">
677
+ <span class="pf-v6-c-icon__content">
678
+ <i
679
+ class="fas fa-code-branch"
680
+ aria-hidden="true"
681
+ ></i>
682
+ </span>
683
+ </span>
663
684
  </div>
664
685
  <div class="pf-v6-l-flex__item">
665
686
  <span>5</span>
687
+ <span class="pf-v6-screen-reader">Branches</span>
666
688
  </div>
667
689
  </div>
668
690
  <div class="pf-v6-l-flex pf-m-space-items-xs">
669
691
  <div class="pf-v6-l-flex__item">
670
- <i class="fas fa-code" aria-hidden="true"></i>
692
+ <span class="pf-v6-c-icon">
693
+ <span class="pf-v6-c-icon__content">
694
+ <i
695
+ class="fas fa-code"
696
+ aria-hidden="true"
697
+ ></i>
698
+ </span>
699
+ </span>
671
700
  </div>
672
701
  <div class="pf-v6-l-flex__item">
673
702
  <span>9</span>
703
+ <span
704
+ class="pf-v6-screen-reader"
705
+ >Code blocks</span>
674
706
  </div>
675
707
  </div>
676
708
  <div class="pf-v6-l-flex pf-m-space-items-xs">
677
709
  <div class="pf-v6-l-flex__item">
678
- <i class="fas fa-cube" aria-hidden="true"></i>
710
+ <span class="pf-v6-c-icon">
711
+ <span class="pf-v6-c-icon__content">
712
+ <i
713
+ class="fas fa-cube"
714
+ aria-hidden="true"
715
+ ></i>
716
+ </span>
717
+ </span>
679
718
  </div>
680
719
  <div class="pf-v6-l-flex__item">
681
720
  <span>2</span>
721
+ <span class="pf-v6-screen-reader">Workspaces</span>
682
722
  </div>
683
723
  </div>
684
724
  <div class="pf-v6-l-flex pf-m-space-items-xs">
685
725
  <div class="pf-v6-l-flex__item">
686
- <i
687
- class="fas fa-check-circle"
688
- aria-hidden="true"
689
- ></i>
726
+ <span class="pf-v6-c-icon">
727
+ <span
728
+ class="pf-v6-c-icon__content pf-m-success"
729
+ >
730
+ <i
731
+ class="fas fa-check-circle"
732
+ aria-hidden="true"
733
+ ></i>
734
+ </span>
735
+ </span>
690
736
  </div>
691
737
  <div class="pf-v6-l-flex__item">
692
738
  <span>11</span>
739
+ <span class="pf-v6-screen-reader">Completed</span>
693
740
  </div>
694
741
  </div>
695
742
  <div class="pf-v6-l-flex pf-m-space-items-xs">
696
743
  <div class="pf-v6-l-flex__item">
697
- <i
698
- class="fas fa-exclamation-triangle"
699
- aria-hidden="true"
700
- ></i>
744
+ <span class="pf-v6-c-icon">
745
+ <span
746
+ class="pf-v6-c-icon__content pf-m-warning"
747
+ >
748
+ <i
749
+ class="fas fa-exclamation-triangle"
750
+ aria-hidden="true"
751
+ ></i>
752
+ </span>
753
+ </span>
701
754
  </div>
702
755
  <div class="pf-v6-l-flex__item">
703
756
  <span>4</span>
757
+ <span class="pf-v6-screen-reader">Warnings</span>
704
758
  </div>
705
759
  </div>
706
760
  <div class="pf-v6-l-flex pf-m-space-items-xs">
707
761
  <div class="pf-v6-l-flex__item">
708
- <i
709
- class="fas fa-times-circle"
710
- aria-hidden="true"
711
- ></i>
762
+ <span class="pf-v6-c-icon">
763
+ <span
764
+ class="pf-v6-c-icon__content pf-m-danger"
765
+ >
766
+ <i
767
+ class="fas fa-exclamation-circle"
768
+ aria-hidden="true"
769
+ ></i>
770
+ </span>
771
+ </span>
712
772
  </div>
713
773
  <div class="pf-v6-l-flex__item">
714
774
  <span>1</span>
775
+ <span class="pf-v6-screen-reader">Errors</span>
715
776
  </div>
716
777
  </div>
717
778
  <div
@@ -740,10 +801,7 @@ wrapperTag: div
740
801
  </div>
741
802
  </li>
742
803
 
743
- <li
744
- class="pf-v6-c-data-list__item"
745
- aria-labelledby="primary-detail-expanded-example-data-list-item-3"
746
- >
804
+ <li class="pf-v6-c-data-list__item">
747
805
  <div class="pf-v6-c-data-list__item-row">
748
806
  <div class="pf-v6-c-data-list__item-content">
749
807
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -771,10 +829,7 @@ wrapperTag: div
771
829
  </div>
772
830
  </li>
773
831
 
774
- <li
775
- class="pf-v6-c-data-list__item"
776
- aria-labelledby="primary-detail-expanded-example-data-list-item-4"
777
- >
832
+ <li class="pf-v6-c-data-list__item">
778
833
  <div class="pf-v6-c-data-list__item-row">
779
834
  <div class="pf-v6-c-data-list__item-content">
780
835
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -799,29 +854,52 @@ wrapperTag: div
799
854
  <div class="pf-v6-l-flex pf-m-wrap">
800
855
  <div class="pf-v6-l-flex pf-m-space-items-xs">
801
856
  <div class="pf-v6-l-flex__item">
802
- <i
803
- class="fas fa-code-branch"
804
- aria-hidden="true"
805
- ></i>
857
+ <span class="pf-v6-c-icon">
858
+ <span class="pf-v6-c-icon__content">
859
+ <i
860
+ class="fas fa-code-branch"
861
+ aria-hidden="true"
862
+ ></i>
863
+ </span>
864
+ </span>
806
865
  </div>
807
866
  <div class="pf-v6-l-flex__item">
808
867
  <span>10</span>
868
+ <span class="pf-v6-screen-reader">Branches</span>
809
869
  </div>
810
870
  </div>
811
871
  <div class="pf-v6-l-flex pf-m-space-items-xs">
812
872
  <div class="pf-v6-l-flex__item">
813
- <i class="fas fa-code" aria-hidden="true"></i>
873
+ <span class="pf-v6-c-icon">
874
+ <span class="pf-v6-c-icon__content">
875
+ <i
876
+ class="fas fa-code"
877
+ aria-hidden="true"
878
+ ></i>
879
+ </span>
880
+ </span>
814
881
  </div>
815
882
  <div class="pf-v6-l-flex__item">
816
883
  <span>4</span>
884
+ <span
885
+ class="pf-v6-screen-reader"
886
+ >Code blocks</span>
817
887
  </div>
818
888
  </div>
819
889
  <div class="pf-v6-l-flex pf-m-space-items-xs">
820
890
  <div class="pf-v6-l-flex__item">
821
- <i class="fas fa-cube" aria-hidden="true"></i>
891
+ <span class="pf-v6-c-icon">
892
+ <span class="pf-v6-c-icon__content">
893
+ <i
894
+ class="fas fa-cube"
895
+ aria-hidden="true"
896
+ ></i>
897
+ </span>
898
+ </span>
822
899
  </div>
823
900
  <div class="pf-v6-l-flex__item">
824
901
  <span>5</span>
902
+ <span class="pf-v6-screen-reader">Workspaces</span>
825
903
  </div>
826
904
  </div>
827
905
  <div
@@ -850,10 +928,7 @@ wrapperTag: div
850
928
  </div>
851
929
  </li>
852
930
 
853
- <li
854
- class="pf-v6-c-data-list__item"
855
- aria-labelledby="primary-detail-expanded-example-data-list-item-5"
856
- >
931
+ <li class="pf-v6-c-data-list__item">
857
932
  <div class="pf-v6-c-data-list__item-row">
858
933
  <div class="pf-v6-c-data-list__item-content">
859
934
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -875,62 +950,106 @@ wrapperTag: div
875
950
  <div class="pf-v6-l-flex pf-m-wrap">
876
951
  <div class="pf-v6-l-flex pf-m-space-items-xs">
877
952
  <div class="pf-v6-l-flex__item">
878
- <i
879
- class="fas fa-code-branch"
880
- aria-hidden="true"
881
- ></i>
953
+ <span class="pf-v6-c-icon">
954
+ <span class="pf-v6-c-icon__content">
955
+ <i
956
+ class="fas fa-code-branch"
957
+ aria-hidden="true"
958
+ ></i>
959
+ </span>
960
+ </span>
882
961
  </div>
883
962
  <div class="pf-v6-l-flex__item">
884
963
  <span>5</span>
964
+ <span class="pf-v6-screen-reader">Branches</span>
885
965
  </div>
886
966
  </div>
887
967
  <div class="pf-v6-l-flex pf-m-space-items-xs">
888
968
  <div class="pf-v6-l-flex__item">
889
- <i class="fas fa-code" aria-hidden="true"></i>
969
+ <span class="pf-v6-c-icon">
970
+ <span class="pf-v6-c-icon__content">
971
+ <i
972
+ class="fas fa-code"
973
+ aria-hidden="true"
974
+ ></i>
975
+ </span>
976
+ </span>
890
977
  </div>
891
978
  <div class="pf-v6-l-flex__item">
892
979
  <span>9</span>
980
+ <span
981
+ class="pf-v6-screen-reader"
982
+ >Code blocks</span>
893
983
  </div>
894
984
  </div>
895
985
  <div class="pf-v6-l-flex pf-m-space-items-xs">
896
986
  <div class="pf-v6-l-flex__item">
897
- <i class="fas fa-cube" aria-hidden="true"></i>
987
+ <span class="pf-v6-c-icon">
988
+ <span class="pf-v6-c-icon__content">
989
+ <i
990
+ class="fas fa-cube"
991
+ aria-hidden="true"
992
+ ></i>
993
+ </span>
994
+ </span>
898
995
  </div>
899
996
  <div class="pf-v6-l-flex__item">
900
997
  <span>2</span>
998
+ <span class="pf-v6-screen-reader">Workspaces</span>
901
999
  </div>
902
1000
  </div>
903
1001
  <div class="pf-v6-l-flex pf-m-space-items-xs">
904
1002
  <div class="pf-v6-l-flex__item">
905
- <i
906
- class="fas fa-check-circle"
907
- aria-hidden="true"
908
- ></i>
1003
+ <span class="pf-v6-c-icon">
1004
+ <span
1005
+ class="pf-v6-c-icon__content pf-m-success"
1006
+ >
1007
+ <i
1008
+ class="fas fa-check-circle"
1009
+ aria-hidden="true"
1010
+ ></i>
1011
+ </span>
1012
+ </span>
909
1013
  </div>
910
1014
  <div class="pf-v6-l-flex__item">
911
1015
  <span>11</span>
1016
+ <span class="pf-v6-screen-reader">Completed</span>
912
1017
  </div>
913
1018
  </div>
914
1019
  <div class="pf-v6-l-flex pf-m-space-items-xs">
915
1020
  <div class="pf-v6-l-flex__item">
916
- <i
917
- class="fas fa-exclamation-triangle"
918
- aria-hidden="true"
919
- ></i>
1021
+ <span class="pf-v6-c-icon">
1022
+ <span
1023
+ class="pf-v6-c-icon__content pf-m-warning"
1024
+ >
1025
+ <i
1026
+ class="fas fa-exclamation-triangle"
1027
+ aria-hidden="true"
1028
+ ></i>
1029
+ </span>
1030
+ </span>
920
1031
  </div>
921
1032
  <div class="pf-v6-l-flex__item">
922
1033
  <span>4</span>
1034
+ <span class="pf-v6-screen-reader">Warnings</span>
923
1035
  </div>
924
1036
  </div>
925
1037
  <div class="pf-v6-l-flex pf-m-space-items-xs">
926
1038
  <div class="pf-v6-l-flex__item">
927
- <i
928
- class="fas fa-times-circle"
929
- aria-hidden="true"
930
- ></i>
1039
+ <span class="pf-v6-c-icon">
1040
+ <span
1041
+ class="pf-v6-c-icon__content pf-m-danger"
1042
+ >
1043
+ <i
1044
+ class="fas fa-exclamation-circle"
1045
+ aria-hidden="true"
1046
+ ></i>
1047
+ </span>
1048
+ </span>
931
1049
  </div>
932
1050
  <div class="pf-v6-l-flex__item">
933
1051
  <span>1</span>
1052
+ <span class="pf-v6-screen-reader">Errors</span>
934
1053
  </div>
935
1054
  </div>
936
1055
  <div
@@ -1703,10 +1822,7 @@ wrapperTag: div
1703
1822
  aria-label="Simple data list example"
1704
1823
  id="primary-detail-collapsed-example-data-list"
1705
1824
  >
1706
- <li
1707
- class="pf-v6-c-data-list__item"
1708
- aria-labelledby="primary-detail-collapsed-example-data-list-item-1"
1709
- >
1825
+ <li class="pf-v6-c-data-list__item">
1710
1826
  <div class="pf-v6-c-data-list__item-row">
1711
1827
  <div class="pf-v6-c-data-list__item-content">
1712
1828
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -1731,29 +1847,52 @@ wrapperTag: div
1731
1847
  <div class="pf-v6-l-flex pf-m-wrap">
1732
1848
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1733
1849
  <div class="pf-v6-l-flex__item">
1734
- <i
1735
- class="fas fa-code-branch"
1736
- aria-hidden="true"
1737
- ></i>
1850
+ <span class="pf-v6-c-icon">
1851
+ <span class="pf-v6-c-icon__content">
1852
+ <i
1853
+ class="fas fa-code-branch"
1854
+ aria-hidden="true"
1855
+ ></i>
1856
+ </span>
1857
+ </span>
1738
1858
  </div>
1739
1859
  <div class="pf-v6-l-flex__item">
1740
1860
  <span>10</span>
1861
+ <span class="pf-v6-screen-reader">Branches</span>
1741
1862
  </div>
1742
1863
  </div>
1743
1864
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1744
1865
  <div class="pf-v6-l-flex__item">
1745
- <i class="fas fa-code" aria-hidden="true"></i>
1866
+ <span class="pf-v6-c-icon">
1867
+ <span class="pf-v6-c-icon__content">
1868
+ <i
1869
+ class="fas fa-code"
1870
+ aria-hidden="true"
1871
+ ></i>
1872
+ </span>
1873
+ </span>
1746
1874
  </div>
1747
1875
  <div class="pf-v6-l-flex__item">
1748
1876
  <span>4</span>
1877
+ <span
1878
+ class="pf-v6-screen-reader"
1879
+ >Code blocks</span>
1749
1880
  </div>
1750
1881
  </div>
1751
1882
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1752
1883
  <div class="pf-v6-l-flex__item">
1753
- <i class="fas fa-cube" aria-hidden="true"></i>
1884
+ <span class="pf-v6-c-icon">
1885
+ <span class="pf-v6-c-icon__content">
1886
+ <i
1887
+ class="fas fa-cube"
1888
+ aria-hidden="true"
1889
+ ></i>
1890
+ </span>
1891
+ </span>
1754
1892
  </div>
1755
1893
  <div class="pf-v6-l-flex__item">
1756
1894
  <span>5</span>
1895
+ <span class="pf-v6-screen-reader">Workspaces</span>
1757
1896
  </div>
1758
1897
  </div>
1759
1898
  <div
@@ -1782,10 +1921,7 @@ wrapperTag: div
1782
1921
  </div>
1783
1922
  </li>
1784
1923
 
1785
- <li
1786
- class="pf-v6-c-data-list__item"
1787
- aria-labelledby="primary-detail-collapsed-example-data-list-item-2"
1788
- >
1924
+ <li class="pf-v6-c-data-list__item">
1789
1925
  <div class="pf-v6-c-data-list__item-row">
1790
1926
  <div class="pf-v6-c-data-list__item-content">
1791
1927
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -1807,62 +1943,106 @@ wrapperTag: div
1807
1943
  <div class="pf-v6-l-flex pf-m-wrap">
1808
1944
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1809
1945
  <div class="pf-v6-l-flex__item">
1810
- <i
1811
- class="fas fa-code-branch"
1812
- aria-hidden="true"
1813
- ></i>
1946
+ <span class="pf-v6-c-icon">
1947
+ <span class="pf-v6-c-icon__content">
1948
+ <i
1949
+ class="fas fa-code-branch"
1950
+ aria-hidden="true"
1951
+ ></i>
1952
+ </span>
1953
+ </span>
1814
1954
  </div>
1815
1955
  <div class="pf-v6-l-flex__item">
1816
1956
  <span>5</span>
1957
+ <span class="pf-v6-screen-reader">Branches</span>
1817
1958
  </div>
1818
1959
  </div>
1819
1960
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1820
1961
  <div class="pf-v6-l-flex__item">
1821
- <i class="fas fa-code" aria-hidden="true"></i>
1962
+ <span class="pf-v6-c-icon">
1963
+ <span class="pf-v6-c-icon__content">
1964
+ <i
1965
+ class="fas fa-code"
1966
+ aria-hidden="true"
1967
+ ></i>
1968
+ </span>
1969
+ </span>
1822
1970
  </div>
1823
1971
  <div class="pf-v6-l-flex__item">
1824
1972
  <span>9</span>
1973
+ <span
1974
+ class="pf-v6-screen-reader"
1975
+ >Code blocks</span>
1825
1976
  </div>
1826
1977
  </div>
1827
1978
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1828
1979
  <div class="pf-v6-l-flex__item">
1829
- <i class="fas fa-cube" aria-hidden="true"></i>
1980
+ <span class="pf-v6-c-icon">
1981
+ <span class="pf-v6-c-icon__content">
1982
+ <i
1983
+ class="fas fa-cube"
1984
+ aria-hidden="true"
1985
+ ></i>
1986
+ </span>
1987
+ </span>
1830
1988
  </div>
1831
1989
  <div class="pf-v6-l-flex__item">
1832
1990
  <span>2</span>
1991
+ <span class="pf-v6-screen-reader">Workspaces</span>
1833
1992
  </div>
1834
1993
  </div>
1835
1994
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1836
1995
  <div class="pf-v6-l-flex__item">
1837
- <i
1838
- class="fas fa-check-circle"
1839
- aria-hidden="true"
1840
- ></i>
1996
+ <span class="pf-v6-c-icon">
1997
+ <span
1998
+ class="pf-v6-c-icon__content pf-m-success"
1999
+ >
2000
+ <i
2001
+ class="fas fa-check-circle"
2002
+ aria-hidden="true"
2003
+ ></i>
2004
+ </span>
2005
+ </span>
1841
2006
  </div>
1842
2007
  <div class="pf-v6-l-flex__item">
1843
2008
  <span>11</span>
2009
+ <span class="pf-v6-screen-reader">Completed</span>
1844
2010
  </div>
1845
2011
  </div>
1846
2012
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1847
2013
  <div class="pf-v6-l-flex__item">
1848
- <i
1849
- class="fas fa-exclamation-triangle"
1850
- aria-hidden="true"
1851
- ></i>
2014
+ <span class="pf-v6-c-icon">
2015
+ <span
2016
+ class="pf-v6-c-icon__content pf-m-warning"
2017
+ >
2018
+ <i
2019
+ class="fas fa-exclamation-triangle"
2020
+ aria-hidden="true"
2021
+ ></i>
2022
+ </span>
2023
+ </span>
1852
2024
  </div>
1853
2025
  <div class="pf-v6-l-flex__item">
1854
2026
  <span>4</span>
2027
+ <span class="pf-v6-screen-reader">Warnings</span>
1855
2028
  </div>
1856
2029
  </div>
1857
2030
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1858
2031
  <div class="pf-v6-l-flex__item">
1859
- <i
1860
- class="fas fa-times-circle"
1861
- aria-hidden="true"
1862
- ></i>
2032
+ <span class="pf-v6-c-icon">
2033
+ <span
2034
+ class="pf-v6-c-icon__content pf-m-danger"
2035
+ >
2036
+ <i
2037
+ class="fas fa-exclamation-circle"
2038
+ aria-hidden="true"
2039
+ ></i>
2040
+ </span>
2041
+ </span>
1863
2042
  </div>
1864
2043
  <div class="pf-v6-l-flex__item">
1865
2044
  <span>1</span>
2045
+ <span class="pf-v6-screen-reader">Errors</span>
1866
2046
  </div>
1867
2047
  </div>
1868
2048
  <div
@@ -1891,10 +2071,7 @@ wrapperTag: div
1891
2071
  </div>
1892
2072
  </li>
1893
2073
 
1894
- <li
1895
- class="pf-v6-c-data-list__item"
1896
- aria-labelledby="primary-detail-collapsed-example-data-list-item-3"
1897
- >
2074
+ <li class="pf-v6-c-data-list__item">
1898
2075
  <div class="pf-v6-c-data-list__item-row">
1899
2076
  <div class="pf-v6-c-data-list__item-content">
1900
2077
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -1922,10 +2099,7 @@ wrapperTag: div
1922
2099
  </div>
1923
2100
  </li>
1924
2101
 
1925
- <li
1926
- class="pf-v6-c-data-list__item"
1927
- aria-labelledby="primary-detail-collapsed-example-data-list-item-4"
1928
- >
2102
+ <li class="pf-v6-c-data-list__item">
1929
2103
  <div class="pf-v6-c-data-list__item-row">
1930
2104
  <div class="pf-v6-c-data-list__item-content">
1931
2105
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -1950,29 +2124,52 @@ wrapperTag: div
1950
2124
  <div class="pf-v6-l-flex pf-m-wrap">
1951
2125
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1952
2126
  <div class="pf-v6-l-flex__item">
1953
- <i
1954
- class="fas fa-code-branch"
1955
- aria-hidden="true"
1956
- ></i>
2127
+ <span class="pf-v6-c-icon">
2128
+ <span class="pf-v6-c-icon__content">
2129
+ <i
2130
+ class="fas fa-code-branch"
2131
+ aria-hidden="true"
2132
+ ></i>
2133
+ </span>
2134
+ </span>
1957
2135
  </div>
1958
2136
  <div class="pf-v6-l-flex__item">
1959
2137
  <span>10</span>
2138
+ <span class="pf-v6-screen-reader">Branches</span>
1960
2139
  </div>
1961
2140
  </div>
1962
2141
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1963
2142
  <div class="pf-v6-l-flex__item">
1964
- <i class="fas fa-code" aria-hidden="true"></i>
2143
+ <span class="pf-v6-c-icon">
2144
+ <span class="pf-v6-c-icon__content">
2145
+ <i
2146
+ class="fas fa-code"
2147
+ aria-hidden="true"
2148
+ ></i>
2149
+ </span>
2150
+ </span>
1965
2151
  </div>
1966
2152
  <div class="pf-v6-l-flex__item">
1967
2153
  <span>4</span>
2154
+ <span
2155
+ class="pf-v6-screen-reader"
2156
+ >Code blocks</span>
1968
2157
  </div>
1969
2158
  </div>
1970
2159
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1971
2160
  <div class="pf-v6-l-flex__item">
1972
- <i class="fas fa-cube" aria-hidden="true"></i>
2161
+ <span class="pf-v6-c-icon">
2162
+ <span class="pf-v6-c-icon__content">
2163
+ <i
2164
+ class="fas fa-cube"
2165
+ aria-hidden="true"
2166
+ ></i>
2167
+ </span>
2168
+ </span>
1973
2169
  </div>
1974
2170
  <div class="pf-v6-l-flex__item">
1975
2171
  <span>5</span>
2172
+ <span class="pf-v6-screen-reader">Workspaces</span>
1976
2173
  </div>
1977
2174
  </div>
1978
2175
  <div
@@ -2001,10 +2198,7 @@ wrapperTag: div
2001
2198
  </div>
2002
2199
  </li>
2003
2200
 
2004
- <li
2005
- class="pf-v6-c-data-list__item"
2006
- aria-labelledby="primary-detail-collapsed-example-data-list-item-5"
2007
- >
2201
+ <li class="pf-v6-c-data-list__item">
2008
2202
  <div class="pf-v6-c-data-list__item-row">
2009
2203
  <div class="pf-v6-c-data-list__item-content">
2010
2204
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2026,62 +2220,106 @@ wrapperTag: div
2026
2220
  <div class="pf-v6-l-flex pf-m-wrap">
2027
2221
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2028
2222
  <div class="pf-v6-l-flex__item">
2029
- <i
2030
- class="fas fa-code-branch"
2031
- aria-hidden="true"
2032
- ></i>
2223
+ <span class="pf-v6-c-icon">
2224
+ <span class="pf-v6-c-icon__content">
2225
+ <i
2226
+ class="fas fa-code-branch"
2227
+ aria-hidden="true"
2228
+ ></i>
2229
+ </span>
2230
+ </span>
2033
2231
  </div>
2034
2232
  <div class="pf-v6-l-flex__item">
2035
2233
  <span>5</span>
2234
+ <span class="pf-v6-screen-reader">Branches</span>
2036
2235
  </div>
2037
2236
  </div>
2038
2237
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2039
2238
  <div class="pf-v6-l-flex__item">
2040
- <i class="fas fa-code" aria-hidden="true"></i>
2239
+ <span class="pf-v6-c-icon">
2240
+ <span class="pf-v6-c-icon__content">
2241
+ <i
2242
+ class="fas fa-code"
2243
+ aria-hidden="true"
2244
+ ></i>
2245
+ </span>
2246
+ </span>
2041
2247
  </div>
2042
2248
  <div class="pf-v6-l-flex__item">
2043
2249
  <span>9</span>
2250
+ <span
2251
+ class="pf-v6-screen-reader"
2252
+ >Code blocks</span>
2044
2253
  </div>
2045
2254
  </div>
2046
2255
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2047
2256
  <div class="pf-v6-l-flex__item">
2048
- <i class="fas fa-cube" aria-hidden="true"></i>
2257
+ <span class="pf-v6-c-icon">
2258
+ <span class="pf-v6-c-icon__content">
2259
+ <i
2260
+ class="fas fa-cube"
2261
+ aria-hidden="true"
2262
+ ></i>
2263
+ </span>
2264
+ </span>
2049
2265
  </div>
2050
2266
  <div class="pf-v6-l-flex__item">
2051
2267
  <span>2</span>
2268
+ <span class="pf-v6-screen-reader">Workspaces</span>
2052
2269
  </div>
2053
2270
  </div>
2054
2271
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2055
2272
  <div class="pf-v6-l-flex__item">
2056
- <i
2057
- class="fas fa-check-circle"
2058
- aria-hidden="true"
2059
- ></i>
2273
+ <span class="pf-v6-c-icon">
2274
+ <span
2275
+ class="pf-v6-c-icon__content pf-m-success"
2276
+ >
2277
+ <i
2278
+ class="fas fa-check-circle"
2279
+ aria-hidden="true"
2280
+ ></i>
2281
+ </span>
2282
+ </span>
2060
2283
  </div>
2061
2284
  <div class="pf-v6-l-flex__item">
2062
2285
  <span>11</span>
2286
+ <span class="pf-v6-screen-reader">Completed</span>
2063
2287
  </div>
2064
2288
  </div>
2065
2289
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2066
2290
  <div class="pf-v6-l-flex__item">
2067
- <i
2068
- class="fas fa-exclamation-triangle"
2069
- aria-hidden="true"
2070
- ></i>
2291
+ <span class="pf-v6-c-icon">
2292
+ <span
2293
+ class="pf-v6-c-icon__content pf-m-warning"
2294
+ >
2295
+ <i
2296
+ class="fas fa-exclamation-triangle"
2297
+ aria-hidden="true"
2298
+ ></i>
2299
+ </span>
2300
+ </span>
2071
2301
  </div>
2072
2302
  <div class="pf-v6-l-flex__item">
2073
2303
  <span>4</span>
2304
+ <span class="pf-v6-screen-reader">Warnings</span>
2074
2305
  </div>
2075
2306
  </div>
2076
2307
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2077
2308
  <div class="pf-v6-l-flex__item">
2078
- <i
2079
- class="fas fa-times-circle"
2080
- aria-hidden="true"
2081
- ></i>
2309
+ <span class="pf-v6-c-icon">
2310
+ <span
2311
+ class="pf-v6-c-icon__content pf-m-danger"
2312
+ >
2313
+ <i
2314
+ class="fas fa-exclamation-circle"
2315
+ aria-hidden="true"
2316
+ ></i>
2317
+ </span>
2318
+ </span>
2082
2319
  </div>
2083
2320
  <div class="pf-v6-l-flex__item">
2084
2321
  <span>1</span>
2322
+ <span class="pf-v6-screen-reader">Errors</span>
2085
2323
  </div>
2086
2324
  </div>
2087
2325
  <div
@@ -2717,10 +2955,7 @@ wrapperTag: div
2717
2955
  aria-label="Simple data list example"
2718
2956
  id="primary-detail-content-body-padding-example-data-list"
2719
2957
  >
2720
- <li
2721
- class="pf-v6-c-data-list__item"
2722
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-1"
2723
- >
2958
+ <li class="pf-v6-c-data-list__item">
2724
2959
  <div class="pf-v6-c-data-list__item-row">
2725
2960
  <div class="pf-v6-c-data-list__item-content">
2726
2961
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2745,29 +2980,52 @@ wrapperTag: div
2745
2980
  <div class="pf-v6-l-flex pf-m-wrap">
2746
2981
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2747
2982
  <div class="pf-v6-l-flex__item">
2748
- <i
2749
- class="fas fa-code-branch"
2750
- aria-hidden="true"
2751
- ></i>
2983
+ <span class="pf-v6-c-icon">
2984
+ <span class="pf-v6-c-icon__content">
2985
+ <i
2986
+ class="fas fa-code-branch"
2987
+ aria-hidden="true"
2988
+ ></i>
2989
+ </span>
2990
+ </span>
2752
2991
  </div>
2753
2992
  <div class="pf-v6-l-flex__item">
2754
2993
  <span>10</span>
2994
+ <span class="pf-v6-screen-reader">Branches</span>
2755
2995
  </div>
2756
2996
  </div>
2757
2997
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2758
2998
  <div class="pf-v6-l-flex__item">
2759
- <i class="fas fa-code" aria-hidden="true"></i>
2999
+ <span class="pf-v6-c-icon">
3000
+ <span class="pf-v6-c-icon__content">
3001
+ <i
3002
+ class="fas fa-code"
3003
+ aria-hidden="true"
3004
+ ></i>
3005
+ </span>
3006
+ </span>
2760
3007
  </div>
2761
3008
  <div class="pf-v6-l-flex__item">
2762
3009
  <span>4</span>
3010
+ <span
3011
+ class="pf-v6-screen-reader"
3012
+ >Code blocks</span>
2763
3013
  </div>
2764
3014
  </div>
2765
3015
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2766
3016
  <div class="pf-v6-l-flex__item">
2767
- <i class="fas fa-cube" aria-hidden="true"></i>
3017
+ <span class="pf-v6-c-icon">
3018
+ <span class="pf-v6-c-icon__content">
3019
+ <i
3020
+ class="fas fa-cube"
3021
+ aria-hidden="true"
3022
+ ></i>
3023
+ </span>
3024
+ </span>
2768
3025
  </div>
2769
3026
  <div class="pf-v6-l-flex__item">
2770
3027
  <span>5</span>
3028
+ <span class="pf-v6-screen-reader">Workspaces</span>
2771
3029
  </div>
2772
3030
  </div>
2773
3031
  <div
@@ -2796,10 +3054,7 @@ wrapperTag: div
2796
3054
  </div>
2797
3055
  </li>
2798
3056
 
2799
- <li
2800
- class="pf-v6-c-data-list__item"
2801
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-2"
2802
- >
3057
+ <li class="pf-v6-c-data-list__item">
2803
3058
  <div class="pf-v6-c-data-list__item-row">
2804
3059
  <div class="pf-v6-c-data-list__item-content">
2805
3060
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2821,62 +3076,106 @@ wrapperTag: div
2821
3076
  <div class="pf-v6-l-flex pf-m-wrap">
2822
3077
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2823
3078
  <div class="pf-v6-l-flex__item">
2824
- <i
2825
- class="fas fa-code-branch"
2826
- aria-hidden="true"
2827
- ></i>
3079
+ <span class="pf-v6-c-icon">
3080
+ <span class="pf-v6-c-icon__content">
3081
+ <i
3082
+ class="fas fa-code-branch"
3083
+ aria-hidden="true"
3084
+ ></i>
3085
+ </span>
3086
+ </span>
2828
3087
  </div>
2829
3088
  <div class="pf-v6-l-flex__item">
2830
3089
  <span>5</span>
3090
+ <span class="pf-v6-screen-reader">Branches</span>
2831
3091
  </div>
2832
3092
  </div>
2833
3093
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2834
3094
  <div class="pf-v6-l-flex__item">
2835
- <i class="fas fa-code" aria-hidden="true"></i>
3095
+ <span class="pf-v6-c-icon">
3096
+ <span class="pf-v6-c-icon__content">
3097
+ <i
3098
+ class="fas fa-code"
3099
+ aria-hidden="true"
3100
+ ></i>
3101
+ </span>
3102
+ </span>
2836
3103
  </div>
2837
3104
  <div class="pf-v6-l-flex__item">
2838
3105
  <span>9</span>
3106
+ <span
3107
+ class="pf-v6-screen-reader"
3108
+ >Code blocks</span>
2839
3109
  </div>
2840
3110
  </div>
2841
3111
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2842
3112
  <div class="pf-v6-l-flex__item">
2843
- <i class="fas fa-cube" aria-hidden="true"></i>
3113
+ <span class="pf-v6-c-icon">
3114
+ <span class="pf-v6-c-icon__content">
3115
+ <i
3116
+ class="fas fa-cube"
3117
+ aria-hidden="true"
3118
+ ></i>
3119
+ </span>
3120
+ </span>
2844
3121
  </div>
2845
3122
  <div class="pf-v6-l-flex__item">
2846
3123
  <span>2</span>
3124
+ <span class="pf-v6-screen-reader">Workspaces</span>
2847
3125
  </div>
2848
3126
  </div>
2849
3127
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2850
3128
  <div class="pf-v6-l-flex__item">
2851
- <i
2852
- class="fas fa-check-circle"
2853
- aria-hidden="true"
2854
- ></i>
3129
+ <span class="pf-v6-c-icon">
3130
+ <span
3131
+ class="pf-v6-c-icon__content pf-m-success"
3132
+ >
3133
+ <i
3134
+ class="fas fa-check-circle"
3135
+ aria-hidden="true"
3136
+ ></i>
3137
+ </span>
3138
+ </span>
2855
3139
  </div>
2856
3140
  <div class="pf-v6-l-flex__item">
2857
3141
  <span>11</span>
3142
+ <span class="pf-v6-screen-reader">Completed</span>
2858
3143
  </div>
2859
3144
  </div>
2860
3145
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2861
3146
  <div class="pf-v6-l-flex__item">
2862
- <i
2863
- class="fas fa-exclamation-triangle"
2864
- aria-hidden="true"
2865
- ></i>
3147
+ <span class="pf-v6-c-icon">
3148
+ <span
3149
+ class="pf-v6-c-icon__content pf-m-warning"
3150
+ >
3151
+ <i
3152
+ class="fas fa-exclamation-triangle"
3153
+ aria-hidden="true"
3154
+ ></i>
3155
+ </span>
3156
+ </span>
2866
3157
  </div>
2867
3158
  <div class="pf-v6-l-flex__item">
2868
3159
  <span>4</span>
3160
+ <span class="pf-v6-screen-reader">Warnings</span>
2869
3161
  </div>
2870
3162
  </div>
2871
3163
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2872
3164
  <div class="pf-v6-l-flex__item">
2873
- <i
2874
- class="fas fa-times-circle"
2875
- aria-hidden="true"
2876
- ></i>
3165
+ <span class="pf-v6-c-icon">
3166
+ <span
3167
+ class="pf-v6-c-icon__content pf-m-danger"
3168
+ >
3169
+ <i
3170
+ class="fas fa-exclamation-circle"
3171
+ aria-hidden="true"
3172
+ ></i>
3173
+ </span>
3174
+ </span>
2877
3175
  </div>
2878
3176
  <div class="pf-v6-l-flex__item">
2879
3177
  <span>1</span>
3178
+ <span class="pf-v6-screen-reader">Errors</span>
2880
3179
  </div>
2881
3180
  </div>
2882
3181
  <div
@@ -2905,10 +3204,7 @@ wrapperTag: div
2905
3204
  </div>
2906
3205
  </li>
2907
3206
 
2908
- <li
2909
- class="pf-v6-c-data-list__item"
2910
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-3"
2911
- >
3207
+ <li class="pf-v6-c-data-list__item">
2912
3208
  <div class="pf-v6-c-data-list__item-row">
2913
3209
  <div class="pf-v6-c-data-list__item-content">
2914
3210
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2936,10 +3232,7 @@ wrapperTag: div
2936
3232
  </div>
2937
3233
  </li>
2938
3234
 
2939
- <li
2940
- class="pf-v6-c-data-list__item"
2941
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-4"
2942
- >
3235
+ <li class="pf-v6-c-data-list__item">
2943
3236
  <div class="pf-v6-c-data-list__item-row">
2944
3237
  <div class="pf-v6-c-data-list__item-content">
2945
3238
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2964,29 +3257,52 @@ wrapperTag: div
2964
3257
  <div class="pf-v6-l-flex pf-m-wrap">
2965
3258
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2966
3259
  <div class="pf-v6-l-flex__item">
2967
- <i
2968
- class="fas fa-code-branch"
2969
- aria-hidden="true"
2970
- ></i>
3260
+ <span class="pf-v6-c-icon">
3261
+ <span class="pf-v6-c-icon__content">
3262
+ <i
3263
+ class="fas fa-code-branch"
3264
+ aria-hidden="true"
3265
+ ></i>
3266
+ </span>
3267
+ </span>
2971
3268
  </div>
2972
3269
  <div class="pf-v6-l-flex__item">
2973
3270
  <span>10</span>
3271
+ <span class="pf-v6-screen-reader">Branches</span>
2974
3272
  </div>
2975
3273
  </div>
2976
3274
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2977
3275
  <div class="pf-v6-l-flex__item">
2978
- <i class="fas fa-code" aria-hidden="true"></i>
3276
+ <span class="pf-v6-c-icon">
3277
+ <span class="pf-v6-c-icon__content">
3278
+ <i
3279
+ class="fas fa-code"
3280
+ aria-hidden="true"
3281
+ ></i>
3282
+ </span>
3283
+ </span>
2979
3284
  </div>
2980
3285
  <div class="pf-v6-l-flex__item">
2981
3286
  <span>4</span>
3287
+ <span
3288
+ class="pf-v6-screen-reader"
3289
+ >Code blocks</span>
2982
3290
  </div>
2983
3291
  </div>
2984
3292
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2985
3293
  <div class="pf-v6-l-flex__item">
2986
- <i class="fas fa-cube" aria-hidden="true"></i>
3294
+ <span class="pf-v6-c-icon">
3295
+ <span class="pf-v6-c-icon__content">
3296
+ <i
3297
+ class="fas fa-cube"
3298
+ aria-hidden="true"
3299
+ ></i>
3300
+ </span>
3301
+ </span>
2987
3302
  </div>
2988
3303
  <div class="pf-v6-l-flex__item">
2989
3304
  <span>5</span>
3305
+ <span class="pf-v6-screen-reader">Workspaces</span>
2990
3306
  </div>
2991
3307
  </div>
2992
3308
  <div
@@ -3015,10 +3331,7 @@ wrapperTag: div
3015
3331
  </div>
3016
3332
  </li>
3017
3333
 
3018
- <li
3019
- class="pf-v6-c-data-list__item"
3020
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-5"
3021
- >
3334
+ <li class="pf-v6-c-data-list__item">
3022
3335
  <div class="pf-v6-c-data-list__item-row">
3023
3336
  <div class="pf-v6-c-data-list__item-content">
3024
3337
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3040,62 +3353,106 @@ wrapperTag: div
3040
3353
  <div class="pf-v6-l-flex pf-m-wrap">
3041
3354
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3042
3355
  <div class="pf-v6-l-flex__item">
3043
- <i
3044
- class="fas fa-code-branch"
3045
- aria-hidden="true"
3046
- ></i>
3356
+ <span class="pf-v6-c-icon">
3357
+ <span class="pf-v6-c-icon__content">
3358
+ <i
3359
+ class="fas fa-code-branch"
3360
+ aria-hidden="true"
3361
+ ></i>
3362
+ </span>
3363
+ </span>
3047
3364
  </div>
3048
3365
  <div class="pf-v6-l-flex__item">
3049
3366
  <span>5</span>
3367
+ <span class="pf-v6-screen-reader">Branches</span>
3050
3368
  </div>
3051
3369
  </div>
3052
3370
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3053
3371
  <div class="pf-v6-l-flex__item">
3054
- <i class="fas fa-code" aria-hidden="true"></i>
3372
+ <span class="pf-v6-c-icon">
3373
+ <span class="pf-v6-c-icon__content">
3374
+ <i
3375
+ class="fas fa-code"
3376
+ aria-hidden="true"
3377
+ ></i>
3378
+ </span>
3379
+ </span>
3055
3380
  </div>
3056
3381
  <div class="pf-v6-l-flex__item">
3057
3382
  <span>9</span>
3383
+ <span
3384
+ class="pf-v6-screen-reader"
3385
+ >Code blocks</span>
3058
3386
  </div>
3059
3387
  </div>
3060
3388
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3061
3389
  <div class="pf-v6-l-flex__item">
3062
- <i class="fas fa-cube" aria-hidden="true"></i>
3390
+ <span class="pf-v6-c-icon">
3391
+ <span class="pf-v6-c-icon__content">
3392
+ <i
3393
+ class="fas fa-cube"
3394
+ aria-hidden="true"
3395
+ ></i>
3396
+ </span>
3397
+ </span>
3063
3398
  </div>
3064
3399
  <div class="pf-v6-l-flex__item">
3065
3400
  <span>2</span>
3401
+ <span class="pf-v6-screen-reader">Workspaces</span>
3066
3402
  </div>
3067
3403
  </div>
3068
3404
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3069
3405
  <div class="pf-v6-l-flex__item">
3070
- <i
3071
- class="fas fa-check-circle"
3072
- aria-hidden="true"
3073
- ></i>
3406
+ <span class="pf-v6-c-icon">
3407
+ <span
3408
+ class="pf-v6-c-icon__content pf-m-success"
3409
+ >
3410
+ <i
3411
+ class="fas fa-check-circle"
3412
+ aria-hidden="true"
3413
+ ></i>
3414
+ </span>
3415
+ </span>
3074
3416
  </div>
3075
3417
  <div class="pf-v6-l-flex__item">
3076
3418
  <span>11</span>
3419
+ <span class="pf-v6-screen-reader">Completed</span>
3077
3420
  </div>
3078
3421
  </div>
3079
3422
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3080
3423
  <div class="pf-v6-l-flex__item">
3081
- <i
3082
- class="fas fa-exclamation-triangle"
3083
- aria-hidden="true"
3084
- ></i>
3424
+ <span class="pf-v6-c-icon">
3425
+ <span
3426
+ class="pf-v6-c-icon__content pf-m-warning"
3427
+ >
3428
+ <i
3429
+ class="fas fa-exclamation-triangle"
3430
+ aria-hidden="true"
3431
+ ></i>
3432
+ </span>
3433
+ </span>
3085
3434
  </div>
3086
3435
  <div class="pf-v6-l-flex__item">
3087
3436
  <span>4</span>
3437
+ <span class="pf-v6-screen-reader">Warnings</span>
3088
3438
  </div>
3089
3439
  </div>
3090
3440
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3091
3441
  <div class="pf-v6-l-flex__item">
3092
- <i
3093
- class="fas fa-times-circle"
3094
- aria-hidden="true"
3095
- ></i>
3442
+ <span class="pf-v6-c-icon">
3443
+ <span
3444
+ class="pf-v6-c-icon__content pf-m-danger"
3445
+ >
3446
+ <i
3447
+ class="fas fa-exclamation-circle"
3448
+ aria-hidden="true"
3449
+ ></i>
3450
+ </span>
3451
+ </span>
3096
3452
  </div>
3097
3453
  <div class="pf-v6-l-flex__item">
3098
3454
  <span>1</span>
3455
+ <span class="pf-v6-screen-reader">Errors</span>
3099
3456
  </div>
3100
3457
  </div>
3101
3458
  <div
@@ -5213,10 +5570,7 @@ wrapperTag: div
5213
5570
  aria-label="Selectable rows data list example"
5214
5571
  id="primary-detail-card-data-list-example-drawer-card-data-list"
5215
5572
  >
5216
- <li
5217
- class="pf-v6-c-data-list__item"
5218
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-1"
5219
- >
5573
+ <li class="pf-v6-c-data-list__item">
5220
5574
  <div class="pf-v6-c-data-list__item-row">
5221
5575
  <div class="pf-v6-c-data-list__item-content">
5222
5576
  <div class="pf-v6-c-data-list__cell">
@@ -5229,10 +5583,7 @@ wrapperTag: div
5229
5583
  </div>
5230
5584
  </li>
5231
5585
 
5232
- <li
5233
- class="pf-v6-c-data-list__item pf-m-selected"
5234
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-2"
5235
- >
5586
+ <li class="pf-v6-c-data-list__item pf-m-selected">
5236
5587
  <div class="pf-v6-c-data-list__item-row">
5237
5588
  <div class="pf-v6-c-data-list__item-content">
5238
5589
  <div class="pf-v6-c-data-list__cell">
@@ -5245,10 +5596,7 @@ wrapperTag: div
5245
5596
  </div>
5246
5597
  </li>
5247
5598
 
5248
- <li
5249
- class="pf-v6-c-data-list__item"
5250
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-3"
5251
- >
5599
+ <li class="pf-v6-c-data-list__item">
5252
5600
  <div class="pf-v6-c-data-list__item-row">
5253
5601
  <div class="pf-v6-c-data-list__item-content">
5254
5602
  <div class="pf-v6-c-data-list__cell">
@@ -5261,10 +5609,7 @@ wrapperTag: div
5261
5609
  </div>
5262
5610
  </li>
5263
5611
 
5264
- <li
5265
- class="pf-v6-c-data-list__item"
5266
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-4"
5267
- >
5612
+ <li class="pf-v6-c-data-list__item">
5268
5613
  <div class="pf-v6-c-data-list__item-row">
5269
5614
  <div class="pf-v6-c-data-list__item-content">
5270
5615
  <div class="pf-v6-c-data-list__cell">
@@ -5277,10 +5622,7 @@ wrapperTag: div
5277
5622
  </div>
5278
5623
  </li>
5279
5624
 
5280
- <li
5281
- class="pf-v6-c-data-list__item"
5282
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-5"
5283
- >
5625
+ <li class="pf-v6-c-data-list__item">
5284
5626
  <div class="pf-v6-c-data-list__item-row">
5285
5627
  <div class="pf-v6-c-data-list__item-content">
5286
5628
  <div class="pf-v6-c-data-list__cell">
@@ -5293,10 +5635,7 @@ wrapperTag: div
5293
5635
  </div>
5294
5636
  </li>
5295
5637
 
5296
- <li
5297
- class="pf-v6-c-data-list__item"
5298
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-6"
5299
- >
5638
+ <li class="pf-v6-c-data-list__item">
5300
5639
  <div class="pf-v6-c-data-list__item-row">
5301
5640
  <div class="pf-v6-c-data-list__item-content">
5302
5641
  <div class="pf-v6-c-data-list__cell">
@@ -5309,10 +5648,7 @@ wrapperTag: div
5309
5648
  </div>
5310
5649
  </li>
5311
5650
 
5312
- <li
5313
- class="pf-v6-c-data-list__item"
5314
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-7"
5315
- >
5651
+ <li class="pf-v6-c-data-list__item">
5316
5652
  <div class="pf-v6-c-data-list__item-row">
5317
5653
  <div class="pf-v6-c-data-list__item-content">
5318
5654
  <div class="pf-v6-c-data-list__cell">
@@ -5325,10 +5661,7 @@ wrapperTag: div
5325
5661
  </div>
5326
5662
  </li>
5327
5663
 
5328
- <li
5329
- class="pf-v6-c-data-list__item"
5330
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-8"
5331
- >
5664
+ <li class="pf-v6-c-data-list__item">
5332
5665
  <div class="pf-v6-c-data-list__item-row">
5333
5666
  <div class="pf-v6-c-data-list__item-content">
5334
5667
  <div class="pf-v6-c-data-list__cell">
@@ -5341,10 +5674,7 @@ wrapperTag: div
5341
5674
  </div>
5342
5675
  </li>
5343
5676
 
5344
- <li
5345
- class="pf-v6-c-data-list__item"
5346
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-9"
5347
- >
5677
+ <li class="pf-v6-c-data-list__item">
5348
5678
  <div class="pf-v6-c-data-list__item-row">
5349
5679
  <div class="pf-v6-c-data-list__item-content">
5350
5680
  <div class="pf-v6-c-data-list__cell">
@@ -5357,10 +5687,7 @@ wrapperTag: div
5357
5687
  </div>
5358
5688
  </li>
5359
5689
 
5360
- <li
5361
- class="pf-v6-c-data-list__item"
5362
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-10"
5363
- >
5690
+ <li class="pf-v6-c-data-list__item">
5364
5691
  <div class="pf-v6-c-data-list__item-row">
5365
5692
  <div class="pf-v6-c-data-list__item-content">
5366
5693
  <div class="pf-v6-c-data-list__cell">
@@ -5926,10 +6253,7 @@ wrapperTag: div
5926
6253
  aria-label="Simple data list example"
5927
6254
  id="primary-detail-inline-modifier-example-data-list"
5928
6255
  >
5929
- <li
5930
- class="pf-v6-c-data-list__item"
5931
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-1"
5932
- >
6256
+ <li class="pf-v6-c-data-list__item">
5933
6257
  <div class="pf-v6-c-data-list__item-row">
5934
6258
  <div class="pf-v6-c-data-list__item-content">
5935
6259
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -5954,29 +6278,44 @@ wrapperTag: div
5954
6278
  <div class="pf-v6-l-flex pf-m-wrap">
5955
6279
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5956
6280
  <div class="pf-v6-l-flex__item">
5957
- <i
5958
- class="fas fa-code-branch"
5959
- aria-hidden="true"
5960
- ></i>
6281
+ <span class="pf-v6-c-icon">
6282
+ <span class="pf-v6-c-icon__content">
6283
+ <i
6284
+ class="fas fa-code-branch"
6285
+ aria-hidden="true"
6286
+ ></i>
6287
+ </span>
6288
+ </span>
5961
6289
  </div>
5962
6290
  <div class="pf-v6-l-flex__item">
5963
6291
  <span>10</span>
6292
+ <span class="pf-v6-screen-reader">Branches</span>
5964
6293
  </div>
5965
6294
  </div>
5966
6295
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5967
6296
  <div class="pf-v6-l-flex__item">
5968
- <i class="fas fa-code" aria-hidden="true"></i>
6297
+ <span class="pf-v6-c-icon">
6298
+ <span class="pf-v6-c-icon__content">
6299
+ <i class="fas fa-code" aria-hidden="true"></i>
6300
+ </span>
6301
+ </span>
5969
6302
  </div>
5970
6303
  <div class="pf-v6-l-flex__item">
5971
6304
  <span>4</span>
6305
+ <span class="pf-v6-screen-reader">Code blocks</span>
5972
6306
  </div>
5973
6307
  </div>
5974
6308
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5975
6309
  <div class="pf-v6-l-flex__item">
5976
- <i class="fas fa-cube" aria-hidden="true"></i>
6310
+ <span class="pf-v6-c-icon">
6311
+ <span class="pf-v6-c-icon__content">
6312
+ <i class="fas fa-cube" aria-hidden="true"></i>
6313
+ </span>
6314
+ </span>
5977
6315
  </div>
5978
6316
  <div class="pf-v6-l-flex__item">
5979
6317
  <span>5</span>
6318
+ <span class="pf-v6-screen-reader">Workspaces</span>
5980
6319
  </div>
5981
6320
  </div>
5982
6321
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -6000,10 +6339,7 @@ wrapperTag: div
6000
6339
  </div>
6001
6340
  </li>
6002
6341
 
6003
- <li
6004
- class="pf-v6-c-data-list__item"
6005
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-2"
6006
- >
6342
+ <li class="pf-v6-c-data-list__item">
6007
6343
  <div class="pf-v6-c-data-list__item-row">
6008
6344
  <div class="pf-v6-c-data-list__item-content">
6009
6345
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6025,62 +6361,98 @@ wrapperTag: div
6025
6361
  <div class="pf-v6-l-flex pf-m-wrap">
6026
6362
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6027
6363
  <div class="pf-v6-l-flex__item">
6028
- <i
6029
- class="fas fa-code-branch"
6030
- aria-hidden="true"
6031
- ></i>
6364
+ <span class="pf-v6-c-icon">
6365
+ <span class="pf-v6-c-icon__content">
6366
+ <i
6367
+ class="fas fa-code-branch"
6368
+ aria-hidden="true"
6369
+ ></i>
6370
+ </span>
6371
+ </span>
6032
6372
  </div>
6033
6373
  <div class="pf-v6-l-flex__item">
6034
6374
  <span>5</span>
6375
+ <span class="pf-v6-screen-reader">Branches</span>
6035
6376
  </div>
6036
6377
  </div>
6037
6378
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6038
6379
  <div class="pf-v6-l-flex__item">
6039
- <i class="fas fa-code" aria-hidden="true"></i>
6380
+ <span class="pf-v6-c-icon">
6381
+ <span class="pf-v6-c-icon__content">
6382
+ <i class="fas fa-code" aria-hidden="true"></i>
6383
+ </span>
6384
+ </span>
6040
6385
  </div>
6041
6386
  <div class="pf-v6-l-flex__item">
6042
6387
  <span>9</span>
6388
+ <span class="pf-v6-screen-reader">Code blocks</span>
6043
6389
  </div>
6044
6390
  </div>
6045
6391
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6046
6392
  <div class="pf-v6-l-flex__item">
6047
- <i class="fas fa-cube" aria-hidden="true"></i>
6393
+ <span class="pf-v6-c-icon">
6394
+ <span class="pf-v6-c-icon__content">
6395
+ <i class="fas fa-cube" aria-hidden="true"></i>
6396
+ </span>
6397
+ </span>
6048
6398
  </div>
6049
6399
  <div class="pf-v6-l-flex__item">
6050
6400
  <span>2</span>
6401
+ <span class="pf-v6-screen-reader">Workspaces</span>
6051
6402
  </div>
6052
6403
  </div>
6053
6404
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6054
6405
  <div class="pf-v6-l-flex__item">
6055
- <i
6056
- class="fas fa-check-circle"
6057
- aria-hidden="true"
6058
- ></i>
6406
+ <span class="pf-v6-c-icon">
6407
+ <span
6408
+ class="pf-v6-c-icon__content pf-m-success"
6409
+ >
6410
+ <i
6411
+ class="fas fa-check-circle"
6412
+ aria-hidden="true"
6413
+ ></i>
6414
+ </span>
6415
+ </span>
6059
6416
  </div>
6060
6417
  <div class="pf-v6-l-flex__item">
6061
6418
  <span>11</span>
6419
+ <span class="pf-v6-screen-reader">Completed</span>
6062
6420
  </div>
6063
6421
  </div>
6064
6422
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6065
6423
  <div class="pf-v6-l-flex__item">
6066
- <i
6067
- class="fas fa-exclamation-triangle"
6068
- aria-hidden="true"
6069
- ></i>
6424
+ <span class="pf-v6-c-icon">
6425
+ <span
6426
+ class="pf-v6-c-icon__content pf-m-warning"
6427
+ >
6428
+ <i
6429
+ class="fas fa-exclamation-triangle"
6430
+ aria-hidden="true"
6431
+ ></i>
6432
+ </span>
6433
+ </span>
6070
6434
  </div>
6071
6435
  <div class="pf-v6-l-flex__item">
6072
6436
  <span>4</span>
6437
+ <span class="pf-v6-screen-reader">Warnings</span>
6073
6438
  </div>
6074
6439
  </div>
6075
6440
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6076
6441
  <div class="pf-v6-l-flex__item">
6077
- <i
6078
- class="fas fa-times-circle"
6079
- aria-hidden="true"
6080
- ></i>
6442
+ <span class="pf-v6-c-icon">
6443
+ <span
6444
+ class="pf-v6-c-icon__content pf-m-danger"
6445
+ >
6446
+ <i
6447
+ class="fas fa-exclamation-circle"
6448
+ aria-hidden="true"
6449
+ ></i>
6450
+ </span>
6451
+ </span>
6081
6452
  </div>
6082
6453
  <div class="pf-v6-l-flex__item">
6083
6454
  <span>1</span>
6455
+ <span class="pf-v6-screen-reader">Errors</span>
6084
6456
  </div>
6085
6457
  </div>
6086
6458
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -6104,10 +6476,7 @@ wrapperTag: div
6104
6476
  </div>
6105
6477
  </li>
6106
6478
 
6107
- <li
6108
- class="pf-v6-c-data-list__item"
6109
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-3"
6110
- >
6479
+ <li class="pf-v6-c-data-list__item">
6111
6480
  <div class="pf-v6-c-data-list__item-row">
6112
6481
  <div class="pf-v6-c-data-list__item-content">
6113
6482
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6132,10 +6501,7 @@ wrapperTag: div
6132
6501
  </div>
6133
6502
  </li>
6134
6503
 
6135
- <li
6136
- class="pf-v6-c-data-list__item"
6137
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-4"
6138
- >
6504
+ <li class="pf-v6-c-data-list__item">
6139
6505
  <div class="pf-v6-c-data-list__item-row">
6140
6506
  <div class="pf-v6-c-data-list__item-content">
6141
6507
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6160,29 +6526,44 @@ wrapperTag: div
6160
6526
  <div class="pf-v6-l-flex pf-m-wrap">
6161
6527
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6162
6528
  <div class="pf-v6-l-flex__item">
6163
- <i
6164
- class="fas fa-code-branch"
6165
- aria-hidden="true"
6166
- ></i>
6529
+ <span class="pf-v6-c-icon">
6530
+ <span class="pf-v6-c-icon__content">
6531
+ <i
6532
+ class="fas fa-code-branch"
6533
+ aria-hidden="true"
6534
+ ></i>
6535
+ </span>
6536
+ </span>
6167
6537
  </div>
6168
6538
  <div class="pf-v6-l-flex__item">
6169
6539
  <span>10</span>
6540
+ <span class="pf-v6-screen-reader">Branches</span>
6170
6541
  </div>
6171
6542
  </div>
6172
6543
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6173
6544
  <div class="pf-v6-l-flex__item">
6174
- <i class="fas fa-code" aria-hidden="true"></i>
6545
+ <span class="pf-v6-c-icon">
6546
+ <span class="pf-v6-c-icon__content">
6547
+ <i class="fas fa-code" aria-hidden="true"></i>
6548
+ </span>
6549
+ </span>
6175
6550
  </div>
6176
6551
  <div class="pf-v6-l-flex__item">
6177
6552
  <span>4</span>
6553
+ <span class="pf-v6-screen-reader">Code blocks</span>
6178
6554
  </div>
6179
6555
  </div>
6180
6556
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6181
6557
  <div class="pf-v6-l-flex__item">
6182
- <i class="fas fa-cube" aria-hidden="true"></i>
6558
+ <span class="pf-v6-c-icon">
6559
+ <span class="pf-v6-c-icon__content">
6560
+ <i class="fas fa-cube" aria-hidden="true"></i>
6561
+ </span>
6562
+ </span>
6183
6563
  </div>
6184
6564
  <div class="pf-v6-l-flex__item">
6185
6565
  <span>5</span>
6566
+ <span class="pf-v6-screen-reader">Workspaces</span>
6186
6567
  </div>
6187
6568
  </div>
6188
6569
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -6206,10 +6587,7 @@ wrapperTag: div
6206
6587
  </div>
6207
6588
  </li>
6208
6589
 
6209
- <li
6210
- class="pf-v6-c-data-list__item"
6211
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-5"
6212
- >
6590
+ <li class="pf-v6-c-data-list__item">
6213
6591
  <div class="pf-v6-c-data-list__item-row">
6214
6592
  <div class="pf-v6-c-data-list__item-content">
6215
6593
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6231,62 +6609,98 @@ wrapperTag: div
6231
6609
  <div class="pf-v6-l-flex pf-m-wrap">
6232
6610
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6233
6611
  <div class="pf-v6-l-flex__item">
6234
- <i
6235
- class="fas fa-code-branch"
6236
- aria-hidden="true"
6237
- ></i>
6612
+ <span class="pf-v6-c-icon">
6613
+ <span class="pf-v6-c-icon__content">
6614
+ <i
6615
+ class="fas fa-code-branch"
6616
+ aria-hidden="true"
6617
+ ></i>
6618
+ </span>
6619
+ </span>
6238
6620
  </div>
6239
6621
  <div class="pf-v6-l-flex__item">
6240
6622
  <span>5</span>
6623
+ <span class="pf-v6-screen-reader">Branches</span>
6241
6624
  </div>
6242
6625
  </div>
6243
6626
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6244
6627
  <div class="pf-v6-l-flex__item">
6245
- <i class="fas fa-code" aria-hidden="true"></i>
6628
+ <span class="pf-v6-c-icon">
6629
+ <span class="pf-v6-c-icon__content">
6630
+ <i class="fas fa-code" aria-hidden="true"></i>
6631
+ </span>
6632
+ </span>
6246
6633
  </div>
6247
6634
  <div class="pf-v6-l-flex__item">
6248
6635
  <span>9</span>
6636
+ <span class="pf-v6-screen-reader">Code blocks</span>
6249
6637
  </div>
6250
6638
  </div>
6251
6639
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6252
6640
  <div class="pf-v6-l-flex__item">
6253
- <i class="fas fa-cube" aria-hidden="true"></i>
6641
+ <span class="pf-v6-c-icon">
6642
+ <span class="pf-v6-c-icon__content">
6643
+ <i class="fas fa-cube" aria-hidden="true"></i>
6644
+ </span>
6645
+ </span>
6254
6646
  </div>
6255
6647
  <div class="pf-v6-l-flex__item">
6256
6648
  <span>2</span>
6649
+ <span class="pf-v6-screen-reader">Workspaces</span>
6257
6650
  </div>
6258
6651
  </div>
6259
6652
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6260
6653
  <div class="pf-v6-l-flex__item">
6261
- <i
6262
- class="fas fa-check-circle"
6263
- aria-hidden="true"
6264
- ></i>
6654
+ <span class="pf-v6-c-icon">
6655
+ <span
6656
+ class="pf-v6-c-icon__content pf-m-success"
6657
+ >
6658
+ <i
6659
+ class="fas fa-check-circle"
6660
+ aria-hidden="true"
6661
+ ></i>
6662
+ </span>
6663
+ </span>
6265
6664
  </div>
6266
6665
  <div class="pf-v6-l-flex__item">
6267
6666
  <span>11</span>
6667
+ <span class="pf-v6-screen-reader">Completed</span>
6268
6668
  </div>
6269
6669
  </div>
6270
6670
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6271
6671
  <div class="pf-v6-l-flex__item">
6272
- <i
6273
- class="fas fa-exclamation-triangle"
6274
- aria-hidden="true"
6275
- ></i>
6672
+ <span class="pf-v6-c-icon">
6673
+ <span
6674
+ class="pf-v6-c-icon__content pf-m-warning"
6675
+ >
6676
+ <i
6677
+ class="fas fa-exclamation-triangle"
6678
+ aria-hidden="true"
6679
+ ></i>
6680
+ </span>
6681
+ </span>
6276
6682
  </div>
6277
6683
  <div class="pf-v6-l-flex__item">
6278
6684
  <span>4</span>
6685
+ <span class="pf-v6-screen-reader">Warnings</span>
6279
6686
  </div>
6280
6687
  </div>
6281
6688
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6282
6689
  <div class="pf-v6-l-flex__item">
6283
- <i
6284
- class="fas fa-times-circle"
6285
- aria-hidden="true"
6286
- ></i>
6690
+ <span class="pf-v6-c-icon">
6691
+ <span
6692
+ class="pf-v6-c-icon__content pf-m-danger"
6693
+ >
6694
+ <i
6695
+ class="fas fa-exclamation-circle"
6696
+ aria-hidden="true"
6697
+ ></i>
6698
+ </span>
6699
+ </span>
6287
6700
  </div>
6288
6701
  <div class="pf-v6-l-flex__item">
6289
6702
  <span>1</span>
6703
+ <span class="pf-v6-screen-reader">Errors</span>
6290
6704
  </div>
6291
6705
  </div>
6292
6706
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>