@patternfly/patternfly 6.3.0 → 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 +41 -1
  74. package/components/Table/table.scss +48 -2
  75. package/components/Tabs/tabs.css +18 -7
  76. package/components/Tabs/tabs.scss +19 -11
  77. package/components/TextInputGroup/text-input-group.css +7 -0
  78. package/components/TextInputGroup/text-input-group.scss +8 -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 +631 -168
  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 +1803 -169
  138. package/patternfly.css +1838 -200
  139. package/patternfly.min.css +1 -1
  140. package/patternfly.min.css.map +1 -1
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -423,10 +423,7 @@ wrapperTag: div
423
423
  aria-label="Simple data list example"
424
424
  id="data-list-basic-example-data-list"
425
425
  >
426
- <li
427
- class="pf-v6-c-data-list__item"
428
- aria-labelledby="data-list-basic-example-data-list-item-1"
429
- >
426
+ <li class="pf-v6-c-data-list__item">
430
427
  <div class="pf-v6-c-data-list__item-row">
431
428
  <div class="pf-v6-c-data-list__item-content">
432
429
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -449,26 +446,44 @@ wrapperTag: div
449
446
  <div class="pf-v6-l-flex pf-m-wrap">
450
447
  <div class="pf-v6-l-flex pf-m-space-items-xs">
451
448
  <div class="pf-v6-l-flex__item">
452
- <i class="fas fa-code-branch" aria-hidden="true"></i>
449
+ <span class="pf-v6-c-icon">
450
+ <span class="pf-v6-c-icon__content">
451
+ <i
452
+ class="fas fa-code-branch"
453
+ aria-hidden="true"
454
+ ></i>
455
+ </span>
456
+ </span>
453
457
  </div>
454
458
  <div class="pf-v6-l-flex__item">
455
459
  <span>10</span>
460
+ <span class="pf-v6-screen-reader">Branches</span>
456
461
  </div>
457
462
  </div>
458
463
  <div class="pf-v6-l-flex pf-m-space-items-xs">
459
464
  <div class="pf-v6-l-flex__item">
460
- <i class="fas fa-code" aria-hidden="true"></i>
465
+ <span class="pf-v6-c-icon">
466
+ <span class="pf-v6-c-icon__content">
467
+ <i class="fas fa-code" aria-hidden="true"></i>
468
+ </span>
469
+ </span>
461
470
  </div>
462
471
  <div class="pf-v6-l-flex__item">
463
472
  <span>4</span>
473
+ <span class="pf-v6-screen-reader">Code blocks</span>
464
474
  </div>
465
475
  </div>
466
476
  <div class="pf-v6-l-flex pf-m-space-items-xs">
467
477
  <div class="pf-v6-l-flex__item">
468
- <i class="fas fa-cube" aria-hidden="true"></i>
478
+ <span class="pf-v6-c-icon">
479
+ <span class="pf-v6-c-icon__content">
480
+ <i class="fas fa-cube" aria-hidden="true"></i>
481
+ </span>
482
+ </span>
469
483
  </div>
470
484
  <div class="pf-v6-l-flex__item">
471
485
  <span>5</span>
486
+ <span class="pf-v6-screen-reader">Workspaces</span>
472
487
  </div>
473
488
  </div>
474
489
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -489,10 +504,7 @@ wrapperTag: div
489
504
  </div>
490
505
  </li>
491
506
 
492
- <li
493
- class="pf-v6-c-data-list__item"
494
- aria-labelledby="data-list-basic-example-data-list-item-2"
495
- >
507
+ <li class="pf-v6-c-data-list__item">
496
508
  <div class="pf-v6-c-data-list__item-row">
497
509
  <div class="pf-v6-c-data-list__item-content">
498
510
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -512,53 +524,92 @@ wrapperTag: div
512
524
  <div class="pf-v6-l-flex pf-m-wrap">
513
525
  <div class="pf-v6-l-flex pf-m-space-items-xs">
514
526
  <div class="pf-v6-l-flex__item">
515
- <i class="fas fa-code-branch" aria-hidden="true"></i>
527
+ <span class="pf-v6-c-icon">
528
+ <span class="pf-v6-c-icon__content">
529
+ <i
530
+ class="fas fa-code-branch"
531
+ aria-hidden="true"
532
+ ></i>
533
+ </span>
534
+ </span>
516
535
  </div>
517
536
  <div class="pf-v6-l-flex__item">
518
537
  <span>5</span>
538
+ <span class="pf-v6-screen-reader">Branches</span>
519
539
  </div>
520
540
  </div>
521
541
  <div class="pf-v6-l-flex pf-m-space-items-xs">
522
542
  <div class="pf-v6-l-flex__item">
523
- <i class="fas fa-code" aria-hidden="true"></i>
543
+ <span class="pf-v6-c-icon">
544
+ <span class="pf-v6-c-icon__content">
545
+ <i class="fas fa-code" aria-hidden="true"></i>
546
+ </span>
547
+ </span>
524
548
  </div>
525
549
  <div class="pf-v6-l-flex__item">
526
550
  <span>9</span>
551
+ <span class="pf-v6-screen-reader">Code blocks</span>
527
552
  </div>
528
553
  </div>
529
554
  <div class="pf-v6-l-flex pf-m-space-items-xs">
530
555
  <div class="pf-v6-l-flex__item">
531
- <i class="fas fa-cube" aria-hidden="true"></i>
556
+ <span class="pf-v6-c-icon">
557
+ <span class="pf-v6-c-icon__content">
558
+ <i class="fas fa-cube" aria-hidden="true"></i>
559
+ </span>
560
+ </span>
532
561
  </div>
533
562
  <div class="pf-v6-l-flex__item">
534
563
  <span>2</span>
564
+ <span class="pf-v6-screen-reader">Workspaces</span>
535
565
  </div>
536
566
  </div>
537
567
  <div class="pf-v6-l-flex pf-m-space-items-xs">
538
568
  <div class="pf-v6-l-flex__item">
539
- <i class="fas fa-check-circle" aria-hidden="true"></i>
569
+ <span class="pf-v6-c-icon">
570
+ <span class="pf-v6-c-icon__content pf-m-success">
571
+ <i
572
+ class="fas fa-check-circle"
573
+ aria-hidden="true"
574
+ ></i>
575
+ </span>
576
+ </span>
540
577
  </div>
541
578
  <div class="pf-v6-l-flex__item">
542
579
  <span>11</span>
580
+ <span class="pf-v6-screen-reader">Completed</span>
543
581
  </div>
544
582
  </div>
545
583
  <div class="pf-v6-l-flex pf-m-space-items-xs">
546
584
  <div class="pf-v6-l-flex__item">
547
- <i
548
- class="fas fa-exclamation-triangle"
549
- aria-hidden="true"
550
- ></i>
585
+ <span class="pf-v6-c-icon">
586
+ <span class="pf-v6-c-icon__content pf-m-warning">
587
+ <i
588
+ class="fas fa-exclamation-triangle"
589
+ aria-hidden="true"
590
+ ></i>
591
+ </span>
592
+ </span>
551
593
  </div>
552
594
  <div class="pf-v6-l-flex__item">
553
595
  <span>4</span>
596
+ <span class="pf-v6-screen-reader">Warnings</span>
554
597
  </div>
555
598
  </div>
556
599
  <div class="pf-v6-l-flex pf-m-space-items-xs">
557
600
  <div class="pf-v6-l-flex__item">
