@patternfly/react-styles 6.5.0-prerelease.18 → 6.5.0-prerelease.19

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 (19) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/css/components/Compass/compass.css +13 -78
  3. package/css/components/Compass/compass.d.ts +2 -9
  4. package/css/components/Compass/compass.js +2 -9
  5. package/css/components/Compass/compass.mjs +2 -9
  6. package/css/components/Panel/panel.css +28 -4
  7. package/css/components/Panel/panel.d.ts +7 -2
  8. package/css/components/Panel/panel.js +7 -2
  9. package/css/components/Panel/panel.mjs +7 -2
  10. package/css/components/_index.css +40 -80
  11. package/css/components/_index.d.ts +5 -6
  12. package/css/components/_index.js +5 -6
  13. package/css/components/_index.mjs +5 -6
  14. package/css/docs/components/Compass/examples/Compass.css +2 -2
  15. package/css/docs/components/Panel/examples/Panel.css +3 -0
  16. package/css/docs/components/Panel/examples/Panel.d.ts +5 -0
  17. package/css/docs/components/Panel/examples/Panel.js +6 -0
  18. package/css/docs/components/Panel/examples/Panel.mjs +4 -0
  19. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
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.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.18...@patternfly/react-styles@6.5.0-prerelease.19) (2026-04-24)
7
+
8
+ ### Features
9
+
10
+ - **Panel, CompassPanel:** Removed CompassPanel component. Updated Panel component for use in with compass ([#12372](https://github.com/patternfly/patternfly-react/issues/12372)) ([51f4467](https://github.com/patternfly/patternfly-react/commit/51f44678475ed6cbfab6b5cdbad712a5e2535235))
11
+
6
12
  # [6.5.0-prerelease.18](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.5.0-prerelease.17...@patternfly/react-styles@6.5.0-prerelease.18) (2026-04-20)
7
13
 
8
14
  **Note:** Version bump only for package @patternfly/react-styles
package/css/components/Compass/compass.css CHANGED
@@ -19,17 +19,6 @@
19
19
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
20
20
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
21
21
  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
22
- --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
23
- --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
24
- --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
25
- --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
26
- --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
27
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
28
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
29
- --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
30
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
31
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
32
- --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
33
22
  --pf-v6-c-compass__message-bar--Width: 450px;
34
23
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
35
24
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
@@ -92,9 +81,6 @@
92
81
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
93
82
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
94
83
  }
95
- .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
96
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
97
- }
98
84
 
99
85
  .pf-v6-c-compass__header,
100
86
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -148,11 +134,13 @@
148
134
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
149
135
  }
150
136
 
137
+ .pf-v6-c-compass__nav .pf-v6-c-panel {
138
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
139
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
140
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
141
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
142
+ }
151
143
  .pf-v6-c-compass__nav {
152
- --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
153
- --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
154
- --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
155
- --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
156
144
  display: flex;
157
145
  flex-direction: column;
158
146
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -170,11 +158,13 @@
170
158
  padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
171
159
  }
172
160
 
161
+ .pf-v6-c-compass__sidebar .pf-v6-c-panel {
162
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
163
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
164
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
165
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
166
+ }
173
167
  .pf-v6-c-compass__sidebar {
174
- --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
175
- --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
176
- --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
177
- --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
178
168
  display: flex;
179
169
  width: 0;
180
170
  }
@@ -262,59 +252,4 @@
262
252
  width: var(--pf-v6-c-compass__message-bar--Width);
263
253
  min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
264
254
  max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
265
- }
266
-
267
- .pf-v6-c-compass__panel {
268
- padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
269
- padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
270
- padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
271
- padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
272
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
273
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
274
- border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
275
- border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
276
- box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
277
- }
278
- .pf-v6-c-compass__panel.pf-m-no-border {
279
- border-width: 0;
280
- }
281
- .pf-v6-c-compass__panel.pf-m-no-padding {
282
- padding: 0;
283
- }
284
- .pf-v6-c-compass__panel.pf-m-full-height {
285
- height: 100%;
286
- }
287
- .pf-v6-c-compass__panel.pf-m-pill {
288
- border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
289
- }
290
- .pf-v6-c-compass__panel.pf-m-scrollable {
291
- overflow: auto;
292
- }
293
-
294
- /* stylelint-disable */
295
- @media (max-width: 1200px) {
296
- .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
297
- position: relative;
298
- display: grid;
299
- grid-template-columns: auto;
300
- grid-template-rows: auto;
301
- place-content: center;
302
- gap: 0;
303
- }
304
- .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
305
- padding: 1em;
306
- border-radius: var(--pf-t--global--border--radius--large);
307
- background: var(--pf-t--global--background--color--primary--default);
308
- content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
309
- width: 80%;
310
- width: 300px;
311
- border: 1px solid var(--pf-t--global--border--color--default);
312
- box-shadow: var(--pf-t--global--box-shadow--md);
313
- white-space: pre-wrap;
314
- text-align: center;
315
- }
316
- .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
317
- display: none;
318
- }
319
- }
320
- /* stylelint-enable */
255
+ }
package/css/components/Compass/compass.d.ts CHANGED
@@ -12,7 +12,6 @@ declare const _default: {
12
12
  "compassNav": "pf-v6-c-compass__nav",
13
13
  "compassNavContent": "pf-v6-c-compass__nav-content",
14
14
  "compassNavMain": "pf-v6-c-compass__nav-main",
15
- "compassPanel": "pf-v6-c-compass__panel",
16
15
  "compassProfile": "pf-v6-c-compass__profile",
17
16
  "compassSidebar": "pf-v6-c-compass__sidebar",
18
17
  "dirRtl": "pf-v6-m-dir-rtl",
@@ -20,18 +19,12 @@ declare const _default: {
20
19
  "modifiers": {
21
20
  "animateSmoothly": "pf-m-animate-smoothly",
22
21
  "docked": "pf-m-docked",
23
- "noGlass": "pf-m-no-glass",
24
22
  "start": "pf-m-start",
25
23
  "end": "pf-m-end",
26
24
  "expanded": "pf-m-expanded",
27
- "plain": "pf-m-plain",
28
- "noBorder": "pf-m-no-border",
29
- "noPadding": "pf-m-no-padding",
30
- "fullHeight": "pf-m-full-height",
31
- "pill": "pf-m-pill",
32
- "scrollable": "pf-m-scrollable",
33
- "noScreenWarning": "pf-m-no-screen-warning"
25
+ "plain": "pf-m-plain"
34
26
  },
27
+ "panel": "pf-v6-c-panel",
35
28
  "themeDark": "pf-v6-theme-dark"
36
29
  };
37
30
  export default _default;
package/css/components/Compass/compass.js CHANGED
@@ -14,7 +14,6 @@ exports.default = {
14
14
  "compassNav": "pf-v6-c-compass__nav",
15
15
  "compassNavContent": "pf-v6-c-compass__nav-content",
16
16
  "compassNavMain": "pf-v6-c-compass__nav-main",
17
- "compassPanel": "pf-v6-c-compass__panel",
18
17
  "compassProfile": "pf-v6-c-compass__profile",
19
18
  "compassSidebar": "pf-v6-c-compass__sidebar",
20
19
  "dirRtl": "pf-v6-m-dir-rtl",
@@ -22,17 +21,11 @@ exports.default = {
22
21
  "modifiers": {
23
22
  "animateSmoothly": "pf-m-animate-smoothly",
24
23
  "docked": "pf-m-docked",
25
- "noGlass": "pf-m-no-glass",
26
24
  "start": "pf-m-start",
27
25
  "end": "pf-m-end",
28
26
  "expanded": "pf-m-expanded",
29
- "plain": "pf-m-plain",
30
- "noBorder": "pf-m-no-border",
31
- "noPadding": "pf-m-no-padding",
32
- "fullHeight": "pf-m-full-height",
33
- "pill": "pf-m-pill",
34
- "scrollable": "pf-m-scrollable",
35
- "noScreenWarning": "pf-m-no-screen-warning"
27
+ "plain": "pf-m-plain"
36
28
  },
29
+ "panel": "pf-v6-c-panel",
37
30
  "themeDark": "pf-v6-theme-dark"
38
31
  };
package/css/components/Compass/compass.mjs CHANGED
@@ -12,7 +12,6 @@ export default {
12
12
  "compassNav": "pf-v6-c-compass__nav",
13
13
  "compassNavContent": "pf-v6-c-compass__nav-content",
14
14
  "compassNavMain": "pf-v6-c-compass__nav-main",
15
- "compassPanel": "pf-v6-c-compass__panel",
16
15
  "compassProfile": "pf-v6-c-compass__profile",
17
16
  "compassSidebar": "pf-v6-c-compass__sidebar",
18
17
  "dirRtl": "pf-v6-m-dir-rtl",
@@ -20,17 +19,11 @@ export default {
20
19
  "modifiers": {
21
20
  "animateSmoothly": "pf-m-animate-smoothly",
22
21
  "docked": "pf-m-docked",
23
- "noGlass": "pf-m-no-glass",
24
22
  "start": "pf-m-start",
25
23
  "end": "pf-m-end",
26
24
  "expanded": "pf-m-expanded",
27
- "plain": "pf-m-plain",
28
- "noBorder": "pf-m-no-border",
29
- "noPadding": "pf-m-no-padding",
30
- "fullHeight": "pf-m-full-height",
31
- "pill": "pf-m-pill",
32
- "scrollable": "pf-m-scrollable",
33
- "noScreenWarning": "pf-m-no-screen-warning"
25
+ "plain": "pf-m-plain"
34
26
  },
27
+ "panel": "pf-v6-c-panel",
35
28
  "themeDark": "pf-v6-theme-dark"
36
29
  };
package/css/components/Panel/panel.css CHANGED
@@ -4,25 +4,27 @@
4
4
  --pf-v6-c-panel--MaxWidth: none;
5
5
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
6
  --pf-v6-c-panel--BoxShadow: none;
7
- --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
7
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
8
8
  --pf-v6-c-panel--before--BorderWidth: 0;
9
9
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
10
10
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
11
11
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
12
12
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
13
13
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
14
+ --pf-v6-c-panel--m-no-border--before--BorderWidth: 0;
14
15
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
15
16
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
16
17
  --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
18
+ --pf-v6-c-panel--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
17
19
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
18
20
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
19
21
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
20
22
  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
21
23
  --pf-v6-c-panel__main--MaxHeight: none;
22
24
  --pf-v6-c-panel__main--Overflow: visible;
23
- --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
25
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
24
26
  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
25
- --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
27
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
26
28
  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
27
29
  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
28
30
  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -31,6 +33,7 @@
31
33
  --pf-v6-c-panel__footer--BoxShadow: none;
32
34
  --pf-v6-c-panel__footer--BorderColor: transparent;
33
35
  --pf-v6-c-panel__footer--BorderWidth: 0;
36
+ --pf-v6-c-panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
34
37
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
35
38
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
36
39
  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -75,6 +78,7 @@
75
78
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
76
79
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
77
80
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-raised--before--BorderWidth);
81
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-raised--BorderRadius);
78
82
  }
