@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/Dashboard/examples/Dashboard.md CHANGED
@@ -17,12 +17,31 @@ cssPrefix: pf-d-dashboard
17
17
  <div class="pf-v6-c-masthead__main">
18
18
  <span class="pf-v6-c-masthead__toggle">
19
19
  <button
20
- class="pf-v6-c-button pf-m-plain"
20
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
21
21
  type="button"
22
22
  aria-label="Global navigation"
23
23
  >
24
24
  <span class="pf-v6-c-button__icon">
25
- <i class="fas fa-bars" aria-hidden="true"></i>
25
+ <svg
26
+ viewBox="0 0 10 10"
27
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
28
+ width="1em"
29
+ height="1em"
30
+ >
31
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
32
+ <path
33
+ class="pf-v6-c-button--hamburger-icon--middle"
34
+ d="M1,5 L9,5"
35
+ />
36
+ <path
37
+ class="pf-v6-c-button--hamburger-icon--arrow"
38
+ d="M1,5 L1,5 L1,5"
39
+ />
40
+ <path
41
+ class="pf-v6-c-button--hamburger-icon--bottom"
42
+ d="M9,9 L1,9"
43
+ />
44
+ </svg>
26
45
  </span>
27
46
  </button>
28
47
  </span>
@@ -130,7 +149,7 @@ cssPrefix: pf-d-dashboard
130
149
  </div>
131
150
  <div class="pf-v6-c-toolbar__item">
132
151
  <button
133
- class="pf-v6-c-menu-toggle pf-m-plain"
152
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
134
153
  type="button"
135
154
  aria-expanded="false"
136
155
  aria-label="Settings"
@@ -869,7 +888,7 @@ cssPrefix: pf-d-dashboard
869
888
  <div class="pf-v6-c-card__header">
870
889
  <div class="pf-v6-c-card__actions pf-m-no-offset">
871
890
  <button
872
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
891
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
873
892
  type="button"
874
893
  aria-expanded="false"
875
894
  id="dashboard-demo-line-chart-card-1-select-dropdown"
@@ -1349,7 +1368,7 @@ cssPrefix: pf-d-dashboard
1349
1368
  <div class="pf-v6-c-card__header">
1350
1369
  <div class="pf-v6-c-card__actions pf-m-no-offset">
1351
1370
  <button
1352
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1371
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1353
1372
  type="button"
1354
1373
  aria-expanded="false"
1355
1374
  id="dashboard-demo-events-card-1-select-dropdown"
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -20,12 +20,31 @@ wrapperTag: div
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
23
- class="pf-v6-c-button pf-m-plain"
23
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
24
24
  type="button"
25
25
  aria-label="Global navigation"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-bars" aria-hidden="true"></i>
28
+ <svg
29
+ viewBox="0 0 10 10"
30
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
31
+ width="1em"
32
+ height="1em"
33
+ >
34
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
35
+ <path
36
+ class="pf-v6-c-button--hamburger-icon--middle"
37
+ d="M1,5 L9,5"
38
+ />
39
+ <path
40
+ class="pf-v6-c-button--hamburger-icon--arrow"
41
+ d="M1,5 L1,5 L1,5"
42
+ />
43
+ <path
44
+ class="pf-v6-c-button--hamburger-icon--bottom"
45
+ d="M9,9 L1,9"
46
+ />
47
+ </svg>
29
48
  </span>
30
49
  </button>
31
50
  </span>
@@ -133,7 +152,7 @@ wrapperTag: div
133
152
  </div>
134
153
  <div class="pf-v6-c-toolbar__item">
135
154
  <button
136
- class="pf-v6-c-menu-toggle pf-m-plain"
155
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
137
156
  type="button"
138
157
  aria-expanded="false"
139
158
  aria-label="Settings"
@@ -339,7 +358,7 @@ wrapperTag: div
339
358
  <div class="pf-v6-c-pagination pf-m-compact">
340
359
  <div class="pf-v6-c-pagination__page-menu">
341
360
  <button
342
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
361
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
343
362
  type="button"
