@patternfly/patternfly 6.3.0-prerelease.2 → 6.3.0-prerelease.20

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 (76) hide show
  1. package/README.md +1 -1
  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/patternfly-common.css +11 -11
  6. package/base/patternfly-common.scss +12 -12
  7. package/components/Accordion/accordion.css +71 -1
  8. package/components/Accordion/accordion.scss +75 -4
  9. package/components/Alert/alert-group.css +52 -31
  10. package/components/Alert/alert-group.scss +77 -46
  11. package/components/Button/button.css +27 -0
  12. package/components/Button/button.scss +30 -1
  13. package/components/CodeEditor/code-editor.css +3 -0
  14. package/components/CodeEditor/code-editor.scss +3 -1
  15. package/components/Drawer/drawer.css +28 -14
  16. package/components/Drawer/drawer.scss +28 -9
  17. package/components/DualListSelector/dual-list-selector.css +36 -0
  18. package/components/DualListSelector/dual-list-selector.scss +43 -0
  19. package/components/ExpandableSection/expandable-section.css +47 -1
  20. package/components/ExpandableSection/expandable-section.scss +50 -1
  21. package/components/MenuToggle/menu-toggle.css +8 -4
  22. package/components/MenuToggle/menu-toggle.scss +15 -3
  23. package/components/Page/page.css +4 -3
  24. package/components/Page/page.scss +4 -2
  25. package/components/ProgressStepper/progress-stepper.scss +1 -0
  26. package/components/Skeleton/skeleton.css +22 -2
  27. package/components/Skeleton/skeleton.scss +25 -3
  28. package/components/Spinner/spinner.css +5 -0
  29. package/components/Spinner/spinner.scss +6 -0
  30. package/components/Table/table-grid.css +6 -5
  31. package/components/Table/table-grid.scss +2 -1
  32. package/components/Table/table.css +33 -0
  33. package/components/Table/table.scss +33 -0
  34. package/components/Tabs/tabs.css +25 -15
  35. package/components/Tabs/tabs.scss +26 -13
  36. package/components/Timestamp/timestamp.css +4 -0
  37. package/components/Timestamp/timestamp.scss +7 -0
  38. package/components/TreeView/tree-view.css +33 -0
  39. package/components/TreeView/tree-view.scss +36 -2
  40. package/components/Truncate/truncate.css +6 -0
  41. package/components/Truncate/truncate.scss +9 -0
  42. package/components/_index.css +410 -76
  43. package/docs/components/Button/examples/Button.md +73 -3
  44. package/docs/components/CodeEditor/examples/CodeEditor.md +26 -2
  45. package/docs/components/Divider/examples/Divider.md +1 -1
  46. package/docs/components/Drawer/examples/Drawer.md +4 -0
  47. package/docs/components/DualListSelector/examples/DualListSelector.md +518 -0
  48. package/docs/components/Form/examples/Form.md +156 -12
  49. package/docs/components/Menu/examples/Menu.md +120 -4
  50. package/docs/components/MenuToggle/examples/MenuToggle.md +3 -4
  51. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  52. package/docs/components/Page/examples/Page.md +1 -0
  53. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  54. package/docs/components/Spinner/examples/Spinner.md +10 -0
  55. package/docs/components/Table/examples/Table.md +330 -16
  56. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  57. package/docs/components/Truncate/examples/Truncate.md +53 -10
  58. package/docs/demos/Card/examples/Card.md +0 -57
  59. package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -38
  60. package/docs/demos/Drawer/examples/Drawer.md +0 -38
  61. package/docs/demos/Form/examples/BasicForms.md +130 -10
  62. package/docs/demos/Masthead/examples/Masthead.md +1 -1
  63. package/docs/demos/Modal/examples/Modal.md +39 -3
  64. package/docs/demos/Nav/examples/Nav.md +2 -2
  65. package/docs/demos/Page/examples/Page.md +355 -0
  66. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  67. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -76
  68. package/docs/demos/Table/examples/Table.md +67 -23
  69. package/docs/demos/Tabs/examples/Tabs.md +0 -570
  70. package/package.json +6 -6
  71. package/patternfly-base-no-globals.css +11 -11
  72. package/patternfly-base.css +11 -11
  73. package/patternfly-no-globals.css +421 -87
  74. package/patternfly.css +421 -87
  75. package/patternfly.min.css +1 -1
  76. package/patternfly.min.css.map +1 -1
