@patternfly/patternfly 6.5.0-prerelease.6 → 6.5.0-prerelease.60

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,29 @@
   --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__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-drawer {
+    --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
+    --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
+    --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+    --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+    --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
+    --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
+    --pf-v6-c-drawer__panel--Opacity: 1;
+  }
+}
+.pf-v6-c-drawer {
   --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);
@@ -106,6 +131,17 @@
   --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
   --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
   --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-drawer {
+    --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
+  }
+  .pf-v6-c-drawer.pf-m-panel-bottom {
+    --pf-v6-c-drawer__panel--MinWidth: auto;
+    --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
+  }
+}
+.pf-v6-c-drawer {
   --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
   --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
   --pf-v6-c-drawer__panel--BoxShadow: none;
@@ -120,50 +156,43 @@
   --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
   --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-drawer {
-    --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
-    --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
-    --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
-    --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
-    --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
-    --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
-    --pf-v6-c-drawer__panel--Opacity: 1;
-  }
-}
-@media screen and (min-width: 75rem) {
-  .pf-v6-c-drawer {
-    --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
-  }
-  .pf-v6-c-drawer.pf-m-panel-bottom {
-    --pf-v6-c-drawer__panel--MinWidth: auto;
-    --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
-  }
-}
 
 .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
-  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow-x: hidden;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
 }
 
+.pf-v6-c-drawer {
+  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
+}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
   --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
 }
 
+.pf-v6-c-drawer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-x: hidden;
+}
 .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: 0px;
 }
 .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);
 }
+.pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
+  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
+  --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
+}
+.pf-v6-c-drawer.pf-m-inline.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
+}
 .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   order: 0;
   margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -183,19 +212,21 @@
   --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%);
-  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
-  visibility: visible;
+  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+  transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
 }
 
+.pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
+  visibility: visible;
+}
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   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 +235,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 +265,7 @@
 .pf-v6-c-drawer__main {
   display: flex;
   flex: 1;
+  gap: var(--pf-v6-c-drawer__main--Gap, 0);
   overflow: hidden;
 }
 
@@ -226,8 +273,8 @@
 .pf-v6-c-drawer__panel,
 .pf-v6-c-drawer__panel-main {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   overflow: auto;
 }
 
@@ -257,6 +304,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 +314,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);
@@ -423,6 +473,9 @@
     --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
+  :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+    background: transparent;
+  }
   .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
     box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
   }
@@ -452,7 +505,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 +517,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);
   }
@@ -511,82 +566,86 @@
 }
 @media (min-width: 48rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 62rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 75rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 90.625rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 48rem) {

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,16 @@ $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);
+  --#{$drawer}__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
+  --#{$drawer}__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
+  --#{$drawer}__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
 
   @media screen and (prefers-reduced-motion: no-preference) {
     --#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
@@ -200,11 +214,21 @@ $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: 0px;
 
     > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
       padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
     }
+
+    &.pf-m-glass {
+      --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
+      --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
+  
+      > .#{$drawer}__main > .#{$drawer}__panel {
+        backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
+      }
+    }
   }
 
   &.pf-m-panel-left > .#{$drawer}__main {
@@ -236,8 +260,8 @@ $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%),
-        $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
+        $ltr-val: translateX(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset))),
+        $rtl-val: translateX(#{pf-v6-calc-inverse(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset)))}),
       );
 
       --#{$drawer}__panel--Opacity: var(--#{$drawer}--m-expanded__panel--Opacity);
@@ -250,7 +274,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 +288,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 +325,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;
 }
 
@@ -292,8 +334,8 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 .#{$drawer}__panel,
 .#{$drawer}__panel-main {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   overflow: auto;
 }
 
@@ -328,6 +370,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 +380,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);
@@ -520,6 +565,16 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
     min-width: var(--#{$drawer}__panel--MinWidth);
 
+    &.pf-m-inline,
+    &.pf-m-static {
+      @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
+      &.pf-m-plain {
+        > .#{$drawer}__main > .#{$drawer}__panel {
+          background: transparent;
+        }
+      }
+    }
+
     > .#{$drawer}__main {
       > .#{$drawer}__panel {
         box-shadow: var(--#{$drawer}--m-expanded__panel--BoxShadow);
@@ -565,7 +620,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 +638,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);
@@ -655,7 +712,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map--width {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
@@ -664,7 +725,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   @include pf-v6-apply-breakpoint($breakpoint) {
     @each $width-value in $pf-v6-c-drawer__panel--list--width {
       .#{$drawer}__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
-        --#{$drawer}__panel--md--FlexBasis: #{percentage(math.div($width-value, 100))};
+        --#{$drawer}__panel--md--FlexBasis: calc(#{math.percentage(math.div($width-value, 100))} - (2 * var(--#{$drawer}--m-expanded__panel--inset)));
+        
+        @if $width-value == 100 {
+          --#{$drawer}__main--Gap: 0; // Reset gap for width-100 inline pill drawers to prevent misalignment
+        }
       }
     }
   }
@@ -672,7 +737,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
 // Responsive modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
@@ -789,3 +858,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     }
   }
 }
+
+// :where(.pf-v6-theme-glass) {
+  
+// }

package/components/DualListSelector/dual-list-selector.css

@@ -32,6 +32,15 @@
   --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
   --pf-v6-c-dual-list-selector__list--TranslateY: 0;
   --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-dual-list-selector {
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-dual-list-selector {
   --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -67,19 +76,12 @@
   --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
-  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
+  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
   --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
   --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 }
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-dual-list-selector {
-    --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
-  }
-}
 
 .pf-v6-c-dual-list-selector {
   display: grid;
@@ -150,8 +152,6 @@
 
 .pf-v6-c-dual-list-selector__list {
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
-  display: flex;
-  flex-direction: column;
 }
 .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
   --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
@@ -159,16 +159,22 @@
 }
 .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
   transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
-  position: absolute;
-  inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
   transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
 }
 
+.pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
+  position: absolute;
+  inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
+}
 .pf-v6-c-dual-list-selector__list.pf-m-drag-over {
   overflow-anchor: none;
 }
+.pf-v6-c-dual-list-selector__list {
+  display: flex;
+  flex-direction: column;
+}
 
 .pf-v6-c-dual-list-selector__list-item:focus-visible {
   --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);

package/components/DualListSelector/dual-list-selector.scss

@@ -106,7 +106,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
 
   // Icon
   --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
-  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
+  --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
   --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);