558
- <i class="fas fa-times-circle" aria-hidden="true"></i>
601
+ <span class="pf-v6-c-icon">
602
+ <span class="pf-v6-c-icon__content pf-m-danger">
603
+ <i
604
+ class="fas fa-exclamation-circle"
605
+ aria-hidden="true"
606
+ ></i>
607
+ </span>
608
+ </span>
559
609
  </div>
560
610
  <div class="pf-v6-l-flex__item">
561
611
  <span>1</span>
612
+ <span class="pf-v6-screen-reader">Errors</span>
562
613
  </div>
563
614
  </div>
564
615
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -579,10 +630,7 @@ wrapperTag: div
579
630
  </div>
580
631
  </li>
581
632
 
582
- <li
583
- class="pf-v6-c-data-list__item"
584
- aria-labelledby="data-list-basic-example-data-list-item-3"
585
- >
633
+ <li class="pf-v6-c-data-list__item">
586
634
  <div class="pf-v6-c-data-list__item-row">
587
635
  <div class="pf-v6-c-data-list__item-content">
588
636
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -604,10 +652,7 @@ wrapperTag: div
604
652
  </div>
605
653
  </li>
606
654
 
607
- <li
608
- class="pf-v6-c-data-list__item"
609
- aria-labelledby="data-list-basic-example-data-list-item-4"
610
- >
655
+ <li class="pf-v6-c-data-list__item">
611
656
  <div class="pf-v6-c-data-list__item-row">
612
657
  <div class="pf-v6-c-data-list__item-content">
613
658
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -630,26 +675,44 @@ wrapperTag: div
630
675
  <div class="pf-v6-l-flex pf-m-wrap">
631
676
  <div class="pf-v6-l-flex pf-m-space-items-xs">
632
677
  <div class="pf-v6-l-flex__item">
633
- <i class="fas fa-code-branch" aria-hidden="true"></i>
678
+ <span class="pf-v6-c-icon">
679
+ <span class="pf-v6-c-icon__content">
680
+ <i
681
+ class="fas fa-code-branch"
682
+ aria-hidden="true"
683
+ ></i>
684
+ </span>
685
+ </span>
634
686
  </div>
635
687
  <div class="pf-v6-l-flex__item">
636
688
  <span>10</span>
689
+ <span class="pf-v6-screen-reader">Branches</span>
637
690
  </div>
638
691
  </div>
639
692
  <div class="pf-v6-l-flex pf-m-space-items-xs">
640
693
  <div class="pf-v6-l-flex__item">
641
- <i class="fas fa-code" aria-hidden="true"></i>
694
+ <span class="pf-v6-c-icon">
695
+ <span class="pf-v6-c-icon__content">
696
+ <i class="fas fa-code" aria-hidden="true"></i>
697
+ </span>
698
+ </span>
642
699
  </div>
643
700
  <div class="pf-v6-l-flex__item">
644
701
  <span>4</span>
702
+ <span class="pf-v6-screen-reader">Code blocks</span>
645
703
  </div>
646
704
  </div>
647
705
  <div class="pf-v6-l-flex pf-m-space-items-xs">
648
706
  <div class="pf-v6-l-flex__item">
649
- <i class="fas fa-cube" aria-hidden="true"></i>
707
+ <span class="pf-v6-c-icon">
708
+ <span class="pf-v6-c-icon__content">
709
+ <i class="fas fa-cube" aria-hidden="true"></i>
710
+ </span>
711
+ </span>
650
712
  </div>
651
713
  <div class="pf-v6-l-flex__item">
652
714
  <span>5</span>
715
+ <span class="pf-v6-screen-reader">Workspaces</span>
653
716
  </div>
654
717
  </div>
655
718
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -670,10 +733,7 @@ wrapperTag: div
670
733
  </div>
671
734
  </li>
672
735
 
673
- <li
674
- class="pf-v6-c-data-list__item"
675
- aria-labelledby="data-list-basic-example-data-list-item-5"
676
- >
736
+ <li class="pf-v6-c-data-list__item">
677
737
  <div class="pf-v6-c-data-list__item-row">
678
738
  <div class="pf-v6-c-data-list__item-content">
679
739
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -693,53 +753,92 @@ wrapperTag: div
693
753
  <div class="pf-v6-l-flex pf-m-wrap">
694
754
  <div class="pf-v6-l-flex pf-m-space-items-xs">
695
755
  <div class="pf-v6-l-flex__item">
696
- <i class="fas fa-code-branch" aria-hidden="true"></i>
756
+ <span class="pf-v6-c-icon">
757
+ <span class="pf-v6-c-icon__content">
758
+ <i
759
+ class="fas fa-code-branch"
760
+ aria-hidden="true"
761
+ ></i>
762
+ </span>
763
+ </span>
697
764
  </div>
698
765
  <div class="pf-v6-l-flex__item">
699
766
  <span>5</span>
767
+ <span class="pf-v6-screen-reader">Branches</span>
700
768
  </div>
701
769
  </div>
702
770
  <div class="pf-v6-l-flex pf-m-space-items-xs">
703
771
  <div class="pf-v6-l-flex__item">
704
- <i class="fas fa-code" aria-hidden="true"></i>
772
+ <span class="pf-v6-c-icon">
773
+ <span class="pf-v6-c-icon__content">
774
+ <i class="fas fa-code" aria-hidden="true"></i>
775
+ </span>
776
+ </span>
705
777
  </div>
706
778
  <div class="pf-v6-l-flex__item">
707
779
  <span>9</span>
780
+ <span class="pf-v6-screen-reader">Code blocks</span>
708
781
  </div>
709
782
  </div>
710
783
  <div class="pf-v6-l-flex pf-m-space-items-xs">
711
784
  <div class="pf-v6-l-flex__item">
712
- <i class="fas fa-cube" aria-hidden="true"></i>
785
+ <span class="pf-v6-c-icon">
786
+ <span class="pf-v6-c-icon__content">
787
+ <i class="fas fa-cube" aria-hidden="true"></i>
788
+ </span>
789
+ </span>
713
790
  </div>
714
791
  <div class="pf-v6-l-flex__item">
715
792
  <span>2</span>
793
+ <span class="pf-v6-screen-reader">Workspaces</span>
716
794
  </div>
717
795
  </div>
718
796
  <div class="pf-v6-l-flex pf-m-space-items-xs">
719
797
  <div class="pf-v6-l-flex__item">
720
- <i class="fas fa-check-circle" aria-hidden="true"></i>
798
+ <span class="pf-v6-c-icon">
799
+ <span class="pf-v6-c-icon__content pf-m-success">
800
+ <i
801
+ class="fas fa-check-circle"
802
+ aria-hidden="true"
803
+ ></i>
804
+ </span>
805
+ </span>
721
806
  </div>
722
807
  <div class="pf-v6-l-flex__item">
723
808
  <span>11</span>
809
+ <span class="pf-v6-screen-reader">Completed</span>
724
810
  </div>
725
811
  </div>
726
812
  <div class="pf-v6-l-flex pf-m-space-items-xs">
727
813
  <div class="pf-v6-l-flex__item">
728
- <i
729
- class="fas fa-exclamation-triangle"
730
- aria-hidden="true"
731
- ></i>
814
+ <span class="pf-v6-c-icon">
815
+ <span class="pf-v6-c-icon__content pf-m-warning">
816
+ <i
817
+ class="fas fa-exclamation-triangle"
818
+ aria-hidden="true"
819
+ ></i>
820
+ </span>
821
+ </span>
732
822
  </div>
733
823
  <div class="pf-v6-l-flex__item">
734
824
  <span>4</span>
825
+ <span class="pf-v6-screen-reader">Warnings</span>
735
826
  </div>
