@patternfly/patternfly 6.5.0-prerelease.27 → 6.5.0-prerelease.28

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 (24) hide show
  1. package/components/Compass/compass.css +54 -25
  2. package/components/Compass/compass.scss +60 -26
  3. package/components/_index.css +54 -25
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +1 -1
  6. package/docs/demos/Compass/examples/Compass.md +8 -8
  7. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  8. package/docs/layouts/Flex/examples/Flex.css +3 -3
  9. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  10. package/docs/layouts/Grid/examples/Grid.css +1 -1
  11. package/docs/layouts/Level/examples/Level.css +3 -3
  12. package/docs/layouts/Split/examples/Split.css +1 -1
  13. package/docs/layouts/Stack/examples/Stack.css +3 -3
  14. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  15. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  16. package/docs/utilities/Display/examples/Display.css +1 -1
  17. package/docs/utilities/Flex/examples/Flex.css +7 -7
  18. package/docs/utilities/Float/examples/Float.css +2 -2
  19. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +54 -25
  22. package/patternfly.css +54 -25
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/components/Compass/compass.css CHANGED
@@ -3,8 +3,7 @@
3
3
  --pf-v6-c-compass--BackgroundImage--light: none;
4
4
  --pf-v6-c-compass--BackgroundImage--dark: none;
5
5
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
6
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
7
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
6
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
8
7
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
8
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
10
9
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -19,7 +18,7 @@
19
18
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
20
19
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
21
20
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
22
- --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
21
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
23
22
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
24
23
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
25
24
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -34,32 +33,44 @@
34
33
  --pf-v6-c-compass__message-bar--Width: 450px;
35
34
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
36
35
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
37
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
36
+ --pf-v6-c-compass--section--slide--length--header: 100%;
37
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
38
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
39
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
40
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
38
41
  --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
39
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
40
- --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
41
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
42
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
43
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
44
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
42
45
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
43
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
46
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
44
47
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
45
48
  }
46
49
  @media screen and (prefers-reduced-motion: no-preference) {
47
50
  .pf-v6-c-compass {
48
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
49
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
50
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
51
- --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
52
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
51
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
52
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
53
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
54
+ }
55
+ .pf-v6-c-compass.pf-m-animate-smoothly {
56
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
57
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
58
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
59
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
60
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
61
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
62
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
63
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
53
64
  }
54
65
  }
55
66
 
56
67
  .pf-v6-c-compass {
68
+ interpolate-size: allow-keywords;
57
69
  display: grid;
58
70
  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
59
71
  grid-template-rows: auto 1fr;
60
72
  grid-template-columns: auto 1fr auto;
61
73
  grid-auto-rows: auto;
62
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
63
74
  align-items: center;
64
75
  justify-content: center;
65
76
  height: 100dvh;
@@ -79,6 +90,7 @@
79
90
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
80
91
  .pf-v6-c-compass__main-footer,
81
92
  .pf-v6-c-compass__footer {
93
+ margin: 0;
82
94
  visibility: hidden;
83
95
  opacity: 0;
84
96
  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -100,12 +112,12 @@
100
112
  .pf-v6-c-compass__header,
101
113
  .pf-v6-c-compass__main-footer,
102
114
  .pf-v6-c-compass__footer {
103
- max-height: 0;
115
+ height: 0;
104
116
  }
105
117
  .pf-v6-c-compass__header.pf-m-expanded,
106
118
  .pf-v6-c-compass__main-footer.pf-m-expanded,
107
119
  .pf-v6-c-compass__footer.pf-m-expanded {
108
- max-height: 9999px;
120
+ height: auto;
109
121
  }
110
122
 
111
123
  .pf-v6-c-compass__header {
@@ -113,7 +125,10 @@
113
125
  grid-area: header;
114
126
  grid-template-columns: 1fr auto 1fr;
115
127
  align-items: start;
116
- translate: 0 -100%;
128
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
129
+ }
130
+ .pf-v6-c-compass__header.pf-m-expanded {
131
+ margin-block-end: var(--pf-v6-c-compass--Gap);
117
132
  }
118
133
 
119
134
  .pf-v6-c-compass__profile {
@@ -150,25 +165,33 @@
150
165
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
151
166
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
152
167
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
153
- max-width: 0;
168
+ display: flex;
169
+ width: 0;
154
170
  }
155
171
  .pf-v6-c-compass__sidebar.pf-m-expanded {
156
- max-width: 9999px;
172
+ width: auto;
157
173
  }
158
174
  .pf-v6-c-compass__sidebar.pf-m-start {
159
- translate: -100%;
175
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
160
176
  grid-area: sidebar-start;
161
177
  }
162
178
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
163
- translate: 100%;
179
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
164
180
  }
165
181
 
182
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
183
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
184
+ }
166
185
  .pf-v6-c-compass__sidebar.pf-m-end {
167
- translate: 100%;
186
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
168
187
  grid-area: sidebar-end;
169
188
  }
