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

package/components/TreeView/tree-view.scss

@@ -1,8 +1,8 @@
-// @debug $tree-view; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-tree-view--MaxNesting: 10 !default;
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$tree-view}) {
+$pf-v6-c-tree-view--MaxNesting: 10 !default;
+
+@include pf-root($tree-view) {
   // Node base
   --#{$tree-view}__node--indent--base: calc(var(--pf-t--global--spacer--md) * 2 + var(--#{$tree-view}__node-toggle-icon--MinWidth)); // based off of the expected width of the toggle button
   --#{$tree-view}__node--nested-indent--base: calc(var(--#{$tree-view}__node--indent--base) - var(--pf-t--global--spacer--md)); // nested spacing that removes the toggle button's left padding, so the icon aligns with text on the node above it
@@ -11,10 +11,10 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}__content--BorderRadius: var(--pf-t--global--border--radius--small);
 
   // Node
-  --#{$tree-view}__node--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__node--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__node--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__node--PaddingLeft: var(--#{$tree-view}__node--indent--base);
+  --#{$tree-view}__node--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}__node--indent--base);
   --#{$tree-view}__node--Color: var(--pf-t--global--text--color--subtle);
   --#{$tree-view}__node--BackgroundColor: transparent;
   --#{$tree-view}__node--m-current--Color: var(--pf-t--global--text--color--regular);
@@ -29,8 +29,8 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   --#{$tree-view}__node-content--Overflow: visible;
 
   // Nested toggle
-  --#{$tree-view}__list-item__list-item__node-toggle--Top: var(--#{$tree-view}__node--PaddingTop);
-  --#{$tree-view}__list-item__list-item__node-toggle--Left: var(--#{$tree-view}__node--PaddingLeft);
+  --#{$tree-view}__list-item__list-item__node-toggle--InsetBlockStart: var(--#{$tree-view}__node--PaddingBlockStart);
+  --#{$tree-view}__list-item__list-item__node-toggle--InsetInlineStart: var(--#{$tree-view}__node--PaddingInlineStart);
   --#{$tree-view}__list-item__list-item__node-toggle--TranslateX: -100%;
 
   // Toggle
@@ -42,27 +42,27 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
   // Toggle icon
   --#{$tree-view}__node-toggle-icon--MinWidth: var(--pf-t--global--icon--size--font--body--default);
-  --#{$tree-view}__node-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__node-toggle--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$tree-view}__node-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__node-toggle--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$tree-view}__node-toggle--MarginTop: calc(var(--#{$tree-view}__node-toggle--PaddingTop) * -1);
-  --#{$tree-view}__node-toggle--MarginBottom: calc(var(--#{$tree-view}__node-toggle--PaddingTop) * -1);
+  --#{$tree-view}__node-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$tree-view}__node-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node-toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$tree-view}__node-toggle--MarginBlockStart: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
+  --#{$tree-view}__node-toggle--MarginBlockEnd: calc(var(--#{$tree-view}__node-toggle--PaddingBlockStart) * -1);
 
   // Check
-  --#{$tree-view}__node-check--MarginRight: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node-check--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
   // Badge
-  --#{$tree-view}__node-count--MarginLeft: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
 
   // Search
-  --#{$tree-view}__search--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__search--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__search--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}__search--PaddingLeft: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__search--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__search--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__search--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__search--PaddingInlineStart: var(--pf-t--global--spacer--sm);
 
   // Icon
-  --#{$tree-view}__node-icon--PaddingRight: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}__node-icon--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$tree-view}__node-icon--Color: var(--pf-t--global--icon--color--subtle);
   --#{$tree-view}__node-toggle-icon--base--Rotate: 0;
   --#{$tree-view}__node-toggle-icon--Rotate: var(--#{$tree-view}__node-toggle-icon--base--Rotate);
@@ -79,93 +79,93 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
   // Guides
   // ================================================================== //
-  --#{$tree-view}--m-guides--guide--Left: var(--#{$tree-view}--m-guides--guide-left--base); // starting value, this gets updated for each nesting level
+  --#{$tree-view}--m-guides--guide--InsetInlineStart: var(--#{$tree-view}--m-guides--guide-left--base); // starting value, this gets updated for each nesting level
 
   // Base
   --#{$tree-view}--m-guides--guide-color--base: var(--pf-t--global--border--color--default);
   --#{$tree-view}--m-guides--guide-width--base: var(--pf-t--global--border--width--divider--default);
-  --#{$tree-view}--m-guides--guide-left--base: calc(var(--#{$tree-view}__node--PaddingLeft) - var(--#{$tree-view}--m-guides__list-node--guide-width--base));
-  --#{$tree-view}--m-guides--guide-left--base--offset: calc(var(--#{$tree-view}__list-item__list-item__node-toggle--Left) + var(--#{$tree-view}__node-toggle-icon--MinWidth) / 2); // based on toggle positioning
+  --#{$tree-view}--m-guides--guide-left--base: calc(var(--#{$tree-view}__node--PaddingInlineStart) - var(--#{$tree-view}--m-guides__list-node--guide-width--base));
+  --#{$tree-view}--m-guides--guide-left--base--offset: calc(var(--#{$tree-view}__list-item__list-item__node-toggle--InsetInlineStart) + var(--#{$tree-view}__node-toggle-icon--MinWidth) / 2); // based on toggle positioning
   --#{$tree-view}--m-guides__list-node--guide-width--base: var(--pf-t--global--spacer--lg);
 
   // List item
-  --#{$tree-view}--m-guides__list-item--before--Top: 0;
+  --#{$tree-view}--m-guides__list-item--before--InsetBlockStart: 0;
   --#{$tree-view}--m-guides__list-item--before--Width: var(--#{$tree-view}--m-guides--guide-width--base);
   --#{$tree-view}--m-guides__list-item--before--Height: 100%;
   --#{$tree-view}--m-guides__list-item--before--BackgroundColor: var(--#{$tree-view}--m-guides--guide-color--base);
-  --#{$tree-view}--m-guides__list-item--last-child--before--Top: var(--#{$tree-view}--m-guides__node--before--Top);
-  --#{$tree-view}--m-guides__list-item--last-child--before--Height: var(--#{$tree-view}--m-guides__list-item--last-child--before--Top);
-  --#{$tree-view}--m-guides__list-item--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$tree-view}--m-guides__list-item--last-child--before--InsetBlockStart: var(--#{$tree-view}--m-guides__node--before--InsetBlockStart);
+  --#{$tree-view}--m-guides__list-item--last-child--before--Height: var(--#{$tree-view}--m-guides__list-item--last-child--before--InsetBlockStart);
+  --#{$tree-view}--m-guides__list-item--ZIndex: var(--pf-t--global--z-index--xs);
 
   // Node
   --#{$tree-view}--m-guides__node--before--Width: #{pf-size-prem(16px)};
   --#{$tree-view}--m-guides__node--before--Height: var(--#{$tree-view}--m-guides--guide-width--base);
-  --#{$tree-view}--m-guides__node--before--Top: #{pf-size-prem(18px)};
+  --#{$tree-view}--m-guides__node--before--InsetBlockStart: #{pf-size-prem(18px)};
   --#{$tree-view}--m-guides__node--before--BackgroundColor: var(--#{$tree-view}--m-guides--guide-color--base);
 
   // Compact
   // ================================================================== //
   // Base
-  --#{$tree-view}--m-compact--base-border--Left--offset: var(--pf-t--global--spacer--md);
-  --#{$tree-view}--m-compact--base-border--Left: calc(var(--#{$tree-view}__node--PaddingLeft) - var(--#{$tree-view}--m-compact--base-border--Left--offset));
+  --#{$tree-view}--m-compact--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--md);
+  --#{$tree-view}--m-compact--base-border--InsetInlineStart: calc(var(--#{$tree-view}__node--PaddingInlineStart) - var(--#{$tree-view}--m-compact--base-border--InsetInlineStart--offset));
   --#{$tree-view}--m-compact__node--indent--base: var(--#{$tree-view}__node--indent--base); // based off of the expected width of the toggle button
   --#{$tree-view}--m-compact__node--nested-indent--base: var(--pf-t--global--spacer--lg);
-  --#{$tree-view}--m-compact--border--Left: var(--#{$tree-view}--m-compact--base-border--Left);
+  --#{$tree-view}--m-compact--border--InsetInlineStart: var(--#{$tree-view}--m-compact--base-border--InsetInlineStart);
 
   // Node
   --#{$tree-view}--m-compact__node--Color: var(--pf-t--global--text--color--regular);
-  --#{$tree-view}--m-compact__node--PaddingTop: 0;
-  --#{$tree-view}--m-compact__node--PaddingBottom: 0;
-  --#{$tree-view}--m-compact__node--nested--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}--m-compact__node--nested--PaddingBottom: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}--m-compact__node--PaddingBlockStart: 0;
+  --#{$tree-view}--m-compact__node--PaddingBlockEnd: 0;
+  --#{$tree-view}--m-compact__node--nested--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}--m-compact__node--nested--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
 
   // Node toggle
-  --#{$tree-view}--m-compact__list-item__list-item__node-toggle--Top: calc(var(--#{$tree-view}--m-compact__node-container--PaddingTop));
+  --#{$tree-view}--m-compact__list-item__list-item__node-toggle--InsetBlockStart: calc(var(--#{$tree-view}--m-compact__node-container--PaddingBlockStart));
 
   // List item
-  --#{$tree-view}--m-compact__list-item--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$tree-view}--m-compact__list-item--BorderBottomColor: var(--pf-t--global--border--color--default);
-  --#{$tree-view}--m-compact__list-item--before--Top: 0;
-  --#{$tree-view}--m-compact__list-item--last-child--before--Height: var(--#{$tree-view}--m-compact__node--before--Top);
-  --#{$tree-view}--m-compact__list-item--nested--before--Top: calc(var(--#{$tree-view}--m-compact__node--nested--PaddingTop) * -1);
-  --#{$tree-view}--m-compact__list-item--nested--last-child--before--Height: calc(var(--#{$tree-view}--m-compact__node--before--Top) + var(--#{$tree-view}--m-compact__node--nested--PaddingTop));
+  --#{$tree-view}--m-compact__list-item--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --#{$tree-view}--m-compact__list-item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
+  --#{$tree-view}--m-compact__list-item--before--InsetBlockStart: 0;
+  --#{$tree-view}--m-compact__list-item--last-child--before--Height: var(--#{$tree-view}--m-compact__node--before--InsetBlockStart);
+  --#{$tree-view}--m-compact__list-item--nested--before--InsetBlockStart: calc(var(--#{$tree-view}--m-compact__node--nested--PaddingBlockStart) * -1);
+  --#{$tree-view}--m-compact__list-item--nested--last-child--before--Height: calc(var(--#{$tree-view}--m-compact__node--before--InsetBlockStart) + var(--#{$tree-view}--m-compact__node--nested--PaddingBlockStart));
 
   // Node
-  --#{$tree-view}--m-compact__node--PaddingLeft: var(--#{$tree-view}--m-compact__node--indent--base);
-  --#{$tree-view}--m-compact__node--before--Top: calc(var(--#{$tree-view}--m-compact__node-container--PaddingTop) + var(--#{$tree-view}--m-compact__node--nested--PaddingTop) + #{pf-size-prem(4px)});
-  --#{$tree-view}--m-compact__node--level-2--PaddingLeft: var(--#{$tree-view}--m-compact__node--indent--base);
+  --#{$tree-view}--m-compact__node--PaddingInlineStart: var(--#{$tree-view}--m-compact__node--indent--base);
+  --#{$tree-view}--m-compact__node--before--InsetBlockStart: calc(var(--#{$tree-view}--m-compact__node-container--PaddingBlockStart) + var(--#{$tree-view}--m-compact__node--nested--PaddingBlockStart) + #{pf-size-prem(4px)});
+  --#{$tree-view}--m-compact__node--level-2--PaddingInlineStart: var(--#{$tree-view}--m-compact__node--indent--base);
 
   // Node toggle
-  --#{$tree-view}--m-compact__node-toggle--nested--MarginRight: calc(var(--#{$tree-view}__node-toggle--PaddingLeft) * -.5);
-  --#{$tree-view}--m-compact__node-toggle--nested--MarginLeft: calc(var(--#{$tree-view}__node-toggle--PaddingLeft) * -1.5);
+  --#{$tree-view}--m-compact__node-toggle--nested--MarginInlineEnd: calc(var(--#{$tree-view}__node-toggle--PaddingInlineStart) * -.5);
+  --#{$tree-view}--m-compact__node-toggle--nested--MarginInlineStart: calc(var(--#{$tree-view}__node-toggle--PaddingInlineStart) * -1.5);
 
   // Node container
   --#{$tree-view}--m-compact__node-container--Display: flex;
-  --#{$tree-view}--m-compact__node-container--PaddingBottom--base: var(--pf-t--global--spacer--lg);
-  --#{$tree-view}--m-compact__node-container--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$tree-view}--m-compact__node-container--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$tree-view}--m-compact__node-container--PaddingBottom: var(--#{$tree-view}--m-compact__node-container--PaddingBottom--base);
-  --#{$tree-view}--m-compact__node-container--PaddingLeft: var(--pf-t--global--spacer--xs);
+  --#{$tree-view}--m-compact__node-container--PaddingBlockEnd--base: var(--pf-t--global--spacer--lg);
+  --#{$tree-view}--m-compact__node-container--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$tree-view}--m-compact__node-container--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$tree-view}--m-compact__node-container--PaddingBlockEnd: var(--#{$tree-view}--m-compact__node-container--PaddingBlockEnd--base);
+  --#{$tree-view}--m-compact__node-container--PaddingInlineStart: var(--pf-t--global--spacer--xs);
   --#{$tree-view}--m-compact__node-container--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$tree-view}--m-compact__node-container--nested--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$tree-view}--m-compact__node-container--nested--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$tree-view}--m-compact__node-container--nested--PaddingBottom: var(--pf-t--global--spacer--md);
-  --#{$tree-view}--m-compact__node-container--nested--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$tree-view}--m-compact__node-container--nested--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$tree-view}--m-compact__node-container--nested--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --#{$tree-view}--m-compact__node-container--nested--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$tree-view}--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --#{$tree-view}--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$tree-view}--m-compact__list-item--m-expanded__node-container--PaddingBottom: 0;
+  --#{$tree-view}--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
 
   // Background transparent
   --#{$tree-view}--m-no-background__node-container--BackgroundColor: transparent;
 
   // Compact, no background
   // ================================================================== //
-  --#{$tree-view}--m-compact--m-no-background--base-border--Left--offset: var(--pf-t--global--spacer--sm);
-  --#{$tree-view}--m-compact--m-no-background--base-border--Left: calc(var(--#{$tree-view}__node--PaddingLeft) - var(--#{$tree-view}--m-compact--m-no-background--base-border--Left--offset));
+  --#{$tree-view}--m-compact--m-no-background--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--sm);
+  --#{$tree-view}--m-compact--m-no-background--base-border--InsetInlineStart: calc(var(--#{$tree-view}__node--PaddingInlineStart) - var(--#{$tree-view}--m-compact--m-no-background--base-border--InsetInlineStart--offset));
   --#{$tree-view}--m-compact--m-no-background__node--indent--base: var(--#{$tree-view}__node--indent--base); // based off of the expected width of the toggle button
   --#{$tree-view}--m-compact--m-no-background__node--nested-indent--base: var(--pf-t--global--spacer--2xl);
-  --#{$tree-view}--m-compact--m-no-background__node--nested--PaddingTop: 0;
-  --#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBottom: 0;
-  --#{$tree-view}--m-compact--m-no-background__node--before--Top: calc(var(--#{$tree-view}--m-compact__node-container--nested--PaddingTop) + var(--#{$tree-view}--m-compact__node--nested--PaddingTop) + #{pf-size-prem(4px)});
+  --#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBlockStart: 0;
+  --#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
+  --#{$tree-view}--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--#{$tree-view}--m-compact__node-container--nested--PaddingBlockStart) + var(--#{$tree-view}--m-compact__node--nested--PaddingBlockStart) + #{pf-size-prem(4px)});
 }
 
 .#{$tree-view} {
@@ -179,13 +179,13 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
         &::before,
         .#{$tree-view}__node::before {
           position: absolute;
-         inset-inline-start: var(--#{$tree-view}--m-guides--guide--Left);
+         inset-inline-start: var(--#{$tree-view}--m-guides--guide--InsetInlineStart);
           content: "";
         }
 
         // vertical border
         &::before {
-         inset-block-start: var(--#{$tree-view}--m-guides__list-item--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-guides__list-item--before--InsetBlockStart);
           z-index: var(--#{$tree-view}--m-guides__list-item--ZIndex);
           width: var(--#{$tree-view}--m-guides__list-item--before--Width);
           height: var(--#{$tree-view}--m-guides__list-item--before--Height);
@@ -194,7 +194,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
         // horizontal border
         .#{$tree-view}__node::before {
-         inset-block-start: var(--#{$tree-view}--m-guides__node--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-guides__node--before--InsetBlockStart);
           width: var(--#{$tree-view}--m-guides__node--before--Width);
           height: var(--#{$tree-view}--m-guides__node--before--Height);
           background-color: var(--#{$tree-view}--m-guides__node--before--BackgroundColor);
@@ -205,55 +205,55 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
         }
 
         .#{$tree-view}__list-item {
-          --#{$tree-view}--m-guides--guide--Left: var(--#{$tree-view}--m-guides--border--nested--Left); // swap with nested value
+          --#{$tree-view}--m-guides--guide--InsetInlineStart: var(--#{$tree-view}--m-guides--border--nested--InsetInlineStart); // swap with nested value
         }
         // stylelint-enable
       }
 
       &:last-child {
-        --#{$tree-view}--m-compact__list-item--BorderBottomWidth: 0; // hide nested list item bottom borders
+        --#{$tree-view}--m-compact__list-item--BorderBlockEndWidth: 0; // hide nested list item bottom borders
       }
     }
   }
 
   &.pf-m-compact {
     --#{$tree-view}__node--Color: var(--#{$tree-view}--m-compact__node--Color);
-    --#{$tree-view}__node--PaddingTop: var(--#{$tree-view}--m-compact__node--PaddingTop);
-    --#{$tree-view}__node--PaddingBottom: var(--#{$tree-view}--m-compact__node--PaddingBottom);
+    --#{$tree-view}__node--PaddingBlockStart: var(--#{$tree-view}--m-compact__node--PaddingBlockStart);
+    --#{$tree-view}__node--PaddingBlockEnd: var(--#{$tree-view}--m-compact__node--PaddingBlockEnd);
     --#{$tree-view}__node-container--Display: var(--#{$tree-view}--m-compact__node-container--Display);
     --#{$tree-view}__node--hover--BackgroundColor: transparent;
-    --#{$tree-view}__list-item__list-item__node-toggle--Top: var(--#{$tree-view}--m-compact__list-item__list-item__node-toggle--Top);
+    --#{$tree-view}__list-item__list-item__node-toggle--InsetBlockStart: var(--#{$tree-view}--m-compact__list-item__list-item__node-toggle--InsetBlockStart);
 
     // Level 1
     .#{$tree-view}__list-item {
-      border-block-end: var(--#{$tree-view}--m-compact__list-item--BorderBottomWidth) solid var(--#{$tree-view}--m-compact__list-item--BorderBottomColor);
+      border-block-end: var(--#{$tree-view}--m-compact__list-item--BorderBlockEndWidth) solid var(--#{$tree-view}--m-compact__list-item--BorderBlockEndColor);
 
       &.pf-m-expanded {
-        --#{$tree-view}--m-compact__node-container--PaddingBottom: var(--#{$tree-view}--m-compact__list-item--m-expanded__node-container--PaddingBottom);
+        --#{$tree-view}--m-compact__node-container--PaddingBlockEnd: var(--#{$tree-view}--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd);
       }
 
       // Level 2
       .#{$tree-view}__list-item {
-        --#{$tree-view}__node--PaddingTop: var(--#{$tree-view}--m-compact__node--nested--PaddingTop);
-        --#{$tree-view}__node--PaddingBottom: var(--#{$tree-view}--m-compact__node--nested--PaddingBottom);
+        --#{$tree-view}__node--PaddingBlockStart: var(--#{$tree-view}--m-compact__node--nested--PaddingBlockStart);
+        --#{$tree-view}__node--PaddingBlockEnd: var(--#{$tree-view}--m-compact__node--nested--PaddingBlockEnd);
         --#{$tree-view}__node-toggle--Position: static;
-        --#{$tree-view}__node--PaddingLeft: var(--#{$tree-view}--m-compact__node--level-2--PaddingLeft); // second+ nested child padding left
+        --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}--m-compact__node--level-2--PaddingInlineStart); // second+ nested child padding left
         --#{$tree-view}__list-item__list-item__node-toggle--TranslateX: 0;
-        --#{$tree-view}--m-compact__list-item--BorderBottomWidth: 0; // hide nested list item bottom borders
-        --#{$tree-view}--m-compact__node-container--PaddingBottom: var(--#{$tree-view}--m-compact__node-container--PaddingBottom--base); // reset expanded node container padding
+        --#{$tree-view}--m-compact__list-item--BorderBlockEndWidth: 0; // hide nested list item bottom borders
+        --#{$tree-view}--m-compact__node-container--PaddingBlockEnd: var(--#{$tree-view}--m-compact__node-container--PaddingBlockEnd--base); // reset expanded node container padding
 
         // stylelint-disable max-nesting-depth, selector-max-class
         &::before,
         .#{$tree-view}__node::before {
-         inset-inline-start: var(--#{$tree-view}--m-compact--border--Left);
+         inset-inline-start: var(--#{$tree-view}--m-compact--border--InsetInlineStart);
         }
 
         &::before {
-         inset-block-start: var(--#{$tree-view}--m-compact__list-item--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-compact__list-item--before--InsetBlockStart);
         }
 
         .#{$tree-view}__node::before {
-         inset-block-start: var(--#{$tree-view}--m-compact__node--before--Top);
+         inset-block-start: var(--#{$tree-view}--m-compact__node--before--InsetBlockStart);
         }
 
         &:last-child::before {
@@ -262,34 +262,34 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 
         // Level 3
         .#{$tree-view}__list-item {
-          --#{$tree-view}__node--PaddingLeft: var(--#{$tree-view}--m-compact__node--PaddingLeft); // second+ nested child padding left
-          --#{$tree-view}--m-compact--border--Left: var(--#{$tree-view}--m-compact--border--nested--Left);
-          --#{$tree-view}--m-compact__list-item--before--Top: var(--#{$tree-view}--m-compact__list-item--nested--before--Top);
+          --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}--m-compact__node--PaddingInlineStart); // second+ nested child padding left
+          --#{$tree-view}--m-compact--border--InsetInlineStart: var(--#{$tree-view}--m-compact--border--nested--InsetInlineStart);
+          --#{$tree-view}--m-compact__list-item--before--InsetBlockStart: var(--#{$tree-view}--m-compact__list-item--nested--before--InsetBlockStart);
           --#{$tree-view}--m-compact__list-item--last-child--before--Height: var(--#{$tree-view}--m-compact__list-item--nested--last-child--before--Height);
         }
 
         .#{$tree-view}__node-container {
-          padding-block-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingTop);
-          padding-block-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingBottom);
-          padding-inline-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingLeft);
-          padding-inline-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingRight);
+          padding-block-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingBlockStart);
+          padding-block-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingBlockEnd);
+          padding-inline-start: var(--#{$tree-view}--m-compact__node-container--nested--PaddingInlineStart);
+          padding-inline-end: var(--#{$tree-view}--m-compact__node-container--nested--PaddingInlineEnd);
           background-color: var(--#{$tree-view}--m-compact__node-container--nested--BackgroundColor);
         }
 
         // add margins to align item text flush left and offset gap between toggle and text
         .#{$tree-view}__node-toggle {
-          margin-inline-start: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginLeft);
-          margin-inline-end: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginRight);
+          margin-inline-start: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginInlineStart);
+          margin-inline-end: var(--#{$tree-view}--m-compact__node-toggle--nested--MarginInlineEnd);
         }
         // stylelint-enable
       }
     }
 
     .#{$tree-view}__node-container {
