@patternfly/patternfly 6.3.0-prerelease.6 → 6.3.0-prerelease.60

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 (168) hide show
  1. package/README.md +22 -14
  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/base/patternfly-variables.css +1172 -1
  9. package/base/patternfly-variables.scss +10 -0
  10. package/base/tokens/tokens-charts-dark.scss +1 -1
  11. package/base/tokens/tokens-charts.scss +1 -1
  12. package/base/tokens/tokens-dark.scss +13 -1
  13. package/base/tokens/tokens-default.scss +60 -2
  14. package/base/tokens/tokens-highcontrast-dark.scss +396 -0
  15. package/base/tokens/tokens-highcontrast.scss +703 -0
  16. package/base/tokens/tokens-local.scss +1 -0
  17. package/base/tokens/tokens-palette.scss +9 -1
  18. package/components/Accordion/accordion.css +102 -6
  19. package/components/Accordion/accordion.scss +112 -10
  20. package/components/Alert/alert-group.css +67 -33
  21. package/components/Alert/alert-group.scss +95 -48
  22. package/components/Badge/badge.css +2 -0
  23. package/components/Badge/badge.scss +2 -0
  24. package/components/Banner/banner.css +4 -0
  25. package/components/Banner/banner.scss +4 -0
  26. package/components/Button/button.css +187 -9
  27. package/components/Button/button.scss +195 -13
  28. package/components/CalendarMonth/calendar-month.css +16 -0
  29. package/components/CalendarMonth/calendar-month.scss +16 -0
  30. package/components/Card/card.css +5 -4
  31. package/components/Card/card.scss +5 -4
  32. package/components/CodeBlock/code-block.css +3 -0
  33. package/components/CodeBlock/code-block.scss +3 -0
  34. package/components/CodeEditor/code-editor.css +8 -3
  35. package/components/CodeEditor/code-editor.scss +11 -6
  36. package/components/DataList/data-list.css +2 -2
  37. package/components/DataList/data-list.scss +2 -2
  38. package/components/DatePicker/date-picker.css +3 -0
  39. package/components/DatePicker/date-picker.scss +4 -0
  40. package/components/Drawer/drawer.css +44 -41
  41. package/components/Drawer/drawer.scss +42 -36
  42. package/components/DualListSelector/dual-list-selector.css +55 -1
  43. package/components/DualListSelector/dual-list-selector.scss +63 -1
  44. package/components/ExpandableSection/expandable-section.css +63 -1
  45. package/components/ExpandableSection/expandable-section.scss +76 -2
  46. package/components/FileUpload/file-upload.css +3 -3
  47. package/components/FileUpload/file-upload.scss +3 -3
  48. package/components/Form/form.css +40 -1
  49. package/components/Form/form.scss +47 -1
  50. package/components/FormControl/form-control.css +16 -0
  51. package/components/FormControl/form-control.scss +9 -0
  52. package/components/InputGroup/input-group.css +80 -0
  53. package/components/InputGroup/input-group.scss +95 -0
  54. package/components/Label/label.css +20 -11
  55. package/components/Label/label.scss +21 -11
  56. package/components/Login/login.css +3 -0
  57. package/components/Login/login.scss +3 -0
  58. package/components/Menu/menu.css +35 -4
  59. package/components/Menu/menu.scss +32 -6
  60. package/components/MenuToggle/menu-toggle.css +51 -10
  61. package/components/MenuToggle/menu-toggle.scss +61 -9
  62. package/components/ModalBox/modal-box.css +3 -0
  63. package/components/ModalBox/modal-box.scss +3 -0
  64. package/components/Nav/nav.css +39 -8
  65. package/components/Nav/nav.scss +42 -9
  66. package/components/Page/page.css +124 -26
  67. package/components/Page/page.scss +86 -16
  68. package/components/Pagination/pagination.css +14 -1
  69. package/components/Pagination/pagination.scss +14 -1
  70. package/components/Panel/panel.css +7 -1
  71. package/components/Panel/panel.scss +7 -1
  72. package/components/Popover/popover.css +4 -0
  73. package/components/Popover/popover.scss +4 -0
  74. package/components/Progress/progress.css +26 -0
  75. package/components/Progress/progress.scss +22 -1
  76. package/components/ProgressStepper/progress-stepper.scss +1 -0
  77. package/components/SimpleList/simple-list.css +15 -0
  78. package/components/SimpleList/simple-list.scss +17 -1
  79. package/components/Skeleton/skeleton.css +22 -2
  80. package/components/Skeleton/skeleton.scss +25 -3
  81. package/components/Spinner/spinner.css +5 -0
  82. package/components/Spinner/spinner.scss +6 -0
  83. package/components/Table/table-grid.css +51 -5
  84. package/components/Table/table-grid.scss +22 -1
  85. package/components/Table/table.css +124 -2
  86. package/components/Table/table.scss +171 -3
  87. package/components/Tabs/tabs.css +32 -15
  88. package/components/Tabs/tabs.scss +34 -14
  89. package/components/TextInputGroup/text-input-group.css +23 -0
  90. package/components/TextInputGroup/text-input-group.scss +16 -1
  91. package/components/Timestamp/timestamp.css +4 -0
  92. package/components/Timestamp/timestamp.scss +7 -0
  93. package/components/TreeView/tree-view.css +54 -0
  94. package/components/TreeView/tree-view.scss +59 -2
  95. package/components/Truncate/truncate.css +1 -0
  96. package/components/Truncate/truncate.scss +3 -0
  97. package/components/Wizard/wizard.css +33 -6
  98. package/components/Wizard/wizard.scss +38 -8
  99. package/components/_index.css +1390 -195
  100. package/docs/components/Alert/examples/Alert.md +2 -2
  101. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  102. package/docs/components/Button/examples/Button.md +159 -6
  103. package/docs/components/Card/examples/Card.md +8 -8
  104. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +24 -32
  105. package/docs/components/CodeBlock/examples/CodeBlock.md +10 -10
  106. package/docs/components/CodeEditor/examples/CodeEditor.md +29 -5
  107. package/docs/components/DataList/examples/DataList.md +83 -207
  108. package/docs/components/DescriptionList/examples/DescriptionList.md +78 -22
  109. package/docs/components/DualListSelector/examples/DualListSelector.md +642 -319
  110. package/docs/components/EmptyState/examples/EmptyState.md +6 -6
  111. package/docs/components/ExpandableSection/examples/ExpandableSection.md +26 -15
  112. package/docs/components/Form/examples/Form.md +1178 -113
  113. package/docs/components/Hint/examples/Hint.md +3 -3
  114. package/docs/components/InlineEdit/examples/InlineEdit.md +2 -6
  115. package/docs/components/InputGroup/examples/InputGroup.md +5 -1
  116. package/docs/components/Label/examples/Label.md +2 -2
  117. package/docs/components/Login/examples/Login.md +22 -22
  118. package/docs/components/Masthead/examples/masthead.md +90 -12
  119. package/docs/components/Menu/examples/Menu.md +122 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +93 -55
  121. package/docs/components/ModalBox/examples/ModalBox.md +13 -1
  122. package/docs/components/OverflowMenu/examples/overflow-menu.md +5 -5
  123. package/docs/components/Page/examples/Page.md +147 -14
  124. package/docs/components/Pagination/examples/Pagination.md +123 -12
  125. package/docs/components/Popover/examples/Popover.md +0 -4
  126. package/docs/components/Progress/examples/Progress.md +222 -210
  127. package/docs/components/ProgressStepper/examples/ProgressStepper.md +32 -6
  128. package/docs/components/Skeleton/examples/Skeleton.md +21 -7
  129. package/docs/components/Slider/examples/Slider.md +2 -2
  130. package/docs/components/Spinner/examples/Spinner.md +10 -0
  131. package/docs/components/Table/examples/Table.md +7699 -4896
  132. package/docs/components/Tabs/examples/Tabs.md +1214 -6729
  133. package/docs/components/TextInputGroup/examples/TextInputGroup.md +168 -49
  134. package/docs/components/Title/examples/Title.md +8 -8
  135. package/docs/components/Toolbar/examples/Toolbar.md +7 -7
  136. package/docs/components/Wizard/examples/Wizard.md +583 -0
  137. package/docs/demos/AboutModal/examples/AboutModal.md +22 -3
  138. package/docs/demos/Alert/examples/Alert.md +66 -9
  139. package/docs/demos/BackToTop/examples/BackToTop.md +22 -3
  140. package/docs/demos/Banner/examples/Banner.md +47 -6
  141. package/docs/demos/Card/examples/Card.md +13 -67
  142. package/docs/demos/CardView/examples/CardView.md +24 -5
  143. package/docs/demos/Dashboard/examples/Dashboard.md +34 -27
  144. package/docs/demos/DataList/examples/DataList.md +628 -192
  145. package/docs/demos/DescriptionList/examples/DescriptionList.md +79 -50
  146. package/docs/demos/Drawer/examples/Drawer.md +110 -53
  147. package/docs/demos/Form/examples/BasicForms.md +146 -26
  148. package/docs/demos/JumpLinks/examples/JumpLinks.md +132 -18
  149. package/docs/demos/Masthead/examples/Masthead.md +170 -18
  150. package/docs/demos/Modal/examples/Modal.md +171 -21
  151. package/docs/demos/Nav/examples/Nav.md +111 -16
  152. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +114 -19
  153. package/docs/demos/Page/examples/Page.md +309 -43
  154. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  155. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +886 -415
  156. package/docs/demos/Skeleton/examples/Skeleton.md +25 -4
  157. package/docs/demos/Table/examples/Table.md +480 -177
  158. package/docs/demos/Tabs/examples/Tabs.md +139 -594
  159. package/docs/demos/Toolbar/examples/Toolbar.md +72 -34
  160. package/docs/demos/Wizard/examples/Wizard.md +198 -27
  161. package/package.json +12 -7
  162. package/patternfly-base-no-globals.css +1217 -12
  163. package/patternfly-base.css +1221 -12
  164. package/patternfly-no-globals.css +2837 -437
  165. package/patternfly.css +2839 -435
  166. package/patternfly.min.css +1 -1
  167. package/patternfly.min.css.map +1 -1
  168. package/sass-utilities/mixins.scss +54 -0
