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

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/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

@@ -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/Icon/examples/Icon.md

@@ -295,7 +295,7 @@ extra large
 
 The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
 
-Refer to the [icons](/foundations-and-styles/icons) page for information about the PatternFly icon set and guidelines for use.
+Refer to the [icons](/foundations-and-styles/iconography) page for information about the PatternFly icon set and guidelines for use.
 
 ### Usage
 

package/docs/components/InputGroup/examples/InputGroup.md

@@ -263,7 +263,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 ### Accessibility
 
-When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
+When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/forms/form).
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |

package/docs/demos/Compass/examples/Compass.md

@@ -9,7 +9,7 @@ wrapperTag: div
 
 ```html isFullscreen isBeta
 <div
-  class="pf-v6-c-compass"
+  class="pf-v6-c-compass pf-m-animate-smoothly"
   style="
         --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
         --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -404,7 +404,7 @@ wrapperTag: div
     </div>
     <div class="pf-v6-c-compass__profile">
       <button
-        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+        class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
         type="button"
         aria-expanded="false"
         aria-label="Menu toggle"
@@ -1323,7 +1323,7 @@ wrapperTag: div
 
 ```html isFullscreen isBeta
 <div
-  class="pf-v6-c-compass"
+  class="pf-v6-c-compass pf-m-animate-smoothly"
   style="
         --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
         --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -1714,7 +1714,7 @@ wrapperTag: div
     </div>
     <div class="pf-v6-c-compass__profile">
       <button
-        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+        class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
         type="button"
         aria-expanded="false"
         aria-label="Menu toggle"
@@ -2859,7 +2859,7 @@ wrapperTag: div
 
 ```html isFullscreen isBeta
 <div
-  class="pf-v6-c-compass"
+  class="pf-v6-c-compass pf-m-animate-smoothly"
   style="
         --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
         --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -3254,7 +3254,7 @@ wrapperTag: div
     </div>
     <div class="pf-v6-c-compass__profile">
       <button
-        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+        class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
         type="button"
         aria-expanded="false"
         aria-label="Menu toggle"
@@ -4850,7 +4850,7 @@ wrapperTag: div
     <div class="pf-v6-c-drawer__content">
       <div class="pf-v6-c-drawer__body">
         <div
-          class="pf-v6-c-compass"
+          class="pf-v6-c-compass pf-m-animate-smoothly"
           style="
                           --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
                           --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -5266,7 +5266,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-c-compass__profile">
               <button
-                class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+                class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
                 type="button"
                 aria-expanded="false"
                 aria-label="Menu toggle"

package/docs/layouts/Bullseye/examples/Bullseye.css

@@ -1,5 +1,5 @@
-.ws-core-l-bullseye .pf-v6-l-bullseye,
-.ws-core-l-bullseye .pf-v6-l-bullseye__item {
+.ws-core-f-bullseye .pf-v6-l-bullseye,
+.ws-core-f-bullseye .pf-v6-l-bullseye__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }