@patternfly/patternfly 6.6.0-prerelease.3 → 6.6.0-prerelease.30

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 (158) hide show
  1. package/assets/fonts/RedHatDisplay/RedHatDisplayVF-Italic.woff2 +0 -0
  2. package/assets/fonts/RedHatDisplay/RedHatDisplayVF.woff2 +0 -0
  3. package/assets/fonts/RedHatMono/RedHatMonoVF-Italic.woff2 +0 -0
  4. package/assets/fonts/RedHatMono/RedHatMonoVF.woff2 +0 -0
  5. package/assets/fonts/RedHatText/RedHatTextVF-Italic.woff2 +0 -0
  6. package/assets/fonts/RedHatText/RedHatTextVF.woff2 +0 -0
  7. package/assets/images/img_avatar-rhds.svg +22 -0
  8. package/assets/images/pf-logo-avatar.jpg +0 -0
  9. package/base/patternfly-fonts.css +4 -4
  10. package/base/patternfly-fonts.scss +4 -4
  11. package/base/patternfly-variables.css +8 -6
  12. package/base/tokens/tokens-charts-dark.scss +1 -1
  13. package/base/tokens/tokens-charts-highcontrast-dark.scss +1 -1
  14. package/base/tokens/tokens-charts-highcontrast.scss +1 -1
  15. package/base/tokens/tokens-charts.scss +1 -1
  16. package/base/tokens/tokens-dark.scss +1 -1
  17. package/base/tokens/tokens-default.scss +4 -4
  18. package/base/tokens/tokens-felt-dark.scss +1 -1
  19. package/base/tokens/tokens-felt-glass-dark.scss +1 -1
  20. package/base/tokens/tokens-felt-glass.scss +3 -2
  21. package/base/tokens/tokens-felt-highcontrast-dark.scss +1 -1
  22. package/base/tokens/tokens-felt-highcontrast.scss +1 -1
  23. package/base/tokens/tokens-felt.scss +1 -1
  24. package/base/tokens/tokens-glass-dark.scss +1 -1
  25. package/base/tokens/tokens-glass.scss +3 -2
  26. package/base/tokens/tokens-highcontrast-dark.scss +1 -1
  27. package/base/tokens/tokens-highcontrast.scss +4 -4
  28. package/base/tokens/tokens-palette.scss +1 -1
  29. package/base/tokens/tokens-redhat-highcontrast.scss +3 -3
  30. package/components/AboutModalBox/about-modal-box.css +1 -1
  31. package/components/AboutModalBox/about-modal-box.scss +1 -1
  32. package/components/Accordion/accordion.css +3 -3
  33. package/components/Accordion/accordion.scss +3 -3
  34. package/components/Alert/alert.css +8 -7
  35. package/components/Alert/alert.scss +8 -7
  36. package/components/Avatar/avatar.css +144 -0
  37. package/components/Avatar/avatar.scss +161 -0
  38. package/components/Banner/banner.css +7 -0
  39. package/components/Banner/banner.scss +7 -0
  40. package/components/Breadcrumb/breadcrumb.css +3 -3
  41. package/components/Breadcrumb/breadcrumb.scss +3 -3
  42. package/components/Button/button.css +20 -4
  43. package/components/Button/button.scss +24 -5
  44. package/components/Card/card.css +4 -4
  45. package/components/Card/card.scss +4 -4
  46. package/components/ClipboardCopy/clipboard-copy.css +1 -1
  47. package/components/ClipboardCopy/clipboard-copy.scss +1 -1
  48. package/components/DataList/data-list.css +5 -5
  49. package/components/DataList/data-list.scss +5 -5
  50. package/components/DragDrop/drag-drop.css +4 -0
  51. package/components/DragDrop/drag-drop.scss +4 -0
  52. package/components/DualListSelector/dual-list-selector.css +1 -1
  53. package/components/DualListSelector/dual-list-selector.scss +1 -1
  54. package/components/Form/form.scss +1 -0
  55. package/components/FormControl/form-control.css +12 -2
  56. package/components/FormControl/form-control.scss +14 -2
  57. package/components/Hint/hint.css +2 -2
  58. package/components/Hint/hint.scss +2 -2
  59. package/components/Label/label.css +9 -3
  60. package/components/Label/label.scss +9 -3
  61. package/components/Masthead/masthead.css +1 -1
  62. package/components/Masthead/masthead.scss +1 -1
  63. package/components/Menu/menu.css +2 -2
  64. package/components/Menu/menu.scss +3 -3
  65. package/components/MenuToggle/menu-toggle.css +3 -0
  66. package/components/MenuToggle/menu-toggle.scss +4 -1
  67. package/components/ModalBox/modal-box.css +4 -4
  68. package/components/ModalBox/modal-box.scss +5 -5
  69. package/components/Nav/nav.css +2 -2
  70. package/components/Nav/nav.scss +2 -2
  71. package/components/NotificationDrawer/notification-drawer.css +3 -3
  72. package/components/NotificationDrawer/notification-drawer.scss +3 -3
  73. package/components/Page/page.css +25 -22
  74. package/components/Page/page.scss +28 -28
  75. package/components/Pagination/pagination.css +12 -7
  76. package/components/Pagination/pagination.scss +15 -12
  77. package/components/Panel/panel.css +1 -1
  78. package/components/Panel/panel.scss +2 -2
  79. package/components/Popover/popover.css +1 -1
  80. package/components/Popover/popover.scss +1 -1
  81. package/components/Progress/progress.css +2 -2
  82. package/components/Progress/progress.scss +2 -2
  83. package/components/Sidebar/sidebar.css +4 -7
  84. package/components/Sidebar/sidebar.scss +9 -9
  85. package/components/Table/table-grid.css +25 -13
  86. package/components/Table/table-grid.scss +10 -5
  87. package/components/Table/table-tree-view.css +3 -0
  88. package/components/Table/table-tree-view.scss +2 -0
  89. package/components/Table/table.css +55 -21
  90. package/components/Table/table.scss +82 -34
  91. package/components/Tabs/tabs.css +19 -5
  92. package/components/Tabs/tabs.scss +22 -5
  93. package/components/Title/title.css +1 -1
  94. package/components/Title/title.scss +1 -1
  95. package/components/Tooltip/tooltip.css +1 -1
  96. package/components/Tooltip/tooltip.scss +1 -1
  97. package/components/TreeView/tree-view.css +7 -7
  98. package/components/TreeView/tree-view.scss +7 -7
  99. package/components/Wizard/wizard.css +4 -4
  100. package/components/Wizard/wizard.scss +4 -4
  101. package/components/_index.css +399 -140
  102. package/docs/components/Avatar/examples/Avatar.css +6 -0
  103. package/docs/components/Avatar/examples/Avatar.md +414 -40
  104. package/docs/components/Button/examples/Button.md +2 -2
  105. package/docs/components/CodeEditor/examples/CodeEditor.md +131 -47
  106. package/docs/components/DataList/examples/DataList.md +143 -11
  107. package/docs/components/DatePicker/examples/DatePicker.md +26 -2
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +115 -55
  109. package/docs/components/Drawer/examples/Drawer.md +1 -1
  110. package/docs/components/DualListSelector/examples/DualListSelector.md +355 -139
  111. package/docs/components/EmptyState/examples/EmptyState.md +12 -12
  112. package/docs/components/FileUpload/examples/FileUpload.md +26 -2
  113. package/docs/components/Form/examples/Form.md +140 -16
  114. package/docs/components/FormControl/examples/FormControl.md +260 -20
  115. package/docs/components/HelperText/examples/HelperText.md +139 -11
  116. package/docs/components/Icon/examples/Icon.md +403 -31
  117. package/docs/components/InlineEdit/examples/InlineEdit.md +13 -1
  118. package/docs/components/InputGroup/examples/InputGroup.md +20 -8
  119. package/docs/components/Label/examples/Label.md +4029 -765
  120. package/docs/components/List/examples/List.md +78 -6
  121. package/docs/components/Login/examples/Login.md +104 -8
  122. package/docs/components/Menu/examples/Menu.md +221 -17
  123. package/docs/components/MenuToggle/examples/MenuToggle.md +54 -15
  124. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +247 -19
  125. package/docs/components/NumberInput/examples/NumberInput.md +301 -25
  126. package/docs/components/Pagination/examples/Pagination.md +111 -273
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +169 -13
  128. package/docs/components/Sidebar/examples/Sidebar.md +3 -1
  129. package/docs/components/Switch/examples/Switch.md +52 -4
  130. package/docs/components/Table/examples/Table.css +6 -0
  131. package/docs/components/Table/examples/Table.md +1322 -171
  132. package/docs/components/Tabs/examples/Tabs.md +18 -998
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +355 -115
  134. package/docs/components/Toolbar/examples/Toolbar.md +133 -25
  135. package/docs/components/TreeView/examples/TreeView.md +286 -118
  136. package/docs/components/Wizard/examples/Wizard.md +325 -25
  137. package/docs/demos/Alert/examples/Alert.md +181 -40
  138. package/docs/demos/Button/examples/Button.md +57 -45
  139. package/docs/demos/Card/examples/Card.md +280 -34
  140. package/docs/demos/CardView/examples/CardView.md +12 -12
  141. package/docs/demos/Compass/examples/Compass.md +91 -439
  142. package/docs/demos/Dashboard/examples/Dashboard.md +92 -41
  143. package/docs/demos/DataList/examples/DataList.md +74 -50
  144. package/docs/demos/Form/examples/BasicForms.md +112 -36
  145. package/docs/demos/HelperText/examples/HelperText.md +104 -8
  146. package/docs/demos/Masthead/examples/Masthead.md +52 -4
  147. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +176 -14
  148. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +2570 -4968
  149. package/docs/demos/Table/examples/Table.md +407 -179
  150. package/docs/demos/Toolbar/examples/Toolbar.md +139 -46
  151. package/docs/demos/Wizard/examples/Wizard.md +117 -9
  152. package/package.json +7 -7
  153. package/patternfly-base-no-globals.css +12 -10
  154. package/patternfly-base.css +12 -10
  155. package/patternfly-no-globals.css +411 -150
  156. package/patternfly.css +411 -150
  157. package/patternfly.min.css +1 -1
  158. package/patternfly.min.css.map +1 -1
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -26,7 +26,19 @@ subsection: forms
26
26
  </select>
