@patternfly/patternfly 6.3.0-prerelease.9 → 6.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/assets/images/icon-outlined-star.hbs +3 -0
  2. package/assets/images/icon-star.hbs +3 -0
  3. package/base/patternfly-common.css +46 -11
  4. package/base/patternfly-common.scss +58 -13
  5. package/components/Accordion/accordion.css +72 -3
  6. package/components/Accordion/accordion.scss +78 -6
  7. package/components/Alert/alert-group.css +52 -31
  8. package/components/Alert/alert-group.scss +77 -46
  9. package/components/Button/button.css +154 -6
  10. package/components/Button/button.scss +160 -8
  11. package/components/DataList/data-list.css +2 -2
  12. package/components/DataList/data-list.scss +2 -2
  13. package/components/DualListSelector/dual-list-selector.css +36 -0
  14. package/components/DualListSelector/dual-list-selector.scss +43 -0
  15. package/components/ExpandableSection/expandable-section.css +63 -1
  16. package/components/ExpandableSection/expandable-section.scss +76 -2
  17. package/components/FileUpload/file-upload.css +3 -3
  18. package/components/FileUpload/file-upload.scss +3 -3
  19. package/components/Form/form.css +40 -1
  20. package/components/Form/form.scss +47 -1
  21. package/components/FormControl/form-control.css +16 -0
  22. package/components/FormControl/form-control.scss +9 -0
  23. package/components/InputGroup/input-group.css +80 -0
  24. package/components/InputGroup/input-group.scss +95 -0
  25. package/components/Menu/menu.css +24 -4
  26. package/components/Menu/menu.scss +20 -5
  27. package/components/MenuToggle/menu-toggle.css +30 -0
  28. package/components/MenuToggle/menu-toggle.scss +33 -0
  29. package/components/Nav/nav.css +22 -8
  30. package/components/Nav/nav.scss +22 -9
  31. package/components/Page/page.css +62 -3
  32. package/components/Page/page.scss +44 -3
  33. package/components/Progress/progress.css +16 -0
  34. package/components/Progress/progress.scss +11 -1
  35. package/components/ProgressStepper/progress-stepper.scss +1 -0
  36. package/components/Spinner/spinner.css +5 -0
  37. package/components/Spinner/spinner.scss +6 -0
  38. package/components/Table/table-grid.css +51 -5
  39. package/components/Table/table-grid.scss +22 -1
  40. package/components/Table/table.css +83 -1
  41. package/components/Table/table.scss +123 -1
  42. package/components/Tabs/tabs.css +25 -15
  43. package/components/Tabs/tabs.scss +26 -13
  44. package/components/TextInputGroup/text-input-group.css +16 -0
  45. package/components/TextInputGroup/text-input-group.scss +8 -0
  46. package/components/Timestamp/timestamp.css +4 -0
  47. package/components/Timestamp/timestamp.scss +7 -0
  48. package/components/TreeView/tree-view.css +39 -0
  49. package/components/TreeView/tree-view.scss +42 -2
  50. package/components/Truncate/truncate.css +1 -0
  51. package/components/Truncate/truncate.scss +3 -0
  52. package/components/_index.css +896 -83
  53. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  54. package/docs/components/Button/examples/Button.md +148 -5
  55. package/docs/components/Card/examples/Card.md +8 -8
  56. package/docs/components/CodeBlock/examples/CodeBlock.md +5 -5
  57. package/docs/components/DataList/examples/DataList.md +23 -23
  58. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  59. package/docs/components/ExpandableSection/examples/ExpandableSection.md +17 -12
  60. package/docs/components/Form/examples/Form.md +1047 -126
  61. package/docs/components/Hint/examples/Hint.md +3 -3
  62. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -2
  63. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  64. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  65. package/docs/components/Masthead/examples/masthead.md +90 -12
  66. package/docs/components/Menu/examples/Menu.md +122 -6
  67. package/docs/components/MenuToggle/examples/MenuToggle.md +90 -51
  68. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  69. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  70. package/docs/components/Page/examples/Page.md +147 -14
  71. package/docs/components/Pagination/examples/Pagination.md +12 -12
  72. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  73. package/docs/components/Slider/examples/Slider.md +2 -2
  74. package/docs/components/Spinner/examples/Spinner.md +10 -0
  75. package/docs/components/Table/examples/Table.md +9428 -6173
  76. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  77. package/docs/components/TextInputGroup/examples/TextInputGroup.md +45 -5
  78. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  79. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  80. package/docs/demos/Alert/examples/Alert.md +66 -9
  81. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  82. package/docs/demos/Banner/examples/Banner.md +47 -6
  83. package/docs/demos/Card/examples/Card.md +5 -62
  84. package/docs/demos/CardView/examples/CardView.md +24 -5
  85. package/docs/demos/Dashboard/examples/Dashboard.md +24 -5
  86. package/docs/demos/DataList/examples/DataList.md +100 -24
  87. package/docs/demos/DescriptionList/examples/DescriptionList.md +66 -47
  88. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  89. package/docs/demos/Form/examples/BasicForms.md +12 -12
  90. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  91. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  92. package/docs/demos/Modal/examples/Modal.md +132 -18
  93. package/docs/demos/Nav/examples/Nav.md +111 -16
  94. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  95. package/docs/demos/Page/examples/Page.md +309 -43
  96. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  97. package/docs/demos/Skeleton/examples/Skeleton.md +22 -3
  98. package/docs/demos/Table/examples/Table.md +449 -155
  99. package/docs/demos/Tabs/examples/Tabs.md +137 -593
  100. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  101. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  102. package/package.json +5 -5
  103. package/patternfly-base-no-globals.css +45 -11
  104. package/patternfly-base.css +45 -11
  105. package/patternfly-no-globals.css +941 -94
  106. package/patternfly.css +941 -94
  107. package/patternfly.min.css +1 -1
  108. package/patternfly.min.css.map +1 -1
  109. package/sass-utilities/mixins.scss +54 -0
