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

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 (37) hide show
  1. package/components/Masthead/masthead.css +172 -95
  2. package/components/Masthead/masthead.scss +74 -49
  3. package/components/Nav/nav.css +5 -4
  4. package/components/Nav/nav.scss +5 -4
  5. package/components/Page/page.css +18 -12
  6. package/components/Page/page.scss +18 -12
  7. package/components/_index.css +195 -111
  8. package/docs/components/Masthead/examples/masthead.md +506 -493
  9. package/docs/components/Nav/examples/Navigation.md +0 -1
  10. package/docs/components/Page/examples/Page.md +98 -89
  11. package/docs/components/Wizard/examples/Wizard.md +1 -1
  12. package/docs/demos/AboutModal/examples/AboutModal.md +87 -83
  13. package/docs/demos/Alert/examples/Alert.md +263 -251
  14. package/docs/demos/BackToTop/examples/BackToTop.md +87 -83
  15. package/docs/demos/Banner/examples/Banner.md +177 -173
  16. package/docs/demos/CardView/examples/CardView.md +90 -88
  17. package/docs/demos/Dashboard/examples/Dashboard.md +87 -83
  18. package/docs/demos/DataList/examples/DataList.md +352 -344
  19. package/docs/demos/DescriptionList/examples/DescriptionList.md +262 -252
  20. package/docs/demos/Drawer/examples/Drawer.md +437 -423
  21. package/docs/demos/JumpLinks/examples/JumpLinks.md +524 -500
  22. package/docs/demos/Masthead/examples/Masthead.md +772 -736
  23. package/docs/demos/Modal/examples/Modal.md +522 -498
  24. package/docs/demos/Nav/examples/Nav.md +511 -487
  25. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +435 -425
  26. package/docs/demos/Page/examples/Page.md +959 -915
  27. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +611 -584
  28. package/docs/demos/Skeleton/examples/Skeleton.md +87 -83
  29. package/docs/demos/Table/examples/Table.md +1320 -1288
  30. package/docs/demos/Tabs/examples/Tabs.md +526 -504
  31. package/docs/demos/Toolbar/examples/Toolbar.md +174 -166
  32. package/docs/demos/Wizard/examples/Wizard.md +790 -767
  33. package/package.json +1 -1
  34. package/patternfly-no-globals.css +195 -111
  35. package/patternfly.css +195 -111
  36. package/patternfly.min.css +1 -1
  37. package/patternfly.min.css.map +1 -1
package/components/Masthead/masthead.css CHANGED
@@ -1,43 +1,57 @@
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__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);
17
21
  --pf-v6-c-masthead--m-display-stack__content--GridColumn: 2;
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--Display: contents;
24
+ --pf-v6-c-masthead--m-display-stack__main--ColumnGap: unset;
25
+ --pf-v6-c-masthead--m-display-inline--ColumnGap: 0;
26
+ --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
27
+ --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: subgrid;
28
+ --pf-v6-c-masthead--m-display-inline__brand--GridColumn: initial;
29
+ --pf-v6-c-masthead--m-display-inline__brand--Order: initial;
30
+ --pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd: 0;
31
+ --pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd: 0;
32
+ --pf-v6-c-masthead--m-display-inline__main--GridColumn: 1;
33
+ --pf-v6-c-masthead--m-display-inline__content--GridColumn: 2;
25
34
  --pf-v6-c-masthead--m-display-inline__content--Order: 0;
35
+ --pf-v6-c-masthead--m-display-inline__main--Display: flex;
36
+ --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
26
37
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
27
38
  --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
28
39
  --pf-v6-c-masthead--c-toolbar--Width: 100%;
29
40
  --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
30
- --pf-v6-c-masthead--c-toolbar--PaddingInline: 0;
31
41
  }
32
42
 
33
43
  .pf-v6-c-masthead {
44
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
34
45
  --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);
46
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
47
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
48
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
49
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
50
+ --pf-v6-c-masthead__main--GridColumn: unset;
39
51
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
40
52
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
53
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
54
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
41
55
  display: grid;
42
56
  grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
43
57
  row-gap: var(--pf-v6-c-masthead--RowGap);
