@patternfly/react-styles 6.5.0-prerelease.25 → 6.5.0-prerelease.27

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 +10 -0
  2. package/css/components/Compass/compass.css +50 -22
  3. package/css/components/Compass/compass.d.ts +2 -1
  4. package/css/components/Compass/compass.js +2 -1
  5. package/css/components/Compass/compass.mjs +2 -1
  6. package/css/components/Drawer/drawer.css +12 -7
  7. package/css/components/Drawer/drawer.d.ts +1 -1
  8. package/css/components/Drawer/drawer.js +1 -1
  9. package/css/components/Drawer/drawer.mjs +1 -1
  10. package/css/components/Page/page.css +2 -0
  11. package/css/components/_index.css +64 -29
  12. package/css/components/_index.d.ts +1 -0
  13. package/css/components/_index.js +1 -0
  14. package/css/components/_index.mjs +1 -0
  15. 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.27](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.26...@patternfly/react-styles@6.5.0-prerelease.27) (2026-05-13)
7
+
8
+ **Note:** Version bump only for package @patternfly/react-styles
9
+
10
+ # [6.5.0-prerelease.26](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.25...@patternfly/react-styles@6.5.0-prerelease.26) (2026-05-12)
11
+
12
+ ### Features
13
+
14
+ - **Compass:** remove background props, update structure ([#12408](https://github.com/patternfly/patternfly-react/issues/12408)) ([5564f73](https://github.com/patternfly/patternfly-react/commit/5564f730fb899c3f8968cbcc567cbded2def367e))
15
+
6
16
  # [6.5.0-prerelease.25](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.24...@patternfly/react-styles@6.5.0-prerelease.25) (2026-05-12)
7
17
 
8
18
  ### Features
package/css/components/Compass/compass.css CHANGED
@@ -1,7 +1,5 @@
1
1
  .pf-v6-c-compass {
2
- --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
3
- --pf-v6-c-compass--BackgroundImage--light: none;
4
- --pf-v6-c-compass--BackgroundImage--dark: none;
2
+ --pf-v6-c-compass--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
3
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
6
4
  --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
7
5
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -59,7 +57,7 @@
59
57
  --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
60
58
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
61
59
  }
62
- .pf-v6-c-compass.pf-m-animate-smoothly {
60
+ .pf-v6-c-compass.pf-m-animate-smoothly .pf-v6-c-compass__container {
63
61
  --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
64
62
  --pf-v6-c-compass--section--slide--length--header: 10rem;
65
63
  --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
@@ -70,23 +68,35 @@
70
68
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
71
69
  }
72
70
  }
71
+ .pf-v6-c-compass {
72
+ --pf-v6-c-compass--BackgroundColor--glass: transparent;
73
+ --pf-v6-c-compass__content--MarginBlockStart--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockStart--glass) * -1);
74
+ --pf-v6-c-compass__content--MarginBlockEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockEnd--glass) * -1);
75
+ --pf-v6-c-compass__content--MarginInlineStart--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineStart--glass) * -1);
76
+ --pf-v6-c-compass__content--MarginInlineEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineEnd--glass) * -1);
77
+ --pf-v6-c-compass__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
78
+ --pf-v6-c-compass__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
79
+ --pf-v6-c-compass__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
80
+ --pf-v6-c-compass__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
81
+ }
82
+ :where(.pf-v6-theme-glass) .pf-v6-c-compass {
83
+ --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
84
+ --pf-v6-c-compass__content--MarginBlockStart: var(--pf-v6-c-compass__content--MarginBlockStart--glass);
85
+ --pf-v6-c-compass__content--MarginBlockEnd: var(--pf-v6-c-compass__content--MarginBlockEnd--glass);
86
+ --pf-v6-c-compass__content--MarginInlineStart: var(--pf-v6-c-compass__content--MarginInlineStart--glass);
87
+ --pf-v6-c-compass__content--MarginInlineEnd: var(--pf-v6-c-compass__content--MarginInlineEnd--glass);
88
+ --pf-v6-c-compass__content--PaddingBlockStart: var(--pf-v6-c-compass__content--PaddingBlockStart--glass);
89
+ --pf-v6-c-compass__content--PaddingBlockEnd: var(--pf-v6-c-compass__content--PaddingBlockEnd--glass);
90
+ --pf-v6-c-compass__content--PaddingInlineStart: var(--pf-v6-c-compass__content--PaddingInlineStart--glass);
91
+ --pf-v6-c-compass__content--PaddingInlineEnd: var(--pf-v6-c-compass__content--PaddingInlineEnd--glass);
92
+ }
73
93
 
