@patternfly/patternfly 6.3.0-prerelease.8 → 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 (111) 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/Skeleton/skeleton.css +22 -2
  37. package/components/Skeleton/skeleton.scss +25 -3
  38. package/components/Spinner/spinner.css +5 -0
  39. package/components/Spinner/spinner.scss +6 -0
  40. package/components/Table/table-grid.css +51 -5
  41. package/components/Table/table-grid.scss +22 -1
  42. package/components/Table/table.css +83 -1
  43. package/components/Table/table.scss +123 -1
  44. package/components/Tabs/tabs.css +25 -15
  45. package/components/Tabs/tabs.scss +26 -13
  46. package/components/TextInputGroup/text-input-group.css +16 -0
  47. package/components/TextInputGroup/text-input-group.scss +8 -0
  48. package/components/Timestamp/timestamp.css +4 -0
  49. package/components/Timestamp/timestamp.scss +7 -0
  50. package/components/TreeView/tree-view.css +39 -0
  51. package/components/TreeView/tree-view.scss +42 -2
  52. package/components/Truncate/truncate.css +1 -0
  53. package/components/Truncate/truncate.scss +3 -0
  54. package/components/_index.css +918 -85
  55. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  56. package/docs/components/Button/examples/Button.md +148 -5
  57. package/docs/components/Card/examples/Card.md +8 -8
  58. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  59. package/docs/components/DataList/examples/DataList.md +23 -23
  60. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  61. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  62. package/docs/components/Form/examples/Form.md +1047 -126
  63. package/docs/components/Hint/examples/Hint.md +3 -3
  64. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  65. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  66. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  67. package/docs/components/Masthead/examples/masthead.md +90 -12
  68. package/docs/components/Menu/examples/Menu.md +122 -6
  69. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  70. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  71. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  72. package/docs/components/Page/examples/Page.md +147 -14
  73. package/docs/components/Pagination/examples/Pagination.md +12 -12
  74. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  75. package/docs/components/Slider/examples/Slider.md +2 -2
  76. package/docs/components/Spinner/examples/Spinner.md +10 -0
  77. package/docs/components/Table/examples/Table.md +9428 -6173
  78. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  79. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  80. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  81. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  82. package/docs/demos/Alert/examples/Alert.md +66 -9
  83. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  84. package/docs/demos/Banner/examples/Banner.md +47 -6
  85. package/docs/demos/Card/examples/Card.md +5 -62
  86. package/docs/demos/CardView/examples/CardView.md +24 -5
  87. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  88. package/docs/demos/DataList/examples/DataList.md +100 -24
  89. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  90. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  91. package/docs/demos/Form/examples/BasicForms.md +12 -12
  92. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  93. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  94. package/docs/demos/Modal/examples/Modal.md +132 -18
  95. package/docs/demos/Nav/examples/Nav.md +111 -16
  96. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  97. package/docs/demos/Page/examples/Page.md +309 -43
  98. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  99. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  100. package/docs/demos/Table/examples/Table.md +449 -155
  101. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  102. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  103. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  104. package/package.json +5 -5
  105. package/patternfly-base-no-globals.css +45 -11
  106. package/patternfly-base.css +45 -11
  107. package/patternfly-no-globals.css +963 -96
  108. package/patternfly.css +963 -96
  109. package/patternfly.min.css +1 -1
  110. package/patternfly.min.css.map +1 -1
  111. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/Drawer/examples/Drawer.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"
@@ -369,25 +388,6 @@ wrapperTag: div
369
388
  <button
370
389
  type="button"
371
390
  class="pf-v6-c-tabs__link"
372
- onclick="
373
- event.preventDefault();
374
- ((e) => {
375
- const el = this,
376
- li = this.closest('li'),
377
- ul = this.closest('ul'),
378
- tabs = this.closest('.pf-v6-c-tabs'),
379
- left = Math.round(li.offsetLeft),
380
- top = Math.round(li.offsetTop),
381
- width = Math.round(li.offsetWidth),
382
- height = Math.round(li.offsetHeight);
383
-
384
- ul.querySelectorAll('li').forEach(function(el) {
385
- el.classList.remove('pf-m-current')});
386
- li.classList.add('pf-m-current');
387
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
388
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
389
- }
390
- )()"
391
391
  role="tab"