package/docs/demos/Alert/examples/Alert.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"
@@ -398,12 +417,31 @@ section: components
398
417
  <div class="pf-v6-c-masthead__main">
399
418
  <span class="pf-v6-c-masthead__toggle">
400
419
  <button
401
- class="pf-v6-c-button pf-m-plain"
420
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
402
421
  type="button"
403
422
  aria-label="Global navigation"
404
423
  >
405
424
  <span class="pf-v6-c-button__icon">
406
- <i class="fas fa-bars" aria-hidden="true"></i>
425
+ <svg
426
+ viewBox="0 0 10 10"
427
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
428
+ width="1em"
429
+ height="1em"
430
+ >
431
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
432
+ <path
433
+ class="pf-v6-c-button--hamburger-icon--middle"
434
+ d="M1,5 L9,5"
435
+ />
436
+ <path
437
+ class="pf-v6-c-button--hamburger-icon--arrow"
438
+ d="M1,5 L1,5 L1,5"
439
+ />
440
+ <path
441
+ class="pf-v6-c-button--hamburger-icon--bottom"
442
+ d="M9,9 L1,9"
443
+ />
444
+ </svg>
407
445
  </span>
408
446
  </button>
409
447
  </span>
@@ -511,7 +549,7 @@ section: components
511
549
  </div>
