@patternfly/react-styles 6.0.0-alpha.31 → 6.0.0-alpha.32

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Masthead/masthead.css +194 -96
  3. package/css/components/Nav/nav.css +5 -4
  4. package/css/components/Nav/nav.d.ts +1 -1
  5. package/css/components/Nav/nav.js +1 -1
  6. package/css/components/Nav/nav.mjs +1 -1
  7. package/css/components/Page/page.css +32 -18
  8. package/css/components/_index.css +231 -118
  9. package/css/components/_index.d.ts +1 -0
  10. package/css/components/_index.js +1 -0
  11. package/css/components/_index.mjs +1 -0
  12. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.0.0-alpha.32](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.31...@patternfly/react-styles@6.0.0-alpha.32) (2024-07-29)
7
+
8
+ ### Features
9
+
10
+ - **Masthead:** Updates for new masthead structure in Penta ([#10809](https://github.com/patternfly/patternfly-react/issues/10809)) ([266ee47](https://github.com/patternfly/patternfly-react/commit/266ee476020c51487ae4d426fdab90efc73d12f1))
11
+
6
12
  # [6.0.0-alpha.31](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.30...@patternfly/react-styles@6.0.0-alpha.31) (2024-07-29)
7
13
 
8
14
  ### Features
package/css/components/Masthead/masthead.css CHANGED
@@ -1,43 +1,60 @@
1
1
  :where(:root, .pf-v6-c-masthead) {
2
2
  --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
3
- --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
3
+ --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--gutter--default);
4
4
  --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);
5
5
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--md);
6
6
  --pf-v6-c-masthead--PaddingInline: var(--pf-t--global--spacer--lg);
7
7
  --pf-v6-c-masthead--BorderColor: var(--pf-t--global--border--color--default);
8
8
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
- --pf-v6-c-masthead__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
10
- --pf-v6-c-masthead__brand--MaxHeight: 2.375rem;
9
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
10
+ --pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
11
+ --pf-v6-c-masthead__logo--MaxHeight: 2.375rem;
12
+ --pf-v6-c-masthead__logo--Width: 11.8125rem;
11
13
  --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
14
+ --pf-v6-c-masthead__content--ColumnGap: var(--pf-t--global--spacer--md);
15
+ --pf-v6-c-masthead--m-display-stack--ColumnGap: var(--pf-t--global--spacer--gutter--default);
12
16
  --pf-v6-c-masthead--m-display-stack--GridTemplateColumns: max-content 1fr;
13
- --pf-v6-c-masthead--m-display-stack__main--GridColumn: -1 / 1;
14
- --pf-v6-c-masthead--m-display-stack__main--Order: -1;
15
- --pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
16
- --pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
17
- --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
17
+ --pf-v6-c-masthead--m-display-stack__brand--GridColumn: -1 / 1;
18
+ --pf-v6-c-masthead--m-display-stack__brand--Order: -1;
19
+ --pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--RowGap);
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: 1;
18
22
  --pf-v6-c-masthead--m-display-stack__content--Order: 1;
19
- --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
20
- --pf-v6-c-masthead--m-display-inline__main--GridColumn: 2;
21
- --pf-v6-c-masthead--m-display-inline__main--Order: 0;
22
- --pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd: 0;
23
- --pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd: 0;
24
- --pf-v6-c-masthead--m-display-inline__content--GridColumn: 3;
23
+ --pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn: 2;
24
+ --pf-v6-c-masthead--m-display-stack__main--Display: contents;
25
+ --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
26
+ --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
27
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
28
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: subgrid;
29
+ --pf-v6-c-masthead--m-display-inline__brand--GridColumn: initial;
30
+ --pf-v6-c-masthead--m-display-inline__brand--Order: initial;
31
+ --pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd: 0;
32
+ --pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd: 0;
33
+ --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
34
+ --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
25
35
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
36
+ --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
37
+ --pf-v6-c-masthead--m-display-inline__main--Display: flex;
38
+ --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
26
39
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
27
40
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
28
41
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
29
42
  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
30
- --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
31
43
  }
32
44
 
33
45
  .pf-v6-c-masthead {
46
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
34
47
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
35
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
36
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
37
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
38
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
48
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
49
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
50
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
51
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
52
+ --pf-v6-c-masthead__main--GridColumn: unset;
39
53
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
40
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);
56
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
57
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
41
58
  display: grid;
42
59
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
43
60
  row-gap: var(--pf-v6-c-masthead--RowGap);
@@ -53,18 +70,22 @@
53
70
  .pf-v6-c-masthead .pf-v6-c-toolbar {
54
71
  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
55
72
  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
56
- --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
57
73
  --pf-v6-c-toolbar__content--MinWidth: 0;
58
74
  }
59
75
  @media screen and (min-width: 48rem) {
60
76
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
77
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
61
78
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
79
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
80
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
81
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
82
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
62
83
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
63
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
64
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
65
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
66
84
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
67
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);
87
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
88
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
68
89
  }
69
90
  }
70
91
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
@@ -77,22 +98,32 @@
77
98
  box-shadow: var(--pf-v6-c-masthead__expandable-content--BoxShadow);
78
99
  }
79
100
  .pf-v6-c-masthead.pf-m-display-stack {
101
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
80
102
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
81
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
82
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
83
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
84
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
103
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
104
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
105
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
106
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
107
+ --pf-v6-c-masthead__main--GridColumn: unset;
85
108
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
86
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);
111
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
112
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
87
113
  }
88
114
  .pf-v6-c-masthead.pf-m-display-inline {
115
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
89
116
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
117
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
118
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
119
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
120
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
90
121
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
91
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
92
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
93
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
94
122
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
95
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);
125
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
126
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
96
127
  }
97
128
  .pf-v6-c-masthead.pf-m-inset-none {
98
129
  padding-inline-start: 0;
@@ -119,48 +150,55 @@
119
150
  padding-inline-end: var(--pf-t--global--spacer--2xl);
120
151
  }
121
152
 
122
- .pf-v6-c-masthead,
123
153
  .pf-v6-c-masthead__main {
154
+ display: var(--pf-v6-c-masthead__main--Display);
155
+ grid-column: var(--pf-v6-c-masthead__main--GridColumn);
156
+ column-gap: var(--pf-v6-c-masthead__main--ColumnGap);
157
+ align-items: center;
158
+ margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
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
+ }
163
+
164
+ .pf-v6-c-masthead,
165
+ .pf-v6-c-masthead__brand {
124
166
  position: relative;
125
167
  }
126
168
 
127
- .pf-v6-c-masthead__main,
128
- .pf-v6-c-masthead__content,
129
- .pf-v6-c-masthead__logo,
130
169
  .pf-v6-c-masthead__brand {
131
170
  display: flex;
171
+ flex-shrink: 0;
172
+ grid-column: var(--pf-v6-c-masthead__brand--GridColumn, revert);
173
+ row-gap: var(--pf-v6-c-masthead__brand--RowGap, var(--pf-v6-c-masthead--RowGap));
132
174
  align-self: stretch;
133
- }
134
-
135
- .pf-v6-c-masthead__main,
136
- .pf-v6-c-masthead__brand,
137
- .pf-v6-c-masthead__content {
175
+ order: var(--pf-v6-c-masthead__brand--Order, revert);
138
176
  min-width: 0.25rem;
139
- }
140
-
141
- .pf-v6-c-masthead__main {
142
- grid-column: var(--pf-v6-c-masthead__main--GridColumn);
143
- row-gap: var(--pf-v6-c-masthead__main--RowGap, var(--pf-v6-c-masthead--RowGap));
144
- align-items: var(--pf-v6-c-masthead__main--AlignItems, var(--pf-v6-c-masthead--AlignItems));
145
- order: var(--pf-v6-c-masthead__main--Order);
146
- padding-block-end: var(--pf-v6-c-masthead__main--PaddingBlockEnd);
147
- border-block-end: var(--pf-v6-c-masthead__main--BorderBlockEnd);
177
+ padding-block-end: var(--pf-v6-c-masthead__brand--PaddingBlockEnd);
178
+ border-block-end: var(--pf-v6-c-masthead__brand--BorderBlockEnd);
148
179
  }
149
180
 
150
181
  .pf-v6-c-masthead__content {
182
+ display: flex;
151
183
  flex-wrap: wrap;
152
184
  grid-column: var(--pf-v6-c-masthead__content--GridColumn);
153
185
  grid-column-end: -1;
154
186
  row-gap: var(--pf-v6-c-masthead__content-RowGap, var(--pf-v6-c-masthead--RowGap));
155
- column-gap: var(--pf-v6-c-masthead__content-ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
156
- align-items: var(--pf-v6-c-masthead__content--AlignItems, var(--pf-v6-c-masthead--AlignItems));
187
+ column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
188
+ align-self: stretch;
157
189
  order: var(--pf-v6-c-masthead__content--Order);
190
+ min-width: 0.25rem;
158
191
  }
159
192
 
160
- .pf-v6-c-masthead__brand {
161
- align-items: var(--pf-v6-c-masthead__brand--AlignItems, var(--pf-v6-c-masthead--AlignItems));
162
- max-height: var(--pf-v6-c-masthead__brand--MaxHeight);
163
- margin-inline-end: var(--pf-v6-c-masthead__brand--MarginInlineEnd);
193
+ .pf-v6-c-masthead__logo {
194
+ position: relative;
195
+ width: var(--pf-v6-c-masthead__logo--Width);
196
+ max-height: var(--pf-v6-c-masthead__logo--MaxHeight);
197
+ }
198
+ .pf-v6-c-masthead__logo > * {
199
+ max-width: 100%;
200
+ max-height: 100%;
201
+ vertical-align: middle;
164
202
  }
165
203
 
166
204
  .pf-v6-c-masthead__toggle {
@@ -173,22 +211,32 @@
173
211
  }
174
212
 
175
213
  .pf-v6-c-masthead.pf-m-display-stack {
214
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
176
215
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
177
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
178
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
179
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
180
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
216
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
217
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
218
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
219
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
220
+ --pf-v6-c-masthead__main--GridColumn: unset;
181
221
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
182
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);
224
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
225
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
183
226
  }
184
227
  .pf-v6-c-masthead.pf-m-display-inline {
228
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
185
229
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
230
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
231
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
232
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
233
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
186
234
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
187
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
188
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
189
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
190
235
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
191
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);
238
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
239
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
192
240
  }
193
241
  .pf-v6-c-masthead.pf-m-inset-none {
194
242
  padding-inline-start: 0;
@@ -216,22 +264,32 @@
216
264
  }
217
265
  @media (min-width: 36rem) {
218
266
  .pf-v6-c-masthead.pf-m-display-stack-on-sm {
267
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
219
268
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
220
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
221
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
222
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
223
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
269
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
270
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
271
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
272
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
273
+ --pf-v6-c-masthead__main--GridColumn: unset;
224
274
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
225
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);
277
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
278
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
226
279
  }
227
280
  .pf-v6-c-masthead.pf-m-display-inline-on-sm {
281
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
228
282
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
283
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
284
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
285
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
286
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
229
287
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
230
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
231
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
232
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
233
288
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
234
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);
291
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
292
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
235
293
  }
236
294
  }
237
295
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -260,22 +318,32 @@
260
318
  }
261
319
  @media (min-width: 48rem) {
262
320
  .pf-v6-c-masthead.pf-m-display-stack-on-md {
321
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
263
322
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
264
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
265
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
266
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
267
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
323
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
324
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
325
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
326
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
327
+ --pf-v6-c-masthead__main--GridColumn: unset;
268
328
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
269
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);
331
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
332
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
270
333
  }
271
334
  .pf-v6-c-masthead.pf-m-display-inline-on-md {
335
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
272
336
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
337
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
338
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
339
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
340
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
273
341
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
274
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
275
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
276
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
277
342
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
278
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);
345
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
346
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
279
347
  }
280
348
  }
281
349
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -304,22 +372,32 @@
304
372
  }
305
373
  @media (min-width: 62rem) {
306
374
  .pf-v6-c-masthead.pf-m-display-stack-on-lg {
375
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
307
376
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
308
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
309
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
310
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
311
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
377
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
378
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
379
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
380
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
381
+ --pf-v6-c-masthead__main--GridColumn: unset;
312
382
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
313
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);
385
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
386
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
314
387
  }
315
388
  .pf-v6-c-masthead.pf-m-display-inline-on-lg {
389
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
316
390
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
391
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
392
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
393
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
394
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
317
395
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
318
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
319
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
320
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
321
396
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
322
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);
399
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
400
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
323
401
  }
324
402
  }
325
403
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -348,22 +426,32 @@
348
426
  }
349
427
  @media (min-width: 75rem) {
350
428
  .pf-v6-c-masthead.pf-m-display-stack-on-xl {
429
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
351
430
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
352
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
353
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
354
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
355
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
431
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
432
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
433
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
434
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
435
+ --pf-v6-c-masthead__main--GridColumn: unset;
356
436
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
357
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);
439
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
440
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
358
441
  }
359
442
  .pf-v6-c-masthead.pf-m-display-inline-on-xl {
443
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
360
444
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
445
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
446
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
447
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
448
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
361
449
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
362
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
363
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
364
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
365
450
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
366
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);
453
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
454
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
367
455
  }
368
456
  }
369
457
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -392,22 +480,32 @@
392
480
  }
393
481
  @media (min-width: 90.625rem) {
394
482
  .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
483
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
395
484
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
396
- --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--GridColumn);
397
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-stack__main--Order);
398
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--PaddingBlockEnd);
399
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__main--BorderBlockEnd);
485
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
486
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
487
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
488
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
489
+ --pf-v6-c-masthead__main--GridColumn: unset;
400
490
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
401
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);
493
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
494
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
402
495
  }
403
496
  .pf-v6-c-masthead.pf-m-display-inline-on-2xl {
497
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
404
498
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
499
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
500
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
501
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
502
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
405
503
  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
406
- --pf-v6-c-masthead__main--Order: var(--pf-v6-c-masthead--m-display-inline__main--Order);
407
- --pf-v6-c-masthead__main--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--PaddingBlockEnd);
408
- --pf-v6-c-masthead__main--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__main--BorderBlockEnd);
409
504
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
410
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);
507
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
508
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
411
509
  }
412
510
  }
413
511
  .pf-v6-c-masthead.pf-m-inset-none {
package/css/components/Nav/nav.css CHANGED
@@ -7,8 +7,8 @@
7
7
  --pf-v6-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
8
8
  --pf-v6-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
9
9
  --pf-v6-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
- --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
11
- --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10
+ --pf-v6-c-nav--PaddingInlineStart: 0;
11
+ --pf-v6-c-nav--PaddingInlineEnd: 0;
12
12
  --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg);
13
13
  --pf-v6-c-nav--ColumnGap: 0;
14
14
  --pf-v6-c-nav--AlignItems: baseline;
@@ -98,8 +98,9 @@
98
98
  .pf-v6-c-nav.pf-m-overflow-hidden {
99
99
  overflow: hidden;
100
100
  }
101
- .pf-v6-c-nav.pf-m-full-width {
102
- width: 100%;
101
+ .pf-v6-c-nav.pf-m-inset {
102
+ --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
103
+ --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
103
104
  }
104
105
  .pf-v6-c-nav.pf-m-fill {
105
106
  flex-grow: 1;
package/css/components/Nav/nav.d.ts CHANGED
@@ -5,7 +5,7 @@ declare const _default: {
5
5
  "menu": "pf-v6-c-menu",
6
6
  "modifiers": {
7
7
  "overflowHidden": "pf-m-overflow-hidden",
8
- "fullWidth": "pf-m-full-width",
8
+ "inset": "pf-m-inset",
9
9
  "fill": "pf-m-fill",
10
10
  "expanded": "pf-m-expanded",
11
11
  "hover": "pf-m-hover",
package/css/components/Nav/nav.js CHANGED
@@ -7,7 +7,7 @@ exports.default = {
7
7
  "menu": "pf-v6-c-menu",
8
8
  "modifiers": {
9
9
  "overflowHidden": "pf-m-overflow-hidden",
10
- "fullWidth": "pf-m-full-width",
10
+ "inset": "pf-m-inset",
11
11
  "fill": "pf-m-fill",
12
12
  "expanded": "pf-m-expanded",
13
13
  "hover": "pf-m-hover",
package/css/components/Nav/nav.mjs CHANGED
@@ -5,7 +5,7 @@ export default {
5
5
  "menu": "pf-v6-c-menu",
6
6
  "modifiers": {
7
7
  "overflowHidden": "pf-m-overflow-hidden",
8
- "fullWidth": "pf-m-full-width",
8
+ "inset": "pf-m-inset",
9
9
  "fill": "pf-m-fill",
10
10
  "expanded": "pf-m-expanded",
11
11
  "hover": "pf-m-hover",