27
27
  <span class="pf-v6-c-form-control__utilities">
28
28
  <span class="pf-v6-c-form-control__toggle-icon">
29
- <i class="fas fa-caret-down" aria-hidden="true"></i>
29
+ <svg
30
+ class="pf-v6-svg"
31
+ fill="currentColor"
32
+ viewBox="0 0 32 32"
33
+ aria-hidden="true"
34
+ role="img"
35
+ width="1em"
36
+ height="1em"
37
+ >
38
+ <path
39
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
40
+ />
41
+ </svg>
30
42
  </span>
31
43
  </span>
32
44
  </span>
@@ -223,13 +235,19 @@ subsection: forms
223
235
  </div>
224
236
  <div class="pf-v6-c-form__group pf-m-action">
225
237
  <div class="pf-v6-c-form__group-control">
226
- <div class="pf-v6-c-form__actions">
227
- <button class="pf-v6-c-button pf-m-primary" type="submit">
228
- <span class="pf-v6-c-button__text">Submit</span>
229
- </button>
230
- <button class="pf-v6-c-button pf-m-link" type="button">
231
- <span class="pf-v6-c-button__text">Cancel</span>
232
- </button>
238
+ <div class="pf-v6-c-action-list">
239
+ <div class="pf-v6-c-action-list__group">
240
+ <div class="pf-v6-c-action-list__item">
241
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
242
+ <span class="pf-v6-c-button__text">Submit</span>
243
+ </button>
244
+ </div>
245
+ <div class="pf-v6-c-action-list__item">
246
+ <button class="pf-v6-c-button pf-m-link" type="button">
247
+ <span class="pf-v6-c-button__text">Cancel</span>
248
+ </button>
249
+ </div>
250
+ </div>
233
251
  </div>