512
550
  <div class="pf-v6-c-toolbar__item">
513
551
  <button
514
- class="pf-v6-c-menu-toggle pf-m-plain"
552
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
515
553
  type="button"
516
554
  aria-expanded="false"
517
555
  aria-label="Settings"
@@ -877,12 +915,31 @@ section: components
877
915
  <div class="pf-v6-c-masthead__main">
878
916
  <span class="pf-v6-c-masthead__toggle">
879
917
  <button
880
- class="pf-v6-c-button pf-m-plain"
918
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
881
919
  type="button"
882
920
  aria-label="Global navigation"
883
921
  >
884
922
  <span class="pf-v6-c-button__icon">
885
- <i class="fas fa-bars" aria-hidden="true"></i>
923
+ <svg
924
+ viewBox="0 0 10 10"
925
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
926
+ width="1em"
927
+ height="1em"
928
+ >
929
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
930
+ <path
931
+ class="pf-v6-c-button--hamburger-icon--middle"
932
+ d="M1,5 L9,5"
933
+ />
934
+ <path
935
+ class="pf-v6-c-button--hamburger-icon--arrow"
936
+ d="M1,5 L1,5 L1,5"
937
+ />
938
+ <path
939
+ class="pf-v6-c-button--hamburger-icon--bottom"
940
+ d="M9,9 L1,9"
941
+ />
942
+ </svg>
886
943
  </span>
887
944
  </button>
888
945
  </span>
@@ -990,7 +1047,7 @@ section: components
990
1047
  </div>
991
1048
  <div class="pf-v6-c-toolbar__item">
992
1049
  <button
993
- class="pf-v6-c-menu-toggle pf-m-plain"
1050
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
994
1051
  type="button"
995
1052
  aria-expanded="false"
996
1053
  aria-label="Settings"
package/docs/demos/BackToTop/examples/BackToTop.md CHANGED
@@ -20,12 +20,31 @@ cssPrefix: pf-d-back-to-top
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-back-to-top
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"
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -21,12 +21,31 @@ wrapperTag: div
21
21
  <div class="pf-v6-c-masthead__main">
22
22
  <span class="pf-v6-c-masthead__toggle">
23
23
  <button
24
- class="pf-v6-c-button pf-m-plain"
24
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
25
25
  type="button"
26
26
  aria-label="Global navigation"
27
27
  >
28
28
  <span class="pf-v6-c-button__icon">
29
- <i class="fas fa-bars" aria-hidden="true"></i>
29
+ <svg
30
+ viewBox="0 0 10 10"
31
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
32
+ width="1em"
33
+ height="1em"
34
+ >
35
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
36
+ <path
37
+ class="pf-v6-c-button--hamburger-icon--middle"
38
+ d="M1,5 L9,5"
39
+ />
40
+ <path
41
+ class="pf-v6-c-button--hamburger-icon--arrow"
42
+ d="M1,5 L1,5 L1,5"
43
+ />
44
+ <path
45
+ class="pf-v6-c-button--hamburger-icon--bottom"
46
+ d="M9,9 L1,9"
47
+ />
48
+ </svg>
30
49
  </span>
31
50
  </button>
32
51
  </span>
@@ -134,7 +153,7 @@ wrapperTag: div
134
153
  </div>
135
154
  <div class="pf-v6-c-toolbar__item">
136
155
  <button
137
- class="pf-v6-c-menu-toggle pf-m-plain"
156
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
138
157
  type="button"
139
158
  aria-expanded="false"
140
159
  aria-label="Settings"
@@ -481,12 +500,34 @@ wrapperTag: div
481
500
  <div class="pf-v6-c-masthead__main">
482
501
  <span class="pf-v6-c-masthead__toggle">
483
502
  <button
484
- class="pf-v6-c-button pf-m-plain"
503
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
485
504
  type="button"
486
505
  aria-label="Global navigation"
487
506
  >
488
507
  <span class="pf-v6-c-button__icon">
489
- <i class="fas fa-bars" aria-hidden="true"></i>
508
+ <svg
509
+ viewBox="0 0 10 10"
510
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
511
+ width="1em"
512
+ height="1em"
513
+ >
514
+ <path
515
+ class="pf-v6-c-button--hamburger-icon--top"
516
+ d="M1,1 L9,1"
517
+ />
518
+ <path
519
+ class="pf-v6-c-button--hamburger-icon--middle"
520
+ d="M1,5 L9,5"
521
+ />
522
+ <path
523
+ class="pf-v6-c-button--hamburger-icon--arrow"
524
+ d="M1,5 L1,5 L1,5"
525
+ />
526
+ <path
527
+ class="pf-v6-c-button--hamburger-icon--bottom"
528
+ d="M9,9 L1,9"
529
+ />
530
+ </svg>
490
531
  </span>
491
532
  </button>
492
533
  </span>
@@ -599,7 +640,7 @@ wrapperTag: div
599
640
  </div>
600
641
  <div class="pf-v6-c-toolbar__item">
601
642
  <button
602
- class="pf-v6-c-menu-toggle pf-m-plain"
643
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
603
644
  type="button"
604
645
  aria-expanded="false"
605
646
  aria-label="Settings"
package/docs/demos/Card/examples/Card.md CHANGED
@@ -336,7 +336,7 @@ wrapperTag: div
336
336
  <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
337
337
  </div>
338
338
  <div class="pf-v6-c-card__body">
339
- <dl class="pf-v6-c-description-list">
339
+ <dl class="pf-v6-c-description-list" aria-label="API 1">
340
340
  <div class="pf-v6-c-description-list__group">
341
341
  <dt class="pf-v6-c-description-list__term">Cluster API Address</dt>
342
342
  <dd class="pf-v6-c-description-list__description">
@@ -385,7 +385,7 @@ wrapperTag: div
385
385
  <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
386
386
  </div>
387
387
  <div class="pf-v6-c-card__body">
388
- <dl class="pf-v6-c-description-list">
388
+ <dl class="pf-v6-c-description-list" aria-label="API 2">
389
389
  <div class="pf-v6-c-description-list__group">
390
390
  <dt class="pf-v6-c-description-list__term">Cluster API Address</dt>
391
391
  <dd class="pf-v6-c-description-list__description">
@@ -723,25 +723,6 @@ wrapperTag: div
723
723
  <button
724
724
  type="button"
725
725
  class="pf-v6-c-tabs__link"
726
- onclick="
727
- event.preventDefault();
728
- ((e) => {
729
- const el = this,
730
- li = this.closest('li'),
731
- ul = this.closest('ul'),
732
- tabs = this.closest('.pf-v6-c-tabs'),
733
- left = Math.round(li.offsetLeft),
734
- top = Math.round(li.offsetTop),
735
- width = Math.round(li.offsetWidth),
736
- height = Math.round(li.offsetHeight);
737
-
738
- ul.querySelectorAll('li').forEach(function(el) {
739
- el.classList.remove('pf-m-current')});
740
- li.classList.add('pf-m-current');
741
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
742
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
743
- }
744
- )()"
745
726
  role="tab"
746
727
  id="status-tabs-object-1-link"
747
728
  >
@@ -752,25 +733,6 @@ wrapperTag: div
752
733
  <button
753
734
  type="button"
754
735
  class="pf-v6-c-tabs__link"
755
- onclick="
756
- event.preventDefault();
757
- ((e) => {
758
- const el = this,
759
- li = this.closest('li'),
760
- ul = this.closest('ul'),
761
- tabs = this.closest('.pf-v6-c-tabs'),
762
- left = Math.round(li.offsetLeft),
763
- top = Math.round(li.offsetTop),
764
- width = Math.round(li.offsetWidth),
765
- height = Math.round(li.offsetHeight);
766
-
767
- ul.querySelectorAll('li').forEach(function(el) {
768
- el.classList.remove('pf-m-current')});
769
- li.classList.add('pf-m-current');
770
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
771
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
772
- }
773
- )()"
774
736
  role="tab"
775
737
  id="status-tabs-object-2-link"
776
738
  >
@@ -781,25 +743,6 @@ wrapperTag: div
781
743
  <button
782
744
  type="button"
783
745
  class="pf-v6-c-tabs__link"
784
- onclick="
785
- event.preventDefault();
786
- ((e) => {
787
- const el = this,
788
- li = this.closest('li'),
789
- ul = this.closest('ul'),
790
- tabs = this.closest('.pf-v6-c-tabs'),
791
- left = Math.round(li.offsetLeft),
792
- top = Math.round(li.offsetTop),
793
- width = Math.round(li.offsetWidth),
794
- height = Math.round(li.offsetHeight);
795
-
796
- ul.querySelectorAll('li').forEach(function(el) {
797
- el.classList.remove('pf-m-current')});
798
- li.classList.add('pf-m-current');
799
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
800
- tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
801
- }
802
- )()"
803
746
  role="tab"
804
747
  id="status-tabs-object-3-link"
805
748
  >
@@ -817,7 +760,10 @@ wrapperTag: div
817
760
  tabindex="0"
