@patternfly/react-styles 6.5.0-prerelease.4 → 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 (15) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/css/components/Compass/compass.css +128 -47
  3. package/css/components/Compass/compass.d.ts +8 -3
  4. package/css/components/Compass/compass.js +8 -3
  5. package/css/components/Compass/compass.mjs +8 -3
  6. package/css/components/Hero/hero.css +74 -0
  7. package/css/components/Hero/hero.d.ts +11 -0
  8. package/css/components/Hero/hero.js +12 -0
  9. package/css/components/Hero/hero.mjs +10 -0
  10. package/css/components/_index.css +278 -122
  11. package/css/components/_index.d.ts +8 -2
  12. package/css/components/_index.js +8 -2
  13. package/css/components/_index.mjs +8 -2
  14. package/css/docs/components/Compass/examples/Compass.css +2 -2
  15. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
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
+
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)
17
+
18
+ ### Features
19
+
20
+ - **Hero:** added component ([#12131](https://github.com/patternfly/patternfly-react/issues/12131)) ([8da87a2](https://github.com/patternfly/patternfly-react/commit/8da87a2615bb6cfc350a52677ec6bdae335bb6f8))
21
+
6
22
  # [6.5.0-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.3...@patternfly/react-styles@6.5.0-prerelease.4) (2025-11-06)
7
23
 
8
24
  ### Features
package/css/components/Compass/compass.css CHANGED
@@ -3,46 +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;
22
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
23
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
24
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
25
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
26
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
27
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
28
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
29
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
30
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
31
- --pf-v6-c-compass__hero-body--Width: 800px;
32
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
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);
45
- margin-inline: auto;
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 {
@@ -68,6 +124,10 @@
68
124
  }
69
125
 
70
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);
71
131
  display: flex;
72
132
  flex-direction: column;
73
133
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -75,12 +135,41 @@
75
135
  justify-self: stretch;
76
136
  }
77
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
+
78
148
  .pf-v6-c-compass__sidebar {
79
- --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;
80
157
  }
81
158
  .pf-v6-c-compass__sidebar.pf-m-start {
159
+ translate: -100%;
82
160
  grid-area: sidebar-start;
83
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
+ }
84
173
 
85
174
  .pf-v6-c-compass__main {
86
175
  display: flex;
@@ -91,6 +180,15 @@
91
180
  min-height: 0;
92
181
  }
93
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
+
94
192
  .pf-v6-c-compass__content {
95
193
  display: flex;
96
194
  flex: 1 0 0;
@@ -103,15 +201,18 @@
103
201
  max-height: 100%;
104
202
  }
105
203
 
106
- .pf-v6-c-compass__sidebar.pf-m-end {
107
- grid-area: sidebar-end;
108
- 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%;
109
209
  }
110
210
 
111
211
  .pf-v6-c-compass__footer {
112
212
  display: flex;
113
- grid-area: footer;
213
+ grid-column: 1/-1;
114
214
  justify-content: center;
215
+ translate: 0 100%;
115
216
  }
116
217
 
117
218
  .pf-v6-c-compass__message-bar {
@@ -121,7 +222,10 @@
121
222
  }
122
223
 
123
224
  .pf-v6-c-compass__panel {
124
- 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);
125
229
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
126
230
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
127
231
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
@@ -144,29 +248,6 @@
144
248
  overflow: auto;
145
249
  }
146
250
 
147
- .pf-v6-c-compass__hero {
148
- display: flex;
149
- padding-block-start: 32px;
150
- padding-block-end: 32px;
151
- padding-inline-start: 72px;
152
- padding-inline-end: 0;
153
- background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
154
- background-repeat: no-repeat;
155
- background-position: right center;
156
- background-size: contain;
157
- border-radius: 24px 72px;
158
- }
159
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
160
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
161
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
162
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
163
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
164
- }
165
-
166
- .pf-v6-c-compass__hero-body {
167
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
168
- }
169
-
170
251
  /* stylelint-disable */
171
252
  @media (max-width: 1200px) {
172
253
  .pf-v6-c-compass * {
package/css/components/Compass/compass.d.ts CHANGED
@@ -4,20 +4,25 @@ declare const _default: {
4
4
  "compassContent": "pf-v6-c-compass__content",
5
5
  "compassFooter": "pf-v6-c-compass__footer",
6
6
  "compassHeader": "pf-v6-c-compass__header",
7
- "compassHero": "pf-v6-c-compass__hero",
8
- "compassHeroBody": "pf-v6-c-compass__hero-body",
9
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",
10
11
  "compassMessageBar": "pf-v6-c-compass__message-bar",
11
12
  "compassNav": "pf-v6-c-compass__nav",
13
+ "compassNavContent": "pf-v6-c-compass__nav-content",
14
+ "compassNavMain": "pf-v6-c-compass__nav-main",
12
15
  "compassPanel": "pf-v6-c-compass__panel",
13
16
  "compassProfile": "pf-v6-c-compass__profile",
14
17
  "compassSidebar": "pf-v6-c-compass__sidebar",
18
+ "dirRtl": "pf-v6-m-dir-rtl",
15
19
  "menuToggle": "pf-v6-c-menu-toggle",
16
20
  "modifiers": {
17
21
  "noGlass": "pf-m-no-glass",
18
- "plain": "pf-m-plain",
19
22
  "start": "pf-m-start",
20
23
  "end": "pf-m-end",
24
+ "expanded": "pf-m-expanded",
25
+ "plain": "pf-m-plain",
21
26
  "noBorder": "pf-m-no-border",
22
27
  "noPadding": "pf-m-no-padding",
23
28
  "fullHeight": "pf-m-full-height",
package/css/components/Compass/compass.js CHANGED
@@ -6,20 +6,25 @@ exports.default = {
6
6
  "compassContent": "pf-v6-c-compass__content",
7
7
  "compassFooter": "pf-v6-c-compass__footer",
8
8
  "compassHeader": "pf-v6-c-compass__header",
9
- "compassHero": "pf-v6-c-compass__hero",
10
- "compassHeroBody": "pf-v6-c-compass__hero-body",
11
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",
12
13
  "compassMessageBar": "pf-v6-c-compass__message-bar",
13
14
  "compassNav": "pf-v6-c-compass__nav",
15
+ "compassNavContent": "pf-v6-c-compass__nav-content",
16
+ "compassNavMain": "pf-v6-c-compass__nav-main",
14
17
  "compassPanel": "pf-v6-c-compass__panel",
15
18
  "compassProfile": "pf-v6-c-compass__profile",
16
19
  "compassSidebar": "pf-v6-c-compass__sidebar",
20
+ "dirRtl": "pf-v6-m-dir-rtl",
17
21
  "menuToggle": "pf-v6-c-menu-toggle",
18
22
  "modifiers": {
19
23
  "noGlass": "pf-m-no-glass",
20
- "plain": "pf-m-plain",
21
24
  "start": "pf-m-start",
22
25
  "end": "pf-m-end",
26
+ "expanded": "pf-m-expanded",
27
+ "plain": "pf-m-plain",
23
28
  "noBorder": "pf-m-no-border",
24
29
  "noPadding": "pf-m-no-padding",
25
30
  "fullHeight": "pf-m-full-height",
package/css/components/Compass/compass.mjs CHANGED
@@ -4,20 +4,25 @@ export default {
4
4
  "compassContent": "pf-v6-c-compass__content",
5
5
  "compassFooter": "pf-v6-c-compass__footer",
6
6
  "compassHeader": "pf-v6-c-compass__header",
7
- "compassHero": "pf-v6-c-compass__hero",
8
- "compassHeroBody": "pf-v6-c-compass__hero-body",
9
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",
10
11
  "compassMessageBar": "pf-v6-c-compass__message-bar",
11
12
  "compassNav": "pf-v6-c-compass__nav",
13
+ "compassNavContent": "pf-v6-c-compass__nav-content",
14
+ "compassNavMain": "pf-v6-c-compass__nav-main",
12
15
  "compassPanel": "pf-v6-c-compass__panel",
13
16
  "compassProfile": "pf-v6-c-compass__profile",
14
17
  "compassSidebar": "pf-v6-c-compass__sidebar",
18
+ "dirRtl": "pf-v6-m-dir-rtl",
15
19
  "menuToggle": "pf-v6-c-menu-toggle",
16
20
  "modifiers": {
17
21
  "noGlass": "pf-m-no-glass",
18
- "plain": "pf-m-plain",
19
22
  "start": "pf-m-start",
20
23
  "end": "pf-m-end",
24
+ "expanded": "pf-m-expanded",
25
+ "plain": "pf-m-plain",
21
26
  "noBorder": "pf-m-no-border",
22
27
  "noPadding": "pf-m-no-padding",
23
28
  "fullHeight": "pf-m-full-height",
package/css/components/Hero/hero.css ADDED
@@ -0,0 +1,74 @@
1
+ .pf-v6-c-hero {
2
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
3
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
4
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
5
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
6
+ --pf-v6-c-hero--gradient--angle: 109deg;
7
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
9
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
10
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
11
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
12
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
13
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
14
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
15
+ --pf-v6-c-hero--BackgroundImage--light: none;
16
+ --pf-v6-c-hero--BackgroundImage--dark: none;
17
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
18
+ --pf-v6-c-hero--BackgroundPosition: right center;
19
+ --pf-v6-c-hero--BackgroundSize: contain;
20
+ --pf-v6-c-hero--BorderStyle: solid;
21
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
22
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
23
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
24
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
25
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
26
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
27
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
28
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
29
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
30
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
31
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
32
+ --pf-v6-c-hero__body--Width: 800px;
33
+ --pf-v6-c-hero__body--MaxWidth: 80%;
34
+ }
35
+
36
+ .pf-v6-c-hero {
37
+ display: flex;
38
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
39
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
40
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
41
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
42
+ background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
43
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
44
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
45
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
46
+ border-color: var(--pf-v6-c-hero--BorderColor);
47
+ border-style: var(--pf-v6-c-hero--BorderStyle);
48
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
49
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
50
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
51
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
52
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
53
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
54
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
55
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
56
+ }
57
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
58
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
59
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
60
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
61
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
62
+ }
63
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
64
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
65
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
66
+ }
67
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
68
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
69
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
70
+ }
71
+
72
+ .pf-v6-c-hero__body {
73
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
74
+ }
package/css/components/Hero/hero.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import './hero.css';
2
+ declare const _default: {
3
+ "hero": "pf-v6-c-hero",
4
+ "heroBody": "pf-v6-c-hero__body",
5
+ "modifiers": {
6
+ "noGlass": "pf-m-no-glass"
7
+ },
8
+ "themeDark": "pf-v6-theme-dark",
9
+ "themeGlass": "pf-v6-theme-glass"
10
+ };
11
+ export default _default;
package/css/components/Hero/hero.js ADDED
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ require('./hero.css');
4
+ exports.default = {
5
+ "hero": "pf-v6-c-hero",
6
+ "heroBody": "pf-v6-c-hero__body",
7
+ "modifiers": {
8
+ "noGlass": "pf-m-no-glass"
9
+ },
10
+ "themeDark": "pf-v6-theme-dark",
11
+ "themeGlass": "pf-v6-theme-glass"
12
+ };
package/css/components/Hero/hero.mjs ADDED
@@ -0,0 +1,10 @@
1
+ import './hero.css';
2
+ export default {
3
+ "hero": "pf-v6-c-hero",
4
+ "heroBody": "pf-v6-c-hero__body",
5
+ "modifiers": {
6
+ "noGlass": "pf-m-no-glass"
7
+ },
8
+ "themeDark": "pf-v6-theme-dark",
9
+ "themeGlass": "pf-v6-theme-glass"
10
+ };
package/css/components/_index.css CHANGED
@@ -3512,46 +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;
3531
- --pf-v6-c-compass__hero--gradient--angle: 109deg;
3532
- --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
3533
- --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
3534
- --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
3535
- --pf-v6-c-compass__hero--gradient--stop-1--dark: transparent;
3536
- --pf-v6-c-compass__hero--gradient--stop-2--dark: transparent;
3537
- --pf-v6-c-compass__hero--gradient--stop-3--dark: transparent;
3538
- --pf-v6-c-compass__hero--BackgroundImage--light: none;
3539
- --pf-v6-c-compass__hero--BackgroundImage--dark: none;
3540
- --pf-v6-c-compass__hero-body--Width: 800px;
3541
- --pf-v6-c-compass__hero-body--MaxWidth: 80%;
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);
3554
- margin-inline: auto;
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 {
@@ -3577,6 +3633,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3577
3633
  }
3578
3634
 
3579
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);
3580
3640
  display: flex;
3581
3641
  flex-direction: column;
3582
3642
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3584,12 +3644,41 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3584
3644
  justify-self: stretch;
3585
3645
  }
3586
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
+
3587
3657
  .pf-v6-c-compass__sidebar {
3588
- --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;
3589
3666
  }
3590
3667
  .pf-v6-c-compass__sidebar.pf-m-start {
3668
+ translate: -100%;
3591
3669
  grid-area: sidebar-start;
3592
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
+ }
3593
3682
 
3594
3683
  .pf-v6-c-compass__main {
3595
3684
  display: flex;
@@ -3600,6 +3689,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3600
3689
  min-height: 0;
3601
3690
  }
3602
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
+
3603
3701
  .pf-v6-c-compass__content {
3604
3702
  display: flex;
3605
3703
  flex: 1 0 0;
@@ -3612,15 +3710,18 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3612
3710
  max-height: 100%;
3613
3711
  }
3614
3712
 
3615
- .pf-v6-c-compass__sidebar.pf-m-end {
3616
- grid-area: sidebar-end;
3617
- 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%;
3618
3718
  }
3619
3719
 
3620
3720
  .pf-v6-c-compass__footer {
3621
3721
  display: flex;
3622
- grid-area: footer;
3722
+ grid-column: 1/-1;
3623
3723
  justify-content: center;
3724
+ translate: 0 100%;
3624
3725
  }
3625
3726
 
3626
3727
  .pf-v6-c-compass__message-bar {
@@ -3630,7 +3731,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3630
3731
  }
3631
3732
 
3632
3733
  .pf-v6-c-compass__panel {
3633
- 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);
3634
3738
  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3635
3739
  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3636
3740
  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
@@ -3653,29 +3757,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3653
3757
  overflow: auto;
3654
3758
  }
3655
3759
 
3656
- .pf-v6-c-compass__hero {
3657
- display: flex;
3658
- padding-block-start: 32px;
3659
- padding-block-end: 32px;
3660
- padding-inline-start: 72px;
3661
- padding-inline-end: 0;
3662
- background-image: var(--pf-v6-c-compass__hero--BackgroundImage, var(--pf-v6-c-compass__hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-compass__hero--gradient--angle), var(--pf-v6-c-compass__hero--gradient--stop-1, var(--pf-v6-c-compass__hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-compass__hero--gradient--stop-2, var(--pf-v6-c-compass__hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-compass__hero--gradient--stop-3, var(--pf-v6-c-compass__hero--gradient--stop-3--light)) 100%);
3663
- background-repeat: no-repeat;
3664
- background-position: right center;
3665
- background-size: contain;
3666
- border-radius: 24px 72px;
3667
- }
3668
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass__hero {
3669
- --pf-v6-c-compass__hero--BackgroundImage: var(--pf-v6-c-compass__hero--BackgroundImage--dark);
3670
- --pf-v6-c-compass__hero--gradient--stop-1: var(--pf-v6-c-compass__hero--gradient--stop-1--dark);
3671
- --pf-v6-c-compass__hero--gradient--stop-2: var(--pf-v6-c-compass__hero--gradient--stop-2--dark);
3672
- --pf-v6-c-compass__hero--gradient--stop-3: var(--pf-v6-c-compass__hero--gradient--stop-3--dark);
3673
- }
3674
-
3675
- .pf-v6-c-compass__hero-body {
3676
- width: min(var(--pf-v6-c-compass__hero-body--Width), var(--pf-v6-c-compass__hero-body--MaxWidth));
3677
- }
3678
-
3679
3760
  /* stylelint-disable */
3680
3761
  @media (max-width: 1200px) {
3681
3762
  .pf-v6-c-compass * {
@@ -8130,81 +8211,6 @@ ul) {
8130
8211
  pointer-events: none;
8131
8212
  }
8132
8213
 
8133
- .pf-v6-c-hint {
8134
- --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8135
- --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8136
- --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8137
- --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8138
- --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8139
- --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8140
- --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8141
- --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8142
- --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8143
- --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8144
- --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8145
- --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8146
- --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8147
- --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8148
- --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8149
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8150
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8151
- }
8152
-
8153
- .pf-v6-c-hint {
8154
- display: grid;
8155
- grid-template-columns: 1fr auto;
8156
- grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8157
- padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8158
- padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8159
- padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8160
- padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8161
- color: var(--pf-v6-c-hint--Color);
8162
- background-color: var(--pf-v6-c-hint--BackgroundColor);
8163
- border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8164
- border-radius: var(--pf-v6-c-hint--BorderRadius);
8165
- }
8166
- .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8167
- text-align: start;
8168
- white-space: normal;
8169
- }
8170
-
8171
- .pf-v6-c-hint__actions {
8172
- display: inline-grid;
8173
- grid-row: 1;
8174
- grid-column: 2;
8175
- grid-auto-flow: column;
8176
- align-self: start;
8177
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8178
- margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8179
- margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8180
- text-align: end;
8181
- }
8182
- .pf-v6-c-hint__actions.pf-m-no-offset {
8183
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8184
- --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8185
- }
8186
- .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8187
- grid-column: 1;
8188
- }
8189
-
8190
- .pf-v6-c-hint__title {
8191
- align-self: center;
8192
- font-weight: var(--pf-v6-c-hint__title--FontWeight);
8193
- }
8194
-
8195
- .pf-v6-c-hint__body {
8196
- grid-column: 1/-1;
8197
- font-size: var(--pf-v6-c-hint__body--FontSize);
8198
- }
8199
-
8200
- .pf-v6-c-hint__footer {
8201
- grid-column: 1/-1;
8202
- margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8203
- }
8204
- .pf-v6-c-hint__footer > :not(:last-child) {
8205
- margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8206
- }
8207
-
8208
8214
  .pf-v6-c-helper-text {
8209
8215
  --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
8210
8216
  --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);
@@ -8290,6 +8296,156 @@ ul) {
8290
8296
  color: var(--pf-v6-c-helper-text__item-text--Color);
8291
8297
  }
8292
8298
 
8299
+ .pf-v6-c-hero {
8300
+ --pf-v6-c-hero--PaddingBlockStart: var(--pf-t--global--spacer--xl);
8301
+ --pf-v6-c-hero--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
8302
+ --pf-v6-c-hero--PaddingInlineStart: var(--pf-t--global--spacer--3xl);
8303
+ --pf-v6-c-hero--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
8304
+ --pf-v6-c-hero--gradient--angle: 109deg;
8305
+ --pf-v6-c-hero--gradient--stop-1--light: transparent;
8306
+ --pf-v6-c-hero--gradient--stop-2--light: transparent;
8307
+ --pf-v6-c-hero--gradient--stop-3--light: transparent;
8308
+ --pf-v6-c-hero--gradient--stop-1--dark: transparent;
8309
+ --pf-v6-c-hero--gradient--stop-2--dark: transparent;
8310
+ --pf-v6-c-hero--gradient--stop-3--dark: transparent;
8311
+ --pf-v6-c-hero--BackgroundColor: var(--pf-t--global--background--color--glass--default);
8312
+ --pf-v6-c-hero--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
8313
+ --pf-v6-c-hero--BackgroundImage--light: none;
8314
+ --pf-v6-c-hero--BackgroundImage--dark: none;
8315
+ --pf-v6-c-hero--BackgroundRepeat: no-repeat;
8316
+ --pf-v6-c-hero--BackgroundPosition: right center;
8317
+ --pf-v6-c-hero--BackgroundSize: contain;
8318
+ --pf-v6-c-hero--BorderStyle: solid;
8319
+ --pf-v6-c-hero--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
8320
+ --pf-v6-c-hero--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
8321
+ --pf-v6-c-hero--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
8322
+ --pf-v6-c-hero--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
8323
+ --pf-v6-c-hero--BorderColor: var(--pf-t--global--border--color--default);
8324
+ --pf-v6-c-hero--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
8325
+ --pf-v6-c-hero--m-glass--BoxShadow: var(--pf-t--global--box-shadow--md);
8326
+ --pf-v6-c-hero--BorderStartStartRadius: 24px;
8327
+ --pf-v6-c-hero--BorderStartEndRadius: 72px;
8328
+ --pf-v6-c-hero--BorderEndEndRadius: 24px;
8329
+ --pf-v6-c-hero--BorderEndStartRadius: 72px;
8330
+ --pf-v6-c-hero__body--Width: 800px;
8331
+ --pf-v6-c-hero__body--MaxWidth: 80%;
8332
+ }
8333
+
8334
+ .pf-v6-c-hero {
8335
+ display: flex;
8336
+ padding-block-start: var(--pf-v6-c-hero--PaddingBlockStart);
8337
+ padding-block-end: var(--pf-v6-c-hero--PaddingBlockEnd);
8338
+ padding-inline-start: var(--pf-v6-c-hero--PaddingInlineStart);
8339
+ padding-inline-end: var(--pf-v6-c-hero--PaddingInlineEnd);
8340
+ background-image: var(--pf-v6-c-hero--BackgroundImage, var(--pf-v6-c-hero--BackgroundImage--light)), linear-gradient(var(--pf-v6-c-hero--gradient--angle), var(--pf-v6-c-hero--gradient--stop-1, var(--pf-v6-c-hero--gradient--stop-1--light)) 0%, var(--pf-v6-c-hero--gradient--stop-2, var(--pf-v6-c-hero--gradient--stop-2--light)) 50%, var(--pf-v6-c-hero--gradient--stop-3, var(--pf-v6-c-hero--gradient--stop-3--light)) 100%);
8341
+ background-repeat: var(--pf-v6-c-hero--BackgroundRepeat);
8342
+ background-position: var(--pf-v6-c-hero--BackgroundPosition);
8343
+ background-size: var(--pf-v6-c-hero--BackgroundSize);
8344
+ border-color: var(--pf-v6-c-hero--BorderColor);
8345
+ border-style: var(--pf-v6-c-hero--BorderStyle);
8346
+ border-block-start-width: var(--pf-v6-c-hero--BorderBlockStartWidth);
8347
+ border-block-end-width: var(--pf-v6-c-hero--BorderBlockEndWidth);
8348
+ border-inline-start-width: var(--pf-v6-c-hero--BorderInlineStartWidth);
8349
+ border-inline-end-width: var(--pf-v6-c-hero--BorderInlineEndWidth);
8350
+ border-start-start-radius: var(--pf-v6-c-hero--BorderStartStartRadius);
8351
+ border-start-end-radius: var(--pf-v6-c-hero--BorderStartEndRadius);
8352
+ border-end-start-radius: var(--pf-v6-c-hero--BorderEndStartRadius);
8353
+ border-end-end-radius: var(--pf-v6-c-hero--BorderEndEndRadius);
8354
+ }
8355
+ :root:where(.pf-v6-theme-dark) .pf-v6-c-hero {
8356
+ --pf-v6-c-hero--BackgroundImage: var(--pf-v6-c-hero--BackgroundImage--dark);
8357
+ --pf-v6-c-hero--gradient--stop-1: var(--pf-v6-c-hero--gradient--stop-1--dark);
8358
+ --pf-v6-c-hero--gradient--stop-2: var(--pf-v6-c-hero--gradient--stop-2--dark);
8359
+ --pf-v6-c-hero--gradient--stop-3: var(--pf-v6-c-hero--gradient--stop-3--dark);
8360
+ }
8361
+ :root:where(.pf-v6-theme-glass) .pf-v6-c-hero {
8362
+ --pf-v6-c-hero--BorderColor: var(--pf-v6-c-hero--m-glass--BorderColor);
8363
+ box-shadow: var(--pf-v6-c-hero--m-glass--BoxShadow);
8364
+ }
8365
+ .pf-v6-c-hero:not(.pf-m-no-glass) {
8366
+ background-color: var(--pf-v6-c-hero--BackgroundColor);
8367
+ backdrop-filter: var(--pf-v6-c-hero--BackdropFilter);
8368
+ }
8369
+
8370
+ .pf-v6-c-hero__body {
8371
+ width: min(var(--pf-v6-c-hero__body--Width), var(--pf-v6-c-hero__body--MaxWidth));
8372
+ }
8373
+
8374
+ .pf-v6-c-hint {
8375
+ --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
8376
+ --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8377
+ --pf-v6-c-hint--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
8378
+ --pf-v6-c-hint--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
8379
+ --pf-v6-c-hint--PaddingInlineStart: var(--pf-t--global--spacer--lg);
8380
+ --pf-v6-c-hint--BackgroundColor: var(--pf-t--global--background--color--primary--default);
8381
+ --pf-v6-c-hint--BorderColor: var(--pf-t--global--border--color--status--info--default);
8382
+ --pf-v6-c-hint--BorderWidth: var(--pf-t--global--border--width--box--status--default);
8383
+ --pf-v6-c-hint--BorderRadius: var(--pf-t--global--border--radius--medium);
8384
+ --pf-v6-c-hint--Color: var(--pf-t--global--text--color--regular);
8385
+ --pf-v6-c-hint__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
8386
+ --pf-v6-c-hint__body--FontSize: var(--pf-t--global--font--size--body--default);
8387
+ --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
8388
+ --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
8389
+ --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
8390
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8391
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
8392
+ }
8393
+
8394
+ .pf-v6-c-hint {
8395
+ display: grid;
8396
+ grid-template-columns: 1fr auto;
8397
+ grid-row-gap: var(--pf-v6-c-hint--GridRowGap);
8398
+ padding-block-start: var(--pf-v6-c-hint--PaddingBlockStart);
8399
+ padding-block-end: var(--pf-v6-c-hint--PaddingBlockEnd);
8400
+ padding-inline-start: var(--pf-v6-c-hint--PaddingInlineStart);
8401
+ padding-inline-end: var(--pf-v6-c-hint--PaddingInlineEnd);
8402
+ color: var(--pf-v6-c-hint--Color);
8403
+ background-color: var(--pf-v6-c-hint--BackgroundColor);
8404
+ border: var(--pf-v6-c-hint--BorderWidth) solid var(--pf-v6-c-hint--BorderColor);
8405
+ border-radius: var(--pf-v6-c-hint--BorderRadius);
8406
+ }
8407
+ .pf-v6-c-hint .pf-v6-c-button.pf-m-link.pf-m-inline {
8408
+ text-align: start;
8409
+ white-space: normal;
8410
+ }
8411
+
8412
+ .pf-v6-c-hint__actions {
8413
+ display: inline-grid;
8414
+ grid-row: 1;
8415
+ grid-column: 2;
8416
+ grid-auto-flow: column;
8417
+ align-self: start;
8418
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
8419
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
8420
+ margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
8421
+ text-align: end;
8422
+ }
8423
+ .pf-v6-c-hint__actions.pf-m-no-offset {
8424
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
8425
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
8426
+ }
8427
+ .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
8428
+ grid-column: 1;
8429
+ }
8430
+
8431
+ .pf-v6-c-hint__title {
8432
+ align-self: center;
8433
+ font-weight: var(--pf-v6-c-hint__title--FontWeight);
8434
+ }
8435
+
8436
+ .pf-v6-c-hint__body {
8437
+ grid-column: 1/-1;
8438
+ font-size: var(--pf-v6-c-hint__body--FontSize);
8439
+ }
8440
+
8441
+ .pf-v6-c-hint__footer {
8442
+ grid-column: 1/-1;
8443
+ margin-block-start: var(--pf-v6-c-hint__footer--MarginBlockStart);
8444
+ }
8445
+ .pf-v6-c-hint__footer > :not(:last-child) {
8446
+ margin-inline-end: var(--pf-v6-c-hint__footer--child--MarginInlineEnd);
8447
+ }
8448
+
8293
8449
  .pf-v6-c-icon {
8294
8450
  --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
8295
8451
  --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);