@@ -23,12 +23,31 @@ wrapperTag: div
23
23
  <div class="pf-v6-c-masthead__main">
24
24
  <span class="pf-v6-c-masthead__toggle">
25
25
  <button
26
- class="pf-v6-c-button pf-m-plain"
26
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
27
27
  type="button"
28
28
  aria-label="Global navigation"
29
29
  >
30
30
  <span class="pf-v6-c-button__icon">
31
- <i class="fas fa-bars" aria-hidden="true"></i>
31
+ <svg
32
+ viewBox="0 0 10 10"
33
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
34
+ width="1em"
35
+ height="1em"
36
+ >
37
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--middle"
40
+ d="M1,5 L9,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--arrow"
44
+ d="M1,5 L1,5 L1,5"
45
+ />
46
+ <path
47
+ class="pf-v6-c-button--hamburger-icon--bottom"
48
+ d="M9,9 L1,9"
49
+ />
50
+ </svg>
32
51
  </span>
33
52
  </button>
34
53
  </span>
@@ -136,7 +155,7 @@ wrapperTag: div
136
155
  </div>
137
156
  <div class="pf-v6-c-toolbar__item">
138
157
  <button
139
- class="pf-v6-c-menu-toggle pf-m-plain"
158
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
140
159
  type="button"
141
160
  aria-expanded="false"
142
161
  aria-label="Settings"
@@ -456,7 +475,7 @@ wrapperTag: div
456
475
  <div class="pf-v6-c-pagination pf-m-compact">
457
476
  <div class="pf-v6-c-pagination__page-menu">
458
477
  <button
459
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
478
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
460
479
  type="button"
461
480
  aria-expanded="false"
462
481
  aria-label="Menu toggle"
@@ -1001,25 +1020,6 @@ wrapperTag: div
1001
1020
  <button
1002
1021
  type="button"
1003
1022
  class="pf-v6-c-tabs__link"
1004
- onclick="
1005
- event.preventDefault();
1006
- ((e) => {
1007
- const el = this,
1008
- li = this.closest('li'),
1009
- ul = this.closest('ul'),
1010
- tabs = this.closest('.pf-v6-c-tabs'),
1011
- left = Math.round(li.offsetLeft),
1012
- top = Math.round(li.offsetTop),
1013
- width = Math.round(li.offsetWidth),
1014
- height = Math.round(li.offsetHeight);
1015
-
1016
- ul.querySelectorAll('li').forEach(function(el) {
1017
- el.classList.remove('pf-m-current')});
1018
- li.classList.add('pf-m-current');
1019
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1020
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1021
- }
1022
- )()"
1023
1023
  role="tab"
