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

package/components/Sidebar/sidebar.scss

@@ -1,46 +1,47 @@
-// @debug $sidebar; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
-$pf-v5-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
-$pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
+@use 'sass:math';
+@use '../../sass-utilities' as *;
 
-:root,
-:where(.#{$sidebar}) {
+$pf-v6-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
+$pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
+
+@include pf-root($sidebar) {
   --#{$sidebar}--inset: var(--pf-t--global--spacer--md);
   --#{$sidebar}--xl--inset: var(--pf-t--global--spacer--lg);
   --#{$sidebar}--BorderWidth--base: var(--pf-t--global--border--width--regular);
   --#{$sidebar}--BorderColor--base: var(--pf-t--global--border--color--default);
 
   // Panel
-  --#{$sidebar}__panel--PaddingTop: 0;
-  --#{$sidebar}__panel--PaddingRight: 0;
-  --#{$sidebar}__panel--PaddingBottom: 0;
-  --#{$sidebar}__panel--PaddingLeft: 0;
+  --#{$sidebar}__panel--PaddingBlockStart: 0;
+  --#{$sidebar}__panel--PaddingInlineEnd: 0;
+  --#{$sidebar}__panel--PaddingBlockEnd: 0;
+  --#{$sidebar}__panel--PaddingInlineStart: 0;
   --#{$sidebar}__panel--Order: -1;
 
   // Panel padding
-  --#{$sidebar}__panel--m-padding--PaddingTop: var(--#{$sidebar}--inset);
-  --#{$sidebar}__panel--m-padding--PaddingRight: var(--#{$sidebar}--inset);
-  --#{$sidebar}__panel--m-padding--PaddingBottom: var(--#{$sidebar}--inset);
-  --#{$sidebar}__panel--m-padding--PaddingLeft: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingBlockStart: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingInlineEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingBlockEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__panel--m-padding--PaddingInlineStart: var(--#{$sidebar}--inset);
 
   // Content
-  --#{$sidebar}__content--PaddingTop: 0;
-  --#{$sidebar}__content--PaddingRight: 0;
-  --#{$sidebar}__content--PaddingBottom: 0;
-  --#{$sidebar}__content--PaddingLeft: 0;
+  --#{$sidebar}__content--PaddingBlockStart: 0;
+  --#{$sidebar}__content--PaddingInlineEnd: 0;
+  --#{$sidebar}__content--PaddingBlockEnd: 0;
+  --#{$sidebar}__content--PaddingInlineStart: 0;
   --#{$sidebar}__content--Order: 1;
 
   // Content padding
-  --#{$sidebar}__content--m-padding--PaddingTop: var(--#{$sidebar}--inset);
-  --#{$sidebar}__content--m-padding--PaddingRight: var(--#{$sidebar}--inset);
-  --#{$sidebar}__content--m-padding--PaddingBottom: var(--#{$sidebar}--inset);
-  --#{$sidebar}__content--m-padding--PaddingLeft: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingBlockStart: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingInlineEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingBlockEnd: var(--#{$sidebar}--inset);
+  --#{$sidebar}__content--m-padding--PaddingInlineStart: var(--#{$sidebar}--inset);
 
   // Main
   --#{$sidebar}__main--FlexDirection: column;
   --#{$sidebar}__main--md--FlexDirection: row;
   --#{$sidebar}__main--AlignItems: stretch;
   --#{$sidebar}__main--md--AlignItems: flex-start;
-  --#{$sidebar}__main--child--MarginTop: 0;
+  --#{$sidebar}__main--child--MarginBlockStart: 0;
 
   // Gutter
   --#{$sidebar}--m-gutter__main--Gap: var(--#{$sidebar}--inset);
@@ -60,7 +61,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}--m-stack__main--FlexDirection: column;
   --#{$sidebar}--m-stack__main--AlignItems: stretch;
   --#{$sidebar}--m-stack__panel--Position: sticky;
-  --#{$sidebar}--m-stack__panel--Top: 0;
+  --#{$sidebar}--m-stack__panel--InsetBlockStart: 0;
   --#{$sidebar}--m-stack__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
   --#{$sidebar}--m-stack--m-panel-right__panel--Order: -1;
 
@@ -68,16 +69,16 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}--m-split__main--AlignItems: flex-start;
   --#{$sidebar}--m-split__main--FlexDirection: row;
   --#{$sidebar}--m-split__panel--Position: static;