package/css/components/_index.d.ts CHANGED
@@ -116,11 +116,14 @@ declare const _default: {
116
116
  "compassContent": "pf-v6-c-compass__content",
117
117
  "compassFooter": "pf-v6-c-compass__footer",
118
118
  "compassHeader": "pf-v6-c-compass__header",
119
- "compassHero": "pf-v6-c-compass__hero",
120
- "compassHeroBody": "pf-v6-c-compass__hero-body",
121
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",
122
123
  "compassMessageBar": "pf-v6-c-compass__message-bar",
123
124
  "compassNav": "pf-v6-c-compass__nav",
125
+ "compassNavContent": "pf-v6-c-compass__nav-content",
126
+ "compassNavMain": "pf-v6-c-compass__nav-main",
124
127
  "compassPanel": "pf-v6-c-compass__panel",
125
128
  "compassProfile": "pf-v6-c-compass__profile",
126
129
  "compassSidebar": "pf-v6-c-compass__sidebar",
@@ -259,6 +262,8 @@ declare const _default: {
259
262
  "helperTextItem": "pf-v6-c-helper-text__item",
260
263
  "helperTextItemIcon": "pf-v6-c-helper-text__item-icon",
261
264
  "helperTextItemText": "pf-v6-c-helper-text__item-text",
265
+ "hero": "pf-v6-c-hero",
266
+ "heroBody": "pf-v6-c-hero__body",
262
267
  "hint": "pf-v6-c-hint",
263
268
  "hintActions": "pf-v6-c-hint__actions",
264
269
  "hintBody": "pf-v6-c-hint__body",
@@ -1350,6 +1355,7 @@ declare const _default: {
1350
1355
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1351
1356
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1352
1357
  "themeDark": "pf-v6-theme-dark",
1358
+ "themeGlass": "pf-v6-theme-glass",
1353
1359
  "tile": "pf-v6-c-tile",
1354
1360
  "tileBody": "pf-v6-c-tile__body",
1355
1361
  "tileHeader": "pf-v6-c-tile__header",
package/css/components/_index.js CHANGED
@@ -118,11 +118,14 @@ exports.default = {
118
118
  "compassContent": "pf-v6-c-compass__content",
119
119
  "compassFooter": "pf-v6-c-compass__footer",
120
120
  "compassHeader": "pf-v6-c-compass__header",
121
- "compassHero": "pf-v6-c-compass__hero",
122
- "compassHeroBody": "pf-v6-c-compass__hero-body",
123
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",
124
125
  "compassMessageBar": "pf-v6-c-compass__message-bar",
125
126
  "compassNav": "pf-v6-c-compass__nav",
127
+ "compassNavContent": "pf-v6-c-compass__nav-content",
128
+ "compassNavMain": "pf-v6-c-compass__nav-main",
126
129
  "compassPanel": "pf-v6-c-compass__panel",
127
130
  "compassProfile": "pf-v6-c-compass__profile",
128
131
  "compassSidebar": "pf-v6-c-compass__sidebar",
@@ -261,6 +264,8 @@ exports.default = {
261
264
  "helperTextItem": "pf-v6-c-helper-text__item",
262
265
  "helperTextItemIcon": "pf-v6-c-helper-text__item-icon",
263
266
  "helperTextItemText": "pf-v6-c-helper-text__item-text",
267
+ "hero": "pf-v6-c-hero",
268
+ "heroBody": "pf-v6-c-hero__body",
264
269
  "hint": "pf-v6-c-hint",
265
270
  "hintActions": "pf-v6-c-hint__actions",
266
271
  "hintBody": "pf-v6-c-hint__body",
@@ -1352,6 +1357,7 @@ exports.default = {
1352
1357
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1353
1358
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1354
1359
  "themeDark": "pf-v6-theme-dark",
1360
+ "themeGlass": "pf-v6-theme-glass",
1355
1361
  "tile": "pf-v6-c-tile",
1356
1362
  "tileBody": "pf-v6-c-tile__body",
1357
1363
  "tileHeader": "pf-v6-c-tile__header",
package/css/components/_index.mjs CHANGED
@@ -116,11 +116,14 @@ export default {
116
116
  "compassContent": "pf-v6-c-compass__content",
117
117
  "compassFooter": "pf-v6-c-compass__footer",
118
118
  "compassHeader": "pf-v6-c-compass__header",
119
- "compassHero": "pf-v6-c-compass__hero",
120
- "compassHeroBody": "pf-v6-c-compass__hero-body",
121
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",
122
123
  "compassMessageBar": "pf-v6-c-compass__message-bar",
123
124
  "compassNav": "pf-v6-c-compass__nav",
125
+ "compassNavContent": "pf-v6-c-compass__nav-content",
126
+ "compassNavMain": "pf-v6-c-compass__nav-main",
124
127
  "compassPanel": "pf-v6-c-compass__panel",
125
128
  "compassProfile": "pf-v6-c-compass__profile",
126
129
  "compassSidebar": "pf-v6-c-compass__sidebar",
@@ -259,6 +262,8 @@ export default {
259
262
  "helperTextItem": "pf-v6-c-helper-text__item",
260
263
  "helperTextItemIcon": "pf-v6-c-helper-text__item-icon",
261
264
  "helperTextItemText": "pf-v6-c-helper-text__item-text",
265
+ "hero": "pf-v6-c-hero",
266
+ "heroBody": "pf-v6-c-hero__body",
262
267
  "hint": "pf-v6-c-hint",
263
268
  "hintActions": "pf-v6-c-hint__actions",
264
269
  "hintBody": "pf-v6-c-hint__body",
@@ -1350,6 +1355,7 @@ export default {
1350
1355
  "textInputGroupTextInput": "pf-v6-c-text-input-group__text-input",
1351
1356
  "textInputGroupUtilities": "pf-v6-c-text-input-group__utilities",
1352
1357
  "themeDark": "pf-v6-theme-dark",
1358
+ "themeGlass": "pf-v6-theme-glass",
1353
1359
  "tile": "pf-v6-c-tile",
1354
1360
  "tileBody": "pf-v6-c-tile__body",
1355
1361
  "tileHeader": "pf-v6-c-tile__header",
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.4",
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.19",
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": "3fe4262830dc7bbeea2360dfc8a9c584cf752520"
27
+ "gitHead": "eed37ddb3b4437aceb531bed2616130e6ebcc70b"
28
28
  }