@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/Tabs/examples/Tabs.md CHANGED
@@ -19,12 +19,31 @@ section: components
19
19
  <div class="pf-v6-c-masthead__main">
20
20
  <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v6-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <span class="pf-v6-c-button__icon">
27
- <i class="fas fa-bars" aria-hidden="true"></i>
27
+ <svg
28
+ viewBox="0 0 10 10"
29
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
30
+ width="1em"
31
+ height="1em"
32
+ >
33
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
34
+ <path
35
+ class="pf-v6-c-button--hamburger-icon--middle"
36
+ d="M1,5 L9,5"
37
+ />
38
+ <path
39
+ class="pf-v6-c-button--hamburger-icon--arrow"
40
+ d="M1,5 L1,5 L1,5"
41
+ />
42
+ <path
43
+ class="pf-v6-c-button--hamburger-icon--bottom"
44
+ d="M9,9 L1,9"
45
+ />
46
+ </svg>
28
47
  </span>
29
48
  </button>
30
49
  </span>
@@ -132,7 +151,7 @@ section: components
132
151
  </div>
133
152
  <div class="pf-v6-c-toolbar__item">
134
153
  <button
135
- class="pf-v6-c-menu-toggle pf-m-plain"
154
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
136
155
  type="button"
137
156
  aria-expanded="false"
138
157
  aria-label="Settings"
@@ -276,25 +295,6 @@ section: components
276
295
  <button
277
296
  type="button"
278
297
  class="pf-v6-c-tabs__link"
279
- onclick="
280
- event.preventDefault();
281
- ((e) => {
282
- const el = this,
283
- li = this.closest('li'),
284
- ul = this.closest('ul'),
285
- tabs = this.closest('.pf-v6-c-tabs'),
286
- left = Math.round(li.offsetLeft),
287
- top = Math.round(li.offsetTop),
288
- width = Math.round(li.offsetWidth),
289
- height = Math.round(li.offsetHeight);
290
-
291
- ul.querySelectorAll('li').forEach(function(el) {
292
- el.classList.remove('pf-m-current')});
293
- li.classList.add('pf-m-current');
294
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
295
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
296
- }
297
- )()"
298
298
  role="tab"
299
299
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
300
300
  id="tabs-tables-and-tabs-example-tabs-details-link"
@@ -306,25 +306,6 @@ section: components
306
306
  <button
307
307
  type="button"
308
308
  class="pf-v6-c-tabs__link"
309
- onclick="
310
- event.preventDefault();
311
- ((e) => {
312
- const el = this,
313
- li = this.closest('li'),
314
- ul = this.closest('ul'),
315
- tabs = this.closest('.pf-v6-c-tabs'),
316
- left = Math.round(li.offsetLeft),
317
- top = Math.round(li.offsetTop),
318
- width = Math.round(li.offsetWidth),
319
- height = Math.round(li.offsetHeight);
320
-
321
- ul.querySelectorAll('li').forEach(function(el) {
322
- el.classList.remove('pf-m-current')});
323
- li.classList.add('pf-m-current');
324
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
325
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
326
- }
327
- )()"
328
309
  role="tab"
329
310
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
330
311
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
@@ -336,25 +317,6 @@ section: components
336
317
  <button
337
318
  type="button"
338
319
  class="pf-v6-c-tabs__link"
339
- onclick="
340
- event.preventDefault();
341
- ((e) => {
342
- const el = this,
343
- li = this.closest('li'),
344
- ul = this.closest('ul'),
345
- tabs = this.closest('.pf-v6-c-tabs'),
346
- left = Math.round(li.offsetLeft),
347
- top = Math.round(li.offsetTop),
348
- width = Math.round(li.offsetWidth),
349
- height = Math.round(li.offsetHeight);
350
-
351
- ul.querySelectorAll('li').forEach(function(el) {
352
- el.classList.remove('pf-m-current')});
353
- li.classList.add('pf-m-current');
354
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
355
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
356
- }
357
- )()"
358
320
  role="tab"
359
321
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
360
322
  id="tabs-tables-and-tabs-example-tabs-environment-link"
@@ -366,25 +328,6 @@ section: components
366
328
  <button
367
329
  type="button"
368
330
  class="pf-v6-c-tabs__link"
369
- onclick="
370
- event.preventDefault();
371
- ((e) => {
372
- const el = this,
373
- li = this.closest('li'),
374
- ul = this.closest('ul'),
375
- tabs = this.closest('.pf-v6-c-tabs'),
376
- left = Math.round(li.offsetLeft),
377
- top = Math.round(li.offsetTop),
378
- width = Math.round(li.offsetWidth),
379
- height = Math.round(li.offsetHeight);
380
-
381
- ul.querySelectorAll('li').forEach(function(el) {
382
- el.classList.remove('pf-m-current')});
383
- li.classList.add('pf-m-current');
384
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
385
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
386
- }
387
- )()"
388
331
  role="tab"
389
332
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
390
333
  id="tabs-tables-and-tabs-example-tabs-logs-link"
@@ -396,25 +339,6 @@ section: components
396
339
  <button