-  --#{$sidebar}--m-split__panel--Top: auto;
+  --#{$sidebar}--m-split__panel--InsetBlockStart: auto;
   --#{$sidebar}--m-split--m-panel-right__panel--Order: 1;
   --#{$sidebar}--m-split__main--m-border--before--Display: block;
 
   // Panel
   --#{$sidebar}__panel--FlexBasis--base: auto;
-  --#{$sidebar}__panel--BoxShadow--base: #{0 pf-size-prem(4px) pf-size-prem(4px) pf-size-prem(-4px) rgba($pf-v5-color-black-1000, .16)}; // modified so the shadow is only visible on the bottom of the element
+  --#{$sidebar}__panel--BoxShadow--base: var(--pf-t--global--box-shadow--md--bottom);
   --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}__panel--BoxShadow--base);
-  --#{$sidebar}__panel--Top: 0;
-  --#{$sidebar}__panel--md--Top: auto;
+  --#{$sidebar}__panel--InsetBlockStart: 0;
+  --#{$sidebar}__panel--md--InsetBlockStart: auto;
   --#{$sidebar}__panel--Position: sticky;
   --#{$sidebar}__panel--md--Position: static;
   --#{$sidebar}__panel--FlexBasis-base: auto;
@@ -85,7 +86,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__panel--md--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --#{$sidebar}__panel--m-stack--FlexBasis: auto;
-  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--Zindex--xs);
+  --#{$sidebar}__panel--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$sidebar}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$sidebar}__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
@@ -94,24 +95,24 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --#{$sidebar}__content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
   // Sticky
-  --#{$sidebar}__panel--m-sticky--Top: 0;
+  --#{$sidebar}__panel--m-sticky--InsetBlockStart: 0;
   --#{$sidebar}__panel--m-sticky--Position: sticky;
 }
 
 .#{$sidebar} {
   height: 100%;
 
-  @media (min-width: $pf-v5-global--breakpoint--md) {
+  @media (min-width: $pf-v6-global--breakpoint--md) {
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}__main--md--FlexDirection);
     --#{$sidebar}__main--AlignItems: var(--#{$sidebar}__main--md--AlignItems);
     --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}__main--m-border--before--md--Display); // show border starting at md breakpoint
     --#{$sidebar}__panel--BoxShadow: none;
     --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--md--FlexBasis);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}__panel--md--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}__panel--md--InsetBlockStart);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}__panel--md--Position);
   }
 
-  @media (min-width: $pf-v5-global--breakpoint--xl) {
+  @media (min-width: $pf-v6-global--breakpoint--xl) {
     --#{$sidebar}--inset: var(--#{$sidebar}--xl--inset);
   }
 
@@ -123,7 +124,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__panel--Order: var(--#{$sidebar}--m-panel-right__panel--Order);
     --#{$sidebar}__content--Order: var(--#{$sidebar}--m-panel-right__content--Order);
 
-    @media (min-width: $pf-v5-global--breakpoint--md) {
+    @media (min-width: $pf-v6-global--breakpoint--md) {
       --#{$sidebar}--m-panel-right__panel--Order: var(--#{$sidebar}--m-panel-right__panel--md--Order);
       --#{$sidebar}--m-panel-right__content--Order: var(--#{$sidebar}--m-panel-right__content--md--Order);
     }
@@ -133,7 +134,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}--m-stack__main--FlexDirection);
     --#{$sidebar}__main--AlignItems: var(--#{$sidebar}--m-stack__main--AlignItems);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}--m-stack__panel--Position);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}--m-stack__panel--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}--m-stack__panel--InsetBlockStart);
     --#{$sidebar}__panel--BoxShadow: var(--#{$sidebar}--m-stack__panel--BoxShadow);
     --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--m-stack--FlexBasis);
     --#{$sidebar}__main--m-border--before--Display: none;
