@patternfly/patternfly 6.5.0-prerelease.62 → 6.5.0-prerelease.64

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 (55) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +3 -3
  3. package/components/ClipboardCopy/clipboard-copy.css +7 -1
  4. package/components/ClipboardCopy/clipboard-copy.scss +10 -1
  5. package/components/Menu/menu.css +26 -19
  6. package/components/Menu/menu.scss +26 -19
  7. package/components/MenuToggle/menu-toggle.css +9 -5
  8. package/components/MenuToggle/menu-toggle.scss +12 -5
  9. package/components/_index.css +44 -27
  10. package/docs/components/Breadcrumb/examples/Breadcrumb.md +13 -1
  11. package/docs/components/CalendarMonth/examples/CalendarMonth.md +52 -4
  12. package/docs/components/Card/examples/Card.md +130 -10
  13. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +39 -38
  14. package/docs/components/DataList/examples/DataList.md +221 -17
  15. package/docs/components/DualListSelector/examples/DualListSelector.md +234 -18
  16. package/docs/components/Hint/examples/Hint.md +39 -3
  17. package/docs/components/InlineEdit/examples/InlineEdit.md +26 -2
  18. package/docs/components/InputGroup/examples/InputGroup.md +13 -1
  19. package/docs/components/Login/examples/Login.md +13 -1
  20. package/docs/components/Menu/examples/Menu.md +195 -15
  21. package/docs/components/MenuToggle/examples/MenuToggle.md +1331 -100
  22. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +481 -37
  23. package/docs/components/OverflowMenu/examples/overflow-menu.md +65 -5
  24. package/docs/components/Page/examples/Page.md +62 -15
  25. package/docs/components/Pagination/examples/Pagination.md +169 -13
  26. package/docs/components/Table/examples/Table.md +3461 -269
  27. package/docs/components/Toolbar/examples/Toolbar.md +507 -39
  28. package/docs/demos/AboutModal/examples/AboutModal.md +34 -4
  29. package/docs/demos/Alert/examples/Alert.md +102 -12
  30. package/docs/demos/BackToTop/examples/BackToTop.md +34 -4
  31. package/docs/demos/Banner/examples/Banner.md +68 -8
  32. package/docs/demos/Card/examples/Card.md +78 -6
  33. package/docs/demos/CardView/examples/CardView.md +214 -22
  34. package/docs/demos/Compass/examples/Compass.md +431 -56
  35. package/docs/demos/Dashboard/examples/Dashboard.md +71 -11
  36. package/docs/demos/DataList/examples/DataList.md +401 -53
  37. package/docs/demos/DescriptionList/examples/DescriptionList.md +115 -13
  38. package/docs/demos/Drawer/examples/Drawer.md +167 -17
  39. package/docs/demos/JumpLinks/examples/JumpLinks.md +188 -20
  40. package/docs/demos/Masthead/examples/Masthead.md +228 -30
  41. package/docs/demos/Modal/examples/Modal.md +204 -24
  42. package/docs/demos/Nav/examples/Nav.md +184 -28
  43. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1015 -85
  44. package/docs/demos/Page/examples/Page.md +503 -58
  45. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +649 -97
  46. package/docs/demos/Skeleton/examples/Skeleton.md +34 -4
  47. package/docs/demos/Table/examples/Table.md +2641 -349
  48. package/docs/demos/Tabs/examples/Tabs.md +295 -31
  49. package/docs/demos/Toolbar/examples/Toolbar.md +675 -63
  50. package/docs/demos/Wizard/examples/Wizard.md +306 -36
  51. package/package.json +1 -1
  52. package/patternfly-no-globals.css +44 -27
  53. package/patternfly.css +44 -27
  54. package/patternfly.min.css +1 -1
  55. package/patternfly.min.css.map +1 -1
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -160,7 +160,19 @@ This demo implements the about modal, including the backdrop.
160
160
  aria-label="Settings"
161
161
  >
162
162
  <span class="pf-v6-c-menu-toggle__icon">
163
- <i class="fas fa-cog" aria-hidden="true"></i>
163
+ <svg
164
+ class="pf-v6-svg"
165
+ viewBox="0 0 32 32"
166
+ fill="currentColor"
167
+ aria-hidden="true"
168
+ role="img"
169
+ width="1em"
170
+ height="1em"
171
+ >
172
+ <path
173
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
174
+ />
175
+ </svg>
164
176
  </span>