397
340
  type="button"
398
341
  class="pf-v6-c-tabs__link"
399
- onclick="
400
- event.preventDefault();
401
- ((e) => {
402
- const el = this,
403
- li = this.closest('li'),
404
- ul = this.closest('ul'),
405
- tabs = this.closest('.pf-v6-c-tabs'),
406
- left = Math.round(li.offsetLeft),
407
- top = Math.round(li.offsetTop),
408
- width = Math.round(li.offsetWidth),
409
- height = Math.round(li.offsetHeight);
410
-
411
- ul.querySelectorAll('li').forEach(function(el) {
412
- el.classList.remove('pf-m-current')});
413
- li.classList.add('pf-m-current');
414
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
415
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
416
- }
417
- )()"
418
342
  role="tab"
419
343
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
420
344
  id="tabs-tables-and-tabs-example-tabs-events-link"
@@ -426,25 +350,6 @@ section: components
426
350
  <button
427
351
  type="button"
428
352
  class="pf-v6-c-tabs__link"
429
- onclick="
430
- event.preventDefault();
431
- ((e) => {
432
- const el = this,
433
- li = this.closest('li'),
434
- ul = this.closest('ul'),
435
- tabs = this.closest('.pf-v6-c-tabs'),
436
- left = Math.round(li.offsetLeft),
437
- top = Math.round(li.offsetTop),
438
- width = Math.round(li.offsetWidth),
439
- height = Math.round(li.offsetHeight);
440
-
441
- ul.querySelectorAll('li').forEach(function(el) {
442
- el.classList.remove('pf-m-current')});
443
- li.classList.add('pf-m-current');
444
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
445
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
446
- }
447
- )()"
448
353
  role="tab"
449
354
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
450
355
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
@@ -699,12 +604,31 @@ section: components
699
604
  <div class="pf-v6-c-masthead__main">
700
605
  <span class="pf-v6-c-masthead__toggle">
701
606
  <button
702
- class="pf-v6-c-button pf-m-plain"
607
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
703
608
  type="button"
704
609
  aria-label="Global navigation"
705
610
  >
706
611
  <span class="pf-v6-c-button__icon">
707
- <i class="fas fa-bars" aria-hidden="true"></i>
612
+ <svg
613
+ viewBox="0 0 10 10"
614
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
615
+ width="1em"
616
+ height="1em"
617
+ >
618
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
619
+ <path
620
+ class="pf-v6-c-button--hamburger-icon--middle"
621
+ d="M1,5 L9,5"
622
+ />
623
+ <path
624
+ class="pf-v6-c-button--hamburger-icon--arrow"
625
+ d="M1,5 L1,5 L1,5"
626
+ />
627
+ <path
628
+ class="pf-v6-c-button--hamburger-icon--bottom"
629
+ d="M9,9 L1,9"
630
+ />
631
+ </svg>
708
632
  </span>
709
633
  </button>
710
634
  </span>
@@ -812,7 +736,7 @@ section: components
812
736
  </div>
813
737
  <div class="pf-v6-c-toolbar__item">
814
738
  <button
815
- class="pf-v6-c-menu-toggle pf-m-plain"
739
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
816
740
  type="button"
817
741
  aria-expanded="false"
818
742
  aria-label="Settings"
@@ -955,25 +879,6 @@ section: components
955
879
  <button
956
880
  type="button"
957
881
  class="pf-v6-c-tabs__link"
958
- onclick="
959
- event.preventDefault();
960
- ((e) => {
961
- const el = this,
962
- li = this.closest('li'),
963
- ul = this.closest('ul'),
964
- tabs = this.closest('.pf-v6-c-tabs'),
965
- left = Math.round(li.offsetLeft),
966
- top = Math.round(li.offsetTop),
967
- width = Math.round(li.offsetWidth),
968
- height = Math.round(li.offsetHeight);
969
-
970
- ul.querySelectorAll('li').forEach(function(el) {
971
- el.classList.remove('pf-m-current')});
972
- li.classList.add('pf-m-current');
973
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
974
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
975
- }
976
- )()"
977
882
  role="tab"
978
883
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
979
884
  id="tabs-tables-and-tabs-example-tabs-details-link"
@@ -985,25 +890,6 @@ section: components
985
890
  <button
986
891
  type="button"
987
892
  class="pf-v6-c-tabs__link"
988
- onclick="
989
- event.preventDefault();
990
- ((e) => {
991
- const el = this,
992
- li = this.closest('li'),
993
- ul = this.closest('ul'),
994
- tabs = this.closest('.pf-v6-c-tabs'),
995
- left = Math.round(li.offsetLeft),
996
- top = Math.round(li.offsetTop),
997
- width = Math.round(li.offsetWidth),
998
- height = Math.round(li.offsetHeight);
999
-
1000
- ul.querySelectorAll('li').forEach(function(el) {
1001
- el.classList.remove('pf-m-current')});
1002
- li.classList.add('pf-m-current');
1003
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1004
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1005
- }
1006
- )()"
1007
893
  role="tab"
