@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.10

package/components/Drawer/drawer.scss

@@ -1,25 +1,28 @@
-// @debug $drawer; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-drawer--breakpoint-map: build-breakpoint-map("base", "lg", "xl", "2xl");
-$pf-v5-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl", "2xl");
-$pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
+@use 'sass:math';
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$drawer}) {
+$pf-v6-c-drawer--breakpoint-map: build-breakpoint-map("base", "lg", "xl", "2xl");
+$pf-v6-c-drawer--breakpoint-map--width: build-breakpoint-map("base", "lg", "xl", "2xl");
+$pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
+
+@include pf-root($drawer) {
   // 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);
 
   // Content
   --#{$drawer}__content--FlexBasis: 100%;
-  --#{$drawer}__content--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$drawer}__content--BackgroundColor: transparent;
+  --#{$drawer}__content--m-primary--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$drawer}__content--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$drawer}__content--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Panel
   --#{$drawer}__panel--MinWidth: 50%; // change to __panel--md--MinWidth at breaking change
   --#{$drawer}__panel--MaxHeight: auto;
-  --#{$drawer}__panel--ZIndex: var(--pf-t--global--Zindex--sm);
+  --#{$drawer}__panel--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$drawer}__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
+  --#{$drawer}__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$drawer}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -43,7 +46,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight: #{pf-size-prem(24px)};
 
   // Drawer panel head
-  --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$drawer}__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$drawer}__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$drawer}__head--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -54,28 +57,28 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__description--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 
   // Drawer body padding
-  --#{$drawer}__body--PaddingTop--base: var(--pf-t--global--spacer--md);
-  --#{$drawer}__body--PaddingRight--base: var(--pf-t--global--spacer--md);
-  --#{$drawer}__body--PaddingBottom--base: var(--pf-t--global--spacer--md);
-  --#{$drawer}__body--PaddingLeft--base: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--PaddingBlockStart--base: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--PaddingInlineEnd--base: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--PaddingBlockEnd--base: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--PaddingInlineStart--base: var(--pf-t--global--spacer--md);
 
   // Drawer content body
-  --#{$drawer}__content__body--PaddingTop: 0;
-  --#{$drawer}__content__body--PaddingRight: 0;
-  --#{$drawer}__content__body--PaddingBottom: 0;
-  --#{$drawer}__content__body--PaddingLeft: 0;
+  --#{$drawer}__content__body--PaddingBlockStart: 0;
+  --#{$drawer}__content__body--PaddingInlineEnd: 0;
+  --#{$drawer}__content__body--PaddingBlockEnd: 0;
+  --#{$drawer}__content__body--PaddingInlineStart: 0;
 
   // Drawer panel body
-  --#{$drawer}__panel__body--PaddingTop: var(--#{$drawer}__body--PaddingTop--base);
-  --#{$drawer}__panel__body--PaddingRight: var(--#{$drawer}__body--PaddingRight--base);
-  --#{$drawer}__panel__body--PaddingBottom: var(--#{$drawer}__body--PaddingBottom--base);
-  --#{$drawer}__panel__body--PaddingLeft: var(--#{$drawer}__body--PaddingLeft--base);
+  --#{$drawer}__panel__body--PaddingBlockStart: var(--#{$drawer}__body--PaddingBlockStart--base);
+  --#{$drawer}__panel__body--PaddingInlineEnd: var(--#{$drawer}__body--PaddingInlineEnd--base);
+  --#{$drawer}__panel__body--PaddingBlockEnd: var(--#{$drawer}__body--PaddingBlockEnd--base);
+  --#{$drawer}__panel__body--PaddingInlineStart: var(--#{$drawer}__body--PaddingInlineStart--base);
 
   // Modified body padding
-  --#{$drawer}__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$drawer}__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$drawer}__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$drawer}__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$drawer}__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
 
   // Splitter
   --#{$drawer}__splitter--Height: #{pf-size-prem(9px)};
@@ -90,43 +93,43 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // Splitter border
   --#{$drawer}__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
   --#{$drawer}__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
