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

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 (16) hide show
  1. package/components/Card/card.css +16 -8
  2. package/components/Card/card.scss +25 -10
  3. package/components/OverflowMenu/overflow-menu.css +16 -0
  4. package/components/OverflowMenu/overflow-menu.scss +20 -1
  5. package/components/Toolbar/toolbar.css +100 -0
  6. package/components/Toolbar/toolbar.scss +2 -2
  7. package/components/_index.css +132 -8
  8. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  9. package/docs/components/OverflowMenu/examples/overflow-menu.md +21 -0
  10. package/docs/components/Toolbar/examples/Toolbar.md +39 -0
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +132 -8
  13. package/patternfly.css +132 -8
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
  16. package/sass-utilities/mixins.scss +16 -1
package/components/Card/card.css CHANGED
@@ -105,6 +105,13 @@
105
105
  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
106
106
  border-radius: inherit;
107
107
  }
108
+ :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
109
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
110
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
111
+ --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
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
114
+ }
108
115
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
109
116
  gap: 0;
110
117
  }
@@ -187,6 +194,15 @@
187
194
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
188
195
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
189
196
  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
197
+ backdrop-filter: none;
198
+ }
199
+ .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
200
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
201
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
202
+ }
203
+ .pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
204
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
205
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
190
206
  }
191
207
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
192
208
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -197,14 +213,6 @@
197
213
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
198
214
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
199
215
  }
200
- .pf-v6-c-card.pf-m-glass {
201
- --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
202
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
203
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
204
- --pf-v6-c-card--BorderStyle: solid;
205
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
206
- backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
207
- }
208
216
 
209
217
  .pf-v6-c-card__header {
210
218
  display: flex;
package/components/Card/card.scss CHANGED
@@ -143,6 +143,17 @@
143
143
  border-radius: inherit;
144
144
  }
145
145
 
146
+ :where(.pf-v6-theme-glass) & {
147
+ &.pf-m-glass {
148
+ --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
149
+ --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
150
+ --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
151
+ --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);
152
+
153
+ backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
154
+ }
155
+ }
156
+
146
157
  // SELECTABLE CARDS
147
158
  &.pf-m-selectable {
148
159
  // disables the gap since these have an empty label
@@ -266,6 +277,20 @@
266
277
  --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
267
278
  --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
268
279
  --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
280
+
281
+ backdrop-filter: none;
282
+
283
+ // A clickable/selectable plain card should behave like a non-plain card in every way except the background color
284
+ &.pf-m-selectable,
285
+ &.pf-m-clickable {
286
+ --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
287
+ --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
288
+
289
+ &.pf-m-current {
290
+ --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
291
+ --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
292
+ }
293
+ }
269
294
  }
270
295
 
271
296
  &.pf-m-expanded {
@@ -286,16 +311,6 @@
286
311
  padding-block-start: var(--#{$card}--c-divider--child--PaddingBlockStart);
287
312
  }
288
313
  }
289
-
290
- &.pf-m-glass {
291
- --#{$card}--BackgroundColor: var(--#{$card}--m-glass--BackgroundColor);
292
- --#{$card}--BorderColor: var(--#{$card}--m-glass--BorderColor);
293
- --#{$card}--BorderWidth: var(--#{$card}--m-glass--BorderWidth);
294
- --#{$card}--BorderStyle: solid;
295
- --#{$card}--BoxShadow: var(--#{$card}--m-glass--BoxShadow);
296
-
297
- backdrop-filter: var(--#{$card}--m-glass--BackdropFilter);
298
- }
299
314
  }
300
315
 
301
316
  .#{$card}__header {
package/components/OverflowMenu/overflow-menu.css CHANGED
@@ -1,15 +1,26 @@
1
1
  .pf-v6-c-overflow-menu {
2
2
  --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
3
+ --pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
3
4
  --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
5
+ --pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
4
6
  --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
7
+ --pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
5
8
  --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
9
+ --pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
6
10
  }
7
11
 
8
12
  .pf-v6-c-overflow-menu {
9
13
  display: inline-flex;
14
+ row-gap: var(--pf-v6-c-overflow-menu--RowGap);
10
15
  column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
11
16
  }
12
17
 
18
+ .pf-v6-c-overflow-menu.pf-m-vertical,
19
+ .pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
20
+ .pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
21
+ flex-direction: column;
22
+ }
23
+
13
24
  .pf-v6-c-overflow-menu__content,
