@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/DataList/examples/DataList.md CHANGED
@@ -20,12 +20,31 @@ wrapperTag: div
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
23
- class="pf-v6-c-button pf-m-plain"
23
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
24
24
  type="button"
25
25
  aria-label="Global navigation"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-bars" aria-hidden="true"></i>
28
+ <svg
29
+ viewBox="0 0 10 10"
30
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
31
+ width="1em"
32
+ height="1em"
33
+ >
34
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
35
+ <path
36
+ class="pf-v6-c-button--hamburger-icon--middle"
37
+ d="M1,5 L9,5"
38
+ />
39
+ <path
40
+ class="pf-v6-c-button--hamburger-icon--arrow"
41
+ d="M1,5 L1,5 L1,5"
42
+ />
43
+ <path
44
+ class="pf-v6-c-button--hamburger-icon--bottom"
45
+ d="M9,9 L1,9"
46
+ />
47
+ </svg>
29
48
  </span>
30
49
  </button>
31
50
  </span>
@@ -133,7 +152,7 @@ wrapperTag: div
133
152
  </div>
134
153
  <div class="pf-v6-c-toolbar__item">
135
154
  <button
136
- class="pf-v6-c-menu-toggle pf-m-plain"
155
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
137
156
  type="button"
138
157
  aria-expanded="false"
139
158
  aria-label="Settings"
@@ -339,7 +358,7 @@ wrapperTag: div
339
358
  <div class="pf-v6-c-pagination pf-m-compact">
340
359
  <div class="pf-v6-c-pagination__page-menu">
341
360
  <button
342
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
361
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
343
362
  type="button"
344
363
  aria-expanded="false"
345
364
  aria-label="Menu toggle"
@@ -404,10 +423,7 @@ wrapperTag: div
404
423
  aria-label="Simple data list example"
405
424
  id="data-list-basic-example-data-list"
406
425
  >
407
- <li
408
- class="pf-v6-c-data-list__item"
409
- aria-labelledby="data-list-basic-example-data-list-item-1"
410
- >
426
+ <li class="pf-v6-c-data-list__item">
411
427
  <div class="pf-v6-c-data-list__item-row">
412
428
  <div class="pf-v6-c-data-list__item-content">
413
429
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -430,26 +446,44 @@ wrapperTag: div
430
446
  <div class="pf-v6-l-flex pf-m-wrap">
431
447
  <div class="pf-v6-l-flex pf-m-space-items-xs">
432
448
  <div class="pf-v6-l-flex__item">
433
- <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>
434
457
  </div>
435
458
  <div class="pf-v6-l-flex__item">
436
459
  <span>10</span>
460
+ <span class="pf-v6-screen-reader">Branches</span>
437
461
  </div>
438
462
  </div>
439
463
  <div class="pf-v6-l-flex pf-m-space-items-xs">
440
464
  <div class="pf-v6-l-flex__item">
441
- <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>
442
470
  </div>
443
471
  <div class="pf-v6-l-flex__item">
444
472
  <span>4</span>
473
+ <span class="pf-v6-screen-reader">Code blocks</span>
445
474
  </div>
446
475
  </div>
447
476
  <div class="pf-v6-l-flex pf-m-space-items-xs">
448
477
  <div class="pf-v6-l-flex__item">
449
- <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>
450
483
  </div>
451
484
  <div class="pf-v6-l-flex__item">
452
485
  <span>5</span>
486
+ <span class="pf-v6-screen-reader">Workspaces</span>
453
487
  </div>
454
488
  </div>
455
489
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -470,10 +504,7 @@ wrapperTag: div
470
504
  </div>
471
505
  </li>
472
506
 
473
- <li
474
- class="pf-v6-c-data-list__item"
475
- aria-labelledby="data-list-basic-example-data-list-item-2"
476
- >
507
+ <li class="pf-v6-c-data-list__item">
477
508
  <div class="pf-v6-c-data-list__item-row">
478
509
  <div class="pf-v6-c-data-list__item-content">
479
510
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -493,53 +524,92 @@ wrapperTag: div
493
524
  <div class="pf-v6-l-flex pf-m-wrap">
494
525
  <div class="pf-v6-l-flex pf-m-space-items-xs">
495
526
  <div class="pf-v6-l-flex__item">
496
- <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>
497
535
  </div>
498
536
  <div class="pf-v6-l-flex__item">
499
537
  <span>5</span>
538
+ <span class="pf-v6-screen-reader">Branches</span>
500
539
  </div>
501
540
  </div>
502
541
  <div class="pf-v6-l-flex pf-m-space-items-xs">
503
542
  <div class="pf-v6-l-flex__item">
504
- <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>
505
548
  </div>
506
549
  <div class="pf-v6-l-flex__item">
507
550
  <span>9</span>
551
+ <span class="pf-v6-screen-reader">Code blocks</span>
508
552
  </div>
509
553
  </div>
510
554
  <div class="pf-v6-l-flex pf-m-space-items-xs">
511
555
  <div class="pf-v6-l-flex__item">
512
- <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>
513
561
  </div>
514
562
  <div class="pf-v6-l-flex__item">
515
563
  <span>2</span>
564
+ <span class="pf-v6-screen-reader">Workspaces</span>
516
565
  </div>
517
566
  </div>
518
567
  <div class="pf-v6-l-flex pf-m-space-items-xs">
519
568
  <div class="pf-v6-l-flex__item">
520
- <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>
521
577
  </div>
522
578
  <div class="pf-v6-l-flex__item">
523
579
  <span>11</span>
580
+ <span class="pf-v6-screen-reader">Completed</span>
524
581
  </div>
525
582
  </div>
526
583
  <div class="pf-v6-l-flex pf-m-space-items-xs">
527
584
  <div class="pf-v6-l-flex__item">
528
- <i
529
- class="fas fa-exclamation-triangle"
530
- aria-hidden="true"
531
- ></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>
532
593
  </div>
533
594
  <div class="pf-v6-l-flex__item">
534
595
  <span>4</span>
596
+ <span class="pf-v6-screen-reader">Warnings</span>
535
597
  </div>
536
598
  </div>
537
599
  <div class="pf-v6-l-flex pf-m-space-items-xs">
538
600
  <div class="pf-v6-l-flex__item">
539
- <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>
540
609
  </div>
541
610
  <div class="pf-v6-l-flex__item">
