@patternfly/react-styles 6.5.0-prerelease.24 → 6.5.0-prerelease.26

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/Compass/compass.css +26 -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/Page/page.css +2 -0
  7. package/css/components/Pagination/pagination.css +5 -3
  8. package/css/components/Toolbar/toolbar.css +4 -1
  9. package/css/components/_index.css +37 -26
  10. package/css/components/_index.d.ts +1 -0
  11. package/css/components/_index.js +1 -0
  12. package/css/components/_index.mjs +1 -0
  13. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,18 @@
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.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)
7
+
8
+ ### Features
9
+
10
+ - **Compass:** remove background props, update structure ([#12408](https://github.com/patternfly/patternfly-react/issues/12408)) ([5564f73](https://github.com/patternfly/patternfly-react/commit/5564f730fb899c3f8968cbcc567cbded2def367e))
11
+
12
+ # [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)
13
+
14
+ ### Features
15
+
16
+ - **react-charts:** add high contrast ([#12419](https://github.com/patternfly/patternfly-react/issues/12419)) ([e9c801c](https://github.com/patternfly/patternfly-react/commit/e9c801c84067fb9ed42d10d19deadf8dfca55289))
17
+
6
18
  # [6.5.0-prerelease.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.23...@patternfly/react-styles@6.5.0-prerelease.24) (2026-05-08)
7
19
 
8
20
  ### 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,19 @@
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
+ }
74
+ :where(.pf-v6-theme-glass) .pf-v6-c-compass {
75
+ --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
76
+ }
73
77
 
74
78
  .pf-v6-c-compass {
75
79
  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
80
  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;
81
+ background-color: var(--pf-v6-c-compass--BackgroundColor);
88
82
  }
89
- .pf-v6-c-compass.pf-m-docked {
83
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
90
84
  grid-template-areas: "header" "main";
91
85
  grid-template-rows: max-content 1fr;
92
86
  grid-template-columns: 1fr;
@@ -96,15 +90,12 @@
96
90
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
97
91
  padding: var(--pf-v6-c-compass--Padding);
98
92
  }
99
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
93
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
100
94
  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
101
95
  grid-area: header;
102
96
  }
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
97
  @media (min-width: 62rem) {
107
- .pf-v6-c-compass.pf-m-docked {
98
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
108
99
  grid-template-areas: "dock main";
109
100
  grid-template-rows: auto;
110
101
  grid-template-columns: auto 1fr;
@@ -112,7 +103,7 @@
112
103
  align-items: stretch;
113
104
  padding: 0;
114
105
  }
115
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
106
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
116
107
  display: none;
117
108
  }
118
109
  }
@@ -172,6 +163,19 @@
172
163
  }
173
164
  }
174
165
 
166
+ .pf-v6-c-compass__container {
167
+ display: grid;
168
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
169
+ grid-template-rows: auto 1fr;
170
+ grid-template-columns: auto 1fr auto;
171
+ grid-auto-rows: auto;
172
+ align-items: center;
173
+ justify-content: center;
174
+ height: 100%;
175
+ padding: var(--pf-v6-c-compass--Padding);
176
+ overflow: hidden;
177
+ }
178
+
175
179
  .pf-v6-c-compass__header,
176
180
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
177
181
  .pf-v6-c-compass__main-footer,
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/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/Pagination/pagination.css CHANGED
@@ -32,6 +32,7 @@
32
32
  --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
33
33
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
34
34
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
35
+ --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
35
36
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
36
37
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
37
38
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -49,10 +50,10 @@
49
50
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
50
51
  }
51
52
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
52
- --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
53
53
  --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
54
- --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
55
- --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
54
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
55
+ --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
56
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
56
57
  }
57
58
  .pf-v6-c-pagination {
58
59
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -168,6 +169,7 @@
168
169
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
169
170
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
170
171
  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
172
+ border-radius: var(--pf-v6-c-pagination--m-sticky--BorderRadius);
171
173
  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
172
174
  }
173
175
  .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
package/css/components/Toolbar/toolbar.css CHANGED
@@ -38,7 +38,7 @@
38
38
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
40
40
  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
41
- --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
41
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
42
42
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
43
43
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
44
44
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
@@ -331,7 +331,10 @@
331
331
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
332
332
  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
333
333
  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
334
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
335
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
334
336
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
337
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
335
338
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
336
339
  }
337
340
  .pf-v6-c-toolbar.pf-m-sticky-base {
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,19 @@ 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
+ }
3758
+ :where(.pf-v6-theme-glass) .pf-v6-c-compass {
3759
+ --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
3760
+ }
3757
3761
 
3758
3762
  .pf-v6-c-compass {
3759
3763
  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
3764
  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;
3765
+ background-color: var(--pf-v6-c-compass--BackgroundColor);
3772
3766
  }
3773
- .pf-v6-c-compass.pf-m-docked {
3767
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
3774
3768
  grid-template-areas: "header" "main";
3775
3769
  grid-template-rows: max-content 1fr;
3776
3770
  grid-template-columns: 1fr;
@@ -3780,15 +3774,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3780
3774
  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
3781
3775
  padding: var(--pf-v6-c-compass--Padding);
3782
3776
  }
3783
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
3777
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
3784
3778
  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
3785
3779
  grid-area: header;
