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

package/docs/utilities/BackgroundColor/examples/BackgroundColor.md

@@ -1,6 +1,7 @@
 ---
 id: Background color
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---## Examples
 
 ### Standard background colors
@@ -24,11 +25,11 @@ section: utility-classes
 
 These background color utilities can be used to modify the background color of an element. In most cases, using the components with available modifiers should be sufficient to implement most designs, and should be preferred over customizations using these utilities.
 
-Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/design-foundations/colors#contrast-ratios) for more information.
+Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/foundations-and-styles/colors#contrast-ratios) for more information.
 
-Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
+Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/foundations-and-styles/utility-classes/text#inverse-colors).
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-background-color-disabled-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-background-color-disabled-on-lg`
 
 ### Usage
 

package/docs/utilities/BoxShadow/examples/box-shadow.md

@@ -1,6 +1,7 @@
 ---
 id: Box shadow
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './box-shadow.css'
 
 ## Examples

package/docs/utilities/Display/examples/Display.md

@@ -1,6 +1,7 @@
 ---
 id: Display
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './Display.css'
 
 ## Examples
@@ -83,7 +84,7 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`
 
 ### Usage
 

package/docs/utilities/Flex/examples/Flex.md

@@ -1,6 +1,7 @@
 ---
 id: Flex
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './Flex.css'
 
 ## Examples
@@ -370,7 +371,7 @@ section: utility-classes
 
 ### Overview
 
-For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-flex-row-on-lg`
+For these utilities to have effect, the parent element must be set to `display: flex` or `display: inline-flex`. [Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-flex-row-on-lg`
 
 <!-- ## Accessibility
 

package/docs/utilities/Float/examples/Float.md

@@ -1,6 +1,7 @@
 ---
 id: Float
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './Float.css'
 
 ## Examples
@@ -18,7 +19,7 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-float-inline-start-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-float-inline-start-on-lg`
 
 ### Usage
 

package/docs/utilities/Sizing/examples/Sizing.md

@@ -1,6 +1,7 @@
 ---
 id: Sizing
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './Sizing.css'
 
 ## Examples
@@ -22,7 +23,7 @@ section: utility-classes
 
 ### Usage
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-initial-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-initial-on-lg`
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -50,7 +51,7 @@ section: utility-classes
 
 ### Usage
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-25vw-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-w-25vw-on-lg`
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -90,7 +91,7 @@ section: utility-classes
 
 ### Usage
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-initial-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-initial-on-lg`
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -130,7 +131,7 @@ section: utility-classes
 
 ### Usage
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-25vh-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-h-25vh-on-lg`
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
@@ -188,7 +189,7 @@ section: utility-classes
 | `.pf-v6-u-min-width` | `*` | Sets min-width: `var(--pf-v6-u-min-width--MinWidth{-on-[breakpoint]})`. |
 | `.pf-v6-u-max-width` | `*` | Sets min-width: `var(--pf-v6-u-max-width--MaxWidth{-on-[breakpoint]})`. |
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-width--MinWidth-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-width--MinWidth-on-lg`
 
 | Custom property | Applied to | Outcome |
 | -- | -- | -- |
@@ -242,7 +243,7 @@ section: utility-classes
 | `.pf-v6-u-min-height` | `*` | Sets min-height: `var(--pf-v6-u-min-height--MinHeight{-on-[breakpoint]})`. |
 | `.pf-v6-u-max-height` | `*` | Sets max-height: `var(--pf-v6-u-max-height--MaxHeight{-on-[breakpoint]})`. |
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-height--MinHeight-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.--pf-v6-u-min-height--MinHeight-on-lg`
 
 | Custom property | Applied to | Outcome |
 | -- | -- | -- |

package/docs/utilities/Spacing/examples/Spacing.md

@@ -1,6 +1,7 @@
 ---
 id: Spacing
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 pf: 'test'
 ---import './Spacing.css'
 
@@ -118,7 +119,7 @@ pf: 'test'
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-m-sm-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-m-sm-on-lg`
 
 ### Margin properties
 

package/docs/utilities/Text/examples/Text.md

@@ -1,6 +1,7 @@
 ---
 id: Text
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---## Examples
 
 ### Font family
@@ -47,7 +48,7 @@ section: utility-classes
 
 ### Inverse colors
 
-These colors are best used with the ["inverse" background colors](/utility-classes/background-color#inverse-background-colors).
+These colors are best used with the ["inverse" background colors](/foundations-and-styles/utility-classes/background-color#inverse-background-colors).
 
 ```html
 <div class="pf-v6-u-background-color-inverse">
@@ -171,7 +172,7 @@ These text utilities can be used to modify text within the PatternFly framework.
 
 Care should be taken especially when applying text colors, as this can have a negative effect on the readability and accessibility of text. Refer to the information on [contrast ratios](/guidelines/colors/#contrast-ratios) for more information.
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-font-size-xl-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-font-size-xl-on-lg`
 
 ### Usage
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.25",
+  "version": "6.5.0-prerelease.27",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -12267,8 +12267,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;
@@ -12276,10 +12276,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);
@@ -12294,6 +12298,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 {
@@ -12307,6 +12328,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;
 }
@@ -12317,11 +12339,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 {
@@ -12358,10 +12414,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;
@@ -12396,18 +12468,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/patternfly.css

@@ -12414,8 +12414,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;
@@ -12423,10 +12423,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);
@@ -12441,6 +12445,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 {
@@ -12454,6 +12475,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;
 }
@@ -12464,11 +12486,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 {
@@ -12505,10 +12561,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;
@@ -12543,18 +12615,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 {