165
177
  </button>
166
178
  </div>
@@ -186,7 +198,19 @@ This demo implements the about modal, including the backdrop.
186
198
  aria-label="Actions"
187
199
  >
188
200
  <span class="pf-v6-c-menu-toggle__icon">
189
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
201
+ <svg
202
+ class="pf-v6-svg"
203
+ viewBox="0 0 32 32"
204
+ fill="currentColor"
205
+ aria-hidden="true"
206
+ role="img"
207
+ width="1em"
208
+ height="1em"
209
+ >
210
+ <path
211
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
212
+ />
213
+ </svg>
190
214
  </span>
191
215
  </button>
192
216
  </div>
@@ -317,9 +341,15 @@ This demo implements the about modal, including the backdrop.
317
341
  </nav>
318
342
  </div>
319
343
  </section>
320
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
344
+ <section
345
+ class="pf-v6-c-page__main-section pf-m-limit-width"
346
+ aria-labelledby="main-title"
347
+ >
321
348
  <div class="pf-v6-c-page__main-body">
322
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
349
+ <h1
350
+ class="pf-v6-c-content--h1 pf-m-page-title"
351
+ id="main-title"
352
+ >Main title</h1>
323
353
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
324
354
  </div>
325
355
  </section>
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -158,7 +158,19 @@ section: components
158
158
  aria-label="Settings"
159
159
  >
160
160
  <span class="pf-v6-c-menu-toggle__icon">
161
- <i class="fas fa-cog" aria-hidden="true"></i>
161
+ <svg
162
+ class="pf-v6-svg"
163
+ viewBox="0 0 32 32"
164
+ fill="currentColor"
165
+ aria-hidden="true"
166
+ role="img"
167
+ width="1em"
168
+ height="1em"
169
+ >
170
+ <path
171
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
172
+ />
173
+ </svg>
162
174
  </span>
163
175
  </button>
164
176
  </div>
@@ -184,7 +196,19 @@ section: components
184
196
  aria-label="Actions"
185
197
  >
186
198
  <span class="pf-v6-c-menu-toggle__icon">
187
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
199
+ <svg
200
+ class="pf-v6-svg"
201
+ viewBox="0 0 32 32"
202
+ fill="currentColor"
203
+ aria-hidden="true"
204
+ role="img"
205
+ width="1em"
206
+ height="1em"
207
+ >
208
+ <path
209
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
210
+ />
211
+ </svg>
188
212
  </span>
189
213
  </button>
190
214
  </div>
@@ -315,9 +339,15 @@ section: components
315
339
  </nav>
316
340
  </div>
317
341
  </section>
318
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
342
+ <section
343
+ class="pf-v6-c-page__main-section pf-m-limit-width"
344
+ aria-labelledby="main-title"
345
+ >
319
346
  <div class="pf-v6-c-page__main-body">
320
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
347
+ <h1
348
+ class="pf-v6-c-content--h1 pf-m-page-title"
349
+ id="main-title"
350
+ >Main title</h1>
321
351
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
322
352
  </div>
323
353
  </section>
@@ -667,7 +697,19 @@ section: components
667
697
  aria-label="Settings"
668
698
  >
669
699
  <span class="pf-v6-c-menu-toggle__icon">
670
- <i class="fas fa-cog" aria-hidden="true"></i>
700
+ <svg
701
+ class="pf-v6-svg"
702
+ viewBox="0 0 32 32"
703
+ fill="currentColor"
704
+ aria-hidden="true"
705
+ role="img"
706
+ width="1em"
707
+ height="1em"
708
+ >
709
+ <path
710
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
711
+ />
712
+ </svg>
671
713
  </span>
672
714
  </button>
673
715
  </div>
@@ -693,7 +735,19 @@ section: components
693
735
  aria-label="Actions"
694
736
  >
695
737
  <span class="pf-v6-c-menu-toggle__icon">
696
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
738
+ <svg
739
+ class="pf-v6-svg"
740
+ viewBox="0 0 32 32"
741
+ fill="currentColor"
742
+ aria-hidden="true"
743
+ role="img"
744
+ width="1em"
745
+ height="1em"
746
+ >
747
+ <path
748
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
749
+ />
750
+ </svg>
697
751
  </span>
698
752
  </button>