542
611
  <span>1</span>
612
+ <span class="pf-v6-screen-reader">Errors</span>
543
613
  </div>
544
614
  </div>
545
615
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -560,10 +630,7 @@ wrapperTag: div
560
630
  </div>
561
631
  </li>
562
632
 
563
- <li
564
- class="pf-v6-c-data-list__item"
565
- aria-labelledby="data-list-basic-example-data-list-item-3"
566
- >
633
+ <li class="pf-v6-c-data-list__item">
567
634
  <div class="pf-v6-c-data-list__item-row">
568
635
  <div class="pf-v6-c-data-list__item-content">
569
636
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -585,10 +652,7 @@ wrapperTag: div
585
652
  </div>
586
653
  </li>
587
654
 
588
- <li
589
- class="pf-v6-c-data-list__item"
590
- aria-labelledby="data-list-basic-example-data-list-item-4"
591
- >
655
+ <li class="pf-v6-c-data-list__item">
592
656
  <div class="pf-v6-c-data-list__item-row">
593
657
  <div class="pf-v6-c-data-list__item-content">
594
658
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -611,26 +675,44 @@ wrapperTag: div
611
675
  <div class="pf-v6-l-flex pf-m-wrap">
612
676
  <div class="pf-v6-l-flex pf-m-space-items-xs">
613
677
  <div class="pf-v6-l-flex__item">
614
- <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>
615
686
  </div>
616
687
  <div class="pf-v6-l-flex__item">
617
688
  <span>10</span>
689
+ <span class="pf-v6-screen-reader">Branches</span>
618
690
  </div>
619
691
  </div>
620
692
  <div class="pf-v6-l-flex pf-m-space-items-xs">
621
693
  <div class="pf-v6-l-flex__item">
622
- <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>
623
699
  </div>
624
700
  <div class="pf-v6-l-flex__item">
625
701
  <span>4</span>
702
+ <span class="pf-v6-screen-reader">Code blocks</span>
626
703
  </div>
627
704
  </div>
628
705
  <div class="pf-v6-l-flex pf-m-space-items-xs">
629
706
  <div class="pf-v6-l-flex__item">
630
- <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>
631
712
  </div>
632
713
  <div class="pf-v6-l-flex__item">
633
714
  <span>5</span>
715
+ <span class="pf-v6-screen-reader">Workspaces</span>
634
716
  </div>
635
717
  </div>
636
718
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -651,10 +733,7 @@ wrapperTag: div
651
733
  </div>
652
734
  </li>
653
735
 
654
- <li
655
- class="pf-v6-c-data-list__item"
656
- aria-labelledby="data-list-basic-example-data-list-item-5"
657
- >
736
+ <li class="pf-v6-c-data-list__item">
658
737
  <div class="pf-v6-c-data-list__item-row">
659
738
  <div class="pf-v6-c-data-list__item-content">
660
739
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -674,53 +753,92 @@ wrapperTag: div
674
753
  <div class="pf-v6-l-flex pf-m-wrap">
675
754
  <div class="pf-v6-l-flex pf-m-space-items-xs">
676
755
  <div class="pf-v6-l-flex__item">
677
- <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>
678
764
  </div>
679
765
  <div class="pf-v6-l-flex__item">
680
766
  <span>5</span>
767
+ <span class="pf-v6-screen-reader">Branches</span>
681
768
  </div>
682
769
  </div>
683
770
  <div class="pf-v6-l-flex pf-m-space-items-xs">
684
771
  <div class="pf-v6-l-flex__item">
685
- <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>
686
777
  </div>
687
778
  <div class="pf-v6-l-flex__item">
688
779
  <span>9</span>
780
+ <span class="pf-v6-screen-reader">Code blocks</span>
689
781
  </div>
690
782
  </div>
691
783
  <div class="pf-v6-l-flex pf-m-space-items-xs">
692
784
  <div class="pf-v6-l-flex__item">
693
- <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>
694
790
  </div>
695
791
  <div class="pf-v6-l-flex__item">
696
792
  <span>2</span>
793
+ <span class="pf-v6-screen-reader">Workspaces</span>
697
794
  </div>
698
795
  </div>
699
796
  <div class="pf-v6-l-flex pf-m-space-items-xs">
700
797
  <div class="pf-v6-l-flex__item">
701
- <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>
702
806
  </div>
703
807
  <div class="pf-v6-l-flex__item">
704
808
  <span>11</span>
809
+ <span class="pf-v6-screen-reader">Completed</span>
705
810
  </div>
706
811
  </div>
707
812
  <div class="pf-v6-l-flex pf-m-space-items-xs">
708
813
  <div class="pf-v6-l-flex__item">
709
- <i
710
- class="fas fa-exclamation-triangle"
711
- aria-hidden="true"
712
- ></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>
713
822
  </div>
714
823
  <div class="pf-v6-l-flex__item">
715
824
  <span>4</span>
825
+ <span class="pf-v6-screen-reader">Warnings</span>
716
826
  </div>
717
827
  </div>
718
828
  <div class="pf-v6-l-flex pf-m-space-items-xs">
719
829
  <div class="pf-v6-l-flex__item">
720
- <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>
721
838
  </div>
722
839
  <div class="pf-v6-l-flex__item">
723
840
  <span>1</span>
841
+ <span class="pf-v6-screen-reader">Errors</span>
724
842
  </div>
725
843
  </div>
726
844
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -744,7 +862,7 @@ wrapperTag: div
744
862
  <div class="pf-v6-c-pagination pf-m-bottom">
745
863
  <div class="pf-v6-c-pagination__page-menu">
746
864
  <button
747
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
865
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
748
866
  type="button"
749
867
  aria-expanded="false"
750
868
  aria-label="Menu toggle"
@@ -847,12 +965,31 @@ wrapperTag: div
847
965
  <div class="pf-v6-c-masthead__main">
848
966
  <span class="pf-v6-c-masthead__toggle">
849
967
  <button
850
- class="pf-v6-c-button pf-m-plain"
968
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
851
969
  type="button"
852
970
  aria-label="Global navigation"
853
971
  >
854
972
  <span class="pf-v6-c-button__icon">
855
- <i class="fas fa-bars" aria-hidden="true"></i>
973
+ <svg
974
+ viewBox="0 0 10 10"
975
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
976
+ width="1em"
977
+ height="1em"
978
+ >
979
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
980
+ <path
981
+ class="pf-v6-c-button--hamburger-icon--middle"
982
+ d="M1,5 L9,5"
983
+ />
984
+ <path
985
+ class="pf-v6-c-button--hamburger-icon--arrow"
986
+ d="M1,5 L1,5 L1,5"
987
+ />
988
+ <path
989
+ class="pf-v6-c-button--hamburger-icon--bottom"
990
+ d="M9,9 L1,9"
991
+ />
992
+ </svg>
856
993
  </span>
857
994
  </button>
858
995
  </span>
@@ -960,7 +1097,7 @@ wrapperTag: div
960
1097
  </div>
961
1098
  <div class="pf-v6-c-toolbar__item">
962
1099
  <button
963
- class="pf-v6-c-menu-toggle pf-m-plain"
1100
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
964
1101
  type="button"
965
1102
  aria-expanded="false"
966
1103
  aria-label="Settings"
@@ -1198,7 +1335,7 @@ wrapperTag: div
1198
1335
  <div class="pf-v6-c-pagination pf-m-compact">
1199
1336
  <div class="pf-v6-c-pagination__page-menu">
1200
1337
  <button
1201
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1338
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1202
1339
  type="button"
1203
1340
  aria-expanded="false"
1204
1341
  aria-label="Menu toggle"
@@ -1263,10 +1400,7 @@ wrapperTag: div
1263
1400
  aria-label="Data list actionable demo"
1264
1401
  id="data-list-actionable-example-data-list"
1265
1402
  >
1266
- <li
1267
- class="pf-v6-c-data-list__item"
1268
- aria-labelledby="data-list-actionable-example-data-list-item-1"
1269
- >
1403
+ <li class="pf-v6-c-data-list__item">
1270
1404
  <div class="pf-v6-c-data-list__item-row">
1271
1405
  <div class="pf-v6-c-data-list__item-control">
1272
1406
  <div class="pf-v6-c-data-list__check">
@@ -1305,26 +1439,44 @@ wrapperTag: div
1305
1439
  <div class="pf-v6-l-flex pf-m-wrap">
1306
1440
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1307
1441
  <div class="pf-v6-l-flex__item">
1308
- <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>
1309
1450
  </div>
1310
1451
  <div class="pf-v6-l-flex__item">
1311
1452
  <span>10</span>
1453
+ <span class="pf-v6-screen-reader">Branches</span>
1312
1454
  </div>
1313
1455
  </div>
1314
1456
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1315
1457
  <div class="pf-v6-l-flex__item">
1316
- <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>
1317
1463
  </div>
1318
1464
  <div class="pf-v6-l-flex__item">
1319
1465
  <span>4</span>
1466
+ <span class="pf-v6-screen-reader">Code blocks</span>
1320
1467
  </div>
1321
1468
  </div>
1322
1469
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1323
1470
  <div class="pf-v6-l-flex__item">
1324
- <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>
1325
1476
  </div>
1326
1477
  <div class="pf-v6-l-flex__item">
1327
1478
  <span>5</span>
1479
+ <span class="pf-v6-screen-reader">Workspaces</span>
1328
1480
  </div>
1329
1481
  </div>
1330
1482
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -1345,10 +1497,7 @@ wrapperTag: div
1345
1497
  </div>
1346
1498
  </li>
1347
1499
 
1348
- <li
1349
- class="pf-v6-c-data-list__item"
1350
- aria-labelledby="data-list-actionable-example-data-list-item-2"
1351
- >
1500
+ <li class="pf-v6-c-data-list__item">
1352
1501
  <div class="pf-v6-c-data-list__item-row">
1353
1502
  <div class="pf-v6-c-data-list__item-control">
1354
1503
  <div class="pf-v6-c-data-list__check">
@@ -1384,53 +1533,92 @@ wrapperTag: div
1384
1533
  <div class="pf-v6-l-flex pf-m-wrap">
1385
1534
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1386
1535
  <div class="pf-v6-l-flex__item">
1387
- <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>
1388
1544
  </div>
1389
1545
  <div class="pf-v6-l-flex__item">
1390
1546
  <span>5</span>
1547
+ <span class="pf-v6-screen-reader">Branches</span>
1391
1548
  </div>
1392
1549
  </div>
1393
1550
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1394
1551
  <div class="pf-v6-l-flex__item">
1395
- <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>
1396
1557
  </div>
1397
1558
  <div class="pf-v6-l-flex__item">
1398
1559
  <span>9</span>
1560
+ <span class="pf-v6-screen-reader">Code blocks</span>
1399
1561
  </div>
1400
1562
  </div>
1401
1563
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1402
1564
  <div class="pf-v6-l-flex__item">
1403
- <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>
1404
1570
  </div>
1405
1571
  <div class="pf-v6-l-flex__item">
1406
1572
  <span>2</span>
1573
+ <span class="pf-v6-screen-reader">Workspaces</span>
1407
1574
  </div>
1408
1575
  </div>
1409
1576
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1410
1577
  <div class="pf-v6-l-flex__item">
1411
- <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>
1412
1586
  </div>
1413
1587
  <div class="pf-v6-l-flex__item">
1414
1588
  <span>11</span>
1589
+ <span class="pf-v6-screen-reader">Completed</span>
1415
1590
  </div>
1416
1591
  </div>
1417
1592
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1418
1593
  <div class="pf-v6-l-flex__item">
1419
- <i
1420
- class="fas fa-exclamation-triangle"
1421
- aria-hidden="true"
1422
- ></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>
1423
1602
  </div>
1424
1603
  <div class="pf-v6-l-flex__item">
1425
1604
  <span>4</span>
1605
+ <span class="pf-v6-screen-reader">Warnings</span>
1426
1606
  </div>
1427
1607
  </div>
1428
1608
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1429
1609
  <div class="pf-v6-l-flex__item">
1430
- <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>
1431
1618
  </div>
1432
1619
  <div class="pf-v6-l-flex__item">
1433
1620
  <span>1</span>
1621
+ <span class="pf-v6-screen-reader">Errors</span>
1434
1622
  </div>
1435
1623
  </div>
1436
1624
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -1451,10 +1639,7 @@ wrapperTag: div
1451
1639
  </div>
1452
1640
  </li>
1453
1641
 
1454
- <li
1455
- class="pf-v6-c-data-list__item"
1456
- aria-labelledby="data-list-actionable-example-data-list-item-3"
1457
- >
1642
+ <li class="pf-v6-c-data-list__item">
1458
1643
  <div class="pf-v6-c-data-list__item-row">
1459
1644
  <div class="pf-v6-c-data-list__item-control">
1460
1645
  <div class="pf-v6-c-data-list__check">
@@ -1494,10 +1679,7 @@ wrapperTag: div
1494
1679
  </div>
1495
1680
  </li>
1496
1681
 
1497
- <li
1498
- class="pf-v6-c-data-list__item"
1499
- aria-labelledby="data-list-actionable-example-data-list-item-4"
1500
- >
1682
+ <li class="pf-v6-c-data-list__item">
1501
1683
  <div class="pf-v6-c-data-list__item-row">
1502
1684
  <div class="pf-v6-c-data-list__item-control">
1503
1685
  <div class="pf-v6-c-data-list__check">
@@ -1538,26 +1720,44 @@ wrapperTag: div
1538
1720
  <div class="pf-v6-l-flex pf-m-wrap">
1539
1721
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1540
1722
  <div class="pf-v6-l-flex__item">
1541
- <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>
1542
1731
  </div>
1543
1732
  <div class="pf-v6-l-flex__item">
1544
1733
  <span>10</span>
1734
+ <span class="pf-v6-screen-reader">Branches</span>
1545
1735
  </div>
1546
1736
  </div>
1547
1737
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1548
1738
  <div class="pf-v6-l-flex__item">
1549
- <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>
1550
1744
  </div>
1551
1745
  <div class="pf-v6-l-flex__item">
1552
1746
  <span>4</span>
1747
+ <span class="pf-v6-screen-reader">Code blocks</span>
1553
1748
  </div>
1554
1749
  </div>
1555
1750
  <div class="pf-v6-l-flex pf-m-space-items-xs">
1556
1751
  <div class="pf-v6-l-flex__item">
1557
- <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>
1558
1757
  </div>
1559
1758
  <div class="pf-v6-l-flex__item">
1560
1759
  <span>5</span>
1760
+ <span class="pf-v6-screen-reader">Workspaces</span>
1561
1761
  </div>
1562
1762
  </div>
1563
1763
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -1581,7 +1781,7 @@ wrapperTag: div
1581
1781
  <div class="pf-v6-c-pagination pf-m-bottom">
1582
1782
  <div class="pf-v6-c-pagination__page-menu">
1583
1783
  <button
1584
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1784
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1585
1785
  type="button"
1586
1786
  aria-expanded="false"
1587
1787
  aria-label="Menu toggle"
@@ -1684,12 +1884,31 @@ wrapperTag: div
1684
1884
  <div class="pf-v6-c-masthead__main">
1685
1885
  <span class="pf-v6-c-masthead__toggle">
1686
1886
  <button
1687
- class="pf-v6-c-button pf-m-plain"
1887
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1688
1888
  type="button"
1689
1889
  aria-label="Global navigation"
1690
1890
  >
1691
1891
  <span class="pf-v6-c-button__icon">
1692
- <i class="fas fa-bars" aria-hidden="true"></i>
1892
+ <svg
1893
+ viewBox="0 0 10 10"
1894
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1895
+ width="1em"
1896
+ height="1em"
1897
+ >
1898
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1899
+ <path
1900
+ class="pf-v6-c-button--hamburger-icon--middle"
1901
+ d="M1,5 L9,5"
1902
+ />
1903
+ <path
1904
+ class="pf-v6-c-button--hamburger-icon--arrow"
1905
+ d="M1,5 L1,5 L1,5"
1906
+ />
1907
+ <path
1908
+ class="pf-v6-c-button--hamburger-icon--bottom"
1909
+ d="M9,9 L1,9"
1910
+ />
1911
+ </svg>
1693
1912
  </span>
1694
1913
  </button>
1695
1914
  </span>
@@ -1797,7 +2016,7 @@ wrapperTag: div
1797
2016
  </div>
1798
2017
  <div class="pf-v6-c-toolbar__item">
1799
2018
  <button
1800
- class="pf-v6-c-menu-toggle pf-m-plain"
2019
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1801
2020
  type="button"
1802
2021
  aria-expanded="false"
1803
2022
  aria-label="Settings"
@@ -2094,7 +2313,7 @@ wrapperTag: div
2094
2313
  <div class="pf-v6-c-pagination pf-m-compact">
2095
2314
  <div class="pf-v6-c-pagination__page-menu">
2096
2315
  <button
2097
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2316
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2098
2317
  type="button"
2099
2318
  aria-expanded="false"
2100
2319
  aria-label="Menu toggle"
@@ -2159,17 +2378,14 @@ wrapperTag: div
2159
2378
  aria-label="Data list expandable demo"
2160
2379
  id="data-list-expandable-example-data-list"
2161
2380
  >
2162
- <li
2163
- class="pf-v6-c-data-list__item pf-m-expanded"
2164
- aria-labelledby="data-list-expandable-example-data-list-item-1"
2165
- >
2381
+ <li class="pf-v6-c-data-list__item pf-m-expanded">
2166
2382
  <div class="pf-v6-c-data-list__item-row">
2167
2383
  <div class="pf-v6-c-data-list__item-control">
2168
2384
  <div class="pf-v6-c-data-list__toggle">
2169
2385
  <button
2170
2386
  class="pf-v6-c-button pf-m-plain"
2171
2387
  type="button"
2172
- aria-labelledby="ex-toggle1 data-list-expandable-example-data-list-item1"
2388
+ aria-labelledby="ex-toggle1 data-list-expandable-example-data-list-item-1"
2173
2389
  id="ex-toggle1"
2174
2390
  aria-label="Toggle details for"
2175
2391
  aria-expanded="false"
@@ -2219,26 +2435,44 @@ wrapperTag: div
2219
2435
  <div class="pf-v6-l-flex pf-m-wrap">
2220
2436
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2221
2437
  <div class="pf-v6-l-flex__item">
2222
- <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>
2223
2446
  </div>
2224
2447
  <div class="pf-v6-l-flex__item">
2225
2448
  <span>10</span>
2449
+ <span class="pf-v6-screen-reader">Branches</span>
2226
2450
  </div>
2227
2451
  </div>
2228
2452
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2229
2453
  <div class="pf-v6-l-flex__item">
2230
- <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>
2231
2459
  </div>
2232
2460
  <div class="pf-v6-l-flex__item">
2233
2461
  <span>4</span>
2462
+ <span class="pf-v6-screen-reader">Code blocks</span>
2234
2463
  </div>
2235
2464
  </div>
2236
2465
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2237
2466
  <div class="pf-v6-l-flex__item">
2238
- <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>
2239
2472
  </div>
2240
2473
  <div class="pf-v6-l-flex__item">
2241
2474
  <span>5</span>
2475
+ <span class="pf-v6-screen-reader">Workspaces</span>
2242
2476
  </div>
2243
2477
  </div>
2244
2478
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -2416,7 +2650,7 @@ wrapperTag: div
2416
2650
  class="pf-v6-c-menu-toggle pf-m-plain"
2417
2651
  type="button"
2418
2652
  aria-expanded="false"
2419
- aria-label="Menu toggle"
2653
+ aria-label="Table actions"
2420
2654
  >
2421
2655
  <span class="pf-v6-c-menu-toggle__icon">
2422
2656
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2493,7 +2727,7 @@ wrapperTag: div
2493
2727
  class="pf-v6-c-menu-toggle pf-m-plain"
2494
2728
  type="button"
2495
2729
  aria-expanded="false"
2496
- aria-label="Menu toggle"
2730
+ aria-label="Table actions"
2497
2731
  >
2498
2732
  <span class="pf-v6-c-menu-toggle__icon">
2499
2733
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2570,7 +2804,7 @@ wrapperTag: div
2570
2804
  class="pf-v6-c-menu-toggle pf-m-plain"
2571
2805
  type="button"
2572
2806
  aria-expanded="false"
2573
- aria-label="Menu toggle"
2807
+ aria-label="Table actions"
2574
2808
  >
2575
2809
  <span class="pf-v6-c-menu-toggle__icon">
2576
2810
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2646,7 +2880,7 @@ wrapperTag: div
2646
2880
  class="pf-v6-c-menu-toggle pf-m-plain"
2647
2881
  type="button"
2648
2882
  aria-expanded="false"
2649
- aria-label="Menu toggle"
2883
+ aria-label="Table actions"
2650
2884
  >
2651
2885
  <span class="pf-v6-c-menu-toggle__icon">
2652
2886
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2660,17 +2894,14 @@ wrapperTag: div
2660
2894
  </section>
2661
2895
  </li>
2662
2896
 
2663
- <li
2664
- class="pf-v6-c-data-list__item"
2665
- aria-labelledby="data-list-expandable-example-data-list-item-2"
2666
- >
2897
+ <li class="pf-v6-c-data-list__item">
2667
2898
  <div class="pf-v6-c-data-list__item-row">
2668
2899
  <div class="pf-v6-c-data-list__item-control">
2669
2900
  <div class="pf-v6-c-data-list__toggle">
2670
2901
  <button
2671
2902
  class="pf-v6-c-button pf-m-plain"
2672
2903
  type="button"
2673
- aria-labelledby="ex-toggle2 data-list-expandable-example-data-list-item2"
2904
+ aria-labelledby="ex-toggle2 data-list-expandable-example-data-list-item-2"
2674
2905
  id="ex-toggle2"
2675
2906
  aria-label="Toggle details for"
2676
2907
  aria-expanded="false"
@@ -2717,53 +2948,92 @@ wrapperTag: div
2717
2948
  <div class="pf-v6-l-flex pf-m-wrap">
2718
2949
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2719
2950
  <div class="pf-v6-l-flex__item">
2720
- <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>
2721
2959
  </div>
2722
2960
  <div class="pf-v6-l-flex__item">
2723
2961
  <span>5</span>
2962
+ <span class="pf-v6-screen-reader">Branches</span>
2724
2963
  </div>
2725
2964
  </div>
2726
2965
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2727
2966
  <div class="pf-v6-l-flex__item">
2728
- <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>
2729
2972
  </div>
2730
2973
  <div class="pf-v6-l-flex__item">
2731
2974
  <span>9</span>
2975
+ <span class="pf-v6-screen-reader">Code blocks</span>
2732
2976
  </div>
2733
2977
  </div>
2734
2978
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2735
2979
  <div class="pf-v6-l-flex__item">
2736
- <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>
2737
2985
  </div>
2738
2986
  <div class="pf-v6-l-flex__item">
2739
2987
  <span>2</span>
2988
+ <span class="pf-v6-screen-reader">Workspaces</span>
2740
2989
  </div>
2741
2990
  </div>
2742
2991
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2743
2992
  <div class="pf-v6-l-flex__item">
2744
- <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>
2745
3001
  </div>
2746
3002
  <div class="pf-v6-l-flex__item">
2747
3003
  <span>11</span>
3004
+ <span class="pf-v6-screen-reader">Completed</span>
2748
3005
  </div>
2749
3006
  </div>
2750
3007
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2751
3008
  <div class="pf-v6-l-flex__item">
2752
- <i
2753
- class="fas fa-exclamation-triangle"
2754
- aria-hidden="true"
2755
- ></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>
2756
3017
  </div>
2757
3018
  <div class="pf-v6-l-flex__item">
2758
3019
  <span>4</span>
3020
+ <span class="pf-v6-screen-reader">Warnings</span>
2759
3021
  </div>
2760
3022
  </div>
2761
3023
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2762
3024
  <div class="pf-v6-l-flex__item">
2763
- <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>
2764
3033
  </div>
2765
3034
  <div class="pf-v6-l-flex__item">
2766
3035
  <span>1</span>
3036
+ <span class="pf-v6-screen-reader">Errors</span>
2767
3037
  </div>
2768
3038
  </div>
2769
3039
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -2794,17 +3064,14 @@ wrapperTag: div
2794
3064
  </section>
2795
3065
  </li>
2796
3066
 
2797
- <li
2798
- class="pf-v6-c-data-list__item"
2799
- aria-labelledby="data-list-expandable-example-data-list-item-3"
2800
- >
3067
+ <li class="pf-v6-c-data-list__item">
2801
3068
  <div class="pf-v6-c-data-list__item-row">
2802
3069
  <div class="pf-v6-c-data-list__item-control">
2803
3070
  <div class="pf-v6-c-data-list__toggle">
2804
3071
  <button
