@patternfly/react-styles 6.0.0-alpha.9 → 6.0.0-prerelease.1

package/css/components/Slider/slider.css

@@ -1,221 +1,220 @@
-:root,
-.pf-v5-c-slider {
-  --pf-v5-c-slider--value: 0;
-  --pf-v5-c-slider__step--Left: 0;
-  --pf-v5-c-slider__rail--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v5-c-slider__rail-track--Height: 0.25rem;
-  --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
-  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
-  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
-  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v5-c-slider--value);
-  --pf-v5-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
-  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
-  --pf-v5-c-slider__step-tick--Top: var(--pf-t--global--spacer--md);
-  --pf-v5-c-slider__step-tick--Width: 0.25rem;
-  --pf-v5-c-slider__step-tick--Height: 0.25rem;
-  --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
-  --pf-v5-c-slider__step-tick--TranslateX: -50%;
-  --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
-  --pf-v5-c-slider__step--first-child__step-tick--TranslateX: 0;
-  --pf-v5-c-slider__step--last-child__step-tick--TranslateX: -100%;
-  --pf-v5-c-slider__step-label--TranslateX: -50%;
-  --pf-v5-c-slider__step-label--Top: calc(var(--pf-t--global--spacer--xl) + var(--pf-v5-c-slider__rail-track--Height));
-  --pf-v5-c-slider__step--first-child__step-label--TranslateX: 0;
-  --pf-v5-c-slider__step--last-child__step-label--TranslateX: -100%;
-  --pf-v5-c-slider__thumb--Top: calc(var(--pf-v5-c-slider__rail-track--Height) / 2 + var(--pf-t--global--spacer--md));
-  --pf-v5-c-slider__thumb--Width: 1rem;
-  --pf-v5-c-slider__thumb--Height: 1rem;
-  --pf-v5-c-slider__thumb--Left: var(--pf-v5-c-slider--value);
-  --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v5-c-slider__thumb--TranslateX: -50%;
-  --pf-v5-c-slider__thumb--TranslateY: -50%;
-  --pf-v5-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v5-c-slider__thumb--BoxShadow--base:
+:where(:root, .pf-v6-c-slider) {
+  --pf-v6-c-slider--value: 0;
+  --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--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--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--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--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--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--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--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%;
+  --pf-v6-c-slider__thumb--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-slider__thumb--BoxShadow--base:
     0 0 0 2px var(--pf-t--global--background--color--primary--default),
     0 0 0 3px var(--pf-t--global--color--brand--default);
-  --pf-v5-c-slider__thumb--hover--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
-  --pf-v5-c-slider__thumb--focus--BoxShadow: var(--pf-v5-c-slider__thumb--BoxShadow--base);
-  --pf-v5-c-slider__thumb--active--BoxShadow:
-    var(--pf-v5-c-slider__thumb--BoxShadow--base),
+  --pf-v6-c-slider__thumb--hover--BoxShadow: var(--pf-v6-c-slider__thumb--BoxShadow--base);
+  --pf-v6-c-slider__thumb--focus--BoxShadow: var(--pf-v6-c-slider__thumb--BoxShadow--base);
+  --pf-v6-c-slider__thumb--active--BoxShadow:
+    var(--pf-v6-c-slider__thumb--BoxShadow--base),
     0 0 2px 5px var(--pf-t--global--color--nonstatus--blue--clicked);
-  --pf-v5-c-slider__thumb--before--Width: 44px;
-  --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-c-slider__thumb--before--Width);
-  --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-t--global--border--radius--large);
-  --pf-v5-c-slider__thumb--before--TranslateX: -50%;
-  --pf-v5-c-slider__thumb--before--TranslateY: -50%;
-  --pf-v5-c-slider__value--MarginLeft: var(--pf-t--global--spacer--md);
-  --pf-v5-c-slider__value--c-form-control--width-base: calc(var(--pf-v5-c-form-control--PaddingLeft) + var(--pf-v5-c-form-control--PaddingRight) + 1.25rem);
-  --pf-v5-c-slider__value--c-form-control--width-chars: 3;
-  --pf-v5-c-slider__value--c-form-control--Width: calc(var(--pf-v5-c-slider__value--c-form-control--width-base) + var(--pf-v5-c-slider__value--c-form-control--width-chars) * 1ch);
-  --pf-v5-c-slider__value--m-floating--TranslateX: -50%;
-  --pf-v5-c-slider__value--m-floating--TranslateY: -100%;
-  --pf-v5-c-slider__value--m-floating--Left: var(--pf-v5-c-slider--value);
-  --pf-v5-c-slider__value--m-floating--ZIndex: var(--pf-t--global--Zindex--sm);
-  --pf-v5-c-slider__actions--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
-  --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--disabled);
-  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
+  --pf-v6-c-slider__thumb--before--Width: 44px;
+  --pf-v6-c-slider__thumb--before--Height: var(--pf-v6-c-slider__thumb--before--Width);
+  --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--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--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);
 }
 
-.pf-v5-c-slider {
-  --pf-v5-c-slider__rail-track--before--fill--direction: right;
+.pf-v6-c-slider {
+  --pf-v6-c-slider__rail-track--before--fill--direction: right;
   display: flex;
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider {
-  --pf-v5-c-slider__rail-track--before--fill--direction: left;
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
+  --pf-v6-c-slider__rail-track--before--fill--direction: left;
 }
 
-.pf-v5-c-slider.pf-m-disabled {
-  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
-  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
-  --pf-v5-c-slider__thumb--BackgroundColor: var(--pf-v5-c-slider--m-disabled__thumb--BackgroundColor);
+.pf-v6-c-slider.pf-m-disabled {
+  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
+  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
+  --pf-v6-c-slider__thumb--BackgroundColor: var(--pf-v6-c-slider--m-disabled__thumb--BackgroundColor);
 }
-.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__rail,
-.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
+.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__rail,
+.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb {
   cursor: not-allowed;
 }
-.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
-  --pf-v5-c-slider__thumb--BoxShadow: none;
+.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb {
+  --pf-v6-c-slider__thumb--BoxShadow: none;
 }
 
-.pf-v5-c-slider__main {
+.pf-v6-c-slider__main {
   position: relative;
   flex-grow: 1;
 }
 
-.pf-v5-c-slider__rail {
-  padding-block-start: var(--pf-v5-c-slider__rail--PaddingTop);
-  padding-block-end: var(--pf-v5-c-slider__rail--PaddingBottom);
+.pf-v6-c-slider__rail {
+  padding-block-start: var(--pf-v6-c-slider__rail--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-slider__rail--PaddingBlockEnd);
 }
 
-.pf-v5-c-slider__rail-track {
+.pf-v6-c-slider__rail-track {
   position: relative;
-  height: var(--pf-v5-c-slider__rail-track--Height);
+  height: var(--pf-v6-c-slider__rail-track--Height);
 }
-.pf-v5-c-slider__rail-track::before {
+.pf-v6-c-slider__rail-track::before {
   position: absolute;
   inset: 0;
   content: "";
-  background: linear-gradient(to var(--pf-v5-c-slider__rail-track--before--fill--direction), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v5-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
-  border-radius: var(--pf-v5-c-slider__rail-track--before--BorderRadius);
+  background: linear-gradient(to var(--pf-v6-c-slider__rail-track--before--fill--direction), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-v6-c-slider__rail-track--before--base--BackgroundColor) var(--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
+  border-radius: var(--pf-v6-c-slider__rail-track--before--BorderRadius);
 }
 
-.pf-v5-c-slider__steps {
-  height: var(--pf-v5-c-slider__steps--Height);
-  font-size: var(--pf-v5-c-slider__steps--FontSize);
+.pf-v6-c-slider__steps {
+  height: var(--pf-v6-c-slider__steps--Height);
+  font-size: var(--pf-v6-c-slider__steps--FontSize);
   line-height: 1;
 }
 
-.pf-v5-c-slider__step {
+.pf-v6-c-slider__step {
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--pf-v5-c-slider__step--Left);
+  inset-inline-start: var(--pf-v6-c-slider__step--InsetInlineStart);
   content: "";
 }
-.pf-v5-c-slider__step.pf-m-active {
-  --pf-v5-c-slider__step-tick--BackgroundColor: var(--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor);
+.pf-v6-c-slider__step.pf-m-active {
+  --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor);
 }
-.pf-v5-c-slider__step:first-child {
-  --pf-v5-c-slider__step-tick--TranslateX: var(--pf-v5-c-slider__step--first-child__step-tick--TranslateX);
-  --pf-v5-c-slider__step-label--TranslateX: var(--pf-v5-c-slider__step--first-child__step-label--TranslateX);
+.pf-v6-c-slider__step:first-child {
+  --pf-v6-c-slider__step-tick--TranslateX: var(--pf-v6-c-slider__step--first-child__step-tick--TranslateX);
+  --pf-v6-c-slider__step-label--TranslateX: var(--pf-v6-c-slider__step--first-child__step-label--TranslateX);
 }
-.pf-v5-c-slider__step:last-child {
-  --pf-v5-c-slider__step-tick--TranslateX: var(--pf-v5-c-slider__step--last-child__step-tick--TranslateX);
-  --pf-v5-c-slider__step-label--TranslateX: var(--pf-v5-c-slider__step--last-child__step-label--TranslateX);
+.pf-v6-c-slider__step:last-child {
+  --pf-v6-c-slider__step-tick--TranslateX: var(--pf-v6-c-slider__step--last-child__step-tick--TranslateX);
+  --pf-v6-c-slider__step-label--TranslateX: var(--pf-v6-c-slider__step--last-child__step-label--TranslateX);
 }
 
-.pf-v5-c-slider__step-tick {
-  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
+.pf-v6-c-slider__step-tick {
+  transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
   position: absolute;
-  inset-block-start: var(--pf-v5-c-slider__step-tick--Top);
+  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
   inset-inline-start: 0;
-  width: var(--pf-v5-c-slider__step-tick--Width);
-  height: var(--pf-v5-c-slider__step-tick--Height);
-  background-color: var(--pf-v5-c-slider__step-tick--BackgroundColor);
-  border-radius: var(--pf-v5-c-slider__step-tick--BorderRadius);
+  width: var(--pf-v6-c-slider__step-tick--Width);
+  height: var(--pf-v6-c-slider__step-tick--Height);
+  background-color: var(--pf-v6-c-slider__step-tick--BackgroundColor);
+  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-tick {
-  transform: translateX(calc(var(--pf-v5-c-slider__step-tick--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
+  transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
 }
 
-.pf-v5-c-slider__step-label {
-  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
+.pf-v6-c-slider__step-label {
+  transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
   position: absolute;
-  inset-block-start: var(--pf-v5-c-slider__step-label--Top);
+  inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
   word-break: normal;
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__step-label {
-  transform: translateX(calc(var(--pf-v5-c-slider__step-label--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
+  transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
 }
 
-.pf-v5-c-slider__thumb {
-  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
+.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-v5-c-slider__thumb--Top);
-  inset-inline-start: var(--pf-v5-c-slider__thumb--Left);
-  width: var(--pf-v5-c-slider__thumb--Width);
-  height: var(--pf-v5-c-slider__thumb--Height);
+  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;
-  background-color: var(--pf-v5-c-slider__thumb--BackgroundColor);
-  border-radius: var(--pf-v5-c-slider__thumb--BorderRadius);
-  box-shadow: var(--pf-v5-c-slider__thumb--BoxShadow);
+  background-color: var(--pf-v6-c-slider__thumb--BackgroundColor);
+  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
+  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb {
-  transform: translate(calc(var(--pf-v5-c-slider__thumb--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--TranslateY));
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
+  transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
 }
 
-.pf-v5-c-slider__thumb::before {
-  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
+.pf-v6-c-slider__thumb::before {
+  transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
   position: absolute;
   inset-block-start: 50%;
   inset-inline-start: 50%;
-  width: var(--pf-v5-c-slider__thumb--before--Width);
-  height: var(--pf-v5-c-slider__thumb--before--Height);
+  width: var(--pf-v6-c-slider__thumb--before--Width);
+  height: var(--pf-v6-c-slider__thumb--before--Height);
   content: "";
-  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
+  border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__thumb::before {
-  transform: translate(calc(var(--pf-v5-c-slider__thumb--before--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__thumb--before--TranslateY));
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
+  transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
 }
 
-.pf-v5-c-slider__thumb:hover {
-  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
+.pf-v6-c-slider__thumb:hover {
+  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
 }
-.pf-v5-c-slider__thumb:focus {
-  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--focus--BoxShadow);
+.pf-v6-c-slider__thumb:focus {
+  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--focus--BoxShadow);
   outline: 0;
 }
-.pf-v5-c-slider__thumb:active {
-  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--active--BoxShadow);
+.pf-v6-c-slider__thumb:active {
+  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--active--BoxShadow);
 }
 
-.pf-v5-c-slider__value {
-  margin-inline-start: var(--pf-v5-c-slider__value--MarginLeft);
+.pf-v6-c-slider__value {
+  margin-inline-start: var(--pf-v6-c-slider__value--MarginInlineStart);
 }
-.pf-v5-c-slider__value.pf-m-floating {
-  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
-  --pf-v5-c-slider__value--MarginLeft: 0;
+.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--MarginInlineStart: 0;
   position: absolute;
   inset-block-start: 0;
-  inset-inline-start: var(--pf-v5-c-slider__value--m-floating--Left);
-  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
+  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-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider__value.pf-m-floating {
-  transform: translate(calc(var(--pf-v5-c-slider__value--m-floating--TranslateX) * var(--pf-v5-global--inverse--multiplier)), var(--pf-v5-c-slider__value--m-floating--TranslateY));
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
+  transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
 }
 
-.pf-v5-c-slider__value .pf-v5-c-form-control {
-  width: var(--pf-v5-c-slider__value--c-form-control--Width);
+.pf-v6-c-slider__value .pf-v6-c-form-control {
+  width: var(--pf-v6-c-slider__value--c-form-control--Width);
 }
 
-.pf-v5-c-slider__actions {
+.pf-v6-c-slider__actions {
   display: flex;
-  margin-inline-end: var(--pf-v5-c-slider__actions--MarginRight);
+  margin-inline-end: var(--pf-v6-c-slider__actions--MarginInlineEnd);
 }
-.pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
-  --pf-v5-c-slider__actions--MarginRight: 0;
-  margin-inline-start: var(--pf-v5-c-slider__main--actions--MarginLeft);
+.pf-v6-c-slider__main ~ .pf-v6-c-slider__actions {
+  --pf-v6-c-slider__actions--MarginInlineEnd: 0;
+  margin-inline-start: var(--pf-v6-c-slider__main--actions--MarginInlineStart);
 }

package/css/components/Slider/slider.d.ts

@@ -1,22 +1,22 @@
 import './slider.css';
 declare const _default: {
-  "dirRtl": "pf-v5-m-dir-rtl",
-  "formControl": "pf-v5-c-form-control",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "active": "pf-m-active",
     "floating": "pf-m-floating"
   },
-  "slider": "pf-v5-c-slider",
-  "sliderActions": "pf-v5-c-slider__actions",
-  "sliderMain": "pf-v5-c-slider__main",
-  "sliderRail": "pf-v5-c-slider__rail",
-  "sliderRailTrack": "pf-v5-c-slider__rail-track",
-  "sliderStep": "pf-v5-c-slider__step",
-  "sliderStepLabel": "pf-v5-c-slider__step-label",
-  "sliderStepTick": "pf-v5-c-slider__step-tick",
-  "sliderSteps": "pf-v5-c-slider__steps",
-  "sliderThumb": "pf-v5-c-slider__thumb",
-  "sliderValue": "pf-v5-c-slider__value"
+  "slider": "pf-v6-c-slider",
+  "sliderActions": "pf-v6-c-slider__actions",
+  "sliderMain": "pf-v6-c-slider__main",
+  "sliderRail": "pf-v6-c-slider__rail",
+  "sliderRailTrack": "pf-v6-c-slider__rail-track",
+  "sliderStep": "pf-v6-c-slider__step",
+  "sliderStepLabel": "pf-v6-c-slider__step-label",
+  "sliderStepTick": "pf-v6-c-slider__step-tick",
+  "sliderSteps": "pf-v6-c-slider__steps",
+  "sliderThumb": "pf-v6-c-slider__thumb",
+  "sliderValue": "pf-v6-c-slider__value"
 };
 export default _default;

package/css/components/Slider/slider.js

@@ -2,22 +2,22 @@
 exports.__esModule = true;
 require('./slider.css');
 exports.default = {
-  "dirRtl": "pf-v5-m-dir-rtl",
-  "formControl": "pf-v5-c-form-control",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "active": "pf-m-active",
     "floating": "pf-m-floating"
   },
-  "slider": "pf-v5-c-slider",
-  "sliderActions": "pf-v5-c-slider__actions",
-  "sliderMain": "pf-v5-c-slider__main",
-  "sliderRail": "pf-v5-c-slider__rail",
-  "sliderRailTrack": "pf-v5-c-slider__rail-track",
-  "sliderStep": "pf-v5-c-slider__step",
-  "sliderStepLabel": "pf-v5-c-slider__step-label",
-  "sliderStepTick": "pf-v5-c-slider__step-tick",
-  "sliderSteps": "pf-v5-c-slider__steps",
-  "sliderThumb": "pf-v5-c-slider__thumb",
-  "sliderValue": "pf-v5-c-slider__value"
+  "slider": "pf-v6-c-slider",
+  "sliderActions": "pf-v6-c-slider__actions",
+  "sliderMain": "pf-v6-c-slider__main",
+  "sliderRail": "pf-v6-c-slider__rail",
+  "sliderRailTrack": "pf-v6-c-slider__rail-track",
+  "sliderStep": "pf-v6-c-slider__step",
+  "sliderStepLabel": "pf-v6-c-slider__step-label",
+  "sliderStepTick": "pf-v6-c-slider__step-tick",
+  "sliderSteps": "pf-v6-c-slider__steps",
+  "sliderThumb": "pf-v6-c-slider__thumb",
+  "sliderValue": "pf-v6-c-slider__value"
 };

package/css/components/Slider/slider.mjs

@@ -1,21 +1,21 @@
 import './slider.css';
 export default {
-  "dirRtl": "pf-v5-m-dir-rtl",
-  "formControl": "pf-v5-c-form-control",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "formControl": "pf-v6-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "active": "pf-m-active",
     "floating": "pf-m-floating"
   },
-  "slider": "pf-v5-c-slider",
-  "sliderActions": "pf-v5-c-slider__actions",
-  "sliderMain": "pf-v5-c-slider__main",
-  "sliderRail": "pf-v5-c-slider__rail",
-  "sliderRailTrack": "pf-v5-c-slider__rail-track",
-  "sliderStep": "pf-v5-c-slider__step",
-  "sliderStepLabel": "pf-v5-c-slider__step-label",
-  "sliderStepTick": "pf-v5-c-slider__step-tick",
-  "sliderSteps": "pf-v5-c-slider__steps",
-  "sliderThumb": "pf-v5-c-slider__thumb",
-  "sliderValue": "pf-v5-c-slider__value"
+  "slider": "pf-v6-c-slider",
+  "sliderActions": "pf-v6-c-slider__actions",
+  "sliderMain": "pf-v6-c-slider__main",
+  "sliderRail": "pf-v6-c-slider__rail",
+  "sliderRailTrack": "pf-v6-c-slider__rail-track",
+  "sliderStep": "pf-v6-c-slider__step",
+  "sliderStepLabel": "pf-v6-c-slider__step-label",
+  "sliderStepTick": "pf-v6-c-slider__step-tick",
+  "sliderSteps": "pf-v6-c-slider__steps",
+  "sliderThumb": "pf-v6-c-slider__thumb",
+  "sliderValue": "pf-v6-c-slider__value"
 };

package/css/components/Spinner/spinner.css

@@ -1,56 +1,55 @@
-:root,
-.pf-v5-c-spinner {
-  --pf-v5-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
-  --pf-v5-c-spinner--Width: var(--pf-v5-c-spinner--diameter);
-  --pf-v5-c-spinner--Height: var(--pf-v5-c-spinner--diameter);
-  --pf-v5-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
-  --pf-v5-c-spinner--AnimationDuration: 1.4s;
-  --pf-v5-c-spinner--AnimationTimingFunction: linear;
-  --pf-v5-c-spinner--StrokeWidth: 10;
-  --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--StrokeWidth);
-  --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
-  --pf-v5-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
-  --pf-v5-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
-  --pf-v5-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
-  --pf-v5-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
-  --pf-v5-c-spinner--m-inline--diameter: 1em;
+:where(:root, .pf-v6-c-spinner) {
+  --pf-v6-c-spinner--diameter: var(--pf-t--global--icon--size--2xl);
+  --pf-v6-c-spinner--Width: var(--pf-v6-c-spinner--diameter);
+  --pf-v6-c-spinner--Height: var(--pf-v6-c-spinner--diameter);
+  --pf-v6-c-spinner--Color: var(--pf-t--global--icon--color--brand--default);
+  --pf-v6-c-spinner--AnimationDuration: 1.4s;
+  --pf-v6-c-spinner--AnimationTimingFunction: linear;
+  --pf-v6-c-spinner--StrokeWidth: 10;
+  --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
+  --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
+  --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
+  --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
+  --pf-v6-c-spinner--m-xl--diameter: var(--pf-t--global--icon--size--2xl);
+  --pf-v6-c-spinner--m-inline--diameter: 1em;
 }
 
-.pf-v5-c-spinner {
-  width: var(--pf-v5-c-spinner--Width);
-  height: var(--pf-v5-c-spinner--Height);
+.pf-v6-c-spinner {
+  width: var(--pf-v6-c-spinner--Width);
+  height: var(--pf-v6-c-spinner--Height);
   overflow: hidden;
-  animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
+  animation: pf-v6-c-spinner-animation-rotate calc(var(--pf-v6-c-spinner--AnimationDuration) * 2) var(--pf-v6-c-spinner--AnimationTimingFunction) infinite;
 }
-.pf-v5-c-spinner.pf-m-inline {
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
+.pf-v6-c-spinner.pf-m-inline {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
 }
-.pf-v5-c-spinner.pf-m-sm {
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
+.pf-v6-c-spinner.pf-m-sm {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
 }
-.pf-v5-c-spinner.pf-m-md {
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
+.pf-v6-c-spinner.pf-m-md {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter);
 }
-.pf-v5-c-spinner.pf-m-lg {
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
+.pf-v6-c-spinner.pf-m-lg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter);
 }
-.pf-v5-c-spinner.pf-m-xl {
-  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
+.pf-v6-c-spinner.pf-m-xl {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter);
 }
 
-.pf-v5-c-spinner__path {
+.pf-v6-c-spinner__path {
   width: 100%;
   height: 100%;
-  stroke: var(--pf-v5-c-spinner--Color);
+  stroke: var(--pf-v6-c-spinner--Color);
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
   stroke-linecap: round;
-  stroke-width: var(--pf-v5-c-spinner--StrokeWidth);
+  stroke-width: var(--pf-v6-c-spinner--StrokeWidth);
   transform-origin: 50% 50%;
-  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
+  animation: pf-v6-c-spinner-animation-dash var(--pf-v6-c-spinner--AnimationDuration) var(--pf-v6-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
-@keyframes pf-v5-c-spinner-animation-rotate {
+@keyframes pf-v6-c-spinner-animation-rotate {
   0% {
     transform: rotate(0deg);
   }
@@ -58,13 +57,13 @@
     transform: rotate(360deg);
   }
 }
-@keyframes pf-v5-c-spinner-animation-dash {
+@keyframes pf-v6-c-spinner-animation-dash {
   0% {
     stroke-dashoffset: 280;
     transform: rotate(0);
   }
   15% {
-    stroke-width: calc(var(--pf-v5-c-spinner__path--StrokeWidth) - 4);
+    stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth) - 4);
   }
   40% {
     stroke-dasharray: 220;

package/css/components/Spinner/spinner.d.ts

@@ -7,7 +7,7 @@ declare const _default: {
     "lg": "pf-m-lg",
     "xl": "pf-m-xl"
   },
-  "spinner": "pf-v5-c-spinner",
-  "spinnerPath": "pf-v5-c-spinner__path"
+  "spinner": "pf-v6-c-spinner",
+  "spinnerPath": "pf-v6-c-spinner__path"
 };
 export default _default;

package/css/components/Spinner/spinner.js

@@ -9,6 +9,6 @@ exports.default = {
     "lg": "pf-m-lg",
     "xl": "pf-m-xl"
   },
-  "spinner": "pf-v5-c-spinner",
-  "spinnerPath": "pf-v5-c-spinner__path"
+  "spinner": "pf-v6-c-spinner",
+  "spinnerPath": "pf-v6-c-spinner__path"
 };

package/css/components/Spinner/spinner.mjs

@@ -7,6 +7,6 @@ export default {
     "lg": "pf-m-lg",
     "xl": "pf-m-xl"
   },
-  "spinner": "pf-v5-c-spinner",
-  "spinnerPath": "pf-v5-c-spinner__path"
+  "spinner": "pf-v6-c-spinner",
+  "spinnerPath": "pf-v6-c-spinner__path"
 };