-  --#{$drawer}__splitter--after--BorderTopWidth: 0;
-  --#{$drawer}__splitter--after--BorderRightWidth: var(--#{$drawer}__splitter--after--border-width--base);
-  --#{$drawer}__splitter--after--BorderBottomWidth: 0;
-  --#{$drawer}__splitter--after--BorderLeftWidth: var(--#{$drawer}__splitter--after--border-width--base);
-  --#{$drawer}--m-panel-bottom__splitter--after--BorderTopWidth: var(--#{$drawer}__splitter--after--border-width--base);
-  --#{$drawer}--m-panel-bottom__splitter--after--BorderBottomWidth: var(--#{$drawer}__splitter--after--border-width--base);
+  --#{$drawer}__splitter--after--BorderBlockStartWidth: 0;
+  --#{$drawer}__splitter--after--BorderInlineEndWidth: var(--#{$drawer}__splitter--after--border-width--base);
+  --#{$drawer}__splitter--after--BorderBlockEndWidth: 0;
+  --#{$drawer}__splitter--after--BorderInlineStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
+  --#{$drawer}--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
+  --#{$drawer}--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--#{$drawer}__splitter--after--border-width--base);
   --#{$drawer}--m-inline__splitter--m-vertical--Width: #{pf-size-prem(10px)};
-  --#{$drawer}--m-inline__splitter-handle--Left: 50%;
+  --#{$drawer}--m-inline__splitter-handle--InsetInlineStart: 50%;
   --#{$drawer}--m-inline--m-panel-bottom__splitter--Height: #{pf-size-prem(10px)};
-  --#{$drawer}--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
-  --#{$drawer}--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(--#{$drawer}__splitter--after--border-width--base);
+  --#{$drawer}--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
+  --#{$drawer}--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--after--border-width--base);
 
   // Splitter handle
-  --#{$drawer}__splitter-handle--Top: 50%;
-  --#{$drawer}__splitter-handle--Left: calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
-  --#{$drawer}--m-panel-left__splitter-handle--Left: 50%;
-  --#{$drawer}--m-panel-bottom__splitter-handle--Top: calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
+  --#{$drawer}__splitter-handle--InsetBlockStart: 50%;
+  --#{$drawer}__splitter-handle--InsetInlineStart: calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
+  --#{$drawer}--m-panel-left__splitter-handle--InsetInlineStart: 50%;
+  --#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--#{$drawer}__splitter--after--border-width--base));
 
   // Splitter handle line
   --#{$drawer}__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$drawer}__splitter-handle--after--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$drawer}__splitter-handle--after--BorderRightWidth: 0;
-  --#{$drawer}__splitter-handle--after--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$drawer}__splitter-handle--after--BorderLeftWidth: 0;
+  --#{$drawer}__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$drawer}__splitter-handle--after--BorderInlineEndWidth: 0;
+  --#{$drawer}__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$drawer}__splitter-handle--after--BorderInlineStartWidth: 0;
   --#{$drawer}__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
-  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
-  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
-  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
+  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
+  --#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
   --#{$drawer}__splitter-handle--after--Width: #{pf-size-prem(12px)};
   --#{$drawer}__splitter-handle--after--Height: #{pf-size-prem(4px)};
   --#{$drawer}__splitter--m-vertical__splitter-handle--after--Width: #{pf-size-prem(4px)};
   --#{$drawer}__splitter--m-vertical__splitter-handle--after--Height: #{pf-size-prem(12px)};
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--MinWidth: var(--#{$drawer}__panel--xl--MinWidth);
-  
+
     &.pf-m-panel-bottom {
       --#{$drawer}__panel--MinWidth: auto;
       --#{$drawer}__panel--MinHeight: var(--#{$drawer}--m-panel-bottom__panel--xl--MinHeight);
@@ -134,33 +137,33 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   }
 
   // Actions
-  --#{$drawer}__actions--MarginTop: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
-  --#{$drawer}__actions--MarginRight: calc(var(--pf-t--global--spacer--xs) * -1.5); // TODO: add form element var
+  --#{$drawer}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
+  --#{$drawer}__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
 
   // Box shadow
   --#{$drawer}__panel--BoxShadow: none;
-  --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--lg--top);
+  --#{$drawer}--m-expanded--m-panel-bottom__panel--BoxShadow: var(--pf-t--global--box-shadow--md--top);
 
   // Divider
   --#{$drawer}__panel--after--Width: var(--pf-t--global--border--width--divider--default);
   --#{$drawer}--m-panel-bottom__panel--after--Height: var(--pf-t--global--border--width--divider--default);
   --#{$drawer}__panel--after--BackgroundColor: transparent;
   --#{$drawer}--m-inline--m-expanded__panel--after--BackgroundColor: var(--pf-t--global--border--color--default);