-      padding-block-start: var(--#{$tree-view}--m-compact__node-container--PaddingTop);
-      padding-block-end: var(--#{$tree-view}--m-compact__node-container--PaddingBottom);
-      padding-inline-start: var(--#{$tree-view}--m-compact__node-container--PaddingLeft);
-      padding-inline-end: var(--#{$tree-view}--m-compact__node-container--PaddingRight);
+      padding-block-start: var(--#{$tree-view}--m-compact__node-container--PaddingBlockStart);
+      padding-block-end: var(--#{$tree-view}--m-compact__node-container--PaddingBlockEnd);
+      padding-inline-start: var(--#{$tree-view}--m-compact__node-container--PaddingInlineStart);
+      padding-inline-end: var(--#{$tree-view}--m-compact__node-container--PaddingInlineEnd);
     }
 
     // stylelint-disable selector-max-class, selector-max-compound-selectors
@@ -302,18 +302,18 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
     // stylelint-enable
 
     &.pf-m-no-background {
-      --#{$tree-view}--m-compact__node--before--Top: var(--#{$tree-view}--m-compact--m-no-background__node--before--Top);
+      --#{$tree-view}--m-compact__node--before--InsetBlockStart: var(--#{$tree-view}--m-compact--m-no-background__node--before--InsetBlockStart);
 
       // stylelint-disable max-nesting-depth, selector-max-class
       .#{$tree-view}__list-item .#{$tree-view}__list-item {
-        --#{$tree-view}__node--PaddingTop: var(--#{$tree-view}--m-compact--m-no-background__node--nested--PaddingTop);
-        --#{$tree-view}__node--PaddingBottom: var(--#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBottom);
+        --#{$tree-view}__node--PaddingBlockStart: var(--#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBlockStart);
+        --#{$tree-view}__node--PaddingBlockEnd: var(--#{$tree-view}--m-compact--m-no-background__node--nested--PaddingBlockEnd);
       }
 
       // level 3
       .#{$tree-view}__list-item .#{$tree-view}__list-item .#{$tree-view}__list-item {
-        --#{$tree-view}--m-compact--border--Left: var(--#{$tree-view}--m-compact--m-no-background--border--nested--Left);
-        --#{$tree-view}__node--PaddingLeft: var(--#{$tree-view}--m-compact--m-no-background__node--PaddingLeft); // third+ nested child padding left
+        --#{$tree-view}--m-compact--border--InsetInlineStart: var(--#{$tree-view}--m-compact--m-no-background--border--nested--InsetInlineStart);
+        --#{$tree-view}__node--PaddingInlineStart: var(--#{$tree-view}--m-compact--m-no-background__node--PaddingInlineStart); // third+ nested child padding left
       }
       // stylelint-enable
     }
@@ -325,7 +325,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__node-toggle-icon {
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
   min-width: var(--#{$tree-view}__node-toggle-icon--MinWidth);
@@ -360,10 +360,10 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 .#{$tree-view}__node {
   position: relative;
   display: flex;
-  padding-block-start: var(--#{$tree-view}__node--PaddingTop);
-  padding-block-end: var(--#{$tree-view}__node--PaddingBottom);
-  padding-inline-start: var(--#{$tree-view}__node--PaddingLeft);
-  padding-inline-end: var(--#{$tree-view}__node--PaddingRight);
+  padding-block-start: var(--#{$tree-view}__node--PaddingBlockStart);
+  padding-block-end: var(--#{$tree-view}__node--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tree-view}__node--PaddingInlineStart);
+  padding-inline-end: var(--#{$tree-view}__node--PaddingInlineEnd);
   color: var(--#{$tree-view}__node--Color);
   background-color: var(--#{$tree-view}__node--BackgroundColor);
 
@@ -372,7 +372,7 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   }
 
   .#{$tree-view}__node-count {
-    margin-inline-start: var(--#{$tree-view}__node-count--MarginLeft);
+    margin-inline-start: var(--#{$tree-view}__node-count--MarginInlineStart);
   }
 }
 
@@ -394,31 +394,31 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__node-check {
-  margin-inline-end: var(--#{$tree-view}__node-check--MarginRight);
+  margin-inline-end: var(--#{$tree-view}__node-check--MarginInlineEnd);
 }
 
 // TODO - should this use the button component? It isn't always a <button> element, but should have the same layout whether it's a button or not
 .#{$tree-view}__node-toggle {
   position: var(--#{$tree-view}__node-toggle--Position);
-  inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Top);
-  inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--Left);
+  inset-block-start: var(--#{$tree-view}__list-item__list-item__node-toggle--InsetBlockStart);
+  inset-inline-start: var(--#{$tree-view}__list-item__list-item__node-toggle--InsetInlineStart);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block-start: var(--#{$tree-view}__node-toggle--PaddingTop);
-  padding-block-end: var(--#{$tree-view}__node-toggle--PaddingBottom);
-  padding-inline-start: var(--#{$tree-view}__node-toggle--PaddingLeft);
-  padding-inline-end: var(--#{$tree-view}__node-toggle--PaddingRight);
-  margin-block-start: var(--#{$tree-view}__node-toggle--MarginTop);
-  margin-block-end: var(--#{$tree-view}__node-toggle--MarginBottom);
+  padding-block-start: var(--#{$tree-view}__node-toggle--PaddingBlockStart);
+  padding-block-end: var(--#{$tree-view}__node-toggle--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tree-view}__node-toggle--PaddingInlineStart);
+  padding-inline-end: var(--#{$tree-view}__node-toggle--PaddingInlineEnd);
+  margin-block-start: var(--#{$tree-view}__node-toggle--MarginBlockStart);
+  margin-block-end: var(--#{$tree-view}__node-toggle--MarginBlockEnd);
   color: var(--#{$tree-view}__node-toggle--Color);
   background-color: var(--#{$tree-view}__node-toggle--BackgroundColor);
   border: 0;
 
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$tree-view}__list-item__list-item__node-toggle--TranslateX))})
   );
 }
 
@@ -427,13 +427,13 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   &.pf-m-truncate {
     --#{$tree-view}__node-content--Overflow: hidden;
 
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 
   @at-root .#{$tree-view}.pf-m-truncate & {
     --#{$tree-view}__node-content--Overflow: hidden;
 
-    @include pf-v5-text-overflow;
+    @include pf-v6-text-overflow;
   }
 }
 
@@ -454,14 +454,14 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
 }
 
 .#{$tree-view}__search {
-  padding-block-start: var(--#{$tree-view}__search--PaddingTop);
-  padding-block-end: var(--#{$tree-view}__search--PaddingBottom);
-  padding-inline-start: var(--#{$tree-view}__search--PaddingLeft);
-  padding-inline-end: var(--#{$tree-view}__search--PaddingRight);
+  padding-block-start: var(--#{$tree-view}__search--PaddingBlockStart);
+  padding-block-end: var(--#{$tree-view}__search--PaddingBlockEnd);
+  padding-inline-start: var(--#{$tree-view}__search--PaddingInlineStart);
+  padding-inline-end: var(--#{$tree-view}__search--PaddingInlineEnd);
 }
 
 .#{$tree-view}__node-icon {
-  padding-inline-end: var(--#{$tree-view}__node-icon--PaddingRight);
+  padding-inline-end: var(--#{$tree-view}__node-icon--PaddingInlineEnd);
   color: var(--#{$tree-view}__node-icon--Color);
 }
 
@@ -491,17 +491,17 @@ $pf-v5-c-tree-view--MaxNesting: 10 !default;
   $root: &;
   $nested-item: &;
 
-  @for $i from 1 through $pf-v5-c-tree-view--MaxNesting {
+  @for $i from 1 through $pf-v6-c-tree-view--MaxNesting {
     #{$nested-item} {
-      --#{$tree-view}__list-item__list-item__node-toggle--Left: var(--#{$tree-view}__node--PaddingLeft);
-      --#{$tree-view}__node--PaddingLeft: calc(var(--#{$tree-view}__node--nested-indent--base) * #{$i} + var(--#{$tree-view}__node--indent--base));
-      --#{$tree-view}--m-guides--border--nested--Left: calc(var(--#{$tree-view}__node--PaddingLeft) - var(--#{$tree-view}--m-guides--guide-left--base--offset));
+      --#{$tree-view}__list-item__list-item__node-toggle--InsetInlineStart: var(--#{$tree-view}__node--PaddingInlineStart);
+      --#{$tree-view}__node--PaddingInlineStart: calc(var(--#{$tree-view}__node--nested-indent--base) * #{$i} + var(--#{$tree-view}__node--indent--base));
+      --#{$tree-view}--m-guides--border--nested--InsetInlineStart: calc(var(--#{$tree-view}__node--PaddingInlineStart) - var(--#{$tree-view}--m-guides--guide-left--base--offset));
 
       @if $i > 1 {
-        --#{$tree-view}--m-compact__node--PaddingLeft: calc(var(--#{$tree-view}--m-compact__node--nested-indent--base) * #{$i - 1} + var(--#{$tree-view}--m-compact__node--indent--base));
-        --#{$tree-view}--m-compact--border--nested--Left: calc(var(--#{$tree-view}__node--PaddingLeft) - var(--#{$tree-view}--m-compact--base-border--Left--offset));
-        --#{$tree-view}--m-compact--m-no-background__node--PaddingLeft: calc(var(--#{$tree-view}--m-compact--m-no-background__node--nested-indent--base) * #{$i - 1} + var(--#{$tree-view}--m-compact--m-no-background__node--indent--base));
-        --#{$tree-view}--m-compact--m-no-background--border--nested--Left: calc(var(--#{$tree-view}__node--PaddingLeft) - var(--#{$tree-view}--m-compact--m-no-background--base-border--Left--offset));
+        --#{$tree-view}--m-compact__node--PaddingInlineStart: calc(var(--#{$tree-view}--m-compact__node--nested-indent--base) * #{$i - 1} + var(--#{$tree-view}--m-compact__node--indent--base));
+        --#{$tree-view}--m-compact--border--nested--InsetInlineStart: calc(var(--#{$tree-view}__node--PaddingInlineStart) - var(--#{$tree-view}--m-compact--base-border--InsetInlineStart--offset));
+        --#{$tree-view}--m-compact--m-no-background__node--PaddingInlineStart: calc(var(--#{$tree-view}--m-compact--m-no-background__node--nested-indent--base) * #{$i - 1} + var(--#{$tree-view}--m-compact--m-no-background__node--indent--base));
+        --#{$tree-view}--m-compact--m-no-background--border--nested--InsetInlineStart: calc(var(--#{$tree-view}__node--PaddingInlineStart) - var(--#{$tree-view}--m-compact--m-no-background--base-border--InsetInlineStart--offset));
       }
     }
 

package/components/Truncate/truncate.css

@@ -1,6 +1,6 @@
 :root,
 .pf-v6-c-truncate {
-  --pf-v6-c-truncate--MinWidth: 12ch;
+  --pf-v6-c-truncate--MinWidth: 6ch;
   --pf-v6-c-truncate__start--MinWidth: 6ch;
 }
 
@@ -15,7 +15,7 @@
 .pf-v6-c-truncate__end {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: pre;
 }
 
 .pf-v6-c-truncate__start {

package/components/Truncate/truncate.scss

@@ -1,8 +1,7 @@
-// @debug $truncate; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$truncate} {
-  --#{$truncate}--MinWidth: 12ch;
+@include pf-root($truncate) {
+  --#{$truncate}--MinWidth: 6ch;
   --#{$truncate}__start--MinWidth: 6ch;
 }
 
@@ -17,7 +16,7 @@
 .#{$truncate}__end {
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: nowrap;
+  white-space: pre;
 }
 
 .#{$truncate}__start {
@@ -26,7 +25,7 @@
 
 // End
 .#{$truncate}__end {
-  @include pf-v5-bidirectional-style (
+  @include pf-v6-bidirectional-style (
     $prop: direction,
     $ltr-val: rtl,
     $rtl-val: ltr
@@ -36,7 +35,7 @@
 .#{$truncate}__start + .#{$truncate}__end {
   overflow: visible;
 
-  @include pf-v5-bidirectional-style (
+  @include pf-v6-bidirectional-style (
     $prop: direction,
     $ltr-val: ltr,
     $rtl-val: rtl
@@ -46,7 +45,7 @@
 // safari not supported
 @supports (-webkit-hyphens: none) {
   .#{$truncate}__end {
-    @include pf-v5-bidirectional-style (
+    @include pf-v6-bidirectional-style (
       $prop: direction,
       $ltr-val: ltr,
       $rtl-val: rtl