@@ -53,18 +67,21 @@
53
67
  .pf-v6-c-masthead .pf-v6-c-toolbar {
54
68
  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
55
69
  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
56
- --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-masthead--c-toolbar--PaddingInline);
57
70
  --pf-v6-c-toolbar__content--MinWidth: 0;
58
71
  }
59
72
  @media screen and (min-width: 48rem) {
60
73
  :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
74
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
61
75
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
76
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
77
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
78
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
79
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
62
80
  --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
81
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
67
82
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
83
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
84
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
68
85
  }
69
86
  }
70
87
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
@@ -77,22 +94,30 @@
77
94
  box-shadow: var(--pf-v6-c-masthead__expandable-content--BoxShadow);
78
95
  }
79
96
  .pf-v6-c-masthead.pf-m-display-stack {
97
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
80
98
  --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);
99
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
100
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
101
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
102
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
103
+ --pf-v6-c-masthead__main--GridColumn: unset;
85
104
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
86
105
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
106
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
107
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
87
108
  }
88
109
  .pf-v6-c-masthead.pf-m-display-inline {
110
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
89
111
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
112
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
113
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
114
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
115
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
90
116
  --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
117
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
95
118
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
119
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
120
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
96
121
  }
97
122
  .pf-v6-c-masthead.pf-m-inset-none {
98
123
  padding-inline-start: 0;
@@ -119,48 +144,52 @@
119
144
  padding-inline-end: var(--pf-t--global--spacer--2xl);
120
145
  }
121
146
 
122
- .pf-v6-c-masthead,
123
147
  .pf-v6-c-masthead__main {
148
+ display: var(--pf-v6-c-masthead__main--Display);
149
+ grid-column: var(--pf-v6-c-masthead__main--GridColumn);
150
+ column-gap: var(--pf-v6-c-masthead__main--ColumnGap);
151
+ align-items: center;
152
+ margin-inline-end: var(--pf-v6-c-masthead__main--MarginInlineEnd);
153
+ }
154
+
155
+ .pf-v6-c-masthead,
156
+ .pf-v6-c-masthead__brand {
124
157
  position: relative;
125
158
  }
126
159
 
127
- .pf-v6-c-masthead__main,
128
- .pf-v6-c-masthead__content,
129
- .pf-v6-c-masthead__logo,
130
160
  .pf-v6-c-masthead__brand {
131
161
  display: flex;
162
+ flex-shrink: 0;
163
+ grid-column: var(--pf-v6-c-masthead__brand--GridColumn, revert);
164
+ row-gap: var(--pf-v6-c-masthead__brand--RowGap, var(--pf-v6-c-masthead--RowGap));
132
165
  align-self: stretch;
133
- }
134
-
135
- .pf-v6-c-masthead__main,
136
- .pf-v6-c-masthead__brand,
137
- .pf-v6-c-masthead__content {
166
+ order: var(--pf-v6-c-masthead__brand--Order, revert);
138
167
  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);
168
+ padding-block-end: var(--pf-v6-c-masthead__brand--PaddingBlockEnd);
169
+ border-block-end: var(--pf-v6-c-masthead__brand--BorderBlockEnd);
148
170
  }
149
171
 
150
172
  .pf-v6-c-masthead__content {
173
+ display: flex;
151
174
  flex-wrap: wrap;
152
175
  grid-column: var(--pf-v6-c-masthead__content--GridColumn);
153
176
  grid-column-end: -1;
154
177
  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));
178
+ column-gap: var(--pf-v6-c-masthead__content--ColumnGap, var(--pf-v6-c-masthead--ColumnGap));
179
+ align-self: stretch;
157
180
  order: var(--pf-v6-c-masthead__content--Order);
181
+ min-width: 0.25rem;
158
182
  }
159
183
 
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);
184
+ .pf-v6-c-masthead__logo {
185
+ position: relative;
186
+ width: var(--pf-v6-c-masthead__logo--Width);
187
+ max-height: var(--pf-v6-c-masthead__logo--MaxHeight);
188
+ }
189
+ .pf-v6-c-masthead__logo > * {
190
+ max-width: 100%;
191
+ max-height: 100%;
192
+ vertical-align: middle;
164
193
  }
165
194
 
166
195
  .pf-v6-c-masthead__toggle {
@@ -173,22 +202,30 @@
173
202
  }
174
203
 