74
94
  .pf-v6-c-compass {
75
95
  interpolate-size: allow-keywords;
76
- display: grid;
77
- grid-template-areas: "header header header" "sidebar-start main sidebar-end";
78
- grid-template-rows: auto 1fr;
79
- grid-template-columns: auto 1fr auto;
80
- grid-auto-rows: auto;
81
- align-items: center;
82
- justify-content: center;
83
96
  height: 100dvh;
84
- padding: var(--pf-v6-c-compass--Padding);
85
- overflow: hidden;
86
- background-image: var(--pf-v6-c-compass--BackgroundImage);
87
- background-size: cover;
97
+ background-color: var(--pf-v6-c-compass--BackgroundColor);
88
98
  }
89
- .pf-v6-c-compass.pf-m-docked {
99
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
90
100
  grid-template-areas: "header" "main";
91
101
  grid-template-rows: max-content 1fr;
92
102
  grid-template-columns: 1fr;
@@ -96,15 +106,12 @@
96
106
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
97
107
  padding: var(--pf-v6-c-compass--Padding);
98
108
  }
99
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
109
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
100
110
  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
101
111
  grid-area: header;
102
112
  }
103
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
104
- --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
105
- }
106
113
  @media (min-width: 62rem) {
107
- .pf-v6-c-compass.pf-m-docked {
114
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
108
115
  grid-template-areas: "dock main";
109
116
  grid-template-rows: auto;
110
117
  grid-template-columns: auto 1fr;
@@ -112,7 +119,7 @@
112
119
  align-items: stretch;
113
120
  padding: 0;
114
121
  }
115
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
122
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
116
123
  display: none;
117
124
  }
118
125
  }
@@ -172,6 +179,19 @@
172
179
  }
173
180
  }
174
181
 
182
+ .pf-v6-c-compass__container {
183
+ display: grid;
184
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
185
+ grid-template-rows: auto 1fr;
186
+ grid-template-columns: auto 1fr auto;
187
+ grid-auto-rows: auto;
188
+ align-items: center;
189
+ justify-content: center;
190
+ height: 100%;
191
+ padding: var(--pf-v6-c-compass--Padding);
192
+ overflow: hidden;
193
+ }
194
+
175
195
  .pf-v6-c-compass__header,
176
196
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
177
197
  .pf-v6-c-compass__main-footer,
@@ -365,6 +385,14 @@
365
385
  flex: 1 0 0;
366
386
  flex-direction: column;
367
387
  min-height: 0;
388
+ padding-block-start: var(--pf-v6-c-compass__content--PaddingBlockStart, 0);
389
+ padding-block-end: var(--pf-v6-c-compass__content--PaddingBlockEnd, 0);
390
+ padding-inline-start: var(--pf-v6-c-compass__content--PaddingInlineStart, 0);
391
+ padding-inline-end: var(--pf-v6-c-compass__content--PaddingInlineEnd, 0);
392
+ margin-block-start: var(--pf-v6-c-compass__content--MarginBlockStart, 0);
393
+ margin-block-end: var(--pf-v6-c-compass__content--MarginBlockEnd, 0);
394
+ margin-inline-start: var(--pf-v6-c-compass__content--MarginInlineStart, 0);
395
+ margin-inline-end: var(--pf-v6-c-compass__content--MarginInlineEnd, 0);
368
396
  overflow: auto;
369
397
  }