392
392
  id="drawer-collapsed-example-panel-tabs-tab1-link"
393
393
  >
@@ -398,25 +398,6 @@ wrapperTag: div
398
398
  <button
399
399
  type="button"
400
400
  class="pf-v6-c-tabs__link"
401
- onclick="
402
- event.preventDefault();
403
- ((e) => {
404
- const el = this,
405
- li = this.closest('li'),
406
- ul = this.closest('ul'),
407
- tabs = this.closest('.pf-v6-c-tabs'),
408
- left = Math.round(li.offsetLeft),
409
- top = Math.round(li.offsetTop),
410
- width = Math.round(li.offsetWidth),
411
- height = Math.round(li.offsetHeight);
412
-
413
- ul.querySelectorAll('li').forEach(function(el) {
414
- el.classList.remove('pf-m-current')});
415
- li.classList.add('pf-m-current');
416
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
417
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
418
- }
419
- )()"
420
401
  role="tab"
421
402
  id="drawer-collapsed-example-panel-tabs-tab2-link"
422
403
  >
@@ -527,12 +508,31 @@ wrapperTag: div
527
508
  <div class="pf-v6-c-masthead__main">
528
509
  <span class="pf-v6-c-masthead__toggle">
529
510
  <button
530
- class="pf-v6-c-button pf-m-plain"
511
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
531
512
  type="button"
532
513
  aria-label="Global navigation"
533
514
  >
534
515
  <span class="pf-v6-c-button__icon">
535
- <i class="fas fa-bars" aria-hidden="true"></i>
516
+ <svg
517
+ viewBox="0 0 10 10"
518
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
519
+ width="1em"
520
+ height="1em"
521
+ >
522
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
523
+ <path
524
+ class="pf-v6-c-button--hamburger-icon--middle"
525
+ d="M1,5 L9,5"
526
+ />
527
+ <path
528
+ class="pf-v6-c-button--hamburger-icon--arrow"
529
+ d="M1,5 L1,5 L1,5"
530
+ />
531
+ <path
532
+ class="pf-v6-c-button--hamburger-icon--bottom"
533
+ d="M9,9 L1,9"
534
+ />
535
+ </svg>
536
536
  </span>
537
537
  </button>
538
538
  </span>
@@ -640,7 +640,7 @@ wrapperTag: div
640
640
  </div>
641
641
  <div class="pf-v6-c-toolbar__item">
642
642
  <button
643
- class="pf-v6-c-menu-toggle pf-m-plain"
643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
644
644
  type="button"
645
645
  aria-expanded="false"
646
646
  aria-label="Settings"
@@ -851,12 +851,31 @@ wrapperTag: div
851
851
  <div class="pf-v6-c-masthead__main">
852
852
  <span class="pf-v6-c-masthead__toggle">
853
853
  <button
854
- class="pf-v6-c-button pf-m-plain"
854
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
855
855
  type="button"
856
856
  aria-label="Global navigation"
857
857
  >
858
858
  <span class="pf-v6-c-button__icon">
859
- <i class="fas fa-bars" aria-hidden="true"></i>
859
+ <svg
860
+ viewBox="0 0 10 10"
861
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
862
+ width="1em"
863
+ height="1em"
864
+ >
865
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
866
+ <path
867
+ class="pf-v6-c-button--hamburger-icon--middle"
868
+ d="M1,5 L9,5"
869
+ />
870
+ <path
871
+ class="pf-v6-c-button--hamburger-icon--arrow"
872
+ d="M1,5 L1,5 L1,5"
873
+ />
874
+ <path
875
+ class="pf-v6-c-button--hamburger-icon--bottom"
876
+ d="M9,9 L1,9"
877
+ />
878
+ </svg>
860
879
  </span>
861
880
  </button>
862
881
  </span>
@@ -964,7 +983,7 @@ wrapperTag: div
964
983
  </div>
965
984
  <div class="pf-v6-c-toolbar__item">
966
985
  <button
967
- class="pf-v6-c-menu-toggle pf-m-plain"
986
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
968
987
  type="button"
969
988
  aria-expanded="false"
970
989
  aria-label="Settings"
@@ -1175,12 +1194,31 @@ wrapperTag: div
1175
1194
  <div class="pf-v6-c-masthead__main">