699
753
  </div>
@@ -824,9 +878,15 @@ section: components
824
878
  </nav>
825
879
  </div>
826
880
  </section>
827
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
881
+ <section
882
+ class="pf-v6-c-page__main-section pf-m-limit-width"
883
+ aria-labelledby="main-title"
884
+ >
828
885
  <div class="pf-v6-c-page__main-body">
829
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
886
+ <h1
887
+ class="pf-v6-c-content--h1 pf-m-page-title"
888
+ id="main-title"
889
+ >Main title</h1>
830
890
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
831
891
  </div>
832
892
  </section>
@@ -1219,7 +1279,19 @@ section: components
1219
1279
  aria-label="Settings"
1220
1280
  >
1221
1281
  <span class="pf-v6-c-menu-toggle__icon">
1222
- <i class="fas fa-cog" aria-hidden="true"></i>
1282
+ <svg
1283
+ class="pf-v6-svg"
1284
+ viewBox="0 0 32 32"
1285
+ fill="currentColor"
1286
+ aria-hidden="true"
1287
+ role="img"
1288
+ width="1em"
1289
+ height="1em"
1290
+ >
1291
+ <path
1292
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
1293
+ />
1294
+ </svg>
1223
1295
  </span>
1224
1296
  </button>
1225
1297
  </div>
@@ -1245,7 +1317,19 @@ section: components
1245
1317
  aria-label="Actions"
1246
1318
  >
1247
1319
  <span class="pf-v6-c-menu-toggle__icon">
1248
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1320
+ <svg
1321
+ class="pf-v6-svg"
1322
+ viewBox="0 0 32 32"
1323
+ fill="currentColor"
1324
+ aria-hidden="true"
1325
+ role="img"
1326
+ width="1em"
1327
+ height="1em"
1328
+ >
1329
+ <path
1330
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
1331
+ />
1332
+ </svg>
1249
1333
  </span>
1250
1334
  </button>
1251
1335
  </div>
@@ -1376,9 +1460,15 @@ section: components
1376
1460
  </nav>
1377
1461
  </div>
1378
1462
  </section>
1379
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1463
+ <section
1464
+ class="pf-v6-c-page__main-section pf-m-limit-width"
1465
+ aria-labelledby="main-title"
1466
+ >
1380
1467
  <div class="pf-v6-c-page__main-body">
1381
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1468
+ <h1
1469
+ class="pf-v6-c-content--h1 pf-m-page-title"
1470
+ id="main-title"
1471
+ >Main title</h1>
1382
1472
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
1383
1473
  </div>
1384
1474
  </section>
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -159,7 +159,19 @@ cssPrefix: pf-d-back-to-top
159
159
  aria-label="Settings"
160
160
  >
161
161
  <span class="pf-v6-c-menu-toggle__icon">
162
- <i class="fas fa-cog" aria-hidden="true"></i>
162
+ <svg
163
+ class="pf-v6-svg"
164
+ viewBox="0 0 32 32"
165
+ fill="currentColor"
166
+ aria-hidden="true"
167
+ role="img"
168
+ width="1em"
169
+ height="1em"
170
+ >
171
+ <path
172
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
173
+ />
174
+ </svg>
163
175
  </span>
164
176
  </button>
165
177
  </div>
@@ -185,7 +197,19 @@ cssPrefix: pf-d-back-to-top
185
197
  aria-label="Actions"
186
198
  >
187
199
  <span class="pf-v6-c-menu-toggle__icon">
188
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
200
+ <svg
201
+ class="pf-v6-svg"
202
+ viewBox="0 0 32 32"
203
+ fill="currentColor"
204
+ aria-hidden="true"
205
+ role="img"
206
+ width="1em"
207
+ height="1em"
208
+ >
209
+ <path
210
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
211
+ />
212
+ </svg>
189
213
  </span>
190
214
  </button>
191
215
  </div>
@@ -316,9 +340,15 @@ cssPrefix: pf-d-back-to-top
316
340
  </nav>
317
341
  </div>
318
342
  </section>
319
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
343
+ <section
344
+ class="pf-v6-c-page__main-section pf-m-limit-width"
345
+ aria-labelledby="main-title"
346
+ >
320
347
  <div class="pf-v6-c-page__main-body">
321
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
348
+ <h1
349
+ class="pf-v6-c-content--h1 pf-m-page-title"
350
+ id="main-title"
351
+ >Main title</h1>
322
352
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
323
353
  </div>
324
354
  </section>
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -160,7 +160,19 @@ wrapperTag: div
160
160
  aria-label="Settings"
161
161
  >
162
162
  <span class="pf-v6-c-menu-toggle__icon">
163
- <i class="fas fa-cog" aria-hidden="true"></i>
163
+ <svg
164
+ class="pf-v6-svg"
165
+ viewBox="0 0 32 32"
166
+ fill="currentColor"
167
+ aria-hidden="true"
168
+ role="img"
169
+ width="1em"
170
+ height="1em"
171
+ >
172
+ <path
173
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
174
+ />
175
+ </svg>
164
176
  </span>
165
177
  </button>
166
178
  </div>
@@ -186,7 +198,19 @@ wrapperTag: div
186
198
  aria-label="Actions"
187
199
  >
188
200
  <span class="pf-v6-c-menu-toggle__icon">
189
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
201
+ <svg
202
+ class="pf-v6-svg"
203
+ viewBox="0 0 32 32"
204
+ fill="currentColor"
205
+ aria-hidden="true"
206
+ role="img"
207
+ width="1em"
208
+ height="1em"
209
+ >
210
+ <path
211
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
212
+ />
213
+ </svg>
190
214
  </span>
191
215
  </button>
192
216
  </div>
@@ -335,9 +359,15 @@ wrapperTag: div
335
359
  </nav>
336
360
  </div>
337
361
  </section>
338
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
362
+ <section
363
+ class="pf-v6-c-page__main-section pf-m-limit-width"
364
+ aria-labelledby="main-title"
365
+ >
339
366
  <div class="pf-v6-c-page__main-body">
340
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
367
+ <h1
368
+ class="pf-v6-c-content--h1 pf-m-page-title"
369
+ id="main-title"
370
+ >Main title</h1>
341
371
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
342
372
  </div>
343
373
  </section>
@@ -686,7 +716,19 @@ wrapperTag: div
686
716
  aria-label="Settings"
687
717
  >
688
718
  <span class="pf-v6-c-menu-toggle__icon">
689
- <i class="fas fa-cog" aria-hidden="true"></i>
719
+ <svg
720
+ class="pf-v6-svg"
721
+ viewBox="0 0 32 32"
722
+ fill="currentColor"
723
+ aria-hidden="true"
724
+ role="img"
725
+ width="1em"
726
+ height="1em"
727
+ >
728
+ <path
729
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
730
+ />
731
+ </svg>
690
732
  </span>
691
733
  </button>
692
734
  </div>
@@ -712,7 +754,19 @@ wrapperTag: div
712
754
  aria-label="Actions"
713
755
  >
714
756
  <span class="pf-v6-c-menu-toggle__icon">
715
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
757
+ <svg
758
+ class="pf-v6-svg"
759
+ viewBox="0 0 32 32"
760
+ fill="currentColor"
761
+ aria-hidden="true"
762
+ role="img"
763
+ width="1em"
764
+ height="1em"
765
+ >
766
+ <path
767
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
768
+ />
769
+ </svg>
716
770
  </span>
717
771
  </button>
718
772
  </div>
@@ -843,9 +897,15 @@ wrapperTag: div
843
897
  </nav>
844
898
  </div>
845
899
  </section>
846
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
900
+ <section
901
+ class="pf-v6-c-page__main-section pf-m-limit-width"
902
+ aria-labelledby="main-title"
903
+ >
847
904
  <div class="pf-v6-c-page__main-body">
848
- <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
905
+ <h1
906
+ class="pf-v6-c-content--h1 pf-m-page-title"
907
+ id="main-title"
908
+ >Main title</h1>
849
909
  <p class="pf-v6-c-content--p">This is a full page demo.</p>
850
910
  </div>
851
911
  </section>
package/docs/demos/Card/examples/Card.md CHANGED
@@ -47,7 +47,19 @@ wrapperTag: div
47
47
  id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned"
48
48
  >
49
49
  <span class="pf-v6-c-menu-toggle__icon">
50
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
50
+ <svg
51
+ class="pf-v6-svg"
52
+ viewBox="0 0 32 32"
53
+ fill="currentColor"
54
+ aria-hidden="true"
55
+ role="img"
56
+ width="1em"
57
+ height="1em"
58
+ >
59
+ <path
60
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
61
+ />
62
+ </svg>
51
63
  </span>
