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

package/components/Compass/compass.css

@@ -3,8 +3,8 @@
   --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--xl);
-  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
+  --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__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-compass__nav--PaddingBlockStart: 0;
   --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -12,10 +12,14 @@
   --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --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__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);
@@ -30,6 +34,23 @@
   --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--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--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--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 {
@@ -43,6 +64,7 @@
   justify-content: center;
   height: 100dvh;
   padding: var(--pf-v6-c-compass--Padding);
+  overflow: hidden;
   background-image: var(--pf-v6-c-compass--BackgroundImage);
   background-size: cover;
 }
@@ -53,11 +75,45 @@
   --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 }
 
+.pf-v6-c-compass__header,
+.pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
+.pf-v6-c-compass__main-footer,
+.pf-v6-c-compass__footer {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
+  transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
+  transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
+}
+.pf-v6-c-compass__header.pf-m-expanded,
+.pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
+.pf-v6-c-compass__main-footer.pf-m-expanded,
+.pf-v6-c-compass__footer.pf-m-expanded {
+  --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
+  --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
+  visibility: visible;
+  opacity: 1;
+  translate: 0;
+}
+
+.pf-v6-c-compass__header,
+.pf-v6-c-compass__main-footer,
+.pf-v6-c-compass__footer {
+  max-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;
+}
+
 .pf-v6-c-compass__header {
   display: grid;
   grid-area: header;
   grid-template-columns: 1fr auto 1fr;
   align-items: start;
+  translate: 0 -100%;
 }
 
 .pf-v6-c-compass__profile {
@@ -94,10 +150,26 @@
   --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;
+}
+.pf-v6-c-compass__sidebar.pf-m-expanded {
+  max-width: 9999px;
 }
 .pf-v6-c-compass__sidebar.pf-m-start {
+  translate: -100%;
   grid-area: sidebar-start;
 }
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
+  translate: 100%;
+}
+
+.pf-v6-c-compass__sidebar.pf-m-end {
+  translate: 100%;
+  grid-area: sidebar-end;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
+  translate: -100%;
+}
 
 .pf-v6-c-compass__main {
   display: flex;
@@ -132,18 +204,15 @@
 .pf-v6-c-compass__main-footer {
   display: flex;
   justify-content: center;
-  margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
-}
-
-.pf-v6-c-compass__sidebar.pf-m-end {
-  grid-area: sidebar-end;
-  padding: var(--pf-t--global--spacer--sm);
+  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%;
 }
 
 .pf-v6-c-compass__message-bar {

package/components/Compass/compass.scss

@@ -5,8 +5,8 @@
   --#{$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--xl);
-  --#{$compass}--ColumnGap: var(--pf-t--global--spacer--xl);
+  --#{$compass}--RowGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$compass}--ColumnGap: 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;
@@ -14,10 +14,14 @@
   --#{$compass}__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$compass}__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$compass}__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$compass}__sidebar--Padding: var(--pf-t--global--spacer--sm);
+  --#{$compass}__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$compass}__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$compass}__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$compass}__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$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}__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);
@@ -32,6 +36,24 @@
   --#{$compass}__message-bar--Width: 450px;
   --#{$compass}__message-bar--MinWidth: 300px;
   --#{$compass}__message-bar--MaxWidth: 600px;
+
+  // Section animation
+  --#{$compass}--section--duration: var(--pf-t--global--motion--duration--fade--default);
+  --#{$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--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--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} {
@@ -47,10 +69,11 @@
   justify-content: center;
   height: 100dvh;
   padding: var(--#{$compass}--Padding);
+  overflow: hidden;
   background-image: var(--#{$compass}--BackgroundImage);
   background-size: cover;
 
-  :root:where(.pf-v6-theme-dark) & {
+  :root:where(.#{$pf-prefix}theme-dark) & {
     --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
   }
 
@@ -62,11 +85,43 @@
   }
 }
 
+.#{$compass}__header,
+.#{$compass}__sidebar:is(.pf-m-start, .pf-m-end),
+.#{$compass}__main-footer,
+.#{$compass}__footer {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: var(--#{$compass}--section--TransitionDelay);
+  transition-timing-function: var(--#{$compass}--section--TransitionTimingFunction);
+  transition-duration: var(--#{$compass}--section--TransitionDuration);
+  transition-property: var(--#{$compass}--section--TransitionProperty);
+
+  &.pf-m-expanded {
+    --#{$compass}--section--TransitionDelay: var(--#{$compass}--section--m-expanded--TransitionDelay);
+    --#{$compass}--section--TransitionDuration: var(--#{$compass}--section--m-expanded--TransitionDuration);
+
+    visibility: visible;
+    opacity: 1;
+    translate: 0;
+  }
+}
+
+.#{$compass}__header,
+.#{$compass}__main-footer,
+.#{$compass}__footer {
+  max-height: 0;
+
+  &.pf-m-expanded {
+    max-height: 9999px;
+  }
+}
+
 .#{$compass}__header {
   display: grid;
   grid-area: header;
   grid-template-columns: 1fr auto 1fr;
   align-items: start;
+  translate: 0 -100%;
 }
 
 .#{$compass}__profile {
@@ -107,8 +162,31 @@
   --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
   --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
 
+  max-width: 0;
+
+  &.pf-m-expanded {
+    max-width: 9999px;
+  }
+
   &.pf-m-start {
+    @include pf-v6-bidirectional-style(
+      $prop: translate,
+      $ltr-val: -100%,
+      $rtl-val: 100%,
+    );
+
     grid-area: sidebar-start;
+
+  }
+
+  &.pf-m-end {
+    @include pf-v6-bidirectional-style(
+      $prop: translate,
+      $ltr-val: 100%,
+      $rtl-val: -100%,
+    );
+
+    grid-area: sidebar-end;
   }
 }
 
@@ -137,14 +215,6 @@
   min-height: 0;
   overflow: auto;
 
-  // mask: linear-gradient(
-  //   rgba(0, 0, 0, calc(1 - var(--#{$compass}__scroll-top) / 20)),
-  //   black var(--#{$compass}--feather--length),
-  //   black calc(100% - var(--#{$compass}--feather--length)),
-  //   rgba(0, 0, 0, calc(1 - var(--#{$compass}__scroll-bottom) / 20))
-  // );
-  // backdrop-filter: blur(8px);
-
   > *:last-child {
     flex-grow: 1;
     max-height: 100%;
@@ -154,18 +224,15 @@
 .#{$compass}__main-footer {
   display: flex;
   justify-content: center;
-  margin-block-start: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--RowGap)); // Creates same gap as parent compass grid, mimicking the compass footer
-}
-
-.#{$compass}__sidebar.pf-m-end {
-  grid-area: sidebar-end;
-  padding: var(--pf-t--global--spacer--sm);
+  margin-block-start: var(--#{$compass}__main-footer--MarginBlockStart);
+  translate: 0 100%;
 }
 
 .#{$compass}__footer {
   display: flex;
   grid-column: 1 / -1;
   justify-content: center;
