@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (168) hide show
  1. package/README.md +22 -14
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +35 -4
  59. package/components/Menu/menu.scss +32 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +7 -1
  71. package/components/Panel/panel.scss +7 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1390 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2837 -437
  165. package/patternfly.css +2839 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/Form/examples/BasicForms.md CHANGED
@@ -59,7 +59,19 @@ subsection: forms
59
59
  aria-describedby="-phone"
60
60
  >
61
61
  <span class="pf-v6-c-button__icon">
62
- <i class="fas fa-question-circle" aria-hidden="true"></i>
62
+ <svg
63
+ class="pf-v6-svg"
64
+ viewBox="0 0 1024 1024"
65
+ fill="currentColor"
66
+ aria-hidden="true"
67
+ role="img"
68
+ width="1em"
69
+ height="1em"
70
+ >
71
+ <path
72
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
73
+ />
74
+ </svg>
63
75
  </span>
64
76
  </span></span>
65
77
  </div>
@@ -259,7 +271,19 @@ subsection: forms
259
271
  aria-describedby="form-demo-horizontal-contact-legend"
260
272
  >
261
273
  <span class="pf-v6-c-button__icon">
262
- <i class="fas fa-question-circle" aria-hidden="true"></i>
274
+ <svg
275
+ class="pf-v6-svg"
276
+ viewBox="0 0 1024 1024"
277
+ fill="currentColor"
278
+ aria-hidden="true"
279
+ role="img"
280
+ width="1em"
281
+ height="1em"
282
+ >
283
+ <path
284
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
285
+ />
286
+ </svg>
263
287
  </span>
264
288
  </span></span>
265
289
  </div>
@@ -538,7 +562,19 @@ subsection: forms
538
562
  aria-describedby="form-demo-sections-repeatable-fields-clientid"
539
563
  >
540
564
  <span class="pf-v6-c-button__icon">
541
- <i class="fas fa-question-circle" aria-hidden="true"></i>
565
+ <svg
566
+ class="pf-v6-svg"
567
+ viewBox="0 0 1024 1024"
568
+ fill="currentColor"
569
+ aria-hidden="true"
570
+ role="img"
571
+ width="1em"
572
+ height="1em"
573
+ >
574
+ <path
575
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
576
+ />
577
+ </svg>
542
578
  </span>
543
579
  </span></span>
544
580
  </div>
@@ -568,7 +604,19 @@ subsection: forms
568
604
  aria-describedby="form-demo-sections-repeatable-fields-name"
569
605
  >
570
606
  <span class="pf-v6-c-button__icon">
571
- <i class="fas fa-question-circle" aria-hidden="true"></i>
607
+ <svg
608
+ class="pf-v6-svg"
609
+ viewBox="0 0 1024 1024"
610
+ fill="currentColor"
611
+ aria-hidden="true"
612
+ role="img"
613
+ width="1em"
614
+ height="1em"
615
+ >
616
+ <path
617
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
618
+ />
619
+ </svg>
572
620
  </span>
573
621
  </span></span>
574
622
  </div>
@@ -598,7 +646,19 @@ subsection: forms
598
646
  aria-describedby="form-demo-sections-repeatable-fields-description"
599
647
  >
600
648
  <span class="pf-v6-c-button__icon">
601
- <i class="fas fa-question-circle" aria-hidden="true"></i>
649
+ <svg
650
+ class="pf-v6-svg"
651
+ viewBox="0 0 1024 1024"
652
+ fill="currentColor"
653
+ aria-hidden="true"
654
+ role="img"
655
+ width="1em"
656
+ height="1em"
657
+ >
658
+ <path
659
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
660
+ />
661
+ </svg>
602
662
  </span>
603
663
  </span></span>
604
664
  </div>
@@ -639,7 +699,19 @@ subsection: forms
639
699
  aria-describedby="form-demo-sections-repeatable-fields-section2-rooturl"
640
700
  >
641
701
  <span class="pf-v6-c-button__icon">
642
- <i class="fas fa-question-circle" aria-hidden="true"></i>
702
+ <svg
703
+ class="pf-v6-svg"
704
+ viewBox="0 0 1024 1024"
705
+ fill="currentColor"
706
+ aria-hidden="true"
707
+ role="img"
708
+ width="1em"
709
+ height="1em"
710
+ >
711
+ <path
712
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
713
+ />
714
+ </svg>
643
715
  </span>
644
716
  </span></span>
645
717
  </div>