2805
3072
  class="pf-v6-c-button pf-m-plain"
2806
3073
  type="button"
2807
- aria-labelledby="ex-toggle3 data-list-expandable-example-data-list-item3"
3074
+ aria-labelledby="ex-toggle3 data-list-expandable-example-data-list-item-3"
2808
3075
  id="ex-toggle3"
2809
3076
  aria-label="Toggle details for"
2810
3077
  aria-expanded="false"
@@ -2853,17 +3120,14 @@ wrapperTag: div
2853
3120
  </section>
2854
3121
  </li>
2855
3122
 
2856
- <li
2857
- class="pf-v6-c-data-list__item"
2858
- aria-labelledby="data-list-expandable-example-data-list-item-4"
2859
- >
3123
+ <li class="pf-v6-c-data-list__item">
2860
3124
  <div class="pf-v6-c-data-list__item-row">
2861
3125
  <div class="pf-v6-c-data-list__item-control">
2862
3126
  <div class="pf-v6-c-data-list__toggle">
2863
3127
  <button
2864
3128
  class="pf-v6-c-button pf-m-plain"
2865
3129
  type="button"
2866
- aria-labelledby="ex-toggle4 data-list-expandable-example-data-list-item4"
3130
+ aria-labelledby="ex-toggle4 data-list-expandable-example-data-list-item-4"
2867
3131
  id="ex-toggle4"
2868
3132
  aria-label="Toggle details for"
2869
3133
  aria-expanded="false"
@@ -2913,26 +3177,44 @@ wrapperTag: div
2913
3177
  <div class="pf-v6-l-flex pf-m-wrap">
2914
3178
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2915
3179
  <div class="pf-v6-l-flex__item">
2916
- <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>
2917
3188
  </div>
2918
3189
  <div class="pf-v6-l-flex__item">
2919
3190
  <span>10</span>
3191
+ <span class="pf-v6-screen-reader">Branches</span>
2920
3192
  </div>
2921
3193
  </div>
2922
3194
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2923
3195
  <div class="pf-v6-l-flex__item">
2924
- <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>
2925
3201
  </div>
2926
3202
  <div class="pf-v6-l-flex__item">
2927
3203
  <span>4</span>
3204
+ <span class="pf-v6-screen-reader">Code blocks</span>
2928
3205
  </div>
2929
3206
  </div>
2930
3207
  <div class="pf-v6-l-flex pf-m-space-items-xs">
2931
3208
  <div class="pf-v6-l-flex__item">
2932
- <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>
2933
3214
  </div>
2934
3215
  <div class="pf-v6-l-flex__item">
2935
3216
  <span>5</span>
3217
+ <span class="pf-v6-screen-reader">Workspaces</span>
2936
3218
  </div>
2937
3219
  </div>
2938
3220
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -2963,17 +3245,14 @@ wrapperTag: div
2963
3245
  </section>
2964
3246
  </li>
2965
3247
 
2966
- <li
2967
- class="pf-v6-c-data-list__item"
2968
- aria-labelledby="data-list-expandable-example-data-list-item-5"
2969
- >
3248
+ <li class="pf-v6-c-data-list__item">
2970
3249
  <div class="pf-v6-c-data-list__item-row">
2971
3250
  <div class="pf-v6-c-data-list__item-control">
2972
3251
  <div class="pf-v6-c-data-list__toggle">
2973
3252
  <button
2974
3253
  class="pf-v6-c-button pf-m-plain"
2975
3254
  type="button"
2976
- aria-labelledby="ex-toggle5 data-list-expandable-example-data-list-item5"
3255
+ aria-labelledby="ex-toggle5 data-list-expandable-example-data-list-item-5"
2977
3256
  id="ex-toggle5"
2978
3257
  aria-label="Toggle details for"
2979
3258
  aria-expanded="false"
@@ -3020,53 +3299,92 @@ wrapperTag: div
3020
3299
  <div class="pf-v6-l-flex pf-m-wrap">
3021
3300
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3022
3301
  <div class="pf-v6-l-flex__item">
3023
- <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>
3024
3310
  </div>
3025
3311
  <div class="pf-v6-l-flex__item">
3026
3312
  <span>5</span>
3313
+ <span class="pf-v6-screen-reader">Branches</span>
3027
3314
  </div>
3028
3315
  </div>
3029
3316
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3030
3317
  <div class="pf-v6-l-flex__item">
3031
- <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>
3032
3323
  </div>
3033
3324
  <div class="pf-v6-l-flex__item">
3034
3325
  <span>9</span>
3326
+ <span class="pf-v6-screen-reader">Code blocks</span>
3035
3327
  </div>
3036
3328
  </div>
3037
3329
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3038
3330
  <div class="pf-v6-l-flex__item">
3039
- <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>
3040
3336
  </div>
3041
3337
  <div class="pf-v6-l-flex__item">
3042
3338
  <span>2</span>
3339
+ <span class="pf-v6-screen-reader">Workspaces</span>
3043
3340
  </div>
3044
3341
  </div>
3045
3342
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3046
3343
  <div class="pf-v6-l-flex__item">
3047
- <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>
3048
3352
  </div>
3049
3353
  <div class="pf-v6-l-flex__item">
3050
3354
  <span>11</span>
3355
+ <span class="pf-v6-screen-reader">Completed</span>
3051
3356
  </div>
3052
3357
  </div>
3053
3358
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3054
3359
  <div class="pf-v6-l-flex__item">
3055
- <i
3056
- class="fas fa-exclamation-triangle"
3057
- aria-hidden="true"
3058
- ></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>
3059
3368
  </div>
3060
3369
  <div class="pf-v6-l-flex__item">
3061
3370
  <span>4</span>
3371
+ <span class="pf-v6-screen-reader">Warnings</span>
3062
3372
  </div>
3063
3373
  </div>
3064
3374
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3065
3375
  <div class="pf-v6-l-flex__item">
3066
- <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>
3067
3384
  </div>
3068
3385
  <div class="pf-v6-l-flex__item">
3069
3386
  <span>1</span>
3387
+ <span class="pf-v6-screen-reader">Errors</span>
3070
3388
  </div>
3071
3389
  </div>
3072
3390
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3100,7 +3418,7 @@ wrapperTag: div
3100
3418
  <div class="pf-v6-c-pagination pf-m-bottom">
3101
3419
  <div class="pf-v6-c-pagination__page-menu">