170
189
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
171
- translate: -100%;
190
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
191
+ }
192
+
193
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
194
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
172
195
  }
173
196
 
174
197
  .pf-v6-c-compass__main {
@@ -204,15 +227,21 @@
204
227
  .pf-v6-c-compass__main-footer {
205
228
  display: flex;
206
229
  justify-content: center;
230
+ min-height: 0;
231
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
232
+ }
233
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
207
234
  margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
208
- translate: 0 100%;
209
235
  }
210
236
 
211
237
  .pf-v6-c-compass__footer {
212
238
  display: flex;
213
239
  grid-column: 1/-1;
214
240
  justify-content: center;
215
- translate: 0 100%;
241
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
242
+ }
243
+ .pf-v6-c-compass__footer.pf-m-expanded {
244
+ margin-block-start: var(--pf-v6-c-compass--Gap);
216
245
  }
217
246
 
218
247
  .pf-v6-c-compass__message-bar {
package/components/Compass/compass.scss CHANGED
@@ -5,8 +5,7 @@
5
5
  --#{$compass}--BackgroundImage--light: none;
6
6
  --#{$compass}--BackgroundImage--dark: none;
7
7
  --#{$compass}--Padding: var(--pf-t--global--spacer--inset--page-chrome);
8
- --#{$compass}--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
9
- --#{$compass}--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
8
+ --#{$compass}--Gap: var(--pf-t--global--spacer--inset--page-chrome);
10
9
  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
10
  --#{$compass}__nav--PaddingBlockStart: 0;
12
11
  --#{$compass}__nav--PaddingBlockEnd: 0;
@@ -21,7 +20,7 @@
21
20
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
22
21
  --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
23
22
  --#{$compass}__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
24
- --#{$compass}__main-footer--MarginBlockStart: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--RowGap)); // Creates same gap as parent compass grid, mimicking the compass footer
23
+ --#{$compass}__main-footer--MarginBlockStart: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--Gap)); // Creates same gap as parent compass grid, mimicking the compass footer
25
24
  --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
26
25
  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
27
26
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -38,25 +37,40 @@
38
37
  --#{$compass}__message-bar--MaxWidth: 600px;
39
38
 
40
39
  // Section animation
41
- --#{$compass}--section--duration: var(--pf-t--global--motion--duration--fade--default);
40
+ --#{$compass}--section--slide--length--header: 100%;
41
+ --#{$compass}--section--slide--length--sidebar: 100%;
42
+ --#{$compass}--section--slide--length--main-footer: 100%;
43
+ --#{$compass}--section--slide--length--footer: 100%;
44
+ --#{$compass}--section--duration: var(--pf-t--global--motion--duration--fade--short);
42
45
  --#{$compass}--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
43
- --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, 0s, 0s, 0s;
44
- --#{$compass}--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
45
- --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
46
+ --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, 0s, 0s, 0s, 0s;
47
+ --#{$compass}--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
48
+ --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
46
49
  --#{$compass}--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
47
- --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--duration), 0s, 0s, 0s, 0s;
50
+ --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
48
51
  --#{$compass}--section--m-expanded--TransitionDelay: 0s;
49
52
 