175
204
  .pf-v6-c-masthead.pf-m-display-stack {
205
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
176
206
  --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);
207
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
208
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
209
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
210
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
211
+ --pf-v6-c-masthead__main--GridColumn: unset;
181
212
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
182
213
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
214
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
215
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
183
216
  }
184
217
  .pf-v6-c-masthead.pf-m-display-inline {
218
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
185
219
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
220
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
221
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
222
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
223
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
186
224
  --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
225
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
191
226
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
227
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
228
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
192
229
  }
193
230
  .pf-v6-c-masthead.pf-m-inset-none {
194
231
  padding-inline-start: 0;
@@ -216,22 +253,30 @@
216
253
  }
217
254
  @media (min-width: 36rem) {
218
255
  .pf-v6-c-masthead.pf-m-display-stack-on-sm {
256
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
219
257
  --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);
258
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
259
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
260
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
261
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
262
+ --pf-v6-c-masthead__main--GridColumn: unset;
224
263
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
225
264
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
265
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
266
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
226
267
  }
227
268
  .pf-v6-c-masthead.pf-m-display-inline-on-sm {
269
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
228
270
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
271
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
272
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
273
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
274
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
229
275
  --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
276
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
234
277
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
278
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
279
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
235
280
  }
236
281
  }
237
282
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -260,22 +305,30 @@
260
305
  }
261
306
  @media (min-width: 48rem) {
262
307
  .pf-v6-c-masthead.pf-m-display-stack-on-md {
308
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
263
309
  --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);
310
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
311
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
312
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
313
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
314
+ --pf-v6-c-masthead__main--GridColumn: unset;
268
315
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
269
316
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
317
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
318
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
270
319
  }
271
320
  .pf-v6-c-masthead.pf-m-display-inline-on-md {
321
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
272
322
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
323
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
324
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
325
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
326
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
273
327
  --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
328
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
278
329
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
330
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
331
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
279
332
  }
280
333
  }
281
334
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -304,22 +357,30 @@
304
357
  }
305
358
  @media (min-width: 62rem) {
306
359
  .pf-v6-c-masthead.pf-m-display-stack-on-lg {
360
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
307
361
  --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);
362
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
363
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
364
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
365
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
366
+ --pf-v6-c-masthead__main--GridColumn: unset;
312
367
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
313
368
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
369
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
370
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
314
371
  }
315
372
  .pf-v6-c-masthead.pf-m-display-inline-on-lg {
373
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
316
374
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
375
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
376
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
377
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
378
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
317
379
  --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
380
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
322
381
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
382
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
383
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
323
384
  }
324
385
  }
325
386
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -348,22 +409,30 @@
348
409
  }
349
410
  @media (min-width: 75rem) {
350
411
  .pf-v6-c-masthead.pf-m-display-stack-on-xl {
412
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
351
413
  --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);
414
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
415
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
416
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
417
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
418
+ --pf-v6-c-masthead__main--GridColumn: unset;
356
419
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
357
420
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
421
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
422
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
358
423
  }
359
424
  .pf-v6-c-masthead.pf-m-display-inline-on-xl {
425
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
360
426
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
427
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
428
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
429
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
430
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
361
431
  --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
432
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
366
433
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
434
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
435
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
367
436
  }
368
437
  }
369
438
  .pf-v6-c-masthead.pf-m-inset-none {
@@ -392,22 +461,30 @@
392
461
  }
393
462
  @media (min-width: 90.625rem) {
394
463
  .pf-v6-c-masthead.pf-m-display-stack-on-2xl {
464
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
395
465
  --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);
466
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-stack__brand--GridColumn);
467
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-stack__brand--Order);
468
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--PaddingBlockEnd);
469
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-stack__brand--BorderBlockEnd);
470
+ --pf-v6-c-masthead__main--GridColumn: unset;
400
471
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__content--GridColumn);
401
472
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-stack__content--Order);
473
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
474
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
402
475
  }
403
476
  .pf-v6-c-masthead.pf-m-display-inline-on-2xl {
477
+ --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
404
478
  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
479
+ --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
480
+ --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
481
+ --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
482
+ --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
405
483
  --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
484
  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
410
485
  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
486
+ --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
487
+ --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
411
488
  }
412
489
  }
413
490
  .pf-v6-c-masthead.pf-m-inset-none {