14
25
  .pf-v6-c-overflow-menu__group {
15
26
  display: flex;
@@ -17,20 +28,25 @@
17
28
  }
18
29
 
19
30
  .pf-v6-c-overflow-menu__group {
31
+ row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
20
32
  column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
21
33
  }
22
34
  .pf-v6-c-overflow-menu__group.pf-m-button-group {
35
+ row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
23
36
  column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
24
37
  }
25
38
  .pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
39
+ row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
26
40
  column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
27
41
  }
28
42
 
29
43
  .pf-v6-c-overflow-menu__item {
44
+ row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
30
45
  column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
31
46
  }
32
47
 
33
48
  .pf-v6-c-overflow-menu__content,
34
49
  .pf-v6-c-overflow-menu__control {
50
+ row-gap: var(--pf-v6-c-overflow-menu--RowGap);
35
51
  column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
36
52
  }
package/components/OverflowMenu/overflow-menu.scss CHANGED
@@ -2,23 +2,37 @@
2
2
 
3
3
  @include pf-root($overflow-menu) {
4
4
  --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
5
+ --#{$overflow-menu}--RowGap: var(--pf-t--global--spacer--md);
5
6
 
6
7
  // * Overflow menu group
7
8
  --#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
9
+ --#{$overflow-menu}__group--RowGap: var(--pf-t--global--spacer--md);
8
10
 
9
11
  // * Overflow menu button group
10
12
  --#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
13
+ --#{$overflow-menu}__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
11
14
 
12
15
  // * Overflow menu icon button group
13
16
  --#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
17
+ --#{$overflow-menu}__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
14
18
  }
15
19
 
16
20
  // - Overflow menu
17
21
  .#{$overflow-menu} {
18
22
  display: inline-flex;
23
+ row-gap: var(--#{$overflow-menu}--RowGap);
19
24
  column-gap: var(--#{$overflow-menu}--ColumnGap);
20
25
  }
21
26
 
27
+ // - Overflow menu - vertical
28
+ .#{$overflow-menu}.pf-m-vertical {
29
+ &,
30
+ .#{$overflow-menu}__content,
31
+ .#{$overflow-menu}__group {
32
+ flex-direction: column;
33
+ }
34
+ }
35
+
22
36
  // - Overflow menu content - Overflow menu group
23
37
  .#{$overflow-menu}__content,
24
38
  .#{$overflow-menu}__group {
@@ -28,26 +42,31 @@
28
42
 
29
43
  // - Overflow menu group
30
44
  .#{$overflow-menu}__group {