1024
1024
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab1-panel"
1025
1025
  id="primary-detail-expanded-example-drawer-tabs-tab1-link"
@@ -1031,25 +1031,6 @@ wrapperTag: div
1031
1031
  <button
1032
1032
  type="button"
1033
1033
  class="pf-v6-c-tabs__link"
1034
- onclick="
1035
- event.preventDefault();
1036
- ((e) => {
1037
- const el = this,
1038
- li = this.closest('li'),
1039
- ul = this.closest('ul'),
1040
- tabs = this.closest('.pf-v6-c-tabs'),
1041
- left = Math.round(li.offsetLeft),
1042
- top = Math.round(li.offsetTop),
1043
- width = Math.round(li.offsetWidth),
1044
- height = Math.round(li.offsetHeight);
1045
-
1046
- ul.querySelectorAll('li').forEach(function(el) {
1047
- el.classList.remove('pf-m-current')});
1048
- li.classList.add('pf-m-current');
1049
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1050
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1051
- }
1052
- )()"
1053
1034
  role="tab"
1054
1035
  aria-controls="primary-detail-expanded-example-drawer-tabs-tab2-panel"
1055
1036
  id="primary-detail-expanded-example-drawer-tabs-tab2-link"
@@ -1192,12 +1173,31 @@ wrapperTag: div
1192
1173
  <div class="pf-v6-c-masthead__main">
1193
1174
  <span class="pf-v6-c-masthead__toggle">
1194
1175
  <button
1195
- class="pf-v6-c-button pf-m-plain"
1176
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1196
1177
  type="button"
1197
1178
  aria-label="Global navigation"
1198
1179
  >
1199
1180
  <span class="pf-v6-c-button__icon">
1200
- <i class="fas fa-bars" aria-hidden="true"></i>
1181
+ <svg
1182
+ viewBox="0 0 10 10"
1183
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1184
+ width="1em"
1185
+ height="1em"
1186
+ >
1187
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1188
+ <path
1189
+ class="pf-v6-c-button--hamburger-icon--middle"
1190
+ d="M1,5 L9,5"
1191
+ />
1192
+ <path
1193
+ class="pf-v6-c-button--hamburger-icon--arrow"
1194
+ d="M1,5 L1,5 L1,5"
1195
+ />
1196
+ <path
1197
+ class="pf-v6-c-button--hamburger-icon--bottom"
1198
+ d="M9,9 L1,9"
1199
+ />
1200
+ </svg>
1201
1201
  </span>
1202
1202
  </button>
1203
1203
  </span>
@@ -1305,7 +1305,7 @@ wrapperTag: div
1305
1305
  </div>
1306
1306
  <div class="pf-v6-c-toolbar__item">
1307
1307
  <button
1308
- class="pf-v6-c-menu-toggle pf-m-plain"
1308
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1309
1309
  type="button"
1310
1310
  aria-expanded="false"
1311
1311
  aria-label="Settings"
@@ -1626,7 +1626,7 @@ wrapperTag: div
1626
1626
  <div class="pf-v6-c-pagination pf-m-compact">
1627
1627
  <div class="pf-v6-c-pagination__page-menu">
1628
1628
  <button
1629
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1629
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1630
1630
  type="button"
1631
1631
  aria-expanded="false"
1632
1632
  aria-label="Menu toggle"
@@ -2243,12 +2243,31 @@ wrapperTag: div
2243
2243
  <div class="pf-v6-c-masthead__main">
2244
2244
  <span class="pf-v6-c-masthead__toggle">
2245
2245
  <button
2246
- class="pf-v6-c-button pf-m-plain"
2246
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2247
2247
  type="button"
2248
2248
  aria-label="Global navigation"
2249
2249
  >
2250
2250
  <span class="pf-v6-c-button__icon">