234
252
  </div>
235
253
  </div>
@@ -377,13 +395,19 @@ subsection: forms
377
395
  </div>
378
396
  <div class="pf-v6-c-form__group pf-m-action">
379
397
  <div class="pf-v6-c-form__group-control">
380
- <div class="pf-v6-c-form__actions">
381
- <button class="pf-v6-c-button pf-m-primary" type="submit">
382
- <span class="pf-v6-c-button__text">Submit</span>
383
- </button>
384
- <button class="pf-v6-c-button pf-m-link" type="button">
385
- <span class="pf-v6-c-button__text">Cancel</span>
386
- </button>
398
+ <div class="pf-v6-c-action-list">
399
+ <div class="pf-v6-c-action-list__group">
400
+ <div class="pf-v6-c-action-list__item">
401
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
402
+ <span class="pf-v6-c-button__text">Submit</span>
403
+ </button>
404
+ </div>
405
+ <div class="pf-v6-c-action-list__item">
406
+ <button class="pf-v6-c-button pf-m-link" type="button">
407
+ <span class="pf-v6-c-button__text">Cancel</span>
408
+ </button>
409
+ </div>
410
+ </div>
387
411
  </div>
388
412
  </div>
389
413
  </div>
@@ -552,7 +576,19 @@ subsection: forms
552
576
  </select>
