@patternfly/patternfly 6.5.0-prerelease.69 → 6.5.0-prerelease.70

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 (45) hide show
  1. package/components/Button/button.css +3 -3
  2. package/components/Button/button.scss +1 -1
  3. package/components/Card/card.css +1 -5
  4. package/components/Card/card.scss +2 -6
  5. package/components/Compass/compass.css +2 -2
  6. package/components/Compass/compass.scss +1 -1
  7. package/components/MenuToggle/menu-toggle.css +4 -4
  8. package/components/MenuToggle/menu-toggle.scss +1 -1
  9. package/components/Page/page.css +4 -4
  10. package/components/Page/page.scss +2 -2
  11. package/components/_index.css +14 -18
  12. package/docs/components/CodeEditor/examples/CodeEditor.md +39 -3
  13. package/docs/components/Compass/examples/Compass.md +2 -2
  14. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  15. package/docs/components/MenuToggle/examples/MenuToggle.md +51 -3
  16. package/docs/components/Page/examples/Page.md +2 -2
  17. package/docs/components/Toolbar/examples/Toolbar.md +10 -10
  18. package/docs/components/Wizard/examples/Wizard.md +13 -1
  19. package/docs/demos/AboutModal/examples/AboutModal.md +17 -1
  20. package/docs/demos/Alert/examples/Alert.md +51 -3
  21. package/docs/demos/BackToTop/examples/BackToTop.md +17 -1
  22. package/docs/demos/Banner/examples/Banner.md +34 -2
  23. package/docs/demos/CardView/examples/CardView.md +127 -123
  24. package/docs/demos/Compass/examples/Compass.md +3072 -1425
  25. package/docs/demos/Dashboard/examples/Dashboard.md +17 -1
  26. package/docs/demos/DataList/examples/DataList.md +78 -14
  27. package/docs/demos/DescriptionList/examples/DescriptionList.md +51 -3
  28. package/docs/demos/Drawer/examples/Drawer.md +85 -5
  29. package/docs/demos/JumpLinks/examples/JumpLinks.md +102 -6
  30. package/docs/demos/Masthead/examples/Masthead.md +29 -13
  31. package/docs/demos/Modal/examples/Modal.md +102 -6
  32. package/docs/demos/Nav/examples/Nav.md +144 -20
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +85 -5
  34. package/docs/demos/Page/examples/Page.md +244 -20
  35. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +133 -21
  36. package/docs/demos/Skeleton/examples/Skeleton.md +17 -1
  37. package/docs/demos/Table/examples/Table.md +337 -69
  38. package/docs/demos/Tabs/examples/Tabs.md +104 -8
  39. package/docs/demos/Toolbar/examples/Toolbar.md +46 -14
  40. package/docs/demos/Wizard/examples/Wizard.md +153 -9
  41. package/package.json +2 -2
  42. package/patternfly-no-globals.css +14 -18
  43. package/patternfly.css +14 -18
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -845,15 +845,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
845
845
  animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
846
846
  animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
847
847
  }
848
- .pf-v6-c-button.pf-m-dock {
848
+ .pf-v6-c-button.pf-m-docked {
849
849
  justify-content: flex-start;
850
850
  width: 100%;
851
851
  }
852
852
  @media (min-width: 62rem) {
853
- .pf-v6-c-button.pf-m-dock {
853
+ .pf-v6-c-button.pf-m-docked {
854
854
  justify-content: center;
855
855
  }
856
- .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
856
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
857
857
  display: none;
858
858
  }
859
859
  }
package/components/Button/button.scss CHANGED
@@ -974,7 +974,7 @@
974
974
  animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
975
975
  }
976
976
 