344
363
  aria-expanded="false"
345
364
  aria-label="Menu toggle"
@@ -744,7 +763,7 @@ wrapperTag: div
744
763
  <div class="pf-v6-c-pagination pf-m-bottom">
745
764
  <div class="pf-v6-c-pagination__page-menu">
746
765
  <button
747
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
766
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
748
767
  type="button"
749
768
  aria-expanded="false"
750
769
  aria-label="Menu toggle"
@@ -847,12 +866,31 @@ wrapperTag: div
847
866
  <div class="pf-v6-c-masthead__main">
848
867
  <span class="pf-v6-c-masthead__toggle">
849
868
  <button
850
- class="pf-v6-c-button pf-m-plain"
869
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
851
870
  type="button"
852
871
  aria-label="Global navigation"
853
872
  >
854
873
  <span class="pf-v6-c-button__icon">
855
- <i class="fas fa-bars" aria-hidden="true"></i>
874
+ <svg
875
+ viewBox="0 0 10 10"
876
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
877
+ width="1em"
878
+ height="1em"
879
+ >
880
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
881
+ <path
882
+ class="pf-v6-c-button--hamburger-icon--middle"
883
+ d="M1,5 L9,5"
884
+ />
885
+ <path
886
+ class="pf-v6-c-button--hamburger-icon--arrow"
887
+ d="M1,5 L1,5 L1,5"
888
+ />
889
+ <path
890
+ class="pf-v6-c-button--hamburger-icon--bottom"
891
+ d="M9,9 L1,9"
892
+ />
893
+ </svg>
856
894
  </span>
857
895
  </button>
858
896
  </span>
@@ -960,7 +998,7 @@ wrapperTag: div
960
998
  </div>
961
999
  <div class="pf-v6-c-toolbar__item">
962
1000
  <button
963
- class="pf-v6-c-menu-toggle pf-m-plain"
1001
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
964
1002
  type="button"
965
1003
  aria-expanded="false"
966
1004
  aria-label="Settings"
@@ -1198,7 +1236,7 @@ wrapperTag: div
1198
1236
  <div class="pf-v6-c-pagination pf-m-compact">
1199
1237
  <div class="pf-v6-c-pagination__page-menu">
1200
1238
  <button
1201
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1239
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1202
1240
  type="button"
1203
1241
  aria-expanded="false"
1204
1242
  aria-label="Menu toggle"
@@ -1581,7 +1619,7 @@ wrapperTag: div
1581
1619
  <div class="pf-v6-c-pagination pf-m-bottom">
1582
1620
  <div class="pf-v6-c-pagination__page-menu">
1583
1621
  <button
1584
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1622
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1585
1623
  type="button"
1586
1624
  aria-expanded="false"
1587
1625
  aria-label="Menu toggle"
@@ -1684,12 +1722,31 @@ wrapperTag: div
1684
1722
  <div class="pf-v6-c-masthead__main">
1685
1723
  <span class="pf-v6-c-masthead__toggle">
1686
1724
  <button
1687
- class="pf-v6-c-button pf-m-plain"
1725
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1688
1726
  type="button"
1689
1727
  aria-label="Global navigation"
1690
1728
  >
1691
1729
  <span class="pf-v6-c-button__icon">
1692
- <i class="fas fa-bars" aria-hidden="true"></i>
1730
+ <svg
1731
+ viewBox="0 0 10 10"
1732
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1733
+ width="1em"
1734
+ height="1em"
1735
+ >
1736
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1737
+ <path
1738
+ class="pf-v6-c-button--hamburger-icon--middle"
1739
+ d="M1,5 L9,5"
1740
+ />
1741
+ <path
1742
+ class="pf-v6-c-button--hamburger-icon--arrow"
1743
+ d="M1,5 L1,5 L1,5"
1744
+ />
1745
+ <path
1746
+ class="pf-v6-c-button--hamburger-icon--bottom"
1747
+ d="M9,9 L1,9"
1748
+ />
1749
+ </svg>
1693
1750
  </span>
1694
1751
  </button>
1695
1752
  </span>
@@ -1797,7 +1854,7 @@ wrapperTag: div
1797
1854
  </div>
1798
1855
  <div class="pf-v6-c-toolbar__item">
1799
1856
  <button
1800
- class="pf-v6-c-menu-toggle pf-m-plain"
1857
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1801
1858
  type="button"
1802
1859
  aria-expanded="false"
1803
1860
  aria-label="Settings"
@@ -2094,7 +2151,7 @@ wrapperTag: div
2094
2151
  <div class="pf-v6-c-pagination pf-m-compact">
2095
2152
  <div class="pf-v6-c-pagination__page-menu">
2096
2153
  <button
2097
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2154
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2098
2155
  type="button"
2099
2156
  aria-expanded="false"
2100
2157
  aria-label="Menu toggle"
@@ -2416,7 +2473,7 @@ wrapperTag: div
2416
2473
  class="pf-v6-c-menu-toggle pf-m-plain"
2417
2474
  type="button"
2418
2475
  aria-expanded="false"
2419
- aria-label="Menu toggle"
2476
+ aria-label="Table actions"
2420
2477
  >
2421
2478
  <span class="pf-v6-c-menu-toggle__icon">
2422
2479
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2493,7 +2550,7 @@ wrapperTag: div
2493
2550
  class="pf-v6-c-menu-toggle pf-m-plain"
2494
2551
  type="button"
2495
2552
  aria-expanded="false"
2496
- aria-label="Menu toggle"
2553
+ aria-label="Table actions"
2497
2554
  >
2498
2555
  <span class="pf-v6-c-menu-toggle__icon">
2499
2556
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2570,7 +2627,7 @@ wrapperTag: div
2570
2627
  class="pf-v6-c-menu-toggle pf-m-plain"
2571
2628
  type="button"
2572
2629
  aria-expanded="false"
2573
- aria-label="Menu toggle"
2630
+ aria-label="Table actions"
2574
2631
  >
2575
2632
  <span class="pf-v6-c-menu-toggle__icon">
2576
2633
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -2646,7 +2703,7 @@ wrapperTag: div
2646
2703
  class="pf-v6-c-menu-toggle pf-m-plain"
2647
2704
  type="button"
2648
2705
  aria-expanded="false"
2649
- aria-label="Menu toggle"
2706
+ aria-label="Table actions"
2650
2707
  >
2651
2708
  <span class="pf-v6-c-menu-toggle__icon">
2652
2709
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
@@ -3100,7 +3157,7 @@ wrapperTag: div
3100
3157
  <div class="pf-v6-c-pagination pf-m-bottom">
3101
3158
  <div class="pf-v6-c-pagination__page-menu">
3102
3159
  <button
3103
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
3160
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3104
3161
  type="button"
3105
3162
  aria-expanded="false"
3106
3163
  aria-label="Menu toggle"
@@ -3206,12 +3263,31 @@ wrapperTag: div
3206
3263
  <div class="pf-v6-c-masthead__main">
3207
3264
  <span class="pf-v6-c-masthead__toggle">
3208
3265
  <button
3209
- class="pf-v6-c-button pf-m-plain"
3266
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
3210
3267
  type="button"
3211
3268
  aria-label="Global navigation"
3212
3269
  >
3213
3270
  <span class="pf-v6-c-button__icon">
3214
- <i class="fas fa-bars" aria-hidden="true"></i>
3271
+ <svg
3272
+ viewBox="0 0 10 10"
3273
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
3274
+ width="1em"
3275
+ height="1em"
3276
+ >
3277
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
3278
+ <path
3279
+ class="pf-v6-c-button--hamburger-icon--middle"
3280
+ d="M1,5 L9,5"
3281
+ />
3282
+ <path
3283
+ class="pf-v6-c-button--hamburger-icon--arrow"
3284
+ d="M1,5 L1,5 L1,5"
3285
+ />
3286
+ <path
3287
+ class="pf-v6-c-button--hamburger-icon--bottom"
3288
+ d="M9,9 L1,9"
3289
+ />
3290
+ </svg>
3215
3291
  </span>
3216
3292
  </button>
3217
3293
  </span>
@@ -3319,7 +3395,7 @@ wrapperTag: div
3319
3395
  </div>
3320
3396
  <div class="pf-v6-c-toolbar__item">
3321
3397
  <button
3322
- class="pf-v6-c-menu-toggle pf-m-plain"
3398
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
3323
3399
  type="button"
3324
3400
  aria-expanded="false"
3325
3401
  aria-label="Settings"
@@ -3570,7 +3646,7 @@ wrapperTag: div
3570
3646
  <div class="pf-v6-c-pagination pf-m-compact">
3571
3647
  <div class="pf-v6-c-pagination__page-menu">
3572
3648
  <button
3573
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
3649
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3574
3650
  type="button"
3575
3651
  aria-expanded="false"
3576
3652
  aria-label="Menu toggle"
@@ -3975,7 +4051,7 @@ wrapperTag: div
3975
4051
  <div class="pf-v6-c-pagination pf-m-bottom pf-m-static">
3976
4052
  <div class="pf-v6-c-pagination__page-menu">
3977
4053
  <button
3978
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
4054
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
3979
4055
  type="button"
3980
4056
  aria-expanded="false"
3981
4057
  aria-label="Menu toggle"
package/docs/demos/DescriptionList/examples/DescriptionList.md CHANGED
@@ -20,12 +20,31 @@ cssPrefix: pf-d-description-list
20
20
  <div class="pf-v6-c-masthead__main">
21
21
  <span class="pf-v6-c-masthead__toggle">
22
22
  <button
23
- class="pf-v6-c-button pf-m-plain"
23
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
24
24
  type="button"
25
25
  aria-label="Global navigation"
26
26
  >
27
27
  <span class="pf-v6-c-button__icon">
28
- <i class="fas fa-bars" aria-hidden="true"></i>
28
+ <svg
29
+ viewBox="0 0 10 10"
30
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
31
+ width="1em"
32
+ height="1em"
33
+ >
34
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
35
+ <path
36
+ class="pf-v6-c-button--hamburger-icon--middle"
37
+ d="M1,5 L9,5"
38
+ />
39
+ <path
40
+ class="pf-v6-c-button--hamburger-icon--arrow"
41
+ d="M1,5 L1,5 L1,5"
42
+ />
43
+ <path
44
+ class="pf-v6-c-button--hamburger-icon--bottom"
45
+ d="M9,9 L1,9"
46
+ />
47
+ </svg>
29
48
  </span>
30
49
  </button>
31
50
  </span>
@@ -133,7 +152,7 @@ cssPrefix: pf-d-description-list
133
152
  </div>
134
153
  <div class="pf-v6-c-toolbar__item">
135
154
  <button
136
- class="pf-v6-c-menu-toggle pf-m-plain"
155
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
137
156
  type="button"
138
157
  aria-expanded="false"
139
158
  aria-label="Settings"
@@ -387,12 +406,31 @@ cssPrefix: pf-d-description-list
387
406
  <div class="pf-v6-c-masthead__main">
388
407
  <span class="pf-v6-c-masthead__toggle">
389
408
  <button
390
- class="pf-v6-c-button pf-m-plain"
409
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
391
410
  type="button"
392
411
  aria-label="Global navigation"
393
412
  >
394
413
  <span class="pf-v6-c-button__icon">
395
- <i class="fas fa-bars" aria-hidden="true"></i>
414
+ <svg
415
+ viewBox="0 0 10 10"
416
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
417
+ width="1em"
418
+ height="1em"
419
+ >
420
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
421
+ <path
422
+ class="pf-v6-c-button--hamburger-icon--middle"
423
+ d="M1,5 L9,5"
424
+ />
425
+ <path
426
+ class="pf-v6-c-button--hamburger-icon--arrow"
427
+ d="M1,5 L1,5 L1,5"
428
+ />
429
+ <path
430
+ class="pf-v6-c-button--hamburger-icon--bottom"
431
+ d="M9,9 L1,9"
432
+ />
433
+ </svg>
396
434
  </span>
397
435
  </button>
398
436
  </span>
@@ -500,7 +538,7 @@ cssPrefix: pf-d-description-list
500
538
  </div>
501
539
  <div class="pf-v6-c-toolbar__item">
502
540
  <button
503
- class="pf-v6-c-menu-toggle pf-m-plain"
541
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
504
542
  type="button"
505
543
  aria-expanded="false"
506
544
  aria-label="Settings"
@@ -736,25 +774,6 @@ cssPrefix: pf-d-description-list
736
774
  <button
737
775
  type="button"
738
776
  class="pf-v6-c-tabs__link"
739
- onclick="
740
- event.preventDefault();
741
- ((e) => {
742
- const el = this,
743
- li = this.closest('li'),
744
- ul = this.closest('ul'),
745
- tabs = this.closest('.pf-v6-c-tabs'),
746
- left = Math.round(li.offsetLeft),
747
- top = Math.round(li.offsetTop),
748
- width = Math.round(li.offsetWidth),
749
- height = Math.round(li.offsetHeight);
750
-
751
- ul.querySelectorAll('li').forEach(function(el) {
752
- el.classList.remove('pf-m-current')});
753
- li.classList.add('pf-m-current');
754
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
755
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
756
- }
757
- )()"
758
777
  role="tab"
759
778
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
760
779
  >
@@ -765,25 +784,6 @@ cssPrefix: pf-d-description-list
765
784
  <button
766
785
  type="button"
767
786
  class="pf-v6-c-tabs__link"
768
- onclick="
769
- event.preventDefault();
770
- ((e) => {
771
- const el = this,
772
- li = this.closest('li'),
773
- ul = this.closest('ul'),
774
- tabs = this.closest('.pf-v6-c-tabs'),
775
- left = Math.round(li.offsetLeft),
776
- top = Math.round(li.offsetTop),
777
- width = Math.round(li.offsetWidth),
778
- height = Math.round(li.offsetHeight);
779
-
780
- ul.querySelectorAll('li').forEach(function(el) {
781
- el.classList.remove('pf-m-current')});
782
- li.classList.add('pf-m-current');
783
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
784
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
785
- }
786
- )()"
787
787
  role="tab"
788
788
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
789
789
  >
@@ -1061,12 +1061,31 @@ cssPrefix: pf-d-description-list
1061
1061
  <div class="pf-v6-c-masthead__main">
1062
1062
  <span class="pf-v6-c-masthead__toggle">
1063
1063
  <button
1064
- class="pf-v6-c-button pf-m-plain"
1064
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1065
1065
  type="button"
1066
1066
  aria-label="Global navigation"
1067
1067
  >
1068
1068
  <span class="pf-v6-c-button__icon">
1069
- <i class="fas fa-bars" aria-hidden="true"></i>
1069
+ <svg
1070
+ viewBox="0 0 10 10"
1071
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1072
+ width="1em"
1073
+ height="1em"
1074
+ >
1075
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1076
+ <path
1077
+ class="pf-v6-c-button--hamburger-icon--middle"
1078
+ d="M1,5 L9,5"
1079
+ />
1080
+ <path
1081
+ class="pf-v6-c-button--hamburger-icon--arrow"
1082
+ d="M1,5 L1,5 L1,5"
1083
+ />
1084
+ <path
1085
+ class="pf-v6-c-button--hamburger-icon--bottom"
1086
+ d="M9,9 L1,9"
1087
+ />
1088
+ </svg>
1070
1089
  </span>
1071
1090
  </button>
1072
1091
  </span>
@@ -1174,7 +1193,7 @@ cssPrefix: pf-d-description-list
1174
1193
  </div>
1175
1194
  <div class="pf-v6-c-toolbar__item">
1176
1195
  <button
1177
- class="pf-v6-c-menu-toggle pf-m-plain"
1196
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1178
1197
  type="button"
1179
1198
  aria-expanded="false"
1180
1199
  aria-label="Settings"