@patternfly/patternfly 6.5.0-prerelease.11 → 6.5.0-prerelease.13

package/base/normalize.scss

@@ -108,11 +108,18 @@
   :where(a) {
     color: var(--pf-t--global--text--color--link--default);
     text-decoration-line: var(--pf-t--global--text-decoration--link--line--default);
+    text-decoration-style: var(--pf-t--global--text-decoration--link--style--default);
+    text-decoration-color: var(--pf-t--global--text-decoration--color--default);
+    text-underline-offset: max(var(--pf-t--global--text-decoration--offset--default), 0.28em);
+    transition: ease text-underline-offset 0.3s;
   }
 
   :where(a:hover, a:focus) {
     color: var(--pf-t--global--text--color--link--hover);
     text-decoration-line: var(--pf-t--global--text-decoration--link--line--hover);
+    text-decoration-style: var(--pf-t--global--text-decoration--link--style--hover);
+    text-decoration-color: var(--pf-t--global--text-decoration--color--hover);
+    text-underline-offset: max(var(--pf-t--global--text-decoration--offset--hover), 0.33em);
   }
 
   :where(

package/base/patternfly-variables.css

@@ -813,6 +813,11 @@
   --pf-t--global--text--color--status--unread--on-default--default: var(--pf-t--global--text--color--inverse);
   --pf-t--global--text--color--status--unread--on-default--hover: var(--pf-t--global--text--color--inverse);
   --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
+  --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
+  --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
+  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
+  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
   --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
   --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);
   --pf-t--global--font--size--heading--md: var(--pf-t--global--font--size--xl);

package/base/tokens/tokens-local.scss

@@ -1,6 +1,16 @@
 // LOCAL TOKENS
 
 @mixin pf-v6-tokens {
+  // temporary until we have updates from design 
+  // new
+  --pf-t--global--text-decoration--color--default: var(--pf-t--global--text--color--default);
+  --pf-t--global--text-decoration--color--hover: var(--pf-t--global--text--color--hover);
+  --pf-t--global--text-decoration--offset--hover: calc(var(--pf-t--global--spacer--xs) + 1px);
+
+  // changed
+  --pf-t--global--text-decoration--link--style--default: var(--pf-t--global--text-decoration--style--200);
+  --pf-t--global--text-decoration--link--style--hover: var(--pf-t--global--text-decoration--style--200);
+
   // TODO Maintaining these in addition to the h1-h6 sizes
   --pf-t--global--font--size--heading--xs: var(--pf-t--global--font--size--md);
   --pf-t--global--font--size--heading--sm: var(--pf-t--global--font--size--lg);

package/components/Button/button.css

@@ -113,10 +113,17 @@
   --pf-v6-c-button--m-link--m-inline--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingBlockEnd: 0;
   --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: 0;
+  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --pf-v6-c-button--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
   --pf-v6-c-button--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
+  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --pf-v6-c-button--m-link--m-inline--TransitionProperty: color, text-underline-offset;
+  --pf-v6-c-button--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
+  --pf-v6-c-button--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -126,10 +133,8 @@
   --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-button--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
-  --pf-v6-c-button--m-link--m-inline--TextDecorationColor: currentcolor;
   --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-button--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
-  --pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor: currentcolor;
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-button--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
@@ -454,12 +459,13 @@
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineEnd);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-link--m-inline--PaddingBlockEnd);
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--PaddingInlineStart);
+  --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-link--m-inline--TransitionDuration);
+  --pf-v6-c-button--TransitionTimingFunction: var(--pf-v6-c-button--m-link--m-inline--TransitionTimingFunction);
+  --pf-v6-c-button--TransitionProperty: var(--pf-v6-c-button--m-link--m-inline--TransitionProperty);
   --pf-v6-c-button--BackgroundColor: transparent;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart);
   --pf-v6-c-button--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--TextDecorationLine);
   --pf-v6-c-button--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--TextDecorationStyle);
-  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
-  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--BackgroundColor: transparent;
   --pf-v6-c-button--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
@@ -468,6 +474,8 @@
   --pf-v6-c-button--m-link--Color: var(--pf-v6-c-button--m-link--m-inline--Color);
   --pf-v6-c-button--m-link__icon--Color: var(--pf-v6-c-button--m-link--m-inline__icon--Color);
   --pf-v6-c-button--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--TextDecorationColor);
+  --pf-v6-c-button--hover--TextDecorationLine: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationLine);
+  --pf-v6-c-button--hover--TextDecorationStyle: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationStyle);
   --pf-v6-c-button--hover--TextDecorationColor: var(--pf-v6-c-button--m-link--m-inline--hover--TextDecorationColor);
   --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-button--m-link--m-inline--hover--Color);
   --pf-v6-c-button--m-link--hover__icon--Color: var(--pf-v6-c-button--m-link--m-inline--hover__icon--Color);
@@ -475,6 +483,7 @@
   --pf-v6-c-button--hover--BorderWidth: 0;
   --pf-v6-c-button--m-clicked--BorderWidth: 0;
   text-align: start;
+  text-underline-offset: var(--pf-v6-c-button--m-link--m-inline--TextUnderlineOffset);
   white-space: normal;
   background: transparent;
   outline-offset: 0.125rem;
@@ -485,6 +494,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
 }
 
+.pf-v6-c-button.pf-m-link.pf-m-inline:hover, .pf-v6-c-button.pf-m-link.pf-m-inline:focus {
+  --pf-v6-c-button--m-link--m-inline--TextUnderlineOffset: var(--pf-v6-c-button--m-link--m-inline--hover--TextUnderlineOffset);
+}
 .pf-v6-c-button.pf-m-link.pf-m-danger {
   --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
   --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);