package/docs/demos/Tabs/examples/Tabs.md CHANGED
@@ -276,25 +276,6 @@ section: components
276
276
  <button
277
277
  type="button"
278
278
  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
279
  role="tab"
299
280
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
300
281
  id="tabs-tables-and-tabs-example-tabs-details-link"
@@ -306,25 +287,6 @@ section: components
306
287
  <button
307
288
  type="button"
308
289
  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
290
  role="tab"
329
291
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
330
292
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
@@ -336,25 +298,6 @@ section: components
336
298
  <button
337
299
  type="button"
338
300
  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
301
  role="tab"
359
302
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
360
303
  id="tabs-tables-and-tabs-example-tabs-environment-link"
@@ -366,25 +309,6 @@ section: components
366
309
  <button
367
310
  type="button"
368
311
  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
312
  role="tab"
389
313
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
390
314
  id="tabs-tables-and-tabs-example-tabs-logs-link"
@@ -396,25 +320,6 @@ section: components
396
320
  <button
397
321
  type="button"
398
322
  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
323
  role="tab"
419
324
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
420
325
  id="tabs-tables-and-tabs-example-tabs-events-link"
@@ -426,25 +331,6 @@ section: components
426
331
  <button
427
332
  type="button"
428
333
  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
334
  role="tab"
449
335
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
450
336
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
@@ -955,25 +841,6 @@ section: components
955
841
  <button
956
842
  type="button"
957
843
  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
844
  role="tab"
978
845
  aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
979
846
  id="tabs-tables-and-tabs-example-tabs-details-link"
@@ -985,25 +852,6 @@ section: components
985
852
  <button
986
853
  type="button"
987
854
  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
855
  role="tab"
1008
856
  aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
1009
857
  id="tabs-tables-and-tabs-example-tabs-yaml-link"
@@ -1015,25 +863,6 @@ section: components
1015
863
  <button
1016
864
  type="button"
1017
865
  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
866
  role="tab"
1038
867
  aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
1039
868
  id="tabs-tables-and-tabs-example-tabs-environment-link"
@@ -1045,25 +874,6 @@ section: components
1045
874
  <button
1046
875
  type="button"
1047
876
  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
877
  role="tab"
1068
878
  aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
1069
879
  id="tabs-tables-and-tabs-example-tabs-logs-link"
@@ -1075,25 +885,6 @@ section: components
1075
885
  <button
1076
886
  type="button"
1077
887
  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
888
  role="tab"
1098
889
  aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
1099
890
  id="tabs-tables-and-tabs-example-tabs-events-link"
@@ -1105,25 +896,6 @@ section: components
1105
896
  <button
1106
897
  type="button"
1107
898
  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
899
  role="tab"
1128
900
  aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
1129
901
  id="tabs-tables-and-tabs-example-tabs-terminal-link"
@@ -1147,25 +919,6 @@ section: components
1147
919
  <button
1148
920
  type="button"
1149
921
  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
922
  role="tab"
1170
923
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
1171
924
  id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
@@ -1177,25 +930,6 @@ section: components
1177
930
  <button
1178
931
  type="button"
1179
932
  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
933
  role="tab"
1200
934
  aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
1201
935
  id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
@@ -1674,25 +1408,6 @@ section: components
1674
1408
  <button
1675
1409
  type="button"
1676
1410
  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
1411
  role="tab"
1697
1412
  aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1698
1413
  id="nested-tabs-example-tabs-tabs-cluster-1-link"