736
827
  </div>
737
828
  <div class="pf-v6-l-flex pf-m-space-items-xs">
738
829
  <div class="pf-v6-l-flex__item">
739
- <i class="fas fa-times-circle" aria-hidden="true"></i>
830
+ <span class="pf-v6-c-icon">
831
+ <span class="pf-v6-c-icon__content pf-m-danger">
832
+ <i
833
+ class="fas fa-exclamation-circle"
834
+ aria-hidden="true"
835
+ ></i>
836
+ </span>
837
+ </span>
740
838
  </div>
741
839
  <div class="pf-v6-l-flex__item">
742
840
  <span>1</span>
841
+ <span class="pf-v6-screen-reader">Errors</span>
743
842
  </div>
744
843
  </div>
745
844
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -1301,10 +1400,7 @@ wrapperTag: div
1301
1400
  aria-label="Data list actionable demo"
1302
1401
  id="data-list-actionable-example-data-list"
1303
1402
  >
1304
- <li
1305
- class="pf-v6-c-data-list__item"
1306
- aria-labelledby="data-list-actionable-example-data-list-item-1"
1307
- >
1403
+ <li class="pf-v6-c-data-list__item">
1308
1404
  <div class="pf-v6-c-data-list__item-row">
1309
1405
  <div class="pf-v6-c-data-list__item-control">
1310
1406
  <div class="pf-v6-c-data-list__check">
@@ -1343,26 +1439,44 @@ wrapperTag: div
1343
1439
  <div class="pf-v6-l-flex pf-m-wrap">
1344
1440
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1345
1441
  <div class="pf-v6-l-flex__item">
1346
- <i class="fas fa-code-branch" aria-hidden="true"></i>
1442
+ <span class="pf-v6-c-icon">
1443
+ <span class="pf-v6-c-icon__content">
1444
+ <i
1445
+ class="fas fa-code-branch"
1446
+ aria-hidden="true"
1447
+ ></i>
1448
+ </span>
1449
+ </span>
1347
1450
  </div>
1348
1451
  <div class="pf-v6-l-flex__item">
1349
1452
  <span>10</span>
1453
+ <span class="pf-v6-screen-reader">Branches</span>
1350
1454
  </div>
1351
1455
  </div>
1352
1456
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1353
1457
  <div class="pf-v6-l-flex__item">
1354
- <i class="fas fa-code" aria-hidden="true"></i>
1458
+ <span class="pf-v6-c-icon">
1459
+ <span class="pf-v6-c-icon__content">
1460
+ <i class="fas fa-code" aria-hidden="true"></i>
1461
+ </span>
1462
+ </span>
1355
1463
  </div>
1356
1464
  <div class="pf-v6-l-flex__item">
1357
1465
  <span>4</span>
1466
+ <span class="pf-v6-screen-reader">Code blocks</span>
1358
1467
  </div>
1359
1468
  </div>
1360
1469
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1361
1470
  <div class="pf-v6-l-flex__item">
1362
- <i class="fas fa-cube" aria-hidden="true"></i>
1471
+ <span class="pf-v6-c-icon">
1472
+ <span class="pf-v6-c-icon__content">
1473
+ <i class="fas fa-cube" aria-hidden="true"></i>
1474
+ </span>
1475
+ </span>
1363
1476
  </div>
1364
1477
  <div class="pf-v6-l-flex__item">
1365
1478
  <span>5</span>
1479
+ <span class="pf-v6-screen-reader">Workspaces</span>
1366
1480
  </div>
1367
1481
  </div>
1368
1482
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -1383,10 +1497,7 @@ wrapperTag: div
1383
1497
  </div>
1384
1498
  </li>
1385
1499
 
1386
- <li
1387
- class="pf-v6-c-data-list__item"
1388
- aria-labelledby="data-list-actionable-example-data-list-item-2"
1389
- >
1500
+ <li class="pf-v6-c-data-list__item">
1390
1501
  <div class="pf-v6-c-data-list__item-row">
1391
1502
  <div class="pf-v6-c-data-list__item-control">
1392
1503
  <div class="pf-v6-c-data-list__check">
@@ -1422,53 +1533,92 @@ wrapperTag: div
1422
1533
  <div class="pf-v6-l-flex pf-m-wrap">
1423
1534
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1424
1535
  <div class="pf-v6-l-flex__item">
1425
- <i class="fas fa-code-branch" aria-hidden="true"></i>
1536
+ <span class="pf-v6-c-icon">
1537
+ <span class="pf-v6-c-icon__content">
1538
+ <i
1539
+ class="fas fa-code-branch"
1540
+ aria-hidden="true"
1541
+ ></i>
1542
+ </span>
1543
+ </span>
1426
1544
  </div>
1427
1545
  <div class="pf-v6-l-flex__item">
1428
1546
  <span>5</span>
1547
+ <span class="pf-v6-screen-reader">Branches</span>
1429
1548
  </div>
1430
1549
  </div>
1431
1550
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1432
1551
  <div class="pf-v6-l-flex__item">
1433
- <i class="fas fa-code" aria-hidden="true"></i>
1552
+ <span class="pf-v6-c-icon">
1553
+ <span class="pf-v6-c-icon__content">
1554
+ <i class="fas fa-code" aria-hidden="true"></i>
1555
+ </span>
1556
+ </span>
1434
1557
  </div>
1435
1558
  <div class="pf-v6-l-flex__item">
1436
1559
  <span>9</span>
1560
+ <span class="pf-v6-screen-reader">Code blocks</span>
1437
1561
  </div>
1438
1562
  </div>
1439
1563
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1440
1564
  <div class="pf-v6-l-flex__item">
1441
- <i class="fas fa-cube" aria-hidden="true"></i>
1565
+ <span class="pf-v6-c-icon">
1566
+ <span class="pf-v6-c-icon__content">
1567
+ <i class="fas fa-cube" aria-hidden="true"></i>
1568
+ </span>
1569
+ </span>
1442
1570
  </div>
1443
1571
  <div class="pf-v6-l-flex__item">
1444
1572
  <span>2</span>
1573
+ <span class="pf-v6-screen-reader">Workspaces</span>
1445
1574
  </div>
1446
1575
  </div>
1447
1576
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1448
1577
  <div class="pf-v6-l-flex__item">
1449
- <i class="fas fa-check-circle" aria-hidden="true"></i>
1578
+ <span class="pf-v6-c-icon">
1579
+ <span class="pf-v6-c-icon__content pf-m-success">
1580
+ <i
1581
+ class="fas fa-check-circle"
1582
+ aria-hidden="true"
1583
+ ></i>
1584
+ </span>
1585
+ </span>
1450
1586
  </div>
1451
1587
  <div class="pf-v6-l-flex__item">
1452
1588
  <span>11</span>
1589
+ <span class="pf-v6-screen-reader">Completed</span>
1453
1590
  </div>
1454
1591
  </div>
1455
1592
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1456
1593
  <div class="pf-v6-l-flex__item">
1457
- <i
1458
- class="fas fa-exclamation-triangle"
1459
- aria-hidden="true"
1460
- ></i>
1594
+ <span class="pf-v6-c-icon">
1595
+ <span class="pf-v6-c-icon__content pf-m-warning">
1596
+ <i
1597
+ class="fas fa-exclamation-triangle"
1598
+ aria-hidden="true"
1599
+ ></i>
1600
+ </span>
1601
+ </span>
1461
1602
  </div>
1462
1603
  <div class="pf-v6-l-flex__item">
1463
1604
  <span>4</span>