370
398
  .pf-v6-c-compass__content > *:last-child {
package/css/components/Compass/compass.d.ts CHANGED
@@ -2,6 +2,7 @@ import './compass.css';
2
2
  declare const _default: {
3
3
  "button": "pf-v6-c-button",
4
4
  "compass": "pf-v6-c-compass",
5
+ "compassContainer": "pf-v6-c-compass__container",
5
6
  "compassContent": "pf-v6-c-compass__content",
6
7
  "compassDock": "pf-v6-c-compass__dock",
7
8
  "compassDockMain": "pf-v6-c-compass__dock-main",
@@ -33,7 +34,7 @@ declare const _default: {
33
34
  "vertical": "pf-m-vertical"
34
35
  },
35
36
  "panel": "pf-v6-c-panel",
36
- "themeDark": "pf-v6-theme-dark",
37
+ "themeGlass": "pf-v6-theme-glass",
37
38
  "toolbar": "pf-v6-c-toolbar",
38
39
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
39
40
  "toolbarGroup": "pf-v6-c-toolbar__group",
package/css/components/Compass/compass.js CHANGED
@@ -4,6 +4,7 @@ require('./compass.css');
4
4
  exports.default = {
5
5
  "button": "pf-v6-c-button",
6
6
  "compass": "pf-v6-c-compass",
7
+ "compassContainer": "pf-v6-c-compass__container",
7
8
  "compassContent": "pf-v6-c-compass__content",
8
9
  "compassDock": "pf-v6-c-compass__dock",
9
10
  "compassDockMain": "pf-v6-c-compass__dock-main",
@@ -35,7 +36,7 @@ exports.default = {
35
36
  "vertical": "pf-m-vertical"
36
37
  },
37
38
  "panel": "pf-v6-c-panel",
38
- "themeDark": "pf-v6-theme-dark",
39
+ "themeGlass": "pf-v6-theme-glass",
39
40
  "toolbar": "pf-v6-c-toolbar",
40
41
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
41
42
  "toolbarGroup": "pf-v6-c-toolbar__group",
package/css/components/Compass/compass.mjs CHANGED
@@ -2,6 +2,7 @@ import './compass.css';
2
2
  export default {
3
3
  "button": "pf-v6-c-button",
4
4
  "compass": "pf-v6-c-compass",
5
+ "compassContainer": "pf-v6-c-compass__container",
5
6
  "compassContent": "pf-v6-c-compass__content",
6
7
  "compassDock": "pf-v6-c-compass__dock",
7
8
  "compassDockMain": "pf-v6-c-compass__dock-main",
@@ -33,7 +34,7 @@ export default {
33
34
  "vertical": "pf-m-vertical"
34
35
  },
35
36
  "panel": "pf-v6-c-panel",
36
- "themeDark": "pf-v6-theme-dark",
37
+ "themeGlass": "pf-v6-theme-glass",
37
38
  "toolbar": "pf-v6-c-toolbar",
38
39
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
39
40
  "toolbarGroup": "pf-v6-c-toolbar__group",
package/css/components/Drawer/drawer.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .pf-v6-c-drawer {
2
- --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
2
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: 0;
3
3
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
4
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
5
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -16,7 +16,7 @@
16
16
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
17
17
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
19
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
19
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
20
20
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
21
21
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
22
22
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -35,6 +35,7 @@
35
35
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
36
36
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
37
37
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
38
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
38
39
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
39
40
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
40
41
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -227,11 +228,6 @@
227
228
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
228
229
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
229
230
  }
230
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
231
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
232
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
233
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
234
- }
235
231
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
236
232
  order: 0;
237
233
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -248,6 +244,7 @@
248
244
  flex-direction: column;
249
245
  }
250
246
  .pf-v6-c-drawer.pf-m-expanded {
247
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
251
248
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
252
249
  }
253
250
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -563,9 +560,17 @@
563
560
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
564
561
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
565
562
  }
563
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
564
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
565
+ }
566
566
  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
567
567
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
568
568
  }
569
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
570
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
571
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
572
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
573
+ }
569
574
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
570
575
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
571
576
  }