1008
894
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
1009
895
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
@@ -1015,25 +901,6 @@ section: components
1015
901
  <button
1016
902
  type="button"
1017
903
  class="pf-v6-c-tabs__link"
1018
- onclick="
1019
- event.preventDefault();
1020
- ((e) => {
1021
- const el = this,
1022
- li = this.closest('li'),
1023
- ul = this.closest('ul'),
1024
- tabs = this.closest('.pf-v6-c-tabs'),
1025
- left = Math.round(li.offsetLeft),
1026
- top = Math.round(li.offsetTop),
1027
- width = Math.round(li.offsetWidth),
1028
- height = Math.round(li.offsetHeight);
1029
-
1030
- ul.querySelectorAll('li').forEach(function(el) {
1031
- el.classList.remove('pf-m-current')});
1032
- li.classList.add('pf-m-current');
1033
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1034
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1035
- }
1036
- )()"
1037
904
  role="tab"
1038
905
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
1039
906
  id="tabs-tables-and-tabs-example-tabs-environment-link"
@@ -1045,25 +912,6 @@ section: components
1045
912
  <button
1046
913
  type="button"
1047
914
  class="pf-v6-c-tabs__link"
1048
- onclick="
1049
- event.preventDefault();
1050
- ((e) => {
1051
- const el = this,
1052
- li = this.closest('li'),
1053
- ul = this.closest('ul'),
1054
- tabs = this.closest('.pf-v6-c-tabs'),
1055
- left = Math.round(li.offsetLeft),
1056
- top = Math.round(li.offsetTop),
1057
- width = Math.round(li.offsetWidth),
1058
- height = Math.round(li.offsetHeight);
1059
-
1060
- ul.querySelectorAll('li').forEach(function(el) {
1061
- el.classList.remove('pf-m-current')});
1062
- li.classList.add('pf-m-current');
1063
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1064
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1065
- }
1066
- )()"
1067
915
  role="tab"
1068
916
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
1069
917
  id="tabs-tables-and-tabs-example-tabs-logs-link"
@@ -1075,25 +923,6 @@ section: components
1075
923
  <button
1076
924
  type="button"
1077
925
  class="pf-v6-c-tabs__link"
1078
- onclick="
1079
- event.preventDefault();
1080
- ((e) => {
1081
- const el = this,
1082
- li = this.closest('li'),
1083
- ul = this.closest('ul'),
1084
- tabs = this.closest('.pf-v6-c-tabs'),
1085
- left = Math.round(li.offsetLeft),
1086
- top = Math.round(li.offsetTop),
1087
- width = Math.round(li.offsetWidth),
1088
- height = Math.round(li.offsetHeight);
1089
-
1090
- ul.querySelectorAll('li').forEach(function(el) {
1091
- el.classList.remove('pf-m-current')});
1092
- li.classList.add('pf-m-current');
1093
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1094
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1095
- }
1096
- )()"
1097
926
  role="tab"
1098
927
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
1099
928
  id="tabs-tables-and-tabs-example-tabs-events-link"
@@ -1105,25 +934,6 @@ section: components
1105
934
  <button
1106
935
  type="button"
1107
936
  class="pf-v6-c-tabs__link"
1108
- onclick="
1109
- event.preventDefault();
1110
- ((e) => {
1111
- const el = this,
1112
- li = this.closest('li'),
1113
- ul = this.closest('ul'),
1114
- tabs = this.closest('.pf-v6-c-tabs'),
1115
- left = Math.round(li.offsetLeft),
1116
- top = Math.round(li.offsetTop),
1117
- width = Math.round(li.offsetWidth),
1118
- height = Math.round(li.offsetHeight);
1119
-
1120
- ul.querySelectorAll('li').forEach(function(el) {
1121
- el.classList.remove('pf-m-current')});
1122
- li.classList.add('pf-m-current');
1123
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1124
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1125
- }
1126
- )()"
1127
937
  role="tab"
1128
938
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
1129
939
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
@@ -1147,25 +957,6 @@ section: components
1147
957
  <button
1148
958
  type="button"
1149
959
  class="pf-v6-c-tabs__link"
1150
- onclick="
1151
- event.preventDefault();
1152
- ((e) => {
1153
- const el = this,
1154
- li = this.closest('li'),
1155
- ul = this.closest('ul'),
1156
- tabs = this.closest('.pf-v6-c-tabs'),
1157
- left = Math.round(li.offsetLeft),
1158
- top = Math.round(li.offsetTop),
1159
- width = Math.round(li.offsetWidth),
1160
- height = Math.round(li.offsetHeight);
1161
-
1162
- ul.querySelectorAll('li').forEach(function(el) {
1163
- el.classList.remove('pf-m-current')});
1164
- li.classList.add('pf-m-current');
1165
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1166
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1167
- }
1168
- )()"
1169
960
  role="tab"
1170
961
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
1171
962
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
@@ -1177,25 +968,6 @@ section: components
1177
968
  <button
1178
969
  type="button"
1179
970
  class="pf-v6-c-tabs__link"
1180
- onclick="
1181
- event.preventDefault();
1182
- ((e) => {
1183
- const el = this,
1184
- li = this.closest('li'),
1185
- ul = this.closest('ul'),
1186
- tabs = this.closest('.pf-v6-c-tabs'),
1187
- left = Math.round(li.offsetLeft),
1188
- top = Math.round(li.offsetTop),
1189
- width = Math.round(li.offsetWidth),
1190
- height = Math.round(li.offsetHeight);
1191
-
1192
- ul.querySelectorAll('li').forEach(function(el) {
1193
- el.classList.remove('pf-m-current')});
1194
- li.classList.add('pf-m-current');
1195
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1196
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1197
- }
1198
- )()"
1199
971
  role="tab"
1200
972
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
1201
973
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
@@ -1418,12 +1190,31 @@ section: components
1418
1190
  <div class="pf-v6-c-masthead__main">
1419
1191
  <span class="pf-v6-c-masthead__toggle">
1420
1192
  <button
1421
- class="pf-v6-c-button pf-m-plain"
1193
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1422
1194
  type="button"
1423
1195
  aria-label="Global navigation"
1424
1196
  >
1425
1197
  <span class="pf-v6-c-button__icon">
1426
- <i class="fas fa-bars" aria-hidden="true"></i>
1198
+ <svg
1199
+ viewBox="0 0 10 10"
1200
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1201
+ width="1em"
1202
+ height="1em"
1203
+ >
1204
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1205
+ <path
1206
+ class="pf-v6-c-button--hamburger-icon--middle"
1207
+ d="M1,5 L9,5"
1208
+ />
1209
+ <path
1210
+ class="pf-v6-c-button--hamburger-icon--arrow"
1211
+ d="M1,5 L1,5 L1,5"
1212
+ />
1213
+ <path
1214
+ class="pf-v6-c-button--hamburger-icon--bottom"
1215
+ d="M9,9 L1,9"
1216
+ />
1217
+ </svg>
1427
1218
  </span>
1428
1219
  </button>
1429
1220
  </span>
@@ -1531,7 +1322,7 @@ section: components
1531
1322
  </div>
1532
1323
  <div class="pf-v6-c-toolbar__item">
1533
1324
  <button
1534
- class="pf-v6-c-menu-toggle pf-m-plain"
1325
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1535
1326
  type="button"
1536
1327
  aria-expanded="false"
1537
1328
  aria-label="Settings"
@@ -1674,25 +1465,6 @@ section: components
1674
1465
  <button
1675
1466
  type="button"
1676
1467
  class="pf-v6-c-tabs__link"
1677
- onclick="
1678
- event.preventDefault();
1679
- ((e) => {
1680
- const el = this,
1681
- li = this.closest('li'),
1682
- ul = this.closest('ul'),
1683
- tabs = this.closest('.pf-v6-c-tabs'),
1684
- left = Math.round(li.offsetLeft),
1685
- top = Math.round(li.offsetTop),
1686
- width = Math.round(li.offsetWidth),
1687
- height = Math.round(li.offsetHeight);
1688
-
1689
- ul.querySelectorAll('li').forEach(function(el) {
1690
- el.classList.remove('pf-m-current')});
1691
- li.classList.add('pf-m-current');
1692
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1693
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1694
- }
1695
- )()"
1696
1468
  role="tab"
1697
1469
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1698
1470
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
@@ -1704,25 +1476,6 @@ section: components
1704
1476
  <button
1705
1477
  type="button"
1706
1478
  class="pf-v6-c-tabs__link"
1707
- onclick="
1708
- event.preventDefault();
1709
- ((e) => {
1710
- const el = this,
1711
- li = this.closest('li'),
1712
- ul = this.closest('ul'),
1713
- tabs = this.closest('.pf-v6-c-tabs'),
1714
- left = Math.round(li.offsetLeft),
1715
- top = Math.round(li.offsetTop),
1716
- width = Math.round(li.offsetWidth),
1717
- height = Math.round(li.offsetHeight);
1718
-
1719
- ul.querySelectorAll('li').forEach(function(el) {
1720
- el.classList.remove('pf-m-current')});
1721
- li.classList.add('pf-m-current');
1722
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1723
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1724
- }
1725
- )()"
1726
1479
  role="tab"
1727
1480
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1728
1481
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
@@ -1768,25 +1521,6 @@ section: components
1768
1521
  <button
1769
1522
  type="button"
1770
1523
  class="pf-v6-c-tabs__link"
1771
- onclick="
1772
- event.preventDefault();
1773
- ((e) => {
1774
- const el = this,
1775
- li = this.closest('li'),
1776
- ul = this.closest('ul'),
1777
- tabs = this.closest('.pf-v6-c-tabs'),
1778
- left = Math.round(li.offsetLeft),
1779
- top = Math.round(li.offsetTop),
1780
- width = Math.round(li.offsetWidth),
1781
- height = Math.round(li.offsetHeight);
1782
-
1783
- ul.querySelectorAll('li').forEach(function(el) {
1784
- el.classList.remove('pf-m-current')});
1785
- li.classList.add('pf-m-current');
1786
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1787
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1788
- }
1789
- )()"
1790
1524
  role="tab"