1605
+ <span class="pf-v6-screen-reader">Warnings</span>
1464
1606
  </div>
1465
1607
  </div>
1466
1608
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1467
1609
  <div class="pf-v6-l-flex__item">
1468
- <i class="fas fa-times-circle" aria-hidden="true"></i>
1610
+ <span class="pf-v6-c-icon">
1611
+ <span class="pf-v6-c-icon__content pf-m-danger">
1612
+ <i
1613
+ class="fas fa-exclamation-circle"
1614
+ aria-hidden="true"
1615
+ ></i>
1616
+ </span>
1617
+ </span>
1469
1618
  </div>
1470
1619
  <div class="pf-v6-l-flex__item">
1471
1620
  <span>1</span>
1621
+ <span class="pf-v6-screen-reader">Errors</span>
1472
1622
  </div>
1473
1623
  </div>
1474
1624
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -1489,10 +1639,7 @@ wrapperTag: div
1489
1639
  </div>
1490
1640
  </li>
1491
1641
 
1492
- <li
1493
- class="pf-v6-c-data-list__item"
1494
- aria-labelledby="data-list-actionable-example-data-list-item-3"
1495
- >
1642
+ <li class="pf-v6-c-data-list__item">
1496
1643
  <div class="pf-v6-c-data-list__item-row">
1497
1644
  <div class="pf-v6-c-data-list__item-control">
1498
1645
  <div class="pf-v6-c-data-list__check">
@@ -1532,10 +1679,7 @@ wrapperTag: div
1532
1679
  </div>
1533
1680
  </li>
1534
1681
 
1535
- <li
1536
- class="pf-v6-c-data-list__item"
1537
- aria-labelledby="data-list-actionable-example-data-list-item-4"
1538
- >
1682
+ <li class="pf-v6-c-data-list__item">
1539
1683
  <div class="pf-v6-c-data-list__item-row">
1540
1684
  <div class="pf-v6-c-data-list__item-control">
1541
1685
  <div class="pf-v6-c-data-list__check">
@@ -1576,26 +1720,44 @@ wrapperTag: div
1576
1720
  <div class="pf-v6-l-flex pf-m-wrap">
1577
1721
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1578
1722
  <div class="pf-v6-l-flex__item">
1579
- <i class="fas fa-code-branch" aria-hidden="true"></i>
1723
+ <span class="pf-v6-c-icon">
1724
+ <span class="pf-v6-c-icon__content">
1725
+ <i
1726
+ class="fas fa-code-branch"
1727
+ aria-hidden="true"
1728
+ ></i>
1729
+ </span>
1730
+ </span>
1580
1731
  </div>
1581
1732
  <div class="pf-v6-l-flex__item">
1582
1733
  <span>10</span>
1734
+ <span class="pf-v6-screen-reader">Branches</span>
1583
1735
  </div>
1584
1736
  </div>
1585
1737
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1586
1738
  <div class="pf-v6-l-flex__item">
1587
- <i class="fas fa-code" aria-hidden="true"></i>
1739
+ <span class="pf-v6-c-icon">
1740
+ <span class="pf-v6-c-icon__content">
1741
+ <i class="fas fa-code" aria-hidden="true"></i>
1742
+ </span>
1743
+ </span>
1588
1744
  </div>
1589
1745
  <div class="pf-v6-l-flex__item">
1590
1746
  <span>4</span>
1747
+ <span class="pf-v6-screen-reader">Code blocks</span>
1591
1748
  </div>
1592
1749
  </div>
1593
1750
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1594
1751
  <div class="pf-v6-l-flex__item">
1595
- <i class="fas fa-cube" aria-hidden="true"></i>
1752
+ <span class="pf-v6-c-icon">
1753
+ <span class="pf-v6-c-icon__content">
1754
+ <i class="fas fa-cube" aria-hidden="true"></i>
1755
+ </span>
1756
+ </span>
1596
1757
  </div>
1597
1758
  <div class="pf-v6-l-flex__item">
1598
1759
  <span>5</span>
1760
+ <span class="pf-v6-screen-reader">Workspaces</span>
1599
1761
  </div>
1600
1762
  </div>
1601
1763
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -2216,17 +2378,14 @@ wrapperTag: div
2216
2378
  aria-label="Data list expandable demo"
2217
2379
  id="data-list-expandable-example-data-list"
2218
2380
  >
2219
- <li
2220
- class="pf-v6-c-data-list__item pf-m-expanded"
2221
- aria-labelledby="data-list-expandable-example-data-list-item-1"
2222
- >
2381
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
2223
2382
  <div class="pf-v6-c-data-list__item-row">
2224
2383
  <div class="pf-v6-c-data-list__item-control">
2225
2384
  <div class="pf-v6-c-data-list__toggle">
2226
2385
  <button
2227
2386
  class="pf-v6-c-button pf-m-plain"
2228
2387
  type="button"
2229
- aria-labelledby="ex-toggle1 data-list-expandable-example-data-list-item1"
2388
+ aria-labelledby="ex-toggle1 data-list-expandable-example-data-list-item-1"
2230
2389
  id="ex-toggle1"
2231
2390
  aria-label="Toggle details for"
2232
2391
  aria-expanded="false"
@@ -2276,26 +2435,44 @@ wrapperTag: div
2276
2435
  <div class="pf-v6-l-flex pf-m-wrap">
2277
2436
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2278
2437
  <div class="pf-v6-l-flex__item">
2279
- <i class="fas fa-code-branch" aria-hidden="true"></i>
2438
+ <span class="pf-v6-c-icon">
2439
+ <span class="pf-v6-c-icon__content">
2440
+ <i
2441
+ class="fas fa-code-branch"
2442
+ aria-hidden="true"
2443
+ ></i>
2444
+ </span>
2445
+ </span>
2280
2446
  </div>
2281
2447
  <div class="pf-v6-l-flex__item">
2282
2448
  <span>10</span>
2449
+ <span class="pf-v6-screen-reader">Branches</span>
2283
2450
  </div>
2284
2451
  </div>
2285
2452
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2286
2453
  <div class="pf-v6-l-flex__item">
2287
- <i class="fas fa-code" aria-hidden="true"></i>
2454
+ <span class="pf-v6-c-icon">
2455
+ <span class="pf-v6-c-icon__content">
2456
+ <i class="fas fa-code" aria-hidden="true"></i>
2457
+ </span>
2458
+ </span>
2288
2459
  </div>
2289
2460
  <div class="pf-v6-l-flex__item">
2290
2461
  <span>4</span>
2462
+ <span class="pf-v6-screen-reader">Code blocks</span>
2291
2463
  </div>
2292
2464
  </div>
2293
2465
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2294
2466
  <div class="pf-v6-l-flex__item">
2295
- <i class="fas fa-cube" aria-hidden="true"></i>
2467
+ <span class="pf-v6-c-icon">
2468
+ <span class="pf-v6-c-icon__content">
2469
+ <i class="fas fa-cube" aria-hidden="true"></i>
2470
+ </span>
2471
+ </span>
2296
2472
  </div>
2297
2473
  <div class="pf-v6-l-flex__item">
2298
2474
  <span>5</span>
2475
+ <span class="pf-v6-screen-reader">Workspaces</span>
2299
2476
  </div>
2300
2477
  </div>
2301
2478
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -2717,17 +2894,14 @@ wrapperTag: div
2717
2894
  </section>
2718
2895
  </li>
2719
2896
 
2720
- <li
2721
- class="pf-v6-c-data-list__item"
2722
- aria-labelledby="data-list-expandable-example-data-list-item-2"
2723
- >
2897
+ <li class="pf-v6-c-data-list__item">
2724
2898
  <div class="pf-v6-c-data-list__item-row">