@@ -144,7 +145,7 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
     --#{$sidebar}__main--FlexDirection: var(--#{$sidebar}--m-split__main--FlexDirection);
     --#{$sidebar}__main--AlignItems: var(--#{$sidebar}--m-split__main--AlignItems);
     --#{$sidebar}__panel--Position: var(--#{$sidebar}--m-split__panel--Position);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}--m-split__panel--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}--m-split__panel--InsetBlockStart);
     --#{$sidebar}__panel--BoxShadow: none;
     --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--m-split--FlexBasis);
     --#{$sidebar}__main--m-border--before--Display: var(--#{$sidebar}--m-split__main--m-border--before--Display);
@@ -168,33 +169,33 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 .#{$sidebar}__panel {
   position: var(--#{$sidebar}__panel--Position);
-  inset-block-start: var(--#{$sidebar}__panel--Top);
+  inset-block-start: var(--#{$sidebar}__panel--InsetBlockStart);
   z-index: var(--#{$sidebar}__panel--ZIndex);
   flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   flex-shrink: 0;
   order: var(--#{$sidebar}__panel--Order);
-  padding-block-start: var(--#{$sidebar}__panel--PaddingTop);
-  padding-block-end: var(--#{$sidebar}__panel--PaddingBottom);
-  padding-inline-start: var(--#{$sidebar}__panel--PaddingLeft);
-  padding-inline-end: var(--#{$sidebar}__panel--PaddingRight);
+  padding-block-start: var(--#{$sidebar}__panel--PaddingBlockStart);
+  padding-block-end: var(--#{$sidebar}__panel--PaddingBlockEnd);
+  padding-inline-start: var(--#{$sidebar}__panel--PaddingInlineStart);
+  padding-inline-end: var(--#{$sidebar}__panel--PaddingInlineEnd);
   background-color: var(--#{$sidebar}__panel--BackgroundColor);
   box-shadow: var(--#{$sidebar}__panel--BoxShadow);
 
   &.pf-m-padding {
-    --#{$sidebar}__panel--PaddingTop: var(--#{$sidebar}__panel--m-padding--PaddingTop);
-    --#{$sidebar}__panel--PaddingRight: var(--#{$sidebar}__panel--m-padding--PaddingRight);
-    --#{$sidebar}__panel--PaddingBottom: var(--#{$sidebar}__panel--m-padding--PaddingBottom);
-    --#{$sidebar}__panel--PaddingLeft: var(--#{$sidebar}__panel--m-padding--PaddingLeft);
+    --#{$sidebar}__panel--PaddingBlockStart: var(--#{$sidebar}__panel--m-padding--PaddingBlockStart);
+    --#{$sidebar}__panel--PaddingInlineEnd: var(--#{$sidebar}__panel--m-padding--PaddingInlineEnd);
+    --#{$sidebar}__panel--PaddingBlockEnd: var(--#{$sidebar}__panel--m-padding--PaddingBlockEnd);
+    --#{$sidebar}__panel--PaddingInlineStart: var(--#{$sidebar}__panel--m-padding--PaddingInlineStart);
   }
 
   &.pf-m-sticky {
     --#{$sidebar}__panel--Position: var(--#{$sidebar}__panel--m-sticky--Position);
-    --#{$sidebar}__panel--Top: var(--#{$sidebar}__panel--m-sticky--Top);
+    --#{$sidebar}__panel--InsetBlockStart: var(--#{$sidebar}__panel--m-sticky--InsetBlockStart);
   }
 
   &.pf-m-static {
     --#{$sidebar}__panel--Position: static;
-    --#{$sidebar}__panel--Top: auto;
+    --#{$sidebar}__panel--InsetBlockStart: auto;
   }
 
   &.pf-m-secondary {
@@ -205,17 +206,17 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 .#{$sidebar}__content {
   flex-grow: 1;
   order: var(--#{$sidebar}__content--Order);
-  padding-block-start: var(--#{$sidebar}__content--PaddingTop);
-  padding-block-end: var(--#{$sidebar}__content--PaddingBottom);
-  padding-inline-start: var(--#{$sidebar}__content--PaddingLeft);
-  padding-inline-end: var(--#{$sidebar}__content--PaddingRight);
+  padding-block-start: var(--#{$sidebar}__content--PaddingBlockStart);
+  padding-block-end: var(--#{$sidebar}__content--PaddingBlockEnd);
+  padding-inline-start: var(--#{$sidebar}__content--PaddingInlineStart);
+  padding-inline-end: var(--#{$sidebar}__content--PaddingInlineEnd);
   background-color: var(--#{$sidebar}__content--BackgroundColor);
 
   &.pf-m-padding {
-    --#{$sidebar}__content--PaddingTop: var(--#{$sidebar}__content--m-padding--PaddingTop);
-    --#{$sidebar}__content--PaddingRight: var(--#{$sidebar}__content--m-padding--PaddingRight);
-    --#{$sidebar}__content--PaddingBottom: var(--#{$sidebar}__content--m-padding--PaddingBottom);
-    --#{$sidebar}__content--PaddingLeft: var(--#{$sidebar}__content--m-padding--PaddingTop);
+    --#{$sidebar}__content--PaddingBlockStart: var(--#{$sidebar}__content--m-padding--PaddingBlockStart);
+    --#{$sidebar}__content--PaddingInlineEnd: var(--#{$sidebar}__content--m-padding--PaddingInlineEnd);
+    --#{$sidebar}__content--PaddingBlockEnd: var(--#{$sidebar}__content--m-padding--PaddingBlockEnd);
+    --#{$sidebar}__content--PaddingInlineStart: var(--#{$sidebar}__content--m-padding--PaddingBlockStart);
   }
 
   &.pf-m-no-background {
@@ -243,18 +244,17 @@ $pf-v5-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   }
 }
 
-
 // Responsive width modifiers
-@each $breakpoint, $breakpoint-value in $pf-v5-c-sidebar--breakpoint-map--width {
+@each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
   $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-  @include pf-v5-apply-breakpoint($breakpoint) {
-    @each $width-value in $pf-v5-c-sidebar__panel--list--width {
-      .pf-v5-c-sidebar__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
+  @include pf-v6-apply-breakpoint($breakpoint) {
+    @each $width-value in $pf-v6-c-sidebar__panel--list--width {
+      .pf-v6-c-sidebar__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
         @if $width-value == "default" {
-          --pf-v5-c-sidebar__panel--FlexBasis: var(--pf-v5-c-sidebar__panel--FlexBasis--base);
+          --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--FlexBasis--base);
         } @else {
-          --pf-v5-c-sidebar__panel--FlexBasis: #{percentage(div($width-value, 100))};
+          --#{$sidebar}__panel--FlexBasis: #{percentage(math.div($width-value, 100))};
         }
       }
     }

package/components/SimpleList/simple-list.css

@@ -1,8 +1,9 @@
-:root, .pf-v6-c-simple-list {
-  --pf-v6-c-simple-list__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-simple-list__item-link--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-simple-list__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-simple-list__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+:root,
+.pf-v6-c-simple-list {
+  --pf-v6-c-simple-list__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-simple-list__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-simple-list__item-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-simple-list__item-link--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-simple-list__item-link--FontSize: var(--pf-t--global--font--size--body--default);
@@ -14,23 +15,23 @@
   --pf-v6-c-simple-list__item-link--m-link--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-simple-list__item-link--m-link--m-current--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-simple-list__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
-  --pf-v6-c-simple-list__title--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-simple-list__title--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-simple-list__title--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-simple-list__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-simple-list__title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-simple-list__title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-simple-list__title--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-simple-list__title--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-simple-list__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-simple-list__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-simple-list__section--section--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-simple-list__section--section--MarginBlockStart: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v6-c-simple-list__item-link {
   display: block;
   width: 100%;
-  padding-block-start: var(--pf-v6-c-simple-list__item-link--PaddingTop);
-  padding-block-end: var(--pf-v6-c-simple-list__item-link--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-simple-list__item-link--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-simple-list__item-link--PaddingRight);
+  padding-block-start: var(--pf-v6-c-simple-list__item-link--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-simple-list__item-link--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-simple-list__item-link--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-simple-list__item-link--PaddingInlineEnd);
   font-size: var(--pf-v6-c-simple-list__item-link--FontSize);
   color: var(--pf-v6-c-simple-list__item-link--Color);
   text-align: start;
@@ -44,7 +45,7 @@
   --pf-v6-c-simple-list__item-link--hover--Color: var(--pf-v6-c-simple-list__item-link--m-link--m-current--Color);
   --pf-v6-c-simple-list__item-link--m-current--Color: var(--pf-v6-c-simple-list__item-link--m-link--hover--Color);
 }
-.pf-v6-c-simple-list__item-link:hover, .pf-v6-c-simple-list__item-link:focus {
+.pf-v6-c-simple-list__item-link:is(:hover, :focus) {
   --pf-v6-c-simple-list__item-link--BackgroundColor: var(--pf-v6-c-simple-list__item-link--hover--BackgroundColor);
   --pf-v6-c-simple-list__item-link--Color: var(--pf-v6-c-simple-list__item-link--hover--Color);
   text-decoration: none;
@@ -55,15 +56,15 @@
 }
 
 .pf-v6-c-simple-list__title {
-  padding-block-start: var(--pf-v6-c-simple-list__title--PaddingTop);
-  padding-block-end: var(--pf-v6-c-simple-list__title--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-simple-list__title--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-simple-list__title--PaddingRight);
+  padding-block-start: var(--pf-v6-c-simple-list__title--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-simple-list__title--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-simple-list__title--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-simple-list__title--PaddingInlineEnd);
   font-size: var(--pf-v6-c-simple-list__title--FontSize);
   font-weight: var(--pf-v6-c-simple-list__title--FontWeight);
   color: var(--pf-v6-c-simple-list__title--Color);
 }
 
 .pf-v6-c-simple-list__section + .pf-v6-c-simple-list__section {
-  margin-block-start: var(--pf-v6-c-simple-list__section--section--MarginTop);
+  margin-block-start: var(--pf-v6-c-simple-list__section--section--MarginBlockStart);
 }

package/components/SimpleList/simple-list.scss

@@ -1,11 +1,11 @@
-// @debug $simple-list; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root, .#{$simple-list} {
+@include pf-root($simple-list) {
   // Simple list item link
-  --#{$simple-list}__item-link--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$simple-list}__item-link--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$simple-list}__item-link--PaddingBottom: var(--pf-t--global--spacer--xs);
-  --#{$simple-list}__item-link--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__item-link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$simple-list}__item-link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$simple-list}__item-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$simple-list}__item-link--Color: var(--pf-t--global--text--color--subtle);
   --#{$simple-list}__item-link--FontSize: var(--pf-t--global--font--size--body--default);
@@ -21,25 +21,25 @@
   --#{$simple-list}__item-link--m-link--hover--Color: var(--pf-t--global--text--color--link--hover);
 
   // Simple list title
-  --#{$simple-list}__title--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$simple-list}__title--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$simple-list}__title--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$simple-list}__title--PaddingLeft: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$simple-list}__title--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__title--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$simple-list}__title--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$simple-list}__title--Color: var(--pf-t--global--text--color--regular);
   --#{$simple-list}__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // Simple list section
-  --#{$simple-list}__section--section--MarginTop: var(--pf-t--global--spacer--sm);
+  --#{$simple-list}__section--section--MarginBlockStart: var(--pf-t--global--spacer--sm);
 }
 
 .#{$simple-list}__item-link {
   display: block;
   width: 100%;
-  padding-block-start: var(--#{$simple-list}__item-link--PaddingTop);
-  padding-block-end: var(--#{$simple-list}__item-link--PaddingBottom);
-  padding-inline-start: var(--#{$simple-list}__item-link--PaddingLeft);
-  padding-inline-end: var(--#{$simple-list}__item-link--PaddingRight);
+  padding-block-start: var(--#{$simple-list}__item-link--PaddingBlockStart);
+  padding-block-end: var(--#{$simple-list}__item-link--PaddingBlockEnd);
+  padding-inline-start: var(--#{$simple-list}__item-link--PaddingInlineStart);
+  padding-inline-end: var(--#{$simple-list}__item-link--PaddingInlineEnd);
   font-size: var(--#{$simple-list}__item-link--FontSize);
   color: var(--#{$simple-list}__item-link--Color);
   text-align: start;
@@ -47,15 +47,14 @@
   background-color: var(--#{$simple-list}__item-link--BackgroundColor);
   border: none;
   border-radius: var(--#{$simple-list}__item-link--BorderRadius);
-  
+
   &.pf-m-link {
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--m-link--Color);
     --#{$simple-list}__item-link--hover--Color: var(--#{$simple-list}__item-link--m-link--m-current--Color);
     --#{$simple-list}__item-link--m-current--Color:  var(--#{$simple-list}__item-link--m-link--hover--Color);
   }
 
-  &:hover,
-  &:focus {
+  &:is(:hover, :focus) {
     --#{$simple-list}__item-link--BackgroundColor: var(--#{$simple-list}__item-link--hover--BackgroundColor);
     --#{$simple-list}__item-link--Color: var(--#{$simple-list}__item-link--hover--Color);
 
@@ -69,15 +68,15 @@
 }
 
 .#{$simple-list}__title {
-  padding-block-start: var(--#{$simple-list}__title--PaddingTop);
-  padding-block-end: var(--#{$simple-list}__title--PaddingBottom);
-  padding-inline-start: var(--#{$simple-list}__title--PaddingLeft);
-  padding-inline-end: var(--#{$simple-list}__title--PaddingRight);
+  padding-block-start: var(--#{$simple-list}__title--PaddingBlockStart);
+  padding-block-end: var(--#{$simple-list}__title--PaddingBlockEnd);
+  padding-inline-start: var(--#{$simple-list}__title--PaddingInlineStart);
+  padding-inline-end: var(--#{$simple-list}__title--PaddingInlineEnd);
   font-size: var(--#{$simple-list}__title--FontSize);
   font-weight: var(--#{$simple-list}__title--FontWeight);
   color: var(--#{$simple-list}__title--Color);
 }
 
 .#{$simple-list}__section + .#{$simple-list}__section {
-  margin-block-start: var(--#{$simple-list}__section--section--MarginTop);
+  margin-block-start: var(--#{$simple-list}__section--section--MarginBlockStart);
 }

package/components/Skeleton/skeleton.css

@@ -5,7 +5,7 @@
   --pf-v6-c-skeleton--Width: auto;
   --pf-v6-c-skeleton--Height: auto;
   --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-skeleton--before--PaddingBottom: 0;
+  --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
   --pf-v6-c-skeleton--before--Height: auto;
   --pf-v6-c-skeleton--before--Content: " ";
   --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
@@ -19,7 +19,7 @@
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
   --pf-v6-c-skeleton--after--AnimationDelay: .5s;
   --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-skeleton--m-circle--before--PaddingBottom: 100%;
+  --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
   --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
   --pf-v6-c-skeleton--m-text-3xl--Height: calc(var(--pf-t--global--font--size--3xl) * var(--pf-t--global--font--line-height--heading));
   --pf-v6-c-skeleton--m-text-2xl--Height: calc(var(--pf-t--global--font--size--2xl) * var(--pf-t--global--font--line-height--heading));
@@ -58,7 +58,7 @@
 .pf-v6-c-skeleton::before {
   display: block;
   height: var(--pf-v6-c-skeleton--before--Height);
-  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBottom);
+  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
   content: var(--pf-v6-c-skeleton--before--Content);
 }
 .pf-v6-c-skeleton::after {
@@ -79,7 +79,7 @@
 }
 .pf-v6-c-skeleton.pf-m-square, .pf-v6-c-skeleton.pf-m-circle {
   --pf-v6-c-skeleton--before--Height: 0;
-  --pf-v6-c-skeleton--before--PaddingBottom: var(--pf-v6-c-skeleton--m-circle--before--PaddingBottom);
+  --pf-v6-c-skeleton--before--PaddingBlockEnd: var(--pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd);
 }
 .pf-v6-c-skeleton.pf-m-width-sm {
   --pf-v6-c-skeleton--Width: var(--pf-v6-c-skeleton--m-width-sm--Width);

package/components/Skeleton/skeleton.scss

@@ -1,14 +1,13 @@
-// @debug $skeleton; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$skeleton} {
+@include pf-root($skeleton) {
   --#{$skeleton}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$skeleton}--Width: auto;
   --#{$skeleton}--Height: auto;
   --#{$skeleton}--BorderRadius: var(--pf-t--global--spacer--sm);
 
   // Before
-  --#{$skeleton}--before--PaddingBottom: 0;
+  --#{$skeleton}--before--PaddingBlockEnd: 0;
   --#{$skeleton}--before--Height: auto;
   --#{$skeleton}--before--Content: "\00a0";
 
@@ -26,7 +25,7 @@
 
   // Circle
   --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$skeleton}--m-circle--before--PaddingBottom: 100%;
+  --#{$skeleton}--m-circle--before--PaddingBlockEnd: 100%;
 
   // Text modifiers
   --#{$skeleton}--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
@@ -71,12 +70,12 @@
   &::before {
     display: block;
     height: var(--#{$skeleton}--before--Height);
-    padding-block-end: var(--#{$skeleton}--before--PaddingBottom);
+    padding-block-end: var(--#{$skeleton}--before--PaddingBlockEnd);
     content: var(--#{$skeleton}--before--Content);
   }
 
   &::after {
-    @include pf-v5-mirror-inline-on-rtl;
+    @include pf-v6-mirror-inline-on-rtl;
 
     position: absolute;
     inset: 0;
@@ -95,7 +94,7 @@
   &.pf-m-square,
   &.pf-m-circle {
     --#{$skeleton}--before--Height: 0;
-    --#{$skeleton}--before--PaddingBottom: var(--#{$skeleton}--m-circle--before--PaddingBottom);
+    --#{$skeleton}--before--PaddingBlockEnd: var(--#{$skeleton}--m-circle--before--PaddingBlockEnd);
   }
 
   // Width

package/components/SkipToContent/skip-to-content.css

@@ -1,15 +1,16 @@
-:root {
-  --pf-v6-c-skip-to-content--Top: var(--pf-t--global--spacer--md);
-  --pf-v6-c-skip-to-content--ZIndex: var(--pf-v6-global--ZIndex--2xl);
-  --pf-v6-c-skip-to-content--focus--Left: var(--pf-t--global--spacer--md);
+:root,
+.pf-v6-c-skip-to-content {
+  --pf-v6-c-skip-to-content--InsetBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-skip-to-content--ZIndex: var(--pf-t--global--z-index--2xl);
+  --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
 }
 
 .pf-v6-c-skip-to-content {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-skip-to-content--Top);
+  inset-block-start: var(--pf-v6-c-skip-to-content--InsetBlockStart);
   inset-inline-start: -300%;
   z-index: var(--pf-v6-c-skip-to-content--ZIndex);
 }
 .pf-v6-c-skip-to-content:focus-within {
-  inset-inline-start: var(--pf-v6-c-skip-to-content--focus--Left);
+  inset-inline-start: var(--pf-v6-c-skip-to-content--focus--InsetInlineStart);
 }

package/components/SkipToContent/skip-to-content.scss

@@ -1,18 +1,18 @@
-// @debug $skip-to-content; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root {
-  --#{$skip-to-content}--Top: var(--pf-t--global--spacer--md);
-  --#{$skip-to-content}--ZIndex: var(--#{$pf-global}--ZIndex--2xl);
-  --#{$skip-to-content}--focus--Left: var(--pf-t--global--spacer--md);
+@include pf-root($skip-to-content) {
+  --#{$skip-to-content}--InsetBlockStart: var(--pf-t--global--spacer--md);
+  --#{$skip-to-content}--ZIndex: var(--pf-t--global--z-index--2xl);
+  --#{$skip-to-content}--focus--InsetInlineStart: var(--pf-t--global--spacer--md);
 }
 
 .#{$skip-to-content} {
   position: absolute;
-  inset-block-start: var(--#{$skip-to-content}--Top);
+  inset-block-start: var(--#{$skip-to-content}--InsetBlockStart);
   inset-inline-start: -300%; // moves off screen
   z-index: var(--#{$skip-to-content}--ZIndex);
 
   &:focus-within {
-    inset-inline-start: var(--#{$skip-to-content}--focus--Left);
+    inset-inline-start: var(--#{$skip-to-content}--focus--InsetInlineStart);
   }
 }