1791
1525
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1792
1526
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
@@ -1801,25 +1535,6 @@ section: components
1801
1535
  <button
1802
1536
  type="button"
1803
1537
  class="pf-v6-c-tabs__link"
1804
- onclick="
1805
- event.preventDefault();
1806
- ((e) => {
1807
- const el = this,
1808
- li = this.closest('li'),
1809
- ul = this.closest('ul'),
1810
- tabs = this.closest('.pf-v6-c-tabs'),
1811
- left = Math.round(li.offsetLeft),
1812
- top = Math.round(li.offsetTop),
1813
- width = Math.round(li.offsetWidth),
1814
- height = Math.round(li.offsetHeight);
1815
-
1816
- ul.querySelectorAll('li').forEach(function(el) {
1817
- el.classList.remove('pf-m-current')});
1818
- li.classList.add('pf-m-current');
1819
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1820
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1821
- }
1822
- )()"
1823
1538
  role="tab"
1824
1539
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1825
1540
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
@@ -1836,25 +1551,6 @@ section: components
1836
1551
  <button
1837
1552
  type="button"
1838
1553
  class="pf-v6-c-tabs__link"
1839
- onclick="
1840
- event.preventDefault();
1841
- ((e) => {
1842
- const el = this,
1843
- li = this.closest('li'),
1844
- ul = this.closest('ul'),
1845
- tabs = this.closest('.pf-v6-c-tabs'),
1846
- left = Math.round(li.offsetLeft),
1847
- top = Math.round(li.offsetTop),
1848
- width = Math.round(li.offsetWidth),
1849
- height = Math.round(li.offsetHeight);
1850
-
1851
- ul.querySelectorAll('li').forEach(function(el) {
1852
- el.classList.remove('pf-m-current')});
1853
- li.classList.add('pf-m-current');
1854
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1855
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1856
- }
1857
- )()"
1858
1554
  role="tab"
1859
1555
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1860
1556
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
@@ -1871,25 +1567,6 @@ section: components
1871
1567
  <button
1872
1568
  type="button"
1873
1569
  class="pf-v6-c-tabs__link"
1874
- onclick="
1875
- event.preventDefault();
1876
- ((e) => {
1877
- const el = this,
1878
- li = this.closest('li'),
1879
- ul = this.closest('ul'),
1880
- tabs = this.closest('.pf-v6-c-tabs'),
1881
- left = Math.round(li.offsetLeft),
1882
- top = Math.round(li.offsetTop),
1883
- width = Math.round(li.offsetWidth),
1884
- height = Math.round(li.offsetHeight);
1885
-
1886
- ul.querySelectorAll('li').forEach(function(el) {
1887
- el.classList.remove('pf-m-current')});
1888
- li.classList.add('pf-m-current');
1889
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
1890
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
1891
- }
1892
- )()"
1893
1570
  role="tab"
1894
1571
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1895
1572
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
@@ -2018,12 +1695,31 @@ section: components
2018
1695
  <div class="pf-v6-c-masthead__main">
2019
1696
  <span class="pf-v6-c-masthead__toggle">
2020
1697
  <button
2021
- class="pf-v6-c-button pf-m-plain"
1698
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
2022
1699
  type="button"
2023
1700
  aria-label="Global navigation"
2024
1701
  >
2025
1702
  <span class="pf-v6-c-button__icon">
2026
- <i class="fas fa-bars" aria-hidden="true"></i>
1703
+ <svg
1704
+ viewBox="0 0 10 10"
1705
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1706
+ width="1em"
1707
+ height="1em"
1708
+ >
1709
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1710
+ <path
1711
+ class="pf-v6-c-button--hamburger-icon--middle"
1712
+ d="M1,5 L9,5"
1713
+ />
1714
+ <path
1715
+ class="pf-v6-c-button--hamburger-icon--arrow"
1716
+ d="M1,5 L1,5 L1,5"
1717
+ />
1718
+ <path
1719
+ class="pf-v6-c-button--hamburger-icon--bottom"
1720
+ d="M9,9 L1,9"
1721
+ />
1722
+ </svg>
2027
1723
  </span>
2028
1724
  </button>
2029
1725
  </span>
@@ -2131,7 +1827,7 @@ section: components
2131
1827
  </div>
2132
1828
  <div class="pf-v6-c-toolbar__item">
2133
1829
  <button
2134
- class="pf-v6-c-menu-toggle pf-m-plain"
1830
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
2135
1831
  type="button"
2136
1832
  aria-expanded="false"
2137
1833
  aria-label="Settings"
@@ -2524,7 +2220,7 @@ section: components
2524
2220
  class="pf-v6-c-menu-toggle pf-m-plain"
2525
2221
  type="button"
2526
2222
  aria-expanded="false"
2527
- aria-label="Menu toggle"
2223
+ aria-label="Table actions"
2528
2224
  >
