@patternfly/patternfly 6.5.0-prerelease.24 → 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 +85 -9
  2. package/components/Compass/compass.scss +92 -51
  3. package/components/_index.css +85 -9
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +12 -7
  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 +133 -46
  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 +85 -9
  15. package/patternfly.css +85 -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,18 +34,37 @@
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 {
36
57
  display: grid;
37
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
38
- grid-template-rows: auto 1fr auto;
58
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
59
+ grid-template-rows: auto 1fr;
39
60
  grid-template-columns: auto 1fr auto;
61
+ grid-auto-rows: auto;
40
62
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
41
63
  align-items: center;
42
64
  justify-content: center;
43
65
  height: 100dvh;
44
66
  padding: var(--pf-v6-c-compass--Padding);
67
+ overflow: hidden;
45
68
  background-image: var(--pf-v6-c-compass--BackgroundImage);
46
69
  background-size: cover;
47
70
  }
@@ -52,11 +75,45 @@
52
75
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
53
76
  }
54
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
+
55
111
  .pf-v6-c-compass__header {
56
112
  display: grid;
57
113
  grid-area: header;
58
114
  grid-template-columns: 1fr auto 1fr;
59
115
  align-items: start;
116
+ translate: 0 -100%;
60
117
  }
61
118
 
62
119
  .pf-v6-c-compass__profile {
@@ -93,10 +150,26 @@
93
150
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
94
151
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
95
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;
96
157
  }
97
158
  .pf-v6-c-compass__sidebar.pf-m-start {
159
+ translate: -100%;
98
160
  grid-area: sidebar-start;
99
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
+ }
100
173
 
101
174
  .pf-v6-c-compass__main {
102
175
  display: flex;
@@ -128,15 +201,18 @@
128
201
  max-height: 100%;
129
202
  }
130
203
 
131
- .pf-v6-c-compass__sidebar.pf-m-end {
132
- grid-area: sidebar-end;
133
- padding: var(--pf-t--global--spacer--sm);
204
+ .pf-v6-c-compass__main-footer {
205
+ display: flex;
206
+ justify-content: center;
207
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
208
+ translate: 0 100%;
134
209
  }
135
210
 
136
211
  .pf-v6-c-compass__footer {
137
212
  display: flex;
138
- grid-area: footer;
213
+ grid-column: 1/-1;
139
214
  justify-content: center;
215
+ translate: 0 100%;
140
216
  }
141
217
 
142
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,25 +36,44 @@
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} {
38
60
  display: grid;
39
61
  grid-template-areas:
40
62
  "header header header"
41
- "sidebar-start main sidebar-end"
42
- "footer footer footer";
43
- grid-template-rows: auto 1fr auto;
63
+ "sidebar-start main sidebar-end";
64
+ grid-template-rows: auto 1fr;
44
65
  grid-template-columns: auto 1fr auto;
66
+ grid-auto-rows: auto;
45
67
  gap: var(--#{$compass}--RowGap) var(--#{$compass}--ColumnGap);
46
68
  align-items: center;
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,29 +215,24 @@
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%;
151
221
  }
152
222
  }
153
223
 
154
- .#{$compass}__sidebar.pf-m-end {
155
- grid-area: sidebar-end;
156
- padding: var(--pf-t--global--spacer--sm);
224
+ .#{$compass}__main-footer {
225
+ display: flex;
226
+ justify-content: center;
227
+ margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
228
+ translate: 0 100%;
157
229
  }
158
230
 
159
231
  .#{$compass}__footer {
160
232
  display: flex;
161
- grid-area: footer;
233
+ grid-column: 1 / -1;
162
234
  justify-content: center;
235
+ translate: 0 100%;
163
236
  }
164
237
 
165
238
  .#{$compass}__message-bar {
@@ -200,38 +273,6 @@
200
273
  }
201
274
  }
202
275
 
203
- :where(.pf-v6-theme-dark) .#{$compass} {
204
- // dark theme goes here
205
- }
206
-
207
- // .pf-chatbot__message-bar {
208
- // width: 100%;
209
- // min-width: var(--#{$compass}--message-bar--min-width);
210
- // max-width: var(--#{$compass}--message-bar--max-width);
211
- // padding-inline-start: 0px;
212
- // padding-inline-end: 0.8em;
213
- // background: transparent;
214
- // border: 0;
215
-
216
- // &:hover,
217
- // &:focus-within {
218
- // box-shadow: var(--pf-t--global--box-shadow--md);
219
- // }
220
-
221
- // .pf-chatbot__button--send.pf-m-compact {
222
- // width: auto;
223
- // height: auto;
224
- // padding: var(--pf-v6-c-button--m-small--PaddingBlockStart) var(--pf-v6-c-button--m-small--PaddingInlineEnd)
225
- // var(--pf-v6-c-button--m-small--PaddingBlockEnd) var(--pf-v6-c-button--m-small--PaddingInlineStart);
226
-
227
- // .pf-v6-c-button__icon {
228
- // min-width: 1lh;
229
- // }
230
- // }
231
- // }
232
-
233
-
234
-
235
276
  /* stylelint-disable */
