@patternfly/patternfly 6.5.0-prerelease.25 → 6.5.0-prerelease.26

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 (17) hide show
  1. package/components/Compass/compass.css +78 -9
  2. package/components/Compass/compass.scss +85 -50
  3. package/components/_index.css +78 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +6 -5
  6. package/docs/components/Tabs/examples/Tabs.md +813 -77
  7. package/docs/demos/Card/examples/Card.md +14 -2
  8. package/docs/demos/Compass/examples/Compass.md +109 -30
  9. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -2
  10. package/docs/demos/Drawer/examples/Drawer.md +11 -2
  11. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +16 -2
  12. package/docs/demos/Tabs/examples/Tabs.md +72 -9
  13. package/package.json +1 -1
  14. package/patternfly-no-globals.css +78 -9
  15. package/patternfly.css +78 -9
  16. package/patternfly.min.css +1 -1
  17. package/patternfly.min.css.map +1 -1
package/components/Compass/compass.css CHANGED
@@ -3,8 +3,8 @@
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--xl);
7
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
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);
8
8
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
9
9
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
10
10
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -12,10 +12,14 @@
12
12
  --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
13
  --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14
14
  --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
15
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
15
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
16
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
18
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
16
19
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
17
20
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
18
21
  --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));
19
23
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
20
24
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
21
25
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -30,6 +34,23 @@
30
34
  --pf-v6-c-compass__message-bar--Width: 450px;
31
35
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
32
36
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
37
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
38
+ --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--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;
44
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
45
+ }
46
+ @media screen and (prefers-reduced-motion: no-preference) {
47
+ .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;
53
+ }
33
54
  }
34
55
 
35
56
  .pf-v6-c-compass {
@@ -43,6 +64,7 @@
43
64
  justify-content: center;
44
65
  height: 100dvh;
45
66
  padding: var(--pf-v6-c-compass--Padding);
67
+ overflow: hidden;
46
68
  background-image: var(--pf-v6-c-compass--BackgroundImage);
47
69
  background-size: cover;
48
70
  }
@@ -53,11 +75,45 @@
53
75
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
54
76
  }
55
77
 
78
+ .pf-v6-c-compass__header,
79
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
80
+ .pf-v6-c-compass__main-footer,
81
+ .pf-v6-c-compass__footer {
82
+ visibility: hidden;
83
+ opacity: 0;
84
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
85
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
86
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
87
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
88
+ }
89
+ .pf-v6-c-compass__header.pf-m-expanded,
90
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
91
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
92
+ .pf-v6-c-compass__footer.pf-m-expanded {
93
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
94
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
95
+ visibility: visible;
96
+ opacity: 1;
97
+ translate: 0;
98
+ }
99
+
100
+ .pf-v6-c-compass__header,
101
+ .pf-v6-c-compass__main-footer,
102
+ .pf-v6-c-compass__footer {
103
+ max-height: 0;
104
+ }
105
+ .pf-v6-c-compass__header.pf-m-expanded,
106
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
107
+ .pf-v6-c-compass__footer.pf-m-expanded {
108
+ max-height: 9999px;
109
+ }
110
+
56
111
  .pf-v6-c-compass__header {
57
112
  display: grid;
58
113
  grid-area: header;
59
114
  grid-template-columns: 1fr auto 1fr;
60
115
  align-items: start;
116
+ translate: 0 -100%;
61
117
  }
62
118
 
63
119
  .pf-v6-c-compass__profile {
@@ -94,10 +150,26 @@
94
150
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
95
151
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
96
152
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
153
+ max-width: 0;
154
+ }
155
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
156
+ max-width: 9999px;
97
157
  }
98
158
  .pf-v6-c-compass__sidebar.pf-m-start {
159
+ translate: -100%;
99
160
  grid-area: sidebar-start;
100
161
  }
162
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
163
+ translate: 100%;
164
+ }
165
+
166
+ .pf-v6-c-compass__sidebar.pf-m-end {
167
+ translate: 100%;
168
+ grid-area: sidebar-end;
169
+ }
170
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
171
+ translate: -100%;
172
+ }
101
173
 