79
83
  .pf-v6-c-panel.pf-m-scrollable {
80
84
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
@@ -85,7 +89,11 @@
85
89
  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
86
90
  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
87
91
  }
88
- .pf-v6-c-panel.pf-m-glass {
92
+ .pf-v6-c-panel.pf-m-scrollable-auto-height {
93
+ --pf-v6-c-panel__main--MaxHeight: 100%;
94
+ max-height: 100%;
95
+ }
96
+ :where(.pf-v6-theme-glass) .pf-v6-c-panel.pf-m-glass {
89
97
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
90
98
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
91
99
  --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
@@ -93,6 +101,21 @@
93
101
  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
94
102
  backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
95
103
  }
104
+ .pf-v6-c-panel.pf-m-no-border {
105
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-no-border--before--BorderWidth);
106
+ }
107
+ .pf-v6-c-panel.pf-m-pill {
108
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-pill--BorderRadius);
109
+ }
110
+ .pf-v6-c-panel.pf-m-full-height {
111
+ height: 100%;
112
+ }
113
+
114
+ .pf-v6-c-panel,
115
+ .pf-v6-c-panel__main {
116
+ display: flex;
117
+ flex-direction: column;
118
+ }
96
119
 
97
120
  .pf-v6-c-panel__header {
98
121
  padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -102,6 +125,7 @@
102
125
  }
103
126
 
104
127
  .pf-v6-c-panel__main {
128
+ min-height: 0;
105
129
  max-height: var(--pf-v6-c-panel__main--MaxHeight);
106
130
  overflow: var(--pf-v6-c-panel__main--Overflow);
107
131
  }
package/css/components/Panel/panel.d.ts CHANGED
@@ -5,12 +5,17 @@ declare const _default: {
5
5
  "secondary": "pf-m-secondary",
6
6
  "raised": "pf-m-raised",
7
7
  "scrollable": "pf-m-scrollable",
8
- "glass": "pf-m-glass"
8
+ "scrollableAutoHeight": "pf-m-scrollable-auto-height",
9
+ "glass": "pf-m-glass",
10
+ "noBorder": "pf-m-no-border",
11
+ "pill": "pf-m-pill",
12
+ "fullHeight": "pf-m-full-height"
9
13
  },
