@patternfly/patternfly 6.0.0-alpha.202 → 6.0.0-alpha.204

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.
@@ -18,7 +18,7 @@
18
18
  --#{$form-control}--Width: 100%;
19
19
 
20
20
  // padding
21
- --#{$form-control}--inset--base: var(--pf-t--global--spacer--md);
21
+ --#{$form-control}--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
22
22
  --#{$form-control}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
23
23
  --#{$form-control}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
24
24
  --#{$form-control}--PaddingInlineEnd: var(--#{$form-control}--inset--base);
@@ -60,43 +60,43 @@
60
60
  // success
61
61
  --#{$form-control}--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
62
62
  --#{$form-control}--m-success--after--BorderColor: var(--pf-t--global--border--color--status--success--default);
63
- --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
63
+ --#{$form-control}--m-success--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
64
64
 
65
65
  // warning
66
66
  --#{$form-control}--m-warning--after--BorderWidth: var(--pf-t--global--border--width--control--default);
67
67
  --#{$form-control}--m-warning--after--BorderColor: var(--pf-t--global--border--color--status--warning--default);
68
- --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
68
+ --#{$form-control}--m-warning--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
69
69
 
70
70
  // error
71
71
  --#{$form-control}--m-error--after--BorderWidth: var(--pf-t--global--border--width--control--default);
72
72
  --#{$form-control}--m-error--after--BorderColor: var(--pf-t--global--border--color--status--danger--default);
73
- --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--#{$form-control}--ColumnGap));
73
+ --#{$form-control}--m-error--PaddingInlineEnd: calc(var(--#{$form-control}__icon--FontSize) + var(--#{$form-control}--inset--base) + var(--#{$form-control}--ColumnGap));
74
74
  --#{$form-control}--m-error--icon--width: var(--#{$form-control}--FontSize);
75
75
 
76
76
  // custom icon
77
77
  --#{$form-control}--m-icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
78
78
  --#{$form-control}--m-icon--icon--width: var(--#{$form-control}--FontSize);
79
- --#{$form-control}--m-icon--icon--spacer: var(--pf-t--global--spacer--sm);
79
+ --#{$form-control}--m-icon--icon--spacer: calc(var(--pf-t--global--spacer--control--horizontal--default) / 2);
80
80
  --#{$form-control}--m-icon--icon--PaddingInlineEnd: calc(var(--#{$form-control}--inset--base) + var(--#{$form-control}--m-error--icon--width) + var(--#{$form-control}--m-icon--icon--spacer) + var(--#{$form-control}--m-icon--icon--width) + var(--#{$form-control}--m-icon--icon--spacer));
81
- --#{$form-control}__select--PaddingInlineEnd: var(--pf-t--global--spacer--md);
82
- --#{$form-control}__select--PaddingInlineStart: var(--pf-t--global--spacer--md);
81
+ --#{$form-control}__select--PaddingInlineEnd: var(--#{$form-control}--inset--base);
82
+ --#{$form-control}__select--PaddingInlineStart: var(--#{$form-control}--inset--base);
83
83
 
84
84
  // Select success
85
- --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
85
+ --#{$form-control}__select--m-success--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
86
86
 
87
87
  // Select warning
88
- --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
88
+ --#{$form-control}__select--m-warning--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
89
89
 
90
90
  // Select invalid
91
- --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: var(--pf-t--global--spacer--3xl);
91
+ --#{$form-control}__select--m-error--m-status--PaddingInlineEnd: calc((var(--#{$form-control}__icon--FontSize) * 2) + var(--#{$form-control}__utilities--Gap) + var(--#{$form-control}__toggle-icon--PaddingInlineEnd) + var(--#{$form-control}__toggle-icon--PaddingInlineStart));
92
92
 
93
93
  // Textarea
94
94
  --#{$form-control}--textarea--Width: var(--#{$form-control}--Width);
95
95
  --#{$form-control}--textarea--Height: auto;
96
96
 
97
97
  // Form control icon
98
- --#{$form-control}__icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
99
98
  --#{$form-control}__icon--Color: var(--pf-t--global--icon--color--regular);
99
+ --#{$form-control}__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
100
100
  --#{$form-control}__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
101
101
  --#{$form-control}--m-success__icon--m-status--Color: var(--pf-t--global--icon--color--status--success--default);
102
102
  --#{$form-control}--m-warning__icon--m-status--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -104,11 +104,10 @@
104
104
 
105
105
  // Form control utilities
106
106
  --#{$form-control}__utilities--Gap: var(--pf-t--global--spacer--sm);
107
- --#{$form-control}__utilities--PaddingBlockStart: var(--#{$form-control}--inset--base);
107
+ --#{$form-control}__utilities--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
108
108
  --#{$form-control}__utilities--PaddingInlineEnd: var(--#{$form-control}--inset--base);
109
109
 
110
110
  // Form control select toggle icon
111
- --#{$form-control}__toggle-icon--PaddingBlockStart: var(--pf-t--global--spacer--sm);
112
111
  --#{$form-control}__toggle-icon--PaddingInlineEnd: var(--#{$form-control}--inset--base);
113
112
  --#{$form-control}__toggle-icon--PaddingInlineStart: var(--#{$form-control}--inset--base);
114
113
  --#{$form-control}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -321,7 +320,7 @@
321
320
  }
322
321
 
323
322
  .#{$form-control}__icon {
324
- padding-block-start: var(--#{$form-control}__icon--PaddingBlockStart);
323
+ font-size: var(--#{$form-control}__icon--FontSize);
325
324
  color: var(--#{$form-control}__icon--Color);
326
325
 
327
326
  &.pf-m-status {
@@ -332,7 +331,6 @@
332
331
  .#{$form-control}__toggle-icon {
333
332
  grid-row: 1 / 2;
334
333
  grid-column: 3;
335
- padding-block-start: var(--#{$form-control}__toggle-icon--PaddingBlockStart);
336
334
  padding-inline-start: var(--#{$form-control}__toggle-icon--PaddingInlineStart);
337
335
  padding-inline-end: var(--#{$form-control}__toggle-icon--PaddingInlineEnd);
338
336
  color: var(--#{$form-control}__toggle-icon--Color);
@@ -345,6 +343,7 @@
345
343
  grid-row: 1 / 2;
346
344
  grid-column: 2;
347
345
  gap: var(--#{$form-control}__utilities--Gap);
346
+ padding-block-start: var(--#{$form-control}__utilities--PaddingBlockStart);
348
347
  padding-inline-end: var(--#{$form-control}__utilities--PaddingInlineEnd);
349
348
  pointer-events: none;
350
349
  }
@@ -18,8 +18,9 @@
18
18
  --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
19
19
  --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
20
20
  --pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
21
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
21
+ --pf-v6-c-masthead--m-display-stack__content--GridColumn: 1;
22
22
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
23
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
23
24
  --pf-v6-c-masthead--m-display-stack__main--Display: contents;
24
25
  --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
25
26
  --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
@@ -32,6 +33,7 @@
32
33
  --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
33
34
  --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
34
35
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
36
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
35
37
  --pf-v6-c-masthead--m-display-inline__main--Display: flex;
36
38
  --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
37
39
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -50,6 +52,7 @@
50
52
  --pf-v6-c-masthead__main--GridColumn: unset;
51
53
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
52
54
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
55
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
53
56
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
54
57
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
55
58
  display: grid;
@@ -80,6 +83,7 @@
80
83
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
81
84
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
82
85
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
86
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
83
87
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
84
88
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
85
89
  }
@@ -103,6 +107,7 @@
103
107
  --pf-v6-c-masthead__main--GridColumn: unset;
104
108
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
105
109
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
110
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
106
111
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
107
112
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
108
113
  }
@@ -116,6 +121,7 @@
116
121
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
117
122
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
118
123
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
124
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
119
125
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
120
126
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
121
127
  }
@@ -151,6 +157,9 @@
151
157
  align-items: center;
152
158
  margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
153
159
  }
160
+ .pf-v6-c-masthead__main:has(.pf-v6-c-masthead__toggle) ~ .pf-v6-c-masthead__content {
161
+ --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead__main--toggle--content--GridColumn);
162
+ }
154
163
 
155
164
  .pf-v6-c-masthead,
156
165
  .pf-v6-c-masthead__brand {
@@ -211,6 +220,7 @@
211
220
  --pf-v6-c-masthead__main--GridColumn: unset;
212
221
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
213
222
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
223
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
214
224
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
215
225
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
216
226
  }
@@ -224,6 +234,7 @@
224
234
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
225
235
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
226
236
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
237
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
227
238
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
228
239
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
229
240
  }
@@ -262,6 +273,7 @@
262
273
  --pf-v6-c-masthead__main--GridColumn: unset;
263
274
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
264
275
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
276
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
265
277
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
266
278
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
267
279
  }
@@ -275,6 +287,7 @@
275
287
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
276
288
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
277
289
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
290
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
278
291
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
279
292
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
280
293
  }
@@ -314,6 +327,7 @@
314
327
  --pf-v6-c-masthead__main--GridColumn: unset;
315
328
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
316
329
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
330
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
317
331
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
318
332
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
319
333
  }
@@ -327,6 +341,7 @@
327
341
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
328
342
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
329
343
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
344
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
330
345
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
331
346
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
332
347
  }