45
+ row-gap: var(--#{$overflow-menu}__group--RowGap);
31
46
  column-gap: var(--#{$overflow-menu}__group--ColumnGap);
32
-
47
+
33
48
  // - Overflow menu button group
34
49
  &.pf-m-button-group {
50
+ row-gap: var(--#{$overflow-menu}__group--m-button-group--RowGap);
35
51
  column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
36
52
  }
37
53
 
38
54
  // - Overflow menu icon button group
39
55
  &.pf-m-icon-button-group {
56
+ row-gap: var(--#{$overflow-menu}__group--m-icon-button-group--RowGap);
40
57
  column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
41
58
  }
42
59
  }
43
60
 
44
61
  // - Oveflow menu item
45
62
  .#{$overflow-menu}__item {
63
+ row-gap: var(--#{$overflow-menu}__item--RowGap, var(--#{$overflow-menu}--RowGap));
46
64
  column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
47
65
  }
48
66
 
49
67
  // - Overflow menu content - Overflow menu control
50
68
  .#{$overflow-menu}__content,
51
69
  .#{$overflow-menu}__control {
70
+ row-gap: var(--#{$overflow-menu}--RowGap);
52
71
  column-gap: var(--#{$overflow-menu}--ColumnGap);
53
72
  }
package/components/Toolbar/toolbar.css CHANGED
@@ -66,6 +66,66 @@
66
66
  .pf-v6-c-toolbar__item.pf-m-hidden {
67
67
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
68
68
  }
69
+ @media screen and (min-height: 0) {
70
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
71
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
72
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
73
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
74
+ }
75
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
76
+ .pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
77
+ .pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
78
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
79
+ }
80
+ }
81
+ @media screen and (min-height: 40rem) {
82
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
83
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
84
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
85
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
86
+ }
87
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
88
+ .pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
89
+ .pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
90
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
91
+ }
92
+ }
93
+ @media screen and (min-height: 48rem) {
94
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
95
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
96
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
97
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
98
+ }
99
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
100
+ .pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
101
+ .pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
102
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
103
+ }
104
+ }
105
+ @media screen and (min-height: 60rem) {
106
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
107
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
108
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
109
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
110
+ }
111
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
112
+ .pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
113
+ .pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
114
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
115
+ }
116
+ }
117
+ @media screen and (min-height: 80rem) {
118
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
119
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
120
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
121
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
122
+ }
123
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
124
+ .pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
125
+ .pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
126
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
127
+ }
128
+ }
69
129
  @media screen and (min-width: 36rem) {
70
130
  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
71
131
  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
@@ -141,6 +201,46 @@
141
201
  .pf-v6-c-toolbar__content.pf-m-hidden {
142
202
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
143
203
  }
204
+ @media screen and (min-height: 0) {
205
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
206
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
207
+ }
208
+ .pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
209
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
210
+ }
211
+ }
212
+ @media screen and (min-height: 40rem) {
213
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
214
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
215
+ }
216
+ .pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
217
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
218
+ }
219
+ }
220
+ @media screen and (min-height: 48rem) {
221
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
222
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
223
+ }
224
+ .pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
225
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
226
+ }
227
+ }
228
+ @media screen and (min-height: 60rem) {
229
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
230
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
231
+ }
232
+ .pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
233
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
234
+ }
235
+ }
236
+ @media screen and (min-height: 80rem) {
237
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
238
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
239
+ }
240
+ .pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
241
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
242
+ }
243
+ }
144
244
  @media screen and (min-width: 36rem) {
145
245
  .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
146
246
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
package/components/Toolbar/toolbar.scss CHANGED
@@ -101,7 +101,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
101
101
  .#{$toolbar}__content-section,
102
102
  .#{$toolbar}__group,
103
103
  .#{$toolbar}__item {
104
- @include pf-v6-hidden-visible(flex);
104
+ @include pf-v6-hidden-visible(flex, $ifIncludeHeight: true);
105
105
  }
106
106
 
107
107
  // - Toolbar - Toolbar content
@@ -112,7 +112,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
112
112
 
113
113
  // - Toolbar content - Toolbar content section - Toolbar expandable content
114
114
  .#{$toolbar}__content {
115
- @include pf-v6-hidden-visible(grid);
115
+ @include pf-v6-hidden-visible(grid, $ifIncludeHeight: true);
116
116
 
117
117
  row-gap: var(--#{$toolbar}__content--RowGap);
118
118
  padding-inline-start: var(--#{$toolbar}__content--PaddingInlineStart);
package/components/_index.css CHANGED
@@ -2915,6 +2915,13 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2915
2915
  border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
2916
2916
  border-radius: inherit;
2917
2917
  }
2918
+ :where(.pf-v6-theme-glass) .pf-v6-c-card.pf-m-glass {
2919
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
2920
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
2921
+ --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
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
2924
+ }
2918
2925
  .pf-v6-c-card.pf-m-selectable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check, .pf-v6-c-radio) {
2919
2926
  gap: 0;
2920
2927
  }
@@ -2997,6 +3004,15 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2997
3004
  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
2998
3005
  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
2999
3006
  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
3007
+ backdrop-filter: none;
3008
+ }
3009
+ .pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
3010
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
3011
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
3012
+ }
3013
+ .pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
3014
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
3015
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
3000
3016
  }
3001
3017
  .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
3002
3018
  transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -3007,14 +3023,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3007
3023
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
3008
3024
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
3009
3025
  }
3010
- .pf-v6-c-card.pf-m-glass {
3011
- --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
3012
- --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
3013
- --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
3014
- --pf-v6-c-card--BorderStyle: solid;
3015
- --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
3016
- backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
3017
- }
3018
3026
 