2529
2225
  <span class="pf-v6-c-menu-toggle__icon">
2530
2226
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2616,7 +2312,7 @@ section: components
2616
2312
  class="pf-v6-c-menu-toggle pf-m-plain"
2617
2313
  type="button"
2618
2314
  aria-expanded="false"
2619
- aria-label="Menu toggle"
2315
+ aria-label="Table actions"
2620
2316
  >
2621
2317
  <span class="pf-v6-c-menu-toggle__icon">
2622
2318
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2708,7 +2404,7 @@ section: components
2708
2404
  class="pf-v6-c-menu-toggle pf-m-plain"
2709
2405
  type="button"
2710
2406
  aria-expanded="false"
2711
- aria-label="Menu toggle"
2407
+ aria-label="Table actions"
2712
2408
  >
2713
2409
  <span class="pf-v6-c-menu-toggle__icon">
2714
2410
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2800,7 +2496,7 @@ section: components
2800
2496
  class="pf-v6-c-menu-toggle pf-m-plain"
2801
2497
  type="button"
2802
2498
  aria-expanded="false"
2803
- aria-label="Menu toggle"
2499
+ aria-label="Table actions"
2804
2500
  >
2805
2501
  <span class="pf-v6-c-menu-toggle__icon">
2806
2502
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2891,7 +2587,7 @@ section: components
2891
2587
  class="pf-v6-c-menu-toggle pf-m-plain"
2892
2588
  type="button"
2893
2589
  aria-expanded="false"
2894
- aria-label="Menu toggle"
2590
+ aria-label="Table actions"
2895
2591
  >
2896
2592
  <span class="pf-v6-c-menu-toggle__icon">
2897
2593
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2961,25 +2657,6 @@ section: components
2961
2657
  <button
2962
2658
  type="button"
2963
2659
  class="pf-v6-c-tabs__link"
2964
- onclick="
2965
- event.preventDefault();
2966
- ((e) => {
2967
- const el = this,
2968
- li = this.closest('li'),
2969
- ul = this.closest('ul'),
2970
- tabs = this.closest('.pf-v6-c-tabs'),
2971
- left = Math.round(li.offsetLeft),
2972
- top = Math.round(li.offsetTop),
2973
- width = Math.round(li.offsetWidth),
2974
- height = Math.round(li.offsetHeight);
2975
-
2976
- ul.querySelectorAll('li').forEach(function(el) {
2977
- el.classList.remove('pf-m-current')});
2978
- li.classList.add('pf-m-current');
2979
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
2980
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
2981
- }
2982
- )()"
2983
2660
  role="tab"
2984
2661
  aria-controls="-tabs-tab1-panel"
2985
2662
  id="-tabs-tab1-link"
@@ -2991,25 +2668,6 @@ section: components
2991
2668
  <button
2992
2669
  type="button"
2993
2670
  class="pf-v6-c-tabs__link"
2994
- onclick="
2995
- event.preventDefault();
2996
- ((e) => {
2997
- const el = this,
2998
- li = this.closest('li'),
2999
- ul = this.closest('ul'),
3000
- tabs = this.closest('.pf-v6-c-tabs'),
3001
- left = Math.round(li.offsetLeft),
3002
- top = Math.round(li.offsetTop),
3003
- width = Math.round(li.offsetWidth),
3004
- height = Math.round(li.offsetHeight);
3005
-
3006
- ul.querySelectorAll('li').forEach(function(el) {
3007
- el.classList.remove('pf-m-current')});
3008
- li.classList.add('pf-m-current');
3009
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
3010
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
3011
- }
3012
- )()"
3013
2671
  role="tab"
3014
2672
  aria-controls="-tabs-tab2-panel"
3015
2673
  id="-tabs-tab2-link"
@@ -3226,25 +2884,6 @@ section: components
3226
2884
  <button
3227
2885
  type="button"
3228
2886
  class="pf-v6-c-tabs__link"
3229
- onclick="
3230
- event.preventDefault();
3231
- ((e) => {
3232
- const el = this,
3233
- li = this.closest('li'),
3234
- ul = this.closest('ul'),
3235
- tabs = this.closest('.pf-v6-c-tabs'),
3236
- left = Math.round(li.offsetLeft),
3237
- top = Math.round(li.offsetTop),
3238
- width = Math.round(li.offsetWidth),
3239
- height = Math.round(li.offsetHeight);
3240
-
3241
- ul.querySelectorAll('li').forEach(function(el) {
3242
- el.classList.remove('pf-m-current')});
3243
- li.classList.add('pf-m-current');
3244
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
3245
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
3246
- }
3247
- )()"
3248
2887
  role="tab"
3249
2888
  aria-controls="modal-tabs-example-tabs-details-panel"
3250
2889
  id="modal-tabs-example-tabs-details-link"
@@ -3256,25 +2895,6 @@ section: components
3256
2895
  <button
3257
2896
  type="button"
3258
2897
  class="pf-v6-c-tabs__link"