@@ -366,6 +381,7 @@
366
381
  --pf-v6-c-masthead__main--GridColumn: unset;
367
382
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
368
383
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
384
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
369
385
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
370
386
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
371
387
  }
@@ -379,6 +395,7 @@
379
395
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
380
396
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
381
397
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
398
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
382
399
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
383
400
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
384
401
  }
@@ -418,6 +435,7 @@
418
435
  --pf-v6-c-masthead__main--GridColumn: unset;
419
436
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
420
437
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
438
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
421
439
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
422
440
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
423
441
  }
@@ -431,6 +449,7 @@
431
449
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
432
450
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
433
451
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
452
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
434
453
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
435
454
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
436
455
  }
@@ -470,6 +489,7 @@
470
489
  --pf-v6-c-masthead__main--GridColumn: unset;
471
490
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
472
491
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
492
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
473
493
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
474
494
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
475
495
  }
@@ -483,6 +503,7 @@
483
503
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
484
504
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
485
505
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
506
+ --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
486
507
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
487
508
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
488
509
  }
@@ -34,8 +34,9 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
34
34
  --#{$masthead}--m-display-stack__brand--Order: -1;
35
35
  --#{$masthead}--m-display-stack__brand--PaddingBlockEnd: var(--#{$masthead}--RowGap);
36
36
  --#{$masthead}--m-display-stack__brand--BorderBlockEnd: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
37
- --#{$masthead}--m-display-stack__content--GridColumn: 2;
37
+ --#{$masthead}--m-display-stack__content--GridColumn: 1;
38
38
  --#{$masthead}--m-display-stack__content--Order: 1;
39
+ --#{$masthead}--m-display-stack__main--toggle--content--GridColumn: 2;
39
40
  --#{$masthead}--m-display-stack__main--Display: contents;
40
41
  --#{$masthead}--m-display-stack__main--ColumnGap: unset; // no column gap needed until it's flex display
41
42
 
@@ -50,6 +51,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
50
51
  --#{$masthead}--m-display-inline__main--GridColumn: 1;
51
52
  --#{$masthead}--m-display-inline__content--GridColumn: 2;
52
53
  --#{$masthead}--m-display-inline__content--Order: 0;
54
+ --#{$masthead}--m-display-inline__main--toggle--content--GridColumn: 2;
53
55
  --#{$masthead}--m-display-inline__main--Display: flex;
54
56
  --#{$masthead}--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
55
57
 
@@ -73,6 +75,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
73
75
  --#{$masthead}__main--GridColumn: unset;
74
76
  --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
75
77
  --#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
78
+ --#{$masthead}__main--toggle--content--GridColumn: var(--#{$masthead}--m-display-stack__main--toggle--content--GridColumn);
76
79
  --#{$masthead}__main--Display: var(--#{$masthead}--m-display-stack__main--Display);
77
80
  --#{$masthead}__main--ColumnGap: var(--#{$masthead}--m-display-stack__main--ColumnGap);
78
81
  }