2725
2899
  <div class="pf-v6-c-data-list__item-control">
2726
2900
  <div class="pf-v6-c-data-list__toggle">
2727
2901
  <button
2728
2902
  class="pf-v6-c-button pf-m-plain"
2729
2903
  type="button"
2730
- aria-labelledby="ex-toggle2 data-list-expandable-example-data-list-item2"
2904
+ aria-labelledby="ex-toggle2 data-list-expandable-example-data-list-item-2"
2731
2905
  id="ex-toggle2"
2732
2906
  aria-label="Toggle details for"
2733
2907
  aria-expanded="false"
@@ -2774,53 +2948,92 @@ wrapperTag: div
2774
2948
  <div class="pf-v6-l-flex pf-m-wrap">
2775
2949
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2776
2950
  <div class="pf-v6-l-flex__item">
2777
- <i class="fas fa-code-branch" aria-hidden="true"></i>
2951
+ <span class="pf-v6-c-icon">
2952
+ <span class="pf-v6-c-icon__content">
2953
+ <i
2954
+ class="fas fa-code-branch"
2955
+ aria-hidden="true"
2956
+ ></i>
2957
+ </span>
2958
+ </span>
2778
2959
  </div>
2779
2960
  <div class="pf-v6-l-flex__item">
2780
2961
  <span>5</span>
2962
+ <span class="pf-v6-screen-reader">Branches</span>
2781
2963
  </div>
2782
2964
  </div>
2783
2965
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2784
2966
  <div class="pf-v6-l-flex__item">
2785
- <i class="fas fa-code" aria-hidden="true"></i>
2967
+ <span class="pf-v6-c-icon">
2968
+ <span class="pf-v6-c-icon__content">
2969
+ <i class="fas fa-code" aria-hidden="true"></i>
2970
+ </span>
2971
+ </span>
2786
2972
  </div>
2787
2973
  <div class="pf-v6-l-flex__item">
2788
2974
  <span>9</span>
2975
+ <span class="pf-v6-screen-reader">Code blocks</span>
2789
2976
  </div>
2790
2977
  </div>
2791
2978
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2792
2979
  <div class="pf-v6-l-flex__item">
2793
- <i class="fas fa-cube" aria-hidden="true"></i>
2980
+ <span class="pf-v6-c-icon">
2981
+ <span class="pf-v6-c-icon__content">
2982
+ <i class="fas fa-cube" aria-hidden="true"></i>
2983
+ </span>
2984
+ </span>
2794
2985
  </div>
2795
2986
  <div class="pf-v6-l-flex__item">
2796
2987
  <span>2</span>
2988
+ <span class="pf-v6-screen-reader">Workspaces</span>
2797
2989
  </div>
2798
2990
  </div>
2799
2991
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2800
2992
  <div class="pf-v6-l-flex__item">
2801
- <i class="fas fa-check-circle" aria-hidden="true"></i>
2993
+ <span class="pf-v6-c-icon">
2994
+ <span class="pf-v6-c-icon__content pf-m-success">
2995
+ <i
2996
+ class="fas fa-check-circle"
2997
+ aria-hidden="true"
2998
+ ></i>
2999
+ </span>
3000
+ </span>
2802
3001
  </div>
2803
3002
  <div class="pf-v6-l-flex__item">
2804
3003
  <span>11</span>
3004
+ <span class="pf-v6-screen-reader">Completed</span>
2805
3005
  </div>
2806
3006
  </div>
2807
3007
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2808
3008
  <div class="pf-v6-l-flex__item">
2809
- <i
2810
- class="fas fa-exclamation-triangle"
2811
- aria-hidden="true"
2812
- ></i>
3009
+ <span class="pf-v6-c-icon">
3010
+ <span class="pf-v6-c-icon__content pf-m-warning">
3011
+ <i
3012
+ class="fas fa-exclamation-triangle"
3013
+ aria-hidden="true"
3014
+ ></i>
3015
+ </span>
3016
+ </span>
2813
3017
  </div>
2814
3018
  <div class="pf-v6-l-flex__item">
2815
3019
  <span>4</span>
3020
+ <span class="pf-v6-screen-reader">Warnings</span>
2816
3021
  </div>
2817
3022
  </div>
2818
3023
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2819
3024
  <div class="pf-v6-l-flex__item">
2820
- <i class="fas fa-times-circle" aria-hidden="true"></i>
3025
+ <span class="pf-v6-c-icon">
3026
+ <span class="pf-v6-c-icon__content pf-m-danger">
3027
+ <i
3028
+ class="fas fa-exclamation-circle"
3029
+ aria-hidden="true"
3030
+ ></i>
3031
+ </span>
3032
+ </span>
2821
3033
  </div>
2822
3034
  <div class="pf-v6-l-flex__item">
2823
3035
  <span>1</span>
3036
+ <span class="pf-v6-screen-reader">Errors</span>
2824
3037
  </div>
2825
3038
  </div>
2826
3039
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -2851,17 +3064,14 @@ wrapperTag: div
2851
3064
  </section>
2852
3065
  </li>
2853
3066
 
2854
- <li
2855
- class="pf-v6-c-data-list__item"
2856
- aria-labelledby="data-list-expandable-example-data-list-item-3"
2857
- >
3067
+ <li class="pf-v6-c-data-list__item">
2858
3068
  <div class="pf-v6-c-data-list__item-row">
2859
3069
  <div class="pf-v6-c-data-list__item-control">
2860
3070
  <div class="pf-v6-c-data-list__toggle">
2861
3071
  <button
2862
3072
  class="pf-v6-c-button pf-m-plain"
2863
3073
  type="button"
2864
- aria-labelledby="ex-toggle3 data-list-expandable-example-data-list-item3"
3074
+ aria-labelledby="ex-toggle3 data-list-expandable-example-data-list-item-3"
2865
3075
  id="ex-toggle3"
2866
3076
  aria-label="Toggle details for"
2867
3077
  aria-expanded="false"
@@ -2910,17 +3120,14 @@ wrapperTag: div
2910
3120
  </section>
2911
3121
  </li>
2912
3122
 
2913
- <li
2914
- class="pf-v6-c-data-list__item"
2915
- aria-labelledby="data-list-expandable-example-data-list-item-4"
2916
- >
3123
+ <li class="pf-v6-c-data-list__item">
2917
3124
  <div class="pf-v6-c-data-list__item-row">
2918
3125
  <div class="pf-v6-c-data-list__item-control">
2919
3126
  <div class="pf-v6-c-data-list__toggle">
2920
3127
  <button
2921
3128
  class="pf-v6-c-button pf-m-plain"
2922
3129
  type="button"
2923
- aria-labelledby="ex-toggle4 data-list-expandable-example-data-list-item4"
3130
+ aria-labelledby="ex-toggle4 data-list-expandable-example-data-list-item-4"
2924
3131
  id="ex-toggle4"
2925
3132
  aria-label="Toggle details for"
2926
3133
  aria-expanded="false"
@@ -2970,26 +3177,44 @@ wrapperTag: div
2970
3177
  <div class="pf-v6-l-flex pf-m-wrap">
2971
3178
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2972
3179
  <div class="pf-v6-l-flex__item">
2973
- <i class="fas fa-code-branch" aria-hidden="true"></i>
3180
+ <span class="pf-v6-c-icon">
3181
+ <span class="pf-v6-c-icon__content">
3182
+ <i
3183
+ class="fas fa-code-branch"
3184
+ aria-hidden="true"
3185
+ ></i>
3186
+ </span>
3187
+ </span>
2974
3188
  </div>
2975
3189
  <div class="pf-v6-l-flex__item">
2976
3190
  <span>10</span>
3191
+ <span class="pf-v6-screen-reader">Branches</span>
2977
3192
  </div>
2978
3193
  </div>
2979
3194
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2980
3195
  <div class="pf-v6-l-flex__item">
2981
- <i class="fas fa-code" aria-hidden="true"></i>
3196
+ <span class="pf-v6-c-icon">
3197
+ <span class="pf-v6-c-icon__content">
3198
+ <i class="fas fa-code" aria-hidden="true"></i>
3199
+ </span>
3200
+ </span>
2982
3201
  </div>
2983
3202
  <div class="pf-v6-l-flex__item">
2984
3203
  <span>4</span>
3204
+ <span class="pf-v6-screen-reader">Code blocks</span>
2985
3205
  </div>
2986
3206
  </div>
2987
3207
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2988
3208
  <div class="pf-v6-l-flex__item">
2989
- <i class="fas fa-cube" aria-hidden="true"></i>
3209
+ <span class="pf-v6-c-icon">
3210
+ <span class="pf-v6-c-icon__content">
3211
+ <i class="fas fa-cube" aria-hidden="true"></i>
3212
+ </span>
3213
+ </span>
2990
3214
  </div>
2991
3215
  <div class="pf-v6-l-flex__item">
2992
3216
  <span>5</span>
3217
+ <span class="pf-v6-screen-reader">Workspaces</span>
2993
3218
  </div>
2994
3219
  </div>
2995
3220
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3020,17 +3245,14 @@ wrapperTag: div
3020
3245
  </section>
3021
3246
  </li>
3022
3247
 
3023
- <li
3024
- class="pf-v6-c-data-list__item"
3025
- aria-labelledby="data-list-expandable-example-data-list-item-5"
3026
- >
3248
+ <li class="pf-v6-c-data-list__item">
3027
3249
  <div class="pf-v6-c-data-list__item-row">
3028
3250
  <div class="pf-v6-c-data-list__item-control">
3029
3251
  <div class="pf-v6-c-data-list__toggle">
3030
3252
  <button
3031
3253
  class="pf-v6-c-button pf-m-plain"
3032
3254
  type="button"
3033
- aria-labelledby="ex-toggle5 data-list-expandable-example-data-list-item5"
3255
+ aria-labelledby="ex-toggle5 data-list-expandable-example-data-list-item-5"
3034
3256
  id="ex-toggle5"
3035
3257
  aria-label="Toggle details for"
3036
3258
  aria-expanded="false"
@@ -3077,53 +3299,92 @@ wrapperTag: div
3077
3299
  <div class="pf-v6-l-flex pf-m-wrap">
3078
3300
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3079
3301
  <div class="pf-v6-l-flex__item">
3080
- <i class="fas fa-code-branch" aria-hidden="true"></i>
3302
+ <span class="pf-v6-c-icon">
3303
+ <span class="pf-v6-c-icon__content">
3304
+ <i
3305
+ class="fas fa-code-branch"
3306
+ aria-hidden="true"
3307
+ ></i>
3308
+ </span>
3309
+ </span>
3081
3310
  </div>
3082
3311
  <div class="pf-v6-l-flex__item">
3083
3312
  <span>5</span>
3313
+ <span class="pf-v6-screen-reader">Branches</span>
3084
3314
  </div>
3085
3315
  </div>
3086
3316
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3087
3317
  <div class="pf-v6-l-flex__item">
3088
- <i class="fas fa-code" aria-hidden="true"></i>
3318
+ <span class="pf-v6-c-icon">
3319
+ <span class="pf-v6-c-icon__content">
3320
+ <i class="fas fa-code" aria-hidden="true"></i>
3321
+ </span>
3322
+ </span>
3089
3323
  </div>
3090
3324
  <div class="pf-v6-l-flex__item">
3091
3325
  <span>9</span>
3326
+ <span class="pf-v6-screen-reader">Code blocks</span>
3092
3327
  </div>
3093
3328
  </div>
3094
3329
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3095
3330
  <div class="pf-v6-l-flex__item">
3096
- <i class="fas fa-cube" aria-hidden="true"></i>
3331
+ <span class="pf-v6-c-icon">
3332
+ <span class="pf-v6-c-icon__content">
3333
+ <i class="fas fa-cube" aria-hidden="true"></i>
3334
+ </span>
3335
+ </span>
3097
3336
  </div>
3098
3337
  <div class="pf-v6-l-flex__item">
3099
3338
  <span>2</span>
3339
+ <span class="pf-v6-screen-reader">Workspaces</span>
3100
3340
  </div>
3101
3341
  </div>
3102
3342
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3103
3343
  <div class="pf-v6-l-flex__item">
3104
- <i class="fas fa-check-circle" aria-hidden="true"></i>
3344
+ <span class="pf-v6-c-icon">
3345
+ <span class="pf-v6-c-icon__content pf-m-success">
3346
+ <i
3347
+ class="fas fa-check-circle"
3348
+ aria-hidden="true"
3349
+ ></i>
3350
+ </span>
3351
+ </span>
3105
3352
  </div>
3106
3353
  <div class="pf-v6-l-flex__item">
3107
3354
  <span>11</span>
3355
+ <span class="pf-v6-screen-reader">Completed</span>
3108
3356
  </div>
3109
3357
  </div>
3110
3358
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3111
3359
  <div class="pf-v6-l-flex__item">
3112
- <i
3113
- class="fas fa-exclamation-triangle"
3114
- aria-hidden="true"
3115
- ></i>
3360
+ <span class="pf-v6-c-icon">
3361
+ <span class="pf-v6-c-icon__content pf-m-warning">
3362
+ <i
3363
+ class="fas fa-exclamation-triangle"
3364
+ aria-hidden="true"
3365
+ ></i>
3366
+ </span>
3367
+ </span>
3116
3368
  </div>
3117
3369
  <div class="pf-v6-l-flex__item">
3118
3370
  <span>4</span>
3371
+ <span class="pf-v6-screen-reader">Warnings</span>
3119
3372
  </div>
3120
3373
  </div>
3121
3374
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3122
3375
  <div class="pf-v6-l-flex__item">
3123
- <i class="fas fa-times-circle" aria-hidden="true"></i>
3376
+ <span class="pf-v6-c-icon">
3377
+ <span class="pf-v6-c-icon__content pf-m-danger">
3378
+ <i
3379
+ class="fas fa-exclamation-circle"
3380
+ aria-hidden="true"
3381
+ ></i>
3382
+ </span>
3383
+ </span>
3124
3384
  </div>
3125
3385
  <div class="pf-v6-l-flex__item">
3126
3386
  <span>1</span>
3387
+ <span class="pf-v6-screen-reader">Errors</span>
3127
3388
  </div>
3128
3389
  </div>
3129
3390
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3711,10 +3972,7 @@ wrapperTag: div
3711
3972
  aria-label="Simple data list example"
3712
3973
  id="data-list-static-bottom-example-data-list"
3713
3974
  >
3714
- <li
3715
- class="pf-v6-c-data-list__item"
3716
- aria-labelledby="data-list-static-bottom-example-data-list-item-1"
3717
- >
3975
+ <li class="pf-v6-c-data-list__item">
3718
3976
  <div class="pf-v6-c-data-list__item-row">
3719
3977
  <div class="pf-v6-c-data-list__item-content">
