@patternfly/patternfly 6.5.0-prerelease.10 → 6.5.0-prerelease.12

package/components/Compass/compass.css

@@ -26,7 +26,7 @@
   --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__hero--gradient--angle: 289deg;
+  --pf-v6-c-compass__hero--gradient--angle: 109deg;
   --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
@@ -151,9 +151,6 @@
 .pf-v6-c-compass__panel.pf-m-scrollable {
   overflow: auto;
 }
-.pf-v6-c-compass__panel.pf-m-padding {
-  padding: 0;
-}
 
 .pf-v6-c-compass__hero {
   display: flex;
@@ -187,21 +184,24 @@
 
 /* stylelint-disable */
 @media (max-width: 1200px) {
-  .pf-v6-c-compass {
+  .pf-v6-c-compass * {
     display: none;
   }
-  body {
+  .pf-v6-c-compass {
+    position: relative;
     display: grid;
-    min-height: 100%;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
     place-content: center;
+    gap: 0;
   }
-  body::after {
+  .pf-v6-c-compass::after {
     padding: 1em;
     border-radius: var(--pf-t--global--border--radius--large);
     background: var(--pf-t--global--background--color--primary--default);
     content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
     width: 80%;
-    max-width: 360px;
+    width: 300px;
     border: 1px solid var(--pf-t--global--border--color--default);
     box-shadow: var(--pf-t--global--box-shadow--md);
     white-space: pre-wrap;

package/components/Compass/compass.scss

@@ -28,15 +28,15 @@
   --#{$compass}__message-bar--Width: 450px;
   --#{$compass}__message-bar--MinWidth: 300px;
   --#{$compass}__message-bar--MaxWidth: 600px;
-  --#{$compass}__hero--gradient--angle: 289deg;
+  --#{$compass}__hero--gradient--angle: 109deg;
   --#{$compass}__hero--gradient--stop-1--light: transparent;
   --#{$compass}__hero--gradient--stop-2--light: transparent;
   --#{$compass}__hero--gradient--stop-3--light: transparent;
-  --#{$compass}__hero--gradient--stop-1--dark: transparent; // #000;
-  --#{$compass}__hero--gradient--stop-2--dark: transparent; // #1b0d33;
-  --#{$compass}__hero--gradient--stop-3--dark: transparent; //  #3d2785;
-  --#{$compass}__hero--BackgroundImage--light: none; // url("./assets/images/compass--hero-bg.png");
-  --#{$compass}__hero--BackgroundImage--dark: none; // url("./assets/images/compass--hero-bg.png");
+  --#{$compass}__hero--gradient--stop-1--dark: transparent;
+  --#{$compass}__hero--gradient--stop-2--dark: transparent;
+  --#{$compass}__hero--gradient--stop-3--dark: transparent;
+  --#{$compass}__hero--BackgroundImage--light: none;
+  --#{$compass}__hero--BackgroundImage--dark: none;
   --#{$compass}__hero-body--Width: 800px;
   --#{$compass}__hero-body--MaxWidth: 80%;
 }
@@ -174,10 +174,6 @@
   &.pf-m-scrollable {
     overflow: auto;
   }
-
-  &.pf-m-padding {
-    padding: 0;
-  }
 }
 
 .#{$compass}__hero {
@@ -251,13 +247,16 @@
 
 /* stylelint-disable */
 @media (max-width: 1200px) {
-  .#{$compass} {
+  .#{$compass} * {
     display: none;
   }
-  body {
+  .#{$compass} {
+    position: relative;
     display: grid;
-    min-height: 100%;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
     place-content: center;
+    gap: 0;
 
     &::after {
       padding: 1em;
@@ -265,7 +264,7 @@
       background: var(--pf-t--global--background--color--primary--default);
       content: "This page is optimized for wide screens.\a\a Please view on a larger display and/or make your browser window wider.";
       width: 80%;
-      max-width: 360px;
+      width: 300px;
       border: 1px solid var(--pf-t--global--border--color--default);
       box-shadow: var(--pf-t--global--box-shadow--md);
       white-space: pre-wrap;

package/components/Drawer/drawer.css

@@ -1,4 +1,5 @@
 .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -29,6 +30,7 @@
   --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
   --pf-v6-c-drawer__panel--Opacity: 0;
   --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+  --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -44,6 +46,13 @@
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -160,6 +169,8 @@
 .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
+  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
 }
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -183,7 +194,7 @@
   --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
 }
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
   visibility: visible;
 }
@@ -195,7 +206,7 @@
   transform: translateX(0);
 }
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translate(0, -100%);
+  transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
 }
 .pf-v6-c-drawer.pf-m-resizing {
   --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -204,6 +215,21 @@
 .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
   pointer-events: auto;
 }
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-pill {
+    --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
+    --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
+    --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
+    --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+    --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+  }
+  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
+    border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
+    border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
+    border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-drawer__section {
   flex-grow: 0;
@@ -219,6 +245,7 @@
 .pf-v6-c-drawer__main {
   display: flex;
   flex: 1;
+  gap: var(--pf-v6-c-drawer__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -257,6 +284,8 @@
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
   order: 1;
   max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+  margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
+  margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
   overflow: auto;
   visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -265,6 +294,7 @@
   border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
   border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
   border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
+  border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
   opacity: var(--pf-v6-c-drawer__panel--Opacity);
   transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -452,7 +482,7 @@
     padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
   }
   .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-    transform: translateX(0);
+    transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
   }
   .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
     --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -464,6 +494,8 @@
     --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
     --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
     --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+    --pf-v6-c-drawer__panel--MarginBlock: initial;
+    --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
     min-width: auto;
     min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
   }

package/components/Drawer/drawer.scss

@@ -6,6 +6,9 @@ $pf-v6-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl",
 $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 @include pf-root($drawer) {
+  // Main
+  --#{$drawer}--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
+
   // Section
   --#{$drawer}__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -41,6 +44,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__panel--TransitionProperty: opacity, visibility, transform; // by default, fade the drawer
   --#{$drawer}__panel--Opacity: 0;
   --#{$drawer}--m-expanded__panel--Opacity: 1;
+  --#{$drawer}--m-expanded__panel--inset: 0px;
   --#{$drawer}__panel--FlexBasis: 100%;
   --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
   --#{$drawer}__panel--md--FlexBasis: 50%;
@@ -56,6 +60,13 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --#{$drawer}--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: #{pf-size-prem(24px)};
   --#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight: #{pf-size-prem(24px)};
+  --#{$drawer}--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --#{$drawer}--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$drawer}--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --#{$drawer}--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$drawer}--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$drawer}--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$drawer}--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
 
   @media screen and (prefers-reduced-motion: no-preference) {
     --#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
@@ -200,7 +211,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   &.pf-m-static {
     --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--BackgroundColor);
     --#{$drawer}__panel--BorderInlineStartWidth: var(--#{$drawer}--m-inline__panel--after--Width);
-    
+    --#{$drawer}--m-pill__main--Gap: var(--#{$drawer}--m-pill--m-inline__main--Gap);
+    --#{$drawer}--m-pill--m-expanded__panel--inset: 0;
 
     > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
       padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
@@ -236,7 +248,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     > .#{$drawer}__main > .#{$drawer}__panel {
       @include pf-v6-bidirectional-style(
         $prop: transform,
-        $ltr-val: translateX(-100%),
+        $ltr-val: translateX(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset))),
         $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
       );
 
@@ -250,7 +262,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     }
 
     &.pf-m-panel-bottom > .#{$drawer}__main > .#{$drawer}__panel {