@@ -88,6 +91,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
88
91
  --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
89
92
  --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
90
93
  --#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
94
+ --#{$masthead}__main--toggle--content--GridColumn: var(--#{$masthead}--m-display-inline__main--toggle--content--GridColumn);
91
95
  --#{$masthead}__main--Display: var(--#{$masthead}--m-display-inline__main--Display);
92
96
  --#{$masthead}__main--ColumnGap: var(--#{$masthead}--m-display-inline__main--ColumnGap);
93
97
  }
@@ -162,6 +166,10 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
162
166
  column-gap: var(--#{$masthead}__main--ColumnGap);
163
167
  align-items: center;
164
168
  margin-inline-end: var(--#{$masthead}__main--MarginInlineEnd);
169
+
170
+ &:has(.#{$masthead}__toggle) ~ .#{$masthead}__content {
171
+ --#{$masthead}__content--GridColumn: var(--#{$masthead}__main--toggle--content--GridColumn);
172
+ }
165
173
  }
166
174
 
167
175
  // - Masthead main masthead content masthead logo
@@ -1,9 +1,9 @@
1
1
  :where(:root, .pf-v6-c-menu-toggle) {
2
2
  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4
- --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
5
- --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
6
- --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3
+ --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
4
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
5
+ --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
6
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
7
7
  --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
8
8
  --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
9
9
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
@@ -30,15 +30,9 @@
30
30
  --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
31
31
  --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
32
32
  --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
33
- --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
34
- --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
33
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
34
+ --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
35
35
  --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
36
- --pf-v6-c-menu-toggle--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
37
- --pf-v6-c-menu-toggle--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
38
- --pf-v6-c-menu-toggle--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
39
- --pf-v6-c-menu-toggle--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
40
- --pf-v6-c-menu-toggle--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
41
- --pf-v6-c-menu-toggle--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
42
36
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
43
37
  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
44
38
  --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
@@ -69,8 +63,8 @@
69
63
  --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
70
64
  --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
71
65
  --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
72
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
73
- --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
66
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
67
+ --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
74
68
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
75
69
  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
76
70
  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
@@ -84,8 +78,8 @@
84
78
  --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
85
79
  --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
86
80
  --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
87
- --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
88
- --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
81
+ --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
82
+ --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
89
83
  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
90
84
  --pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
91
85
  --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -95,13 +89,11 @@
95
89
  --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
96
90
  --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
97
91
  --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
98
- --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
99
92
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
100
- --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
101
- --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
102
- --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
103
- --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
104
- --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
93
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
94
+ --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
95
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
96
+ --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
105
97
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
106
98
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
107
99
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -229,9 +221,8 @@
229
221
  .pf-v6-c-menu-toggle.pf-m-small {
230
222
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
231
223
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
232
- --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
233
- --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
234
- --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
224
+ --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
225
+ --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
235
226
  }
236
227
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
237
228
  background-color: transparent;
@@ -334,7 +325,6 @@
334
325
  align-items: stretch;
335
326
  }
336
327
  .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
337
- --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
338
328
  --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
339
329
  flex: 1;
340
330
  }
@@ -10,10 +10,10 @@
10
10
 
11
11
  :where(:root, .#{$menu-toggle}) {
12
12
  --#{$menu-toggle}--ColumnGap: var(--pf-t--global--spacer--sm);
13
- --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14
- --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15
- --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
16
- --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--sm);
13
+ --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
14
+ --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
15
+ --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
16
+ --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
17
17
  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
18
18
  --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--default);
19
19
  --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
@@ -53,22 +53,10 @@
53
53
 
54
54
  // TODO: add pf-m-button modifier here
55
55
  // * Menu toggle button
56
- --#{$menu-toggle}--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
57
- --#{$menu-toggle}--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
56
+ --#{$menu-toggle}--m-button--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
57
+ --#{$menu-toggle}--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
58
58
  --#{$menu-toggle}--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
59
59
 
60
- // TODO: add pf-m-button modifier here
61
- // * Menu toggle control
62
- --#{$menu-toggle}--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
63
- --#{$menu-toggle}--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
64
- --#{$menu-toggle}--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
65
-
66
- // TODO: add pf-m-button modifier here
67
- // * Menu toggle action
68
- --#{$menu-toggle}--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
69
- --#{$menu-toggle}--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
70
- --#{$menu-toggle}--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
71
-
72
60
  // * Menu toggle primary
73
61
  --#{$menu-toggle}--m-primary--PaddingInlineStart: var(--#{$menu-toggle}--m-button--PaddingInlineStart);
74
62
  --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--#{$menu-toggle}--m-button--PaddingInlineEnd);
@@ -107,8 +95,8 @@
107
95
  --#{$menu-toggle}__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
108
96
 
109
97
  // Full height
110
- --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
111
- --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
98
+ --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
99
+ --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
112
100
 
113
101
  // Split button, child
114
102
  --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
@@ -132,8 +120,8 @@
132
120
  // Split button, controls, check
133
121
  --#{$menu-toggle}__button--BackgroundColor: transparent;
134
122
  --#{$menu-toggle}__button--AlignSelf: baseline;
135
- --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
136
- --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
123
+ --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
124
+ --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
137
125
  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
138
126
  --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
139
127
 
@@ -147,15 +135,13 @@
147
135
  --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent; // picking icon color rather than text...?
148
136
 
149
137
  // Typeahead
150
- --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
151
138
  --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
152
139
 
153
140
  // * Menu toggle small
154
- --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
155
- --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
156
- --#{$menu-toggle}--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
157
- --#{$menu-toggle}--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
158
- --#{$menu-toggle}--m-small__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
141
+ --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
142
+ --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
143
+ --#{$menu-toggle}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
144
+ --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
159
145
 
160
146
  // Status icon
161
147
  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -312,9 +298,8 @@
312
298
  &.pf-m-small {
313
299
  --#{$menu-toggle}--PaddingBlockStart: var(--#{$menu-toggle}--m-small--PaddingBlockStart);
314
300
  --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
315
- --#{$menu-toggle}--FontSize: var(--#{$menu-toggle}--m-small--FontSize);
316
- --#{$menu-toggle}--ColumnGap: var(--#{$menu-toggle}--m-small--ColumnGap);
317
- --#{$menu-toggle}__controls--MinWidth: var(--#{$menu-toggle}--m-small__controls--MinWidth);
301
+ --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-small--PaddingInlineStart);
302
+ --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-small--PaddingInlineEnd);
318
303
  }
319
304
 
320
305
  &:has(.#{$button}) {
@@ -457,7 +442,6 @@
457
442
  }
458
443
 
459
444
  .#{$text-input-group} {
460
- --#{$text-input-group}__utilities--c-button--PaddingInlineEnd: var(--#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
461
445
  --#{$text-input-group}__utilities--MarginInlineEnd: 0;
462
446
 
463
447
  flex: 1;
@@ -31,6 +31,8 @@
31
31
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
32
32
  --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
33
33
  --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
34
+ --pf-v6-c-page__main-container--GridArea: main;
35
+ --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
34
36
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
35
37
  --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
38
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
@@ -391,31 +393,37 @@
391
393
  flex-direction: column;
392
394
  align-self: start;
393
395
  max-height: var(--pf-v6-c-page__main-container--MaxHeight);
394
- margin-block-start: 0;
395
396
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
396
397
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
397
- overflow: auto;
398
398
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
399
399
  border: var(--pf-v6-c-page__main-container--BorderWidth) solid var(--pf-v6-c-page__main-container--BorderColor);
400
400
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
401
401
  }
402
- @media screen and (min-width: 75rem) {
403
- .pf-v6-c-page__main-container {
404
- --pf-v6-c-page__main-container--MarginInlineStart: 0;
405
- }
406
- }
407
- .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard) {
408
- align-self: stretch;
409
- }
410
402
 
411
403
  .pf-v6-c-page__main-container,
412
404
  .pf-v6-c-page__drawer {
413
405
  z-index: var(--pf-v6-c-page__main-container--ZIndex);
414
- grid-area: main;
406
+ grid-area: var(--pf-v6-c-page__main-container--GridArea);
415
407
  overflow-x: hidden;
416
408
  overflow-y: auto;
417
409
  -webkit-overflow-scrolling: touch;
418
410
  }