1176
1195
  <span class="pf-v6-c-masthead__toggle">
1177
1196
  <button
1178
- class="pf-v6-c-button pf-m-plain"
1197
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1179
1198
  type="button"
1180
1199
  aria-label="Global navigation"
1181
1200
  >
1182
1201
  <span class="pf-v6-c-button__icon">
1183
- <i class="fas fa-bars" aria-hidden="true"></i>
1202
+ <svg
1203
+ viewBox="0 0 10 10"
1204
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1205
+ width="1em"
1206
+ height="1em"
1207
+ >
1208
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1209
+ <path
1210
+ class="pf-v6-c-button--hamburger-icon--middle"
1211
+ d="M1,5 L9,5"
1212
+ />
1213
+ <path
1214
+ class="pf-v6-c-button--hamburger-icon--arrow"
1215
+ d="M1,5 L1,5 L1,5"
1216
+ />
1217
+ <path
1218
+ class="pf-v6-c-button--hamburger-icon--bottom"
1219
+ d="M9,9 L1,9"
1220
+ />
1221
+ </svg>
1184
1222
  </span>
1185
1223
  </button>
1186
1224
  </span>
@@ -1288,7 +1326,7 @@ wrapperTag: div
1288
1326
  </div>
1289
1327
  <div class="pf-v6-c-toolbar__item">
1290
1328
  <button
1291
- class="pf-v6-c-menu-toggle pf-m-plain"
1329
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1292
1330
  type="button"
1293
1331
  aria-expanded="false"
1294
1332
  aria-label="Settings"
@@ -1578,12 +1616,31 @@ wrapperTag: div
1578
1616
  <div class="pf-v6-c-masthead__main">
1579
1617
  <span class="pf-v6-c-masthead__toggle">
1580
1618
  <button
1581
- class="pf-v6-c-button pf-m-plain"
1619
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1582
1620
  type="button"
1583
1621
  aria-label="Global navigation"
1584
1622
  >
1585
1623
  <span class="pf-v6-c-button__icon">
1586
- <i class="fas fa-bars" aria-hidden="true"></i>
1624
+ <svg
1625
+ viewBox="0 0 10 10"
1626
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1627
+ width="1em"
1628
+ height="1em"
1629
+ >
1630
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1631
+ <path
1632
+ class="pf-v6-c-button--hamburger-icon--middle"
1633
+ d="M1,5 L9,5"
1634
+ />
1635
+ <path
1636
+ class="pf-v6-c-button--hamburger-icon--arrow"
1637
+ d="M1,5 L1,5 L1,5"
1638
+ />
1639
+ <path
1640
+ class="pf-v6-c-button--hamburger-icon--bottom"
1641
+ d="M9,9 L1,9"
1642
+ />
1643
+ </svg>
1587
1644
  </span>
1588
1645
  </button>
1589
1646
  </span>
@@ -1691,7 +1748,7 @@ wrapperTag: div
1691
1748
  </div>
1692
1749
  <div class="pf-v6-c-toolbar__item">
1693
1750
  <button
1694
- class="pf-v6-c-menu-toggle pf-m-plain"
1751
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1695
1752
  type="button"
1696
1753
  aria-expanded="false"
1697
1754
  aria-label="Settings"
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -1049,7 +1049,7 @@ subsection: forms
1049
1049
  </div>
1050
1050
 
1051
1051
  <div
1052
- class="pf-v6-c-form__field-group"
1052
+ class="pf-v6-c-form__field-group pf-m-expandable"
1053
1053
  role="group"
1054
1054
  aria-labelledby="form-demo-sections-complex-form-alerting-title"
1055
1055
  >
@@ -1086,7 +1086,7 @@ subsection: forms
1086
1086
  </div>
1087
1087
 
1088
1088
  <div
1089
- class="pf-v6-c-form__field-group"
1089
+ class="pf-v6-c-form__field-group pf-m-expandable"
1090
1090
  role="group"
1091
1091
  aria-labelledby="form-demo-sections-complex-form-query-title"
1092
1092
  >
@@ -1123,7 +1123,7 @@ subsection: forms
1123
1123
  </div>
1124
1124
 
1125
1125
  <div
1126
- class="pf-v6-c-form__field-group"
1126
+ class="pf-v6-c-form__field-group pf-m-expandable"
1127
1127
  role="group"
1128
1128
  aria-labelledby="form-demo-sections-complex-form-affinity-title"
1129
1129
  >
@@ -1157,9 +1157,9 @@ subsection: forms
1157
1157
  >If specified, the pod's scheduling constraints.</div>
1158
1158
  </div>
1159
1159
  </div>
1160
- <div class="pf-v6-c-form__field-group-body" hidden>
1160
+ <div class="pf-v6-c-form__field-group-body" inert>
1161
1161
  <div
1162
- class="pf-v6-c-form__field-group pf-m-expanded"
1162
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1163
1163
  role="group"
1164
1164
  aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
1165
1165
  >
@@ -1196,7 +1196,7 @@ subsection: forms
1196
1196
  </div>
1197
1197
  <div class="pf-v6-c-form__field-group-body">
1198
1198
  <div
1199
- class="pf-v6-c-form__field-group"
1199
+ class="pf-v6-c-form__field-group pf-m-expandable"
1200
1200
  role="group"
1201
1201
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
1202
1202
  >
@@ -1233,7 +1233,7 @@ subsection: forms
1233
1233
  </div>
1234
1234
 
1235
1235
  <div
1236
- class="pf-v6-c-form__field-group pf-m-expanded"
1236
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1237
1237
  role="group"
1238
1238
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
1239
1239
  >
@@ -1327,7 +1327,7 @@ subsection: forms
1327
1327
  </div>
1328
1328
 
1329
1329
  <div
1330
- class="pf-v6-c-form__field-group"
1330
+ class="pf-v6-c-form__field-group pf-m-expandable"
1331
1331
  role="group"
1332
1332
  aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
1333
1333
  >
@@ -1366,7 +1366,7 @@ subsection: forms
1366
1366
  </div>
1367
1367
 
1368
1368
  <div
1369
- class="pf-v6-c-form__field-group pf-m-expanded"
1369
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1370
1370
  role="group"
1371
1371
  aria-labelledby="form-demo-sections-complex-form-routing-title"
1372
1372
  >
@@ -1552,7 +1552,7 @@ subsection: forms
1552
1552
  </div>
1553
1553
 
1554
1554
  <div
1555
- class="pf-v6-c-form__field-group pf-m-expanded"
1555
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1556
1556
  role="group"
1557
1557
  aria-labelledby="form-demo-sections-complex-form-health-checks-title"
1558
1558
  >
@@ -1657,7 +1657,7 @@ subsection: forms
1657
1657
  </div>
1658
1658
 
1659
1659
  <div
1660
- class="pf-v6-c-form__field-group"
1660
+ class="pf-v6-c-form__field-group pf-m-expandable"
1661
1661
  role="group"
1662
1662
  aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
1663
1663
  >
@@ -1696,7 +1696,7 @@ subsection: forms
1696
1696
  </div>
1697
1697
 
1698
1698
  <div
1699
- class="pf-v6-c-form__field-group"
1699
+ class="pf-v6-c-form__field-group pf-m-expandable"
1700
1700
  role="group"
1701
1701
  aria-labelledby="form-demo-sections-complex-form-deployment-title"
1702
1702
  >
package/docs/demos/JumpLinks/examples/JumpLinks.md CHANGED
@@ -22,12 +22,31 @@ section: components
22
22
  <div class="pf-v6-c-masthead__main">
23
23
  <span class="pf-v6-c-masthead__toggle">
24
24
  <button
25
- class="pf-v6-c-button pf-m-plain"
25
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
26
26
  type="button"
27
27
  aria-label="Global navigation"
28
28
  >
29
29
  <span class="pf-v6-c-button__icon">
30
- <i class="fas fa-bars" aria-hidden="true"></i>
30
+ <svg
31
+ viewBox="0 0 10 10"
32
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
33
+ width="1em"
34
+ height="1em"
35
+ >
36
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
37
+ <path
38
+ class="pf-v6-c-button--hamburger-icon--middle"
39
+ d="M1,5 L9,5"
40
+ />
41
+ <path
42
+ class="pf-v6-c-button--hamburger-icon--arrow"
43
+ d="M1,5 L1,5 L1,5"
44
+ />
45
+ <path
46
+ class="pf-v6-c-button--hamburger-icon--bottom"
47
+ d="M9,9 L1,9"
48
+ />
49
+ </svg>
31
50
  </span>