553
577
  <span class="pf-v6-c-form-control__utilities">
554
578
  <span class="pf-v6-c-form-control__toggle-icon">
555
- <i class="fas fa-caret-down" aria-hidden="true"></i>
579
+ <svg
580
+ class="pf-v6-svg"
581
+ fill="currentColor"
582
+ viewBox="0 0 32 32"
583
+ aria-hidden="true"
584
+ role="img"
585
+ width="1em"
586
+ height="1em"
587
+ >
588
+ <path
589
+ d="M29.707 11.707 17.061 24.353c-.292.292-.677.438-1.061.438s-.769-.146-1.061-.438L2.293 11.707A1 1 0 0 1 3 10h26a1 1 0 0 1 .707 1.707Z"
590
+ />
591
+ </svg>
556
592
  </span>
557
593
  </span>
558
594
  </span>
@@ -561,13 +597,19 @@ subsection: forms
561
597
  </div>
562
598
  <div class="pf-v6-c-form__group pf-m-action">
563
599
  <div class="pf-v6-c-form__group-control">
564
- <div class="pf-v6-c-form__actions">
565
- <button class="pf-v6-c-button pf-m-primary" type="submit">
566
- <span class="pf-v6-c-button__text">Submit</span>
567
- </button>
568
- <button class="pf-v6-c-button pf-m-link" type="button">
569
- <span class="pf-v6-c-button__text">Cancel</span>
570
- </button>
600
+ <div class="pf-v6-c-action-list">
601
+ <div class="pf-v6-c-action-list__group">
602
+ <div class="pf-v6-c-action-list__item">
603
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
604
+ <span class="pf-v6-c-button__text">Submit</span>
605
+ </button>
606
+ </div>
607
+ <div class="pf-v6-c-action-list__item">
608
+ <button class="pf-v6-c-button pf-m-link" type="button">
609
+ <span class="pf-v6-c-button__text">Cancel</span>
610
+ </button>
611
+ </div>
612
+ </div>
571
613
  </div>
572
614
  </div>
573
615
  </div>
@@ -1071,7 +1113,19 @@ subsection: forms
1071
1113
  <span class="pf-v6-c-label">
1072
1114
  <span class="pf-v6-c-label__content">
1073
1115
  <span class="pf-v6-c-label__icon">
1074
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1116
+ <svg
1117
+ class="pf-v6-svg"
1118
+ fill="currentColor"
1119
+ viewBox="0 0 512 512"
1120
+ aria-hidden="true"
1121
+ role="img"
1122
+ width="1em"
1123
+ height="1em"
1124
+ >
1125
+ <path
1126
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
1127
+ />
1128
+ </svg>
1075
1129
  </span>