2251
- <i class="fas fa-bars" aria-hidden="true"></i>
2251
+ <svg
2252
+ viewBox="0 0 10 10"
2253
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2254
+ width="1em"
2255
+ height="1em"
2256
+ >
2257
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2258
+ <path
2259
+ class="pf-v6-c-button--hamburger-icon--middle"
2260
+ d="M1,5 L9,5"
2261
+ />
2262
+ <path
2263
+ class="pf-v6-c-button--hamburger-icon--arrow"
2264
+ d="M1,5 L1,5 L1,5"
2265
+ />
2266
+ <path
2267
+ class="pf-v6-c-button--hamburger-icon--bottom"
2268
+ d="M9,9 L1,9"
2269
+ />
2270
+ </svg>
2252
2271
  </span>
2253
2272
  </button>
2254
2273
  </span>
@@ -2356,7 +2375,7 @@ wrapperTag: div
2356
2375
  </div>
2357
2376
  <div class="pf-v6-c-toolbar__item">
2358
2377
  <button
2359
- class="pf-v6-c-menu-toggle pf-m-plain"
2378
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2360
2379
  type="button"
2361
2380
  aria-expanded="false"
2362
2381
  aria-label="Settings"
@@ -2621,7 +2640,7 @@ wrapperTag: div
2621
2640
  <div class="pf-v6-c-pagination pf-m-compact">
2622
2641
  <div class="pf-v6-c-pagination__page-menu">
2623
2642
  <button
2624
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2643
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2625
2644
  type="button"
2626
2645
  aria-expanded="false"
2627
2646
  aria-label="Menu toggle"
@@ -3238,12 +3257,31 @@ wrapperTag: div
3238
3257
  <div class="pf-v6-c-masthead__main">
3239
3258
  <span class="pf-v6-c-masthead__toggle">
3240
3259
  <button
3241
- class="pf-v6-c-button pf-m-plain"
3260
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3242
3261
  type="button"
3243
3262
  aria-label="Global navigation"
3244
3263
  >
3245
3264
  <span class="pf-v6-c-button__icon">
3246
- <i class="fas fa-bars" aria-hidden="true"></i>
3265
+ <svg
3266
+ viewBox="0 0 10 10"
3267
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3268
+ width="1em"
3269
+ height="1em"
3270
+ >
3271
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3272
+ <path
3273
+ class="pf-v6-c-button--hamburger-icon--middle"
3274
+ d="M1,5 L9,5"
3275
+ />
3276
+ <path
3277
+ class="pf-v6-c-button--hamburger-icon--arrow"
3278
+ d="M1,5 L1,5 L1,5"
3279
+ />
3280
+ <path
3281
+ class="pf-v6-c-button--hamburger-icon--bottom"
3282
+ d="M9,9 L1,9"
3283
+ />
3284
+ </svg>
3247
3285
  </span>
3248
3286
  </button>
3249
3287
  </span>
@@ -3351,7 +3389,7 @@ wrapperTag: div
3351
3389
  </div>
3352
3390
  <div class="pf-v6-c-toolbar__item">
3353
3391
  <button
3354
- class="pf-v6-c-menu-toggle pf-m-plain"
3392
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3355
3393
  type="button"
3356
3394
  aria-expanded="false"
3357
3395
  aria-label="Settings"
@@ -3686,7 +3724,7 @@ wrapperTag: div
3686
3724
  <div class="pf-v6-c-pagination pf-m-compact">
3687
3725
  <div class="pf-v6-c-pagination__page-menu">
3688
3726
  <button
3689
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3727
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3690
3728
  type="button"
3691
3729
  aria-expanded="false"
3692
3730
  aria-label="Menu toggle"
@@ -4351,12 +4389,31 @@ wrapperTag: div
4351
4389
  <div class="pf-v6-c-masthead__main">
4352
4390
  <span class="pf-v6-c-masthead__toggle">
4353
4391
  <button
4354
- class="pf-v6-c-button pf-m-plain"
4392
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4355
4393
  type="button"
4356
4394
  aria-label="Global navigation"
4357
4395
  >
4358
4396
  <span class="pf-v6-c-button__icon">