102
174
  .pf-v6-c-compass__main {
103
175
  display: flex;
@@ -132,18 +204,15 @@
132
204
  .pf-v6-c-compass__main-footer {
133
205
  display: flex;
134
206
  justify-content: center;
135
- margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
136
- }
137
-
138
- .pf-v6-c-compass__sidebar.pf-m-end {
139
- grid-area: sidebar-end;
140
- padding: var(--pf-t--global--spacer--sm);
207
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
208
+ translate: 0 100%;
141
209
  }
142
210
 
143
211
  .pf-v6-c-compass__footer {
144
212
  display: flex;
145
213
  grid-column: 1/-1;
146
214
  justify-content: center;
215
+ translate: 0 100%;
147
216
  }
148
217
 
149
218
  .pf-v6-c-compass__message-bar {
package/components/Compass/compass.scss CHANGED
@@ -5,8 +5,8 @@
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--xl);
9
- --#{$compass}--ColumnGap: var(--pf-t--global--spacer--xl);
8
+ --#{$compass}--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
9
+ --#{$compass}--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
10
10
  --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
11
  --#{$compass}__nav--PaddingBlockStart: 0;
12
12
  --#{$compass}__nav--PaddingBlockEnd: 0;
@@ -14,10 +14,14 @@
14
14
  --#{$compass}__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
15
15
  --#{$compass}__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
16
16
  --#{$compass}__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
17
- --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
17
+ --#{$compass}__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
18
+ --#{$compass}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
19
+ --#{$compass}__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
20
+ --#{$compass}__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
18
21
  --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
19
22
  --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
20
23
  --#{$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
21
25
  --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
22
26
  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
23
27
  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -32,6 +36,24 @@
32
36
  --#{$compass}__message-bar--Width: 450px;
33
37
  --#{$compass}__message-bar--MinWidth: 300px;
34
38
  --#{$compass}__message-bar--MaxWidth: 600px;
39
+
40
+ // Section animation
41
+ --#{$compass}--section--duration: var(--pf-t--global--motion--duration--fade--default);
42
+ --#{$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--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;
48
+ --#{$compass}--section--m-expanded--TransitionDelay: 0s;
49
+
50
+ @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;
56
+ }
35
57
  }
36
58
 
37
59
  .#{$compass} {
@@ -47,10 +69,11 @@
47
69
  justify-content: center;
48
70
  height: 100dvh;
49
71
  padding: var(--#{$compass}--Padding);
72
+ overflow: hidden;
50
73
  background-image: var(--#{$compass}--BackgroundImage);
51
74
  background-size: cover;
52
75
 
53
- :root:where(.pf-v6-theme-dark) & {
76
+ :root:where(.#{$pf-prefix}theme-dark) & {
54
77
  --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
55
78
  }
56
79
 
@@ -62,11 +85,43 @@
62
85
  }
63
86
  }
64
87
 
88
+ .#{$compass}__header,
89
+ .#{$compass}__sidebar:is(.pf-m-start, .pf-m-end),
90
+ .#{$compass}__main-footer,
91
+ .#{$compass}__footer {
92
+ visibility: hidden;
93
+ opacity: 0;
94
+ transition-delay: var(--#{$compass}--section--TransitionDelay);
95
+ transition-timing-function: var(--#{$compass}--section--TransitionTimingFunction);
96
+ transition-duration: var(--#{$compass}--section--TransitionDuration);
97
+ transition-property: var(--#{$compass}--section--TransitionProperty);
98
+
99
+ &.pf-m-expanded {
100
+ --#{$compass}--section--TransitionDelay: var(--#{$compass}--section--m-expanded--TransitionDelay);
101
+ --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--m-expanded--TransitionDuration);
102
+
103
+ visibility: visible;
104
+ opacity: 1;
105
+ translate: 0;
106
+ }
107
+ }
108
+
109
+ .#{$compass}__header,
110
+ .#{$compass}__main-footer,
111
+ .#{$compass}__footer {
112
+ max-height: 0;
113
+
114
+ &.pf-m-expanded {
115
+ max-height: 9999px;
116
+ }
117
+ }
118
+
65
119
  .#{$compass}__header {
66
120
  display: grid;
67
121
  grid-area: header;
68
122
  grid-template-columns: 1fr auto 1fr;
69
123
  align-items: start;
124
+ translate: 0 -100%;
70
125
  }
71
126
 
72
127
  .#{$compass}__profile {
@@ -107,8 +162,31 @@
107
162
  --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
108
163
  --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
109
164
 
165
+ max-width: 0;
166
+
167
+ &.pf-m-expanded {
168
+ max-width: 9999px;
169
+ }
170
+
110
171
  &.pf-m-start {
172
+ @include pf-v6-bidirectional-style(
173
+ $prop: translate,
174
+ $ltr-val: -100%,
175
+ $rtl-val: 100%,
176
+ );
177
+
111
178
  grid-area: sidebar-start;
179
+
180
+ }
181
+
182
+ &.pf-m-end {
183
+ @include pf-v6-bidirectional-style(
184
+ $prop: translate,
185
+ $ltr-val: 100%,
186
+ $rtl-val: -100%,
187
+ );
188
+
189
+ grid-area: sidebar-end;
112
190
  }
113
191
  }
114
192
 
@@ -137,14 +215,6 @@
137
215
  min-height: 0;
138
216
  overflow: auto;
139
217
 