-  --#{$drawer}--m-inline__panel--PaddingLeft: var(--#{$drawer}__panel--after--Width);
-  --#{$drawer}--m-panel-left--m-inline__panel--PaddingRight: var(--#{$drawer}__panel--after--Width);
-  --#{$drawer}--m-panel-bottom--m-inline__panel--PaddingTop: var(--#{$drawer}__panel--after--Width);
+  --#{$drawer}--m-inline__panel--PaddingInlineStart: var(--#{$drawer}__panel--after--Width);
+  --#{$drawer}--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--#{$drawer}__panel--after--Width);
+  --#{$drawer}--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--#{$drawer}__panel--after--Width);
 }
 
 .#{$drawer} {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: --#{$drawer}--m-expanded__panel--BoxShadow,
-    $ltr-val: var(--pf-t--global--box-shadow--lg--left),
-    $rtl-val: var(--pf-t--global--box-shadow--lg--right)
-  ); 
-  @include pf-v5-bidirectional-style(
+    $ltr-val: var(--pf-t--global--box-shadow--md--left),
+    $rtl-val: var(--pf-t--global--box-shadow--md--right)
+  );
+  @include pf-v6-bidirectional-style(
     $prop: --#{$drawer}--m-expanded--m-panel-left__panel--BoxShadow,
-    $ltr-val: var(--#{$pf-global}--BoxShadow--lg-right),
-    $rtl-val: var(--#{$pf-global}--BoxShadow--lg-left)
+    $ltr-val: var(--pf-t--global--box-shadow--md--right),
+    $rtl-val: var(--pf-t--global--box-shadow--md--left)
   );
 
   display: flex;
@@ -170,8 +173,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   &.pf-m-inline,
   &.pf-m-static {
+    --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--BackgroundColor);
+
     > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
-      padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingLeft);
+      padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
     }
   }
 
@@ -180,11 +185,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       order: 0;
       margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
 
-      @include pf-v5-bidirectional-style(
+      @include pf-v6-bidirectional-style(
         $prop: transform,
         $ltr-val: translateX(-100%),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
-      ); 
+        $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
+      );
     }
 
     > .#{$drawer}__content {