3786
3780
  }
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
3781
  @media (min-width: 62rem) {
3791
- .pf-v6-c-compass.pf-m-docked {
3782
+ .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
3792
3783
  grid-template-areas: "dock main";
3793
3784
  grid-template-rows: auto;
3794
3785
  grid-template-columns: auto 1fr;
@@ -3796,7 +3787,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3796
3787
  align-items: stretch;
3797
3788
  padding: 0;
3798
3789
  }
3799
- .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
3790
+ .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
3800
3791
  display: none;
3801
3792
  }
3802
3793
  }
@@ -3856,6 +3847,19 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3856
3847
  }
3857
3848
  }
3858
3849
 
3850
+ .pf-v6-c-compass__container {
3851
+ display: grid;
3852
+ grid-template-areas: "header header header" "sidebar-start main sidebar-end";
3853
+ grid-template-rows: auto 1fr;
3854
+ grid-template-columns: auto 1fr auto;
3855
+ grid-auto-rows: auto;
3856
+ align-items: center;
3857
+ justify-content: center;
3858
+ height: 100%;
3859
+ padding: var(--pf-v6-c-compass--Padding);
3860
+ overflow: hidden;
3861
+ }
3862
+
3859
3863
  .pf-v6-c-compass__header,
3860
3864
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
3861
3865
  .pf-v6-c-compass__main-footer,
@@ -13877,6 +13881,7 @@ ul.pf-v6-c-list {
13877
13881
  --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13878
13882
  --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
13879
13883
  --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
13884
+ --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
13880
13885
  }
13881
13886
  :where(.pf-v6-theme-glass) .pf-v6-c-page {
13882
13887
  --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -13898,6 +13903,7 @@ ul.pf-v6-c-list {
13898
13903
  --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
13899
13904
  --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
13900
13905
  --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
13906
+ --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
13901
13907
  }
13902
13908
  @media (min-width: 75rem) {
13903
13909
  .pf-v6-c-page {
@@ -14825,6 +14831,7 @@ ul.pf-v6-c-list {
14825
14831
  --pf-v6-c-pagination--m-sticky-base--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
14826
14832
  --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14827
14833
  --pf-v6-c-pagination--m-sticky-stuck--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
14834
+ --pf-v6-c-pagination--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
14828
14835
  --pf-v6-c-pagination--m-bottom--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14829
14836
  --pf-v6-c-pagination--m-bottom--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
14830
14837
  --pf-v6-c-pagination--m-bottom--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -14842,10 +14849,10 @@ ul.pf-v6-c-list {
14842
14849
  --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: 0;
14843
14850
  }
14844
14851
  :where(:root.pf-v6-theme-glass) .pf-v6-c-pagination {
14845
- --pf-v6-c-pagination--m-sticky-base--InsetBlockStart: var(--pf-t--global--spacer--sm);
14846
14852
  --pf-v6-c-pagination--m-sticky-stuck--BorderRadius: var(--pf-t--global--border--radius--glass--default);
14847
- --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
14848
- --pf-v6-c-pagination--m-bottom--m-sticky-base--InsetBlockEnd: var(--pf-t--global--spacer--sm);
14853
+ --pf-v6-c-pagination--m-sticky-stuck--BoxShadow: var(--pf-t--global--box-shadow--sm);
14854
+ --pf-v6-c-pagination--m-sticky--BorderRadius: var(--pf-v6-c-pagination--m-sticky--BorderRadius--glass);
14855
+ --pf-v6-c-pagination--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm);
14849
14856
  }
14850
14857
  .pf-v6-c-pagination {
14851
14858
  --pf-v6-c-pagination__page-menu--Display--base: block;
@@ -14961,6 +14968,7 @@ ul.pf-v6-c-list {
14961
14968
  --pf-v6-c-pagination--m-bottom--BorderBlockStartWidth: var(--pf-v6-c-pagination--m-bottom--m-sticky--BorderBlockStartWidth);
14962
14969
  inset-block-start: var(--pf-v6-c-pagination--m-sticky--InsetBlockStart);
14963
14970
  background-color: var(--pf-v6-c-pagination--m-sticky--BackgroundColor);
14971
+ border-radius: var(--pf-v6-c-pagination--m-sticky--BorderRadius);
14964
14972
  box-shadow: var(--pf-v6-c-pagination--m-sticky--BoxShadow);
14965
14973
  }
14966
14974
  .pf-v6-c-pagination.pf-m-sticky, .pf-v6-c-pagination.pf-m-sticky-base {
@@ -22766,7 +22774,7 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
22766
22774
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
22767
22775
  --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
22768
22776
  --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
22769
- --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
22777
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
22770
22778
  --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
22771
22779
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
22772
22780
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
@@ -23059,7 +23067,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
23059
23067
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
23060
23068
  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
23061
23069
  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
23070
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
23071
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
23062
23072
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
23073
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
23063
23074
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
23064
23075
  }
23065
23076
  .pf-v6-c-toolbar.pf-m-sticky-base {
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.24",
3
+ "version": "6.5.0-prerelease.26",
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.82",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.88",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "49cdd4af567d0e44031932738edb6d05ffe68c99"
27
+ "gitHead": "41fa345ea84fbf83dcefdd1dd46333be302f005d"
28
28
  }