818
761
  >
819
762
  <div class="pf-v6-c-tab-content__body">
820
- <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg">
763
+ <dl
764
+ class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg"
765
+ aria-label="Status"
766
+ >
821
767
  <div class="pf-v6-c-description-list__group">
822
768
  <dt class="pf-v6-c-description-list__term">
823
769
  <span class="pf-v6-c-description-list__text">
@@ -1416,7 +1362,7 @@ wrapperTag: div
1416
1362
  >Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.</div>
1417
1363
  <div class="pf-v6-c-popover__body">
1418
1364
  <table
1419
- class="pf-v6-c-table pf-m-expandable pf-m-compact"
1365
+ class="pf-v6-c-table pf-m-compact pf-m-expandable"
1420
1366
  aria-label="Control panel table"
1421
1367
  id="status-card-expanded-with-popover-example-popover-table"
1422
1368
  >
@@ -1982,7 +1928,7 @@ wrapperTag: div
1982
1928
  </div>
1983
1929
  <div class="pf-v6-c-card__actions pf-m-no-offset">
1984
1930
  <button
1985
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1931
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1986
1932
  type="button"
1987
1933
  aria-expanded="false"
1988
1934
  id="utilization-card-3-example-select-dropdown"
@@ -2743,7 +2689,7 @@ wrapperTag: div
2743
2689
  style="padding-block-start: 1px;"
2744
2690
  >
2745
2691
  <button
2746
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2692
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2747
2693
  type="button"
2748
2694
  aria-expanded="false"
2749
2695
  id="trend-card-1-example-select-dropdown"
@@ -2820,7 +2766,7 @@ wrapperTag: div
2820
2766
  <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
2821
2767
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2822
2768
  <button
2823
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2769
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2824
2770
  type="button"
2825
2771
  aria-expanded="false"
2826
2772
  id="card-log-view-example-select-dropdown"
@@ -2844,7 +2790,7 @@ wrapperTag: div
2844
2790
  </div>
2845
2791
  </div>
2846
2792
  <div class="pf-v6-c-card__body">
2847
- <dl class="pf-v6-c-description-list">
2793
+ <dl class="pf-v6-c-description-list" aria-label="Activity">
2848
2794
  <div class="pf-v6-c-description-list__group">
2849
2795
  <dt class="pf-v6-c-description-list__term">Readiness probe failed</dt>
2850
2796
  <dd class="pf-v6-c-description-list__description">
@@ -2943,7 +2889,7 @@ wrapperTag: div
2943
2889
  <div class="pf-v6-c-card__header pf-v6-u-align-items-flex-start">
2944
2890
  <div class="pf-v6-c-card__actions pf-m-no-offset">
2945
2891
  <button
2946
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
2892
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2947
2893
  type="button"
2948
2894
  aria-expanded="false"
2949
2895
  id="card-events-view-example-select-dropdown"
@@ -2967,7 +2913,7 @@ wrapperTag: div
2967
2913
  </div>
2968
2914
  </div>
2969
2915
  <div class="pf-v6-c-card__body">
2970
- <dl class="pf-v6-c-description-list">
2916
+ <dl class="pf-v6-c-description-list" aria-label="Events">
2971
2917
  <div class="pf-v6-c-description-list__group">
2972
2918
  <dt class="pf-v6-c-description-list__term">
2973
2919
  <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -19,12 +19,31 @@ section: patterns
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: patterns
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"
@@ -466,7 +485,7 @@ section: patterns
466
485
  <div class="pf-v6-c-pagination pf-m-compact">
467
486
  <div class="pf-v6-c-pagination__page-menu">
468
487
  <button
469
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
488
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
470
489
  type="button"
471
490
  aria-expanded="false"
472
491
  aria-label="Menu toggle"
@@ -1016,7 +1035,7 @@ section: patterns
1016
1035
  <div class="pf-v6-c-pagination pf-m-bottom">
1017
1036
  <div class="pf-v6-c-pagination__page-menu">
1018
1037
  <button
1019
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text pf-m-top"
1038
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
1020
1039
  type="button"
1021
1040
  aria-expanded="false"
1022
1041
  aria-label="Menu toggle"
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"
@@ -1131,7 +1150,7 @@ cssPrefix: pf-d-dashboard
1131
1150
  <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1132
1151
  </div>
1133
1152
  <div class="pf-v6-c-card__body">
1134
- <dl class="pf-v6-c-description-list">
1153
+ <dl class="pf-v6-c-description-list" aria-label="Details">
1135
1154
  <div class="pf-v6-c-description-list__group">
1136
1155
  <dt
1137
1156
  class="pf-v6-c-description-list__term"
@@ -1205,10 +1224,7 @@ cssPrefix: pf-d-dashboard
1205
1224
  aria-label="Simple data list example"
1206
1225
  id="dashboard-demo-data-list-card-1-data-list"
1207
1226
  >
1208
- <li
1209
- class="pf-v6-c-data-list__item"
1210
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
1211
- >
1227
+ <li class="pf-v6-c-data-list__item">
1212
1228
  <div class="pf-v6-c-data-list__item-row">
1213
1229
  <div class="pf-v6-c-data-list__item-content">
1214
1230
  <div
@@ -1231,10 +1247,7 @@ cssPrefix: pf-d-dashboard
1231
1247
  </div>
1232
1248
  </div>
1233
1249
  </li>
1234
- <li
1235
- class="pf-v6-c-data-list__item"
1236
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
1237
- >
1250
+ <li class="pf-v6-c-data-list__item">
1238
1251
  <div class="pf-v6-c-data-list__item-row">
1239
1252
  <div class="pf-v6-c-data-list__item-content">
1240
1253
  <div
@@ -1257,10 +1270,7 @@ cssPrefix: pf-d-dashboard
1257
1270
  </div>
1258
1271
  </div>
1259
1272
  </li>
1260
- <li
1261
- class="pf-v6-c-data-list__item"
1262
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
1263
- >
1273
+ <li class="pf-v6-c-data-list__item">
1264
1274
  <div class="pf-v6-c-data-list__item-row">
1265
1275
  <div class="pf-v6-c-data-list__item-content">
1266
1276
  <div
@@ -1283,10 +1293,7 @@ cssPrefix: pf-d-dashboard
1283
1293
  </div>
1284
1294
  </div>
1285
1295
  </li>
1286
- <li
1287
- class="pf-v6-c-data-list__item"
1288
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
1289
- >
1296
+ <li class="pf-v6-c-data-list__item">
1290
1297
  <div class="pf-v6-c-data-list__item-row">
1291
1298
  <div class="pf-v6-c-data-list__item-content">
1292
1299
  <div
@@ -1309,10 +1316,7 @@ cssPrefix: pf-d-dashboard
1309
1316
  </div>
1310
1317
  </div>
1311
1318
  </li>
1312
- <li
1313
- class="pf-v6-c-data-list__item"
1314
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
1315
- >
1319
+ <li class="pf-v6-c-data-list__item">
1316
1320
  <div class="pf-v6-c-data-list__item-row">
1317
1321
  <div class="pf-v6-c-data-list__item-content">
1318
1322
  <div
@@ -1349,7 +1353,7 @@ cssPrefix: pf-d-dashboard
1349
1353
  <div class="pf-v6-c-card__header">
1350
1354
  <div class="pf-v6-c-card__actions pf-m-no-offset">
1351
1355
  <button
1352
- class="pf-v6-c-menu-toggle pf-m-plain pf-m-text"
1356
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1353
1357
  type="button"
1354
1358
  aria-expanded="false"
1355
1359
  id="dashboard-demo-events-card-1-select-dropdown"
@@ -1374,7 +1378,10 @@ cssPrefix: pf-d-dashboard
1374
1378
  </div>
1375
1379
  </div>
1376
1380
  <div class="pf-v6-c-card__body">
1377
- <dl class="pf-v6-c-description-list pf-m-compact">
1381
+ <dl
1382
+ class="pf-v6-c-description-list pf-m-compact"
1383
+ aria-label="Events"
1384
+ >
1378
1385
  <div class="pf-v6-c-description-list__group">
1379
1386
  <dt class="pf-v6-c-description-list__term">
1380
1387
  <div class="pf-v6-l-flex pf-m-nowrap">