52
64
  </button>
53
65
  </div>
@@ -160,7 +172,19 @@ wrapperTag: div
160
172
  id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned"
161
173
  >
162
174
  <span class="pf-v6-c-menu-toggle__icon">
163
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
175
+ <svg
176
+ class="pf-v6-svg"
177
+ viewBox="0 0 32 32"
178
+ fill="currentColor"
179
+ aria-hidden="true"
180
+ role="img"
181
+ width="1em"
182
+ height="1em"
183
+ >
184
+ <path
185
+ d="M12.25 5c0-2.068 1.683-3.75 3.75-3.75S19.75 2.932 19.75 5 18.067 8.75 16 8.75 12.25 7.068 12.25 5ZM16 12.25c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Zm0 11c-2.067 0-3.75 1.682-3.75 3.75s1.683 3.75 3.75 3.75 3.75-1.682 3.75-3.75-1.683-3.75-3.75-3.75Z"
186
+ />
187
+ </svg>
164
188
  </span>
165
189
  </button>
166
190
  </div>
@@ -2618,7 +2642,19 @@ wrapperTag: div
2618
2642
  <span class="pf-v6-c-menu-toggle__text">Filter</span>
2619
2643
  <span class="pf-v6-c-menu-toggle__controls">
2620
2644
  <span class="pf-v6-c-menu-toggle__toggle-icon">
2621
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2645
+ <svg
2646
+ class="pf-v6-svg"
2647
+ viewBox="0 0 20 20"
2648
+ fill="currentColor"
2649
+ aria-hidden="true"
2650
+ role="img"
2651
+ width="1em"
2652
+ height="1em"
2653
+ >
2654
+ <path
2655
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
2656
+ />
2657
+ </svg>
2622
2658
  </span>
2623
2659
  </span>
2624
2660
  </button>
@@ -3499,7 +3535,19 @@ wrapperTag: div
3499
3535
  <span class="pf-v6-c-menu-toggle__text">Filter</span>
3500
3536
  <span class="pf-v6-c-menu-toggle__controls">
3501
3537
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3502
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3538
+ <svg
3539
+ class="pf-v6-svg"
3540
+ viewBox="0 0 20 20"
3541
+ fill="currentColor"
3542
+ aria-hidden="true"
3543
+ role="img"
3544
+ width="1em"
3545
+ height="1em"
3546
+ >
3547
+ <path
3548
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3549
+ />
3550
+ </svg>
3503
3551
  </span>
3504
3552
  </span>
3505
3553
  </button>
@@ -3576,7 +3624,19 @@ wrapperTag: div
3576
3624
  <span class="pf-v6-c-menu-toggle__text">Most recent</span>
3577
3625
  <span class="pf-v6-c-menu-toggle__controls">
3578
3626
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3579
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3627
+ <svg
3628
+ class="pf-v6-svg"
3629
+ viewBox="0 0 20 20"
3630
+ fill="currentColor"
3631
+ aria-hidden="true"
3632
+ role="img"
3633
+ width="1em"
3634
+ height="1em"
3635
+ >
3636
+ <path
3637
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3638
+ />
3639
+ </svg>
3580
3640
  </span>
3581
3641
  </span>
3582
3642
  </button>
@@ -3699,7 +3759,19 @@ wrapperTag: div
3699
3759
  <span class="pf-v6-c-menu-toggle__text">Status</span>
3700
3760
  <span class="pf-v6-c-menu-toggle__controls">
3701
3761
  <span class="pf-v6-c-menu-toggle__toggle-icon">
3702
- <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3762
+ <svg
3763
+ class="pf-v6-svg"
3764
+ viewBox="0 0 20 20"
3765
+ fill="currentColor"
3766
+ aria-hidden="true"
3767
+ role="img"
3768
+ width="1em"
3769
+ height="1em"
3770
+ >
3771
+ <path
3772
+ d="M18.92 5.62C18.77 5.25 18.4 5 18 5H2a1.003 1.003 0 0 0-.71 1.71l7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65c.29-.29.37-.72.22-1.09Z"
3773
+ />
3774
+ </svg>
3703
3775
  </span>
3704
3776
  </span>
3705
3777
  </button>