3259
- onclick="
3260
- event.preventDefault();
3261
- ((e) => {
3262
- const el = this,
3263
- li = this.closest('li'),
3264
- ul = this.closest('ul'),
3265
- tabs = this.closest('.pf-v6-c-tabs'),
3266
- left = Math.round(li.offsetLeft),
3267
- top = Math.round(li.offsetTop),
3268
- width = Math.round(li.offsetWidth),
3269
- height = Math.round(li.offsetHeight);
3270
-
3271
- ul.querySelectorAll('li').forEach(function(el) {
3272
- el.classList.remove('pf-m-current')});
3273
- li.classList.add('pf-m-current');
3274
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
3275
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
3276
- }
3277
- )()"
3278
2898
  role="tab"
3279
2899
  aria-controls="modal-tabs-example-tabs-documentation-panel"
3280
2900
  id="modal-tabs-example-tabs-documentation-link"
@@ -3339,12 +2959,31 @@ section: components
3339
2959
  <div class="pf-v6-c-masthead__main">
3340
2960
  <span class="pf-v6-c-masthead__toggle">
3341
2961
  <button
3342
- class="pf-v6-c-button pf-m-plain"
2962
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3343
2963
  type="button"
3344
2964
  aria-label="Global navigation"
3345
2965
  >
3346
2966
  <span class="pf-v6-c-button__icon">
3347
- <i class="fas fa-bars" aria-hidden="true"></i>
2967
+ <svg
2968
+ viewBox="0 0 10 10"
2969
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
2970
+ width="1em"
2971
+ height="1em"
2972
+ >
2973
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
2974
+ <path
2975
+ class="pf-v6-c-button--hamburger-icon--middle"
2976
+ d="M1,5 L9,5"
2977
+ />
2978
+ <path
2979
+ class="pf-v6-c-button--hamburger-icon--arrow"
2980
+ d="M1,5 L1,5 L1,5"
2981
+ />
2982
+ <path
2983
+ class="pf-v6-c-button--hamburger-icon--bottom"
2984
+ d="M9,9 L1,9"
2985
+ />
2986
+ </svg>
3348
2987
  </span>
3349
2988
  </button>
3350
2989
  </span>
@@ -3452,7 +3091,7 @@ section: components
3452
3091
  </div>
3453
3092
  <div class="pf-v6-c-toolbar__item">
3454
3093
  <button
3455
- class="pf-v6-c-menu-toggle pf-m-plain"
3094
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3456
3095
  type="button"
3457
3096
  aria-expanded="false"
3458
3097
  aria-label="Settings"
@@ -3644,12 +3283,31 @@ section: components
3644
3283
  <div class="pf-v6-c-masthead__main">
3645
3284
  <span class="pf-v6-c-masthead__toggle">
3646
3285
  <button
3647
- class="pf-v6-c-button pf-m-plain"
3286
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3648
3287
  type="button"
3649
3288
  aria-label="Global navigation"
3650
3289
  >
3651
3290
  <span class="pf-v6-c-button__icon">
3652
- <i class="fas fa-bars" aria-hidden="true"></i>
3291
+ <svg
3292
+ viewBox="0 0 10 10"
3293
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3294
+ width="1em"
3295
+ height="1em"
3296
+ >
3297
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3298
+ <path
3299
+ class="pf-v6-c-button--hamburger-icon--middle"
3300
+ d="M1,5 L9,5"
3301
+ />
3302
+ <path
3303
+ class="pf-v6-c-button--hamburger-icon--arrow"
3304
+ d="M1,5 L1,5 L1,5"
3305
+ />
3306
+ <path
3307
+ class="pf-v6-c-button--hamburger-icon--bottom"
3308
+ d="M9,9 L1,9"
3309
+ />
3310
+ </svg>
3653
3311
  </span>
3654
3312
  </button>
3655
3313
  </span>
@@ -3757,7 +3415,7 @@ section: components
3757
3415
  </div>
3758
3416
  <div class="pf-v6-c-toolbar__item">
3759
3417
  <button
3760
- class="pf-v6-c-menu-toggle pf-m-plain"
3418
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3761
3419
  type="button"
3762
3420
  aria-expanded="false"
3763
3421
  aria-label="Settings"
@@ -3900,25 +3558,6 @@ section: components
3900
3558
  <button
3901
3559
  type="button"
3902
3560
  class="pf-v6-c-tabs__link"
3903
- onclick="
3904
- event.preventDefault();
3905
- ((e) => {
3906
- const el = this,
3907
- li = this.closest('li'),
3908
- ul = this.closest('ul'),
3909
- tabs = this.closest('.pf-v6-c-tabs'),
3910
- left = Math.round(li.offsetLeft),
3911
- top = Math.round(li.offsetTop),
3912
- width = Math.round(li.offsetWidth),
3913
- height = Math.round(li.offsetHeight);
3914
-
3915
- ul.querySelectorAll('li').forEach(function(el) {
3916
- el.classList.remove('pf-m-current')});
3917
- li.classList.add('pf-m-current');
3918
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
3919
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
3920
- }
3921
- )()"
3922
3561
  role="tab"
3923
3562
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3924
3563
  id="gray-tabs-example-tabs-tabs-new-link"