236
277
  @media (max-width: 1200px) {
237
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,18 +3543,37 @@ 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 {
3545
3566
  display: grid;
3546
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
3547
- grid-template-rows: auto 1fr auto;
3567
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3568
+ grid-template-rows: auto 1fr;
3548
3569
  grid-template-columns: auto 1fr auto;
3570
+ grid-auto-rows: auto;
3549
3571
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3550
3572
  align-items: center;
3551
3573
  justify-content: center;
3552
3574
  height: 100dvh;
3553
3575
  padding: var(--pf-v6-c-compass--Padding);
3576
+ overflow: hidden;
3554
3577
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3555
3578
  background-size: cover;
3556
3579
  }
@@ -3561,11 +3584,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3561
3584
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3562
3585
  }
3563
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
+
3564
3620
  .pf-v6-c-compass__header {
3565
3621
  display: grid;
3566
3622
  grid-area: header;
3567
3623
  grid-template-columns: 1fr auto 1fr;
3568
3624
  align-items: start;
3625
+ translate: 0 -100%;
3569
3626
  }
3570
3627
 
3571
3628
  .pf-v6-c-compass__profile {
@@ -3602,10 +3659,26 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3602
3659
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3603
3660
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3604
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;
3605
3666
  }
3606
3667
  .pf-v6-c-compass__sidebar.pf-m-start {
3668
+ translate: -100%;
3607
3669
  grid-area: sidebar-start;
3608
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
+ }
3609
3682
 
3610
3683
  .pf-v6-c-compass__main {
3611
3684
  display: flex;
@@ -3637,15 +3710,18 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3637
3710
  max-height: 100%;
3638
3711
  }
3639
3712
 
3640
- .pf-v6-c-compass__sidebar.pf-m-end {
3641
- grid-area: sidebar-end;
3642
- padding: var(--pf-t--global--spacer--sm);
3713
+ .pf-v6-c-compass__main-footer {
3714
+ display: flex;
3715
+ justify-content: center;
3716
+ margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
3717
+ translate: 0 100%;
3643
3718
  }
3644
3719
 
3645
3720
  .pf-v6-c-compass__footer {
3646
3721
  display: flex;
3647
- grid-area: footer;
3722
+ grid-column: 1/-1;
3648
3723
  justify-content: center;
3724
+ translate: 0 100%;
3649
3725
  }
3650
3726
 
3651
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">
@@ -40,12 +40,14 @@ cssPrefix: pf-v6-c-compass
40
40
  </div>
41
41
  </div>
42
42
  <div class="pf-v6-c-compass__content">content</div>
43
- </div>
44
- <div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
45
43
 
46
- <div class="pf-v6-c-compass__footer">
47
- <div class="pf-v6-c-compass__message-bar">message bar</div>
44
+ <div class="pf-v6-c-compass__main-footer pf-m-expanded">
45
+ <div class="pf-v6-c-compass__message-bar">message bar</div>
46
+ </div>
48
47
  </div>
48
+ <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">sidebar (end)</div>
49
+
50
+ <div class="pf-v6-c-compass__footer pf-m-expanded">footer</div>
49
51
  </div>
50
52
 
51
53
  ```
@@ -68,13 +70,15 @@ cssPrefix: pf-v6-c-compass
68
70
  | `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
69
71
  | `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
70
72
  | `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
73
+ | `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the compass main footer. **Required** |
71
74
  | `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
72
75
  | `.pf-v6-c-compass__nav` | `<div>` | Initiates a compass container for site navigation. |
73
76
  | `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a compass container for navigation content. |
74
77
  | `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for compass home button. |
75
78
  | `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for compass navigation main content. |
76
79
  | `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for compass search button. |
77
- | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. **Required** |
80
+ | `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
81
+ | `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. |
78
82
  | `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
79
83
  | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
80
84
  | `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |
@@ -84,3 +88,4 @@ cssPrefix: pf-v6-c-compass
84
88
  | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a compass panel to be full height. |
85
89
  | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a compass panel to have a pill shaped border radius. |
86
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. |