3102
3420
  <button
3103
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3421
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3104
3422
  type="button"
3105
3423
  aria-expanded="false"
3106
3424
  aria-label="Menu toggle"
@@ -3206,12 +3524,31 @@ wrapperTag: div
3206
3524
  <div class="pf-v6-c-masthead__main">
3207
3525
  <span class="pf-v6-c-masthead__toggle">
3208
3526
  <button
3209
- class="pf-v6-c-button pf-m-plain"
3527
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3210
3528
  type="button"
3211
3529
  aria-label="Global navigation"
3212
3530
  >
3213
3531
  <span class="pf-v6-c-button__icon">
3214
- <i class="fas fa-bars" aria-hidden="true"></i>
3532
+ <svg
3533
+ viewBox="0 0 10 10"
3534
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3535
+ width="1em"
3536
+ height="1em"
3537
+ >
3538
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3539
+ <path
3540
+ class="pf-v6-c-button--hamburger-icon--middle"
3541
+ d="M1,5 L9,5"
3542
+ />
3543
+ <path
3544
+ class="pf-v6-c-button--hamburger-icon--arrow"
3545
+ d="M1,5 L1,5 L1,5"
3546
+ />
3547
+ <path
3548
+ class="pf-v6-c-button--hamburger-icon--bottom"
3549
+ d="M9,9 L1,9"
3550
+ />
3551
+ </svg>
3215
3552
  </span>
3216
3553
  </button>
3217
3554
  </span>
@@ -3319,7 +3656,7 @@ wrapperTag: div
3319
3656
  </div>
3320
3657
  <div class="pf-v6-c-toolbar__item">
3321
3658
  <button
3322
- class="pf-v6-c-menu-toggle pf-m-plain"
3659
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3323
3660
  type="button"
3324
3661
  aria-expanded="false"
3325
3662
  aria-label="Settings"
@@ -3570,7 +3907,7 @@ wrapperTag: div
3570
3907
  <div class="pf-v6-c-pagination pf-m-compact">
3571
3908
  <div class="pf-v6-c-pagination__page-menu">
3572
3909
  <button
3573
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3910
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3574
3911
  type="button"
3575
3912
  aria-expanded="false"
3576
3913
  aria-label="Menu toggle"
@@ -3635,10 +3972,7 @@ wrapperTag: div
3635
3972
  aria-label="Simple data list example"
3636
3973
  id="data-list-static-bottom-example-data-list"
3637
3974
  >
3638
- <li
3639
- class="pf-v6-c-data-list__item"
3640
- aria-labelledby="data-list-static-bottom-example-data-list-item-1"
3641
- >
3975
+ <li class="pf-v6-c-data-list__item">
3642
3976
  <div class="pf-v6-c-data-list__item-row">
3643
3977
  <div class="pf-v6-c-data-list__item-content">
3644
3978
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3661,26 +3995,44 @@ wrapperTag: div
3661
3995
  <div class="pf-v6-l-flex pf-m-wrap">
3662
3996
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3663
3997
  <div class="pf-v6-l-flex__item">
3664
- <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>
3665
4006
  </div>
3666
4007
  <div class="pf-v6-l-flex__item">
3667
4008
  <span>10</span>
4009
+ <span class="pf-v6-screen-reader">Branches</span>
3668
4010
  </div>
3669
4011
  </div>
3670
4012
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3671
4013
  <div class="pf-v6-l-flex__item">
3672
- <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>
3673
4019
  </div>
3674
4020
  <div class="pf-v6-l-flex__item">
3675
4021
  <span>4</span>
4022
+ <span class="pf-v6-screen-reader">Code blocks</span>
3676
4023
  </div>
3677
4024
  </div>
3678
4025
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3679
4026
  <div class="pf-v6-l-flex__item">
3680
- <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>
3681
4032
  </div>
3682
4033
  <div class="pf-v6-l-flex__item">
3683
4034
  <span>5</span>
4035
+ <span class="pf-v6-screen-reader">Workspaces</span>
3684
4036
  </div>
3685
4037
  </div>
3686
4038
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3701,10 +4053,7 @@ wrapperTag: div
3701
4053
  </div>
3702
4054
  </li>
3703
4055
 
3704
- <li
3705
- class="pf-v6-c-data-list__item"
3706
- aria-labelledby="data-list-static-bottom-example-data-list-item-2"
3707
- >
4056
+ <li class="pf-v6-c-data-list__item">
3708
4057
  <div class="pf-v6-c-data-list__item-row">
3709
4058
  <div class="pf-v6-c-data-list__item-content">
3710
4059
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3724,53 +4073,92 @@ wrapperTag: div
3724
4073
  <div class="pf-v6-l-flex pf-m-wrap">
3725
4074
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3726
4075
  <div class="pf-v6-l-flex__item">
3727
- <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>
3728
4084
  </div>
3729
4085
  <div class="pf-v6-l-flex__item">
3730
4086
  <span>5</span>
4087
+ <span class="pf-v6-screen-reader">Branches</span>
3731
4088
  </div>
3732
4089
  </div>
3733
4090
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3734
4091
  <div class="pf-v6-l-flex__item">
3735
- <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>
3736
4097
  </div>
3737
4098
  <div class="pf-v6-l-flex__item">
3738
4099
  <span>9</span>
4100
+ <span class="pf-v6-screen-reader">Code blocks</span>
3739
4101
  </div>
3740
4102
  </div>
3741
4103
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3742
4104
  <div class="pf-v6-l-flex__item">
3743
- <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>
3744
4110
  </div>
3745
4111
  <div class="pf-v6-l-flex__item">
3746
4112
  <span>2</span>
4113
+ <span class="pf-v6-screen-reader">Workspaces</span>
3747
4114
  </div>
3748
4115
  </div>
3749
4116
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3750
4117
  <div class="pf-v6-l-flex__item">
3751
- <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>
3752
4126
  </div>
3753
4127
  <div class="pf-v6-l-flex__item">
3754
4128
  <span>11</span>
4129
+ <span class="pf-v6-screen-reader">Completed</span>
3755
4130
  </div>
3756
4131
  </div>
3757
4132
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3758
4133
  <div class="pf-v6-l-flex__item">
3759
- <i
3760
- class="fas fa-exclamation-triangle"
3761
- aria-hidden="true"
3762
- ></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>
3763
4142
  </div>
