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

package/components/Compass/compass.css

@@ -3,8 +3,7 @@
   --pf-v6-c-compass--BackgroundImage--light: none;
   --pf-v6-c-compass--BackgroundImage--dark: none;
   --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-compass__nav--PaddingBlockStart: 0;
   --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -19,7 +18,7 @@
   --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
+  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
   --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
   --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -34,32 +33,44 @@
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
-  --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-compass--section--slide--length--header: 100%;
+  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
+  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
+  --pf-v6-c-compass--section--slide--length--footer: 100%;
+  --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
-  --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
-  --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);
+  --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
+  --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
+  --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);
   --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
-  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
+  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
   --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-compass {
-    --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
-    --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
-    --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);
-    --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
-    --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;
+    --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
+    --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);
+    --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;
+  }
+  .pf-v6-c-compass.pf-m-animate-smoothly {
+    --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
+    --pf-v6-c-compass--section--slide--length--header: 10rem;
+    --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
+    --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
+    --pf-v6-c-compass--section--slide--length--footer: 6rem;
+    --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);
+    --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
+    --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);
   }
 }
 
 .pf-v6-c-compass {
+  interpolate-size: allow-keywords;
   display: grid;
   grid-template-areas: "header header header" "sidebar-start main sidebar-end";
   grid-template-rows: auto 1fr;
   grid-template-columns: auto 1fr auto;
   grid-auto-rows: auto;
-  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
   align-items: center;
   justify-content: center;
   height: 100dvh;
@@ -79,6 +90,7 @@
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
 .pf-v6-c-compass__main-footer,
 .pf-v6-c-compass__footer {
+  margin: 0;
   visibility: hidden;
   opacity: 0;
   transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -100,12 +112,12 @@
 .pf-v6-c-compass__header,
 .pf-v6-c-compass__main-footer,
 .pf-v6-c-compass__footer {
-  max-height: 0;
+  height: 0;
 }
 .pf-v6-c-compass__header.pf-m-expanded,
 .pf-v6-c-compass__main-footer.pf-m-expanded,
 .pf-v6-c-compass__footer.pf-m-expanded {
-  max-height: 9999px;
+  height: auto;
 }
 
 .pf-v6-c-compass__header {
@@ -113,7 +125,10 @@
   grid-area: header;
   grid-template-columns: 1fr auto 1fr;
   align-items: start;
-  translate: 0 -100%;
+  translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
+}
+.pf-v6-c-compass__header.pf-m-expanded {
+  margin-block-end: var(--pf-v6-c-compass--Gap);
 }
 
 .pf-v6-c-compass__profile {
@@ -150,25 +165,33 @@
   --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
   --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
   --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
-  max-width: 0;
+  display: flex;
+  width: 0;
 }
 .pf-v6-c-compass__sidebar.pf-m-expanded {
-  max-width: 9999px;
+  width: auto;
 }
 .pf-v6-c-compass__sidebar.pf-m-start {
-  translate: -100%;
+  translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
   grid-area: sidebar-start;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
-  translate: 100%;
+  translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
 }
 
+.pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
+  margin-inline-end: var(--pf-v6-c-compass--Gap);
+}
 .pf-v6-c-compass__sidebar.pf-m-end {
-  translate: 100%;
+  translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
   grid-area: sidebar-end;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
-  translate: -100%;
+  translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
+}
+
+.pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
+  margin-inline-start: var(--pf-v6-c-compass--Gap);
 }
 
 .pf-v6-c-compass__main {
@@ -204,15 +227,21 @@
 .pf-v6-c-compass__main-footer {
   display: flex;
   justify-content: center;
+  min-height: 0;
+  translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
+}
+.pf-v6-c-compass__main-footer.pf-m-expanded {
   margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
-  translate: 0 100%;
 }
 
 .pf-v6-c-compass__footer {
   display: flex;
   grid-column: 1/-1;
   justify-content: center;
-  translate: 0 100%;
+  translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
+}
+.pf-v6-c-compass__footer.pf-m-expanded {
+  margin-block-start: var(--pf-v6-c-compass--Gap);
 }
 
 .pf-v6-c-compass__message-bar {

package/components/Compass/compass.scss

@@ -5,8 +5,7 @@
   --#{$compass}--BackgroundImage--light: none;
   --#{$compass}--BackgroundImage--dark: none;
   --#{$compass}--Padding: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$compass}--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$compass}--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$compass}--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --#{$compass}__nav--PaddingBlockStart: 0;
   --#{$compass}__nav--PaddingBlockEnd: 0;
@@ -21,7 +20,7 @@
   --#{$compass}__main--RowGap: var(--pf-t--global--spacer--md);
   --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
   --#{$compass}__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
-  --#{$compass}__main-footer--MarginBlockStart: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--RowGap)); // Creates same gap as parent compass grid, mimicking the compass footer
+  --#{$compass}__main-footer--MarginBlockStart: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--Gap)); // Creates same gap as parent compass grid, mimicking the compass footer
   --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
   --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -38,25 +37,40 @@
   --#{$compass}__message-bar--MaxWidth: 600px;
 
   // Section animation
-  --#{$compass}--section--duration: var(--pf-t--global--motion--duration--fade--default);
+  --#{$compass}--section--slide--length--header: 100%;
+  --#{$compass}--section--slide--length--sidebar: 100%;
+  --#{$compass}--section--slide--length--main-footer: 100%;
+  --#{$compass}--section--slide--length--footer: 100%;
+  --#{$compass}--section--duration: var(--pf-t--global--motion--duration--fade--short);
   --#{$compass}--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, 0s, 0s, 0s;
-  --#{$compass}--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
-  --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
+  --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, 0s, 0s, 0s, 0s;
+  --#{$compass}--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
+  --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
   --#{$compass}--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
-  --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--duration), 0s, 0s, 0s, 0s;
+  --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
   --#{$compass}--section--m-expanded--TransitionDelay: 0s;
 
   @media screen and (prefers-reduced-motion: no-preference) {
-    --#{$compass}--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
-    --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s;
-    --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
-    --#{$compass}--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
-    --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s;
+    --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), 0s, 0s, 0s;
+    --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
+    --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, var(--#{$compass}--section--m-expanded--duration), 0s, 0s, 0s;
+
+    &.pf-m-animate-smoothly {
+      --#{$compass}--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
+      --#{$compass}--section--slide--length--header: 10rem;
+      --#{$compass}--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
+      --#{$compass}--section--slide--length--main-footer: 6rem;
+      --#{$compass}--section--slide--length--footer: 6rem;
+      --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
+      --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, 0s, 0s;
+      --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, var(--#{$compass}--section--m-expanded--duration), var(--#{$compass}--section--m-expanded--duration), var(--#{$compass}--section--m-expanded--duration);
+    }
   }
 }
 
 .#{$compass} {
+  // stylelint-disable-next-line
+  interpolate-size: allow-keywords;
   display: grid;
   grid-template-areas:
     "header header header"
@@ -64,7 +78,6 @@
   grid-template-rows: auto 1fr;
   grid-template-columns: auto 1fr auto;
   grid-auto-rows: auto;
-  gap: var(--#{$compass}--RowGap) var(--#{$compass}--ColumnGap);
   align-items: center;
   justify-content: center;
   height: 100dvh;
@@ -89,6 +102,7 @@
 .#{$compass}__sidebar:is(.pf-m-start, .pf-m-end),
 .#{$compass}__main-footer,
 .#{$compass}__footer {
+  margin: 0;
   visibility: hidden;
   opacity: 0;
   transition-delay: var(--#{$compass}--section--TransitionDelay);
@@ -109,10 +123,10 @@
 .#{$compass}__header,
 .#{$compass}__main-footer,
 .#{$compass}__footer {
-  max-height: 0;
+  height: 0;
 
   &.pf-m-expanded {
-    max-height: 9999px;
+    height: auto;
   }
 }
 
@@ -121,7 +135,11 @@
   grid-area: header;
   grid-template-columns: 1fr auto 1fr;
   align-items: start;
-  translate: 0 -100%;
+  translate: 0 calc(var(--#{$compass}--section--slide--length--header) * -1);
+
+  &.pf-m-expanded {
+    margin-block-end: var(--#{$compass}--Gap);
+  }
 }
 
 .#{$compass}__profile {
@@ -162,31 +180,39 @@
   --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
   --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
 
-  max-width: 0;
+  display: flex;
+  width: 0;
 
   &.pf-m-expanded {
-    max-width: 9999px;
+    width: auto;
   }
 
   &.pf-m-start {
     @include pf-v6-bidirectional-style(
       $prop: translate,
-      $ltr-val: -100%,
-      $rtl-val: 100%,
+      $ltr-val: calc(var(--#{$compass}--section--slide--length--sidebar) * -1),
+      $rtl-val: var(--#{$compass}--section--slide--length--sidebar),
     );
 
     grid-area: sidebar-start;
 
+    &.pf-m-expanded {
+      margin-inline-end: var(--#{$compass}--Gap);
+    }
   }
 
   &.pf-m-end {
     @include pf-v6-bidirectional-style(
       $prop: translate,
-      $ltr-val: 100%,
-      $rtl-val: -100%,
+      $ltr-val: var(--#{$compass}--section--slide--length--sidebar),
+      $rtl-val: calc(var(--#{$compass}--section--slide--length--sidebar) * -1),
     );
 
     grid-area: sidebar-end;
+
+    &.pf-m-expanded {
+      margin-inline-start: var(--#{$compass}--Gap);
+    }
   }
 }
 
@@ -224,15 +250,23 @@
 .#{$compass}__main-footer {
   display: flex;
   justify-content: center;
-  margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
-  translate: 0 100%;
+  min-height: 0;
+  translate: 0 var(--#{$compass}--section--slide--length--main-footer);
+
+  &.pf-m-expanded {
+    margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
+  }
 }
 
 .#{$compass}__footer {
   display: flex;
   grid-column: 1 / -1;
   justify-content: center;
-  translate: 0 100%;
+  translate: 0 var(--#{$compass}--section--slide--length--main-footer);
+
+  &.pf-m-expanded {
+    margin-block-start: var(--#{$compass}--Gap);
+  }
 }
 
 .#{$compass}__message-bar {

package/components/_index.css

@@ -3512,8 +3512,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass--BackgroundImage--light: none;
   --pf-v6-c-compass--BackgroundImage--dark: none;
   --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-compass__nav--PaddingBlockStart: 0;
   --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -3528,7 +3527,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__main--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
+  --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
   --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
   --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -3543,32 +3542,44 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
-  --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-compass--section--slide--length--header: 100%;
+  --pf-v6-c-compass--section--slide--length--sidebar: 100%;
+  --pf-v6-c-compass--section--slide--length--main-footer: 100%;
+  --pf-v6-c-compass--section--slide--length--footer: 100%;
+  --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-compass--section--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
-  --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, max-height, max-width;
-  --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);
+  --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s, 0s;
+  --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
+  --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);
   --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--fade--default);
-  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s, 0s;
+  --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s, 0s, 0s;
   --pf-v6-c-compass--section--m-expanded--TransitionDelay: 0s;
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-compass {
-    --pf-v6-c-compass--section--duration: var(--pf-t--global--motion--duration--slide-out--default);
-    --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s;
-    --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);
-    --pf-v6-c-compass--section--m-expanded--duration: var(--pf-t--global--motion--duration--slide-in--default);
-    --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;
+    --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
+    --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);
+    --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;
+  }
+  .pf-v6-c-compass.pf-m-animate-smoothly {
+    --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
+    --pf-v6-c-compass--section--slide--length--header: 10rem;
+    --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
+    --pf-v6-c-compass--section--slide--length--main-footer: 6rem;
+    --pf-v6-c-compass--section--slide--length--footer: 6rem;
+    --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);
+    --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, 0s, 0s;
+    --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);
   }
 }
 
 .pf-v6-c-compass {
+  interpolate-size: allow-keywords;
   display: grid;
   grid-template-areas: "header header header" "sidebar-start main sidebar-end";
   grid-template-rows: auto 1fr;
   grid-template-columns: auto 1fr auto;
   grid-auto-rows: auto;
-  gap: var(--pf-v6-c-compass--RowGap) var(--pf-v6-c-compass--ColumnGap);
   align-items: center;
   justify-content: center;
   height: 100dvh;
@@ -3588,6 +3599,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
 .pf-v6-c-compass__main-footer,
 .pf-v6-c-compass__footer {
+  margin: 0;
   visibility: hidden;
   opacity: 0;
   transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
@@ -3609,12 +3621,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__header,
 .pf-v6-c-compass__main-footer,
 .pf-v6-c-compass__footer {
-  max-height: 0;
+  height: 0;
 }
 .pf-v6-c-compass__header.pf-m-expanded,
 .pf-v6-c-compass__main-footer.pf-m-expanded,
 .pf-v6-c-compass__footer.pf-m-expanded {
-  max-height: 9999px;
+  height: auto;
 }
 
 .pf-v6-c-compass__header {
@@ -3622,7 +3634,10 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   grid-area: header;
   grid-template-columns: 1fr auto 1fr;
   align-items: start;
-  translate: 0 -100%;
+  translate: 0 calc(var(--pf-v6-c-compass--section--slide--length--header) * -1);
+}
+.pf-v6-c-compass__header.pf-m-expanded {
+  margin-block-end: var(--pf-v6-c-compass--Gap);
 }
 
 .pf-v6-c-compass__profile {
@@ -3659,25 +3674,33 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
   --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
   --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
-  max-width: 0;
+  display: flex;
+  width: 0;
 }
 .pf-v6-c-compass__sidebar.pf-m-expanded {
-  max-width: 9999px;
+  width: auto;
 }
 .pf-v6-c-compass__sidebar.pf-m-start {
-  translate: -100%;
+  translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
   grid-area: sidebar-start;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
-  translate: 100%;
+  translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
 }
 
+.pf-v6-c-compass__sidebar.pf-m-start.pf-m-expanded {
+  margin-inline-end: var(--pf-v6-c-compass--Gap);
+}
 .pf-v6-c-compass__sidebar.pf-m-end {
-  translate: 100%;
+  translate: var(--pf-v6-c-compass--section--slide--length--sidebar);
   grid-area: sidebar-end;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
-  translate: -100%;
+  translate: calc(var(--pf-v6-c-compass--section--slide--length--sidebar) * -1);
+}
+
+.pf-v6-c-compass__sidebar.pf-m-end.pf-m-expanded {
+  margin-inline-start: var(--pf-v6-c-compass--Gap);
 }
 
 .pf-v6-c-compass__main {
@@ -3713,15 +3736,21 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__main-footer {
   display: flex;
   justify-content: center;
+  min-height: 0;
+  translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
+}
+.pf-v6-c-compass__main-footer.pf-m-expanded {
   margin-block-start: var(--pf-v6-c-compass__main-footer--MarginBlockStart);
-  translate: 0 100%;
 }
 
 .pf-v6-c-compass__footer {
   display: flex;
   grid-column: 1/-1;
   justify-content: center;
-  translate: 0 100%;
+  translate: 0 var(--pf-v6-c-compass--section--slide--length--main-footer);
+}
+.pf-v6-c-compass__footer.pf-m-expanded {
+  margin-block-start: var(--pf-v6-c-compass--Gap);
 }
 
 .pf-v6-c-compass__message-bar {

package/docs/components/Avatar/examples/Avatar.md

@@ -88,7 +88,7 @@ The avatar component provides a default SVG icon. If an image is used it should
 | -- | -- | -- |
 | `.pf-v6-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
 | `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/components/Brand/examples/Brand.md

@@ -83,5 +83,5 @@ Simple brand component.
 | -- | -- | -- |
 | `.pf-v6-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
 | `.pf-m-picture` | `.pf-v6-c-brand` |  Modifies a brand image to a picture. |
-| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/components/Compass/examples/Compass.css

@@ -1,8 +1,8 @@
-#ws-core-p-compass-basic [class*="pf-v6-c-compass"] {
+#ws-core-a-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-core-p-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-core-a-compass-basic [class*="pf-v6-c-compass"]::after {
   position: absolute;
   inset: 0;
   pointer-events: none;

package/docs/components/Compass/examples/Compass.md

@@ -1,7 +1,7 @@
 ---
 id: 'Compass'
 beta: true
-section: PatternFly-AI
+section: AI
 subsection: Generative UIs
 cssPrefix: pf-v6-c-compass
 ---import './Compass.css';
@@ -11,7 +11,7 @@ cssPrefix: pf-v6-c-compass
 ### Basic
 
 ```html isBeta
-<div class="pf-v6-c-compass">
+<div class="pf-v6-c-compass pf-m-animate-smoothly">
   <div class="pf-v6-c-compass__header pf-m-expanded">
     <div class="pf-v6-c-compass__logo">logo</div>
 

package/docs/components/DataList/examples/DataList.md

@@ -305,8 +305,8 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
 | `.pf-v6-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
 | `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Exandable data list
 
@@ -2116,7 +2116,7 @@ When a list item includes more than one block of content, it can be difficult fo
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/tokens/all-patternfly-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
 
 ## Documentation
 

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -1669,8 +1669,8 @@ description-list--aria-label="Horizontal 2 column auto term width example" descr
 | `.pf-m-auto-column-widths` | `.pf-v6-c-description-list` | Modifies the description list to format automatically. |
 | `.pf-m-inline-grid` | `.pf-v6-c-description-list` | Modifies the description list display to inline-grid. |
 | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list number of columns. |
-| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element. |
 | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element to -1. |

package/docs/components/Divider/examples/Divider.md

@@ -134,5 +134,5 @@ The divider renders as an `<hr>` by default. It is possible to make the divider
 | `.pf-v6-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
 | `.pf-m-vertical` | `.pf-v6-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |