@patternfly/react-styles 6.5.0-prerelease.5 → 6.5.0-prerelease.6

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 (11) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/css/components/Compass/compass.css +128 -12
  3. package/css/components/Compass/compass.d.ts +8 -1
  4. package/css/components/Compass/compass.js +8 -1
  5. package/css/components/Compass/compass.mjs +8 -1
  6. package/css/components/_index.css +128 -12
  7. package/css/components/_index.d.ts +5 -0
  8. package/css/components/_index.js +5 -0
  9. package/css/components/_index.mjs +5 -0
  10. package/css/docs/components/Compass/examples/Compass.css +2 -2
  11. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.5.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.5...@patternfly/react-styles@6.5.0-prerelease.6) (2025-11-14)
7
+
8
+ ### Bug Fixes
9
+
10
+ - Moves items to new nav. ([#12013](https://github.com/patternfly/patternfly-react/issues/12013)) ([ddd0696](https://github.com/patternfly/patternfly-react/commit/ddd0696796134c7d0f9583ce56e26b0df47156cb))
11
+
12
+ ### Features
13
+
14
+ - **Compass:** updated mainheader structure to be composable ([#12135](https://github.com/patternfly/patternfly-react/issues/12135)) ([6bcdcaf](https://github.com/patternfly/patternfly-react/commit/6bcdcaf116645aad4c9c0d98ca61045976a84946))
15
+
6
16
  # [6.5.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.4...@patternfly/react-styles@6.5.0-prerelease.5) (2025-11-12)
7
17
 
8
18
  ### Features
package/css/components/Compass/compass.css CHANGED
@@ -3,34 +3,68 @@
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
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
9
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
10
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
11
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
12
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
13
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
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);
10
19
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
20
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
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));
11
23
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12
24
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
13
25
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
14
26
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
15
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
27
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
28
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
29
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
30
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
16
31
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
17
32
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
18
33
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
19
34
  --pf-v6-c-compass__message-bar--Width: 450px;
20
35
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
21
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
+ }
22
54
  }
23
55
 
24
56
  .pf-v6-c-compass {
25
57
  display: grid;
26
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
27
- grid-template-rows: auto 1fr auto;
58
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
59
+ grid-template-rows: auto 1fr;
28
60
  grid-template-columns: auto 1fr auto;
61
+ grid-auto-rows: auto;
29
62
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
30
63
  align-items: center;
31
64
  justify-content: center;
32
65
  height: 100dvh;
33
66
  padding: var(--pf-v6-c-compass--Padding);
67
+ overflow: hidden;
34
68
  background-image: var(--pf-v6-c-compass--BackgroundImage);
35
69
  background-size: cover;
36
70
  }
@@ -41,11 +75,45 @@
41
75
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
76
  }
43
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
+
44
111
  .pf-v6-c-compass__header {
45
112
  display: grid;
46
113
  grid-area: header;
47
114
  grid-template-columns: 1fr auto 1fr;
48
115
  align-items: start;
116
+ translate: 0 -100%;
49
117
  }
50
118
 
51
119
  .pf-v6-c-compass__profile {
@@ -56,6 +124,10 @@
56
124
  }
57
125
 
58
126
  .pf-v6-c-compass__nav {
127
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
128
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
129
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
130
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
59
131
  display: flex;
60
132
  flex-direction: column;
61
133
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -63,12 +135,41 @@
63
135
  justify-self: stretch;
64
136
  }
65
137
 
138
+ .pf-v6-c-compass__nav-content {
139
+ display: flex;
140
+ align-items: center;
141
+ }
142
+
143
+ .pf-v6-c-compass__nav-main {
144
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
145
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
146
+ }
147
+
66
148
  .pf-v6-c-compass__sidebar {
67
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
149
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
150
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
151
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
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;
68
157
  }
69
158
  .pf-v6-c-compass__sidebar.pf-m-start {
159
+ translate: -100%;
70
160
  grid-area: sidebar-start;
71
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
+ }
72
173
 
73
174
  .pf-v6-c-compass__main {
74
175
  display: flex;
@@ -79,6 +180,15 @@
79
180
  min-height: 0;
80
181
  }
81
182
 
183
+ .pf-v6-c-compass__main-header-content {
184
+ display: flex;
185
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
186
+ }
187
+
188
+ .pf-v6-c-compass__main-header-title {
189
+ flex-grow: 1;
190
+ }
191
+
82
192
  .pf-v6-c-compass__content {
83
193
  display: flex;
84
194
  flex: 1 0 0;
@@ -91,15 +201,18 @@
91
201
  max-height: 100%;
92
202
  }
93
203
 
94
- .pf-v6-c-compass__sidebar.pf-m-end {
95
- grid-area: sidebar-end;
96
- 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%;
97
209
  }
98
210
 