4359
- <i class="fas fa-bars" aria-hidden="true"></i>
4397
+ <svg
4398
+ viewBox="0 0 10 10"
4399
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4400
+ width="1em"
4401
+ height="1em"
4402
+ >
4403
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4404
+ <path
4405
+ class="pf-v6-c-button--hamburger-icon--middle"
4406
+ d="M1,5 L9,5"
4407
+ />
4408
+ <path
4409
+ class="pf-v6-c-button--hamburger-icon--arrow"
4410
+ d="M1,5 L1,5 L1,5"
4411
+ />
4412
+ <path
4413
+ class="pf-v6-c-button--hamburger-icon--bottom"
4414
+ d="M9,9 L1,9"
4415
+ />
4416
+ </svg>
4360
4417
  </span>
4361
4418
  </button>
4362
4419
  </span>
@@ -4464,7 +4521,7 @@ wrapperTag: div
4464
4521
  </div>
4465
4522
  <div class="pf-v6-c-toolbar__item">
4466
4523
  <button
4467
- class="pf-v6-c-menu-toggle pf-m-plain"
4524
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4468
4525
  type="button"
4469
4526
  aria-expanded="false"
4470
4527
  aria-label="Settings"
@@ -4811,12 +4868,31 @@ wrapperTag: div
4811
4868
  <div class="pf-v6-c-masthead__main">
4812
4869
  <span class="pf-v6-c-masthead__toggle">
4813
4870
  <button
4814
- class="pf-v6-c-button pf-m-plain"
4871
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
4815
4872
  type="button"
4816
4873
  aria-label="Global navigation"
4817
4874
  >
4818
4875
  <span class="pf-v6-c-button__icon">
4819
- <i class="fas fa-bars" aria-hidden="true"></i>
4876
+ <svg
4877
+ viewBox="0 0 10 10"
4878
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
4879
+ width="1em"
4880
+ height="1em"
4881
+ >
4882
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
4883
+ <path
4884
+ class="pf-v6-c-button--hamburger-icon--middle"
4885
+ d="M1,5 L9,5"
4886
+ />
4887
+ <path
4888
+ class="pf-v6-c-button--hamburger-icon--arrow"
4889
+ d="M1,5 L1,5 L1,5"
4890
+ />
4891
+ <path
4892
+ class="pf-v6-c-button--hamburger-icon--bottom"
4893
+ d="M9,9 L1,9"
4894
+ />
4895
+ </svg>
4820
4896
  </span>
4821
4897
  </button>
4822
4898
  </span>
@@ -4924,7 +5000,7 @@ wrapperTag: div
4924
5000
  </div>
4925
5001
  <div class="pf-v6-c-toolbar__item">
4926
5002
  <button
4927
- class="pf-v6-c-menu-toggle pf-m-plain"
5003
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
4928
5004
  type="button"
4929
5005
  aria-expanded="false"
4930
5006
  aria-label="Settings"
@@ -5098,7 +5174,7 @@ wrapperTag: div
5098
5174
  </div>
5099
5175
  <div class="pf-v6-c-pagination__page-menu">
5100
5176
  <button
5101
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
5177
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5102
5178
  type="button"
5103
5179
  aria-expanded="false"
5104
5180
  aria-label="Menu toggle"
@@ -5432,12 +5508,31 @@ wrapperTag: div
5432
5508
  <div class="pf-v6-c-masthead__main">
5433
5509
  <span class="pf-v6-c-masthead__toggle">
5434
5510
  <button
5435
- class="pf-v6-c-button pf-m-plain"
5511
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
5436
5512
  type="button"
5437
5513
  aria-label="Global navigation"
5438
5514
  >
5439
5515
  <span class="pf-v6-c-button__icon">
5440
- <i class="fas fa-bars" aria-hidden="true"></i>
5516
+ <svg
5517
+ viewBox="0 0 10 10"
5518
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
5519
+ width="1em"
5520
+ height="1em"
5521
+ >
5522
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
5523
+ <path
5524
+ class="pf-v6-c-button--hamburger-icon--middle"
5525
+ d="M1,5 L9,5"
5526
+ />
5527
+ <path
5528
+ class="pf-v6-c-button--hamburger-icon--arrow"
5529
+ d="M1,5 L1,5 L1,5"
5530
+ />
5531
+ <path
5532
+ class="pf-v6-c-button--hamburger-icon--bottom"
5533
+ d="M9,9 L1,9"
5534
+ />
5535
+ </svg>
5441
5536
  </span>
