@patternfly/patternfly 6.5.0-prerelease.27 → 6.5.0-prerelease.28

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 (24) hide show
  1. package/components/Compass/compass.css +54 -25
  2. package/components/Compass/compass.scss +60 -26
  3. package/components/_index.css +54 -25
  4. package/docs/components/Compass/examples/Compass.css +2 -2
  5. package/docs/components/Compass/examples/Compass.md +1 -1
  6. package/docs/demos/Compass/examples/Compass.md +8 -8
  7. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  8. package/docs/layouts/Flex/examples/Flex.css +3 -3
  9. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  10. package/docs/layouts/Grid/examples/Grid.css +1 -1
  11. package/docs/layouts/Level/examples/Level.css +3 -3
  12. package/docs/layouts/Split/examples/Split.css +1 -1
  13. package/docs/layouts/Stack/examples/Stack.css +3 -3
  14. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  15. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  16. package/docs/utilities/Display/examples/Display.css +1 -1
  17. package/docs/utilities/Flex/examples/Flex.css +7 -7
  18. package/docs/utilities/Float/examples/Float.css +2 -2
  19. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  20. package/package.json +1 -1
  21. package/patternfly-no-globals.css +54 -25
  22. package/patternfly.css +54 -25
  23. package/patternfly.min.css +1 -1
  24. package/patternfly.min.css.map +1 -1
package/docs/layouts/Level/examples/Level.css CHANGED
@@ -1,12 +1,12 @@
1
- .ws-core-l-level .ws-preview-html {
1
+ .ws-core-f-level .ws-preview-html {
2
2
  display: flex;
3
3
  flex-wrap: wrap;
4
4
  min-height: 160px;
5
5
  }
6
- .ws-core-l-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
6
+ .ws-core-f-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
7
7
  padding: var(--pf-t--global--spacer--sm);
8
8
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
9
9
  }
10
- .ws-core-l-level .pf-v6-l-level {
10
+ .ws-core-f-level .pf-v6-l-level {
11
11
  width: 100%;
12
12
  }
package/docs/layouts/Split/examples/Split.css CHANGED
@@ -1,4 +1,4 @@
1
- .ws-core-l-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
1
+ .ws-core-f-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
2
2
  padding: var(--pf-t--global--spacer--sm);
3
3
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
4
4
  }
package/docs/layouts/Stack/examples/Stack.css CHANGED
@@ -1,15 +1,15 @@
1
- .ws-core-l-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
1
+ .ws-core-f-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
2
2
  padding: var(--pf-t--global--spacer--sm);
3
3
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
4
4
  }
5
5
 