32
51
  </button>
33
52
  </span>
@@ -135,7 +154,7 @@ section: components
135
154
  </div>
136
155
  <div class="pf-v6-c-toolbar__item">
137
156
  <button
138
- class="pf-v6-c-menu-toggle pf-m-plain"
157
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
139
158
  type="button"
140
159
  aria-expanded="false"
141
160
  aria-label="Settings"
@@ -437,12 +456,31 @@ section: components
437
456
  <div class="pf-v6-c-masthead__main">
438
457
  <span class="pf-v6-c-masthead__toggle">
439
458
  <button
440
- class="pf-v6-c-button pf-m-plain"
459
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
441
460
  type="button"
442
461
  aria-label="Global navigation"
443
462
  >
444
463
  <span class="pf-v6-c-button__icon">
445
- <i class="fas fa-bars" aria-hidden="true"></i>
464
+ <svg
465
+ viewBox="0 0 10 10"
466
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
467
+ width="1em"
468
+ height="1em"
469
+ >
470
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
471
+ <path
472
+ class="pf-v6-c-button--hamburger-icon--middle"
473
+ d="M1,5 L9,5"
474
+ />
475
+ <path
476
+ class="pf-v6-c-button--hamburger-icon--arrow"
477
+ d="M1,5 L1,5 L1,5"
478
+ />
479
+ <path
480
+ class="pf-v6-c-button--hamburger-icon--bottom"
481
+ d="M9,9 L1,9"
482
+ />
483
+ </svg>
446
484
  </span>
447
485
  </button>
448
486
  </span>
@@ -550,7 +588,7 @@ section: components
550
588
  </div>
551
589
  <div class="pf-v6-c-toolbar__item">
552
590
  <button
553
- class="pf-v6-c-menu-toggle pf-m-plain"
591
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
554
592
  type="button"
555
593
  aria-expanded="false"
556
594
  aria-label="Settings"
@@ -852,12 +890,31 @@ section: components
852
890
  <div class="pf-v6-c-masthead__main">
853
891
  <span class="pf-v6-c-masthead__toggle">
854
892
  <button
855
- class="pf-v6-c-button pf-m-plain"
893
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
856
894
  type="button"
857
895
  aria-label="Global navigation"
858
896
  >
859
897
  <span class="pf-v6-c-button__icon">
860
- <i class="fas fa-bars" aria-hidden="true"></i>
898
+ <svg
899
+ viewBox="0 0 10 10"
900
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
901
+ width="1em"
902
+ height="1em"
903
+ >
904
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
905
+ <path
906
+ class="pf-v6-c-button--hamburger-icon--middle"
907
+ d="M1,5 L9,5"
908
+ />
909
+ <path
910
+ class="pf-v6-c-button--hamburger-icon--arrow"
911
+ d="M1,5 L1,5 L1,5"
912
+ />
913
+ <path
914
+ class="pf-v6-c-button--hamburger-icon--bottom"
915
+ d="M9,9 L1,9"
916
+ />
917
+ </svg>
861
918
  </span>
862
919
  </button>
863
920
  </span>
@@ -965,7 +1022,7 @@ section: components
965
1022
  </div>
966
1023
  <div class="pf-v6-c-toolbar__item">
967
1024
  <button
968
- class="pf-v6-c-menu-toggle pf-m-plain"
1025
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
969
1026
  type="button"
970
1027
  aria-expanded="false"
971
1028
  aria-label="Settings"
@@ -1264,12 +1321,31 @@ section: components
1264
1321
  <div class="pf-v6-c-masthead__main">
1265
1322
  <span class="pf-v6-c-masthead__toggle">
1266
1323
  <button
1267
- class="pf-v6-c-button pf-m-plain"
1324
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1268
1325
  type="button"
1269
1326
  aria-label="Global navigation"
1270
1327
  >
1271
1328
  <span class="pf-v6-c-button__icon">