5442
5537
  </button>
5443
5538
  </span>
@@ -5545,7 +5640,7 @@ wrapperTag: div
5545
5640
  </div>
5546
5641
  <div class="pf-v6-c-toolbar__item">
5547
5642
  <button
5548
- class="pf-v6-c-menu-toggle pf-m-plain"
5643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
5549
5644
  type="button"
5550
5645
  aria-expanded="false"
5551
5646
  aria-label="Settings"
@@ -5759,7 +5854,7 @@ wrapperTag: div
5759
5854
  <div class="pf-v6-c-pagination pf-m-compact">
5760
5855
  <div class="pf-v6-c-pagination__page-menu">
5761
5856
  <button
5762
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
5857
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5763
5858
  type="button"
5764
5859
  aria-expanded="false"
5765
5860
  aria-label="Menu toggle"
@@ -6276,25 +6371,6 @@ wrapperTag: div
6276
6371
  <button
6277
6372
  type="button"
6278
6373
  class="pf-v6-c-tabs__link"
6279
- onclick="
6280
- event.preventDefault();
6281
- ((e) => {
6282
- const el = this,
6283
- li = this.closest('li'),
6284
- ul = this.closest('ul'),
6285
- tabs = this.closest('.pf-v6-c-tabs'),
6286
- left = Math.round(li.offsetLeft),
6287
- top = Math.round(li.offsetTop),
6288
- width = Math.round(li.offsetWidth),
6289
- height = Math.round(li.offsetHeight);
6290
-
6291
- ul.querySelectorAll('li').forEach(function(el) {
6292
- el.classList.remove('pf-m-current')});
6293
- li.classList.add('pf-m-current');
6294
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
6295
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
6296
- }
6297
- )()"
6298
6374
  role="tab"
6299
6375
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab1-panel"
6300
6376
  id="primary-detail-inline-modifier-example-drawer-tabs-tab1-link"
@@ -6306,25 +6382,6 @@ wrapperTag: div
6306
6382
  <button
6307
6383
  type="button"
6308
6384
  class="pf-v6-c-tabs__link"
6309
- onclick="
6310
- event.preventDefault();
6311
- ((e) => {
6312
- const el = this,
6313
- li = this.closest('li'),
6314
- ul = this.closest('ul'),
6315
- tabs = this.closest('.pf-v6-c-tabs'),
6316
- left = Math.round(li.offsetLeft),
6317
- top = Math.round(li.offsetTop),
6318
- width = Math.round(li.offsetWidth),
6319
- height = Math.round(li.offsetHeight);
6320
-
6321
- ul.querySelectorAll('li').forEach(function(el) {
6322
- el.classList.remove('pf-m-current')});
6323
- li.classList.add('pf-m-current');
6324
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
6325
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
6326
- }
6327
- )()"
6328
6385
  role="tab"
6329
6386
  aria-controls="primary-detail-inline-modifier-example-drawer-tabs-tab2-panel"
6330
6387
  id="primary-detail-inline-modifier-example-drawer-tabs-tab2-link"
@@ -19,12 +19,31 @@ section: components
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v6-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <svg
28
+ viewBox="0 0 10 10"
29
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--middle"
36
+ d="M1,5 L9,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--arrow"
40
+ d="M1,5 L1,5 L1,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--bottom"
44
+ d="M9,9 L1,9"
45
+ />
46
+ </svg>
28
47
  </span>
29
48
  </button>
30
49
  </span>
@@ -132,7 +151,7 @@ section: components
132
151
  </div>
133
152
  <div class="pf-v6-c-toolbar__item">
134
153
  <button
135
- class="pf-v6-c-menu-toggle pf-m-plain"
154
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
136
155
  type="button"
137
156
  aria-expanded="false"
138
157
  aria-label="Settings"