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

package/components/Slider/slider.css

@@ -1,33 +1,33 @@
 :root,
 .pf-v6-c-slider {
   --pf-v6-c-slider--value: 0;
-  --pf-v6-c-slider__step--Left: 0;
-  --pf-v6-c-slider__rail--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-slider__rail--PaddingBottom: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__step--InsetInlineStart: 0;
+  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-slider__rail-track--Height: 0.25rem;
-  --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
   --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
   --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
   --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
   --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
-  --pf-v6-c-slider__step-tick--Top: var(--pf-t--global--spacer--md);
-  --pf-v6-c-slider__step-tick--Width: 0.25rem;
+  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__step-tick--Width: 0.15rem;
   --pf-v6-c-slider__step-tick--Height: 0.25rem;
-  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
+  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
   --pf-v6-c-slider__step-tick--TranslateX: -50%;
-  --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
+  --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
+  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
   --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
   --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
   --pf-v6-c-slider__step-label--TranslateX: -50%;
-  --pf-v6-c-slider__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-slider__rail-track--Height));
+  --pf-v6-c-slider__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-slider__rail-track--Height));
   --pf-v6-c-slider__step--first-child__step-label--TranslateX: 0;
   --pf-v6-c-slider__step--last-child__step-label--TranslateX: -100%;
-  --pf-v6-c-slider__thumb--Top: calc(var(--pf-v6-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
+  --pf-v6-c-slider__thumb--InsetBlockStart: calc(var(--pf-v6-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
   --pf-v6-c-slider__thumb--Width: 1rem;
   --pf-v6-c-slider__thumb--Height: 1rem;
-  --pf-v6-c-slider__thumb--Left: var(--pf-v6-c-slider--value);
+  --pf-v6-c-slider__thumb--InsetInlineStart: var(--pf-v6-c-slider--value);
   --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-slider__thumb--TranslateX: -50%;
   --pf-v6-c-slider__thumb--TranslateY: -50%;
@@ -45,16 +45,16 @@
   --pf-v6-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-slider__thumb--before--TranslateX: -50%;
   --pf-v6-c-slider__thumb--before--TranslateY: -50%;
-  --pf-v6-c-slider__value--MarginLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingLeft) + var(--pf-v6-c-form-control--PaddingRight) + 1.25rem);
+  --pf-v6-c-slider__value--MarginInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-slider__value--c-form-control--width-base: calc(var(--pf-v6-c-form-control--PaddingInlineStart) + var(--pf-v6-c-form-control--PaddingInlineEnd) + 1.25rem);
   --pf-v6-c-slider__value--c-form-control--width-chars: 3;
   --pf-v6-c-slider__value--c-form-control--Width: calc(var(--pf-v6-c-slider__value--c-form-control--width-base) + var(--pf-v6-c-slider__value--c-form-control--width-chars) * 1ch);
   --pf-v6-c-slider__value--m-floating--TranslateX: -50%;
   --pf-v6-c-slider__value--m-floating--TranslateY: -100%;
-  --pf-v6-c-slider__value--m-floating--Left: var(--pf-v6-c-slider--value);
-  --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
-  --pf-v6-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-slider__value--m-floating--InsetInlineStart: var(--pf-v6-c-slider--value);
+  --pf-v6-c-slider__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
+  --pf-v6-c-slider__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-slider__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
@@ -87,8 +87,8 @@
 }
 
 .pf-v6-c-slider__rail {
-  padding-block-start: var(--pf-v6-c-slider__rail--PaddingTop);
-  padding-block-end: var(--pf-v6-c-slider__rail--PaddingBottom);
+  padding-block-start: var(--pf-v6-c-slider__rail--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-slider__rail--PaddingBlockEnd);
 }
 
 .pf-v6-c-slider__rail-track {
@@ -112,7 +112,7 @@
 .pf-v6-c-slider__step {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--pf-v6-c-slider__step--Left);
+  inset-inline-start: var(--pf-v6-c-slider__step--InsetInlineStart);
   content: "";
 }
 .pf-v6-c-slider__step.pf-m-active {
@@ -130,7 +130,7 @@
 .pf-v6-c-slider__step-tick {
   transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
   position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__step-tick--Top);
+  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
   inset-inline-start: 0;
   width: var(--pf-v6-c-slider__step-tick--Width);
   height: var(--pf-v6-c-slider__step-tick--Height);
@@ -144,7 +144,7 @@
 .pf-v6-c-slider__step-label {
   transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
   position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__step-label--Top);
+  inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
   word-break: normal;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
@@ -154,8 +154,8 @@
 .pf-v6-c-slider__thumb {
   transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
   position: absolute;
-  inset-block-start: var(--pf-v6-c-slider__thumb--Top);
-  inset-inline-start: var(--pf-v6-c-slider__thumb--Left);
+  inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
+  inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
   width: var(--pf-v6-c-slider__thumb--Width);
   height: var(--pf-v6-c-slider__thumb--Height);
   cursor: pointer;
@@ -193,14 +193,14 @@
 }
 
 .pf-v6-c-slider__value {
-  margin-inline-start: var(--pf-v6-c-slider__value--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
 }
 .pf-v6-c-slider__value.pf-m-floating {
   transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
-  --pf-v6-c-slider__value--MarginLeft: 0;
+  --pf-v6-c-slider__value--MarginInlineStart: 0;
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--Left);
+  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
   z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
@@ -213,9 +213,9 @@
 
 .pf-v6-c-slider__actions {
   display: flex;
-  margin-inline-end: var(--pf-v6-c-slider__actions--MarginRight);
+  margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
 }
 .pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
-  --pf-v6-c-slider__actions--MarginRight: 0;
-  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginLeft);
+  --pf-v6-c-slider__actions--MarginInlineEnd: 0;
+  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
 }

package/components/Slider/slider.scss

@@ -1,45 +1,44 @@
-// @debug $slider; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$slider} {
+@include pf-root($slider) {
   --#{$slider}--value: 0; // should always be set inline
-  --#{$slider}__step--Left: 0; // should always be set inline
-  
+  --#{$slider}__step--InsetInlineStart: 0; // should always be set inline
+
   // rail
-  --#{$slider}__rail--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$slider}__rail--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$slider}__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$slider}__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
-  --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
+  --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
   --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
   --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
-    
+
   // steps
   --#{$slider}__steps--FontSize: var(--pf-t--global--font--size--sm);
   --#{$slider}__steps--Height: var(--#{$slider}__steps--FontSize);
-  
+
   // step tick
-  --#{$slider}__step-tick--Top: var(--pf-t--global--spacer--md);
-  --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
+  --#{$slider}__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
+  --#{$slider}__step-tick--Width: 0.15rem;
   --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
-  --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
+  --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
   --#{$slider}__step-tick--TranslateX: -50%;
-  --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
-  --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
+  --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
+  --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
   --#{$slider}__step--first-child__step-tick--TranslateX: 0;
   --#{$slider}__step--last-child__step-tick--TranslateX: -100%;
-  
+
   // step label
   --#{$slider}__step-label--TranslateX: -50%;
-  --#{$slider}__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
+  --#{$slider}__step-label--InsetBlockStart: calc(var(--pf-t--global--spacer--xl) + var(--#{$slider}__rail-track--Height));
   --#{$slider}__step--first-child__step-label--TranslateX: 0;
   --#{$slider}__step--last-child__step-label--TranslateX: -100%;
-  
+
   // thumb
-  --#{$slider}__thumb--Top: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
+  --#{$slider}__thumb--InsetBlockStart: calc(var(--#{$slider}__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
   --#{$slider}__thumb--Width: #{pf-size-prem(16px)};
   --#{$slider}__thumb--Height: #{pf-size-prem(16px)};
-  --#{$slider}__thumb--Left: var(--#{$slider}--value);
+  --#{$slider}__thumb--InsetInlineStart: var(--#{$slider}--value);
   --#{$slider}__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$slider}__thumb--TranslateX: -50%;
   --#{$slider}__thumb--TranslateY: -50%;
@@ -57,21 +56,21 @@
   --#{$slider}__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$slider}__thumb--before--TranslateX: -50%;
   --#{$slider}__thumb--before--TranslateY: -50%;
-  
+
   // value
-  --#{$slider}__value--MarginLeft: var(--pf-t--global--spacer--md);
-  --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingLeft) + var(--#{$form-control}--PaddingRight) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
+  --#{$slider}__value--MarginInlineStart: var(--pf-t--global--spacer--md);
+  --#{$slider}__value--c-form-control--width-base: calc(var(--#{$form-control}--PaddingInlineStart) + var(--#{$form-control}--PaddingInlineEnd) + #{pf-size-prem(20px)}); // form control base width + number input spinner width
   --#{$slider}__value--c-form-control--width-chars: 3;
   --#{$slider}__value--c-form-control--Width: calc(var(--#{$slider}__value--c-form-control--width-base) + var(--#{$slider}__value--c-form-control--width-chars) * 1ch);
   --#{$slider}__value--m-floating--TranslateX: -50%;
   --#{$slider}__value--m-floating--TranslateY: -100%;
-  --#{$slider}__value--m-floating--Left: var(--#{$slider}--value);
-  --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
-  
+  --#{$slider}__value--m-floating--InsetInlineStart: var(--#{$slider}--value);
+  --#{$slider}__value--m-floating--ZIndex: var(--pf-t--global--z-index--sm);
+
   // actions
-  --#{$slider}__actions--MarginRight: var(--pf-t--global--spacer--sm);
-  --#{$slider}__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
-  
+  --#{$slider}__actions--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$slider}__main--actions--MarginInlineStart: var(--pf-t--global--spacer--sm);
+
   // disabled
   --#{$slider}--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$slider}--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
@@ -79,12 +78,12 @@
 }
 
 .#{$slider} {
-  @include pf-v5-bidirectional-style(
-    $prop: --#{$slider}__rail-track--before--fill--direction, 
+  @include pf-v6-bidirectional-style(
+    $prop: --#{$slider}__rail-track--before--fill--direction,
     $ltr-val: right,
     $rtl-val: left
   );
-  
+
   display: flex;
 
   &.pf-m-disabled {
@@ -109,8 +108,8 @@
 }
 
 .#{$slider}__rail {
-  padding-block-start: var(--#{$slider}__rail--PaddingTop);
-  padding-block-end: var(--#{$slider}__rail--PaddingBottom);
+  padding-block-start: var(--#{$slider}__rail--PaddingBlockStart);
+  padding-block-end: var(--#{$slider}__rail--PaddingBlockEnd);
 }
 
 .#{$slider}__rail-track {
@@ -141,7 +140,7 @@
 .#{$slider}__step {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--#{$slider}__step--Left); // set programmatically as an inline style
+  inset-inline-start: var(--#{$slider}__step--InsetInlineStart); // set programmatically as an inline style
   content: "";
 
   &.pf-m-active {
@@ -160,14 +159,14 @@
 }
 
 .#{$slider}__step-tick {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$slider}__step-tick--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$slider}__step-tick--TranslateX))})
   );
 
   position: absolute;
-  inset-block-start: var(--#{$slider}__step-tick--Top);
+  inset-block-start: var(--#{$slider}__step-tick--InsetBlockStart);
   inset-inline-start: 0;
   width: var(--#{$slider}__step-tick--Width);
   height: var(--#{$slider}__step-tick--Height);
@@ -176,27 +175,27 @@
 }
 
 .#{$slider}__step-label {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translateX(var(--#{$slider}__step-label--TranslateX)),
-    $rtl-val: translateX(#{pf-v5-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
+    $rtl-val: translateX(#{pf-v6-calc-inverse(var(--#{$slider}__step-label--TranslateX))})
   );
 
   position: absolute;
-  inset-block-start: var(--#{$slider}__step-label--Top);
+  inset-block-start: var(--#{$slider}__step-label--InsetBlockStart);
   word-break: normal;
 }
 
 .#{$slider}__thumb {
-  @include pf-v5-bidirectional-style(
+  @include pf-v6-bidirectional-style(
     $prop: transform,
     $ltr-val: translate(var(--#{$slider}__thumb--TranslateX), var(--#{$slider}__thumb--TranslateY)),
-    $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
+    $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__thumb--TranslateX))}, var(--#{$slider}__thumb--TranslateY))
   );
 
   position: absolute;
-  inset-block-start: var(--#{$slider}__thumb--Top);
-  inset-inline-start: var(--#{$slider}__thumb--Left);
+  inset-block-start: var(--#{$slider}__thumb--InsetBlockStart);
+  inset-inline-start: var(--#{$slider}__thumb--InsetInlineStart);
   width: var(--#{$slider}__thumb--Width);
   height: var(--#{$slider}__thumb--Height);
   cursor: pointer;
@@ -205,10 +204,10 @@
   box-shadow: var(--#{$slider}__thumb--BoxShadow);
 
   &::before {
-    @include pf-v5-bidirectional-style(
+    @include pf-v6-bidirectional-style(
       $prop: transform,
       $ltr-val: translate(var(--#{$slider}__thumb--before--TranslateX), var(--#{$slider}__thumb--before--TranslateY)),
-      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
+      $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__thumb--before--TranslateX))}, var(--#{$slider}__thumb--before--TranslateY))
     );
 
     position: absolute;
@@ -236,20 +235,20 @@
 }
 
 .#{$slider}__value {
-  margin-inline-start: var(--#{$slider}__value--MarginLeft);
+  margin-inline-start: var(--#{$slider}__value--MarginInlineStart);
 
   &.pf-m-floating {
-    @include pf-v5-bidirectional-style(
+    @include pf-v6-bidirectional-style(
       $prop: transform,
       $ltr-val: translate(var(--#{$slider}__value--m-floating--TranslateX), var(--#{$slider}__value--m-floating--TranslateY)),
-      $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
+      $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$slider}__value--m-floating--TranslateX))}, var(--#{$slider}__value--m-floating--TranslateY)),
     );
 
-    --#{$slider}__value--MarginLeft: 0;
+    --#{$slider}__value--MarginInlineStart: 0;
 
     position: absolute;
     inset-block-start: 0;
-    inset-inline-start: var(--#{$slider}__value--m-floating--Left);
+    inset-inline-start: var(--#{$slider}__value--m-floating--InsetInlineStart);
     z-index: var(--#{$slider}__value--m-floating--ZIndex);
   }
 
@@ -260,11 +259,11 @@
 
 .#{$slider}__actions {
   display: flex;
-  margin-inline-end: var(--#{$slider}__actions--MarginRight);
+  margin-inline-end: var(--#{$slider}__actions--MarginInlineEnd);
 
   .#{$slider}__main ~ & {
-    --#{$slider}__actions--MarginRight: 0;
+    --#{$slider}__actions--MarginInlineEnd: 0;
 
-    margin-inline-start: var(--#{$slider}__main--actions--MarginLeft);
+    margin-inline-start: var(--#{$slider}__main--actions--MarginInlineStart);
   }
 }

package/components/Spinner/spinner.scss

@@ -1,7 +1,6 @@
-// @debug $spinner; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$spinner} {
+@include pf-root($spinner) {
   --#{$spinner}--diameter: var(--pf-t--global--icon--size--2xl);
   --#{$spinner}--Width: var(--#{$spinner}--diameter);
   --#{$spinner}--Height: var(--#{$spinner}--diameter);
@@ -13,13 +12,13 @@
   // path
   --#{$spinner}__path--StrokeWidth: var(--#{$spinner}--StrokeWidth);
   --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
-  
+
   // sizes
   --#{$spinner}--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --#{$spinner}--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --#{$spinner}--m-lg--diameter: var(--pf-t--global--icon--size--xl);
   --#{$spinner}--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
-  
+
   // inline
   --#{$spinner}--m-inline--diameter: 1em;
 }

package/components/Switch/switch.css

@@ -4,7 +4,7 @@
   --pf-v6-c-switch--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-switch__toggle-icon--FontSize: calc(var(--pf-v6-c-switch--FontSize) * .625);
   --pf-v6-c-switch__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --pf-v6-c-switch__toggle-icon--Left: calc(var(--pf-v6-c-switch--FontSize) * .4);
+  --pf-v6-c-switch__toggle-icon--InsetInlineStart: calc(var(--pf-v6-c-switch--FontSize) * .4);
   --pf-v6-c-switch__toggle-icon--Offset: 0.125rem;
   --pf-v6-c-switch__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-switch--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -29,7 +29,7 @@
   --pf-v6-c-switch__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-switch__toggle--before--Width: calc(var(--pf-v6-c-switch--FontSize) - var(--pf-v6-c-switch__toggle-icon--Offset));
   --pf-v6-c-switch__toggle--before--Height: var(--pf-v6-c-switch__toggle--before--Width);
-  --pf-v6-c-switch__toggle--before--Left: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
+  --pf-v6-c-switch__toggle--before--InsetInlineStart: calc((var(--pf-v6-c-switch__toggle--Height) - var(--pf-v6-c-switch__toggle--before--Height)) / 2);
   --pf-v6-c-switch__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-switch__toggle--before--Transition: transform .25s ease 0s;
   --pf-v6-c-switch__toggle--Width: calc(var(--pf-v6-c-switch__toggle--Height) + var(--pf-v6-c-switch__toggle-icon--Offset) + var(--pf-v6-c-switch__toggle--before--Width));
@@ -79,18 +79,12 @@
   transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
 }
 
-.pf-v6-c-switch__input:checked ~ .pf-m-off {
-  display: none;
-}
 .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
   color: var(--pf-v6-c-switch__input--not-checked__label--Color);
 }
 .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__toggle .pf-v6-c-switch__toggle-icon {
   display: none;
 }
-.pf-v6-c-switch__input:not(:checked) ~ .pf-m-on {
-  display: none;
-}
 .pf-v6-c-switch__input:disabled {
   cursor: not-allowed;
 }
@@ -118,7 +112,7 @@
 .pf-v6-c-switch__toggle::before {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: var(--pf-v6-c-switch__toggle--before--Left);
+  inset-inline-start: var(--pf-v6-c-switch__toggle--before--InsetInlineStart);
   display: block;
   width: var(--pf-v6-c-switch__toggle--before--Width);
   height: var(--pf-v6-c-switch__toggle--before--Height);
@@ -140,7 +134,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-block-end: 0;
-  inset-inline-start: var(--pf-v6-c-switch__toggle-icon--Left);
+  inset-inline-start: var(--pf-v6-c-switch__toggle-icon--InsetInlineStart);
   display: flex;
   align-items: center;
   font-size: var(--pf-v6-c-switch__toggle-icon--FontSize);

package/components/Switch/switch.scss

@@ -1,7 +1,6 @@
-// @debug $switch; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-.#{$switch} {
+@include pf-root($switch) {
   // Switch - the vars for this file don't follow our normal order so that the IE11 script can convert the vars correctly
   --#{$switch}--FontSize: var(--pf-t--global--font--size--sm);
   --#{$switch}--ColumnGap: var(--pf-t--global--spacer--sm);
@@ -9,7 +8,7 @@
   // Switch icon
   --#{$switch}__toggle-icon--FontSize: calc(var(--#{$switch}--FontSize) * .625); // We don't use an icon font-size here because this value allows the icon to scale relative to the switch's font-size.
   --#{$switch}__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
-  --#{$switch}__toggle-icon--Left: calc(var(--#{$switch}--FontSize) * .4);
+  --#{$switch}__toggle-icon--InsetInlineStart: calc(var(--#{$switch}--FontSize) * .4);
   --#{$switch}__toggle-icon--Offset: #{pf-size-prem(2px)}; // this value is created to handle sizing of the toggle and therefore the width of the toggle and its transform value.
   --#{$switch}__input--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
 
@@ -40,7 +39,7 @@
   --#{$switch}__toggle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$switch}__toggle--before--Width: calc(var(--#{$switch}--FontSize) - var(--#{$switch}__toggle-icon--Offset));
   --#{$switch}__toggle--before--Height: var(--#{$switch}__toggle--before--Width);
-  --#{$switch}__toggle--before--Left: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
+  --#{$switch}__toggle--before--InsetInlineStart: calc((var(--#{$switch}__toggle--Height) - var(--#{$switch}__toggle--before--Height)) / 2);
   --#{$switch}__toggle--before--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$switch}__toggle--before--Transition: transform .25s ease 0s;
   --#{$switch}__toggle--Width: calc(var(--#{$switch}__toggle--Height) + var(--#{$switch}__toggle-icon--Offset) + var(--#{$switch}__toggle--before--Width));
@@ -91,19 +90,15 @@
       background-color: var(--#{$switch}__input--checked__toggle--BackgroundColor);
 
       &::before {
-        @include pf-v5-bidirectional-style(
+        @include pf-v6-bidirectional-style(
           $prop: transform,
           $ltr-val: translate(var(--#{$switch}__input--checked__toggle--before--TranslateX), -50%),
-          $rtl-val: translate(#{pf-v5-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))}, -50%)
+          $rtl-val: translate(#{pf-v6-calc-inverse(var(--#{$switch}__input--checked__toggle--before--TranslateX))}, -50%)
         );
 
         background-color: var(--#{$switch}__input--checked__toggle--before--BackgroundColor);
       }
     }
-
-    ~ .pf-m-off {
-      display: none;
-    }
   }
 
   &:not(:checked) {
@@ -116,10 +111,6 @@
         display: none;
       }
     }
-
-    ~ .pf-m-on {
-      display: none;
-    }
   }
 
   &:disabled {
@@ -154,7 +145,7 @@
   &::before {
     position: absolute;
     inset-block-start: 50%;
-    inset-inline-start: var(--#{$switch}__toggle--before--Left);
+    inset-inline-start: var(--#{$switch}__toggle--before--InsetInlineStart);
     display: block;
     width: var(--#{$switch}__toggle--before--Width);
     height: var(--#{$switch}__toggle--before--Height);
@@ -178,7 +169,7 @@
   position: absolute;
   inset-block-start: 0;
   inset-block-end: 0;
-  inset-inline-start: var(--#{$switch}__toggle-icon--Left);
+  inset-inline-start: var(--#{$switch}__toggle-icon--InsetInlineStart);
   display: flex;
   align-items: center;
   font-size: var(--#{$switch}__toggle-icon--FontSize);

package/components/TabContent/tab-content.css

@@ -1,30 +1,30 @@
 :root,
 .pf-v6-c-tab-content {
-  --pf-v6-c-tab-content__body--PaddingTop: 0;
-  --pf-v6-c-tab-content__body--PaddingRight: 0;
-  --pf-v6-c-tab-content__body--PaddingBottom: 0;
-  --pf-v6-c-tab-content__body--PaddingLeft: 0;
+  --pf-v6-c-tab-content__body--PaddingBlockStart: 0;
+  --pf-v6-c-tab-content__body--PaddingInlineEnd: 0;
+  --pf-v6-c-tab-content__body--PaddingBlockEnd: 0;
+  --pf-v6-c-tab-content__body--PaddingInlineStart: 0;
   --pf-v6-c-tab-content--BackgroundColor: transparent;
-  --pf-v6-c-tab-content__body--m-padding--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-tab-content--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 }
 
 .pf-v6-c-tab-content {
   background-color: var(--pf-v6-c-tab-content--BackgroundColor);
 }
-@media screen and (min-width: 1200px) {
+@media screen and (min-width: 75rem) {
   .pf-v6-c-tab-content {
-    --pf-v6-c-tab-content__body--m-padding--PaddingTop: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingTop);
-    --pf-v6-c-tab-content__body--m-padding--PaddingRight: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingRight);
-    --pf-v6-c-tab-content__body--m-padding--PaddingBottom: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBottom);
-    --pf-v6-c-tab-content__body--m-padding--PaddingLeft: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingLeft);
+    --pf-v6-c-tab-content__body--m-padding--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockStart);
+    --pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineEnd);
+    --pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingBlockEnd);
+    --pf-v6-c-tab-content__body--m-padding--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--xl--PaddingInlineStart);
   }
 }
 .pf-v6-c-tab-content.pf-m-secondary {
@@ -32,14 +32,14 @@
 }
 
 .pf-v6-c-tab-content__body {
-  padding-block-start: var(--pf-v6-c-tab-content__body--PaddingTop);
-  padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingRight);
+  padding-block-start: var(--pf-v6-c-tab-content__body--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-tab-content__body--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-tab-content__body--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-tab-content__body--PaddingInlineEnd);
 }
 .pf-v6-c-tab-content__body.pf-m-padding {
-  --pf-v6-c-tab-content__body--PaddingTop: var(--pf-v6-c-tab-content__body--m-padding--PaddingTop);
-  --pf-v6-c-tab-content__body--PaddingRight: var(--pf-v6-c-tab-content__body--m-padding--PaddingRight);
-  --pf-v6-c-tab-content__body--PaddingBottom: var(--pf-v6-c-tab-content__body--m-padding--PaddingBottom);
-  --pf-v6-c-tab-content__body--PaddingLeft: var(--pf-v6-c-tab-content__body--m-padding--PaddingLeft);
+  --pf-v6-c-tab-content__body--PaddingBlockStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockStart);
+  --pf-v6-c-tab-content__body--PaddingInlineEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineEnd);
+  --pf-v6-c-tab-content__body--PaddingBlockEnd: var(--pf-v6-c-tab-content__body--m-padding--PaddingBlockEnd);
+  --pf-v6-c-tab-content__body--PaddingInlineStart: var(--pf-v6-c-tab-content__body--m-padding--PaddingInlineStart);
 }