1076
1130
  <span
1077
1131
  class="pf-v6-c-label__text"
@@ -1081,10 +1135,10 @@ subsection: forms
1081
1135
  <span class="pf-v6-c-label__actions">
1082
1136
  <button
1083
1137
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1084
- type="button"
1085
1138
  id="-label-1-button"
1086
- aria-label="Remove"
1139
+ type="button"
1087
1140
  aria-labelledby="-label-1-button -label-1-text"
1141
+ aria-label="Remove"
1088
1142
  >
1089
1143
  <span class="pf-v6-c-button__icon">
1090
1144
  <svg
@@ -1109,17 +1163,29 @@ subsection: forms
1109
1163
  <span class="pf-v6-c-label">
1110
1164
  <span class="pf-v6-c-label__content">
1111
1165
  <span class="pf-v6-c-label__icon">
1112
- <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i>
1166
+ <svg
1167
+ class="pf-v6-svg"
1168
+ fill="currentColor"
1169
+ viewBox="0 0 512 512"
1170
+ aria-hidden="true"
1171
+ role="img"
1172
+ width="1em"
1173
+ height="1em"
1174
+ >
1175
+ <path
1176
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
1177
+ />
1178
+ </svg>
1113
1179
  </span>
1114
1180
  <span class="pf-v6-c-label__text" id="-label-2-text">new</span>
1115
1181
  </span>
1116
1182
  <span class="pf-v6-c-label__actions">
1117
1183
  <button
1118
1184
  class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1119
- type="button"
1120
1185
  id="-label-2-button"
1121
- aria-label="Remove"
1186
+ type="button"
1122
1187
  aria-labelledby="-label-2-button -label-2-text"
1188
+ aria-label="Remove"
1123
1189
  >
1124
1190
  <span class="pf-v6-c-button__icon">
1125
1191
  <svg
@@ -2019,13 +2085,23 @@ subsection: forms
2019
2085
  </div>
2020
2086
  </div>
2021
2087
 
2022
- <div class="pf-v6-c-form__actions">
2023
- <button class="pf-v6-c-button pf-m-primary" type="submit">
2024
- <span class="pf-v6-c-button__text">Save</span>
2025
- </button>
2026
- <button class="pf-v6-c-button pf-m-secondary" type="reset">
2027
- <span class="pf-v6-c-button__text">Cancel</span>
2028
- </button>
2088
+ <div class="pf-v6-c-form__group pf-m-action">
2089
+ <div class="pf-v6-c-form__group-control">
2090
+ <div class="pf-v6-c-action-list">
2091
+ <div class="pf-v6-c-action-list__group">
2092
+ <div class="pf-v6-c-action-list__item">
2093
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
2094
+ <span class="pf-v6-c-button__text">Save</span>
2095
+ </button>
2096
+ </div>
2097
+ <div class="pf-v6-c-action-list__item">
2098
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
2099
+ <span class="pf-v6-c-button__text">Cancel</span>
2100
+ </button>
2101
+ </div>
2102
+ </div>
2103
+ </div>
2104
+ </div>
2029
2105
  </div>
2030
2106
  </form>
2031
2107
 
package/docs/demos/HelperText/examples/HelperText.md CHANGED
@@ -51,7 +51,19 @@ section: components
51
51
  />
52
52
  <span class="pf-v6-c-form-control__utilities">
53
53
  <span class="pf-v6-c-form-control__icon pf-m-status">
54
- <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
54
+ <svg
55
+ class="pf-v6-svg"
56
+ fill="currentColor"
57
+ viewBox="0 0 32 32"
58
+ aria-hidden="true"
59
+ role="img"
60
+ width="1em"
61
+ height="1em"
62
+ >
63
+ <path
64
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
65
+ />
66
+ </svg>
55
67
  </span>
56
68
  </span>
57
69
  </span>
@@ -64,7 +76,19 @@ section: components
64
76
  <div class="pf-v6-c-helper-text">
65
77
  <div class="pf-v6-c-helper-text__item pf-m-warning">
66
78
  <span class="pf-v6-c-helper-text__item-icon">
67
- <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
79
+ <svg
80
+ class="pf-v6-svg"
81
+ fill="currentColor"
82
+ viewBox="0 0 32 32"
83
+ aria-hidden="true"
84
+ role="img"
85
+ width="1em"
86
+ height="1em"
87
+ >
88
+ <path
89
+ d="m31.874 28.514-15.011-27a1.001 1.001 0 0 0-1.748 0l-15.011 27A1 1 0 0 0 .978 30H31a1 1 0 0 0 .874-1.486ZM14.5 12a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 26.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 26.001Z"
90
+ />
91
+ </svg>
68
92
  </span>
69
93
  <span class="pf-v6-c-helper-text__item-text">
70
94
  <span class="pf-v6-screen-reader">Warning:</span>
@@ -91,7 +115,19 @@ section: components
91
115
  />
92
116
  <span class="pf-v6-c-form-control__utilities">
93
117
  <span class="pf-v6-c-form-control__icon pf-m-status">
94
- <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
118
+ <svg
119
+ class="pf-v6-svg"
120
+ fill="currentColor"
121
+ viewBox="0 0 32 32"
122
+ aria-hidden="true"
123
+ role="img"
124
+ width="1em"
125
+ height="1em"
126
+ >
127
+ <path
128
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
129
+ />
130
+ </svg>
95
131
  </span>
96
132
  </span>
97
133
  </span>
@@ -104,7 +140,19 @@ section: components
104
140
  <ul class="pf-v6-c-helper-text" role="list">
105
141
  <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
106
142
  <span class="pf-v6-c-helper-text__item-icon">
107
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
143
+ <svg
144
+ class="pf-v6-svg"
145
+ fill="currentColor"
146
+ viewBox="0 0 32 32"
147
+ aria-hidden="true"
148
+ role="img"
149
+ width="1em"
150
+ height="1em"
151
+ >
152
+ <path
153
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
154
+ />
155
+ </svg>
108
156
  </span>
109
157
  <span class="pf-v6-c-helper-text__item-text">
110
158
  <span class="pf-v6-screen-reader">Success:</span>
@@ -113,7 +161,19 @@ section: components
113
161
  </li>
114
162
  <li class="pf-v6-c-helper-text__item pf-m-error pf-m-dynamic">
115
163
  <span class="pf-v6-c-helper-text__item-icon">
116
- <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
164
+ <svg
165
+ class="pf-v6-svg"
166
+ fill="currentColor"
167
+ viewBox="0 0 32 32"
168
+ aria-hidden="true"
169
+ role="img"
170
+ width="1em"
171
+ height="1em"
172
+ >
173
+ <path
174
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm-1.5 8a1.5 1.5 0 1 1 3 0v7a1.5 1.5 0 1 1-3 0V9ZM16 25.001a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 25.001Z"
175
+ />
176
+ </svg>
117
177
  </span>
118
178
  <span class="pf-v6-c-helper-text__item-text">
119
179
  <span class="pf-v6-screen-reader">Error:</span>
@@ -122,7 +182,19 @@ section: components
122
182
  </li>
123
183
  <li class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
124
184
  <span class="pf-v6-c-helper-text__item-icon">
125
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
185
+ <svg
186
+ class="pf-v6-svg"
187
+ fill="currentColor"
188
+ viewBox="0 0 32 32"
189
+ aria-hidden="true"
190
+ role="img"
191
+ width="1em"
192
+ height="1em"
193
+ >
194
+ <path
195
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
196
+ />
197
+ </svg>
126
198
  </span>
127
199
  <span class="pf-v6-c-helper-text__item-text">
128
200
  <span class="pf-v6-screen-reader">Success:</span>
@@ -148,7 +220,19 @@ section: components
148
220
  />
149
221
  <span class="pf-v6-c-form-control__utilities">
150
222
  <span class="pf-v6-c-form-control__icon pf-m-status">