+  translate: 0 100%;
 }
 
 .#{$compass}__message-bar {
@@ -206,38 +273,6 @@
   }
 }
 
-:where(.pf-v6-theme-dark) .#{$compass} {
-  // dark theme goes here
-}
-
-// .pf-chatbot__message-bar {
-//   width: 100%;
-//   min-width: var(--#{$compass}--message-bar--min-width);
-//   max-width: var(--#{$compass}--message-bar--max-width);
-//   padding-inline-start: 0px;
-//   padding-inline-end: 0.8em;
-//   background: transparent;
-//   border: 0;
-
-//   &:hover,
-//   &:focus-within {
-//     box-shadow: var(--pf-t--global--box-shadow--md);
-//   }
-
-//   .pf-chatbot__button--send.pf-m-compact {
-//     width: auto;
-//     height: auto;
-//     padding: var(--pf-v6-c-button--m-small--PaddingBlockStart) var(--pf-v6-c-button--m-small--PaddingInlineEnd)
-//       var(--pf-v6-c-button--m-small--PaddingBlockEnd) var(--pf-v6-c-button--m-small--PaddingInlineStart);
-
-//     .pf-v6-c-button__icon {
-//       min-width: 1lh;
-//     }
-//   }
-// }
-
-
-
 /* stylelint-disable */
 @media (max-width: 1200px) {
   .#{$compass} * {

package/components/_index.css

@@ -3512,8 +3512,8 @@ 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--xl);
-  --pf-v6-c-compass--ColumnGap: var(--pf-t--global--spacer--xl);
+  --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__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-compass__nav--PaddingBlockStart: 0;
   --pf-v6-c-compass__nav--PaddingBlockEnd: 0;
@@ -3521,10 +3521,14 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__nav--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__nav-main--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-compass__nav-main--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-compass__sidebar--Padding: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-compass__sidebar--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --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__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);
@@ -3539,6 +3543,23 @@ 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--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--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--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 {
@@ -3552,6 +3573,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   justify-content: center;
   height: 100dvh;
   padding: var(--pf-v6-c-compass--Padding);
+  overflow: hidden;
   background-image: var(--pf-v6-c-compass--BackgroundImage);
   background-size: cover;
 }
