@patternfly/patternfly 6.3.0-prerelease.5 → 6.3.0-prerelease.50

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 (128) hide show
  1. package/README.md +5 -5
  2. package/assets/images/icon-help.hbs +3 -0
  3. package/assets/images/icon-outlined-star.hbs +3 -0
  4. package/assets/images/icon-star.hbs +3 -0
  5. package/base/normalize.scss +4 -0
  6. package/base/patternfly-common.css +46 -11
  7. package/base/patternfly-common.scss +58 -13
  8. package/components/Accordion/accordion.css +72 -3
  9. package/components/Accordion/accordion.scss +78 -6
  10. package/components/Alert/alert-group.css +52 -31
  11. package/components/Alert/alert-group.scss +77 -46
  12. package/components/Button/button.css +155 -6
  13. package/components/Button/button.scss +161 -8
  14. package/components/Card/card.css +0 -1
  15. package/components/Card/card.scss +0 -1
  16. package/components/DataList/data-list.css +2 -2
  17. package/components/DataList/data-list.scss +2 -2
  18. package/components/DualListSelector/dual-list-selector.css +36 -0
  19. package/components/DualListSelector/dual-list-selector.scss +43 -0
  20. package/components/ExpandableSection/expandable-section.css +63 -1
  21. package/components/ExpandableSection/expandable-section.scss +76 -2
  22. package/components/FileUpload/file-upload.css +3 -3
  23. package/components/FileUpload/file-upload.scss +3 -3
  24. package/components/Form/form.css +40 -1
  25. package/components/Form/form.scss +47 -1
  26. package/components/FormControl/form-control.css +16 -0
  27. package/components/FormControl/form-control.scss +9 -0
  28. package/components/InputGroup/input-group.css +80 -0
  29. package/components/InputGroup/input-group.scss +95 -0
  30. package/components/Menu/menu.css +24 -4
  31. package/components/Menu/menu.scss +20 -5
  32. package/components/MenuToggle/menu-toggle.css +38 -4
  33. package/components/MenuToggle/menu-toggle.scss +48 -3
  34. package/components/Nav/nav.css +22 -8
  35. package/components/Nav/nav.scss +22 -9
  36. package/components/Page/page.css +66 -6
  37. package/components/Page/page.scss +48 -5
  38. package/components/Progress/progress.css +16 -0
  39. package/components/Progress/progress.scss +11 -1
  40. package/components/ProgressStepper/progress-stepper.scss +1 -0
  41. package/components/Skeleton/skeleton.css +22 -2
  42. package/components/Skeleton/skeleton.scss +25 -3
  43. package/components/Spinner/spinner.css +5 -0
  44. package/components/Spinner/spinner.scss +6 -0
  45. package/components/Table/table-grid.css +51 -5
  46. package/components/Table/table-grid.scss +22 -1
  47. package/components/Table/table.css +95 -2
  48. package/components/Table/table.scss +138 -3
  49. package/components/Tabs/tabs.css +25 -15
  50. package/components/Tabs/tabs.scss +26 -13
  51. package/components/TextInputGroup/text-input-group.css +23 -0
  52. package/components/TextInputGroup/text-input-group.scss +16 -1
  53. package/components/Timestamp/timestamp.css +4 -0
  54. package/components/Timestamp/timestamp.scss +7 -0
  55. package/components/TreeView/tree-view.css +39 -0
  56. package/components/TreeView/tree-view.scss +42 -2
  57. package/components/Truncate/truncate.css +1 -0
  58. package/components/Truncate/truncate.scss +3 -0
  59. package/components/Wizard/wizard.css +11 -5
  60. package/components/Wizard/wizard.scss +13 -5
  61. package/components/_index.css +961 -99
  62. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  63. package/docs/components/Button/examples/Button.md +161 -6
  64. package/docs/components/Card/examples/Card.md +8 -8
  65. package/docs/components/CodeBlock/examples/CodeBlock.md +11 -11
  66. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  67. package/docs/components/DataList/examples/DataList.md +23 -23
  68. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  69. package/docs/components/DualListSelector/examples/DualListSelector.md +534 -16
  70. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  71. package/docs/components/ExpandableSection/examples/ExpandableSection.md +32 -21
  72. package/docs/components/Form/examples/Form.md +1179 -114
  73. package/docs/components/Hint/examples/Hint.md +3 -3
  74. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  75. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  76. package/docs/components/JumpLinks/examples/JumpLinks.md +1 -1
  77. package/docs/components/Label/examples/Label.md +2 -2
  78. package/docs/components/Masthead/examples/masthead.md +90 -12
  79. package/docs/components/Menu/examples/Menu.md +122 -6
  80. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  81. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  82. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +2 -10
  83. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  84. package/docs/components/Page/examples/Page.md +148 -14
  85. package/docs/components/Pagination/examples/Pagination.md +12 -12
  86. package/docs/components/Popover/examples/Popover.md +0 -4
  87. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  88. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  89. package/docs/components/Slider/examples/Slider.md +2 -2
  90. package/docs/components/Spinner/examples/Spinner.md +10 -0
  91. package/docs/components/Table/examples/Table.md +9462 -6183
  92. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  93. package/docs/components/TextInputGroup/examples/TextInputGroup.md +73 -5
  94. package/docs/components/Title/examples/Title.md +8 -8
  95. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  96. package/docs/components/Wizard/examples/Wizard.md +583 -0
  97. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  98. package/docs/demos/Alert/examples/Alert.md +66 -9
  99. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  100. package/docs/demos/Banner/examples/Banner.md +47 -6
  101. package/docs/demos/Card/examples/Card.md +13 -67
  102. package/docs/demos/CardView/examples/CardView.md +24 -5
  103. package/docs/demos/Dashboard/examples/Dashboard.md +29 -7
  104. package/docs/demos/DataList/examples/DataList.md +100 -24
  105. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  106. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  107. package/docs/demos/Form/examples/BasicForms.md +142 -22
  108. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  109. package/docs/demos/Masthead/examples/Masthead.md +171 -19
  110. package/docs/demos/Modal/examples/Modal.md +171 -21
  111. package/docs/demos/Nav/examples/Nav.md +113 -18
  112. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +110 -15
  113. package/docs/demos/Page/examples/Page.md +661 -40
  114. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  115. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +160 -103
  116. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  117. package/docs/demos/Table/examples/Table.md +475 -157
  118. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  119. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  120. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  121. package/package.json +5 -5
  122. package/patternfly-base-no-globals.css +45 -11
  123. package/patternfly-base.css +49 -11
  124. package/patternfly-no-globals.css +1006 -110
  125. package/patternfly.css +1010 -110
  126. package/patternfly.min.css +1 -1
  127. package/patternfly.min.css.map +1 -1
  128. package/sass-utilities/mixins.scss +54 -0
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"
@@ -272,7 +291,10 @@ cssPrefix: pf-d-description-list
272
291
  </div>
273
292
  <hr class="pf-v6-c-divider" />
274
293
  <div class="pf-v6-c-card__body">
275
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
294
+ <dl
295
+ class="pf-v6-c-description-list pf-m-auto-fit"
296
+ aria-label="Details"
297
+ >
276
298
  <div class="pf-v6-c-description-list__group">
277
299
  <dt class="pf-v6-c-description-list__term">
278
300
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -387,12 +409,31 @@ cssPrefix: pf-d-description-list
387
409
  <div class="pf-v6-c-masthead__main">
388
410
  <span class="pf-v6-c-masthead__toggle">
389
411
  <button
390
- class="pf-v6-c-button pf-m-plain"
412
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
391
413
  type="button"
392
414
  aria-label="Global navigation"
393
415
  >
394
416
  <span class="pf-v6-c-button__icon">
395
- <i class="fas fa-bars" aria-hidden="true"></i>
417
+ <svg
418
+ viewBox="0 0 10 10"
419
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
420
+ width="1em"
421
+ height="1em"
422
+ >
423
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
424
+ <path
425
+ class="pf-v6-c-button--hamburger-icon--middle"
426
+ d="M1,5 L9,5"
427
+ />
428
+ <path
429
+ class="pf-v6-c-button--hamburger-icon--arrow"
430
+ d="M1,5 L1,5 L1,5"
431
+ />
432
+ <path
433
+ class="pf-v6-c-button--hamburger-icon--bottom"
434
+ d="M9,9 L1,9"
435
+ />
436
+ </svg>
396
437
  </span>
397
438
  </button>
398
439
  </span>
@@ -500,7 +541,7 @@ cssPrefix: pf-d-description-list
500
541
  </div>
501
542
  <div class="pf-v6-c-toolbar__item">
502
543
  <button
503
- class="pf-v6-c-menu-toggle pf-m-plain"
544
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
504
545
  type="button"
505
546
  aria-expanded="false"
506
547
  aria-label="Settings"
@@ -736,25 +777,6 @@ cssPrefix: pf-d-description-list
736
777
  <button
737
778
  type="button"
738
779
  class="pf-v6-c-tabs__link"
739
- onclick="
740
- event.preventDefault();
741
- ((e) => {
742
- const el = this,
743
- li = this.closest('li'),
744
- ul = this.closest('ul'),
745
- tabs = this.closest('.pf-v6-c-tabs'),
746
- left = Math.round(li.offsetLeft),
747
- top = Math.round(li.offsetTop),
748
- width = Math.round(li.offsetWidth),
749
- height = Math.round(li.offsetHeight);
750
-
751
- ul.querySelectorAll('li').forEach(function(el) {
752
- el.classList.remove('pf-m-current')});
753
- li.classList.add('pf-m-current');
754
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
755
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
756
- }
757
- )()"
758
780
  role="tab"