@@ -3930,25 +3569,6 @@ section: components
3930
3569
  <button
3931
3570
  type="button"
3932
3571
  class="pf-v6-c-tabs__link"
3933
- onclick="
3934
- event.preventDefault();
3935
- ((e) => {
3936
- const el = this,
3937
- li = this.closest('li'),
3938
- ul = this.closest('ul'),
3939
- tabs = this.closest('.pf-v6-c-tabs'),
3940
- left = Math.round(li.offsetLeft),
3941
- top = Math.round(li.offsetTop),
3942
- width = Math.round(li.offsetWidth),
3943
- height = Math.round(li.offsetHeight);
3944
-
3945
- ul.querySelectorAll('li').forEach(function(el) {
3946
- el.classList.remove('pf-m-current')});
3947
- li.classList.add('pf-m-current');
3948
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
3949
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
3950
- }
3951
- )()"
3952
3572
  role="tab"
3953
3573
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3954
3574
  id="gray-tabs-example-tabs-tabs-get-started-link"
@@ -3960,25 +3580,6 @@ section: components
3960
3580
  <button
3961
3581
  type="button"
3962
3582
  class="pf-v6-c-tabs__link"
3963
- onclick="
3964
- event.preventDefault();
3965
- ((e) => {
3966
- const el = this,
3967
- li = this.closest('li'),
3968
- ul = this.closest('ul'),
3969
- tabs = this.closest('.pf-v6-c-tabs'),
3970
- left = Math.round(li.offsetLeft),
3971
- top = Math.round(li.offsetTop),
3972
- width = Math.round(li.offsetWidth),
3973
- height = Math.round(li.offsetHeight);
3974
-
3975
- ul.querySelectorAll('li').forEach(function(el) {
3976
- el.classList.remove('pf-m-current')});
3977
- li.classList.add('pf-m-current');
3978
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
3979
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
3980
- }
3981
- )()"
3982
3583
  role="tab"
3983
3584
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3984
3585
  id="gray-tabs-example-tabs-tabs-knowledge-link"
@@ -3990,25 +3591,6 @@ section: components
3990
3591
  <button
3991
3592
  type="button"
3992
3593
  class="pf-v6-c-tabs__link"
3993
- onclick="
3994
- event.preventDefault();
3995
- ((e) => {
3996
- const el = this,
3997
- li = this.closest('li'),
3998
- ul = this.closest('ul'),
3999
- tabs = this.closest('.pf-v6-c-tabs'),
4000
- left = Math.round(li.offsetLeft),
4001
- top = Math.round(li.offsetTop),
4002
- width = Math.round(li.offsetWidth),
4003
- height = Math.round(li.offsetHeight);
4004
-
4005
- ul.querySelectorAll('li').forEach(function(el) {
4006
- el.classList.remove('pf-m-current')});
4007
- li.classList.add('pf-m-current');
4008
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
4009
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
4010
- }
4011
- )()"
4012
3594
  role="tab"
4013
3595
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
4014
3596
  id="gray-tabs-example-tabs-tabs-support-link"
@@ -4060,25 +3642,6 @@ section: components
4060
3642
  <button
4061
3643
  type="button"
4062
3644
  class="pf-v6-c-tabs__link"
4063
- onclick="
4064
- event.preventDefault();
4065
- ((e) => {
4066
- const el = this,
4067
- li = this.closest('li'),
4068
- ul = this.closest('ul'),
4069
- tabs = this.closest('.pf-v6-c-tabs'),
4070
- left = Math.round(li.offsetLeft),
4071
- top = Math.round(li.offsetTop),
4072
- width = Math.round(li.offsetWidth),
4073
- height = Math.round(li.offsetHeight);
4074
-
4075
- ul.querySelectorAll('li').forEach(function(el) {
4076
- el.classList.remove('pf-m-current')});
4077
- li.classList.add('pf-m-current');
4078
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
4079
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
4080
- }
4081
- )()"
4082
3645
  role="tab"
4083
3646
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
4084
3647
  id="gray-tabs-example-tabs-subtabs-x86-link"
@@ -4090,25 +3653,6 @@ section: components
4090
3653
  <button
4091
3654
  type="button"
4092
3655
  class="pf-v6-c-tabs__link"
4093
- onclick="
4094
- event.preventDefault();
4095
- ((e) => {
4096
- const el = this,
4097
- li = this.closest('li'),
4098
- ul = this.closest('ul'),
4099
- tabs = this.closest('.pf-v6-c-tabs'),
4100
- left = Math.round(li.offsetLeft),
4101
- top = Math.round(li.offsetTop),
4102
- width = Math.round(li.offsetWidth),
4103
- height = Math.round(li.offsetHeight);
4104
-
4105
- ul.querySelectorAll('li').forEach(function(el) {
4106
- el.classList.remove('pf-m-current')});
4107
- li.classList.add('pf-m-current');
4108
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
4109
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
4110
- }
4111
- )()"
4112
3656
  role="tab"
4113
3657
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
4114
3658
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"