3019
3027
  .pf-v6-c-card__header {
3020
3028
  display: flex;
@@ -13504,16 +13512,27 @@ ul.pf-v6-c-list {
13504
13512
 
13505
13513
  .pf-v6-c-overflow-menu {
13506
13514
  --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
13515
+ --pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
13507
13516
  --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
13517
+ --pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
13508
13518
  --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
13519
+ --pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
13509
13520
  --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
13521
+ --pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
13510
13522
  }
13511
13523
 
13512
13524
  .pf-v6-c-overflow-menu {
13513
13525
  display: inline-flex;
13526
+ row-gap: var(--pf-v6-c-overflow-menu--RowGap);
13514
13527
  column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
13515
13528
  }
13516
13529
 
13530
+ .pf-v6-c-overflow-menu.pf-m-vertical,
13531
+ .pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
13532
+ .pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
13533
+ flex-direction: column;
13534
+ }
13535
+
13517
13536
  .pf-v6-c-overflow-menu__content,
13518
13537
  .pf-v6-c-overflow-menu__group {
13519
13538
  display: flex;
@@ -13521,21 +13540,26 @@ ul.pf-v6-c-list {
13521
13540
  }
13522
13541
 
13523
13542
  .pf-v6-c-overflow-menu__group {
13543
+ row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
13524
13544
  column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
13525
13545
  }
13526
13546
  .pf-v6-c-overflow-menu__group.pf-m-button-group {
13547
+ row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
13527
13548
  column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
13528
13549
  }
13529
13550
  .pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
13551
+ row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
13530
13552
  column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
13531
13553
  }
13532
13554
 
13533
13555
  .pf-v6-c-overflow-menu__item {
13556
+ row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
13534
13557
  column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
13535
13558
  }
13536
13559
 
13537
13560
  .pf-v6-c-overflow-menu__content,
13538
13561
  .pf-v6-c-overflow-menu__control {
13562
+ row-gap: var(--pf-v6-c-overflow-menu--RowGap);
13539
13563
  column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
13540
13564
  }
13541
13565
 
@@ -22442,6 +22466,66 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22442
22466
  .pf-v6-c-toolbar__item.pf-m-hidden {
22443
22467
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22444
22468
  }
22469
+ @media screen and (min-height: 0) {
22470
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
22471
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
22472
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
22473
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22474
+ }
22475
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
22476
+ .pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
22477
+ .pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
22478
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22479
+ }
22480
+ }
22481
+ @media screen and (min-height: 40rem) {
22482
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
22483
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
22484
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
22485
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22486
+ }
22487
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
22488
+ .pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
22489
+ .pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
22490
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22491
+ }
22492
+ }
22493
+ @media screen and (min-height: 48rem) {
22494
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
22495
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
22496
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
22497
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22498
+ }
22499
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
22500
+ .pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
22501
+ .pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
22502
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22503
+ }
22504
+ }
22505
+ @media screen and (min-height: 60rem) {
22506
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
22507
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
22508
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
22509
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22510
+ }
22511
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
22512
+ .pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
22513
+ .pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
22514
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22515
+ }
22516
+ }
22517
+ @media screen and (min-height: 80rem) {
22518
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
22519
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
22520
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
22521
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22522
+ }
22523
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
22524
+ .pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
22525
+ .pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
22526
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22527
+ }
22528
+ }
22445
22529
  @media screen and (min-width: 36rem) {
22446
22530
  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
22447
22531
  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
@@ -22517,6 +22601,46 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22517
22601
  .pf-v6-c-toolbar__content.pf-m-hidden {
22518
22602
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22519
22603
  }
22604
+ @media screen and (min-height: 0) {
22605
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
22606
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22607
+ }
22608
+ .pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
22609
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22610
+ }
22611
+ }
22612
+ @media screen and (min-height: 40rem) {
22613
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
22614
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22615
+ }
22616
+ .pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
22617
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22618
+ }
22619
+ }
22620
+ @media screen and (min-height: 48rem) {
22621
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
22622
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22623
+ }
22624
+ .pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
22625
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22626
+ }
22627
+ }
22628
+ @media screen and (min-height: 60rem) {
22629
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
22630
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22631
+ }
22632
+ .pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
22633
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22634
+ }
22635
+ }
22636
+ @media screen and (min-height: 80rem) {
22637
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
22638
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22639
+ }
22640
+ .pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
22641
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22642
+ }
22643
+ }
22520
22644
  @media screen and (min-width: 36rem) {
22521
22645
  .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
22522
22646
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
package/docs/components/OverflowMenu/examples/overflow-menu.css CHANGED
@@ -1,11 +1,14 @@
1
1
  #ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__item,
2
2
  #ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group,
3
- #ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]) {
3
+ #ws-core-c-overflow-menu-group-types .pf-v6-c-overflow-menu__group:not([class*="pf-m-"]),
4
+ #ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__item,
5
+ #ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__group {
4
6
  padding: .5rem;
5
7
  border: 2px dashed #393f44;
6
8
  }