@@ -200,11 +205,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // stylelint-disable selector-max-class
   &.pf-m-expanded {
     > .#{$drawer}__main > .#{$drawer}__panel {
-      @include pf-v5-bidirectional-style(
+      @include pf-v6-bidirectional-style(
         $prop: transform,
         $ltr-val: translateX(-100%),
-        $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
-      ); 
+        $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
+      );
     }
 
     &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -265,20 +270,20 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   flex-basis: var(--#{$drawer}__content--FlexBasis);
   order: 0;
   background-color: var(--#{$drawer}__content--BackgroundColor);
-  
-  &.pf-m-secondary {
-    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
+
+  &.pf-m-primary {
+    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-primary--BackgroundColor);
   }
 
-  &.pf-m-no-background {
-    --#{$drawer}__content--BackgroundColor: transparent;
+  &.pf-m-secondary {
+    --#{$drawer}__content--BackgroundColor: var(--#{$drawer}__content--m-secondary--BackgroundColor);
   }
 
   > .#{$drawer}__body {
-    padding-block-start: var(--#{$drawer}__content__body--PaddingTop);
-    padding-block-end: var(--#{$drawer}__content__body--PaddingBottom);
-    padding-inline-start: var(--#{$drawer}__content__body--PaddingLeft);
-    padding-inline-end: var(--#{$drawer}__content__body--PaddingRight);
+    padding-block-start: var(--#{$drawer}__content__body--PaddingBlockStart);
+    padding-block-end: var(--#{$drawer}__content__body--PaddingBlockEnd);
+    padding-inline-start: var(--#{$drawer}__content__body--PaddingInlineStart);
+    padding-inline-end: var(--#{$drawer}__content__body--PaddingInlineEnd);
   }
 }
 
@@ -320,7 +325,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     --#{$drawer}__panel--BackgroundColor: transparent;
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--md) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--md) {
     --#{$drawer}__panel--FlexBasis:
       max(
         var(--#{$drawer}__panel--md--FlexBasis--min),
@@ -328,7 +333,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       );
   }
 
-  @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
+  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$drawer}__panel--md--FlexBasis: var(--#{$drawer}__panel--xl--FlexBasis);
 
     .#{$drawer}.pf-m-panel-bottom & {
@@ -340,10 +345,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 .#{$drawer}__panel,
 .#{$drawer}__panel-main {
   > .#{$drawer}__body {
-    padding-block-start: var(--#{$drawer}__panel__body--PaddingTop);
-    padding-block-end: var(--#{$drawer}__panel__body--PaddingBottom);
-    padding-inline-start: var(--#{$drawer}__panel__body--PaddingLeft);
-    padding-inline-end: var(--#{$drawer}__panel__body--PaddingRight);
+    padding-block-start: var(--#{$drawer}__panel__body--PaddingBlockStart);
+    padding-block-end: var(--#{$drawer}__panel__body--PaddingBlockEnd);
+    padding-inline-start: var(--#{$drawer}__panel__body--PaddingInlineStart);
+    padding-inline-end: var(--#{$drawer}__panel__body--PaddingInlineEnd);
   }
 }
 
@@ -354,7 +359,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Remove tab focus
-@include pf-v5-animate-remove-tab-focus(".#{$drawer}__panel", var(--#{$drawer}__panel--TransitionDuration));
+@include pf-v6-animate-remove-tab-focus(".#{$drawer}__panel", var(--#{$drawer}__panel--TransitionDuration));
 
 // Panel head
 .#{$drawer}__head {
@@ -378,8 +383,8 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   grid-row: 1;
   grid-column: 2;
   align-self: baseline;
-  margin-block-start: var(--#{$drawer}__actions--MarginTop);
-  margin-inline-end: var(--#{$drawer}__actions--MarginRight);
+  margin-block-start: var(--#{$drawer}__actions--MarginBlockStart);
+  margin-inline-end: var(--#{$drawer}__actions--MarginInlineEnd);
 }
 
 // Drawer panel description
@@ -397,10 +402,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
   // Padding
   &.pf-m-padding {
-    padding-block-start: var(--#{$drawer}__body--m-padding--PaddingTop);
-    padding-block-end: var(--#{$drawer}__body--m-padding--PaddingBottom);
-    padding-inline-start: var(--#{$drawer}__body--m-padding--PaddingLeft);
-    padding-inline-end: var(--#{$drawer}__body--m-padding--PaddingRight);
+    padding-block-start: var(--#{$drawer}__body--m-padding--PaddingBlockStart);
+    padding-block-end: var(--#{$drawer}__body--m-padding--PaddingBlockEnd);
+    padding-inline-start: var(--#{$drawer}__body--m-padding--PaddingInlineStart);
+    padding-inline-end: var(--#{$drawer}__body--m-padding--PaddingInlineEnd);
   }
 
   &:not(.pf-m-no-padding) + * {
@@ -431,10 +436,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     --#{$drawer}__splitter--Cursor: var(--#{$drawer}__splitter--m-vertical--Cursor);
     --#{$drawer}__splitter-handle--after--Width: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--Width);
     --#{$drawer}__splitter-handle--after--Height: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--Height);
-    --#{$drawer}__splitter-handle--after--BorderTopWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderTopWidth);
-    --#{$drawer}__splitter-handle--after--BorderRightWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderRightWidth);
-    --#{$drawer}__splitter-handle--after--BorderBottomWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBottomWidth);
-    --#{$drawer}__splitter-handle--after--BorderLeftWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderLeftWidth);
+    --#{$drawer}__splitter-handle--after--BorderBlockStartWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth);
+    --#{$drawer}__splitter-handle--after--BorderInlineEndWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth);
+    --#{$drawer}__splitter-handle--after--BorderBlockEndWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
+    --#{$drawer}__splitter-handle--after--BorderInlineStartWidth: var(--#{$drawer}__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
   }
 
   &:hover,
@@ -450,23 +455,23 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     inset-inline-end: 0;
     content: "";
     border: solid var(--#{$drawer}__splitter--after--BorderColor);
-    border-block-start-width: var(--#{$drawer}__splitter--after--BorderTopWidth);
-    border-block-end-width: var(--#{$drawer}__splitter--after--BorderBottomWidth);
-    border-inline-start-width: var(--#{$drawer}__splitter--after--BorderLeftWidth);
-    border-inline-end-width: var(--#{$drawer}__splitter--after--BorderRightWidth);
+    border-block-start-width: var(--#{$drawer}__splitter--after--BorderBlockStartWidth);
+    border-block-end-width: var(--#{$drawer}__splitter--after--BorderBlockEndWidth);
+    border-inline-start-width: var(--#{$drawer}__splitter--after--BorderInlineStartWidth);
+    border-inline-end-width: var(--#{$drawer}__splitter--after--BorderInlineEndWidth);
   }
 }
 
 .#{$drawer}__splitter-handle {
   position: absolute;
-  inset-block-start: var(--#{$drawer}__splitter-handle--Top);
-  inset-inline-start: var(--#{$drawer}__splitter-handle--Left);
+  inset-block-start: var(--#{$drawer}__splitter-handle--InsetBlockStart);
+  inset-inline-start: var(--#{$drawer}__splitter-handle--InsetInlineStart);
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translate(-50%, -50%),
-    $rtl-val: translate(#{pf-v5-calc-inverse(-50%)}, -50%),
-  ); 
+    $rtl-val: translate(#{pf-v6-calc-inverse(-50%)}, -50%),
+  );
 
 
   &::after {
@@ -476,15 +481,15 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     content: "";
     border-color: var(--#{$drawer}__splitter-handle--after--BorderColor);
     border-style: solid;
-    border-block-start-width: var(--#{$drawer}__splitter-handle--after--BorderTopWidth);
-    border-block-end-width: var(--#{$drawer}__splitter-handle--after--BorderBottomWidth);
-    border-inline-start-width: var(--#{$drawer}__splitter-handle--after--BorderLeftWidth);
-    border-inline-end-width: var(--#{$drawer}__splitter-handle--after--BorderRightWidth);
+    border-block-start-width: var(--#{$drawer}__splitter-handle--after--BorderBlockStartWidth);
+    border-block-end-width: var(--#{$drawer}__splitter-handle--after--BorderBlockEndWidth);
+    border-inline-start-width: var(--#{$drawer}__splitter-handle--after--BorderInlineStartWidth);
+    border-inline-end-width: var(--#{$drawer}__splitter-handle--after--BorderInlineEndWidth);
   }
 }
 
 // Layout modifications happen after md breakpoint
-@media screen and (min-width: $pf-v5-global--breakpoint--md) {
+@media screen and (min-width: $pf-v6-global--breakpoint--md) {
   // Default
   .#{$drawer} {
     min-width: var(--#{$drawer}__panel--MinWidth);
@@ -526,7 +531,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     &.pf-m-static {
       > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
         padding-inline-start: 0;
-        padding-inline-end: var(--#{$drawer}--m-panel-left--m-inline__panel--PaddingRight);
+        padding-inline-end: var(--#{$drawer}--m-panel-left--m-inline__panel--PaddingInlineEnd);
       }
     }
 
@@ -541,7 +546,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
     > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable {
       > .#{$drawer}__splitter {
-        --#{$drawer}__splitter-handle--Left: var(--#{$drawer}--m-panel-left__splitter-handle--Left);
+        --#{$drawer}__splitter-handle--InsetInlineStart: var(--#{$drawer}--m-panel-left__splitter-handle--InsetInlineStart);
 
         order: 1;
       }
@@ -559,7 +564,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     &.pf-m-inline,
     &.pf-m-static {
       > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
-        padding-block-start: var(--#{$drawer}--m-panel-bottom--m-inline__panel--PaddingTop);
+        padding-block-start: var(--#{$drawer}--m-panel-bottom--m-inline__panel--PaddingBlockStart);
         padding-inline-start: 0;
       }
     }
@@ -579,11 +584,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       min-height: var(--#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight);
 
       > .#{$drawer}__splitter {
-        --#{$drawer}__splitter-handle--Top: var(--#{$drawer}--m-panel-bottom__splitter-handle--Top);
-        --#{$drawer}__splitter--after--BorderTopWidth: var(--#{$drawer}--m-panel-bottom__splitter--after--BorderTopWidth);
-        --#{$drawer}__splitter--after--BorderRightWidth: 0;
-        --#{$drawer}__splitter--after--BorderBottomWidth: var(--#{$drawer}--m-panel-bottom__splitter--after--BorderBottomWidth);
-        --#{$drawer}__splitter--after--BorderLeftWidth: 0;
+        --#{$drawer}__splitter-handle--InsetBlockStart: var(--#{$drawer}--m-panel-bottom__splitter-handle--InsetBlockStart);
+        --#{$drawer}__splitter--after--BorderBlockStartWidth: var(--#{$drawer}--m-panel-bottom__splitter--after--BorderBlockStartWidth);
+        --#{$drawer}__splitter--after--BorderInlineEndWidth: 0;
+        --#{$drawer}__splitter--after--BorderBlockEndWidth: var(--#{$drawer}--m-panel-bottom__splitter--after--BorderBlockEndWidth);
+        --#{$drawer}__splitter--after--BorderInlineStartWidth: 0;
       }
     }
   }
@@ -592,7 +597,7 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable {
       > .#{$drawer}__splitter {
         --#{$drawer}__splitter--m-vertical--Width: var(--#{$drawer}--m-inline__splitter--m-vertical--Width);
-        --#{$drawer}__splitter-handle--Left: var(--#{$drawer}--m-inline__splitter-handle--Left);
+        --#{$drawer}__splitter-handle--InsetInlineStart: var(--#{$drawer}--m-inline__splitter-handle--InsetInlineStart);
 
         outline-offset: var(--#{$drawer}--m-inline__splitter--focus--OutlineOffset);
       }
@@ -602,10 +607,10 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       > .#{$drawer}__main > .#{$drawer}__panel.pf-m-resizable {
         > .#{$drawer}__splitter {
           --#{$drawer}__splitter--Height: var(--#{$drawer}--m-inline--m-panel-bottom__splitter--Height);
-          --#{$drawer}__splitter-handle--Top: var(--#{$drawer}--m-inline--m-panel-bottom__splitter-handle--Top);
-          --#{$drawer}__splitter--after--BorderTopWidth: var(--#{$drawer}--m-inline--m-panel-bottom__splitter--after--BorderTopWidth);
-          --#{$drawer}__splitter--after--BorderRightWidth: 0;
-          --#{$drawer}__splitter--after--BorderLeftWidth: 0;
+          --#{$drawer}__splitter-handle--InsetBlockStart: var(--#{$drawer}--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart);
+          --#{$drawer}__splitter--after--BorderBlockStartWidth: var(--#{$drawer}--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth);
+          --#{$drawer}__splitter--after--BorderInlineEndWidth: 0;
+          --#{$drawer}__splitter--after--BorderInlineStartWidth: 0;
         }
       }
     }
@@ -624,31 +629,31 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 }
 
 // Responsive width modifiers
-@each $breakpoint, $breakpoint-value in $pf-v5-c-drawer--breakpoint-map--width {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map--width {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
   }
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
-    @each $width-value in $pf-v5-c-drawer__panel--list--width {
+  @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(div($width-value, 100))};
+        --#{$drawer}__panel--md--FlexBasis: #{percentage(math.div($width-value, 100))};
       }
     }
   }
 }
 
 // Responsive modifiers
-@each $breakpoint, $breakpoint-value in $pf-v5-c-drawer--breakpoint-map {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-drawer--breakpoint-map {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
   @if $breakpoint == "base" {
     $breakpoint: "md";
   }
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
+  @include pf-v6-apply-breakpoint($breakpoint) {
     // Drawer and inline
     .#{$drawer}.pf-m-inline#{$breakpoint-name},
     .#{$drawer}.pf-m-static#{$breakpoint-name} {
@@ -674,11 +679,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       > .#{$drawer}__main > .#{$drawer}__panel {
         margin-inline-start: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
 
-        @include pf-v5-bidirectional-style(
+        @include pf-v6-bidirectional-style(
           $prop: transform,
           $ltr-val: translateX(100%),
-          $rtl-val: translateX(#{pf-v5-calc-inverse(100%)}),
-        ); 
+          $rtl-val: translateX(#{pf-v6-calc-inverse(100%)}),
+        );
       }
 
       // stylelint-disable selector-max-class, selector-max-combinators, selector-max-compound-selectors
@@ -698,11 +703,11 @@ $pf-v5-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
           margin-inline-start: 0;
           margin-inline-end: calc(var(--#{$drawer}__panel--FlexBasis) * -1);
 
-          @include pf-v5-bidirectional-style(
+          @include pf-v6-bidirectional-style(
             $prop: transform,
             $ltr-val: translateX(-100%),
-            $rtl-val: translateX(#{pf-v5-calc-inverse(-100%)}),
-          ); 
+            $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
+          );
         }
 
         // Inline, expanded, panel left