50
53
  @media screen and (prefers-reduced-motion: no-preference) {
51
- --#{$compass}--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
52
- --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s;
53
- --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
54
- --#{$compass}--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
55
- --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s;
54
+ --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s, 0s;
55
+ --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
56
+ --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, var(--#{$compass}--section--m-expanded--duration), 0s, 0s, 0s;
57
+
58
+ &.pf-m-animate-smoothly {
59
+ --#{$compass}--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
60
+ --#{$compass}--section--slide--length--header: 10rem;
61
+ --#{$compass}--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
62
+ --#{$compass}--section--slide--length--main-footer: 6rem;
63
+ --#{$compass}--section--slide--length--footer: 6rem;
64
+ --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
65
+ --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, 0s, 0s;
66
+ --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, var(--#{$compass}--section--m-expanded--duration), var(--#{$compass}--section--m-expanded--duration), var(--#{$compass}--section--m-expanded--duration);
67
+ }
56
68
  }
57
69
  }
58
70
 
59
71
  .#{$compass} {
72
+ // stylelint-disable-next-line
73
+ interpolate-size: allow-keywords;
60
74
  display: grid;
61
75
  grid-template-areas:
62
76
  "header header header"
@@ -64,7 +78,6 @@
64
78
  grid-template-rows: auto 1fr;
65
79
  grid-template-columns: auto 1fr auto;
66
80
  grid-auto-rows: auto;
67
- gap: var(--#{$compass}--RowGap) var(--#{$compass}--ColumnGap);
68
81
  align-items: center;
69
82
  justify-content: center;
70
83
  height: 100dvh;
@@ -89,6 +102,7 @@
89
102
  .#{$compass}__sidebar:is(.pf-m-start, .pf-m-end),
90
103
  .#{$compass}__main-footer,
91
104
  .#{$compass}__footer {
105
+ margin: 0;
92
106
  visibility: hidden;
93
107
  opacity: 0;
94
108
  transition-delay: var(--#{$compass}--section--TransitionDelay);
@@ -109,10 +123,10 @@
109
123
  .#{$compass}__header,
110
124
  .#{$compass}__main-footer,
111
125
  .#{$compass}__footer {
112
- max-height: 0;
126
+ height: 0;
113
127
 
114
128
  &.pf-m-expanded {
115
- max-height: 9999px;
129
+ height: auto;
116
130
  }
117
131
  }
118
132
 
@@ -121,7 +135,11 @@
121
135
  grid-area: header;
122
136
  grid-template-columns: 1fr auto 1fr;
123
137
  align-items: start;
124
- translate: 0 -100%;
138
+ translate: 0 calc(var(--#{$compass}--section--slide--length--header) * -1);
139
+
140
+ &.pf-m-expanded {
141
+ margin-block-end: var(--#{$compass}--Gap);
142
+ }
125
143
  }
126
144
 
127
145
  .#{$compass}__profile {
@@ -162,31 +180,39 @@
162
180
  --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
163
181
  --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
164
182
 
165
- max-width: 0;
183
+ display: flex;
184
+ width: 0;
166
185
 
167
186
  &.pf-m-expanded {
168
- max-width: 9999px;
187
+ width: auto;
169
188
  }
170
189
 
171
190
  &.pf-m-start {
172
191
  @include pf-v6-bidirectional-style(
173
192
  $prop: translate,
174
- $ltr-val: -100%,
175
- $rtl-val: 100%,
193
+ $ltr-val: calc(var(--#{$compass}--section--slide--length--sidebar) * -1),
194
+ $rtl-val: var(--#{$compass}--section--slide--length--sidebar),
176
195
  );
177
196
 
178
197
  grid-area: sidebar-start;
179
198
 
199
+ &.pf-m-expanded {
200
+ margin-inline-end: var(--#{$compass}--Gap);
201
+ }
180
202
  }
181
203
 
182
204
  &.pf-m-end {
183
205
  @include pf-v6-bidirectional-style(
184
206
  $prop: translate,
185
- $ltr-val: 100%,
186
- $rtl-val: -100%,
207
+ $ltr-val: var(--#{$compass}--section--slide--length--sidebar),
208
+ $rtl-val: calc(var(--#{$compass}--section--slide--length--sidebar) * -1),
187
209
  );
188
210
 
189
211
  grid-area: sidebar-end;
212
+
213
+ &.pf-m-expanded {
214
+ margin-inline-start: var(--#{$compass}--Gap);
215
+ }
190
216
  }
191
217
  }
192
218
 
@@ -224,15 +250,23 @@
224
250
  .#{$compass}__main-footer {
225
251
  display: flex;
226
252
  justify-content: center;
227
- margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
228
- translate: 0 100%;
253
+ min-height: 0;
254
+ translate: 0 var(--#{$compass}--section--slide--length--main-footer);
255
+
256
+ &.pf-m-expanded {
257
+ margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
258
+ }
229
259
  }
230
260
 
231
261
  .#{$compass}__footer {
232
262
  display: flex;
233
263
  grid-column: 1 / -1;
234
264
  justify-content: center;
235
- translate: 0 100%;
265
+ translate: 0 var(--#{$compass}--section--slide--length--main-footer);
266
+
267
+ &.pf-m-expanded {
268
+ margin-block-start: var(--#{$compass}--Gap);
269
+ }
236
270
  }
237
271
 
238
272
  .#{$compass}__message-bar {
package/components/_index.css CHANGED
@@ -3512,8 +3512,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3512
3512
  --pf-v6-c-compass--BackgroundImage--light: none;
3513
3513
  --pf-v6-c-compass--BackgroundImage--dark: none;
3514
3514
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3515
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
3516
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
3515
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3517
3516
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
3517
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3519
3518
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -3528,7 +3527,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3528
3527
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3529
3528
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3530
3529
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3531
- --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
3530
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3532
3531
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3533
3532
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3534
3533
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -3543,32 +3542,44 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3543
3542
  --pf-v6-c-compass__message-bar--Width: 450px;
3544
3543
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3545
3544
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3546
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
3545
+ --pf-v6-c-compass--section--slide--length--header: 100%;
3546
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
3547
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
3548
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
3549
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
3547
3550
  --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
3548
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
3549
- --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
3550
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3551
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
3552
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3553
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3551
3554
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
3552
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
3555
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
3553
3556
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3554
3557
  }
3555
3558
  @media screen and (prefers-reduced-motion: no-preference) {
3556
3559
  .pf-v6-c-compass {
3557
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
3558
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
3559
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3560
- --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
3561
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
3560
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3561
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3562
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
3563
+ }
3564
+ .pf-v6-c-compass.pf-m-animate-smoothly {
3565
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3566
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
3567
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
3568
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
3569
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
3570
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3571
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
3572
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
3562
3573
  }
3563
3574
  }
3564
3575
 
3565
3576
  .pf-v6-c-compass {
3577
+ interpolate-size: allow-keywords;
3566
3578
  display: grid;
3567
3579
  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3568
3580
  grid-template-rows: auto 1fr;
3569
3581
  grid-template-columns: auto 1fr auto;
3570
3582
  grid-auto-rows: auto;
3571
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3572
3583
  align-items: center;
3573
3584
  justify-content: center;
3574
3585
  height: 100dvh;
@@ -3588,6 +3599,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3588
3599
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3589
3600
  .pf-v6-c-compass__main-footer,
3590
3601
  .pf-v6-c-compass__footer {
3602
+ margin: 0;
3591
3603
  visibility: hidden;
3592
3604
  opacity: 0;
3593
3605
  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -3609,12 +3621,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3609
3621
  .pf-v6-c-compass__header,
3610
3622
  .pf-v6-c-compass__main-footer,
3611
3623
  .pf-v6-c-compass__footer {
3612
- max-height: 0;
3624
+ height: 0;
3613
3625
  }
3614
3626
  .pf-v6-c-compass__header.pf-m-expanded,
3615
3627
  .pf-v6-c-compass__main-footer.pf-m-expanded,
3616
3628
  .pf-v6-c-compass__footer.pf-m-expanded {
3617
- max-height: 9999px;
3629
+ height: auto;
3618
3630
  }
3619
3631
 
3620
3632
  .pf-v6-c-compass__header {
@@ -3622,7 +3634,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3622
3634
  grid-area: header;
3623
3635
  grid-template-columns: 1fr auto 1fr;
3624
3636
  align-items: start;
3625
- translate: 0 -100%;
3637
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
3638
+ }
3639
+ .pf-v6-c-compass__header.pf-m-expanded {
3640
+ margin-block-end: var(--pf-v6-c-compass--Gap);
3626
3641
  }
3627
3642
 
3628
3643
  .pf-v6-c-compass__profile {
@@ -3659,25 +3674,33 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3659
3674
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3660
3675
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3661
3676
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3662
- max-width: 0;
3677
+ display: flex;
3678
+ width: 0;
3663
3679
  }
3664
3680
  .pf-v6-c-compass__sidebar.pf-m-expanded {
3665
- max-width: 9999px;
3681
+ width: auto;
3666
3682
  }
3667
3683
  .pf-v6-c-compass__sidebar.pf-m-start {
3668
- translate: -100%;
3684
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3669
3685
  grid-area: sidebar-start;
3670
3686
  }
3671
3687
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3672
- translate: 100%;
3688
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3673
3689
  }
3674
3690
 
3691
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
3692
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
3693
+ }
3675
3694
  .pf-v6-c-compass__sidebar.pf-m-end {
3676
- translate: 100%;
3695
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
3677
3696
  grid-area: sidebar-end;
3678
3697
  }
3679
3698
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3680
- translate: -100%;
3699
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
3700
+ }
3701
+
3702
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
3703
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
3681
3704
  }
3682
3705
 
3683
3706
  .pf-v6-c-compass__main {
@@ -3713,15 +3736,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3713
3736
  .pf-v6-c-compass__main-footer {
3714
3737
  display: flex;
3715
3738
  justify-content: center;
3739
+ min-height: 0;
3740
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3741
+ }
3742
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
3716
3743
  margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3717
- translate: 0 100%;
3718
3744
  }
3719
3745
 
3720
3746
  .pf-v6-c-compass__footer {
3721
3747
  display: flex;
3722
3748
  grid-column: 1/-1;
3723
3749
  justify-content: center;
3724
- translate: 0 100%;
3750
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
3751
+ }
3752
+ .pf-v6-c-compass__footer.pf-m-expanded {
3753
+ margin-block-start: var(--pf-v6-c-compass--Gap);
3725
3754
  }
3726
3755
 
3727
3756
  .pf-v6-c-compass__message-bar {
package/docs/components/Compass/examples/Compass.css CHANGED
@@ -1,8 +1,8 @@
1
- #ws-core-p-compass-basic [class*="pf-v6-c-compass"] {
1
+ #ws-core-a-compass-basic [class*="pf-v6-c-compass"] {
2
2
  position: relative;
3
3
  }
4
4
 
5
- #ws-core-p-compass-basic [class*="pf-v6-c-compass"]::after {
5
+ #ws-core-a-compass-basic [class*="pf-v6-c-compass"]::after {
6
6
  position: absolute;
7
7
  inset: 0;
8
8
  pointer-events: none;
package/docs/components/Compass/examples/Compass.md CHANGED
@@ -11,7 +11,7 @@ cssPrefix: pf-v6-c-compass
11
11
  ### Basic
12
12
 
13
13
  ```html isBeta
14
- <div class="pf-v6-c-compass">
14
+ <div class="pf-v6-c-compass pf-m-animate-smoothly">
15
15
  <div class="pf-v6-c-compass__header pf-m-expanded">
16
16
  <div class="pf-v6-c-compass__logo">logo</div>
17
17
 
package/docs/demos/Compass/examples/Compass.md CHANGED
@@ -9,7 +9,7 @@ wrapperTag: div
9
9
 
10
10
  ```html isFullscreen isBeta
11
11
  <div
12
- class="pf-v6-c-compass"
12
+ class="pf-v6-c-compass pf-m-animate-smoothly"
13
13
  style="
14
14
  --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
15
15
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -404,7 +404,7 @@ wrapperTag: div
404
404
  </div>
405
405
  <div class="pf-v6-c-compass__profile">
406
406
  <button
407
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
407
+ class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
408
408
  type="button"
409
409
  aria-expanded="false"
410
410
  aria-label="Menu toggle"
@@ -1323,7 +1323,7 @@ wrapperTag: div
1323
1323
 
1324
1324
  ```html isFullscreen isBeta
1325
1325
  <div
1326
- class="pf-v6-c-compass"
1326
+ class="pf-v6-c-compass pf-m-animate-smoothly"
1327
1327
  style="
1328
1328
  --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
1329
1329
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -1714,7 +1714,7 @@ wrapperTag: div
1714
1714
  </div>
1715
1715
  <div class="pf-v6-c-compass__profile">
1716
1716
  <button
1717
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1717
+ class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
1718
1718
  type="button"
1719
1719
  aria-expanded="false"
1720
1720
  aria-label="Menu toggle"
@@ -2859,7 +2859,7 @@ wrapperTag: div
2859
2859
 
2860
2860
  ```html isFullscreen isBeta
2861
2861
  <div
2862
- class="pf-v6-c-compass"
2862
+ class="pf-v6-c-compass pf-m-animate-smoothly"
2863
2863
  style="
2864
2864
  --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
2865
2865
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -3254,7 +3254,7 @@ wrapperTag: div
3254
3254
  </div>
3255
3255
  <div class="pf-v6-c-compass__profile">
3256
3256
  <button
3257
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3257
+ class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
3258
3258
  type="button"
3259
3259
  aria-expanded="false"
3260
3260
  aria-label="Menu toggle"
@@ -4850,7 +4850,7 @@ wrapperTag: div
4850
4850
  <div class="pf-v6-c-drawer__content">
4851
4851
  <div class="pf-v6-c-drawer__body">
4852
4852
  <div
4853
- class="pf-v6-c-compass"
4853
+ class="pf-v6-c-compass pf-m-animate-smoothly"
4854
4854
  style="
4855
4855
  --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
4856
4856
  --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -5266,7 +5266,7 @@ wrapperTag: div
5266
5266
  </div>
5267
5267
  <div class="pf-v6-c-compass__profile">
5268
5268
  <button
5269
- class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
5269
+ class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
5270
5270
  type="button"
5271
5271
  aria-expanded="false"
5272
5272
  aria-label="Menu toggle"
package/docs/layouts/Bullseye/examples/Bullseye.css CHANGED
@@ -1,5 +1,5 @@
1
- .ws-core-l-bullseye .pf-v6-l-bullseye,
2
- .ws-core-l-bullseye .pf-v6-l-bullseye__item {
1
+ .ws-core-f-bullseye .pf-v6-l-bullseye,
2
+ .ws-core-f-bullseye .pf-v6-l-bullseye__item {
3
3
  padding: var(--pf-t--global--spacer--sm);
4
4
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
5
  }
package/docs/layouts/Flex/examples/Flex.css CHANGED
@@ -1,6 +1,6 @@
1
- .ws-core-l-flex-border,
2
- .ws-core-l-flex .pf-v6-l-flex .pf-v6-l-flex,
3
- .ws-core-l-flex .pf-v6-l-flex__item {
1
+ .ws-core-f-flex-border,
2
+ .ws-core-f-flex .pf-v6-l-flex .pf-v6-l-flex,
3
+ .ws-core-f-flex .pf-v6-l-flex__item {
4
4
  padding: var(--pf-t--global--spacer--sm);
5
5
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
6
6
  }
package/docs/layouts/Gallery/examples/Gallery.css CHANGED
@@ -1,5 +1,5 @@
1
- .ws-core-l-gallery .pf-v6-l-gallery,
2
- .ws-core-l-gallery .pf-v6-l-gallery__item {
1
+ .ws-core-f-gallery .pf-v6-l-gallery,
2
+ .ws-core-f-gallery .pf-v6-l-gallery__item {
3
3
  padding: var(--pf-t--global--spacer--sm);
4
4
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
5
  }
package/docs/layouts/Grid/examples/Grid.css CHANGED
@@ -1,4 +1,4 @@
1
- .ws-core-l-grid .pf-v6-l-grid__item {
1
+ .ws-core-f-grid .pf-v6-l-grid__item {
2
2
  padding: var(--pf-t--global--spacer--sm);
3
3
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
4
4
  }