7
9
 
8
- #ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
10
+ #ws-core-c-overflow-menu-simple .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item,
11
+ #ws-core-c-overflow-menu-vertical .pf-v6-c-overflow-menu__group .pf-v6-c-overflow-menu__item {
9
12
  padding: 0;
10
13
  border: none;
11
- }
14
+ }
package/docs/components/OverflowMenu/examples/overflow-menu.md CHANGED
@@ -60,6 +60,26 @@ The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (
60
60
 
61
61
  ```
62
62
 
63
+ ### Vertical
64
+
65
+ ```html isBeta
66
+ <div
67
+ class="pf-v6-c-overflow-menu pf-m-vertical"
68
+ id="overflow-menu-vertical-expanded"
69
+ >
70
+ <div class="pf-v6-c-overflow-menu__content">
71
+ <div class="pf-v6-c-overflow-menu__item">Item 1</div>
72
+ <div class="pf-v6-c-overflow-menu__item">Item 2</div>
73
+ <div class="pf-v6-c-overflow-menu__group">
74
+ <div class="pf-v6-c-overflow-menu__item">Item 3</div>
75
+ <div class="pf-v6-c-overflow-menu__item">Item 4</div>
76
+ <div class="pf-v6-c-overflow-menu__item">Item 5</div>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ ```
82
+
63
83
  ### Default spacing for items and groups:
64
84
 
65
85
  | Class | CSS Variable | Computed Value |
@@ -460,5 +480,6 @@ The action group consists of a primary and secondary action. Any additional acti
460
480
  | `.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
461
481
  | `.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
462
482
  | `.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
483
+ | `.pf-m-vertical` | `.pf-v6-c-overflow-menu` | Modifies the flex direction to "column", for vertically aligned overflow menus. |
463
484
  | `.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`. |
464
485
  | `.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`. |
package/docs/components/Toolbar/examples/Toolbar.md CHANGED
@@ -28,6 +28,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
28
28
  | Class | Applied to | Outcome |
29
29
  | -- | -- | -- |
30
30
  | `.pf-m-[hidden/visible]` | `.pf-v6-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
31
+ | `.pf-m-[hidden/visible]{-on-[breakpoint]}` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar elements to be hidden/visible on an option breakpoint. |
32
+ | `.pf-m-[hidden/visible]{-on-[breakpoint]}-height` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar elements to be hidden/visible on an option height breakpoint. Primarily for use with vertical toolbars. |
31
33
  | `.pf-m-flex-grow` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
32
34
  | `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
33
35
  | `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
@@ -3585,6 +3587,43 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
3585
3587
 
3586
3588
  ```
3587
3589
 
3590
+ ### Vertical with height visibility breakpoints
3591
+
3592
+ Visibility can be set per breakpoint to show or hide items and groups based on viewport height.
3593
+
3594
+ ```html isBeta
3595
+ <div
3596
+ class="pf-v6-c-toolbar pf-m-vertical"
3597
+ id="toolbar-vertical-height-toggle-example"
3598
+ >
3599
+ <div class="pf-v6-c-toolbar__content">
3600
+ <div class="pf-v6-c-toolbar__content-section">
3601
+ <div class="pf-v6-c-toolbar__item">Item</div>
3602
+ <div class="pf-v6-c-toolbar__item">Item</div>
3603
+ <div class="pf-v6-c-toolbar__item">Item</div>
3604
+ <hr class="pf-v6-c-divider" />
3605
+
3606
+ <div class="pf-v6-c-toolbar__group">
3607
+ <div class="pf-v6-c-toolbar__item">Item</div>
3608
+ <div class="pf-v6-c-toolbar__item">Item</div>
3609
+ <div
3610
+ class="pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-md-height"
3611
+ >Item (hidden below md)</div>
3612
+ </div>
3613
+
3614
+ <hr class="pf-v6-c-divider" />
3615
+
3616
+ <div class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg-height">
3617
+ <div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
3618
+ <div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
3619
+ <div class="pf-v6-c-toolbar__item">Item (hidden below lg)</div>
3620
+ </div>
3621
+ </div>
3622
+ </div>
3623
+ </div>
3624
+
3625
+ ```
3626
+
3588
3627
  ## Documentation
3589
3628
 
3590
3629
  ### Overview