package/css/components/Drawer/drawer.d.ts CHANGED
@@ -20,7 +20,6 @@ declare const _default: {
20
20
  "static": "pf-m-static",
21
21
  "noBorder": "pf-m-no-border",
22
22
  "resizable": "pf-m-resizable",
23
- "glass": "pf-m-glass",
24
23
  "panelLeft": "pf-m-panel-left",
25
24
  "expanded": "pf-m-expanded",
26
25
  "resizing": "pf-m-resizing",
@@ -33,6 +32,7 @@ declare const _default: {
33
32
  "noPadding": "pf-m-no-padding",
34
33
  "padding": "pf-m-padding",
35
34
  "vertical": "pf-m-vertical",
35
+ "glass": "pf-m-glass",
36
36
  "width_25": "pf-m-width-25",
37
37
  "width_33": "pf-m-width-33",
38
38
  "width_50": "pf-m-width-50",
package/css/components/Drawer/drawer.js CHANGED
@@ -22,7 +22,6 @@ exports.default = {
22
22
  "static": "pf-m-static",
23
23
  "noBorder": "pf-m-no-border",
24
24
  "resizable": "pf-m-resizable",
25
- "glass": "pf-m-glass",
26
25
  "panelLeft": "pf-m-panel-left",
27
26
  "expanded": "pf-m-expanded",
28
27
  "resizing": "pf-m-resizing",
@@ -35,6 +34,7 @@ exports.default = {
35
34
  "noPadding": "pf-m-no-padding",
36
35
  "padding": "pf-m-padding",
37
36
  "vertical": "pf-m-vertical",
37
+ "glass": "pf-m-glass",
38
38
  "width_25": "pf-m-width-25",
39
39
  "width_33": "pf-m-width-33",
40
40
  "width_50": "pf-m-width-50",
package/css/components/Drawer/drawer.mjs CHANGED
@@ -20,7 +20,6 @@ export default {
20
20
  "static": "pf-m-static",
21
21
  "noBorder": "pf-m-no-border",
22
22
  "resizable": "pf-m-resizable",
23
- "glass": "pf-m-glass",
24
23
  "panelLeft": "pf-m-panel-left",
25
24
  "expanded": "pf-m-expanded",
26
25
  "resizing": "pf-m-resizing",
@@ -33,6 +32,7 @@ export default {
33
32
  "noPadding": "pf-m-no-padding",
34
33
  "padding": "pf-m-padding",
35
34
  "vertical": "pf-m-vertical",
35
+ "glass": "pf-m-glass",
36
36
  "width_25": "pf-m-width-25",
37
37
  "width_33": "pf-m-width-33",
38
38
  "width_50": "pf-m-width-50",
package/css/components/Page/page.css CHANGED
@@ -220,6 +220,7 @@
220
220
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
221
221
  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
222
222
  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
223
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
223
224
  }
224
225
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
225
226
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -241,6 +242,7 @@
241
242
  --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
242
243
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
243
244
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
245
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
244
246
  }
245
247
  @media (min-width: 75rem) {
246
248
  .pf-v6-c-page {
package/css/components/_index.css CHANGED
@@ -3683,9 +3683,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3683
3683
  }
3684
3684
 
3685
3685
  .pf-v6-c-compass {
3686
- --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
3687
- --pf-v6-c-compass--BackgroundImage--light: none;
3688
- --pf-v6-c-compass--BackgroundImage--dark: none;
3686
+ --pf-v6-c-compass--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
3689
3687
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
3690
3688
  --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
3691
3689
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -3743,7 +3741,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3743
3741
  --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
3744
3742
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
3745
3743
  }
3746
- .pf-v6-c-compass.pf-m-animate-smoothly {
3744
+ .pf-v6-c-compass.pf-m-animate-smoothly .pf-v6-c-compass__container {
3747
3745
  --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
3748
3746
  --pf-v6-c-compass--section--slide--length--header: 10rem;
3749
3747
  --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
@@ -3754,23 +3752,35 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3754
3752
  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
3755
3753
  }
3756
3754
  }
3755
+ .pf-v6-c-compass {
3756
+ --pf-v6-c-compass--BackgroundColor--glass: transparent;
3757
+ --pf-v6-c-compass__content--MarginBlockStart--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockStart--glass) * -1);
3758
+ --pf-v6-c-compass__content--MarginBlockEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingBlockEnd--glass) * -1);
3759
+ --pf-v6-c-compass__content--MarginInlineStart--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineStart--glass) * -1);
3760
+ --pf-v6-c-compass__content--MarginInlineEnd--glass: calc(var(--pf-v6-c-compass__content--PaddingInlineEnd--glass) * -1);
3761
+ --pf-v6-c-compass__content--PaddingBlockStart--glass: var(--pf-t--global--spacer--sm);
3762
+ --pf-v6-c-compass__content--PaddingBlockEnd--glass: var(--pf-t--global--spacer--md);
3763
+ --pf-v6-c-compass__content--PaddingInlineStart--glass: var(--pf-t--global--spacer--md);
3764
+ --pf-v6-c-compass__content--PaddingInlineEnd--glass: var(--pf-t--global--spacer--md);
3765
+ }
3766
+ :where(.pf-v6-theme-glass) .pf-v6-c-compass {
3767
+ --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
3768
+ --pf-v6-c-compass__content--MarginBlockStart: var(--pf-v6-c-compass__content--MarginBlockStart--glass);
3769
+ --pf-v6-c-compass__content--MarginBlockEnd: var(--pf-v6-c-compass__content--MarginBlockEnd--glass);
3770
+ --pf-v6-c-compass__content--MarginInlineStart: var(--pf-v6-c-compass__content--MarginInlineStart--glass);
3771
+ --pf-v6-c-compass__content--MarginInlineEnd: var(--pf-v6-c-compass__content--MarginInlineEnd--glass);
3772
+ --pf-v6-c-compass__content--PaddingBlockStart: var(--pf-v6-c-compass__content--PaddingBlockStart--glass);
3773
+ --pf-v6-c-compass__content--PaddingBlockEnd: var(--pf-v6-c-compass__content--PaddingBlockEnd--glass);
3774
+ --pf-v6-c-compass__content--PaddingInlineStart: var(--pf-v6-c-compass__content--PaddingInlineStart--glass);
3775
+ --pf-v6-c-compass__content--PaddingInlineEnd: var(--pf-v6-c-compass__content--PaddingInlineEnd--glass);
3776
+ }
3757
3777
 