151
- <i class="fas fa-check-circle" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ fill="currentColor"
226
+ viewBox="0 0 32 32"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
234
+ />
235
+ </svg>
152
236
  </span>
153
237
  </span>
154
238
  </span>
@@ -161,7 +245,19 @@ section: components
161
245
  <div class="pf-v6-c-helper-text">
162
246
  <div class="pf-v6-c-helper-text__item pf-m-success pf-m-dynamic">
163
247
  <span class="pf-v6-c-helper-text__item-icon">
164
- <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
248
+ <svg
249
+ class="pf-v6-svg"
250
+ fill="currentColor"
251
+ viewBox="0 0 32 32"
252
+ aria-hidden="true"
253
+ role="img"
254
+ width="1em"
255
+ height="1em"
256
+ >
257
+ <path
258
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
259
+ />
260
+ </svg>
165
261
  </span>
166
262
  <span class="pf-v6-c-helper-text__item-text">
167
263
  <span class="pf-v6-screen-reader">Success:</span>
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -940,7 +940,19 @@ wrapperTag: div
940
940
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
941
941
  <span class="pf-v6-c-text-input-group__text">
942
942
  <span class="pf-v6-c-text-input-group__icon">
943
- <i class="fas fa-fw fa-search"></i>
943
+ <svg
944
+ class="pf-v6-svg"
945
+ fill="currentColor"
946
+ viewBox="0 0 32 32"
947
+ aria-hidden="true"
948
+ role="img"
949
+ width="1em"
950
+ height="1em"
951
+ >
952
+ <path
953
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
954
+ />
955
+ </svg>
944
956
  </span>
945
957
  <input
946
958
  class="pf-v6-c-text-input-group__text-input"
@@ -1380,7 +1392,19 @@ wrapperTag: div
1380
1392
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
1381
1393
  <span class="pf-v6-c-text-input-group__text">
1382
1394
  <span class="pf-v6-c-text-input-group__icon">
1383
- <i class="fas fa-fw fa-search"></i>
1395
+ <svg
1396
+ class="pf-v6-svg"
1397
+ fill="currentColor"
1398
+ viewBox="0 0 32 32"
1399
+ aria-hidden="true"
1400
+ role="img"
1401
+ width="1em"
1402
+ height="1em"
1403
+ >
1404
+ <path
1405
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
1406
+ />
1407
+ </svg>
1384
1408
  </span>
1385
1409
  <input
1386
1410
  class="pf-v6-c-text-input-group__text-input"
@@ -2088,7 +2112,19 @@ wrapperTag: div
2088
2112
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
2089
2113
  <span class="pf-v6-c-text-input-group__text">
2090
2114
  <span class="pf-v6-c-text-input-group__icon">
2091
- <i class="fas fa-fw fa-search"></i>
2115
+ <svg
2116
+ class="pf-v6-svg"
2117
+ fill="currentColor"
2118
+ viewBox="0 0 32 32"
2119
+ aria-hidden="true"
2120
+ role="img"
2121
+ width="1em"
2122
+ height="1em"
2123
+ >
2124
+ <path
2125
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
2126
+ />
2127
+ </svg>
2092
2128
  </span>
2093
2129
  <input
2094
2130
  class="pf-v6-c-text-input-group__text-input"
@@ -3298,7 +3334,19 @@ wrapperTag: div
3298
3334
  <div class="pf-v6-c-text-input-group__main pf-m-icon">
3299
3335
  <span class="pf-v6-c-text-input-group__text">
3300
3336
  <span class="pf-v6-c-text-input-group__icon">
3301
- <i class="fas fa-fw fa-search"></i>
3337
+ <svg
3338
+ class="pf-v6-svg"
3339
+ fill="currentColor"
3340
+ viewBox="0 0 32 32"
3341
+ aria-hidden="true"
3342
+ role="img"
3343
+ width="1em"
3344
+ height="1em"
3345
+ >
3346
+ <path
3347
+ d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
3348
+ />
3349
+ </svg>
3302
3350
  </span>
3303
3351
  <input
3304
3352
  class="pf-v6-c-text-input-group__text-input"