@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.61

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 (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +42 -4
  59. package/components/Menu/menu.scss +39 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +14 -1
  71. package/components/Panel/panel.scss +14 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1404 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2851 -437
  165. package/patternfly.css +2853 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -23,12 +23,31 @@ wrapperTag: div
23
23
  <div class="pf-v6-c-masthead__main">
24
24
  <span class="pf-v6-c-masthead__toggle">
25
25
  <button
26
- class="pf-v6-c-button pf-m-plain"
26
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
27
27
  type="button"
28
28
  aria-label="Global navigation"
29
29
  >
30
30
  <span class="pf-v6-c-button__icon">
31
- <i class="fas fa-bars" aria-hidden="true"></i>
31
+ <svg
32
+ viewBox="0 0 10 10"
33
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--middle"
40
+ d="M1,5 L9,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--arrow"
44
+ d="M1,5 L1,5 L1,5"
45
+ />
46
+ <path
47
+ class="pf-v6-c-button--hamburger-icon--bottom"
48
+ d="M9,9 L1,9"
49
+ />
50
+ </svg>
32
51
  </span>
33
52
  </button>
34
53
  </span>
@@ -136,7 +155,7 @@ wrapperTag: div
136
155
  </div>
137
156
  <div class="pf-v6-c-toolbar__item">
138
157
  <button
139
- class="pf-v6-c-menu-toggle pf-m-plain"
158
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
140
159
  type="button"
141
160
  aria-expanded="false"
142
161
  aria-label="Settings"
@@ -456,7 +475,7 @@ wrapperTag: div
456
475
  <div class="pf-v6-c-pagination pf-m-compact">
457
476
  <div class="pf-v6-c-pagination__page-menu">
458
477
  <button
459
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
478
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
460
479
  type="button"
461
480
  aria-expanded="false"
462
481
  aria-label="Menu toggle"
@@ -533,10 +552,7 @@ wrapperTag: div
533
552
  aria-label="Simple data list example"
534
553
  id="primary-detail-expanded-example-data-list"
535
554
  >
536
- <li
537
- class="pf-v6-c-data-list__item"
538
- aria-labelledby="primary-detail-expanded-example-data-list-item-1"
539
- >
555
+ <li class="pf-v6-c-data-list__item">
540
556
  <div class="pf-v6-c-data-list__item-row">
541
557
  <div class="pf-v6-c-data-list__item-content">
542
558
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -561,29 +577,52 @@ wrapperTag: div
561
577
  <div class="pf-v6-l-flex pf-m-wrap">
562
578
  <div class="pf-v6-l-flex pf-m-space-items-xs">
563
579
  <div class="pf-v6-l-flex__item">
564
- <i
565
- class="fas fa-code-branch"
566
- aria-hidden="true"
567
- ></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>
568
588
  </div>
569
589
  <div class="pf-v6-l-flex__item">
570
590
  <span>10</span>
591
+ <span class="pf-v6-screen-reader">Branches</span>
571
592
  </div>
572
593
  </div>
573
594
  <div class="pf-v6-l-flex pf-m-space-items-xs">
574
595
  <div class="pf-v6-l-flex__item">
575
- <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>
576
604
  </div>
577
605
  <div class="pf-v6-l-flex__item">
578
606
  <span>4</span>
607
+ <span
608
+ class="pf-v6-screen-reader"
609
+ >Code blocks</span>
579
610
  </div>
580
611
  </div>
581
612
  <div class="pf-v6-l-flex pf-m-space-items-xs">
582
613
  <div class="pf-v6-l-flex__item">
583
- <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>
584
622
  </div>
585
623
  <div class="pf-v6-l-flex__item">
586
624
  <span>5</span>
625
+ <span class="pf-v6-screen-reader">Workspaces</span>
587
626
  </div>
588
627
  </div>
589
628
  <div
@@ -612,10 +651,7 @@ wrapperTag: div
612
651
  </div>
613
652
  </li>
614
653
 
615
- <li
616
- class="pf-v6-c-data-list__item"
617
- aria-labelledby="primary-detail-expanded-example-data-list-item-2"
618
- >
654
+ <li class="pf-v6-c-data-list__item">
619
655
  <div class="pf-v6-c-data-list__item-row">
620
656
  <div class="pf-v6-c-data-list__item-content">
621
657
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -637,62 +673,106 @@ wrapperTag: div
637
673
  <div class="pf-v6-l-flex pf-m-wrap">
638
674
  <div class="pf-v6-l-flex pf-m-space-items-xs">
639
675
  <div class="pf-v6-l-flex__item">
640
- <i
641
- class="fas fa-code-branch"
642
- aria-hidden="true"
643
- ></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>
644
684
  </div>
645
685
  <div class="pf-v6-l-flex__item">
646
686
  <span>5</span>
687
+ <span class="pf-v6-screen-reader">Branches</span>
647
688
  </div>
648
689
  </div>
649
690
  <div class="pf-v6-l-flex pf-m-space-items-xs">
650
691
  <div class="pf-v6-l-flex__item">
651
- <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>
652
700
  </div>
653
701
  <div class="pf-v6-l-flex__item">
654
702
  <span>9</span>
703
+ <span
704
+ class="pf-v6-screen-reader"
705
+ >Code blocks</span>
655
706
  </div>
656
707
  </div>
657
708
  <div class="pf-v6-l-flex pf-m-space-items-xs">
658
709
  <div class="pf-v6-l-flex__item">
659
- <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>
660
718
  </div>
661
719
  <div class="pf-v6-l-flex__item">
662
720
  <span>2</span>
721
+ <span class="pf-v6-screen-reader">Workspaces</span>
663
722
  </div>
664
723
  </div>
665
724
  <div class="pf-v6-l-flex pf-m-space-items-xs">
666
725
  <div class="pf-v6-l-flex__item">
667
- <i
668
- class="fas fa-check-circle"
669
- aria-hidden="true"
670
- ></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>
671
736
  </div>
672
737
  <div class="pf-v6-l-flex__item">
673
738
  <span>11</span>
739
+ <span class="pf-v6-screen-reader">Completed</span>
674
740
  </div>
675
741
  </div>
676
742
  <div class="pf-v6-l-flex pf-m-space-items-xs">
677
743
  <div class="pf-v6-l-flex__item">
678
- <i
679
- class="fas fa-exclamation-triangle"
680
- aria-hidden="true"
681
- ></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>
682
754
  </div>
683
755
  <div class="pf-v6-l-flex__item">
684
756
  <span>4</span>
757
+ <span class="pf-v6-screen-reader">Warnings</span>
685
758
  </div>
686
759
  </div>
687
760
  <div class="pf-v6-l-flex pf-m-space-items-xs">
688
761
  <div class="pf-v6-l-flex__item">
689
- <i
690
- class="fas fa-times-circle"
691
- aria-hidden="true"
692
- ></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>
693
772
  </div>
694
773
  <div class="pf-v6-l-flex__item">
695
774
  <span>1</span>
775
+ <span class="pf-v6-screen-reader">Errors</span>
696
776
  </div>
697
777
  </div>
698
778
  <div
@@ -721,10 +801,7 @@ wrapperTag: div
721
801
  </div>
722
802
  </li>
723
803
 
724
- <li
725
- class="pf-v6-c-data-list__item"
726
- aria-labelledby="primary-detail-expanded-example-data-list-item-3"
727
- >
804
+ <li class="pf-v6-c-data-list__item">
728
805
  <div class="pf-v6-c-data-list__item-row">
729
806
  <div class="pf-v6-c-data-list__item-content">
730
807
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -752,10 +829,7 @@ wrapperTag: div
752
829
  </div>
753
830
  </li>
754
831
 
755
- <li
756
- class="pf-v6-c-data-list__item"
757
- aria-labelledby="primary-detail-expanded-example-data-list-item-4"
758
- >
832
+ <li class="pf-v6-c-data-list__item">
759
833
  <div class="pf-v6-c-data-list__item-row">
760
834
  <div class="pf-v6-c-data-list__item-content">
761
835
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -780,29 +854,52 @@ wrapperTag: div
780
854
  <div class="pf-v6-l-flex pf-m-wrap">
781
855
  <div class="pf-v6-l-flex pf-m-space-items-xs">
782
856
  <div class="pf-v6-l-flex__item">
783
- <i
784
- class="fas fa-code-branch"
785
- aria-hidden="true"
786
- ></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>
787
865
  </div>
788
866
  <div class="pf-v6-l-flex__item">
789
867
  <span>10</span>
868
+ <span class="pf-v6-screen-reader">Branches</span>
790
869
  </div>
791
870
  </div>
792
871
  <div class="pf-v6-l-flex pf-m-space-items-xs">
793
872
  <div class="pf-v6-l-flex__item">
794
- <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>
795
881
  </div>
796
882
  <div class="pf-v6-l-flex__item">
797
883
  <span>4</span>
884
+ <span
885
+ class="pf-v6-screen-reader"
886
+ >Code blocks</span>
798
887
  </div>
799
888
  </div>
800
889
  <div class="pf-v6-l-flex pf-m-space-items-xs">
801
890
  <div class="pf-v6-l-flex__item">
802
- <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>
803
899
  </div>
804
900
  <div class="pf-v6-l-flex__item">
805
901
  <span>5</span>
902
+ <span class="pf-v6-screen-reader">Workspaces</span>
806
903
  </div>
807
904
  </div>
808
905
  <div
@@ -831,10 +928,7 @@ wrapperTag: div
831
928
  </div>
832
929
  </li>
833
930
 
834
- <li
835
- class="pf-v6-c-data-list__item"
836
- aria-labelledby="primary-detail-expanded-example-data-list-item-5"
837
- >
931
+ <li class="pf-v6-c-data-list__item">
838
932
  <div class="pf-v6-c-data-list__item-row">
839
933
  <div class="pf-v6-c-data-list__item-content">
840
934
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -856,62 +950,106 @@ wrapperTag: div
856
950
  <div class="pf-v6-l-flex pf-m-wrap">
857
951
  <div class="pf-v6-l-flex pf-m-space-items-xs">
858
952
  <div class="pf-v6-l-flex__item">
859
- <i
860
- class="fas fa-code-branch"
861
- aria-hidden="true"
862
- ></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>
863
961
  </div>
864
962
  <div class="pf-v6-l-flex__item">
865
963
  <span>5</span>
964
+ <span class="pf-v6-screen-reader">Branches</span>
866
965
  </div>
867
966
  </div>
868
967
  <div class="pf-v6-l-flex pf-m-space-items-xs">
869
968
  <div class="pf-v6-l-flex__item">
870
- <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>
871
977
  </div>
872
978
  <div class="pf-v6-l-flex__item">
873
979
  <span>9</span>
980
+ <span
981
+ class="pf-v6-screen-reader"
982
+ >Code blocks</span>
874
983
  </div>
875
984
  </div>
876
985
  <div class="pf-v6-l-flex pf-m-space-items-xs">
877
986
  <div class="pf-v6-l-flex__item">
878
- <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>
879
995
  </div>
880
996
  <div class="pf-v6-l-flex__item">
881
997
  <span>2</span>
998
+ <span class="pf-v6-screen-reader">Workspaces</span>
882
999
  </div>
883
1000
  </div>
884
1001
  <div class="pf-v6-l-flex pf-m-space-items-xs">
885
1002
  <div class="pf-v6-l-flex__item">
886
- <i
887
- class="fas fa-check-circle"
888
- aria-hidden="true"
889
- ></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>
890
1013
  </div>
891
1014
  <div class="pf-v6-l-flex__item">
892
1015
  <span>11</span>
1016
+ <span class="pf-v6-screen-reader">Completed</span>
893
1017
  </div>
894
1018
  </div>
895
1019
  <div class="pf-v6-l-flex pf-m-space-items-xs">
896
1020
  <div class="pf-v6-l-flex__item">
897
- <i
898
- class="fas fa-exclamation-triangle"
899
- aria-hidden="true"
900
- ></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>
901
1031
  </div>
902
1032
  <div class="pf-v6-l-flex__item">
903
1033
  <span>4</span>
1034
+ <span class="pf-v6-screen-reader">Warnings</span>
904
1035
  </div>
905
1036
  </div>
906
1037
  <div class="pf-v6-l-flex pf-m-space-items-xs">
907
1038
  <div class="pf-v6-l-flex__item">
908
- <i
909
- class="fas fa-times-circle"
910
- aria-hidden="true"
911
- ></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>
912
1049
  </div>
913
1050
  <div class="pf-v6-l-flex__item">
914
1051
  <span>1</span>
1052
+ <span class="pf-v6-screen-reader">Errors</span>
915
1053
  </div>
916
1054
  </div>
917
1055
  <div
@@ -1001,25 +1139,6 @@ wrapperTag: div
1001
1139
  <button
1002
1140
  type="button"
1003
1141
  class="pf-v6-c-tabs__link"
1004
- onclick="
1005
- event.preventDefault();
1006
- ((e) => {
1007
- const el = this,
1008
- li = this.closest('li'),
1009
- ul = this.closest('ul'),
1010
- tabs = this.closest('.pf-v6-c-tabs'),
1011
- left = Math.round(li.offsetLeft),
1012
- top = Math.round(li.offsetTop),
1013
- width = Math.round(li.offsetWidth),
1014
- height = Math.round(li.offsetHeight);
1015
-
1016
- ul.querySelectorAll('li').forEach(function(el) {
1017
- el.classList.remove('pf-m-current')});
1018
- li.classList.add('pf-m-current');
1019
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1020
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1021
- }
1022
- )()"
1023
1142
  role="tab"
1024
1143
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1025
1144
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
@@ -1031,25 +1150,6 @@ wrapperTag: div
1031
1150
  <button
1032
1151
  type="button"
1033
1152
  class="pf-v6-c-tabs__link"
1034
- onclick="
1035
- event.preventDefault();
1036
- ((e) => {
1037
- const el = this,
1038
- li = this.closest('li'),
1039
- ul = this.closest('ul'),
1040
- tabs = this.closest('.pf-v6-c-tabs'),
1041
- left = Math.round(li.offsetLeft),
1042
- top = Math.round(li.offsetTop),
1043
- width = Math.round(li.offsetWidth),
1044
- height = Math.round(li.offsetHeight);
1045
-
1046
- ul.querySelectorAll('li').forEach(function(el) {
1047
- el.classList.remove('pf-m-current')});
1048
- li.classList.add('pf-m-current');
1049
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1050
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1051
- }
1052
- )()"
1053
1153
  role="tab"
1054
1154
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1055
1155
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
@@ -1192,12 +1292,31 @@ wrapperTag: div
1192
1292
  <div class="pf-v6-c-masthead__main">
1193
1293
  <span class="pf-v6-c-masthead__toggle">
1194
1294
  <button
1195
- class="pf-v6-c-button pf-m-plain"
1295
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1196
1296
  type="button"
1197
1297
  aria-label="Global navigation"
1198
1298
  >
1199
1299
  <span class="pf-v6-c-button__icon">
1200
- <i class="fas fa-bars" aria-hidden="true"></i>
1300
+ <svg
1301
+ viewBox="0 0 10 10"
1302
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1303
+ width="1em"
1304
+ height="1em"
1305
+ >
1306
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1307
+ <path
1308
+ class="pf-v6-c-button--hamburger-icon--middle"
1309
+ d="M1,5 L9,5"
1310
+ />
1311
+ <path
1312
+ class="pf-v6-c-button--hamburger-icon--arrow"
1313
+ d="M1,5 L1,5 L1,5"
1314
+ />
1315
+ <path
1316
+ class="pf-v6-c-button--hamburger-icon--bottom"
1317
+ d="M9,9 L1,9"
1318
+ />
1319
+ </svg>
1201
1320
  </span>
1202
1321
  </button>
1203
1322
  </span>
@@ -1305,7 +1424,7 @@ wrapperTag: div
1305
1424
  </div>
1306
1425
  <div class="pf-v6-c-toolbar__item">
1307
1426
  <button
1308
- class="pf-v6-c-menu-toggle pf-m-plain"
1427
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1309
1428
  type="button"
1310
1429
  aria-expanded="false"
1311
1430
  aria-label="Settings"
@@ -1626,7 +1745,7 @@ wrapperTag: div
1626
1745
  <div class="pf-v6-c-pagination pf-m-compact">
1627
1746
  <div class="pf-v6-c-pagination__page-menu">
1628
1747
  <button
1629
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1748
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1630
1749
  type="button"
1631
1750
  aria-expanded="false"
1632
1751
  aria-label="Menu toggle"
@@ -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
@@ -2243,12 +2481,31 @@ wrapperTag: div
2243
2481
  <div class="pf-v6-c-masthead__main">
2244
2482
  <span class="pf-v6-c-masthead__toggle">
2245
2483
  <button
2246
- class="pf-v6-c-button pf-m-plain"
2484
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2247
2485
  type="button"
2248
2486
  aria-label="Global navigation"
2249
2487
  >
2250
2488
  <span class="pf-v6-c-button__icon">
2251
- <i class="fas fa-bars" aria-hidden="true"></i>
2489
+ <svg
2490
+ viewBox="0 0 10 10"
2491
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2492
+ width="1em"
2493
+ height="1em"
2494
+ >
2495
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2496
+ <path
2497
+ class="pf-v6-c-button--hamburger-icon--middle"
2498
+ d="M1,5 L9,5"
2499
+ />
2500
+ <path
2501
+ class="pf-v6-c-button--hamburger-icon--arrow"
2502
+ d="M1,5 L1,5 L1,5"
2503
+ />
2504
+ <path
2505
+ class="pf-v6-c-button--hamburger-icon--bottom"
2506
+ d="M9,9 L1,9"
2507
+ />
2508
+ </svg>
2252
2509
  </span>
2253
2510
  </button>
2254
2511
  </span>
@@ -2356,7 +2613,7 @@ wrapperTag: div
2356
2613
  </div>
2357
2614
  <div class="pf-v6-c-toolbar__item">
2358
2615
  <button
2359
- class="pf-v6-c-menu-toggle pf-m-plain"
2616
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2360
2617
  type="button"
2361
2618
  aria-expanded="false"
2362
2619
  aria-label="Settings"
@@ -2621,7 +2878,7 @@ wrapperTag: div
2621
2878
  <div class="pf-v6-c-pagination pf-m-compact">
2622
2879
  <div class="pf-v6-c-pagination__page-menu">
2623
2880
  <button
2624
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2881
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2625
2882
  type="button"
2626
2883
  aria-expanded="false"
2627
2884
  aria-label="Menu toggle"
@@ -2698,10 +2955,7 @@ wrapperTag: div
2698
2955
  aria-label="Simple data list example"
2699
2956
  id="primary-detail-content-body-padding-example-data-list"
2700
2957
  >
2701
- <li
2702
- class="pf-v6-c-data-list__item"
2703
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-1"
2704
- >
2958
+ <li class="pf-v6-c-data-list__item">
2705
2959
  <div class="pf-v6-c-data-list__item-row">
2706
2960
  <div class="pf-v6-c-data-list__item-content">
2707
2961
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2726,29 +2980,52 @@ wrapperTag: div
2726
2980
  <div class="pf-v6-l-flex pf-m-wrap">
2727
2981
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2728
2982
  <div class="pf-v6-l-flex__item">
2729
- <i
2730
- class="fas fa-code-branch"
2731
- aria-hidden="true"
2732
- ></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>
2733
2991
  </div>
2734
2992
  <div class="pf-v6-l-flex__item">
2735
2993
  <span>10</span>
2994
+ <span class="pf-v6-screen-reader">Branches</span>
2736
2995
  </div>
2737
2996
  </div>
2738
2997
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2739
2998
  <div class="pf-v6-l-flex__item">
2740
- <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>
2741
3007
  </div>
2742
3008
  <div class="pf-v6-l-flex__item">
2743
3009
  <span>4</span>
3010
+ <span
3011
+ class="pf-v6-screen-reader"
3012
+ >Code blocks</span>
2744
3013
  </div>
2745
3014
  </div>
2746
3015
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2747
3016
  <div class="pf-v6-l-flex__item">
2748
- <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>
2749
3025
  </div>
2750
3026
  <div class="pf-v6-l-flex__item">
2751
3027
  <span>5</span>
3028
+ <span class="pf-v6-screen-reader">Workspaces</span>
2752
3029
  </div>
2753
3030
  </div>
2754
3031
  <div
@@ -2777,10 +3054,7 @@ wrapperTag: div
2777
3054
  </div>
2778
3055
  </li>
2779
3056
 
2780
- <li
2781
- class="pf-v6-c-data-list__item"
2782
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-2"
2783
- >
3057
+ <li class="pf-v6-c-data-list__item">
2784
3058
  <div class="pf-v6-c-data-list__item-row">
2785
3059
  <div class="pf-v6-c-data-list__item-content">
2786
3060
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2802,62 +3076,106 @@ wrapperTag: div
2802
3076
  <div class="pf-v6-l-flex pf-m-wrap">
2803
3077
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2804
3078
  <div class="pf-v6-l-flex__item">
2805
- <i
2806
- class="fas fa-code-branch"
2807
- aria-hidden="true"
2808
- ></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>
2809
3087
  </div>
2810
3088
  <div class="pf-v6-l-flex__item">
2811
3089
  <span>5</span>
3090
+ <span class="pf-v6-screen-reader">Branches</span>
2812
3091
  </div>
2813
3092
  </div>
2814
3093
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2815
3094
  <div class="pf-v6-l-flex__item">
2816
- <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>
2817
3103
  </div>
2818
3104
  <div class="pf-v6-l-flex__item">
2819
3105
  <span>9</span>
3106
+ <span
3107
+ class="pf-v6-screen-reader"
3108
+ >Code blocks</span>
2820
3109
  </div>
2821
3110
  </div>
2822
3111
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2823
3112
  <div class="pf-v6-l-flex__item">
2824
- <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>
2825
3121
  </div>
2826
3122
  <div class="pf-v6-l-flex__item">
2827
3123
  <span>2</span>
3124
+ <span class="pf-v6-screen-reader">Workspaces</span>
2828
3125
  </div>
2829
3126
  </div>
2830
3127
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2831
3128
  <div class="pf-v6-l-flex__item">
2832
- <i
2833
- class="fas fa-check-circle"
2834
- aria-hidden="true"
2835
- ></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>
2836
3139
  </div>
2837
3140
  <div class="pf-v6-l-flex__item">
2838
3141
  <span>11</span>
3142
+ <span class="pf-v6-screen-reader">Completed</span>
2839
3143
  </div>
2840
3144
  </div>
2841
3145
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2842
3146
  <div class="pf-v6-l-flex__item">
2843
- <i
2844
- class="fas fa-exclamation-triangle"
2845
- aria-hidden="true"
2846
- ></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>
2847
3157
  </div>
2848
3158
  <div class="pf-v6-l-flex__item">
2849
3159
  <span>4</span>
3160
+ <span class="pf-v6-screen-reader">Warnings</span>
2850
3161
  </div>
2851
3162
  </div>
2852
3163
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2853
3164
  <div class="pf-v6-l-flex__item">
2854
- <i
2855
- class="fas fa-times-circle"
2856
- aria-hidden="true"
2857
- ></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>
2858
3175
  </div>
2859
3176
  <div class="pf-v6-l-flex__item">
2860
3177
  <span>1</span>
3178
+ <span class="pf-v6-screen-reader">Errors</span>
2861
3179
  </div>
2862
3180
  </div>
2863
3181
  <div
@@ -2886,10 +3204,7 @@ wrapperTag: div
2886
3204
  </div>
2887
3205
  </li>
2888
3206
 
2889
- <li
2890
- class="pf-v6-c-data-list__item"
2891
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-3"
2892
- >
3207
+ <li class="pf-v6-c-data-list__item">
2893
3208
  <div class="pf-v6-c-data-list__item-row">
2894
3209
  <div class="pf-v6-c-data-list__item-content">
2895
3210
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2917,10 +3232,7 @@ wrapperTag: div
2917
3232
  </div>
2918
3233
  </li>
2919
3234
 
2920
- <li
2921
- class="pf-v6-c-data-list__item"
2922
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-4"
2923
- >
3235
+ <li class="pf-v6-c-data-list__item">
2924
3236
  <div class="pf-v6-c-data-list__item-row">
2925
3237
  <div class="pf-v6-c-data-list__item-content">
2926
3238
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -2945,29 +3257,52 @@ wrapperTag: div
2945
3257
  <div class="pf-v6-l-flex pf-m-wrap">
2946
3258
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2947
3259
  <div class="pf-v6-l-flex__item">
2948
- <i
2949
- class="fas fa-code-branch"
2950
- aria-hidden="true"
2951
- ></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>
2952
3268
  </div>
2953
3269
  <div class="pf-v6-l-flex__item">
2954
3270
  <span>10</span>
3271
+ <span class="pf-v6-screen-reader">Branches</span>
2955
3272
  </div>
2956
3273
  </div>
2957
3274
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2958
3275
  <div class="pf-v6-l-flex__item">
2959
- <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>
2960
3284
  </div>
2961
3285
  <div class="pf-v6-l-flex__item">
2962
3286
  <span>4</span>
3287
+ <span
3288
+ class="pf-v6-screen-reader"
3289
+ >Code blocks</span>
2963
3290
  </div>
2964
3291
  </div>
2965
3292
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2966
3293
  <div class="pf-v6-l-flex__item">
2967
- <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>
2968
3302
  </div>
2969
3303
  <div class="pf-v6-l-flex__item">
2970
3304
  <span>5</span>
3305
+ <span class="pf-v6-screen-reader">Workspaces</span>
2971
3306
  </div>
2972
3307
  </div>
2973
3308
  <div
@@ -2996,10 +3331,7 @@ wrapperTag: div
2996
3331
  </div>
2997
3332
  </li>
2998
3333
 
2999
- <li
3000
- class="pf-v6-c-data-list__item"
3001
- aria-labelledby="primary-detail-content-body-padding-example-data-list-item-5"
3002
- >
3334
+ <li class="pf-v6-c-data-list__item">
3003
3335
  <div class="pf-v6-c-data-list__item-row">
3004
3336
  <div class="pf-v6-c-data-list__item-content">
3005
3337
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3021,62 +3353,106 @@ wrapperTag: div
3021
3353
  <div class="pf-v6-l-flex pf-m-wrap">
3022
3354
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3023
3355
  <div class="pf-v6-l-flex__item">
3024
- <i
3025
- class="fas fa-code-branch"
3026
- aria-hidden="true"
3027
- ></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>
3028
3364
  </div>
3029
3365
  <div class="pf-v6-l-flex__item">
3030
3366
  <span>5</span>
3367
+ <span class="pf-v6-screen-reader">Branches</span>
3031
3368
  </div>
3032
3369
  </div>
3033
3370
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3034
3371
  <div class="pf-v6-l-flex__item">
3035
- <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>
3036
3380
  </div>
3037
3381
  <div class="pf-v6-l-flex__item">
3038
3382
  <span>9</span>
3383
+ <span
3384
+ class="pf-v6-screen-reader"
3385
+ >Code blocks</span>
3039
3386
  </div>
3040
3387
  </div>
3041
3388
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3042
3389
  <div class="pf-v6-l-flex__item">
3043
- <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>
3044
3398
  </div>
3045
3399
  <div class="pf-v6-l-flex__item">
3046
3400
  <span>2</span>
3401
+ <span class="pf-v6-screen-reader">Workspaces</span>
3047
3402
  </div>
3048
3403
  </div>
3049
3404
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3050
3405
  <div class="pf-v6-l-flex__item">
3051
- <i
3052
- class="fas fa-check-circle"
3053
- aria-hidden="true"
3054
- ></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>
3055
3416
  </div>
3056
3417
  <div class="pf-v6-l-flex__item">
3057
3418
  <span>11</span>
3419
+ <span class="pf-v6-screen-reader">Completed</span>
3058
3420
  </div>
3059
3421
  </div>
3060
3422
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3061
3423
  <div class="pf-v6-l-flex__item">
3062
- <i
3063
- class="fas fa-exclamation-triangle"
3064
- aria-hidden="true"
3065
- ></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>
3066
3434
  </div>
3067
3435
  <div class="pf-v6-l-flex__item">
3068
3436
  <span>4</span>
3437
+ <span class="pf-v6-screen-reader">Warnings</span>
3069
3438
  </div>
3070
3439
  </div>
3071
3440
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3072
3441
  <div class="pf-v6-l-flex__item">
3073
- <i
3074
- class="fas fa-times-circle"
3075
- aria-hidden="true"
3076
- ></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>
3077
3452
  </div>
3078
3453
  <div class="pf-v6-l-flex__item">
3079
3454
  <span>1</span>
3455
+ <span class="pf-v6-screen-reader">Errors</span>
3080
3456
  </div>
3081
3457
  </div>
3082
3458
  <div
@@ -3238,12 +3614,31 @@ wrapperTag: div
3238
3614
  <div class="pf-v6-c-masthead__main">
3239
3615
  <span class="pf-v6-c-masthead__toggle">
3240
3616
  <button
3241
- class="pf-v6-c-button pf-m-plain"
3617
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3242
3618
  type="button"
3243
3619
  aria-label="Global navigation"
3244
3620
  >
3245
3621
  <span class="pf-v6-c-button__icon">
3246
- <i class="fas fa-bars" aria-hidden="true"></i>
3622
+ <svg
3623
+ viewBox="0 0 10 10"
3624
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3625
+ width="1em"
3626
+ height="1em"
3627
+ >
3628
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3629
+ <path
3630
+ class="pf-v6-c-button--hamburger-icon--middle"
3631
+ d="M1,5 L9,5"
3632
+ />
3633
+ <path
3634
+ class="pf-v6-c-button--hamburger-icon--arrow"
3635
+ d="M1,5 L1,5 L1,5"
3636
+ />
3637
+ <path
3638
+ class="pf-v6-c-button--hamburger-icon--bottom"
3639
+ d="M9,9 L1,9"
3640
+ />
3641
+ </svg>
3247
3642
  </span>
3248
3643
  </button>
3249
3644
  </span>
@@ -3351,7 +3746,7 @@ wrapperTag: div
3351
3746
  </div>
3352
3747
  <div class="pf-v6-c-toolbar__item">
3353
3748
  <button
3354
- class="pf-v6-c-menu-toggle pf-m-plain"
3749
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3355
3750
  type="button"
3356
3751
  aria-expanded="false"
3357
3752
  aria-label="Settings"
@@ -3686,7 +4081,7 @@ wrapperTag: div
3686
4081
  <div class="pf-v6-c-pagination pf-m-compact">
3687
4082
  <div class="pf-v6-c-pagination__page-menu">
3688
4083
  <button
3689
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
4084
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3690
4085
  type="button"
3691
4086
  aria-expanded="false"
3692
4087
  aria-label="Menu toggle"
@@ -4351,12 +4746,31 @@ wrapperTag: div
4351
4746
  <div class="pf-v6-c-masthead__main">
4352
4747
  <span class="pf-v6-c-masthead__toggle">
4353
4748
  <button
4354
- class="pf-v6-c-button pf-m-plain"
4749
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4355
4750
  type="button"
4356
4751
  aria-label="Global navigation"
4357
4752
  >
4358
4753
  <span class="pf-v6-c-button__icon">
4359
- <i class="fas fa-bars" aria-hidden="true"></i>
4754
+ <svg
4755
+ viewBox="0 0 10 10"
4756
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4757
+ width="1em"
4758
+ height="1em"
4759
+ >
4760
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4761
+ <path
4762
+ class="pf-v6-c-button--hamburger-icon--middle"
4763
+ d="M1,5 L9,5"
4764
+ />
4765
+ <path
4766
+ class="pf-v6-c-button--hamburger-icon--arrow"
4767
+ d="M1,5 L1,5 L1,5"
4768
+ />
4769
+ <path
4770
+ class="pf-v6-c-button--hamburger-icon--bottom"
4771
+ d="M9,9 L1,9"
4772
+ />
4773
+ </svg>
4360
4774
  </span>
4361
4775
  </button>
4362
4776
  </span>
@@ -4464,7 +4878,7 @@ wrapperTag: div
4464
4878
  </div>
4465
4879
  <div class="pf-v6-c-toolbar__item">
4466
4880
  <button
4467
- class="pf-v6-c-menu-toggle pf-m-plain"
4881
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4468
4882
  type="button"
4469
4883
  aria-expanded="false"
4470
4884
  aria-label="Settings"
@@ -4811,12 +5225,31 @@ wrapperTag: div
4811
5225
  <div class="pf-v6-c-masthead__main">
4812
5226
  <span class="pf-v6-c-masthead__toggle">
4813
5227
  <button
4814
- class="pf-v6-c-button pf-m-plain"
5228
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4815
5229
  type="button"
4816
5230
  aria-label="Global navigation"
4817
5231
  >
4818
5232
  <span class="pf-v6-c-button__icon">
4819
- <i class="fas fa-bars" aria-hidden="true"></i>
5233
+ <svg
5234
+ viewBox="0 0 10 10"
5235
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
5236
+ width="1em"
5237
+ height="1em"
5238
+ >
5239
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
5240
+ <path
5241
+ class="pf-v6-c-button--hamburger-icon--middle"
5242
+ d="M1,5 L9,5"
5243
+ />
5244
+ <path
5245
+ class="pf-v6-c-button--hamburger-icon--arrow"
5246
+ d="M1,5 L1,5 L1,5"
5247
+ />
5248
+ <path
5249
+ class="pf-v6-c-button--hamburger-icon--bottom"
5250
+ d="M9,9 L1,9"
5251
+ />
5252
+ </svg>
4820
5253
  </span>
4821
5254
  </button>
4822
5255
  </span>
@@ -4924,7 +5357,7 @@ wrapperTag: div
4924
5357
  </div>
4925
5358
  <div class="pf-v6-c-toolbar__item">
4926
5359
  <button
4927
- class="pf-v6-c-menu-toggle pf-m-plain"
5360
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4928
5361
  type="button"
4929
5362
  aria-expanded="false"
4930
5363
  aria-label="Settings"
@@ -5098,7 +5531,7 @@ wrapperTag: div
5098
5531
  </div>
5099
5532
  <div class="pf-v6-c-pagination__page-menu">
5100
5533
  <button
5101
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
5534
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5102
5535
  type="button"
5103
5536
  aria-expanded="false"
5104
5537
  aria-label="Menu toggle"
@@ -5137,10 +5570,7 @@ wrapperTag: div
5137
5570
  aria-label="Selectable rows data list example"
5138
5571
  id="primary-detail-card-data-list-example-drawer-card-data-list"
5139
5572
  >
5140
- <li
5141
- class="pf-v6-c-data-list__item"
5142
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-1"
5143
- >
5573
+ <li class="pf-v6-c-data-list__item">
5144
5574
  <div class="pf-v6-c-data-list__item-row">
5145
5575
  <div class="pf-v6-c-data-list__item-content">
5146
5576
  <div class="pf-v6-c-data-list__cell">
@@ -5153,10 +5583,7 @@ wrapperTag: div
5153
5583
  </div>
5154
5584
  </li>
5155
5585
 
5156
- <li
5157
- class="pf-v6-c-data-list__item pf-m-selected"
5158
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-2"
5159
- >
5586
+ <li class="pf-v6-c-data-list__item pf-m-selected">
5160
5587
  <div class="pf-v6-c-data-list__item-row">
5161
5588
  <div class="pf-v6-c-data-list__item-content">
5162
5589
  <div class="pf-v6-c-data-list__cell">
@@ -5169,10 +5596,7 @@ wrapperTag: div
5169
5596
  </div>
5170
5597
  </li>
5171
5598
 
5172
- <li
5173
- class="pf-v6-c-data-list__item"
5174
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-3"
5175
- >
5599
+ <li class="pf-v6-c-data-list__item">
5176
5600
  <div class="pf-v6-c-data-list__item-row">
5177
5601
  <div class="pf-v6-c-data-list__item-content">
5178
5602
  <div class="pf-v6-c-data-list__cell">
@@ -5185,10 +5609,7 @@ wrapperTag: div
5185
5609
  </div>
5186
5610
  </li>
5187
5611
 
5188
- <li
5189
- class="pf-v6-c-data-list__item"
5190
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-4"
5191
- >
5612
+ <li class="pf-v6-c-data-list__item">
5192
5613
  <div class="pf-v6-c-data-list__item-row">
5193
5614
  <div class="pf-v6-c-data-list__item-content">
5194
5615
  <div class="pf-v6-c-data-list__cell">
@@ -5201,10 +5622,7 @@ wrapperTag: div
5201
5622
  </div>
5202
5623
  </li>
5203
5624
 
5204
- <li
5205
- class="pf-v6-c-data-list__item"
5206
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-5"
5207
- >
5625
+ <li class="pf-v6-c-data-list__item">
5208
5626
  <div class="pf-v6-c-data-list__item-row">
5209
5627
  <div class="pf-v6-c-data-list__item-content">
5210
5628
  <div class="pf-v6-c-data-list__cell">
@@ -5217,10 +5635,7 @@ wrapperTag: div
5217
5635
  </div>
5218
5636
  </li>
5219
5637
 
5220
- <li
5221
- class="pf-v6-c-data-list__item"
5222
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-6"
5223
- >
5638
+ <li class="pf-v6-c-data-list__item">
5224
5639
  <div class="pf-v6-c-data-list__item-row">
5225
5640
  <div class="pf-v6-c-data-list__item-content">
5226
5641
  <div class="pf-v6-c-data-list__cell">
@@ -5233,10 +5648,7 @@ wrapperTag: div
5233
5648
  </div>
5234
5649
  </li>
5235
5650
 
5236
- <li
5237
- class="pf-v6-c-data-list__item"
5238
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-7"
5239
- >
5651
+ <li class="pf-v6-c-data-list__item">
5240
5652
  <div class="pf-v6-c-data-list__item-row">
5241
5653
  <div class="pf-v6-c-data-list__item-content">
5242
5654
  <div class="pf-v6-c-data-list__cell">
@@ -5249,10 +5661,7 @@ wrapperTag: div
5249
5661
  </div>
5250
5662
  </li>
5251
5663
 
5252
- <li
5253
- class="pf-v6-c-data-list__item"
5254
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-8"
5255
- >
5664
+ <li class="pf-v6-c-data-list__item">
5256
5665
  <div class="pf-v6-c-data-list__item-row">
5257
5666
  <div class="pf-v6-c-data-list__item-content">
5258
5667
  <div class="pf-v6-c-data-list__cell">
@@ -5265,10 +5674,7 @@ wrapperTag: div
5265
5674
  </div>
5266
5675
  </li>
5267
5676
 
5268
- <li
5269
- class="pf-v6-c-data-list__item"
5270
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-9"
5271
- >
5677
+ <li class="pf-v6-c-data-list__item">
5272
5678
  <div class="pf-v6-c-data-list__item-row">
5273
5679
  <div class="pf-v6-c-data-list__item-content">
5274
5680
  <div class="pf-v6-c-data-list__cell">
@@ -5281,10 +5687,7 @@ wrapperTag: div
5281
5687
  </div>
5282
5688
  </li>
5283
5689
 
5284
- <li
5285
- class="pf-v6-c-data-list__item"
5286
- aria-labelledby="primary-detail-card-data-list-example-drawer-card-data-list-item-10"
5287
- >
5690
+ <li class="pf-v6-c-data-list__item">
5288
5691
  <div class="pf-v6-c-data-list__item-row">
5289
5692
  <div class="pf-v6-c-data-list__item-content">
5290
5693
  <div class="pf-v6-c-data-list__cell">
@@ -5432,12 +5835,31 @@ wrapperTag: div
5432
5835
  <div class="pf-v6-c-masthead__main">
5433
5836
  <span class="pf-v6-c-masthead__toggle">
5434
5837
  <button
5435
- class="pf-v6-c-button pf-m-plain"
5838
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
5436
5839
  type="button"
5437
5840
  aria-label="Global navigation"
5438
5841
  >
5439
5842
  <span class="pf-v6-c-button__icon">
5440
- <i class="fas fa-bars" aria-hidden="true"></i>
5843
+ <svg
5844
+ viewBox="0 0 10 10"
5845
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
5846
+ width="1em"
5847
+ height="1em"
5848
+ >
5849
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
5850
+ <path
5851
+ class="pf-v6-c-button--hamburger-icon--middle"
5852
+ d="M1,5 L9,5"
5853
+ />
5854
+ <path
5855
+ class="pf-v6-c-button--hamburger-icon--arrow"
5856
+ d="M1,5 L1,5 L1,5"
5857
+ />
5858
+ <path
5859
+ class="pf-v6-c-button--hamburger-icon--bottom"
5860
+ d="M9,9 L1,9"
5861
+ />
5862
+ </svg>
5441
5863
  </span>
5442
5864
  </button>
5443
5865
  </span>
@@ -5545,7 +5967,7 @@ wrapperTag: div
5545
5967
  </div>
5546
5968
  <div class="pf-v6-c-toolbar__item">
5547
5969
  <button
5548
- class="pf-v6-c-menu-toggle pf-m-plain"
5970
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
5549
5971
  type="button"
5550
5972
  aria-expanded="false"
5551
5973
  aria-label="Settings"
@@ -5759,7 +6181,7 @@ wrapperTag: div
5759
6181
  <div class="pf-v6-c-pagination pf-m-compact">
5760
6182
  <div class="pf-v6-c-pagination__page-menu">
5761
6183
  <button
5762
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
6184
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5763
6185
  type="button"
5764
6186
  aria-expanded="false"
5765
6187
  aria-label="Menu toggle"
@@ -5831,10 +6253,7 @@ wrapperTag: div
5831
6253
  aria-label="Simple data list example"
5832
6254
  id="primary-detail-inline-modifier-example-data-list"
5833
6255
  >
5834
- <li
5835
- class="pf-v6-c-data-list__item"
5836
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-1"
5837
- >
6256
+ <li class="pf-v6-c-data-list__item">
5838
6257
  <div class="pf-v6-c-data-list__item-row">
5839
6258
  <div class="pf-v6-c-data-list__item-content">
5840
6259
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -5859,29 +6278,44 @@ wrapperTag: div
5859
6278
  <div class="pf-v6-l-flex pf-m-wrap">
5860
6279
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5861
6280
  <div class="pf-v6-l-flex__item">
5862
- <i
5863
- class="fas fa-code-branch"
5864
- aria-hidden="true"
5865
- ></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>
5866
6289
  </div>
5867
6290
  <div class="pf-v6-l-flex__item">
5868
6291
  <span>10</span>
6292
+ <span class="pf-v6-screen-reader">Branches</span>
5869
6293
  </div>
5870
6294
  </div>
5871
6295
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5872
6296
  <div class="pf-v6-l-flex__item">
5873
- <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>
5874
6302
  </div>
5875
6303
  <div class="pf-v6-l-flex__item">
5876
6304
  <span>4</span>
6305
+ <span class="pf-v6-screen-reader">Code blocks</span>
5877
6306
  </div>
5878
6307
  </div>
5879
6308
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5880
6309
  <div class="pf-v6-l-flex__item">
5881
- <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>
5882
6315
  </div>
5883
6316
  <div class="pf-v6-l-flex__item">
5884
6317
  <span>5</span>
6318
+ <span class="pf-v6-screen-reader">Workspaces</span>
5885
6319
  </div>
5886
6320
  </div>
5887
6321
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -5905,10 +6339,7 @@ wrapperTag: div
5905
6339
  </div>
5906
6340
  </li>
5907
6341
 
5908
- <li
5909
- class="pf-v6-c-data-list__item"
5910
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-2"
5911
- >
6342
+ <li class="pf-v6-c-data-list__item">
5912
6343
  <div class="pf-v6-c-data-list__item-row">
5913
6344
  <div class="pf-v6-c-data-list__item-content">
5914
6345
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -5930,62 +6361,98 @@ wrapperTag: div
5930
6361
  <div class="pf-v6-l-flex pf-m-wrap">
5931
6362
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5932
6363
  <div class="pf-v6-l-flex__item">
5933
- <i
5934
- class="fas fa-code-branch"
5935
- aria-hidden="true"
5936
- ></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>
5937
6372
  </div>
5938
6373
  <div class="pf-v6-l-flex__item">
5939
6374
  <span>5</span>
6375
+ <span class="pf-v6-screen-reader">Branches</span>
5940
6376
  </div>
5941
6377
  </div>
5942
6378
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5943
6379
  <div class="pf-v6-l-flex__item">
5944
- <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>
5945
6385
  </div>
5946
6386
  <div class="pf-v6-l-flex__item">
5947
6387
  <span>9</span>
6388
+ <span class="pf-v6-screen-reader">Code blocks</span>
5948
6389
  </div>
5949
6390
  </div>
5950
6391
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5951
6392
  <div class="pf-v6-l-flex__item">
5952
- <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>
5953
6398
  </div>
5954
6399
  <div class="pf-v6-l-flex__item">
5955
6400
  <span>2</span>
6401
+ <span class="pf-v6-screen-reader">Workspaces</span>
5956
6402
  </div>
5957
6403
  </div>
5958
6404
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5959
6405
  <div class="pf-v6-l-flex__item">
5960
- <i
5961
- class="fas fa-check-circle"
5962
- aria-hidden="true"
5963
- ></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>
5964
6416
  </div>
5965
6417
  <div class="pf-v6-l-flex__item">
5966
6418
  <span>11</span>
6419
+ <span class="pf-v6-screen-reader">Completed</span>
5967
6420
  </div>
5968
6421
  </div>
5969
6422
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5970
6423
  <div class="pf-v6-l-flex__item">
5971
- <i
5972
- class="fas fa-exclamation-triangle"
5973
- aria-hidden="true"
5974
- ></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>
5975
6434
  </div>
5976
6435
  <div class="pf-v6-l-flex__item">
5977
6436
  <span>4</span>
6437
+ <span class="pf-v6-screen-reader">Warnings</span>
5978
6438
  </div>
5979
6439
  </div>
5980
6440
  <div class="pf-v6-l-flex pf-m-space-items-xs">
5981
6441
  <div class="pf-v6-l-flex__item">
5982
- <i
5983
- class="fas fa-times-circle"
5984
- aria-hidden="true"
5985
- ></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>
5986
6452
  </div>
5987
6453
  <div class="pf-v6-l-flex__item">
5988
6454
  <span>1</span>
6455
+ <span class="pf-v6-screen-reader">Errors</span>
5989
6456
  </div>
5990
6457
  </div>
5991
6458
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -6009,10 +6476,7 @@ wrapperTag: div
6009
6476
  </div>
6010
6477
  </li>
6011
6478
 
6012
- <li
6013
- class="pf-v6-c-data-list__item"
6014
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-3"
6015
- >
6479
+ <li class="pf-v6-c-data-list__item">
6016
6480
  <div class="pf-v6-c-data-list__item-row">
6017
6481
  <div class="pf-v6-c-data-list__item-content">
6018
6482
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6037,10 +6501,7 @@ wrapperTag: div
6037
6501
  </div>
6038
6502
  </li>
6039
6503
 
6040
- <li
6041
- class="pf-v6-c-data-list__item"
6042
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-4"
6043
- >
6504
+ <li class="pf-v6-c-data-list__item">
6044
6505
  <div class="pf-v6-c-data-list__item-row">
6045
6506
  <div class="pf-v6-c-data-list__item-content">
6046
6507
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6065,29 +6526,44 @@ wrapperTag: div
6065
6526
  <div class="pf-v6-l-flex pf-m-wrap">
6066
6527
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6067
6528
  <div class="pf-v6-l-flex__item">
6068
- <i
6069
- class="fas fa-code-branch"
6070
- aria-hidden="true"
6071
- ></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>
6072
6537
  </div>
6073
6538
  <div class="pf-v6-l-flex__item">
6074
6539
  <span>10</span>
6540
+ <span class="pf-v6-screen-reader">Branches</span>
6075
6541
  </div>
6076
6542
  </div>
6077
6543
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6078
6544
  <div class="pf-v6-l-flex__item">
6079
- <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>
6080
6550
  </div>
6081
6551
  <div class="pf-v6-l-flex__item">
6082
6552
  <span>4</span>
6553
+ <span class="pf-v6-screen-reader">Code blocks</span>
6083
6554
  </div>
6084
6555
  </div>
6085
6556
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6086
6557
  <div class="pf-v6-l-flex__item">
6087
- <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>
6088
6563
  </div>
6089
6564
  <div class="pf-v6-l-flex__item">
6090
6565
  <span>5</span>
6566
+ <span class="pf-v6-screen-reader">Workspaces</span>
6091
6567
  </div>
6092
6568
  </div>
6093
6569
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -6111,10 +6587,7 @@ wrapperTag: div
6111
6587
  </div>
6112
6588
  </li>
6113
6589
 
6114
- <li
6115
- class="pf-v6-c-data-list__item"
6116
- aria-labelledby="primary-detail-inline-modifier-example-data-list-item-5"
6117
- >
6590
+ <li class="pf-v6-c-data-list__item">
6118
6591
  <div class="pf-v6-c-data-list__item-row">
6119
6592
  <div class="pf-v6-c-data-list__item-content">
6120
6593
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -6136,62 +6609,98 @@ wrapperTag: div
6136
6609
  <div class="pf-v6-l-flex pf-m-wrap">
6137
6610
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6138
6611
  <div class="pf-v6-l-flex__item">
6139
- <i
6140
- class="fas fa-code-branch"
6141
- aria-hidden="true"
6142
- ></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>
6143
6620
  </div>
6144
6621
  <div class="pf-v6-l-flex__item">
6145
6622
  <span>5</span>
6623
+ <span class="pf-v6-screen-reader">Branches</span>
6146
6624
  </div>
6147
6625
  </div>
6148
6626
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6149
6627
  <div class="pf-v6-l-flex__item">
6150
- <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>
6151
6633
  </div>
6152
6634
  <div class="pf-v6-l-flex__item">
6153
6635
  <span>9</span>
6636
+ <span class="pf-v6-screen-reader">Code blocks</span>
6154
6637
  </div>
6155
6638
  </div>
6156
6639
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6157
6640
  <div class="pf-v6-l-flex__item">
6158
- <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>
6159
6646
  </div>
6160
6647
  <div class="pf-v6-l-flex__item">
6161
6648
  <span>2</span>
6649
+ <span class="pf-v6-screen-reader">Workspaces</span>
6162
6650
  </div>
6163
6651
  </div>
6164
6652
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6165
6653
  <div class="pf-v6-l-flex__item">
6166
- <i
6167
- class="fas fa-check-circle"
6168
- aria-hidden="true"
6169
- ></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>
6170
6664
  </div>
6171
6665
  <div class="pf-v6-l-flex__item">
6172
6666
  <span>11</span>
6667
+ <span class="pf-v6-screen-reader">Completed</span>
6173
6668
  </div>
6174
6669
  </div>
6175
6670
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6176
6671
  <div class="pf-v6-l-flex__item">
6177
- <i
6178
- class="fas fa-exclamation-triangle"
6179
- aria-hidden="true"
6180
- ></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>
6181
6682
  </div>
6182
6683
  <div class="pf-v6-l-flex__item">
6183
6684
  <span>4</span>
6685
+ <span class="pf-v6-screen-reader">Warnings</span>
6184
6686
  </div>
6185
6687
  </div>
6186
6688
  <div class="pf-v6-l-flex pf-m-space-items-xs">
6187
6689
  <div class="pf-v6-l-flex__item">
6188
- <i
6189
- class="fas fa-times-circle"
6190
- aria-hidden="true"
6191
- ></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>
6192
6700
  </div>
6193
6701
  <div class="pf-v6-l-flex__item">
6194
6702
  <span>1</span>
6703
+ <span class="pf-v6-screen-reader">Errors</span>
6195
6704
  </div>
6196
6705
  </div>
6197
6706
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -6276,25 +6785,6 @@ wrapperTag: div
6276
6785
  <button
6277
6786
  type="button"
6278
6787
  class="pf-v6-c-tabs__link"
6279
- onclick="
6280
- event.preventDefault();
6281
- ((e) => {
6282
- const el = this,
6283
- li = this.closest('li'),
6284
- ul = this.closest('ul'),
6285
- tabs = this.closest('.pf-v6-c-tabs'),
6286
- left = Math.round(li.offsetLeft),
6287
- top = Math.round(li.offsetTop),
6288
- width = Math.round(li.offsetWidth),
6289
- height = Math.round(li.offsetHeight);
6290
-
6291
- ul.querySelectorAll('li').forEach(function(el) {
6292
- el.classList.remove('pf-m-current')});
6293
- li.classList.add('pf-m-current');
6294
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
6295
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
6296
- }
6297
- )()"
6298
6788
  role="tab"
6299
6789
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6300
6790
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
@@ -6306,25 +6796,6 @@ wrapperTag: div
6306
6796
  <button
6307
6797
  type="button"
6308
6798
  class="pf-v6-c-tabs__link"
6309
- onclick="
6310
- event.preventDefault();
6311
- ((e) => {
6312
- const el = this,
6313
- li = this.closest('li'),
6314
- ul = this.closest('ul'),
6315
- tabs = this.closest('.pf-v6-c-tabs'),
6316
- left = Math.round(li.offsetLeft),
6317
- top = Math.round(li.offsetTop),
6318
- width = Math.round(li.offsetWidth),
6319
- height = Math.round(li.offsetHeight);
6320
-
6321
- ul.querySelectorAll('li').forEach(function(el) {
6322
- el.classList.remove('pf-m-current')});
6323
- li.classList.add('pf-m-current');
6324
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
6325
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
6326
- }
6327
- )()"
6328
6799
  role="tab"
6329
6800
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6330
6801
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"