99
211
  .pf-v6-c-compass__footer {
100
212
  display: flex;
101
- grid-area: footer;
213
+ grid-column: 1/-1;
102
214
  justify-content: center;
215
+ translate: 0 100%;
103
216
  }
104
217
 
105
218
  .pf-v6-c-compass__message-bar {
@@ -109,7 +222,10 @@
109
222
  }
110
223
 
111
224
  .pf-v6-c-compass__panel {
112
- padding: var(--pf-v6-c-compass__panel--Padding);
225
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
226
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
227
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
228
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
113
229
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
114
230
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
115
231
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/css/components/Compass/compass.d.ts CHANGED
@@ -5,17 +5,24 @@ declare const _default: {
5
5
  "compassFooter": "pf-v6-c-compass__footer",
6
6
  "compassHeader": "pf-v6-c-compass__header",
7
7
  "compassMain": "pf-v6-c-compass__main",
8
+ "compassMainFooter": "pf-v6-c-compass__main-footer",
9
+ "compassMainHeaderContent": "pf-v6-c-compass__main-header-content",
10
+ "compassMainHeaderTitle": "pf-v6-c-compass__main-header-title",
8
11
  "compassMessageBar": "pf-v6-c-compass__message-bar",
9
12
  "compassNav": "pf-v6-c-compass__nav",
13
+ "compassNavContent": "pf-v6-c-compass__nav-content",
14
+ "compassNavMain": "pf-v6-c-compass__nav-main",
10
15
  "compassPanel": "pf-v6-c-compass__panel",
11
16
  "compassProfile": "pf-v6-c-compass__profile",
12
17
  "compassSidebar": "pf-v6-c-compass__sidebar",
18
+ "dirRtl": "pf-v6-m-dir-rtl",
13
19
  "menuToggle": "pf-v6-c-menu-toggle",
14
20
  "modifiers": {
15
21
  "noGlass": "pf-m-no-glass",
16
- "plain": "pf-m-plain",
17
22
  "start": "pf-m-start",
18
23
  "end": "pf-m-end",
24
+ "expanded": "pf-m-expanded",
25
+ "plain": "pf-m-plain",
19
26
  "noBorder": "pf-m-no-border",
20
27
  "noPadding": "pf-m-no-padding",
21
28
  "fullHeight": "pf-m-full-height",
package/css/components/Compass/compass.js CHANGED
@@ -7,17 +7,24 @@ exports.default = {
7
7
  "compassFooter": "pf-v6-c-compass__footer",
8
8
  "compassHeader": "pf-v6-c-compass__header",
9
9
  "compassMain": "pf-v6-c-compass__main",
10
+ "compassMainFooter": "pf-v6-c-compass__main-footer",
11
+ "compassMainHeaderContent": "pf-v6-c-compass__main-header-content",
12
+ "compassMainHeaderTitle": "pf-v6-c-compass__main-header-title",
10
13
  "compassMessageBar": "pf-v6-c-compass__message-bar",
11
14
  "compassNav": "pf-v6-c-compass__nav",
15
+ "compassNavContent": "pf-v6-c-compass__nav-content",
16
+ "compassNavMain": "pf-v6-c-compass__nav-main",
12
17
  "compassPanel": "pf-v6-c-compass__panel",
13
18
  "compassProfile": "pf-v6-c-compass__profile",
14
19
  "compassSidebar": "pf-v6-c-compass__sidebar",
20
+ "dirRtl": "pf-v6-m-dir-rtl",
15
21
  "menuToggle": "pf-v6-c-menu-toggle",
16
22
  "modifiers": {
17
23
  "noGlass": "pf-m-no-glass",
18
- "plain": "pf-m-plain",
19
24
  "start": "pf-m-start",
20
25
  "end": "pf-m-end",
26
+ "expanded": "pf-m-expanded",
27
+ "plain": "pf-m-plain",
21
28
  "noBorder": "pf-m-no-border",
22
29
  "noPadding": "pf-m-no-padding",
23
30
  "fullHeight": "pf-m-full-height",
package/css/components/Compass/compass.mjs CHANGED
@@ -5,17 +5,24 @@ export default {
5
5
  "compassFooter": "pf-v6-c-compass__footer",
6
6
  "compassHeader": "pf-v6-c-compass__header",
7
7
  "compassMain": "pf-v6-c-compass__main",
8
+ "compassMainFooter": "pf-v6-c-compass__main-footer",
9
+ "compassMainHeaderContent": "pf-v6-c-compass__main-header-content",
10
+ "compassMainHeaderTitle": "pf-v6-c-compass__main-header-title",
8
11
  "compassMessageBar": "pf-v6-c-compass__message-bar",
9
12
  "compassNav": "pf-v6-c-compass__nav",
13
+ "compassNavContent": "pf-v6-c-compass__nav-content",
14
+ "compassNavMain": "pf-v6-c-compass__nav-main",
10
15
  "compassPanel": "pf-v6-c-compass__panel",
11
16
  "compassProfile": "pf-v6-c-compass__profile",
12
17
  "compassSidebar": "pf-v6-c-compass__sidebar",
18
+ "dirRtl": "pf-v6-m-dir-rtl",
13
19
  "menuToggle": "pf-v6-c-menu-toggle",
14
20
  "modifiers": {
15
21
  "noGlass": "pf-m-no-glass",
16
- "plain": "pf-m-plain",
17
22
  "start": "pf-m-start",
18
23
  "end": "pf-m-end",
24
+ "expanded": "pf-m-expanded",
25
+ "plain": "pf-m-plain",
19
26
  "noBorder": "pf-m-no-border",
20
27
  "noPadding": "pf-m-no-padding",
21
28
  "fullHeight": "pf-m-full-height",
package/css/components/_index.css CHANGED
@@ -3512,34 +3512,68 @@ 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
- --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
3518
+ --pf-v6-c-compass__nav--PaddingBlockStart: 0;
3519
+ --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
3520
+ --pf-v6-c-compass__nav--PaddingInlineStart: var(--pf-t--global--spacer--sm);
3521
+ --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
3522
+ --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
3523
+ --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
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);
3519
3528
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
3529
+ --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
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));
3520
3532
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
3521
3533
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
3522
3534
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3523
3535
  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3524
- --pf-v6-c-compass__panel--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3536
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3537
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3538
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3539
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3525
3540
  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3526
3541
  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3527
3542
  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3528
3543
  --pf-v6-c-compass__message-bar--Width: 450px;
3529
3544
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3530
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
+ }
3531
3563
  }
3532
3564
 
3533
3565
  .pf-v6-c-compass {
3534
3566
  display: grid;
3535
- grid-template-areas: "header header header" "sidebar-start main sidebar-end" "footer footer footer";
3536
- grid-template-rows: auto 1fr auto;
3567
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3568
+ grid-template-rows: auto 1fr;
3537
3569
  grid-template-columns: auto 1fr auto;
3570
+ grid-auto-rows: auto;
3538
3571
  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
3539
3572
  align-items: center;
3540
3573
  justify-content: center;
3541
3574
  height: 100dvh;
3542
3575
  padding: var(--pf-v6-c-compass--Padding);
3576
+ overflow: hidden;
3543
3577
  background-image: var(--pf-v6-c-compass--BackgroundImage);
3544
3578
  background-size: cover;
3545
3579
  }
@@ -3550,11 +3584,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3550
3584
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3551
3585
  }
3552
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
+
3553
3620
  .pf-v6-c-compass__header {
3554
3621
  display: grid;
3555
3622
  grid-area: header;
3556
3623
  grid-template-columns: 1fr auto 1fr;
3557
3624
  align-items: start;
3625
+ translate: 0 -100%;
3558
3626
  }
3559
3627
 
3560
3628
  .pf-v6-c-compass__profile {
@@ -3565,6 +3633,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3565
3633
  }
3566
3634
 
3567
3635
  .pf-v6-c-compass__nav {
3636
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3637
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3638
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3639
+ --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3568
3640
  display: flex;
3569
3641
  flex-direction: column;
3570
3642
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3572,12 +3644,41 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3572
3644
  justify-self: stretch;
3573
3645
  }
3574
3646
 
3647
+ .pf-v6-c-compass__nav-content {
3648
+ display: flex;
3649
+ align-items: center;
3650
+ }
3651
+
3652
+ .pf-v6-c-compass__nav-main {
3653
+ padding-inline-start: var(--pf-v6-c-compass__nav-main--PaddingInlineStart);
3654
+ padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3655
+ }
3656
+
3575
3657
  .pf-v6-c-compass__sidebar {
3576
- --pf-v6-c-compass__panel--Padding: var(--pf-v6-c-compass__sidebar--Padding);
3658
+ --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3659
+ --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3660
+ --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
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;
3577
3666
  }
3578
3667
  .pf-v6-c-compass__sidebar.pf-m-start {
3668
+ translate: -100%;
3579
3669
  grid-area: sidebar-start;
3580
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
+ }
3581
3682
 
3582
3683
  .pf-v6-c-compass__main {
3583
3684
  display: flex;
@@ -3588,6 +3689,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3588
3689
  min-height: 0;
3589
3690
  }
3590
3691
 
3692
+ .pf-v6-c-compass__main-header-content {
3693
+ display: flex;
3694
+ gap: var(--pf-v6-c-compass__main-header-content--RowGap) var(--pf-v6-c-compass__main-header-content--ColumnGap);
3695
+ }
3696
+
3697
+ .pf-v6-c-compass__main-header-title {
3698
+ flex-grow: 1;
3699
+ }
3700
+
3591
3701
  .pf-v6-c-compass__content {
3592
3702
  display: flex;
3593
3703
  flex: 1 0 0;
@@ -3600,15 +3710,18 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3600
3710
  max-height: 100%;
3601
3711
  }
3602
3712
 
3603
- .pf-v6-c-compass__sidebar.pf-m-end {
3604
- grid-area: sidebar-end;
3605
- 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%;
3606
3718
  }
3607
3719
 
3608
3720
  .pf-v6-c-compass__footer {
3609
3721
  display: flex;
3610
- grid-area: footer;
3722
+ grid-column: 1/-1;
3611
3723
  justify-content: center;
3724
+ translate: 0 100%;
3612
3725
  }
3613
3726
 
3614
3727
  .pf-v6-c-compass__message-bar {
@@ -3618,7 +3731,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3618
3731
  }
3619
3732
 
3620
3733
  .pf-v6-c-compass__panel {
3621
- padding: var(--pf-v6-c-compass__panel--Padding);
3734
+ padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3735
+ padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3736
+ padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3737
+ padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3622
3738
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3623
3739
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3624
3740
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
package/css/components/_index.d.ts CHANGED
@@ -117,8 +117,13 @@ declare const _default: {
117
117
  "compassFooter": "pf-v6-c-compass__footer",
118
118
  "compassHeader": "pf-v6-c-compass__header",
119
119
  "compassMain": "pf-v6-c-compass__main",
120
+ "compassMainFooter": "pf-v6-c-compass__main-footer",
121
+ "compassMainHeaderContent": "pf-v6-c-compass__main-header-content",
122
+ "compassMainHeaderTitle": "pf-v6-c-compass__main-header-title",
120
123
  "compassMessageBar": "pf-v6-c-compass__message-bar",
121
124
  "compassNav": "pf-v6-c-compass__nav",
125
+ "compassNavContent": "pf-v6-c-compass__nav-content",
126
+ "compassNavMain": "pf-v6-c-compass__nav-main",
122
127
  "compassPanel": "pf-v6-c-compass__panel",
123
128
  "compassProfile": "pf-v6-c-compass__profile",
124
129
  "compassSidebar": "pf-v6-c-compass__sidebar",
package/css/components/_index.js CHANGED
@@ -119,8 +119,13 @@ exports.default = {
119
119
  "compassFooter": "pf-v6-c-compass__footer",
120
120
  "compassHeader": "pf-v6-c-compass__header",
121
121
  "compassMain": "pf-v6-c-compass__main",
122
+ "compassMainFooter": "pf-v6-c-compass__main-footer",
123
+ "compassMainHeaderContent": "pf-v6-c-compass__main-header-content",
124
+ "compassMainHeaderTitle": "pf-v6-c-compass__main-header-title",
122
125
  "compassMessageBar": "pf-v6-c-compass__message-bar",
123
126
  "compassNav": "pf-v6-c-compass__nav",
127
+ "compassNavContent": "pf-v6-c-compass__nav-content",
128
+ "compassNavMain": "pf-v6-c-compass__nav-main",
124
129
  "compassPanel": "pf-v6-c-compass__panel",
125
130
  "compassProfile": "pf-v6-c-compass__profile",
126
131
  "compassSidebar": "pf-v6-c-compass__sidebar",
package/css/components/_index.mjs CHANGED
@@ -117,8 +117,13 @@ export default {
117
117
  "compassFooter": "pf-v6-c-compass__footer",
118
118
  "compassHeader": "pf-v6-c-compass__header",
119
119
  "compassMain": "pf-v6-c-compass__main",
120
+ "compassMainFooter": "pf-v6-c-compass__main-footer",
121
+ "compassMainHeaderContent": "pf-v6-c-compass__main-header-content",
122
+ "compassMainHeaderTitle": "pf-v6-c-compass__main-header-title",
120
123
  "compassMessageBar": "pf-v6-c-compass__message-bar",
121
124
  "compassNav": "pf-v6-c-compass__nav",
125
+ "compassNavContent": "pf-v6-c-compass__nav-content",
126
+ "compassNavMain": "pf-v6-c-compass__nav-main",
122
127
  "compassPanel": "pf-v6-c-compass__panel",
123
128
  "compassProfile": "pf-v6-c-compass__profile",
124
129
  "compassSidebar": "pf-v6-c-compass__sidebar",
package/css/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.5",
3
+ "version": "6.5.0-prerelease.6",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,10 +19,10 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.5.0-prerelease.21",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.27",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.0"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "b1ae7eb5e94f906f4373f38e14d9125e5cccd1c5"
27
+ "gitHead": "eed37ddb3b4437aceb531bed2616130e6ebcc70b"
28
28
  }