10
14
  "panel": "pf-v6-c-panel",
11
15
  "panelFooter": "pf-v6-c-panel__footer",
12
16
  "panelHeader": "pf-v6-c-panel__header",
13
17
  "panelMain": "pf-v6-c-panel__main",
14
- "panelMainBody": "pf-v6-c-panel__main-body"
18
+ "panelMainBody": "pf-v6-c-panel__main-body",
19
+ "themeGlass": "pf-v6-theme-glass"
15
20
  };
16
21
  export default _default;
package/css/components/Panel/panel.js CHANGED
@@ -7,11 +7,16 @@ exports.default = {
7
7
  "secondary": "pf-m-secondary",
8
8
  "raised": "pf-m-raised",
9
9
  "scrollable": "pf-m-scrollable",
10
- "glass": "pf-m-glass"
10
+ "scrollableAutoHeight": "pf-m-scrollable-auto-height",
11
+ "glass": "pf-m-glass",
12
+ "noBorder": "pf-m-no-border",
13
+ "pill": "pf-m-pill",
14
+ "fullHeight": "pf-m-full-height"
11
15
  },
12
16
  "panel": "pf-v6-c-panel",
13
17
  "panelFooter": "pf-v6-c-panel__footer",
14
18
  "panelHeader": "pf-v6-c-panel__header",
15
19
  "panelMain": "pf-v6-c-panel__main",
16
- "panelMainBody": "pf-v6-c-panel__main-body"
20
+ "panelMainBody": "pf-v6-c-panel__main-body",
21
+ "themeGlass": "pf-v6-theme-glass"
17
22
  };
package/css/components/Panel/panel.mjs CHANGED
@@ -5,11 +5,16 @@ export default {
5
5
  "secondary": "pf-m-secondary",
6
6
  "raised": "pf-m-raised",
7
7
  "scrollable": "pf-m-scrollable",
8
- "glass": "pf-m-glass"
8
+ "scrollableAutoHeight": "pf-m-scrollable-auto-height",
9
+ "glass": "pf-m-glass",
10
+ "noBorder": "pf-m-no-border",
11
+ "pill": "pf-m-pill",
12
+ "fullHeight": "pf-m-full-height"
9
13
  },
10
14
  "panel": "pf-v6-c-panel",
11
15
  "panelFooter": "pf-v6-c-panel__footer",
12
16
  "panelHeader": "pf-v6-c-panel__header",
13
17
  "panelMain": "pf-v6-c-panel__main",
14
- "panelMainBody": "pf-v6-c-panel__main-body"
18
+ "panelMainBody": "pf-v6-c-panel__main-body",
19
+ "themeGlass": "pf-v6-theme-glass"
15
20
  };
package/css/components/_index.css CHANGED
@@ -3688,17 +3688,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3688
3688
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
3689
3689
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
3690
3690
  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
3691
- --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
3692
- --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
3693
- --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3694
- --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3695
- --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3696
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
3697
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
3698
- --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
3699
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
3700
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
3701
- --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
3702
3691
  --pf-v6-c-compass__message-bar--Width: 450px;
3703
3692
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3704
3693
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
@@ -3761,9 +3750,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3761
3750
  :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
3762
3751
  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
3763
3752
  }
3764
- .pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
3765
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
3766
- }
3767
3753
 
3768
3754
  .pf-v6-c-compass__header,
3769
3755
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -3817,11 +3803,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3817
3803
  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
3818
3804
  }
3819
3805
 
3806
+ .pf-v6-c-compass__nav .pf-v6-c-panel {
3807
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3808
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3809
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3810
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3811
+ }
3820
3812
  .pf-v6-c-compass__nav {
3821
- --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
3822
- --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
3823
- --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
3824
- --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
3825
3813
  display: flex;
3826
3814
  flex-direction: column;
3827
3815
  gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3839,11 +3827,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3839
3827
  padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
3840
3828
  }
3841
3829
 
3830
+ .pf-v6-c-compass__sidebar .pf-v6-c-panel {
3831
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3832
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3833
+ --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3834
+ --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3835
+ }
3842
3836
  .pf-v6-c-compass__sidebar {
3843
- --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
3844
- --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
3845
- --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
3846
- --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
3847
3837
  display: flex;
3848
3838
  width: 0;
3849
3839
  }
@@ -3933,60 +3923,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3933
3923
  max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