@@ -3562,11 +3584,45 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
 }
 
+.pf-v6-c-compass__header,
+.pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
+.pf-v6-c-compass__main-footer,
+.pf-v6-c-compass__footer {
+  visibility: hidden;
+  opacity: 0;
+  transition-delay: var(--pf-v6-c-compass--section--TransitionDelay);
+  transition-timing-function: var(--pf-v6-c-compass--section--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-compass--section--TransitionDuration);
+  transition-property: var(--pf-v6-c-compass--section--TransitionProperty);
+}
+.pf-v6-c-compass__header.pf-m-expanded,
+.pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end).pf-m-expanded,
+.pf-v6-c-compass__main-footer.pf-m-expanded,
+.pf-v6-c-compass__footer.pf-m-expanded {
+  --pf-v6-c-compass--section--TransitionDelay: var(--pf-v6-c-compass--section--m-expanded--TransitionDelay);
+  --pf-v6-c-compass--section--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--TransitionDuration);
+  visibility: visible;
+  opacity: 1;
+  translate: 0;
+}
+
+.pf-v6-c-compass__header,
+.pf-v6-c-compass__main-footer,
+.pf-v6-c-compass__footer {
+  max-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;
+}
+
 .pf-v6-c-compass__header {
   display: grid;
   grid-area: header;
   grid-template-columns: 1fr auto 1fr;
   align-items: start;
+  translate: 0 -100%;
 }
 
 .pf-v6-c-compass__profile {
@@ -3603,10 +3659,26 @@ 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;
+}
+.pf-v6-c-compass__sidebar.pf-m-expanded {
+  max-width: 9999px;
 }
 .pf-v6-c-compass__sidebar.pf-m-start {
+  translate: -100%;
   grid-area: sidebar-start;
 }
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-start {
+  translate: 100%;
+}
+
+.pf-v6-c-compass__sidebar.pf-m-end {
+  translate: 100%;
+  grid-area: sidebar-end;
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-compass__sidebar.pf-m-end {
+  translate: -100%;
+}
 
 .pf-v6-c-compass__main {
   display: flex;
@@ -3641,18 +3713,15 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__main-footer {
   display: flex;
   justify-content: center;
-  margin-block-start: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--RowGap));
-}
-
-.pf-v6-c-compass__sidebar.pf-m-end {
-  grid-area: sidebar-end;
-  padding: var(--pf-t--global--spacer--sm);
+  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%;
 }
 
 .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-c-compass-basic [class*="pf-v6-c-compass"] {
+#ws-core-p-compass-basic [class*="pf-v6-c-compass"] {
   position: relative;
 }
 
-#ws-core-c-compass-basic [class*="pf-v6-c-compass"]::after {
+#ws-core-p-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';
@@ -12,7 +12,7 @@ cssPrefix: pf-v6-c-compass
 
 ```html isBeta
 <div class="pf-v6-c-compass">
-  <div class="pf-v6-c-compass__header">
+  <div class="pf-v6-c-compass__header pf-m-expanded">
     <div class="pf-v6-c-compass__logo">logo</div>
 
     <div class="pf-v6-c-compass__nav">
@@ -28,7 +28,7 @@ cssPrefix: pf-v6-c-compass
     </div>
     <div class="pf-v6-c-compass__profile">profile</div>
   </div>
-  <div class="pf-v6-c-compass__sidebar pf-m-start">sidebar (start)</div>
+  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">sidebar (start)</div>
 
   <div class="pf-v6-c-compass__main">
     <div class="pf-v6-c-compass__hero">
@@ -41,13 +41,13 @@ cssPrefix: pf-v6-c-compass
     </div>
     <div class="pf-v6-c-compass__content">content</div>
 
-    <div class="pf-v6-c-compass__main-footer">
+    <div class="pf-v6-c-compass__main-footer pf-m-expanded">
       <div class="pf-v6-c-compass__message-bar">message bar</div>
     </div>
   </div>
-  <div class="pf-v6-c-compass__sidebar pf-m-end">sidebar (end)</div>
+  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">sidebar (end)</div>
 
-  <div class="pf-v6-c-compass__footer">footer</div>
+  <div class="pf-v6-c-compass__footer pf-m-expanded">footer</div>
 </div>
 
 ```
@@ -88,3 +88,4 @@ cssPrefix: pf-v6-c-compass
 | `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a compass panel to be full height. |
 | `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a compass panel to have a pill shaped border radius. |
 | `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a compass panel to scroll its overflow. |
+| `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a compass section for expanded styles. |

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). |