3758
3778
  .pf-v6-c-compass {
3759
3779
  interpolate-size: allow-keywords;
3760
- display: grid;
3761
- grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3762
- grid-template-rows: auto 1fr;
3763
- grid-template-columns: auto 1fr auto;
3764
- grid-auto-rows: auto;
3765
- align-items: center;
3766
- justify-content: center;
3767
3780
  height: 100dvh;
3768
- padding: var(--pf-v6-c-compass--Padding);
3769
- overflow: hidden;
3770
- background-image: var(--pf-v6-c-compass--BackgroundImage);
3771
- background-size: cover;
3781
+ background-color: var(--pf-v6-c-compass--BackgroundColor);
3772
3782
  }
3773
- .pf-v6-c-compass.pf-m-docked {
3783
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
3774
3784
  grid-template-areas: "header" "main";
3775
3785
  grid-template-rows: max-content 1fr;
3776
3786
  grid-template-columns: 1fr;
@@ -3780,15 +3790,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3780
3790
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
3781
3791
  padding: var(--pf-v6-c-compass--Padding);
3782
3792
  }
3783
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
3793
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
3784
3794
  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
3785
3795
  grid-area: header;
3786
3796
  }
3787
- :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3788
- --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3789
- }
3790
3797
  @media (min-width: 62rem) {
3791
- .pf-v6-c-compass.pf-m-docked {
3798
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
3792
3799
  grid-template-areas: "dock main";
3793
3800
  grid-template-rows: auto;
3794
3801
  grid-template-columns: auto 1fr;
@@ -3796,7 +3803,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3796
3803
  align-items: stretch;
3797
3804
  padding: 0;
3798
3805
  }
3799
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
3806
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
3800
3807
  display: none;
3801
3808
  }
3802
3809
  }
@@ -3856,6 +3863,19 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3856
3863
  }
3857
3864
  }
3858
3865
 
3866
+ .pf-v6-c-compass__container {
3867
+ display: grid;
3868
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3869
+ grid-template-rows: auto 1fr;
3870
+ grid-template-columns: auto 1fr auto;
3871
+ grid-auto-rows: auto;
3872
+ align-items: center;
3873
+ justify-content: center;
3874
+ height: 100%;
3875
+ padding: var(--pf-v6-c-compass--Padding);
3876
+ overflow: hidden;
3877
+ }
3878
+
3859
3879
  .pf-v6-c-compass__header,
3860
3880
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3861
3881
  .pf-v6-c-compass__main-footer,
@@ -4049,6 +4069,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
4049
4069
  flex: 1 0 0;
4050
4070
  flex-direction: column;
4051
4071
  min-height: 0;
4072
+ padding-block-start: var(--pf-v6-c-compass__content--PaddingBlockStart, 0);
4073
+ padding-block-end: var(--pf-v6-c-compass__content--PaddingBlockEnd, 0);
4074
+ padding-inline-start: var(--pf-v6-c-compass__content--PaddingInlineStart, 0);
4075
+ padding-inline-end: var(--pf-v6-c-compass__content--PaddingInlineEnd, 0);
4076
+ margin-block-start: var(--pf-v6-c-compass__content--MarginBlockStart, 0);
4077
+ margin-block-end: var(--pf-v6-c-compass__content--MarginBlockEnd, 0);
4078
+ margin-inline-start: var(--pf-v6-c-compass__content--MarginInlineStart, 0);
4079
+ margin-inline-end: var(--pf-v6-c-compass__content--MarginInlineEnd, 0);
4052
4080
  overflow: auto;