140
- // mask: linear-gradient(
141
- // rgba(0, 0, 0, calc(1 - var(--#{$compass}__scroll-top) / 20)),
142
- // black var(--#{$compass}--feather--length),
143
- // black calc(100% - var(--#{$compass}--feather--length)),
144
- // rgba(0, 0, 0, calc(1 - var(--#{$compass}__scroll-bottom) / 20))
145
- // );
146
- // backdrop-filter: blur(8px);
147
-
148
218
  > *:last-child {
149
219
  flex-grow: 1;
150
220
  max-height: 100%;
@@ -154,18 +224,15 @@
154
224
  .#{$compass}__main-footer {
155
225
  display: flex;
156
226
  justify-content: center;
157
- margin-block-start: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--RowGap)); // Creates same gap as parent compass grid, mimicking the compass footer
158
- }
159
-
160
- .#{$compass}__sidebar.pf-m-end {
161
- grid-area: sidebar-end;
162
- padding: var(--pf-t--global--spacer--sm);
227
+ margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
228
+ translate: 0 100%;
163
229
  }
164
230
 
165
231
  .#{$compass}__footer {
166
232
  display: flex;
167
233
  grid-column: 1 / -1;
168
234
  justify-content: center;
235
+ translate: 0 100%;
169
236
  }
170
237
 
171
238
  .#{$compass}__message-bar {
@@ -206,38 +273,6 @@
206
273
  }
207
274
  }
208
275
 
209
- :where(.pf-v6-theme-dark) .#{$compass} {
210
- // dark theme goes here
211
- }
212
-
213
- // .pf-chatbot__message-bar {
214
- // width: 100%;
215
- // min-width: var(--#{$compass}--message-bar--min-width);
216
- // max-width: var(--#{$compass}--message-bar--max-width);
217
- // padding-inline-start: 0px;
218
- // padding-inline-end: 0.8em;
219
- // background: transparent;
220
- // border: 0;
221
-
222
- // &:hover,
223
- // &:focus-within {
224
- // box-shadow: var(--pf-t--global--box-shadow--md);
225
- // }
226
-
227
- // .pf-chatbot__button--send.pf-m-compact {
228
- // width: auto;
229
- // height: auto;
230
- // padding: var(--pf-v6-c-button--m-small--PaddingBlockStart) var(--pf-v6-c-button--m-small--PaddingInlineEnd)
231
- // var(--pf-v6-c-button--m-small--PaddingBlockEnd) var(--pf-v6-c-button--m-small--PaddingInlineStart);
232
-
233
- // .pf-v6-c-button__icon {
234
- // min-width: 1lh;
235
- // }
236
- // }
237
- // }
238
-
239
-
240
-
241
276
  /* stylelint-disable */
242
277
  @media (max-width: 1200px) {
243
278
  .#{$compass} * {
package/components/_index.css CHANGED
@@ -3512,8 +3512,8 @@ 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--xl);
3516
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
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);
3517
3517
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
3518
3518
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3519
3519
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -3521,10 +3521,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3521
3521
  --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3522
3522
  --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3523
3523
  --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
3524
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3524
+ --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
3525
+ --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
3526
+ --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3527
+ --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3525
3528
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3526
3529
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3527
3530
  --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));
3528
3532
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3529
3533
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3530
3534
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -3539,6 +3543,23 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3539
3543
  --pf-v6-c-compass__message-bar--Width: 450px;
3540
3544
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3541
3545
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
3546
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
3547
+ --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--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;
3553
+ --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
3554
+ }
3555
+ @media screen and (prefers-reduced-motion: no-preference) {
3556
+ .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;
3562
+ }
3542
3563
  }
3543
3564
 
3544
3565
  .pf-v6-c-compass {
@@ -3552,6 +3573,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3552
3573
  justify-content: center;
3553
3574
  height: 100dvh;
3554
3575
  padding: var(--pf-v6-c-compass--Padding);
3576
+ overflow: hidden;
3555
3577
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3556
3578
  background-size: cover;
3557
3579
  }
@@ -3562,11 +3584,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3562
3584
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3563
3585
  }
3564
3586
 
3587
+ .pf-v6-c-compass__header,
3588
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3589
+ .pf-v6-c-compass__main-footer,
3590
+ .pf-v6-c-compass__footer {
3591
+ visibility: hidden;
3592
+ opacity: 0;
3593
+ transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
3594
+ transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
3595
+ transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
3596
+ transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
3597
+ }
3598
+ .pf-v6-c-compass__header.pf-m-expanded,
3599
+ .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
3600
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3601
+ .pf-v6-c-compass__footer.pf-m-expanded {
3602
+ --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
3603
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
3604
+ visibility: visible;
3605
+ opacity: 1;
3606
+ translate: 0;
3607
+ }
3608
+
3609
+ .pf-v6-c-compass__header,
3610
+ .pf-v6-c-compass__main-footer,
3611
+ .pf-v6-c-compass__footer {
3612
+ max-height: 0;
3613
+ }
3614
+ .pf-v6-c-compass__header.pf-m-expanded,
3615
+ .pf-v6-c-compass__main-footer.pf-m-expanded,
3616
+ .pf-v6-c-compass__footer.pf-m-expanded {
3617
+ max-height: 9999px;
3618
+ }
3619
+
3565
3620
  .pf-v6-c-compass__header {
3566
3621
  display: grid;
3567
3622
  grid-area: header;
3568
3623
  grid-template-columns: 1fr auto 1fr;
3569
3624
  align-items: start;
3625
+ translate: 0 -100%;
3570
3626
  }