package/components/Button/button.scss

@@ -131,10 +131,17 @@
   --#{$button}--m-link--m-inline--PaddingInlineEnd: 0;
   --#{$button}--m-link--m-inline--PaddingBlockEnd: 0;
   --#{$button}--m-link--m-inline--PaddingInlineStart: 0;
+  --#{$button}--m-link--m-inline--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --#{$button}--m-link--m-inline--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
   --#{$button}--m-link--m-inline--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--default);
+  --#{$button}--m-link--m-inline--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --#{$button}--m-link--m-inline--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --#{$button}--m-link--m-inline--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$button}--m-link--m-inline--hover--TextUnderlineOffset: var(--pf-t--global--text-decoration--offset--hover);
+  --#{$button}--m-link--m-inline--TransitionProperty: color, text-underline-offset;
+  --#{$button}--m-link--m-inline--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), var(--pf-t--global--motion--duration--lg);
+  --#{$button}--m-link--m-inline--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate), var(--pf-t--global--motion--timing-function--default);
   --#{$button}--m-link--m-inline__progress--InsetInlineStart: var(--pf-t--global--spacer--xs);
   --#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -144,10 +151,8 @@
   --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$button}--m-link--m-inline--Color: var(--pf-t--global--text--color--brand--default);
   --#{$button}--m-link--m-inline__icon--Color: var(--pf-t--global--icon--color--brand--default);
-  --#{$button}--m-link--m-inline--TextDecorationColor: currentcolor;
   --#{$button}--m-link--m-inline--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$button}--m-link--m-inline--hover__icon--Color: var(--pf-t--global--icon--color--brand--hover);
-  --#{$button}--m-link--m-inline--hover--TextDecorationColor: currentcolor;
 
   // Plain
   --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -530,12 +535,13 @@
       --#{$button}--PaddingInlineEnd: var(--#{$button}--m-link--m-inline--PaddingInlineEnd);
       --#{$button}--PaddingBlockEnd: var(--#{$button}--m-link--m-inline--PaddingBlockEnd);
       --#{$button}--PaddingInlineStart: var(--#{$button}--m-link--m-inline--PaddingInlineStart);
+      --#{$button}--TransitionDuration: var(--#{$button}--m-link--m-inline--TransitionDuration);
+      --#{$button}--TransitionTimingFunction: var(--#{$button}--m-link--m-inline--TransitionTimingFunction);
+      --#{$button}--TransitionProperty: var(--#{$button}--m-link--m-inline--TransitionProperty);
       --#{$button}--BackgroundColor: transparent;
       --#{$button}__progress--InsetInlineStart: var(--#{$button}--m-link--m-inline__progress--InsetInlineStart);
       --#{$button}--TextDecorationLine: var(--#{$button}--m-link--m-inline--TextDecorationLine);
       --#{$button}--TextDecorationStyle: var(--#{$button}--m-link--m-inline--TextDecorationStyle);
-      --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
-      --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
       --#{$button}--hover--BackgroundColor: transparent;
       --#{$button}--m-clicked--BackgroundColor: transparent;
       --#{$button}--disabled--BackgroundColor: transparent;
@@ -544,6 +550,8 @@
       --#{$button}--m-link--Color: var(--#{$button}--m-link--m-inline--Color);
       --#{$button}--m-link__icon--Color: var(--#{$button}--m-link--m-inline__icon--Color);
       --#{$button}--TextDecorationColor: var(--#{$button}--m-link--m-inline--TextDecorationColor);
+      --#{$button}--hover--TextDecorationLine: var(--#{$button}--m-link--m-inline--hover--TextDecorationLine);
+      --#{$button}--hover--TextDecorationStyle: var(--#{$button}--m-link--m-inline--hover--TextDecorationStyle);
       --#{$button}--hover--TextDecorationColor: var(--#{$button}--m-link--m-inline--hover--TextDecorationColor);
       --#{$button}--m-link--hover--Color: var(--#{$button}--m-link--m-inline--hover--Color);
       --#{$button}--m-link--hover__icon--Color: var(--#{$button}--m-link--m-inline--hover__icon--Color);
@@ -552,9 +560,15 @@
       --#{$button}--m-clicked--BorderWidth: 0;
 
       text-align: start;
+      text-underline-offset: var(--#{$button}--m-link--m-inline--TextUnderlineOffset);
       white-space: normal;
       background: transparent; // don't show the ripple effect for inline links
       outline-offset: #{pf-size-prem(2px)};
+
+      &:hover,
+      &:focus {
+        --#{$button}--m-link--m-inline--TextUnderlineOffset: var(--#{$button}--m-link--m-inline--hover--TextUnderlineOffset);
+      }
     }
 
     &.pf-m-danger {

package/components/Card/card.css

@@ -245,6 +245,12 @@
   overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
 }
 
+.pf-v6-c-card__subtitle {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 .pf-v6-c-card__actions {
   display: flex;
   gap: var(--pf-v6-c-card__actions--Gap);

package/components/Card/card.scss

@@ -296,7 +296,7 @@
         margin-inline-end: auto;
       }
 
-      margin-inline-start: 0
+      margin-inline-start: 0;
     }
   }
 }
@@ -331,6 +331,12 @@
   overflow-wrap: var(--#{$card}__title-text--OverflowWrap);
 }
 
+.#{$card}__subtitle {
+  padding-block-start: var(--pf-t--global--spacer--sm);
+  font-size: var(--pf-t--global--font--size--body--sm);
+  color: var(--pf-t--global--text--color--subtle);
+}
+
 .#{$card}__actions {
   display: flex;
   gap: var(--#{$card}__actions--Gap);

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