@@ -1704,25 +1419,6 @@ section: components
1704
1419
  <button
1705
1420
  type="button"
1706
1421
  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
1422
  role="tab"
1727
1423
  aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1728
1424
  id="nested-tabs-example-tabs-tabs-cluster-2-link"
@@ -1768,25 +1464,6 @@ section: components
1768
1464
  <button
1769
1465
  type="button"
1770
1466
  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
1467
  role="tab"
1791
1468
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1792
1469
  id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
@@ -1801,25 +1478,6 @@ section: components
1801
1478
  <button
1802
1479
  type="button"
1803
1480
  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
1481
  role="tab"
1824
1482
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1825
1483
  id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
@@ -1836,25 +1494,6 @@ section: components
1836
1494
  <button
1837
1495
  type="button"
1838
1496
  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
1497
  role="tab"
1859
1498
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1860
1499
  id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
@@ -1871,25 +1510,6 @@ section: components
1871
1510
  <button
1872
1511
  type="button"
1873
1512
  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
1513
  role="tab"
1894
1514
  aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1895
1515
  id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
@@ -2961,25 +2581,6 @@ section: components
2961
2581
  <button
2962
2582
  type="button"
2963
2583
  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
2584
  role="tab"
2984
2585
  aria-controls="-tabs-tab1-panel"
2985
2586
  id="-tabs-tab1-link"
@@ -2991,25 +2592,6 @@ section: components
2991
2592
  <button
2992
2593
  type="button"
2993
2594
  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
2595
  role="tab"
3014
2596
  aria-controls="-tabs-tab2-panel"
3015
2597
  id="-tabs-tab2-link"
@@ -3226,25 +2808,6 @@ section: components
3226
2808
  <button
3227
2809
  type="button"
3228
2810
  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
2811
  role="tab"
3249
2812
  aria-controls="modal-tabs-example-tabs-details-panel"
3250
2813
  id="modal-tabs-example-tabs-details-link"
@@ -3256,25 +2819,6 @@ section: components
3256
2819
  <button
3257
2820
  type="button"
3258
2821
  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
2822
  role="tab"
3279
2823
  aria-controls="modal-tabs-example-tabs-documentation-panel"
3280
2824
  id="modal-tabs-example-tabs-documentation-link"
@@ -3900,25 +3444,6 @@ section: components
3900
3444
  <button
3901
3445
  type="button"
3902
3446
  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
3447
  role="tab"
3923
3448
  aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3924
3449
  id="gray-tabs-example-tabs-tabs-new-link"
@@ -3930,25 +3455,6 @@ section: components
3930
3455
  <button
3931
3456
  type="button"
3932
3457
  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
3458
  role="tab"
3953
3459
  aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3954
3460
  id="gray-tabs-example-tabs-tabs-get-started-link"
@@ -3960,25 +3466,6 @@ section: components
3960
3466
  <button
3961
3467
  type="button"
3962
3468
  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
3469
  role="tab"
3983
3470
  aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3984
3471
  id="gray-tabs-example-tabs-tabs-knowledge-link"
@@ -3990,25 +3477,6 @@ section: components
3990
3477
  <button
3991
3478
  type="button"
3992
3479
  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
3480
  role="tab"
4013
3481
  aria-controls="gray-tabs-example-tabs-tabs-support-panel"
4014
3482
  id="gray-tabs-example-tabs-tabs-support-link"
@@ -4060,25 +3528,6 @@ section: components
4060
3528
  <button
4061
3529
  type="button"
4062
3530
  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
3531
  role="tab"
4083
3532
  aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
4084
3533
  id="gray-tabs-example-tabs-subtabs-x86-link"
@@ -4090,25 +3539,6 @@ section: components
4090
3539
  <button
4091
3540
  type="button"
4092
3541
  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
3542
  role="tab"
4113
3543
  aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
4114
3544
  id="gray-tabs-example-tabs-subtabs-additional-architectures-link"