4053
4081
  }
4054
4082
  .pf-v6-c-compass__content > *:last-child {
@@ -6359,7 +6387,7 @@ ul) {
6359
6387
  }
6360
6388
 
6361
6389
  .pf-v6-c-drawer {
6362
- --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
6390
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: 0;
6363
6391
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6364
6392
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6365
6393
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -6376,7 +6404,7 @@ ul) {
6376
6404
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
6377
6405
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
6378
6406
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6379
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6407
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
6380
6408
  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
6381
6409
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
6382
6410
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -6395,6 +6423,7 @@ ul) {
6395
6423
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
6396
6424
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
6397
6425
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
6426
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6398
6427
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
6399
6428
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
6400
6429
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -6587,11 +6616,6 @@ ul) {
6587
6616
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
6588
6617
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
6589
6618
  }
6590
- .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
6591
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6592
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6593
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6594
- }
6595
6619
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6596
6620
  order: 0;
6597
6621
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -6608,6 +6632,7 @@ ul) {
6608
6632
  flex-direction: column;
6609
6633
  }
6610
6634
  .pf-v6-c-drawer.pf-m-expanded {
6635
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
6611
6636
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
6612
6637
  }
6613
6638
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -6923,9 +6948,17 @@ ul) {
6923
6948
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
6924
6949
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
6925
6950
  }
6951
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
6952
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
6953
+ }
6926
6954
  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
6927
6955
  --pf-v6-c-drawer__panel--BackgroundColor: transparent;
6928
6956
  }
6957
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
6958
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6959
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6960
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6961
+ }
6929
6962
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6930
6963
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
6931
6964
  }
@@ -13877,6 +13910,7 @@ ul.pf-v6-c-list {
13877
13910
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13878
13911
  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13879
13912
  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13913
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13880
13914
  }
13881
13915
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13882
13916
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -13898,6 +13932,7 @@ ul.pf-v6-c-list {
13898
13932
  --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
13899
13933
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13900
13934
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
13935
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
13901
13936
  }
13902
13937
  @media (min-width: 75rem) {
13903
13938
  .pf-v6-c-page {
package/css/components/_index.d.ts CHANGED
@@ -113,6 +113,7 @@ declare const _default: {
113
113
  "codeEditorTabText": "pf-v6-c-code-editor__tab-text",
114
114
  "codeEditorUpload": "pf-v6-c-code-editor__upload",
115
115
  "compass": "pf-v6-c-compass",
116
+ "compassContainer": "pf-v6-c-compass__container",
116
117
  "compassContent": "pf-v6-c-compass__content",
117
118
  "compassDock": "pf-v6-c-compass__dock",
118
119
  "compassDockMain": "pf-v6-c-compass__dock-main",
package/css/components/_index.js CHANGED
@@ -115,6 +115,7 @@ exports.default = {
115
115
  "codeEditorTabText": "pf-v6-c-code-editor__tab-text",
116
116
  "codeEditorUpload": "pf-v6-c-code-editor__upload",
117
117
  "compass": "pf-v6-c-compass",
118
+ "compassContainer": "pf-v6-c-compass__container",
118
119
  "compassContent": "pf-v6-c-compass__content",
119
120
  "compassDock": "pf-v6-c-compass__dock",
120
121
  "compassDockMain": "pf-v6-c-compass__dock-main",
package/css/components/_index.mjs CHANGED
@@ -113,6 +113,7 @@ export default {
113
113
  "codeEditorTabText": "pf-v6-c-code-editor__tab-text",
114
114
  "codeEditorUpload": "pf-v6-c-code-editor__upload",
115
115
  "compass": "pf-v6-c-compass",
116
+ "compassContainer": "pf-v6-c-compass__container",
116
117
  "compassContent": "pf-v6-c-compass__content",
117
118
  "compassDock": "pf-v6-c-compass__dock",
118
119
  "compassDockMain": "pf-v6-c-compass__dock-main",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.25",
3
+ "version": "6.5.0-prerelease.27",
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.86",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.91",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "cd39fc119e43af9e8e451833f1271592f83fc0c1"
27
+ "gitHead": "2753c22c70d9a5fc5107d5fcf8c1cc2c32598d04"
28
28
  }