3571
3627
 
3572
3628
  .pf-v6-c-compass__profile {
@@ -3603,10 +3659,26 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3603
3659
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3604
3660
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3605
3661
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3662
+ max-width: 0;
3663
+ }
3664
+ .pf-v6-c-compass__sidebar.pf-m-expanded {
3665
+ max-width: 9999px;
3606
3666
  }
3607
3667
  .pf-v6-c-compass__sidebar.pf-m-start {
3668
+ translate: -100%;
3608
3669
  grid-area: sidebar-start;
3609
3670
  }
3671
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
3672
+ translate: 100%;
3673
+ }
3674
+
3675
+ .pf-v6-c-compass__sidebar.pf-m-end {
3676
+ translate: 100%;
3677
+ grid-area: sidebar-end;
3678
+ }
3679
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
3680
+ translate: -100%;
3681
+ }
3610
3682
 
3611
3683
  .pf-v6-c-compass__main {
3612
3684
  display: flex;
@@ -3641,18 +3713,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3641
3713
  .pf-v6-c-compass__main-footer {
3642
3714
  display: flex;
3643
3715
  justify-content: center;
3644
- margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
3645
- }
3646
-
3647
- .pf-v6-c-compass__sidebar.pf-m-end {
3648
- grid-area: sidebar-end;
3649
- padding: var(--pf-t--global--spacer--sm);
3716
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3717
+ translate: 0 100%;
3650
3718
  }
3651
3719
 
3652
3720
  .pf-v6-c-compass__footer {
3653
3721
  display: flex;
3654
3722
  grid-column: 1/-1;
3655
3723
  justify-content: center;
3724
+ translate: 0 100%;
3656
3725
  }
3657
3726
 
3658
3727
  .pf-v6-c-compass__message-bar {
package/docs/components/Compass/examples/Compass.css CHANGED
@@ -1,8 +1,8 @@
1
- #ws-core-c-compass-basic [class*="pf-v6-c-compass"] {
1
+ #ws-core-p-compass-basic [class*="pf-v6-c-compass"] {
2
2
  position: relative;
3
3
  }
4
4
 
5
- #ws-core-c-compass-basic [class*="pf-v6-c-compass"]::after {
5
+ #ws-core-p-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
@@ -12,7 +12,7 @@ cssPrefix: pf-v6-c-compass
12
12
 
13
13
  ```html isBeta
14
14
  <div class="pf-v6-c-compass">
15
- <div class="pf-v6-c-compass__header">
15
+ <div class="pf-v6-c-compass__header pf-m-expanded">
16
16
  <div class="pf-v6-c-compass__logo">logo</div>
17
17
 
18
18
  <div class="pf-v6-c-compass__nav">
@@ -28,7 +28,7 @@ cssPrefix: pf-v6-c-compass
28
28
  </div>
29
29
  <div class="pf-v6-c-compass__profile">profile</div>
30
30
  </div>
31
- <div class="pf-v6-c-compass__sidebar pf-m-start">sidebar (start)</div>
31
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">sidebar (start)</div>
32
32
 
33
33
  <div class="pf-v6-c-compass__main">
34
34
  <div class="pf-v6-c-compass__hero">
@@ -41,13 +41,13 @@ cssPrefix: pf-v6-c-compass
41
41
  </div>
42
42
  <div class="pf-v6-c-compass__content">content</div>
43
43
 
44
- <div class="pf-v6-c-compass__main-footer">
44
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
45
45
  <div class="pf-v6-c-compass__message-bar">message bar</div>
46
46
  </div>
47
47
  </div>
48
- <div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
48
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">sidebar (end)</div>
49
49
 
50
- <div class="pf-v6-c-compass__footer">footer</div>
50
+ <div class="pf-v6-c-compass__footer pf-m-expanded">footer</div>
51
51
  </div>
52
52
 
53
53
  ```
@@ -88,3 +88,4 @@ cssPrefix: pf-v6-c-compass
88
88
  | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a compass panel to be full height. |
89
89
  | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a compass panel to have a pill shaped border radius. |
90
90
  | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a compass panel to scroll its overflow. |
91
+ | `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a compass section for expanded styles. |