3934
3924
  }
3935
3925
 
3936
- .pf-v6-c-compass__panel {
3937
- padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
3938
- padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
3939
- padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
3940
- padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
3941
- background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
3942
- backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
3943
- border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
3944
- border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
3945
- box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
3946
- }
3947
- .pf-v6-c-compass__panel.pf-m-no-border {
3948
- border-width: 0;
3949
- }
3950
- .pf-v6-c-compass__panel.pf-m-no-padding {
3951
- padding: 0;
3952
- }
3953
- .pf-v6-c-compass__panel.pf-m-full-height {
3954
- height: 100%;
3955
- }
3956
- .pf-v6-c-compass__panel.pf-m-pill {
3957
- border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
3958
- }
3959
- .pf-v6-c-compass__panel.pf-m-scrollable {
3960
- overflow: auto;
3961
- }
3962
-
3963
- /* stylelint-disable */
3964
- @media (max-width: 1200px) {
3965
- .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
3966
- position: relative;
3967
- display: grid;
3968
- grid-template-columns: auto;
3969
- grid-template-rows: auto;
3970
- place-content: center;
3971
- gap: 0;
3972
- }
3973
- .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
3974
- padding: 1em;
3975
- border-radius: var(--pf-t--global--border--radius--large);
3976
- background: var(--pf-t--global--background--color--primary--default);
3977
- content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
3978
- width: 80%;
3979
- width: 300px;
3980
- border: 1px solid var(--pf-t--global--border--color--default);
3981
- box-shadow: var(--pf-t--global--box-shadow--md);
3982
- white-space: pre-wrap;
3983
- text-align: center;
3984
- }
3985
- .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
3986
- display: none;
3987
- }
3988
- }
3989
- /* stylelint-enable */
3990
3926
  :root {
3991
3927
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
3992
3928
  --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -14923,25 +14859,27 @@ ul.pf-v6-c-list {
14923
14859
  --pf-v6-c-panel--MaxWidth: none;
14924
14860
  --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
14925
14861
  --pf-v6-c-panel--BoxShadow: none;
14926
- --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
14862
+ --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
14927
14863
  --pf-v6-c-panel--before--BorderWidth: 0;
14928
14864
  --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
14929
14865
  --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
14930
14866
  --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14931
14867
  --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
14932
14868
  --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
14869
+ --pf-v6-c-panel--m-no-border--before--BorderWidth: 0;
14933
14870
  --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
14934
14871
  --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
14935
14872
  --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14873
+ --pf-v6-c-panel--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
14936
14874
  --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
14937
14875
  --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14938
14876
  --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14939
14877
  --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14940
14878
  --pf-v6-c-panel__main--MaxHeight: none;
14941
14879
  --pf-v6-c-panel__main--Overflow: visible;
14942
- --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
14880
+ --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
14943
14881
  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
14944
- --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14882
+ --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
14945
14883
  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
14946
14884
  --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
14947
14885
  --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -14950,6 +14888,7 @@ ul.pf-v6-c-list {
14950
14888
  --pf-v6-c-panel__footer--BoxShadow: none;
14951
14889
  --pf-v6-c-panel__footer--BorderColor: transparent;
14952
14890
  --pf-v6-c-panel__footer--BorderWidth: 0;
14891
+ --pf-v6-c-panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
14953
14892
  --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
14954
14893
  --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
14955
14894
  --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -14994,6 +14933,7 @@ ul.pf-v6-c-list {
14994
14933
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
14995
14934
  --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
14996
14935
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-raised--before--BorderWidth);
14936
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-raised--BorderRadius);
14997
14937
  }
14998
14938
  .pf-v6-c-panel.pf-m-scrollable {
14999
14939
  --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
@@ -15004,7 +14944,11 @@ ul.pf-v6-c-list {
15004
14944
  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
15005
14945
  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
15006
14946
  }
15007
- .pf-v6-c-panel.pf-m-glass {
14947
+ .pf-v6-c-panel.pf-m-scrollable-auto-height {
14948
+ --pf-v6-c-panel__main--MaxHeight: 100%;
14949
+ max-height: 100%;
14950
+ }
14951
+ :where(.pf-v6-theme-glass) .pf-v6-c-panel.pf-m-glass {
15008
14952
  --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
15009
14953
  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
15010
14954
  --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
@@ -15012,6 +14956,21 @@ ul.pf-v6-c-list {
15012
14956
  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
15013
14957
  backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
15014
14958
  }
14959
+ .pf-v6-c-panel.pf-m-no-border {
14960
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-no-border--before--BorderWidth);
14961
+ }
14962
+ .pf-v6-c-panel.pf-m-pill {
14963
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-pill--BorderRadius);
14964
+ }
14965
+ .pf-v6-c-panel.pf-m-full-height {
14966
+ height: 100%;
14967
+ }
14968
+
14969
+ .pf-v6-c-panel,
14970
+ .pf-v6-c-panel__main {
14971
+ display: flex;
14972
+ flex-direction: column;
14973
+ }
15015
14974
 
15016
14975
  .pf-v6-c-panel__header {
15017
14976
  padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -15021,6 +14980,7 @@ ul.pf-v6-c-list {
15021
14980
  }
15022
14981
 
15023
14982
  .pf-v6-c-panel__main {
14983
+ min-height: 0;
15024
14984
  max-height: var(--pf-v6-c-panel__main--MaxHeight);
15025
14985
  overflow: var(--pf-v6-c-panel__main--Overflow);
15026
14986
  }
package/css/components/_index.d.ts CHANGED
@@ -124,7 +124,6 @@ declare const _default: {
124
124
  "compassNav": "pf-v6-c-compass__nav",
125
125
  "compassNavContent": "pf-v6-c-compass__nav-content",
126
126
  "compassNavMain": "pf-v6-c-compass__nav-main",
127
- "compassPanel": "pf-v6-c-compass__panel",
128
127
  "compassProfile": "pf-v6-c-compass__profile",
129
128
  "compassSidebar": "pf-v6-c-compass__sidebar",
130
129
  "content": "pf-v6-c-content",
@@ -456,11 +455,6 @@ declare const _default: {
456
455
  "readOnly": "pf-m-read-only",
457
456
  "dragHover": "pf-m-drag-hover",
458
457
  "animateSmoothly": "pf-m-animate-smoothly",
459
- "noGlass": "pf-m-no-glass",
460
- "noBorder": "pf-m-no-border",
461
- "pill": "pf-m-pill",
462
- "scrollable": "pf-m-scrollable",
463
- "noScreenWarning": "pf-m-no-screen-warning",
464
458
  "editorial": "pf-m-editorial",
465
459
  "visited": "pf-m-visited",
466
460
  "pageTitle": "pf-m-page-title",
@@ -582,9 +576,11 @@ declare const _default: {
582
576
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
583
577
  "inset_3xlOn_2xl": "pf-m-inset-3xl-on-2xl",
584
578
  "panelBottom": "pf-m-panel-bottom",
579
+ "noBorder": "pf-m-no-border",
585
580
  "resizable": "pf-m-resizable",
586
581
  "panelLeft": "pf-m-panel-left",
587
582
  "resizing": "pf-m-resizing",
583
+ "pill": "pf-m-pill",
588
584
  "noBackground": "pf-m-no-background",
589
585
  "padding": "pf-m-padding",
590
586
  "width_25": "pf-m-width-25",
@@ -637,6 +633,7 @@ declare const _default: {
637
633
  "resizeBoth": "pf-m-resize-both",
638
634
  "indeterminate": "pf-m-indeterminate",
639
635
  "dynamic": "pf-m-dynamic",
636
+ "noGlass": "pf-m-no-glass",
640
637
  "2xl": "pf-m-2xl",
641
638
  "3xl": "pf-m-3xl",
642
639
  "bodySm": "pf-m-body-sm",
@@ -702,6 +699,7 @@ declare const _default: {
702
699
  "drilldown": "pf-m-drilldown",
703
700
  "drilledIn": "pf-m-drilled-in",
704
701
  "currentPath": "pf-m-current-path",
702
+ "scrollable": "pf-m-scrollable",
705
703
  "load": "pf-m-load",
706
704
  "fullWidth": "pf-m-full-width",
707
705
  "form": "pf-m-form",
@@ -763,6 +761,7 @@ declare const _default: {
763
761
  "displaySummaryOn_2xl": "pf-m-display-summary-on-2xl",
764
762
  "displayFullOn_2xl": "pf-m-display-full-on-2xl",
765
763
  "raised": "pf-m-raised",
764
+ "scrollableAutoHeight": "pf-m-scrollable-auto-height",
766
765
  "widthAuto": "pf-m-width-auto",
767
766
  "topLeft": "pf-m-top-left",
768
767
  "topRight": "pf-m-top-right",
package/css/components/_index.js CHANGED
@@ -126,7 +126,6 @@ exports.default = {
126
126
  "compassNav": "pf-v6-c-compass__nav",
127
127
  "compassNavContent": "pf-v6-c-compass__nav-content",
128
128
  "compassNavMain": "pf-v6-c-compass__nav-main",
129
- "compassPanel": "pf-v6-c-compass__panel",
130
129
  "compassProfile": "pf-v6-c-compass__profile",
131
130
  "compassSidebar": "pf-v6-c-compass__sidebar",
132
131
  "content": "pf-v6-c-content",
@@ -458,11 +457,6 @@ exports.default = {
458
457
  "readOnly": "pf-m-read-only",
459
458
  "dragHover": "pf-m-drag-hover",
460
459
  "animateSmoothly": "pf-m-animate-smoothly",
461
- "noGlass": "pf-m-no-glass",
462
- "noBorder": "pf-m-no-border",
463
- "pill": "pf-m-pill",
464
- "scrollable": "pf-m-scrollable",
465
- "noScreenWarning": "pf-m-no-screen-warning",
466
460
  "editorial": "pf-m-editorial",
467
461
  "visited": "pf-m-visited",
468
462
  "pageTitle": "pf-m-page-title",
@@ -584,9 +578,11 @@ exports.default = {
584
578
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
585
579
  "inset_3xlOn_2xl": "pf-m-inset-3xl-on-2xl",
586
580
  "panelBottom": "pf-m-panel-bottom",
581
+ "noBorder": "pf-m-no-border",
587
582
  "resizable": "pf-m-resizable",
588
583
  "panelLeft": "pf-m-panel-left",
589
584
  "resizing": "pf-m-resizing",
585
+ "pill": "pf-m-pill",
590
586
  "noBackground": "pf-m-no-background",
591
587
  "padding": "pf-m-padding",
592
588
  "width_25": "pf-m-width-25",
@@ -639,6 +635,7 @@ exports.default = {
639
635
  "resizeBoth": "pf-m-resize-both",
640
636
  "indeterminate": "pf-m-indeterminate",
641
637
  "dynamic": "pf-m-dynamic",
638
+ "noGlass": "pf-m-no-glass",
642
639
  "2xl": "pf-m-2xl",
643
640
  "3xl": "pf-m-3xl",
644
641
  "bodySm": "pf-m-body-sm",
@@ -704,6 +701,7 @@ exports.default = {
704
701
  "drilldown": "pf-m-drilldown",
705
702
  "drilledIn": "pf-m-drilled-in",
706
703
  "currentPath": "pf-m-current-path",
704
+ "scrollable": "pf-m-scrollable",
707
705
  "load": "pf-m-load",
708
706
  "fullWidth": "pf-m-full-width",
709
707
  "form": "pf-m-form",
@@ -765,6 +763,7 @@ exports.default = {
765
763
  "displaySummaryOn_2xl": "pf-m-display-summary-on-2xl",
766
764
  "displayFullOn_2xl": "pf-m-display-full-on-2xl",
767
765
  "raised": "pf-m-raised",
766
+ "scrollableAutoHeight": "pf-m-scrollable-auto-height",
768
767
  "widthAuto": "pf-m-width-auto",
769
768
  "topLeft": "pf-m-top-left",
770
769
  "topRight": "pf-m-top-right",
package/css/components/_index.mjs CHANGED
@@ -124,7 +124,6 @@ export default {
124
124
  "compassNav": "pf-v6-c-compass__nav",
125
125
  "compassNavContent": "pf-v6-c-compass__nav-content",
126
126
  "compassNavMain": "pf-v6-c-compass__nav-main",
127
- "compassPanel": "pf-v6-c-compass__panel",
128
127
  "compassProfile": "pf-v6-c-compass__profile",
129
128
  "compassSidebar": "pf-v6-c-compass__sidebar",
130
129
  "content": "pf-v6-c-content",
@@ -456,11 +455,6 @@ export default {
456
455
  "readOnly": "pf-m-read-only",
457
456
  "dragHover": "pf-m-drag-hover",
458
457
  "animateSmoothly": "pf-m-animate-smoothly",
459
- "noGlass": "pf-m-no-glass",
460
- "noBorder": "pf-m-no-border",
461
- "pill": "pf-m-pill",
462
- "scrollable": "pf-m-scrollable",
463
- "noScreenWarning": "pf-m-no-screen-warning",
464
458
  "editorial": "pf-m-editorial",
465
459
  "visited": "pf-m-visited",
466
460
  "pageTitle": "pf-m-page-title",
@@ -582,9 +576,11 @@ export default {
582
576
  "inset_2xlOn_2xl": "pf-m-inset-2xl-on-2xl",
583
577
  "inset_3xlOn_2xl": "pf-m-inset-3xl-on-2xl",
584
578
  "panelBottom": "pf-m-panel-bottom",
579
+ "noBorder": "pf-m-no-border",
585
580
  "resizable": "pf-m-resizable",
586
581
  "panelLeft": "pf-m-panel-left",
587
582
  "resizing": "pf-m-resizing",
583
+ "pill": "pf-m-pill",
588
584
  "noBackground": "pf-m-no-background",
589
585
  "padding": "pf-m-padding",
590
586
  "width_25": "pf-m-width-25",
@@ -637,6 +633,7 @@ export default {
637
633
  "resizeBoth": "pf-m-resize-both",
638
634
  "indeterminate": "pf-m-indeterminate",
639
635
  "dynamic": "pf-m-dynamic",
636
+ "noGlass": "pf-m-no-glass",
640
637
  "2xl": "pf-m-2xl",
641
638
  "3xl": "pf-m-3xl",
642
639
  "bodySm": "pf-m-body-sm",
@@ -702,6 +699,7 @@ export default {
702
699
  "drilldown": "pf-m-drilldown",
703
700
  "drilledIn": "pf-m-drilled-in",
704
701
  "currentPath": "pf-m-current-path",
702
+ "scrollable": "pf-m-scrollable",
705
703
  "load": "pf-m-load",
706
704
  "fullWidth": "pf-m-full-width",
707
705
  "form": "pf-m-form",
@@ -763,6 +761,7 @@ export default {
763
761
  "displaySummaryOn_2xl": "pf-m-display-summary-on-2xl",
764
762
  "displayFullOn_2xl": "pf-m-display-full-on-2xl",
765
763
  "raised": "pf-m-raised",
764
+ "scrollableAutoHeight": "pf-m-scrollable-auto-height",
766
765
  "widthAuto": "pf-m-width-auto",
767
766
  "topLeft": "pf-m-top-left",
768
767
  "topRight": "pf-m-top-right",
package/css/docs/components/Compass/examples/Compass.css CHANGED
@@ -2,12 +2,12 @@
2
2
  height: 600px;
3
3
  }
4
4
 
5
- #ws-core-a-compass-default [class*="pf-v6-c-compass"],
5
+ #ws-core-a-compass-basic [class*="pf-v6-c-compass"],
6
6
  #ws-core-a-compass-docked [class*="pf-v6-c-compass"] {
7
7
  position: relative;
8
8
  }
9
9
 
10
- #ws-core-a-compass-default [class*="pf-v6-c-compass"]::after,
10
+ #ws-core-a-compass-basic [class*="pf-v6-c-compass"]::after,
11
11
  #ws-core-a-compass-docked [class*="pf-v6-c-compass"]::after {
12
12
  position: absolute;
13
13
  inset: 0;
package/css/docs/components/Panel/examples/Panel.css ADDED
@@ -0,0 +1,3 @@
1
+ #ws-core-c-panel-scrollable-with-auto-height .ws-preview-html {
2
+ height: 450px;
3
+ }
package/css/docs/components/Panel/examples/Panel.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import './Panel.css';
2
+ declare const _default: {
3
+ "wsPreviewHtml": "ws-preview-html"
4
+ };
5
+ export default _default;
package/css/docs/components/Panel/examples/Panel.js ADDED
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+ exports.__esModule = true;
3
+ require('./Panel.css');
4
+ exports.default = {
5
+ "wsPreviewHtml": "ws-preview-html"
6
+ };
package/css/docs/components/Panel/examples/Panel.mjs ADDED
@@ -0,0 +1,4 @@
1
+ import './Panel.css';
2
+ export default {
3
+ "wsPreviewHtml": "ws-preview-html"
4
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.5.0-prerelease.18",
3
+ "version": "6.5.0-prerelease.19",
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.71",
22
+ "@patternfly/patternfly": "6.5.0-prerelease.72",
23
23
  "change-case": "^5.4.4",
24
24
  "fs-extra": "^11.3.3"
25
25
  },
26
26
  "license": "MIT",
27
- "gitHead": "6558bdd10eb90061e973dcc37ec971eb2b1a354d"
27
+ "gitHead": "30db3d99f05b39b6478ed7ed48baeb29bfb895cd"
28
28
  }