3720
3978
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3737,26 +3995,44 @@ wrapperTag: div
3737
3995
  <div class="pf-v6-l-flex pf-m-wrap">
3738
3996
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3739
3997
  <div class="pf-v6-l-flex__item">
3740
- <i class="fas fa-code-branch" aria-hidden="true"></i>
3998
+ <span class="pf-v6-c-icon">
3999
+ <span class="pf-v6-c-icon__content">
4000
+ <i
4001
+ class="fas fa-code-branch"
4002
+ aria-hidden="true"
4003
+ ></i>
4004
+ </span>
4005
+ </span>
3741
4006
  </div>
3742
4007
  <div class="pf-v6-l-flex__item">
3743
4008
  <span>10</span>
4009
+ <span class="pf-v6-screen-reader">Branches</span>
3744
4010
  </div>
3745
4011
  </div>
3746
4012
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3747
4013
  <div class="pf-v6-l-flex__item">
3748
- <i class="fas fa-code" aria-hidden="true"></i>
4014
+ <span class="pf-v6-c-icon">
4015
+ <span class="pf-v6-c-icon__content">
4016
+ <i class="fas fa-code" aria-hidden="true"></i>
4017
+ </span>
4018
+ </span>
3749
4019
  </div>
3750
4020
  <div class="pf-v6-l-flex__item">
3751
4021
  <span>4</span>
4022
+ <span class="pf-v6-screen-reader">Code blocks</span>
3752
4023
  </div>
3753
4024
  </div>
3754
4025
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3755
4026
  <div class="pf-v6-l-flex__item">
3756
- <i class="fas fa-cube" aria-hidden="true"></i>
4027
+ <span class="pf-v6-c-icon">
4028
+ <span class="pf-v6-c-icon__content">
4029
+ <i class="fas fa-cube" aria-hidden="true"></i>
4030
+ </span>
4031
+ </span>
3757
4032
  </div>
3758
4033
  <div class="pf-v6-l-flex__item">
3759
4034
  <span>5</span>
4035
+ <span class="pf-v6-screen-reader">Workspaces</span>
3760
4036
  </div>
3761
4037
  </div>
3762
4038
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3777,10 +4053,7 @@ wrapperTag: div
3777
4053
  </div>
3778
4054
  </li>
3779
4055
 
3780
- <li
3781
- class="pf-v6-c-data-list__item"
3782
- aria-labelledby="data-list-static-bottom-example-data-list-item-2"
3783
- >
4056
+ <li class="pf-v6-c-data-list__item">
3784
4057
  <div class="pf-v6-c-data-list__item-row">
3785
4058
  <div class="pf-v6-c-data-list__item-content">
3786
4059
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3800,53 +4073,92 @@ wrapperTag: div
3800
4073
  <div class="pf-v6-l-flex pf-m-wrap">
3801
4074
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3802
4075
  <div class="pf-v6-l-flex__item">
3803
- <i class="fas fa-code-branch" aria-hidden="true"></i>
4076
+ <span class="pf-v6-c-icon">
4077
+ <span class="pf-v6-c-icon__content">
4078
+ <i
4079
+ class="fas fa-code-branch"
4080
+ aria-hidden="true"
4081
+ ></i>
4082
+ </span>
4083
+ </span>
3804
4084
  </div>
3805
4085
  <div class="pf-v6-l-flex__item">
3806
4086
  <span>5</span>
4087
+ <span class="pf-v6-screen-reader">Branches</span>
3807
4088
  </div>
3808
4089
  </div>
3809
4090
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3810
4091
  <div class="pf-v6-l-flex__item">
3811
- <i class="fas fa-code" aria-hidden="true"></i>
4092
+ <span class="pf-v6-c-icon">
4093
+ <span class="pf-v6-c-icon__content">
4094
+ <i class="fas fa-code" aria-hidden="true"></i>
4095
+ </span>
4096
+ </span>
3812
4097
  </div>
3813
4098
  <div class="pf-v6-l-flex__item">
3814
4099
  <span>9</span>
4100
+ <span class="pf-v6-screen-reader">Code blocks</span>
3815
4101
  </div>
3816
4102
  </div>
3817
4103
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3818
4104
  <div class="pf-v6-l-flex__item">
3819
- <i class="fas fa-cube" aria-hidden="true"></i>
4105
+ <span class="pf-v6-c-icon">
4106
+ <span class="pf-v6-c-icon__content">
4107
+ <i class="fas fa-cube" aria-hidden="true"></i>
4108
+ </span>
4109
+ </span>
3820
4110
  </div>
3821
4111
  <div class="pf-v6-l-flex__item">
3822
4112
  <span>2</span>
4113
+ <span class="pf-v6-screen-reader">Workspaces</span>
3823
4114
  </div>
3824
4115
  </div>
3825
4116
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3826
4117
  <div class="pf-v6-l-flex__item">
3827
- <i class="fas fa-check-circle" aria-hidden="true"></i>
4118
+ <span class="pf-v6-c-icon">
4119
+ <span class="pf-v6-c-icon__content pf-m-success">
4120
+ <i
4121
+ class="fas fa-check-circle"
4122
+ aria-hidden="true"
4123
+ ></i>
4124
+ </span>
4125
+ </span>
3828
4126
  </div>
3829
4127
  <div class="pf-v6-l-flex__item">
3830
4128
  <span>11</span>
4129
+ <span class="pf-v6-screen-reader">Completed</span>
3831
4130
  </div>
3832
4131
  </div>
3833
4132
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3834
4133
  <div class="pf-v6-l-flex__item">
3835
- <i
3836
- class="fas fa-exclamation-triangle"
3837
- aria-hidden="true"
3838
- ></i>
4134
+ <span class="pf-v6-c-icon">
4135
+ <span class="pf-v6-c-icon__content pf-m-warning">
4136
+ <i
4137
+ class="fas fa-exclamation-triangle"
4138
+ aria-hidden="true"
4139
+ ></i>
4140
+ </span>
4141
+ </span>
3839
4142
  </div>
3840
4143
  <div class="pf-v6-l-flex__item">
3841
4144
  <span>4</span>
4145
+ <span class="pf-v6-screen-reader">Warnings</span>
3842
4146
  </div>
3843
4147
  </div>
3844
4148
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3845
4149
  <div class="pf-v6-l-flex__item">
3846
- <i class="fas fa-times-circle" aria-hidden="true"></i>
4150
+ <span class="pf-v6-c-icon">
4151
+ <span class="pf-v6-c-icon__content pf-m-danger">
4152
+ <i
4153
+ class="fas fa-exclamation-circle"
4154
+ aria-hidden="true"
4155
+ ></i>
4156
+ </span>
4157
+ </span>
3847
4158
  </div>
3848
4159
  <div class="pf-v6-l-flex__item">
3849
4160
  <span>1</span>
4161
+ <span class="pf-v6-screen-reader">Errors</span>
3850
4162
  </div>
3851
4163
  </div>
3852
4164
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3867,10 +4179,7 @@ wrapperTag: div
3867
4179
  </div>
3868
4180
  </li>
3869
4181
 
3870
- <li
3871
- class="pf-v6-c-data-list__item"
3872
- aria-labelledby="data-list-static-bottom-example-data-list-item-3"
3873
- >
4182
+ <li class="pf-v6-c-data-list__item">
3874
4183
  <div class="pf-v6-c-data-list__item-row">
3875
4184
  <div class="pf-v6-c-data-list__item-content">
3876
4185
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3892,10 +4201,7 @@ wrapperTag: div
3892
4201
  </div>