1272
- <i class="fas fa-bars" aria-hidden="true"></i>
1329
+ <svg
1330
+ viewBox="0 0 10 10"
1331
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1332
+ width="1em"
1333
+ height="1em"
1334
+ >
1335
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1336
+ <path
1337
+ class="pf-v6-c-button--hamburger-icon--middle"
1338
+ d="M1,5 L9,5"
1339
+ />
1340
+ <path
1341
+ class="pf-v6-c-button--hamburger-icon--arrow"
1342
+ d="M1,5 L1,5 L1,5"
1343
+ />
1344
+ <path
1345
+ class="pf-v6-c-button--hamburger-icon--bottom"
1346
+ d="M9,9 L1,9"
1347
+ />
1348
+ </svg>
1273
1349
  </span>
1274
1350
  </button>
1275
1351
  </span>
@@ -1377,7 +1453,7 @@ section: components
1377
1453
  </div>
1378
1454
  <div class="pf-v6-c-toolbar__item">
1379
1455
  <button
1380
- class="pf-v6-c-menu-toggle pf-m-plain"
1456
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1381
1457
  type="button"
1382
1458
  aria-expanded="false"
1383
1459
  aria-label="Settings"
@@ -1622,12 +1698,31 @@ section: components
1622
1698
  <div class="pf-v6-c-masthead__main">
1623
1699
  <span class="pf-v6-c-masthead__toggle">
1624
1700
  <button
1625
- class="pf-v6-c-button pf-m-plain"
1701
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1626
1702
  type="button"
1627
1703
  aria-label="Global navigation"
1628
1704
  >
1629
1705
  <span class="pf-v6-c-button__icon">
1630
- <i class="fas fa-bars" aria-hidden="true"></i>
1706
+ <svg
1707
+ viewBox="0 0 10 10"
1708
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1709
+ width="1em"
1710
+ height="1em"
1711
+ >
1712
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1713
+ <path
1714
+ class="pf-v6-c-button--hamburger-icon--middle"
1715
+ d="M1,5 L9,5"
1716
+ />
1717
+ <path
1718
+ class="pf-v6-c-button--hamburger-icon--arrow"
1719
+ d="M1,5 L1,5 L1,5"
1720
+ />
1721
+ <path
1722
+ class="pf-v6-c-button--hamburger-icon--bottom"
1723
+ d="M9,9 L1,9"
1724
+ />
1725
+ </svg>
1631
1726
  </span>
1632
1727
  </button>
1633
1728
  </span>
@@ -1735,7 +1830,7 @@ section: components
1735
1830
  </div>
1736
1831
  <div class="pf-v6-c-toolbar__item">
1737
1832
  <button
1738
- class="pf-v6-c-menu-toggle pf-m-plain"
1833
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1739
1834
  type="button"
1740
1835
  aria-expanded="false"
1741
1836
  aria-label="Settings"
@@ -2025,12 +2120,31 @@ section: components
2025
2120
  <div class="pf-v6-c-masthead__main">
2026
2121
  <span class="pf-v6-c-masthead__toggle">
2027
2122
  <button
2028
- class="pf-v6-c-button pf-m-plain"
2123
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2029
2124
  type="button"
2030
2125
  aria-label="Global navigation"
2031
2126
  >
2032
2127
  <span class="pf-v6-c-button__icon">
2033
- <i class="fas fa-bars" aria-hidden="true"></i>
2128
+ <svg
2129
+ viewBox="0 0 10 10"
2130
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2131
+ width="1em"
2132
+ height="1em"
2133
+ >
2134
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2135
+ <path
2136
+ class="pf-v6-c-button--hamburger-icon--middle"
2137
+ d="M1,5 L9,5"
2138
+ />
2139
+ <path
2140
+ class="pf-v6-c-button--hamburger-icon--arrow"
2141
+ d="M1,5 L1,5 L1,5"
2142
+ />
2143
+ <path
2144
+ class="pf-v6-c-button--hamburger-icon--bottom"
2145
+ d="M9,9 L1,9"
2146
+ />
2147
+ </svg>
2034
2148
  </span>
2035
2149
  </button>
2036
2150
  </span>
@@ -2138,7 +2252,7 @@ section: components
2138
2252
  </div>
2139
2253
  <div class="pf-v6-c-toolbar__item">
2140
2254
  <button
2141
- class="pf-v6-c-menu-toggle pf-m-plain"
2255
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2142
2256
  type="button"
2143
2257
  aria-expanded="false"
2144
2258
  aria-label="Settings"