@@ -669,7 +741,19 @@ subsection: forms
669
741
  aria-describedby="form-demo-sections-repeatable-fields-section2-uris"
670
742
  >
671
743
  <span class="pf-v6-c-button__icon">
672
- <i class="fas fa-question-circle" aria-hidden="true"></i>
744
+ <svg
745
+ class="pf-v6-svg"
746
+ viewBox="0 0 1024 1024"
747
+ fill="currentColor"
748
+ aria-hidden="true"
749
+ role="img"
750
+ width="1em"
751
+ height="1em"
752
+ >
753
+ <path
754
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
755
+ />
756
+ </svg>
673
757
  </span>
674
758
  </span></span>
675
759
  </div>
@@ -769,7 +853,19 @@ subsection: forms
769
853
  aria-describedby="form-demo-sections-repeatable-fields-section2-home-url"
770
854
  >
771
855
  <span class="pf-v6-c-button__icon">
772
- <i class="fas fa-question-circle" aria-hidden="true"></i>
856
+ <svg
857
+ class="pf-v6-svg"
858
+ viewBox="0 0 1024 1024"
859
+ fill="currentColor"
860
+ aria-hidden="true"
861
+ role="img"
862
+ width="1em"
863
+ height="1em"
864
+ >
865
+ <path
866
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
867
+ />
868
+ </svg>
773
869
  </span>
774
870
  </span></span>
775
871
  </div>
@@ -808,7 +904,19 @@ subsection: forms
808
904
  aria-describedby="form-demo-sections-complex-form-name"
809
905
  >
810
906
  <span class="pf-v6-c-button__icon">
811
- <i class="fas fa-question-circle" aria-hidden="true"></i>
907
+ <svg
908
+ class="pf-v6-svg"
909
+ viewBox="0 0 1024 1024"
910
+ fill="currentColor"
911
+ aria-hidden="true"
912
+ role="img"
913
+ width="1em"
914
+ height="1em"
915
+ >
916
+ <path
917
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
918
+ />
919
+ </svg>
812
920
  </span>
813
921
  </span></span>
814
922
  </div>
@@ -839,7 +947,19 @@ subsection: forms
839
947
  aria-describedby="form-demo-sections-complex-form-labels"
840
948
  >
841
949
  <span class="pf-v6-c-button__icon">
842
- <i class="fas fa-question-circle" aria-hidden="true"></i>
950
+ <svg
951
+ class="pf-v6-svg"
952
+ viewBox="0 0 1024 1024"
953
+ fill="currentColor"
954
+ aria-hidden="true"
955
+ role="img"
956
+ width="1em"
957
+ height="1em"
958
+ >
959
+ <path
960
+ d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
961
+ />
962
+ </svg>
843
963
  </span>
844
964
  </span></span>
845
965
  </div>
@@ -929,7 +1049,7 @@ subsection: forms
929
1049
  </div>
930
1050
 
931
1051
  <div
932
- class="pf-v6-c-form__field-group"
1052
+ class="pf-v6-c-form__field-group pf-m-expandable"
933
1053
  role="group"
934
1054
  aria-labelledby="form-demo-sections-complex-form-alerting-title"
935
1055
  >
@@ -966,7 +1086,7 @@ subsection: forms
966
1086
  </div>
967
1087
 
968
1088
  <div
969
- class="pf-v6-c-form__field-group"
1089
+ class="pf-v6-c-form__field-group pf-m-expandable"
970
1090
  role="group"
971
1091
  aria-labelledby="form-demo-sections-complex-form-query-title"
972
1092
  >
@@ -1003,7 +1123,7 @@ subsection: forms
1003
1123
  </div>
1004
1124
 
1005
1125
  <div
1006
- class="pf-v6-c-form__field-group"
1126
+ class="pf-v6-c-form__field-group pf-m-expandable"
1007
1127
  role="group"
1008
1128
  aria-labelledby="form-demo-sections-complex-form-affinity-title"
1009
1129
  >
@@ -1037,16 +1157,16 @@ subsection: forms
1037
1157
  >If specified, the pod's scheduling constraints.</div>
1038
1158
  </div>
1039
1159
  </div>
1040
- <div class="pf-v6-c-form__field-group-body" hidden>
1160
+ <div class="pf-v6-c-form__field-group-body" inert>
1041
1161
  <div
1042
- class="pf-v6-c-form__field-group pf-m-expanded"
1162
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1043
1163
  role="group"
1044
1164
  aria-labelledby="form-demo-sections-complex-form-node-affinity-title"
1045
1165
  >
1046
1166
  <div class="pf-v6-c-form__field-group-toggle">
1047
1167
  <div class="pf-v6-c-form__field-group-toggle-button">
1048
1168
  <button
1049
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1169
+ class="pf-v6-c-button pf-m-plain"
1050
1170
  id="form-demo-sections-complex-form-node-affinity-toggle"
1051
1171
  type="button"
1052
1172
  aria-expanded="true"
@@ -1076,7 +1196,7 @@ subsection: forms
1076
1196
  </div>
1077
1197
  <div class="pf-v6-c-form__field-group-body">
1078
1198
  <div
1079
- class="pf-v6-c-form__field-group"
1199
+ class="pf-v6-c-form__field-group pf-m-expandable"
1080
1200
  role="group"
1081
1201
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-title"
1082
1202
  >
@@ -1113,14 +1233,14 @@ subsection: forms
1113
1233
  </div>
1114
1234
 
1115
1235
  <div
1116
- class="pf-v6-c-form__field-group pf-m-expanded"
1236
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1117
1237
  role="group"
1118
1238
  aria-labelledby="form-demo-sections-complex-form-node-affinity-required-2-title"
1119
1239
  >
1120
1240
  <div class="pf-v6-c-form__field-group-toggle">
1121
1241
  <div class="pf-v6-c-form__field-group-toggle-button">
1122
1242
  <button
1123
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1243
+ class="pf-v6-c-button pf-m-plain"
1124
1244
  id="form-demo-sections-complex-form-node-affinity-required-2-toggle"
1125
1245
  type="button"
1126
1246
  aria-expanded="true"
@@ -1207,7 +1327,7 @@ subsection: forms
1207
1327
  </div>
1208
1328
 
1209
1329
  <div
1210
- class="pf-v6-c-form__field-group"
1330
+ class="pf-v6-c-form__field-group pf-m-expandable"
1211
1331
  role="group"
1212
1332
  aria-labelledby="form-demo-sections-complex-form-pod-affinity-title"
1213
1333
  >
@@ -1246,14 +1366,14 @@ subsection: forms
1246
1366
  </div>
1247
1367
 
1248
1368
  <div
1249
- class="pf-v6-c-form__field-group pf-m-expanded"
1369
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1250
1370
  role="group"
1251
1371
  aria-labelledby="form-demo-sections-complex-form-routing-title"
1252
1372
  >
1253
1373
  <div class="pf-v6-c-form__field-group-toggle">
1254
1374
  <div class="pf-v6-c-form__field-group-toggle-button">
1255
1375
  <button
1256
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1376
+ class="pf-v6-c-button pf-m-plain"
1257
1377
  id="form-demo-sections-complex-form-routing-toggle"
1258
1378
  type="button"
1259
1379
  aria-expanded="true"
@@ -1432,14 +1552,14 @@ subsection: forms
1432
1552
  </div>
1433
1553
 
1434
1554
  <div
1435
- class="pf-v6-c-form__field-group pf-m-expanded"
1555
+ class="pf-v6-c-form__field-group pf-m-expandable pf-m-expanded"
1436
1556
  role="group"
1437
1557
  aria-labelledby="form-demo-sections-complex-form-health-checks-title"
1438
1558
  >
1439
1559
  <div class="pf-v6-c-form__field-group-toggle">
1440
1560
  <div class="pf-v6-c-form__field-group-toggle-button">
1441
1561
  <button
1442
- class="pf-v6-c-button pf-m-expanded pf-m-plain"
1562
+ class="pf-v6-c-button pf-m-plain"
1443
1563
  id="form-demo-sections-complex-form-health-checks-toggle"
1444
1564
  type="button"
1445
1565
  aria-expanded="true"
@@ -1537,7 +1657,7 @@ subsection: forms
1537
1657
  </div>
1538
1658
 
1539
1659
  <div
1540
- class="pf-v6-c-form__field-group"
1660
+ class="pf-v6-c-form__field-group pf-m-expandable"
1541
1661
  role="group"
1542
1662
  aria-labelledby="form-demo-sections-complex-form-build-configuration-title"
1543
1663
  >
@@ -1576,7 +1696,7 @@ subsection: forms
1576
1696
  </div>
1577
1697
 
1578
1698
  <div
1579
- class="pf-v6-c-form__field-group"
1699
+ class="pf-v6-c-form__field-group pf-m-expandable"
1580
1700
  role="group"
1581
1701
  aria-labelledby="form-demo-sections-complex-form-deployment-title"
1582
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"