3764
4143
  <div class="pf-v6-l-flex__item">
3765
4144
  <span>4</span>
4145
+ <span class="pf-v6-screen-reader">Warnings</span>
3766
4146
  </div>
3767
4147
  </div>
3768
4148
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3769
4149
  <div class="pf-v6-l-flex__item">
3770
- <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>
3771
4158
  </div>
3772
4159
  <div class="pf-v6-l-flex__item">
3773
4160
  <span>1</span>
4161
+ <span class="pf-v6-screen-reader">Errors</span>
3774
4162
  </div>
3775
4163
  </div>
3776
4164
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3791,10 +4179,7 @@ wrapperTag: div
3791
4179
  </div>
3792
4180
  </li>
3793
4181
 
3794
- <li
3795
- class="pf-v6-c-data-list__item"
3796
- aria-labelledby="data-list-static-bottom-example-data-list-item-3"
3797
- >
4182
+ <li class="pf-v6-c-data-list__item">
3798
4183
  <div class="pf-v6-c-data-list__item-row">
3799
4184
  <div class="pf-v6-c-data-list__item-content">
3800
4185
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3816,10 +4201,7 @@ wrapperTag: div
3816
4201
  </div>
3817
4202
  </li>
3818
4203
 
3819
- <li
3820
- class="pf-v6-c-data-list__item"
3821
- aria-labelledby="data-list-static-bottom-example-data-list-item-4"
3822
- >
4204
+ <li class="pf-v6-c-data-list__item">
3823
4205
  <div class="pf-v6-c-data-list__item-row">
3824
4206
  <div class="pf-v6-c-data-list__item-content">
3825
4207
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3842,26 +4224,44 @@ wrapperTag: div
3842
4224
  <div class="pf-v6-l-flex pf-m-wrap">
3843
4225
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3844
4226
  <div class="pf-v6-l-flex__item">
3845
- <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>
3846
4235
  </div>
3847
4236
  <div class="pf-v6-l-flex__item">
3848
4237
  <span>10</span>
4238
+ <span class="pf-v6-screen-reader">Branches</span>
3849
4239
  </div>
3850
4240
  </div>
3851
4241
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3852
4242
  <div class="pf-v6-l-flex__item">
3853
- <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>
3854
4248
  </div>
3855
4249
  <div class="pf-v6-l-flex__item">
3856
4250
  <span>4</span>
4251
+ <span class="pf-v6-screen-reader">Code blocks</span>
3857
4252
  </div>
3858
4253
  </div>
3859
4254
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3860
4255
  <div class="pf-v6-l-flex__item">
3861
- <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>
3862
4261
  </div>
3863
4262
  <div class="pf-v6-l-flex__item">
3864
4263
  <span>5</span>
4264
+ <span class="pf-v6-screen-reader">Workspaces</span>
3865
4265
  </div>
3866
4266
  </div>
3867
4267
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3882,10 +4282,7 @@ wrapperTag: div
3882
4282
  </div>
3883
4283
  </li>
3884
4284
 
3885
- <li
3886
- class="pf-v6-c-data-list__item"
3887
- aria-labelledby="data-list-static-bottom-example-data-list-item-5"
3888
- >
4285
+ <li class="pf-v6-c-data-list__item">
3889
4286
  <div class="pf-v6-c-data-list__item-row">
3890
4287
  <div class="pf-v6-c-data-list__item-content">
3891
4288
  <div class="pf-v6-c-data-list__cell pf-m-align-left">
@@ -3905,53 +4302,92 @@ wrapperTag: div
3905
4302
  <div class="pf-v6-l-flex pf-m-wrap">
3906
4303
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3907
4304
  <div class="pf-v6-l-flex__item">
3908
- <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>
3909
4313
  </div>
3910
4314
  <div class="pf-v6-l-flex__item">
3911
4315
  <span>5</span>
4316
+ <span class="pf-v6-screen-reader">Branches</span>
3912
4317
  </div>
3913
4318
  </div>
3914
4319
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3915
4320
  <div class="pf-v6-l-flex__item">
3916
- <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>
3917
4326
  </div>
3918
4327
  <div class="pf-v6-l-flex__item">
3919
4328
  <span>9</span>
4329
+ <span class="pf-v6-screen-reader">Code blocks</span>
3920
4330
  </div>
3921
4331
  </div>
3922
4332
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3923
4333
  <div class="pf-v6-l-flex__item">
3924
- <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>
3925
4339
  </div>
3926
4340
  <div class="pf-v6-l-flex__item">
3927
4341
  <span>2</span>
4342
+ <span class="pf-v6-screen-reader">Workspaces</span>
3928
4343
  </div>
3929
4344
  </div>
3930
4345
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3931
4346
  <div class="pf-v6-l-flex__item">
3932
- <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>
3933
4355
  </div>
3934
4356
  <div class="pf-v6-l-flex__item">
3935
4357
  <span>11</span>
4358
+ <span class="pf-v6-screen-reader">Completed</span>
3936
4359
  </div>
3937
4360
  </div>
3938
4361
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3939
4362
  <div class="pf-v6-l-flex__item">
3940
- <i
3941
- class="fas fa-exclamation-triangle"
3942
- aria-hidden="true"
3943
- ></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>
3944
4371
  </div>
3945
4372
  <div class="pf-v6-l-flex__item">
3946
4373
  <span>4</span>
4374
+ <span class="pf-v6-screen-reader">Warnings</span>
3947
4375
  </div>
3948
4376
  </div>
3949
4377
  <div class="pf-v6-l-flex pf-m-space-items-xs">
3950
4378
  <div class="pf-v6-l-flex__item">
3951
- <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>
3952
4387
  </div>
3953
4388
  <div class="pf-v6-l-flex__item">
3954
4389
  <span>1</span>
4390
+ <span class="pf-v6-screen-reader">Errors</span>
3955
4391
  </div>
3956
4392
  </div>
3957
4393
  <div class="pf-v6-l-flex__item">Updated 2 days ago</div>
@@ -3975,7 +4411,7 @@ wrapperTag: div
3975
4411
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
3976
4412
  <div class="pf-v6-c-pagination__page-menu">
3977
4413
  <button
3978
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
4414
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3979
4415
  type="button"
3980
4416
  aria-expanded="false"
3981
4417
  aria-label="Menu toggle"