@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.0

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 (109) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Spinner/spinner.css +5 -0
  37. package/components/Spinner/spinner.scss +6 -0
  38. package/components/Table/table-grid.css +51 -5
  39. package/components/Table/table-grid.scss +22 -1
  40. package/components/Table/table.css +83 -1
  41. package/components/Table/table.scss +123 -1
  42. package/components/Tabs/tabs.css +25 -15
  43. package/components/Tabs/tabs.scss +26 -13
  44. package/components/TextInputGroup/text-input-group.css +16 -0
  45. package/components/TextInputGroup/text-input-group.scss +8 -0
  46. package/components/Timestamp/timestamp.css +4 -0
  47. package/components/Timestamp/timestamp.scss +7 -0
  48. package/components/TreeView/tree-view.css +39 -0
  49. package/components/TreeView/tree-view.scss +42 -2
  50. package/components/Truncate/truncate.css +1 -0
  51. package/components/Truncate/truncate.scss +3 -0
  52. package/components/_index.css +896 -83
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  54. package/docs/components/Button/examples/Button.md +148 -5
  55. package/docs/components/Card/examples/Card.md +8 -8
  56. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  57. package/docs/components/DataList/examples/DataList.md +23 -23
  58. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  59. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  60. package/docs/components/Form/examples/Form.md +1047 -126
  61. package/docs/components/Hint/examples/Hint.md +3 -3
  62. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  63. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  64. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  65. package/docs/components/Masthead/examples/masthead.md +90 -12
  66. package/docs/components/Menu/examples/Menu.md +122 -6
  67. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  68. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  69. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  70. package/docs/components/Page/examples/Page.md +147 -14
  71. package/docs/components/Pagination/examples/Pagination.md +12 -12
  72. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  73. package/docs/components/Slider/examples/Slider.md +2 -2
  74. package/docs/components/Spinner/examples/Spinner.md +10 -0
  75. package/docs/components/Table/examples/Table.md +9428 -6173
  76. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  77. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  78. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  79. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  80. package/docs/demos/Alert/examples/Alert.md +66 -9
  81. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  82. package/docs/demos/Banner/examples/Banner.md +47 -6
  83. package/docs/demos/Card/examples/Card.md +5 -62
  84. package/docs/demos/CardView/examples/CardView.md +24 -5
  85. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  86. package/docs/demos/DataList/examples/DataList.md +100 -24
  87. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  88. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  89. package/docs/demos/Form/examples/BasicForms.md +12 -12
  90. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  91. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  92. package/docs/demos/Modal/examples/Modal.md +132 -18
  93. package/docs/demos/Nav/examples/Nav.md +111 -16
  94. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  95. package/docs/demos/Page/examples/Page.md +309 -43
  96. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  97. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  98. package/docs/demos/Table/examples/Table.md +449 -155
  99. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  100. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  101. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  102. package/package.json +5 -5
  103. package/patternfly-base-no-globals.css +45 -11
  104. package/patternfly-base.css +45 -11
  105. package/patternfly-no-globals.css +941 -94
  106. package/patternfly.css +941 -94
  107. package/patternfly.min.css +1 -1
  108. package/patternfly.min.css.map +1 -1
  109. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/Masthead/examples/Masthead.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>
@@ -282,12 +301,31 @@ wrapperTag: div
282
301
  <div class="pf-v6-c-masthead__main">
283
302
  <span class="pf-v6-c-masthead__toggle">
284
303
  <button
285
- class="pf-v6-c-button pf-m-plain"
304
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
286
305
  type="button"
287
306
  aria-label="Global navigation"
288
307
  >
289
308
  <span class="pf-v6-c-button__icon">
290
- <i class="fas fa-bars" aria-hidden="true"></i>
309
+ <svg
310
+ viewBox="0 0 10 10"
311
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
312
+ width="1em"
313
+ height="1em"
314
+ >
315
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
316
+ <path
317
+ class="pf-v6-c-button--hamburger-icon--middle"
318
+ d="M1,5 L9,5"
319
+ />
320
+ <path
321
+ class="pf-v6-c-button--hamburger-icon--arrow"
322
+ d="M1,5 L1,5 L1,5"
323
+ />
324
+ <path
325
+ class="pf-v6-c-button--hamburger-icon--bottom"
326
+ d="M9,9 L1,9"
327
+ />
328
+ </svg>
291
329
  </span>
292
330
  </button>
293
331
  </span>
@@ -573,12 +611,31 @@ wrapperTag: div
573
611
  <div class="pf-v6-c-masthead__main">
574
612
  <span class="pf-v6-c-masthead__toggle">
575
613
  <button
576
- class="pf-v6-c-button pf-m-plain"
614
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
577
615
  type="button"
578
616
  aria-label="Global navigation"
579
617
  >
580
618
  <span class="pf-v6-c-button__icon">
581
- <i class="fas fa-bars" aria-hidden="true"></i>
619
+ <svg
620
+ viewBox="0 0 10 10"
621
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
622
+ width="1em"
623
+ height="1em"
624
+ >
625
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
626
+ <path
627
+ class="pf-v6-c-button--hamburger-icon--middle"
628
+ d="M1,5 L9,5"
629
+ />
630
+ <path
631
+ class="pf-v6-c-button--hamburger-icon--arrow"
632
+ d="M1,5 L1,5 L1,5"
633
+ />
634
+ <path
635
+ class="pf-v6-c-button--hamburger-icon--bottom"
636
+ d="M9,9 L1,9"
637
+ />
638
+ </svg>
582
639
  </span>
583
640
  </button>
584
641
  </span>
@@ -901,12 +958,31 @@ wrapperTag: div
901
958
  <div class="pf-v6-c-masthead__main">
902
959
  <span class="pf-v6-c-masthead__toggle">
903
960
  <button
904
- class="pf-v6-c-button pf-m-plain"
961
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
905
962
  type="button"
906
963
  aria-label="Global navigation"
907
964
  >
908
965
  <span class="pf-v6-c-button__icon">
909
- <i class="fas fa-bars" aria-hidden="true"></i>
966
+ <svg
967
+ viewBox="0 0 10 10"
968
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
969
+ width="1em"
970
+ height="1em"
971
+ >
972
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
973
+ <path
974
+ class="pf-v6-c-button--hamburger-icon--middle"
975
+ d="M1,5 L9,5"
976
+ />
977
+ <path
978
+ class="pf-v6-c-button--hamburger-icon--arrow"
979
+ d="M1,5 L1,5 L1,5"
980
+ />
981
+ <path
982
+ class="pf-v6-c-button--hamburger-icon--bottom"
983
+ d="M9,9 L1,9"
984
+ />
985
+ </svg>
910
986
  </span>
911
987
  </button>
912
988
  </span>
@@ -1229,12 +1305,31 @@ wrapperTag: div
1229
1305
  <div class="pf-v6-c-masthead__main">
1230
1306
  <span class="pf-v6-c-masthead__toggle">
1231
1307
  <button
1232
- class="pf-v6-c-button pf-m-plain"
1308
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1233
1309
  type="button"
1234
1310
  aria-label="Global navigation"
1235
1311
  >
1236
1312
  <span class="pf-v6-c-button__icon">
1237
- <i class="fas fa-bars" aria-hidden="true"></i>
1313
+ <svg
1314
+ viewBox="0 0 10 10"
1315
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1316
+ width="1em"
1317
+ height="1em"
1318
+ >
1319
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1320
+ <path
1321
+ class="pf-v6-c-button--hamburger-icon--middle"
1322
+ d="M1,5 L9,5"
1323
+ />
1324
+ <path
1325
+ class="pf-v6-c-button--hamburger-icon--arrow"
1326
+ d="M1,5 L1,5 L1,5"
1327
+ />
1328
+ <path
1329
+ class="pf-v6-c-button--hamburger-icon--bottom"
1330
+ d="M9,9 L1,9"
1331
+ />
1332
+ </svg>
1238
1333
  </span>
1239
1334
  </button>
1240
1335
  </span>
@@ -1494,12 +1589,31 @@ wrapperTag: div
1494
1589
  <div class="pf-v6-c-masthead__main">
1495
1590
  <span class="pf-v6-c-masthead__toggle">
1496
1591
  <button
1497
- class="pf-v6-c-button pf-m-plain"
1592
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1498
1593
  type="button"
1499
1594
  aria-label="Global navigation"
1500
1595
  >
1501
1596
  <span class="pf-v6-c-button__icon">
1502
- <i class="fas fa-bars" aria-hidden="true"></i>
1597
+ <svg
1598
+ viewBox="0 0 10 10"
1599
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1600
+ width="1em"
1601
+ height="1em"
1602
+ >
1603
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1604
+ <path
1605
+ class="pf-v6-c-button--hamburger-icon--middle"
1606
+ d="M1,5 L9,5"
1607
+ />
1608
+ <path
1609
+ class="pf-v6-c-button--hamburger-icon--arrow"
1610
+ d="M1,5 L1,5 L1,5"
1611
+ />
1612
+ <path
1613
+ class="pf-v6-c-button--hamburger-icon--bottom"
1614
+ d="M9,9 L1,9"
1615
+ />
1616
+ </svg>
1503
1617
  </span>
1504
1618
  </button>
1505
1619
  </span>
@@ -1777,12 +1891,31 @@ wrapperTag: div
1777
1891
  <div class="pf-v6-c-masthead__main">
1778
1892
  <span class="pf-v6-c-masthead__toggle">
1779
1893
  <button
1780
- class="pf-v6-c-button pf-m-plain"
1894
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1781
1895
  type="button"
1782
1896
  aria-label="Global navigation"
1783
1897
  >
1784
1898
  <span class="pf-v6-c-button__icon">
1785
- <i class="fas fa-bars" aria-hidden="true"></i>
1899
+ <svg
1900
+ viewBox="0 0 10 10"
1901
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1902
+ width="1em"
1903
+ height="1em"
1904
+ >
1905
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1906
+ <path
1907
+ class="pf-v6-c-button--hamburger-icon--middle"
1908
+ d="M1,5 L9,5"
1909
+ />
1910
+ <path
1911
+ class="pf-v6-c-button--hamburger-icon--arrow"
1912
+ d="M1,5 L1,5 L1,5"
1913
+ />
1914
+ <path
1915
+ class="pf-v6-c-button--hamburger-icon--bottom"
1916
+ d="M9,9 L1,9"
1917
+ />
1918
+ </svg>
1786
1919
  </span>
1787
1920
  </button>
1788
1921
  </span>
@@ -1890,7 +2023,7 @@ wrapperTag: div
1890
2023
  </div>
1891
2024
  <div class="pf-v6-c-toolbar__item">
1892
2025
  <button
1893
- class="pf-v6-c-menu-toggle pf-m-plain"
2026
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1894
2027
  type="button"
1895
2028
  aria-expanded="false"
1896
2029
  aria-label="Settings"
@@ -2246,7 +2379,7 @@ wrapperTag: div
2246
2379
  </div>
2247
2380
  <div class="pf-v6-c-toolbar__item">
2248
2381
  <button
2249
- class="pf-v6-c-menu-toggle pf-m-plain"
2382
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2250
2383
  type="button"
2251
2384
  aria-expanded="false"
2252
2385
  aria-label="Settings"
@@ -2402,12 +2535,31 @@ wrapperTag: div
2402
2535
  <div class="pf-v6-c-masthead__main">
2403
2536
  <span class="pf-v6-c-masthead__toggle">
2404
2537
  <button
2405
- class="pf-v6-c-button pf-m-plain"
2538
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2406
2539
  type="button"
2407
2540
  aria-label="Global navigation"
2408
2541
  >
2409
2542
  <span class="pf-v6-c-button__icon">
2410
- <i class="fas fa-bars" aria-hidden="true"></i>
2543
+ <svg
2544
+ viewBox="0 0 10 10"
2545
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2546
+ width="1em"
2547
+ height="1em"
2548
+ >
2549
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2550
+ <path
2551
+ class="pf-v6-c-button--hamburger-icon--middle"
2552
+ d="M1,5 L9,5"
2553
+ />
2554
+ <path
2555
+ class="pf-v6-c-button--hamburger-icon--arrow"
2556
+ d="M1,5 L1,5 L1,5"
2557
+ />
2558
+ <path
2559
+ class="pf-v6-c-button--hamburger-icon--bottom"
2560
+ d="M9,9 L1,9"
2561
+ />
2562
+ </svg>
2411
2563
  </span>
2412
2564
  </button>
2413
2565
  </span>
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -19,12 +19,31 @@ section: components
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v6-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <svg
28
+ viewBox="0 0 10 10"
29
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--middle"
36
+ d="M1,5 L9,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--arrow"
40
+ d="M1,5 L1,5 L1,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--bottom"
44
+ d="M9,9 L1,9"
45
+ />
46
+ </svg>
28
47
  </span>
29
48
  </button>
30
49
  </span>
@@ -132,7 +151,7 @@ section: components
132
151
  </div>
133
152
  <div class="pf-v6-c-toolbar__item">
134
153
  <button
135
- class="pf-v6-c-menu-toggle pf-m-plain"
154
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
136
155
  type="button"
137
156
  aria-expanded="false"
138
157
  aria-label="Settings"
@@ -370,12 +389,31 @@ section: components
370
389
  <div class="pf-v6-c-masthead__main">
371
390
  <span class="pf-v6-c-masthead__toggle">
372
391
  <button
373
- class="pf-v6-c-button pf-m-plain"
392
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
374
393
  type="button"
375
394
  aria-label="Global navigation"
376
395
  >
377
396
  <span class="pf-v6-c-button__icon">
378
- <i class="fas fa-bars" aria-hidden="true"></i>
397
+ <svg
398
+ viewBox="0 0 10 10"
399
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
400
+ width="1em"
401
+ height="1em"
402
+ >
403
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
404
+ <path
405
+ class="pf-v6-c-button--hamburger-icon--middle"
406
+ d="M1,5 L9,5"
407
+ />
408
+ <path
409
+ class="pf-v6-c-button--hamburger-icon--arrow"
410
+ d="M1,5 L1,5 L1,5"
411
+ />
412
+ <path
413
+ class="pf-v6-c-button--hamburger-icon--bottom"
414
+ d="M9,9 L1,9"
415
+ />
416
+ </svg>
379
417
  </span>
380
418
  </button>
381
419
  </span>
@@ -483,7 +521,7 @@ section: components
483
521
  </div>
484
522
  <div class="pf-v6-c-toolbar__item">
485
523
  <button
486
- class="pf-v6-c-menu-toggle pf-m-plain"
524
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
487
525
  type="button"
488
526
  aria-expanded="false"
489
527
  aria-label="Settings"
@@ -727,12 +765,31 @@ section: components
727
765
  <div class="pf-v6-c-masthead__main">
728
766
  <span class="pf-v6-c-masthead__toggle">
729
767
  <button
730
- class="pf-v6-c-button pf-m-plain"
768
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
731
769
  type="button"
732
770
  aria-label="Global navigation"
733
771
  >
734
772
  <span class="pf-v6-c-button__icon">
735
- <i class="fas fa-bars" aria-hidden="true"></i>
773
+ <svg
774
+ viewBox="0 0 10 10"
775
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
776
+ width="1em"
777
+ height="1em"
778
+ >
779
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
780
+ <path
781
+ class="pf-v6-c-button--hamburger-icon--middle"
782
+ d="M1,5 L9,5"
783
+ />
784
+ <path
785
+ class="pf-v6-c-button--hamburger-icon--arrow"
786
+ d="M1,5 L1,5 L1,5"
787
+ />
788
+ <path
789
+ class="pf-v6-c-button--hamburger-icon--bottom"
790
+ d="M9,9 L1,9"
791
+ />
792
+ </svg>
736
793
  </span>
737
794
  </button>
738
795
  </span>
@@ -840,7 +897,7 @@ section: components
840
897
  </div>
841
898
  <div class="pf-v6-c-toolbar__item">
842
899
  <button
843
- class="pf-v6-c-menu-toggle pf-m-plain"
900
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
844
901
  type="button"
845
902
  aria-expanded="false"
846
903
  aria-label="Settings"
@@ -1074,12 +1131,31 @@ section: components
1074
1131
  <div class="pf-v6-c-masthead__main">
1075
1132
  <span class="pf-v6-c-masthead__toggle">
1076
1133
  <button
1077
- class="pf-v6-c-button pf-m-plain"
1134
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1078
1135
  type="button"
1079
1136
  aria-label="Global navigation"
1080
1137
  >
1081
1138
  <span class="pf-v6-c-button__icon">
1082
- <i class="fas fa-bars" aria-hidden="true"></i>
1139
+ <svg
1140
+ viewBox="0 0 10 10"
1141
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1142
+ width="1em"
1143
+ height="1em"
1144
+ >
1145
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1146
+ <path
1147
+ class="pf-v6-c-button--hamburger-icon--middle"
1148
+ d="M1,5 L9,5"
1149
+ />
1150
+ <path
1151
+ class="pf-v6-c-button--hamburger-icon--arrow"
1152
+ d="M1,5 L1,5 L1,5"
1153
+ />
1154
+ <path
1155
+ class="pf-v6-c-button--hamburger-icon--bottom"
1156
+ d="M9,9 L1,9"
1157
+ />
1158
+ </svg>
1083
1159
  </span>
1084
1160
  </button>
1085
1161
  </span>
@@ -1187,7 +1263,7 @@ section: components
1187
1263
  </div>
1188
1264
  <div class="pf-v6-c-toolbar__item">
1189
1265
  <button
1190
- class="pf-v6-c-menu-toggle pf-m-plain"
1266
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1191
1267
  type="button"
1192
1268
  aria-expanded="false"
1193
1269
  aria-label="Settings"
@@ -1421,12 +1497,31 @@ section: components
1421
1497
  <div class="pf-v6-c-masthead__main">
1422
1498
  <span class="pf-v6-c-masthead__toggle">
1423
1499
  <button
1424
- class="pf-v6-c-button pf-m-plain"
1500
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1425
1501
  type="button"
1426
1502
  aria-label="Global navigation"
1427
1503
  >
1428
1504
  <span class="pf-v6-c-button__icon">
1429
- <i class="fas fa-bars" aria-hidden="true"></i>
1505
+ <svg
1506
+ viewBox="0 0 10 10"
1507
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1508
+ width="1em"
1509
+ height="1em"
1510
+ >
1511
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1512
+ <path
1513
+ class="pf-v6-c-button--hamburger-icon--middle"
1514
+ d="M1,5 L9,5"
1515
+ />
1516
+ <path
1517
+ class="pf-v6-c-button--hamburger-icon--arrow"
1518
+ d="M1,5 L1,5 L1,5"
1519
+ />
1520
+ <path
1521
+ class="pf-v6-c-button--hamburger-icon--bottom"
1522
+ d="M9,9 L1,9"
1523
+ />
1524
+ </svg>
1430
1525
  </span>
1431
1526
  </button>
1432
1527
  </span>
@@ -1534,7 +1629,7 @@ section: components
1534
1629
  </div>
1535
1630
  <div class="pf-v6-c-toolbar__item">
1536
1631
  <button
1537
- class="pf-v6-c-menu-toggle pf-m-plain"
1632
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1538
1633
  type="button"
1539
1634
  aria-expanded="false"
1540
1635
  aria-label="Settings"
@@ -1768,12 +1863,31 @@ section: components
1768
1863
  <div class="pf-v6-c-masthead__main">
1769
1864
  <span class="pf-v6-c-masthead__toggle">
1770
1865
  <button
1771
- class="pf-v6-c-button pf-m-plain"
1866
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1772
1867
  type="button"
1773
1868
  aria-label="Global navigation"
1774
1869
  >
1775
1870
  <span class="pf-v6-c-button__icon">
1776
- <i class="fas fa-bars" aria-hidden="true"></i>
1871
+ <svg
1872
+ viewBox="0 0 10 10"
1873
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1874
+ width="1em"
1875
+ height="1em"
1876
+ >
1877
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1878
+ <path
1879
+ class="pf-v6-c-button--hamburger-icon--middle"
1880
+ d="M1,5 L9,5"
1881
+ />
1882
+ <path
1883
+ class="pf-v6-c-button--hamburger-icon--arrow"
1884
+ d="M1,5 L1,5 L1,5"
1885
+ />
1886
+ <path
1887
+ class="pf-v6-c-button--hamburger-icon--bottom"
1888
+ d="M9,9 L1,9"
1889
+ />
1890
+ </svg>
1777
1891
  </span>
1778
1892
  </button>
1779
1893
  </span>
@@ -1881,7 +1995,7 @@ section: components
1881
1995
  </div>
1882
1996
  <div class="pf-v6-c-toolbar__item">
1883
1997
  <button
1884
- class="pf-v6-c-menu-toggle pf-m-plain"
1998
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1885
1999
  type="button"
1886
2000
  aria-expanded="false"
1887
2001
  aria-label="Settings"