759
781
  id="description-list-in-drawer-example-panel-tabs-tab1-link"
760
782
  >
@@ -765,25 +787,6 @@ cssPrefix: pf-d-description-list
765
787
  <button
766
788
  type="button"
767
789
  class="pf-v6-c-tabs__link"
768
- onclick="
769
- event.preventDefault();
770
- ((e) => {
771
- const el = this,
772
- li = this.closest('li'),
773
- ul = this.closest('ul'),
774
- tabs = this.closest('.pf-v6-c-tabs'),
775
- left = Math.round(li.offsetLeft),
776
- top = Math.round(li.offsetTop),
777
- width = Math.round(li.offsetWidth),
778
- height = Math.round(li.offsetHeight);
779
-
780
- ul.querySelectorAll('li').forEach(function(el) {
781
- el.classList.remove('pf-m-current')});
782
- li.classList.add('pf-m-current');
783
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
784
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
785
- }
786
- )()"
787
790
  role="tab"
788
791
  id="description-list-in-drawer-example-panel-tabs-tab2-link"
789
792
  >
@@ -804,6 +807,7 @@ cssPrefix: pf-d-description-list
804
807
  <div class="pf-v6-c-tab-content__body">
805
808
  <dl
806
809
  class="pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-compact"
810
+ aria-label="Overview"
807
811
  >
808
812
  <div class="pf-v6-c-description-list__group">
809
813
  <dt class="pf-v6-c-description-list__term">
@@ -1061,12 +1065,31 @@ cssPrefix: pf-d-description-list
1061
1065
  <div class="pf-v6-c-masthead__main">
1062
1066
  <span class="pf-v6-c-masthead__toggle">
1063
1067
  <button
1064
- class="pf-v6-c-button pf-m-plain"
1068
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
1065
1069
  type="button"
1066
1070
  aria-label="Global navigation"
1067
1071
  >
1068
1072
  <span class="pf-v6-c-button__icon">
1069
- <i class="fas fa-bars" aria-hidden="true"></i>
1073
+ <svg
1074
+ viewBox="0 0 10 10"
1075
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
1076
+ width="1em"
1077
+ height="1em"
1078
+ >
1079
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
1080
+ <path
1081
+ class="pf-v6-c-button--hamburger-icon--middle"
1082
+ d="M1,5 L9,5"
1083
+ />
1084
+ <path
1085
+ class="pf-v6-c-button--hamburger-icon--arrow"
1086
+ d="M1,5 L1,5 L1,5"
1087
+ />
1088
+ <path
1089
+ class="pf-v6-c-button--hamburger-icon--bottom"
1090
+ d="M9,9 L1,9"
1091
+ />
1092
+ </svg>
1070
1093
  </span>
1071
1094
  </button>
1072
1095
  </span>
@@ -1174,7 +1197,7 @@ cssPrefix: pf-d-description-list
1174
1197
  </div>
1175
1198
  <div class="pf-v6-c-toolbar__item">
1176
1199
  <button
1177
- class="pf-v6-c-menu-toggle pf-m-plain"
1200
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
1178
1201
  type="button"
1179
1202
  aria-expanded="false"
1180
1203
  aria-label="Settings"
@@ -1315,7 +1338,10 @@ cssPrefix: pf-d-description-list
1315
1338
  <h2 class="pf-v6-c-title pf-m-lg">Service overview</h2>
1316
1339
  </div>
1317
1340
  <div class="pf-v6-l-grid__item">
1318
- <dl class="pf-v6-c-description-list pf-m-2-col-on-xl">
1341
+ <dl
1342
+ class="pf-v6-c-description-list pf-m-2-col-on-xl"
1343
+ aria-label="Service overview"
1344
+ >
1319
1345
  <div class="pf-v6-c-description-list__group">
1320
1346
  <dt class="pf-v6-c-description-list__term">
1321
1347
  <span class="pf-v6-c-description-list__text">Name</span>
@@ -1414,7 +1440,10 @@ cssPrefix: pf-d-description-list
1414
1440
  <h2 class="pf-v6-c-title pf-m-lg">Service routing</h2>
1415
1441
  </div>
1416
1442
  <div class="pf-v6-l-grid__item">
1417
- <dl class="pf-v6-c-description-list">
1443
+ <dl
1444
+ class="pf-v6-c-description-list"
1445
+ aria-label="Service routing"
1446
+ >
1418
1447
  <div class="pf-v6-c-description-list__group">
1419
1448
  <dt class="pf-v6-c-description-list__term">
1420
1449
  <span