@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/DescriptionList/examples/DescriptionList.md CHANGED
@@ -20,12 +20,31 @@ cssPrefix: pf-d-description-list
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 @@ cssPrefix: pf-d-description-list
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"
@@ -272,7 +291,10 @@ cssPrefix: pf-d-description-list
272
291
  </div>
273
292
  <hr class="pf-v6-c-divider" />
274
293
  <div class="pf-v6-c-card__body">
275
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
294
+ <dl
295
+ class="pf-v6-c-description-list pf-m-auto-fit"
296
+ aria-label="Details"
297
+ >
276
298
  <div class="pf-v6-c-description-list__group">
277
299
  <dt class="pf-v6-c-description-list__term">
278
300
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -387,12 +409,31 @@ cssPrefix: pf-d-description-list
387
409
  <div class="pf-v6-c-masthead__main">
388
410
  <span class="pf-v6-c-masthead__toggle">
389
411
  <button
390
- class="pf-v6-c-button pf-m-plain"
412
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
391
413
  type="button"
392
414
  aria-label="Global navigation"
393
415
  >
394
416
  <span class="pf-v6-c-button__icon">
395
- <i class="fas fa-bars" aria-hidden="true"></i>
417
+ <svg
418
+ viewBox="0 0 10 10"
419
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
420
+ width="1em"
421
+ height="1em"
422
+ >
423
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
424
+ <path
425
+ class="pf-v6-c-button--hamburger-icon--middle"
426
+ d="M1,5 L9,5"
427
+ />
428
+ <path
429
+ class="pf-v6-c-button--hamburger-icon--arrow"
430
+ d="M1,5 L1,5 L1,5"
431
+ />
432
+ <path
433
+ class="pf-v6-c-button--hamburger-icon--bottom"
434
+ d="M9,9 L1,9"
435
+ />
436
+ </svg>
396
437
  </span>
397
438
  </button>
398
439
  </span>
@@ -500,7 +541,7 @@ cssPrefix: pf-d-description-list
500
541
  </div>
501
542
  <div class="pf-v6-c-toolbar__item">
502
543
  <button
503
- class="pf-v6-c-menu-toggle pf-m-plain"
544
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
504
545
  type="button"
505
546
  aria-expanded="false"
506
547
  aria-label="Settings"
@@ -736,25 +777,6 @@ cssPrefix: pf-d-description-list
736
777
  <button
737
778
  type="button"
738
779
  class="pf-v6-c-tabs__link"
739
- onclick="
740
- event.preventDefault();
741
- ((e) => {
742
- const el = this,
743
- li = this.closest('li'),
744
- ul = this.closest('ul'),
745
- tabs = this.closest('.pf-v6-c-tabs'),
746
- left = Math.round(li.offsetLeft),
747
- top = Math.round(li.offsetTop),
748
- width = Math.round(li.offsetWidth),
749
- height = Math.round(li.offsetHeight);
750
-
751
- ul.querySelectorAll('li').forEach(function(el) {
752
- el.classList.remove('pf-m-current')});
753
- li.classList.add('pf-m-current');
754
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
755
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
756
- }
757
- )()"
758
780
  role="tab"
759
781
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
760
782
  >
@@ -765,25 +787,6 @@ cssPrefix: pf-d-description-list
765
787
  <button
766
788
  type="button"
767
789
  class="pf-v6-c-tabs__link"
768
- onclick="
769
- event.preventDefault();
770
- ((e) => {
771
- const el = this,
772
- li = this.closest('li'),
773
- ul = this.closest('ul'),
774
- tabs = this.closest('.pf-v6-c-tabs'),
775
- left = Math.round(li.offsetLeft),
776
- top = Math.round(li.offsetTop),
777
- width = Math.round(li.offsetWidth),
778
- height = Math.round(li.offsetHeight);
779
-
780
- ul.querySelectorAll('li').forEach(function(el) {
781
- el.classList.remove('pf-m-current')});
782
- li.classList.add('pf-m-current');
783
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
784
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
785
- }
786
- )()"
787
790
  role="tab"
788
791
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
789
792
  >
@@ -804,6 +807,7 @@ cssPrefix: pf-d-description-list
804
807
  <div class="pf-v6-c-tab-content__body">
805
808
  <dl
806
809
  class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-compact"
810
+ aria-label="Overview"
807
811
  >
808
812
  <div class="pf-v6-c-description-list__group">
809
813
  <dt class="pf-v6-c-description-list__term">
@@ -1061,12 +1065,31 @@ cssPrefix: pf-d-description-list
1061
1065
  <div class="pf-v6-c-masthead__main">
1062
1066
  <span class="pf-v6-c-masthead__toggle">
1063
1067
  <button
1064
- class="pf-v6-c-button pf-m-plain"
1068
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1065
1069
  type="button"
1066
1070
  aria-label="Global navigation"
1067
1071
  >
1068
1072
  <span class="pf-v6-c-button__icon">
1069
- <i class="fas fa-bars" aria-hidden="true"></i>
1073
+ <svg
1074
+ viewBox="0 0 10 10"
1075
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1076
+ width="1em"
1077
+ height="1em"
1078
+ >
1079
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1080
+ <path
1081
+ class="pf-v6-c-button--hamburger-icon--middle"
1082
+ d="M1,5 L9,5"
1083
+ />
1084
+ <path
1085
+ class="pf-v6-c-button--hamburger-icon--arrow"
1086
+ d="M1,5 L1,5 L1,5"
1087
+ />
1088
+ <path
1089
+ class="pf-v6-c-button--hamburger-icon--bottom"
1090
+ d="M9,9 L1,9"
1091
+ />
1092
+ </svg>
1070
1093
  </span>
1071
1094
  </button>
1072
1095
  </span>
@@ -1174,7 +1197,7 @@ cssPrefix: pf-d-description-list
1174
1197
  </div>
1175
1198
  <div class="pf-v6-c-toolbar__item">
1176
1199
  <button
1177
- class="pf-v6-c-menu-toggle pf-m-plain"
1200
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1178
1201
  type="button"
1179
1202
  aria-expanded="false"
1180
1203
  aria-label="Settings"
@@ -1315,7 +1338,10 @@ cssPrefix: pf-d-description-list
1315
1338
  <h2 class="pf-v6-c-title pf-m-lg">Service overview</h2>
1316
1339
  </div>
1317
1340
  <div class="pf-v6-l-grid__item">
1318
- <dl class="pf-v6-c-description-list pf-m-2-col-on-xl">
1341
+ <dl
1342
+ class="pf-v6-c-description-list pf-m-2-col-on-xl"
1343
+ aria-label="Service overview"
1344
+ >
1319
1345
  <div class="pf-v6-c-description-list__group">
1320
1346
  <dt class="pf-v6-c-description-list__term">
1321
1347
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1414,7 +1440,10 @@ cssPrefix: pf-d-description-list
1414
1440
  <h2 class="pf-v6-c-title pf-m-lg">Service routing</h2>
1415
1441
  </div>
1416
1442
  <div class="pf-v6-l-grid__item">
1417
- <dl class="pf-v6-c-description-list">
1443
+ <dl
1444
+ class="pf-v6-c-description-list"
1445
+ aria-label="Service routing"
1446
+ >
1418
1447
  <div class="pf-v6-c-description-list__group">
1419
1448
  <dt class="pf-v6-c-description-list__term">
1420
1449
  <span
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"