-      transform: translate(0, -100%);
+      transform: translate(0, calc(-100% - var(--#{$drawer}--m-expanded__panel--inset)));
     }
   }
   // stylelint-enable
@@ -264,6 +276,23 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       pointer-events: auto;
     }
   }
+
+  &.pf-m-pill {
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
+      --#{$drawer}__main--Gap: var(--#{$drawer}--m-pill__main--Gap, revert);
+      --#{$drawer}__panel--BorderColor: var(--#{$drawer}--m-pill__panel--BorderColor);
+      --#{$drawer}__panel--BorderRadius: var(--#{$drawer}--m-pill__panel--BorderRadius);
+      --#{$drawer}--m-expanded__panel--inset: var(--#{$drawer}--m-pill--m-expanded__panel--inset);
+      --#{$drawer}__panel--MarginBlock: var(--#{$drawer}--m-pill--m-expanded__panel--inset);
+
+      > .#{$drawer}__main > .#{$drawer}__panel {
+        border-block-start-width: var(--#{$drawer}--m-pill__panel--BorderBlockStartWidth);
+        border-block-end-width: var(--#{$drawer}--m-pill__panel--BorderBlockEndWidth);
+        border-inline-start-width: var(--#{$drawer}--m-pill__panel--BorderInlineStartWidth);
+        border-inline-end-width: var(--#{$drawer}--m-pill__panel--BorderInlineEndWidth);
+      }
+    }
+  }
 }
 
 // Header area
@@ -284,6 +313,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 .#{$drawer}__main {
   display: flex;
   flex: 1;
+  gap: var(--#{$drawer}__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -328,6 +358,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   row-gap: var(--#{$drawer}__panel--RowGap);
   order: 1;
   max-height: var(--#{$drawer}__panel--MaxHeight);
+  margin-block: var(--#{$drawer}__panel--MarginBlock, revert);
+  margin-inline: var(--#{$drawer}__panel--MarginInline, revert);
   overflow: auto;
   visibility: hidden; // hidden by default
   background-color: var(--#{$drawer}__panel--BackgroundColor);
@@ -336,6 +368,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   border-block-end-width: var(--#{$drawer}__panel--BorderBlockEndWidth);
   border-inline-start-width: var(--#{$drawer}__panel--BorderInlineStartWidth);
   border-inline-end-width: var(--#{$drawer}__panel--BorderInlineEndWidth);
+  border-radius: var(--#{$drawer}__panel--BorderRadius, revert);
   box-shadow: var(--#{$drawer}__panel--BoxShadow);
   opacity: var(--#{$drawer}__panel--Opacity);
   transition-delay: var(--#{$drawer}__panel--TransitionDelay);
@@ -565,7 +598,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     }
 
     &.pf-m-expanded > .#{$drawer}__main > .#{$drawer}__panel {
-      transform: translateX(0);
+      transform: translateX(var(--#{$drawer}--m-expanded__panel--inset));
     }
 
     > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable {
@@ -583,6 +616,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     --#{$drawer}__panel--FlexBasis--min: var(--#{$drawer}--m-panel-bottom__panel--FlexBasis--min);
     --#{$drawer}__panel--BorderInlineStartWidth: 0; // turn off default left border
     --#{$drawer}__panel--BorderBlockStartWidth: var(--#{$drawer}--m-panel-bottom__panel--after--Height); // set the border width based on the old height variable
+    --#{$drawer}__panel--MarginBlock: initial;
+    --#{$drawer}__panel--MarginInline: var(--#{$drawer}--m-expanded__panel--inset);
 
     min-width: auto;
     min-height: var(--#{$drawer}--m-panel-bottom__panel--md--MinHeight);

package/components/_index.css

@@ -3517,7 +3517,7 @@ 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__hero--gradient--angle: 289deg;
+  --pf-v6-c-compass__hero--gradient--angle: 109deg;
   --pf-v6-c-compass__hero--gradient--stop-1--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-2--light: transparent;
   --pf-v6-c-compass__hero--gradient--stop-3--light: transparent;
@@ -3642,9 +3642,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass__panel.pf-m-scrollable {
   overflow: auto;
 }
-.pf-v6-c-compass__panel.pf-m-padding {
-  padding: 0;
-}
 
 .pf-v6-c-compass__hero {
   display: flex;
@@ -3678,21 +3675,24 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 
 /* stylelint-disable */
 @media (max-width: 1200px) {
-  .pf-v6-c-compass {
+  .pf-v6-c-compass * {
     display: none;
   }
-  body {
+  .pf-v6-c-compass {
+    position: relative;
     display: grid;
-    min-height: 100%;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
     place-content: center;
+    gap: 0;
   }
-  body::after {
+  .pf-v6-c-compass::after {
     padding: 1em;
     border-radius: var(--pf-t--global--border--radius--large);
     background: var(--pf-t--global--background--color--primary--default);
     content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
     width: 80%;
-    max-width: 360px;
+    width: 300px;
     border: 1px solid var(--pf-t--global--border--color--default);
     box-shadow: var(--pf-t--global--box-shadow--md);
     white-space: pre-wrap;
@@ -5960,6 +5960,7 @@ ul) {
 }
 
 .pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -5990,6 +5991,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
   --pf-v6-c-drawer__panel--Opacity: 0;
   --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
+  --pf-v6-c-drawer--m-expanded__panel--inset: 0px;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -6005,6 +6007,13 @@ ul) {
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6121,6 +6130,8 @@ ul) {
 .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
+  --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
 }
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -6144,7 +6155,7 @@ ul) {
   --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
 }
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(-100%);
+  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
   visibility: visible;
 }
@@ -6156,7 +6167,7 @@ ul) {
   transform: translateX(0);
 }
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-bottom > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translate(0, -100%);
+  transform: translate(0, calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
 }
 .pf-v6-c-drawer.pf-m-resizing {
   --pf-v6-c-drawer__panel--TransitionProperty: none;
@@ -6165,6 +6176,21 @@ ul) {
 .pf-v6-c-drawer.pf-m-resizing .pf-v6-c-drawer__splitter {
   pointer-events: auto;
 }
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-drawer.pf-m-pill {
+    --pf-v6-c-drawer__main--Gap: var(--pf-v6-c-drawer--m-pill__main--Gap, revert);
+    --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer--m-pill__panel--BorderColor);
+    --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
+    --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+    --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
+  }
+  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
+    border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
+    border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
+    border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+  }
+}
 
 .pf-v6-c-drawer__section {
   flex-grow: 0;
@@ -6180,6 +6206,7 @@ ul) {
 .pf-v6-c-drawer__main {
   display: flex;
   flex: 1;
+  gap: var(--pf-v6-c-drawer__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -6218,6 +6245,8 @@ ul) {
   row-gap: var(--pf-v6-c-drawer__panel--RowGap);
   order: 1;
   max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
+  margin-block: var(--pf-v6-c-drawer__panel--MarginBlock, revert);
+  margin-inline: var(--pf-v6-c-drawer__panel--MarginInline, revert);
   overflow: auto;
   visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
@@ -6226,6 +6255,7 @@ ul) {
   border-block-end-width: var(--pf-v6-c-drawer__panel--BorderBlockEndWidth);
   border-inline-start-width: var(--pf-v6-c-drawer__panel--BorderInlineStartWidth);
   border-inline-end-width: var(--pf-v6-c-drawer__panel--BorderInlineEndWidth);
+  border-radius: var(--pf-v6-c-drawer__panel--BorderRadius, revert);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
   opacity: var(--pf-v6-c-drawer__panel--Opacity);
   transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
@@ -6413,7 +6443,7 @@ ul) {
     padding-inline-end: var(--pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd);
   }
   .pf-v6-c-drawer.pf-m-panel-left.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-    transform: translateX(0);
+    transform: translateX(var(--pf-v6-c-drawer--m-expanded__panel--inset));
   }
   .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable > .pf-v6-c-drawer__splitter {
     --pf-v6-c-drawer__splitter-handle--InsetInlineStart: var(--pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart);
@@ -6425,6 +6455,8 @@ ul) {
     --pf-v6-c-drawer__panel--FlexBasis--min: var(--pf-v6-c-drawer--m-panel-bottom__panel--FlexBasis--min);
     --pf-v6-c-drawer__panel--BorderInlineStartWidth: 0;
     --pf-v6-c-drawer__panel--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-panel-bottom__panel--after--Height);
+    --pf-v6-c-drawer__panel--MarginBlock: initial;
+    --pf-v6-c-drawer__panel--MarginInline: var(--pf-v6-c-drawer--m-expanded__panel--inset);
     min-width: auto;
     min-height: var(--pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight);
   }

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

@@ -0,0 +1,11 @@
+#ws-core-c-compass-basic [class*="pf-v6-c-compass"] {
+  position: relative;
+}
+
+#ws-core-c-compass-basic [class*="pf-v6-c-compass"]::after {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-t--global--border--width--regular) dashed var(--pf-t--global--border--color--default);
+}