977
- &.pf-m-dock {
977
+ &.pf-m-docked {
978
978
  justify-content: flex-start;
979
979
  width: 100%;
980
980
 
package/components/Card/card.css CHANGED
@@ -4,7 +4,6 @@
4
4
  --pf-v6-c-card--BorderStyle: solid;
5
5
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
6
6
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
7
- --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
8
7
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
9
8
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10
9
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -75,7 +74,6 @@
75
74
  --pf-v6-c-card--m-full-height--Height: 100%;
76
75
  --pf-v6-c-card--m-plain--BorderColor: transparent;
77
76
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
78
- --pf-v6-c-card--m-plain--BoxShadow: none;
79
77
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
80
78
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
81
79
  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -95,7 +93,6 @@
95
93
  background-color: var(--pf-v6-c-card--BackgroundColor);
96
94
  border: 0;
97
95
  border-radius: var(--pf-v6-c-card--BorderRadius);
98
- box-shadow: var(--pf-v6-c-card--BoxShadow);
99
96
  }
100
97
  .pf-v6-c-card::before {
101
98
  position: absolute;
@@ -109,8 +106,8 @@
109
106
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
110
107
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
111
108
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
112
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
113
109
  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
110
+ box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
114
111
  }
115
112
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
116
113
  gap: 0;
@@ -193,7 +190,6 @@
193
190
  .pf-v6-c-card.pf-m-plain {
194
191
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
195
192
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
196
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
197
193
  backdrop-filter: none;
198
194
  }
199
195
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
package/components/Card/card.scss CHANGED
@@ -6,7 +6,6 @@
6
6
  --#{$card}--BorderStyle: solid;
7
7
  --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
8
8
  --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
9
- --#{$card}--BoxShadow: var(--pf-t--global--box-shadow--sm);
10
9
  --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
11
10
  --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
12
11
  --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -106,7 +105,6 @@
106
105
  // Plain - no border or background color
107
106
  --#{$card}--m-plain--BorderColor: transparent;
108
107
  --#{$card}--m-plain--BackgroundColor: transparent;
109
- --#{$card}--m-plain--BoxShadow: none;
110
108
 
111
109
  // Toggle right
112
110
  --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
@@ -132,7 +130,6 @@
132
130
  background-color: var(--#{$card}--BackgroundColor);
133
131
  border: 0;
134
132
  border-radius: var(--#{$card}--BorderRadius);
135
- box-shadow: var(--#{$card}--BoxShadow);
136
133
 
137
134
  &::before {
138
135
  position: absolute;
@@ -148,9 +145,9 @@
148
145
  --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
149
146
  --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
150
147
  --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
151
- --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);
152
-
148
+
153
149
  backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
150
+ box-shadow: var(--#{$card}--m-glass--BoxShadow);
154
151
  }
155
152
  }
156
153
 
@@ -276,7 +273,6 @@
276
273
  &.pf-m-plain {
277
274
  --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
278
275
  --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
279
- --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
280
276
 
281
277
  backdrop-filter: none;
282
278
 
package/components/Compass/compass.css CHANGED
@@ -79,14 +79,14 @@
79
79
  background-image: var(--pf-v6-c-compass--BackgroundImage);
80
80
  background-size: cover;
81
81
  }
82
- .pf-v6-c-compass.pf-m-dock {
82
+ .pf-v6-c-compass.pf-m-docked {
83
83
  grid-template-areas: "dock main";
84
84
  grid-template-rows: auto;
85
85
  grid-template-columns: auto 1fr;
86
86
  align-items: stretch;
87
87
  padding: 0;
88
88
  }
89
- .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
89
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
90
90
  padding: var(--pf-v6-c-compass--Padding);
91
91
  }
92
92
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
package/components/Compass/compass.scss CHANGED
@@ -86,7 +86,7 @@
86
86
  background-image: var(--#{$compass}--BackgroundImage);
87
87
  background-size: cover;
88
88
 
89
- &.pf-m-dock {
89
+ &.pf-m-docked {
90
90
  grid-template-areas: "dock main";
91
91
  grid-template-rows: auto;
92
92
  grid-template-columns: auto 1fr;
package/components/MenuToggle/menu-toggle.css CHANGED
@@ -353,17 +353,17 @@
353
353
  .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
354
354
  pointer-events: none;
355
355
  }
356
- .pf-v6-c-menu-toggle.pf-m-dock {
356
+ .pf-v6-c-menu-toggle.pf-m-docked {
357
357
  justify-content: flex-start;
358
358
  width: 100%;
359
359
  }
360
360
  @media (min-width: 62rem) {
361
- .pf-v6-c-menu-toggle.pf-m-dock {
361
+ .pf-v6-c-menu-toggle.pf-m-docked {
362
362
  justify-content: center;
363
363
  width: auto;
364
364
  }
365
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__text,
366
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__controls {
365
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
366
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
367
367
  display: none;
368
368
  }
369
369
  }
package/components/MenuToggle/menu-toggle.scss CHANGED
@@ -434,7 +434,7 @@
434
434
  }
435
435
  }
436
436
 
437
- &.pf-m-dock {
437
+ &.pf-m-docked {
438
438
  justify-content: flex-start;
439
439
  width: 100%;
440
440
 
package/components/Page/page.css CHANGED
@@ -258,7 +258,7 @@
258
258
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
259
259
  }
260
260
  }
261
- .pf-v6-c-page.pf-m-dock {
261
+ .pf-v6-c-page.pf-m-docked {
262
262
  --pf-v6-c-page--masthead--main-container--GridArea: main;
263
263
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
264
264
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
@@ -267,7 +267,7 @@
267
267
  grid-template-columns: auto 1fr;
268
268
  }
269
269
  @media (min-width: 62rem) {
270
- .pf-v6-c-page.pf-m-dock {
270
+ .pf-v6-c-page.pf-m-docked {
271
271
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
272
272
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
273
273
  grid-template-areas: "dock main";
@@ -275,7 +275,7 @@
275
275
  grid-template-columns: auto 1fr;
276
276
  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
277
277
  }
278
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
278
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
279
279
  display: none;
280
280
  }
281
281
  }
@@ -334,7 +334,7 @@
334
334
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
335
335
  grid-area: header;
336
336
  }
337
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
337
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
338
338
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
339
339
  }
340
340
 
package/components/Page/page.scss CHANGED
@@ -304,7 +304,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
304
304
  grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
305
305
  }
306
306
 
307
- &.pf-m-dock {
307
+ &.pf-m-docked {
308
308
  --#{$page}--masthead--main-container--GridArea: main;
309
309
  --#{$page}__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight);
310
310
  --#{$page}__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart);
@@ -371,7 +371,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
371
371
  grid-area: header;
372
372
  }
373
373
 
374
- &.pf-m-dock {
374
+ &.pf-m-docked {
375
375
  > .#{$masthead} {
376
376
  --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
377
377
  }
package/components/_index.css CHANGED
@@ -2460,15 +2460,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2460
2460
  animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
2461
2461
  animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
2462
2462
  }
2463
- .pf-v6-c-button.pf-m-dock {
2463
+ .pf-v6-c-button.pf-m-docked {
2464
2464
  justify-content: flex-start;
2465
2465
  width: 100%;
2466
2466
  }
2467
2467
  @media (min-width: 62rem) {
2468
- .pf-v6-c-button.pf-m-dock {
2468
+ .pf-v6-c-button.pf-m-docked {
2469
2469
  justify-content: center;
2470
2470
  }
2471
- .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
2471
+ .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text {
2472
2472
  display: none;
2473
2473
  }
2474
2474
  }
@@ -2814,7 +2814,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2814
2814
  --pf-v6-c-card--BorderStyle: solid;
2815
2815
  --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
2816
2816
  --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
2817
- --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
2818
2817
  --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
2819
2818
  --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
2820
2819
  --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -2885,7 +2884,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2885
2884
  --pf-v6-c-card--m-full-height--Height: 100%;
2886
2885
  --pf-v6-c-card--m-plain--BorderColor: transparent;
2887
2886
  --pf-v6-c-card--m-plain--BackgroundColor: transparent;
2888
- --pf-v6-c-card--m-plain--BoxShadow: none;
2889
2887
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
2890
2888
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
2891
2889
  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -2905,7 +2903,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2905
2903
  background-color: var(--pf-v6-c-card--BackgroundColor);
2906
2904
  border: 0;
2907
2905
  border-radius: var(--pf-v6-c-card--BorderRadius);
2908
- box-shadow: var(--pf-v6-c-card--BoxShadow);
2909
2906
  }
2910
2907
  .pf-v6-c-card::before {
2911
2908
  position: absolute;
@@ -2919,8 +2916,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2919
2916
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
2920
2917
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
2921
2918
  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
2922
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
2923
2919
  backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
2920
+ box-shadow: var(--pf-v6-c-card--m-glass--BoxShadow);
2924
2921
  }
2925
2922
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
2926
2923
  gap: 0;
@@ -3003,7 +3000,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3003
3000
  .pf-v6-c-card.pf-m-plain {
3004
3001
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
3005
3002
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
3006
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
3007
3003
  backdrop-filter: none;
3008
3004
  }
3009
3005
  .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
@@ -3752,14 +3748,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3752
3748
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3753
3749
  background-size: cover;
3754
3750
  }
3755
- .pf-v6-c-compass.pf-m-dock {
3751
+ .pf-v6-c-compass.pf-m-docked {
3756
3752
  grid-template-areas: "dock main";
3757
3753
  grid-template-rows: auto;
3758
3754
  grid-template-columns: auto 1fr;
3759
3755
  align-items: stretch;
3760
3756
  padding: 0;
3761
3757
  }
3762
- .pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
3758
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
3763
3759
  padding: var(--pf-v6-c-compass--Padding);
3764
3760
  }
3765
3761
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
@@ -12167,17 +12163,17 @@ ul.pf-v6-c-list {
12167
12163
  .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
12168
12164
  pointer-events: none;
12169
12165
  }
12170
- .pf-v6-c-menu-toggle.pf-m-dock {
12166
+ .pf-v6-c-menu-toggle.pf-m-docked {
12171
12167
  justify-content: flex-start;
12172
12168
  width: 100%;
12173
12169
  }
12174
12170
  @media (min-width: 62rem) {
12175
- .pf-v6-c-menu-toggle.pf-m-dock {
12171
+ .pf-v6-c-menu-toggle.pf-m-docked {
12176
12172
  justify-content: center;
12177
12173
  width: auto;
12178
12174
  }
12179
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__text,
12180
- .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__controls {
12175
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
12176
+ .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
12181
12177
  display: none;
12182
12178
  }
12183
12179
  }
@@ -13823,7 +13819,7 @@ ul.pf-v6-c-list {
13823
13819
  grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
13824
13820
  }
13825
13821
  }
13826
- .pf-v6-c-page.pf-m-dock {
13822
+ .pf-v6-c-page.pf-m-docked {
13827
13823
  --pf-v6-c-page--masthead--main-container--GridArea: main;
13828
13824
  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
13829
13825
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
@@ -13832,7 +13828,7 @@ ul.pf-v6-c-list {
13832
13828
  grid-template-columns: auto 1fr;
13833
13829
  }
13834
13830
  @media (min-width: 62rem) {
13835
- .pf-v6-c-page.pf-m-dock {
13831
+ .pf-v6-c-page.pf-m-docked {
13836
13832
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
13837
13833
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
13838
13834
  grid-template-areas: "dock main";
@@ -13840,7 +13836,7 @@ ul.pf-v6-c-list {
13840
13836
  grid-template-columns: auto 1fr;
13841
13837
  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
13842
13838
  }
13843
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
13839
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
13844
13840
  display: none;
13845
13841
  }
13846
13842
  }
@@ -13899,7 +13895,7 @@ ul.pf-v6-c-list {
13899
13895
  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
13900
13896
  grid-area: header;
13901
13897
  }
13902
- .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
13898
+ .pf-v6-c-page.pf-m-docked > .pf-v6-c-masthead {
13903
13899
  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
13904
13900
  }
13905
13901
 
package/docs/components/CodeEditor/examples/CodeEditor.md CHANGED
@@ -206,7 +206,19 @@ cssPrefix: pf-v6-c-code-editor
206
206
  <div class="pf-v6-c-empty-state__content">
207
207
  <div class="pf-v6-c-empty-state__header">
208
208
  <div class="pf-v6-c-empty-state__icon">
209
- <i class="fas fa- fa-code" aria-hidden="true"></i>
209
+ <svg
210
+ class="pf-v6-svg"
211
+ viewBox="0 0 640 512"
212
+ fill="currentColor"
213
+ aria-hidden="true"
214
+ role="img"
215
+ width="1em"
216
+ height="1em"
217
+ >
218
+ <path
219
+ d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
220
+ />
221
+ </svg>
210
222
  </div>
211
223
  <div class="pf-v6-c-empty-state__title">
212
224
  <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
@@ -271,7 +283,19 @@ cssPrefix: pf-v6-c-code-editor
271
283
  <div class="pf-v6-c-empty-state__content">
272
284
  <div class="pf-v6-c-empty-state__header">
273
285
  <div class="pf-v6-c-empty-state__icon">
274
- <i class="fas fa- fa-code" aria-hidden="true"></i>
286
+ <svg
287
+ class="pf-v6-svg"
288
+ viewBox="0 0 640 512"
289
+ fill="currentColor"
290
+ aria-hidden="true"
291
+ role="img"
292
+ width="1em"
293
+ height="1em"
294
+ >
295
+ <path
296
+ d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
297
+ />
298
+ </svg>
275
299
  </div>
276
300
  <div class="pf-v6-c-empty-state__title">
277
301
  <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
@@ -501,7 +525,19 @@ This is an extra container used in React to prevent event propagation if upload
501
525
  <div class="pf-v6-c-empty-state__content">
502
526
  <div class="pf-v6-c-empty-state__header">
503
527
  <div class="pf-v6-c-empty-state__icon">
504
- <i class="fas fa- fa-code" aria-hidden="true"></i>
528
+ <svg
529
+ class="pf-v6-svg"
530
+ viewBox="0 0 640 512"
531
+ fill="currentColor"
532
+ aria-hidden="true"
533
+ role="img"
534
+ width="1em"
535
+ height="1em"
536
+ >
537
+ <path
538
+ d="M278.9 511.5l-61-17.7c-6.4-1.8-10-8.5-8.2-14.9L346.2 8.7c1.8-6.4 8.5-10 14.9-8.2l61 17.7c6.4 1.8 10 8.5 8.2 14.9L293.8 503.3c-1.9 6.4-8.5 10.1-14.9 8.2zm-114-112.2l43.5-46.4c4.6-4.9 4.3-12.7-.8-17.2L117 256l90.6-79.7c5.1-4.5 5.5-12.3.8-17.2l-43.5-46.4c-4.5-4.8-12.1-5.1-17-.5L3.8 247.2c-5.1 4.7-5.1 12.8 0 17.5l144.1 135.1c4.9 4.6 12.5 4.4 17-.5zm327.2.6l144.1-135.1c5.1-4.7 5.1-12.8 0-17.5L492.1 112.1c-4.8-4.5-12.4-4.3-17 .5L431.6 159c-4.6 4.9-4.3 12.7.8 17.2L523 256l-90.6 79.7c-5.1 4.5-5.5 12.3-.8 17.2l43.5 46.4c4.5 4.9 12.1 5.1 17 .6z"
539
+ />
540
+ </svg>
505
541
  </div>
506
542
  <div class="pf-v6-c-empty-state__title">
507
543
  <h4 class="pf-v6-c-empty-state__title-text">Start editing</h4>
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -63,7 +63,7 @@ In a basic Compass layout, the page structure is defined by the order of element
63
63
  ### Docked
64
64
 
65
65
  ```html isBeta
66
- <div class="pf-v6-c-compass pf-m-animate-smoothly pf-m-dock">
66
+ <div class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked">
67
67
  <div class="pf-v6-c-compass__dock">dock</div>
68
68
  <div class="pf-v6-c-compass__main">
69
69
  <div class="pf-v6-c-compass__main-header">
@@ -106,7 +106,7 @@ In a basic Compass layout, the page structure is defined by the order of element
106
106
  | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for Compass search button. |
107
107
  | `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. |
108
108
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
109
- | `.pf-m-dock` | `.pf-v6-c-compass` | Modifies for dock layout. |
109
+ | `.pf-m-docked` | `.pf-v6-c-compass` | Modifies for dock layout. |
110
110
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
111
111
  | `.pf-m-no-screen-warning` | `.pf-v6-c-compass` | Disables the screen warning that shows on smaller viewports. |
112
112
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
package/docs/components/EmptyState/examples/EmptyState.md CHANGED
@@ -11,7 +11,19 @@ cssPrefix: pf-v6-c-empty-state
11
11
  <div class="pf-v6-c-empty-state__content">
12
12
  <div class="pf-v6-c-empty-state__header">
13
13
  <div class="pf-v6-c-empty-state__icon">
14
- <i class="fas fa-cubes" aria-hidden="true"></i>
14
+ <svg
15
+ class="pf-v6-svg"
16
+ viewBox="0 0 512 512"
17
+ fill="currentColor"
18
+ aria-hidden="true"
19
+ role="img"
20
+ width="1em"
21
+ height="1em"
22
+ >
23
+ <path
24
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
25
+ />
26
+ </svg>
15
27
  </div>
16
28
  <div class="pf-v6-c-empty-state__title">
17
29
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -61,7 +73,19 @@ cssPrefix: pf-v6-c-empty-state
61
73
  <div class="pf-v6-c-empty-state__content">
62
74
  <div class="pf-v6-c-empty-state__header">
63
75
  <div class="pf-v6-c-empty-state__icon">
64
- <i class="fas fa-cubes" aria-hidden="true"></i>
76
+ <svg
77
+ class="pf-v6-svg"
78
+ viewBox="0 0 512 512"
79
+ fill="currentColor"
80
+ aria-hidden="true"
81
+ role="img"
82
+ width="1em"
83
+ height="1em"
84
+ >
85
+ <path
86
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
87
+ />
88
+ </svg>
65
89
  </div>
66
90
  <div class="pf-v6-c-empty-state__title">
67
91
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -106,7 +130,19 @@ cssPrefix: pf-v6-c-empty-state
106
130
  <div class="pf-v6-c-empty-state__content">
107
131
  <div class="pf-v6-c-empty-state__header">
108
132
  <div class="pf-v6-c-empty-state__icon">
109
- <i class="fas fa-cubes" aria-hidden="true"></i>
133
+ <svg
134
+ class="pf-v6-svg"
135
+ viewBox="0 0 512 512"
136
+ fill="currentColor"
137
+ aria-hidden="true"
138
+ role="img"
139
+ width="1em"
140
+ height="1em"
141
+ >
142
+ <path
143
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
144
+ />
145
+ </svg>
110
146
  </div>
111
147
  <div class="pf-v6-c-empty-state__title">
112
148
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -157,7 +193,19 @@ cssPrefix: pf-v6-c-empty-state
157
193
  <div class="pf-v6-c-empty-state__content">
158
194
  <div class="pf-v6-c-empty-state__header">
159
195
  <div class="pf-v6-c-empty-state__icon">
160
- <i class="fas fa-cubes" aria-hidden="true"></i>
196
+ <svg
197
+ class="pf-v6-svg"
198
+ viewBox="0 0 512 512"
199
+ fill="currentColor"
200
+ aria-hidden="true"
201
+ role="img"
202
+ width="1em"
203
+ height="1em"
204
+ >
205
+ <path
206
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
207
+ />
208
+ </svg>
161
209
  </div>
162
210
  <div class="pf-v6-c-empty-state__title">
163
211
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -207,7 +255,19 @@ cssPrefix: pf-v6-c-empty-state
207
255
  <div class="pf-v6-c-empty-state__content">
208
256
  <div class="pf-v6-c-empty-state__header">
209
257
  <div class="pf-v6-c-empty-state__icon">
210
- <i class="fas fa-cubes" aria-hidden="true"></i>
258
+ <svg
259
+ class="pf-v6-svg"
260
+ viewBox="0 0 512 512"
261
+ fill="currentColor"
262
+ aria-hidden="true"
263
+ role="img"
264
+ width="1em"
265
+ height="1em"
266
+ >
267
+ <path
268
+ d="M488.6 250.2L392 214V105.5c0-15-9.3-28.4-23.4-33.7l-100-37.5c-8.1-3.1-17.1-3.1-25.3 0l-100 37.5c-14.1 5.3-23.4 18.7-23.4 33.7V214l-96.6 36.2C9.3 255.5 0 268.9 0 283.9V394c0 13.6 7.7 26.1 19.9 32.2l100 50c10.1 5.1 22.1 5.1 32.2 0l103.9-52 103.9 52c10.1 5.1 22.1 5.1 32.2 0l100-50c12.2-6.1 19.9-18.6 19.9-32.2V283.9c0-15-9.3-28.4-23.4-33.7zM358 214.8l-85 31.9v-68.2l85-37v73.3zM154 104.1l102-38.2 102 38.2v.6l-102 41.4-102-41.4v-.6zm84 291.1l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6zm240 112l-85 42.5v-79.1l85-38.8v75.4zm0-112l-102 41.4-102-41.4v-.6l102-38.2 102 38.2v.6z"
269
+ />
270
+ </svg>
211
271
  </div>
212
272
  <div class="pf-v6-c-empty-state__title">
213
273
  <h4 class="pf-v6-c-empty-state__title-text">Empty state</h4>
@@ -256,7 +316,19 @@ cssPrefix: pf-v6-c-empty-state
256
316
  <div class="pf-v6-c-empty-state__content">
257
317
  <div class="pf-v6-c-empty-state__header">
258
318
  <div class="pf-v6-c-empty-state__icon">
259
- <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
319
+ <svg
320
+ class="pf-v6-svg"
321
+ viewBox="0 0 512 512"
322
+ fill="currentColor"
323
+ aria-hidden="true"
324
+ role="img"
325
+ width="1em"
326
+ height="1em"
327
+ >
328
+ <path
329
+ d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
330
+ />
331
+ </svg>
260
332
  </div>
261
333
  <div class="pf-v6-c-empty-state__title">
262
334
  <h4 class="pf-v6-c-empty-state__title-text">You're all set</h4>
package/docs/components/MenuToggle/examples/MenuToggle.md CHANGED
@@ -3526,14 +3526,46 @@ Shown with default, primary, and secondary styling
3526
3526
  type="button"
3527
3527
  aria-expanded="false"
3528
3528
  aria-label="Settings"
3529
- ></button>
3529
+ >
3530
+ <span class="pf-v6-c-menu-toggle__icon">
3531
+ <svg
3532
+ class="pf-v6-svg"
3533
+ viewBox="0 0 32 32"
3534
+ fill="currentColor"
3535
+ aria-hidden="true"
3536
+ role="img"
3537
+ width="1em"
3538
+ height="1em"
3539
+ >
3540
+ <path
3541
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3542
+ />
3543
+ </svg>
3544
+ </span>
3545
+ </button>
3530
3546
 
3531
3547
  <button
3532
3548
  class="pf-v6-c-menu-toggle pf-m-settings pf-m-expanded pf-m-plain"
3533
3549
  type="button"
3534
3550
  aria-expanded="true"
3535
3551
  aria-label="Settings"
3536
- ></button>
3552
+ >
3553
+ <span class="pf-v6-c-menu-toggle__icon">
3554
+ <svg
3555
+ class="pf-v6-svg"
3556
+ viewBox="0 0 32 32"
3557
+ fill="currentColor"
3558
+ aria-hidden="true"
3559
+ role="img"
3560
+ width="1em"
3561
+ height="1em"
3562
+ >
3563
+ <path
3564
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3565
+ />
3566
+ </svg>
3567
+ </span>
3568
+ </button>
3537
3569
 
3538
3570
  <button
3539
3571
  class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain pf-m-disabled"
@@ -3541,7 +3573,23 @@ Shown with default, primary, and secondary styling
3541
3573
  aria-expanded="false"
3542
3574
  disabled
3543
3575
  aria-label="Settings"
3544
- ></button>
3576
+ >
3577
+ <span class="pf-v6-c-menu-toggle__icon">
3578
+ <svg
3579
+ class="pf-v6-svg"
3580
+ viewBox="0 0 32 32"
3581
+ fill="currentColor"
3582
+ aria-hidden="true"
3583
+ role="img"
3584
+ width="1em"
3585
+ height="1em"
3586
+ >
3587
+ <path
3588
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
3589
+ />
3590
+ </svg>
3591
+ </span>
3592
+ </button>
3545
3593
 
3546
3594
  ```
3547
3595