411
+ @media screen and (min-width: 75rem) {
412
+ .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
413
+ .pf-v6-c-masthead + .pf-v6-c-page__drawer,
414
+ .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
415
+ --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);
416
+ }
417
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__main-container,
418
+ .pf-v6-c-page__sidebar:not(.pf-m-collapsed) + .pf-v6-c-page__drawer {
419
+ --pf-v6-c-page__main-container--MarginInlineStart: 0;
420
+ }
421
+ }
422
+ .pf-v6-c-page__main-container.pf-m-fill, .pf-v6-c-page__main-container:has(.pf-v6-c-page__main-wizard),
423
+ .pf-v6-c-page__drawer.pf-m-fill,
424
+ .pf-v6-c-page__drawer:has(.pf-v6-c-page__main-wizard) {
425
+ align-self: stretch;
426
+ }
419
427
  .pf-v6-c-page__main-container:focus,
420
428
  .pf-v6-c-page__drawer:focus {
421
429
  outline: 0;
@@ -53,6 +53,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
53
53
 
54
54
  // Container for the main content area (grid area)
55
55
  --#{$page}__main-container--ZIndex: var(--pf-t--global--z-index--xs);
56
+ --#{$page}__main-container--GridArea: main;
57
+ --#{$page}--masthead--main-container--GridArea: sidebar / sidebar / main / main; // no sidebar
56
58
  --#{$page}__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
57
59
  --#{$page}__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
58
60
  --#{$page}__main-container--MarginInlineStart: var(--#{$page}--inset);
@@ -143,7 +145,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
143
145
 
144
146
  z-index: var(--#{$page}--c-masthead--ZIndex);
145
147
  grid-area: header;
146
-
147
148
  }
148
149
 
149
150
  // Sidebar
@@ -312,31 +313,37 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
312
313
  flex-direction: column;
313
314
  align-self: start;
314
315
  max-height: var(--#{$page}__main-container--MaxHeight);
315
- margin-block-start: 0;
316
316
  margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
317
317
  margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
318
- overflow: auto;
319
318
  background: var(--#{$page}__main-container--BackgroundColor);
320
319
  border: var(--#{$page}__main-container--BorderWidth) solid var(--#{$page}__main-container--BorderColor);
321
320
  border-radius: var(--#{$page}__main-container--BorderRadius);
321
+ }
322
+
323
+ .#{$page}__main-container,
324
+ .#{$page}__drawer {
325
+ z-index: var(--#{$page}__main-container--ZIndex);
326
+ grid-area: var(--#{$page}__main-container--GridArea);
327
+ overflow-x: hidden;
328
+ overflow-y: auto;
329
+ -webkit-overflow-scrolling: touch;
322
330
 
323
331
  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
324
- --#{$page}__main-container--MarginInlineStart: 0;
332
+ .#{$masthead} + &,
333
+ .#{$page}__sidebar.pf-m-collapsed + & {
334
+ --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);
335
+ }
336
+
337
+ .#{$page}__sidebar:not(.pf-m-collapsed) + & {
338
+ --#{$page}__main-container--MarginInlineStart: 0;
339
+ }
325
340
  }
326
341
 
327
342
  &.pf-m-fill,
328
343
  &:has(.#{$page}__main-wizard) {
329
344
  align-self: stretch;
330
345
  }
331
- }
332
346
 
333
- .#{$page}__main-container,
334
- .#{$page}__drawer {
335
- z-index: var(--#{$page}__main-container--ZIndex);
336
- grid-area: main;
337
- overflow-x: hidden;
338
- overflow-y: auto;
339
- -webkit-overflow-scrolling: touch;
340
347
 
341
348
  &:focus {
342
349
  outline: 0;
@@ -125,8 +125,8 @@
125
125
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
126
126
  --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
127
127
  --pf-v6-c-table__subhead--Color: var(--pf-t--global--text--color--subtle);
128
- --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--sm));
129
- --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - var(--pf-t--global--spacer--xs));
128
+ --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
129
+ --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
130
130
  --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
131
131
  --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
132
132
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);