6
- .ws-core-l-stack .ws-preview-html {
6
+ .ws-core-f-stack .ws-preview-html {
7
7
  display: flex;
8
8
  flex-direction: column;
9
9
  min-height: 30rem;
10
10
  width: 100%;
11
11
  }
12
12
 
13
- .ws-core-l-stack .pf-v6-l-stack {
13
+ .ws-core-f-stack .pf-v6-l-stack {
14
14
  flex-grow: 1;
15
15
  }
package/docs/utilities/Alignment/examples/Alignment.css CHANGED
@@ -1,7 +1,7 @@
1
- .ws-core-u-alignment .pf-v6-u-text-align-start,
2
- .ws-core-u-alignment .pf-v6-u-text-align-center,
3
- .ws-core-u-alignment .pf-v6-u-text-align-end,
4
- .ws-core-u-alignment .pf-v6-u-text-align-justify {
1
+ .ws-core-f-alignment .pf-v6-u-text-align-start,
2
+ .ws-core-f-alignment .pf-v6-u-text-align-center,
3
+ .ws-core-f-alignment .pf-v6-u-text-align-end,
4
+ .ws-core-f-alignment .pf-v6-u-text-align-justify {
5
5
  padding: var(--pf-t--global--spacer--sm);
6
6
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
7
7
  }
package/docs/utilities/BoxShadow/examples/box-shadow.css CHANGED
@@ -1,9 +1,9 @@
1
- .ws-core-u-box-shadow .ws-preview-html {
1
+ .ws-core-f-box-shadow .ws-preview-html {
2
2
  display: flex;
3
3
  flex-direction: column;
4
4
  gap: var(--pf-t--global--spacer--xl);
5
5
  }
6
6
 
7
- .ws-core-u-box-shadow [class*="pf-v6-u-box-shadow"] {
7
+ .ws-core-f-box-shadow [class*="pf-v6-u-box-shadow"] {
8
8
  padding: var(--pf-t--global--spacer--md);
9
9
  }
package/docs/utilities/Display/examples/Display.css CHANGED
@@ -1,4 +1,4 @@
1
- .ws-core-u-display [class*="pf-v6-u-display-"] {
1
+ .ws-core-f-display [class*="pf-v6-u-display-"] {
2
2
  padding: var(--pf-t--global--spacer--sm);
3
3
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
4
4
  }
package/docs/utilities/Flex/examples/Flex.css CHANGED
@@ -1,18 +1,18 @@
1
- .ws-core-u-flex .pf-v6-u-display-flex,
2
- .ws-core-u-flex .ws-example-flex-item,
3
- .ws-core-u-flex .pf-v6-u-display-inline-flex {
1
+ .ws-core-f-flex .pf-v6-u-display-flex,
2
+ .ws-core-f-flex .ws-example-flex-item,
3
+ .ws-core-f-flex .pf-v6-u-display-inline-flex {
4
4
  flex-wrap: wrap;
5
5
  padding: var(--pf-t--global--spacer--sm);
6
6
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
7
7
  }
8
8
 
9
- #ws-core-u-flex-aligned-items .pf-v6-u-display-flex,
10
- #ws-core-u-flex-aligned-self .pf-v6-u-display-flex,
11
- #ws-core-u-flex-aligned-content .pf-v6-u-display-flex {
9
+ #ws-core-f-flex-aligned-items .pf-v6-u-display-flex,
10
+ #ws-core-f-flex-aligned-self .pf-v6-u-display-flex,
11
+ #ws-core-f-flex-aligned-content .pf-v6-u-display-flex {
12
12
  min-height: 160px;
13
13
  }
14
14
 
15
- #ws-core-u-flex-aligned-content .ws-example-flex-item {
15
+ #ws-core-f-flex-aligned-content .ws-example-flex-item {
16
16
  height: 40px;
17
17
  }
18
18
 
package/docs/utilities/Float/examples/Float.css CHANGED
@@ -1,5 +1,5 @@
1
- .ws-core-u-float .pf-v6-u-float-inline-start,
2
- .ws-core-u-float .pf-v6-u-float-inline-end {
1
+ .ws-core-f-float .pf-v6-u-float-inline-start,
2
+ .ws-core-f-float .pf-v6-u-float-inline-end {
3
3
  padding: var(--pf-t--global--spacer--sm);
4
4
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
5
  }
package/docs/utilities/Spacing/examples/Spacing.css CHANGED
@@ -1,5 +1,5 @@
1
- .ws-core-u-spacing .ws-example-flex-item,
2
- .ws-core-u-spacing .pf-v6-u-display-flex {
1
+ .ws-core-f-spacing .ws-example-flex-item,
2
+ .ws-core-f-spacing .pf-v6-u-display-flex {
3
3
  padding: var(--pf-t--global--spacer--sm);
4
4
  border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
5
5
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.5.0-prerelease.27",
4
+ "version": "6.5.0-prerelease.28",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -12267,8 +12267,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12267
12267
  --pf-v6-c-compass--BackgroundImage--light: none;
12268
12268
  --pf-v6-c-compass--BackgroundImage--dark: none;
12269
12269
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12270
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
12271
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12270
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
12272
12271
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12273
12272
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
12274
12273
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -12283,7 +12282,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12283
12282
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12284
12283
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12285
12284
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12286
- --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12285
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
12287
12286
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12288
12287
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12289
12288
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12298,32 +12297,44 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12298
12297
  --pf-v6-c-compass__message-bar--Width: 450px;
12299
12298
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12300
12299
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12301
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
12300
+ --pf-v6-c-compass--section--slide--length--header: 100%;
12301
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
12302
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
12303
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
12304
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
12302
12305
  --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12303
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12304
- --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
12305
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12306
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
12307
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
12308
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12306
12309
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
12307
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12310
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
12308
12311
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
12309
12312
  }
12310
12313
  @media screen and (prefers-reduced-motion: no-preference) {
12311
12314
  .pf-v6-c-compass {
12312
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
12313
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12314
- --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);
12315
- --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
12316
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12315
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
12316
+ --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);
12317
+ --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;
12318
+ }
12319
+ .pf-v6-c-compass.pf-m-animate-smoothly {
12320
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
12321
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
12322
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
12323
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
12324
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
12325
+ --pf-v6-c-compass--section--TransitionDuration: 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);
12326
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
12327
+ --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);
12317
12328
  }
12318
12329
  }
12319
12330
 
12320
12331
  .pf-v6-c-compass {
12332
+ interpolate-size: allow-keywords;
12321
12333
  display: grid;
12322
12334
  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12323
12335
  grid-template-rows: auto 1fr;
12324
12336
  grid-template-columns: auto 1fr auto;
12325
12337
  grid-auto-rows: auto;
12326
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12327
12338
  align-items: center;
12328
12339
  justify-content: center;
12329
12340
  height: 100dvh;
@@ -12343,6 +12354,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12343
12354
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
12344
12355
  .pf-v6-c-compass__main-footer,
12345
12356
  .pf-v6-c-compass__footer {
12357
+ margin: 0;
12346
12358
  visibility: hidden;
12347
12359
  opacity: 0;
12348
12360
  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -12364,12 +12376,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12364
12376
  .pf-v6-c-compass__header,
12365
12377
  .pf-v6-c-compass__main-footer,
12366
12378
  .pf-v6-c-compass__footer {
12367
- max-height: 0;
12379
+ height: 0;
12368
12380
  }
12369
12381
  .pf-v6-c-compass__header.pf-m-expanded,
12370
12382
  .pf-v6-c-compass__main-footer.pf-m-expanded,
12371
12383
  .pf-v6-c-compass__footer.pf-m-expanded {
12372
- max-height: 9999px;
12384
+ height: auto;
12373
12385
  }
12374
12386
 
12375
12387
  .pf-v6-c-compass__header {
@@ -12377,7 +12389,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12377
12389
  grid-area: header;
12378
12390
  grid-template-columns: 1fr auto 1fr;
12379
12391
  align-items: start;
12380
- translate: 0 -100%;
12392
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
12393
+ }
12394
+ .pf-v6-c-compass__header.pf-m-expanded {
12395
+ margin-block-end: var(--pf-v6-c-compass--Gap);
12381
12396
  }
12382
12397
 
12383
12398
  .pf-v6-c-compass__profile {
@@ -12414,25 +12429,33 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12414
12429
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12415
12430
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12416
12431
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12417
- max-width: 0;
12432
+ display: flex;
12433
+ width: 0;
12418
12434
  }
12419
12435
  .pf-v6-c-compass__sidebar.pf-m-expanded {
12420
- max-width: 9999px;
12436
+ width: auto;
12421
12437
  }
12422
12438
  .pf-v6-c-compass__sidebar.pf-m-start {
12423
- translate: -100%;
12439
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
12424
12440
  grid-area: sidebar-start;
12425
12441
  }
12426
12442
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
12427
- translate: 100%;
12443
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
12428
12444
  }
12429
12445
 
12446
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
12447
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
12448
+ }
12430
12449
  .pf-v6-c-compass__sidebar.pf-m-end {
12431
- translate: 100%;
12450
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
12432
12451
  grid-area: sidebar-end;
12433
12452
  }
12434
12453
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
12435
- translate: -100%;
12454
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
12455
+ }
12456
+
12457
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
12458
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
12436
12459
  }
12437
12460
 
12438
12461
  .pf-v6-c-compass__main {
@@ -12468,15 +12491,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12468
12491
  .pf-v6-c-compass__main-footer {
12469
12492
  display: flex;
12470
12493
  justify-content: center;
12494
+ min-height: 0;
12495
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
12496
+ }
12497
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
12471
12498
  margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
12472
- translate: 0 100%;
12473
12499
  }
12474
12500
 
12475
12501
  .pf-v6-c-compass__footer {
12476
12502
  display: flex;
12477
12503
  grid-column: 1/-1;
12478
12504
  justify-content: center;
12479
- translate: 0 100%;
12505
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
12506
+ }
12507
+ .pf-v6-c-compass__footer.pf-m-expanded {
12508
+ margin-block-start: var(--pf-v6-c-compass--Gap);
12480
12509
  }
12481
12510
 
12482
12511
  .pf-v6-c-compass__message-bar {
package/patternfly.css CHANGED
@@ -12414,8 +12414,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12414
12414
  --pf-v6-c-compass--BackgroundImage--light: none;
12415
12415
  --pf-v6-c-compass--BackgroundImage--dark: none;
12416
12416
  --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
12417
- --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
12418
- --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
12417
+ --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
12419
12418
  --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
12420
12419
  --pf-v6-c-compass__nav--PaddingBlockStart: 0;
12421
12420
  --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -12430,7 +12429,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12430
12429
  --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
12431
12430
  --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
12432
12431
  --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
12433
- --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
12432
+ --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
12434
12433
  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
12435
12434
  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
12436
12435
  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -12445,32 +12444,44 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12445
12444
  --pf-v6-c-compass__message-bar--Width: 450px;
12446
12445
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
12447
12446
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
12448
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
12447
+ --pf-v6-c-compass--section--slide--length--header: 100%;
12448
+ --pf-v6-c-compass--section--slide--length--sidebar: 100%;
12449
+ --pf-v6-c-compass--section--slide--length--main-footer: 100%;
12450
+ --pf-v6-c-compass--section--slide--length--footer: 100%;
12451
+ --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
12449
12452
  --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
12450
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12451
- --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
12452
- --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12453
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
12454
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
12455
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
12453
12456
  --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
12454
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
12457
+ --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
12455
12458
  --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
12456
12459
  }
12457
12460
  @media screen and (prefers-reduced-motion: no-preference) {
12458
12461
  .pf-v6-c-compass {
12459
- --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
12460
- --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12461
- --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);
12462
- --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
12463
- --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
12462
+ --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
12463
+ --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);
12464
+ --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;
12465
+ }
12466
+ .pf-v6-c-compass.pf-m-animate-smoothly {
12467
+ --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
12468
+ --pf-v6-c-compass--section--slide--length--header: 10rem;
12469
+ --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
12470
+ --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
12471
+ --pf-v6-c-compass--section--slide--length--footer: 6rem;
12472
+ --pf-v6-c-compass--section--TransitionDuration: 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);
12473
+ --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
12474
+ --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);
12464
12475
  }
12465
12476
  }
12466
12477
 
12467
12478
  .pf-v6-c-compass {
12479
+ interpolate-size: allow-keywords;
12468
12480
  display: grid;
12469
12481
  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
12470
12482
  grid-template-rows: auto 1fr;
12471
12483
  grid-template-columns: auto 1fr auto;
12472
12484
  grid-auto-rows: auto;
12473
- gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
12474
12485
  align-items: center;
12475
12486
  justify-content: center;
12476
12487
  height: 100dvh;
@@ -12490,6 +12501,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12490
12501
  .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
12491
12502
  .pf-v6-c-compass__main-footer,
12492
12503
  .pf-v6-c-compass__footer {
12504
+ margin: 0;
12493
12505
  visibility: hidden;
12494
12506
  opacity: 0;
12495
12507
  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -12511,12 +12523,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12511
12523
  .pf-v6-c-compass__header,
12512
12524
  .pf-v6-c-compass__main-footer,
12513
12525
  .pf-v6-c-compass__footer {
12514
- max-height: 0;
12526
+ height: 0;
12515
12527
  }
12516
12528
  .pf-v6-c-compass__header.pf-m-expanded,
12517
12529
  .pf-v6-c-compass__main-footer.pf-m-expanded,
12518
12530
  .pf-v6-c-compass__footer.pf-m-expanded {
12519
- max-height: 9999px;
12531
+ height: auto;
12520
12532
  }
12521
12533
 
12522
12534
  .pf-v6-c-compass__header {
@@ -12524,7 +12536,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12524
12536
  grid-area: header;
12525
12537
  grid-template-columns: 1fr auto 1fr;
12526
12538
  align-items: start;
12527
- translate: 0 -100%;
12539
+ translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
12540
+ }
12541
+ .pf-v6-c-compass__header.pf-m-expanded {
12542
+ margin-block-end: var(--pf-v6-c-compass--Gap);
12528
12543
  }
12529
12544
 
12530
12545
  .pf-v6-c-compass__profile {
@@ -12561,25 +12576,33 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12561
12576
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
12562
12577
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
12563
12578
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
12564
- max-width: 0;
12579
+ display: flex;
12580
+ width: 0;
12565
12581
  }
12566
12582
  .pf-v6-c-compass__sidebar.pf-m-expanded {
12567
- max-width: 9999px;
12583
+ width: auto;
12568
12584
  }
12569
12585
  .pf-v6-c-compass__sidebar.pf-m-start {
12570
- translate: -100%;
12586
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
12571
12587
  grid-area: sidebar-start;
12572
12588
  }
12573
12589
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
12574
- translate: 100%;
12590
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
12575
12591
  }
12576
12592
 
12593
+ .pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
12594
+ margin-inline-end: var(--pf-v6-c-compass--Gap);
12595
+ }
12577
12596
  .pf-v6-c-compass__sidebar.pf-m-end {
12578
- translate: 100%;
12597
+ translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
12579
12598
  grid-area: sidebar-end;
12580
12599
  }
12581
12600
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
12582
- translate: -100%;
12601
+ translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
12602
+ }
12603
+
12604
+ .pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
12605
+ margin-inline-start: var(--pf-v6-c-compass--Gap);
12583
12606
  }
12584
12607
 
12585
12608
  .pf-v6-c-compass__main {
@@ -12615,15 +12638,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
12615
12638
  .pf-v6-c-compass__main-footer {
12616
12639
  display: flex;
12617
12640
  justify-content: center;
12641
+ min-height: 0;
12642
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
12643
+ }
12644
+ .pf-v6-c-compass__main-footer.pf-m-expanded {
12618
12645
  margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
12619
- translate: 0 100%;
12620
12646
  }
12621
12647
 
12622
12648
  .pf-v6-c-compass__footer {
12623
12649
  display: flex;
12624
12650
  grid-column: 1/-1;
12625
12651
  justify-content: center;
12626
- translate: 0 100%;
12652
+ translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
12653
+ }
12654
+ .pf-v6-c-compass__footer.pf-m-expanded {
12655
+ margin-block-start: var(--pf-v6-c-compass--Gap);
12627
12656
  }
12628
12657
 
12629
12658
  .pf-v6-c-compass__message-bar {