3893
4202
  </li>
3894
4203
 
3895
- <li
3896
- class="pf-v6-c-data-list__item"
3897
- aria-labelledby="data-list-static-bottom-example-data-list-item-4"
3898
- >
4204
+ <li class="pf-v6-c-data-list__item">
3899
4205
  <div class="pf-v6-c-data-list__item-row">
3900
4206
  <div class="pf-v6-c-data-list__item-content">
3901
4207
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3918,26 +4224,44 @@ wrapperTag: div
3918
4224
  <div class="pf-v6-l-flex pf-m-wrap">
3919
4225
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3920
4226
  <div class="pf-v6-l-flex__item">
3921
- <i class="fas fa-code-branch" aria-hidden="true"></i>
4227
+ <span class="pf-v6-c-icon">
4228
+ <span class="pf-v6-c-icon__content">
4229
+ <i
4230
+ class="fas fa-code-branch"
4231
+ aria-hidden="true"
4232
+ ></i>
4233
+ </span>
4234
+ </span>
3922
4235
  </div>
3923
4236
  <div class="pf-v6-l-flex__item">
3924
4237
  <span>10</span>
4238
+ <span class="pf-v6-screen-reader">Branches</span>
3925
4239
  </div>
3926
4240
  </div>
3927
4241
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3928
4242
  <div class="pf-v6-l-flex__item">
3929
- <i class="fas fa-code" aria-hidden="true"></i>
4243
+ <span class="pf-v6-c-icon">
4244
+ <span class="pf-v6-c-icon__content">
4245
+ <i class="fas fa-code" aria-hidden="true"></i>
4246
+ </span>
4247
+ </span>
3930
4248
  </div>
3931
4249
  <div class="pf-v6-l-flex__item">
3932
4250
  <span>4</span>
4251
+ <span class="pf-v6-screen-reader">Code blocks</span>
3933
4252
  </div>
3934
4253
  </div>
3935
4254
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3936
4255
  <div class="pf-v6-l-flex__item">
3937
- <i class="fas fa-cube" aria-hidden="true"></i>
4256
+ <span class="pf-v6-c-icon">
4257
+ <span class="pf-v6-c-icon__content">
4258
+ <i class="fas fa-cube" aria-hidden="true"></i>
4259
+ </span>
4260
+ </span>
3938
4261
  </div>
3939
4262
  <div class="pf-v6-l-flex__item">
3940
4263
  <span>5</span>
4264
+ <span class="pf-v6-screen-reader">Workspaces</span>
3941
4265
  </div>
3942
4266
  </div>
3943
4267
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3958,10 +4282,7 @@ wrapperTag: div
3958
4282
  </div>
3959
4283
  </li>
3960
4284
 
3961
- <li
3962
- class="pf-v6-c-data-list__item"
3963
- aria-labelledby="data-list-static-bottom-example-data-list-item-5"
3964
- >
4285
+ <li class="pf-v6-c-data-list__item">
3965
4286
  <div class="pf-v6-c-data-list__item-row">
3966
4287
  <div class="pf-v6-c-data-list__item-content">
3967
4288
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3981,53 +4302,92 @@ wrapperTag: div
3981
4302
  <div class="pf-v6-l-flex pf-m-wrap">
3982
4303
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3983
4304
  <div class="pf-v6-l-flex__item">
3984
- <i class="fas fa-code-branch" aria-hidden="true"></i>
4305
+ <span class="pf-v6-c-icon">
4306
+ <span class="pf-v6-c-icon__content">
4307
+ <i
4308
+ class="fas fa-code-branch"
4309
+ aria-hidden="true"
4310
+ ></i>
4311
+ </span>
4312
+ </span>
3985
4313
  </div>
3986
4314
  <div class="pf-v6-l-flex__item">
3987
4315
  <span>5</span>
4316
+ <span class="pf-v6-screen-reader">Branches</span>
3988
4317
  </div>
3989
4318
  </div>
3990
4319
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3991
4320
  <div class="pf-v6-l-flex__item">
3992
- <i class="fas fa-code" aria-hidden="true"></i>
4321
+ <span class="pf-v6-c-icon">
4322
+ <span class="pf-v6-c-icon__content">
4323
+ <i class="fas fa-code" aria-hidden="true"></i>
4324
+ </span>
4325
+ </span>
3993
4326
  </div>
3994
4327
  <div class="pf-v6-l-flex__item">
3995
4328
  <span>9</span>
4329
+ <span class="pf-v6-screen-reader">Code blocks</span>
3996
4330
  </div>
3997
4331
  </div>
3998
4332
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3999
4333
  <div class="pf-v6-l-flex__item">
4000
- <i class="fas fa-cube" aria-hidden="true"></i>
4334
+ <span class="pf-v6-c-icon">
4335
+ <span class="pf-v6-c-icon__content">
4336
+ <i class="fas fa-cube" aria-hidden="true"></i>
4337
+ </span>
4338
+ </span>
4001
4339
  </div>
4002
4340
  <div class="pf-v6-l-flex__item">
4003
4341
  <span>2</span>
4342
+ <span class="pf-v6-screen-reader">Workspaces</span>
4004
4343
  </div>
4005
4344
  </div>
4006
4345
  <div class="pf-v6-l-flex pf-m-space-items-xs">
4007
4346
  <div class="pf-v6-l-flex__item">
4008
- <i class="fas fa-check-circle" aria-hidden="true"></i>
4347
+ <span class="pf-v6-c-icon">
4348
+ <span class="pf-v6-c-icon__content pf-m-success">
4349
+ <i
4350
+ class="fas fa-check-circle"
4351
+ aria-hidden="true"
4352
+ ></i>
4353
+ </span>
4354
+ </span>
4009
4355
  </div>
4010
4356
  <div class="pf-v6-l-flex__item">
4011
4357
  <span>11</span>
4358
+ <span class="pf-v6-screen-reader">Completed</span>
4012
4359
  </div>
4013
4360
  </div>
4014
4361
  <div class="pf-v6-l-flex pf-m-space-items-xs">
4015
4362
  <div class="pf-v6-l-flex__item">
4016
- <i
4017
- class="fas fa-exclamation-triangle"
4018
- aria-hidden="true"
4019
- ></i>
4363
+ <span class="pf-v6-c-icon">
4364
+ <span class="pf-v6-c-icon__content pf-m-warning">
4365
+ <i
4366
+ class="fas fa-exclamation-triangle"
4367
+ aria-hidden="true"
4368
+ ></i>
4369
+ </span>
4370
+ </span>
4020
4371
  </div>
4021
4372
  <div class="pf-v6-l-flex__item">
4022
4373
  <span>4</span>
4374
+ <span class="pf-v6-screen-reader">Warnings</span>
4023
4375
  </div>
4024
4376
  </div>
4025
4377
  <div class="pf-v6-l-flex pf-m-space-items-xs">
4026
4378
  <div class="pf-v6-l-flex__item">
4027
- <i class="fas fa-times-circle" aria-hidden="true"></i>
4379
+ <span class="pf-v6-c-icon">
4380
+ <span class="pf-v6-c-icon__content pf-m-danger">
4381
+ <i
4382
+ class="fas fa-exclamation-circle"
4383
+ aria-hidden="true"
4384
+ ></i>
4385
+ </span>
4386
+ </span>
4028
4387
  </div>
4029
4388
  <div class="pf-v6-l-flex__item">
4030
4389
  <span>1</span>
4390
+ <span class="pf-v6-screen-reader">Errors</span>
4031
4391
  </div>
4032
4392
  </div>
4033
4393
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>