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

package/css/components/Slider/slider.css

@@ -1,196 +1,196 @@
-.pf-c-slider {
-  --pf-c-slider--value: 0;
-  --pf-c-slider__rail--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-slider__rail--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-slider__rail-track--Height: 0.25rem;
-  --pf-c-slider__rail-track--before--base--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-global--active-color--300);
-  --pf-c-slider__rail-track--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-c-slider--value);
-  --pf-c-slider__steps--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-slider__steps--Height: var(--pf-c-slider__steps--FontSize);
-  --pf-c-slider__step-tick--Top: var(--pf-global--spacer--md);
-  --pf-c-slider__step-tick--Width: 0.25rem;
-  --pf-c-slider__step-tick--Height: 0.25rem;
-  --pf-c-slider__step-tick--BackgroundColor: var(--pf-global--BorderColor--200);
-  --pf-c-slider__step-tick--TranslateX: -50%;
-  --pf-c-slider__step-tick--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-slider__step--first-child__step-tick--TranslateX: 0;
-  --pf-c-slider__step--last-child__step-tick--TranslateX: -100%;
-  --pf-c-slider__step-label--TranslateX: -50%;
-  --pf-c-slider__step-label--Top: calc(var(--pf-global--spacer--xl) + var(--pf-c-slider__rail-track--Height));
-  --pf-c-slider__step--first-child__step-label--TranslateX: 0;
-  --pf-c-slider__step--last-child__step-label--TranslateX: -100%;
-  --pf-c-slider__thumb--Top: calc(var(--pf-c-slider__rail-track--Height) / 2 + var(--pf-global--spacer--md));
-  --pf-c-slider__thumb--Width: 1rem;
-  --pf-c-slider__thumb--Height: 1rem;
-  --pf-c-slider__thumb--Left: var(--pf-c-slider--value);
-  --pf-c-slider__thumb--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-slider__thumb--TranslateX: -50%;
-  --pf-c-slider__thumb--TranslateY: -50%;
-  --pf-c-slider__thumb--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__thumb--BoxShadow--base:
-    0 0 0 2px var(--pf-global--BackgroundColor--100),
-    0 0 0 3px var(--pf-global--primary-color--100);
-  --pf-c-slider__thumb--hover--BoxShadow: var(--pf-c-slider__thumb--BoxShadow--base);
-  --pf-c-slider__thumb--focus--BoxShadow: var(--pf-c-slider__thumb--BoxShadow--base);
-  --pf-c-slider__thumb--active--BoxShadow:
-    var(--pf-c-slider__thumb--BoxShadow--base),
-    0 0 2px 5px var(--pf-global--active-color--200);
-  --pf-c-slider__thumb--before--Width: var(--pf-global--target-size--MinWidth);
-  --pf-c-slider__thumb--before--Height: var(--pf-global--target-size--MinHeight);
-  --pf-c-slider__thumb--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-slider__thumb--before--TranslateX: -50%;
-  --pf-c-slider__thumb--before--TranslateY: -50%;
-  --pf-c-slider__value--MarginLeft: var(--pf-global--spacer--md);
-  --pf-c-slider__value--c-form-control--width-base: 3.5ch;
-  --pf-c-slider__value--c-form-control--width-chars: 3;
-  --pf-c-slider__value--c-form-control--Width: calc(var(--pf-c-slider__value--c-form-control--width-base) + (var(--pf-c-slider__value--c-form-control--width-chars) * 1ch));
-  --pf-c-slider__value--m-floating--TranslateX: -50%;
-  --pf-c-slider__value--m-floating--TranslateY: -100%;
-  --pf-c-slider__value--m-floating--Left: var(--pf-c-slider--value);
-  --pf-c-slider__value--m-floating--ZIndex: var(--pf-global--ZIndex--sm);
-  --pf-c-slider__actions--MarginRight: var(--pf-global--spacer--sm);
-  --pf-c-slider__main--actions--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-global--palette--black-500);
-  --pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-global--palette--black-700);
-  --pf-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-global--palette--black-700);
+.pf-v5-c-slider {
+  --pf-v5-c-slider--value: 0;
+  --pf-v5-c-slider__rail--PaddingTop: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-slider__rail--PaddingBottom: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-slider__rail-track--Height: 0.25rem;
+  --pf-v5-c-slider__rail-track--before--base--BackgroundColor: var(--pf-v5-global--BorderColor--100);
+  --pf-v5-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--active-color--300);
+  --pf-v5-c-slider__rail-track--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --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-v5-global--FontSize--sm);
+  --pf-v5-c-slider__steps--Height: var(--pf-v5-c-slider__steps--FontSize);
+  --pf-v5-c-slider__step-tick--Top: var(--pf-v5-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-v5-global--BorderColor--200);
+  --pf-v5-c-slider__step-tick--TranslateX: -50%;
+  --pf-v5-c-slider__step-tick--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--primary-color--100);
+  --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-v5-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-v5-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-v5-global--primary-color--100);
+  --pf-v5-c-slider__thumb--TranslateX: -50%;
+  --pf-v5-c-slider__thumb--TranslateY: -50%;
+  --pf-v5-c-slider__thumb--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-slider__thumb--BoxShadow--base:
+    0 0 0 2px var(--pf-v5-global--BackgroundColor--100),
+    0 0 0 3px var(--pf-v5-global--primary-color--100);
+  --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),
+    0 0 2px 5px var(--pf-v5-global--active-color--200);
+  --pf-v5-c-slider__thumb--before--Width: var(--pf-v5-global--target-size--MinWidth);
+  --pf-v5-c-slider__thumb--before--Height: var(--pf-v5-global--target-size--MinHeight);
+  --pf-v5-c-slider__thumb--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-slider__thumb--before--TranslateX: -50%;
+  --pf-v5-c-slider__thumb--before--TranslateY: -50%;
+  --pf-v5-c-slider__value--MarginLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-slider__value--c-form-control--width-base: 3.5ch;
+  --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-v5-global--ZIndex--sm);
+  --pf-v5-c-slider__actions--MarginRight: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-slider__main--actions--MarginLeft: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor: var(--pf-v5-global--palette--black-500);
+  --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor: var(--pf-v5-global--palette--black-700);
+  --pf-v5-c-slider--m-disabled__thumb--BackgroundColor: var(--pf-v5-global--palette--black-700);
   display: flex;
 }
-.pf-c-slider.pf-m-disabled {
-  --pf-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
-  --pf-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
-  --pf-c-slider__thumb--BackgroundColor: var(--pf-c-slider--m-disabled__thumb--BackgroundColor);
+.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-c-slider.pf-m-disabled .pf-c-slider__rail,
-.pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
+.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__rail,
+.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
   cursor: not-allowed;
 }
-.pf-c-slider.pf-m-disabled .pf-c-slider__thumb {
-  --pf-c-slider__thumb--BoxShadow: none;
+.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb {
+  --pf-v5-c-slider__thumb--BoxShadow: none;
 }
 
-.pf-c-slider__main {
+.pf-v5-c-slider__main {
   position: relative;
   flex-grow: 1;
 }
 
-.pf-c-slider__rail {
-  padding-top: var(--pf-c-slider__rail--PaddingTop);
-  padding-bottom: var(--pf-c-slider__rail--PaddingBottom);
+.pf-v5-c-slider__rail {
+  padding-top: var(--pf-v5-c-slider__rail--PaddingTop);
+  padding-bottom: var(--pf-v5-c-slider__rail--PaddingBottom);
 }
 
-.pf-c-slider__rail-track {
+.pf-v5-c-slider__rail-track {
   position: relative;
-  height: var(--pf-c-slider__rail-track--Height);
+  height: var(--pf-v5-c-slider__rail-track--Height);
 }
-.pf-c-slider__rail-track::before {
+.pf-v5-c-slider__rail-track::before {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   content: "";
-  background: linear-gradient(to right, var(--pf-c-slider__rail-track--before--fill--BackgroundColor), var(--pf-c-slider__rail-track--before--fill--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop), var(--pf-c-slider__rail-track--before--base--BackgroundColor) var(--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop));
-  border-radius: var(--pf-c-slider__rail-track--before--BorderRadius);
+  background: linear-gradient(to right, 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);
 }
 
-.pf-c-slider__steps {
-  height: var(--pf-c-slider__steps--Height);
-  font-size: var(--pf-c-slider__steps--FontSize);
+.pf-v5-c-slider__steps {
+  height: var(--pf-v5-c-slider__steps--Height);
+  font-size: var(--pf-v5-c-slider__steps--FontSize);
   line-height: 1;
 }
 
-.pf-c-slider__step {
+.pf-v5-c-slider__step {
   position: absolute;
   top: 0;
-  left: var(--pf-c-slider__step--Left);
+  left: var(--pf-v5-c-slider__step--Left);
   content: "";
 }
-.pf-c-slider__step.pf-m-active {
-  --pf-c-slider__step-tick--BackgroundColor: var(--pf-c-slider__step--m-active__slider-tick--BackgroundColor);
+.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-c-slider__step:first-child {
-  --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--first-child__step-tick--TranslateX);
-  --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--first-child__step-label--TranslateX);
+.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-c-slider__step:last-child {
-  --pf-c-slider__step-tick--TranslateX: var(--pf-c-slider__step--last-child__step-tick--TranslateX);
-  --pf-c-slider__step-label--TranslateX: var(--pf-c-slider__step--last-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-c-slider__step-tick {
+.pf-v5-c-slider__step-tick {
   position: absolute;
-  top: var(--pf-c-slider__step-tick--Top);
+  top: var(--pf-v5-c-slider__step-tick--Top);
   left: 0;
-  width: var(--pf-c-slider__step-tick--Width);
-  height: var(--pf-c-slider__step-tick--Height);
-  background-color: var(--pf-c-slider__step-tick--BackgroundColor);
-  border-radius: var(--pf-c-slider__step-tick--BorderRadius);
-  transform: translateX(var(--pf-c-slider__step-tick--TranslateX));
+  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);
+  transform: translateX(var(--pf-v5-c-slider__step-tick--TranslateX));
 }
 
-.pf-c-slider__step-label {
+.pf-v5-c-slider__step-label {
   position: absolute;
-  top: var(--pf-c-slider__step-label--Top);
+  top: var(--pf-v5-c-slider__step-label--Top);
   word-break: normal;
-  transform: translateX(var(--pf-c-slider__step-label--TranslateX));
+  transform: translateX(var(--pf-v5-c-slider__step-label--TranslateX));
 }
 
-.pf-c-slider__thumb {
+.pf-v5-c-slider__thumb {
   position: absolute;
-  top: var(--pf-c-slider__thumb--Top);
-  left: var(--pf-c-slider__thumb--Left);
-  width: var(--pf-c-slider__thumb--Width);
-  height: var(--pf-c-slider__thumb--Height);
+  top: var(--pf-v5-c-slider__thumb--Top);
+  left: var(--pf-v5-c-slider__thumb--Left);
+  width: var(--pf-v5-c-slider__thumb--Width);
+  height: var(--pf-v5-c-slider__thumb--Height);
   cursor: pointer;
-  background-color: var(--pf-c-slider__thumb--BackgroundColor);
-  border-radius: var(--pf-c-slider__thumb--BorderRadius);
-  box-shadow: var(--pf-c-slider__thumb--BoxShadow);
-  transform: translate(var(--pf-c-slider__thumb--TranslateX), var(--pf-c-slider__thumb--TranslateY));
+  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);
+  transform: translate(var(--pf-v5-c-slider__thumb--TranslateX), var(--pf-v5-c-slider__thumb--TranslateY));
 }
-.pf-c-slider__thumb::before {
+.pf-v5-c-slider__thumb::before {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: var(--pf-c-slider__thumb--before--Width);
-  height: var(--pf-c-slider__thumb--before--Height);
+  width: var(--pf-v5-c-slider__thumb--before--Width);
+  height: var(--pf-v5-c-slider__thumb--before--Height);
   content: "";
-  border-radius: var(--pf-c-slider__thumb--before--BorderRadius);
-  transform: translate(var(--pf-c-slider__thumb--before--TranslateX), var(--pf-c-slider__thumb--before--TranslateY));
+  border-radius: var(--pf-v5-c-slider__thumb--before--BorderRadius);
+  transform: translate(var(--pf-v5-c-slider__thumb--before--TranslateX), var(--pf-v5-c-slider__thumb--before--TranslateY));
 }
-.pf-c-slider__thumb:hover {
-  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--hover--BoxShadow);
+.pf-v5-c-slider__thumb:hover {
+  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--hover--BoxShadow);
 }
-.pf-c-slider__thumb:focus {
-  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--focus--BoxShadow);
+.pf-v5-c-slider__thumb:focus {
+  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--focus--BoxShadow);
   outline: 0;
 }
-.pf-c-slider__thumb:active {
-  --pf-c-slider__thumb--BoxShadow: var(--pf-c-slider__thumb--active--BoxShadow);
+.pf-v5-c-slider__thumb:active {
+  --pf-v5-c-slider__thumb--BoxShadow: var(--pf-v5-c-slider__thumb--active--BoxShadow);
 }
 
-.pf-c-slider__value {
-  margin-left: var(--pf-c-slider__value--MarginLeft);
+.pf-v5-c-slider__value {
+  margin-left: var(--pf-v5-c-slider__value--MarginLeft);
 }
-.pf-c-slider__value.pf-m-floating {
-  --pf-c-slider__value--MarginLeft: 0;
+.pf-v5-c-slider__value.pf-m-floating {
+  --pf-v5-c-slider__value--MarginLeft: 0;
   position: absolute;
   top: 0;
-  left: var(--pf-c-slider__value--m-floating--Left);
-  z-index: var(--pf-c-slider__value--m-floating--ZIndex);
-  transform: translate(var(--pf-c-slider__value--m-floating--TranslateX), var(--pf-c-slider__value--m-floating--TranslateY));
+  left: var(--pf-v5-c-slider__value--m-floating--Left);
+  z-index: var(--pf-v5-c-slider__value--m-floating--ZIndex);
+  transform: translate(var(--pf-v5-c-slider__value--m-floating--TranslateX), var(--pf-v5-c-slider__value--m-floating--TranslateY));
 }
-.pf-c-slider__value .pf-c-form-control {
-  width: var(--pf-c-slider__value--c-form-control--Width);
+.pf-v5-c-slider__value .pf-v5-c-form-control {
+  width: var(--pf-v5-c-slider__value--c-form-control--Width);
 }
 
-.pf-c-slider__actions {
+.pf-v5-c-slider__actions {
   display: flex;
-  margin-right: var(--pf-c-slider__actions--MarginRight);
+  margin-right: var(--pf-v5-c-slider__actions--MarginRight);
 }
-.pf-c-slider__main ~ .pf-c-slider__actions {
-  --pf-c-slider__actions--MarginRight: 0;
-  margin-left: var(--pf-c-slider__main--actions--MarginLeft);
+.pf-v5-c-slider__main ~ .pf-v5-c-slider__actions {
+  --pf-v5-c-slider__actions--MarginRight: 0;
+  margin-left: var(--pf-v5-c-slider__main--actions--MarginLeft);
 }

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

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

package/css/components/Slider/slider.js

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

package/css/components/Slider/slider.mjs

@@ -1,20 +1,20 @@
 import './slider.css';
 export default {
-  "formControl": "pf-c-form-control",
+  "formControl": "pf-v5-c-form-control",
   "modifiers": {
     "disabled": "pf-m-disabled",
     "active": "pf-m-active",
     "floating": "pf-m-floating"
   },
-  "slider": "pf-c-slider",
-  "sliderActions": "pf-c-slider__actions",
-  "sliderMain": "pf-c-slider__main",
-  "sliderRail": "pf-c-slider__rail",
-  "sliderRailTrack": "pf-c-slider__rail-track",
-  "sliderStep": "pf-c-slider__step",
-  "sliderStepLabel": "pf-c-slider__step-label",
-  "sliderStepTick": "pf-c-slider__step-tick",
-  "sliderSteps": "pf-c-slider__steps",
-  "sliderThumb": "pf-c-slider__thumb",
-  "sliderValue": "pf-c-slider__value"
+  "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"
 };

package/css/components/Spinner/spinner.css

@@ -1,73 +1,73 @@
-.pf-c-spinner {
-  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
-  --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner--Color: var(--pf-global--primary-color--100);
-  --pf-c-spinner--m-sm--diameter: var(--pf-global--icon--FontSize--sm);
-  --pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
-  --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
-  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
-  --pf-c-spinner--m-inline--diameter: 1em;
-  width: var(--pf-c-spinner--Width);
-  height: var(--pf-c-spinner--Height);
+.pf-v5-c-spinner {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
+  --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-v5-global--primary-color--100);
+  --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
+  --pf-v5-c-spinner--m-inline--diameter: 1em;
+  width: var(--pf-v5-c-spinner--Width);
+  height: var(--pf-v5-c-spinner--Height);
   overflow: hidden;
 }
-.pf-c-spinner.pf-m-inline {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-inline--diameter);
+.pf-v5-c-spinner.pf-m-inline {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-inline--diameter);
 }
-.pf-c-spinner.pf-m-sm {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
+.pf-v5-c-spinner.pf-m-sm {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
 }
-.pf-c-spinner.pf-m-md {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
+.pf-v5-c-spinner.pf-m-md {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
 }
-.pf-c-spinner.pf-m-lg {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
+.pf-v5-c-spinner.pf-m-lg {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
 }
-.pf-c-spinner.pf-m-xl {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
+.pf-v5-c-spinner.pf-m-xl {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
 }
 
-svg.pf-c-spinner {
-  --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
-  --pf-c-spinner--AnimationDuration: 1.4s;
-  --pf-c-spinner--AnimationTimingFunction: linear;
-  --pf-c-spinner--stroke-width: 10;
-  --pf-c-spinner__path--Stroke: var(--pf-c-spinner--Color);
-  --pf-c-spinner__path--StrokeWidth: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__path--AnimationTimingFunction: ease-in-out;
-  --pf-c-spinner--m-sm--diameter: var(--pf-global--icon--FontSize--sm);
-  --pf-c-spinner--m-md--diameter: var(--pf-global--icon--FontSize--md);
-  --pf-c-spinner--m-lg--diameter: var(--pf-global--icon--FontSize--lg);
-  --pf-c-spinner--m-xl--diameter: var(--pf-global--icon--FontSize--xl);
-  animation: pf-c-spinner-animation-rotate calc(var(--pf-c-spinner--AnimationDuration) * 2) var(--pf-c-spinner--AnimationTimingFunction) infinite;
+svg.pf-v5-c-spinner {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-global--icon--FontSize--xl);
+  --pf-v5-c-spinner--AnimationDuration: 1.4s;
+  --pf-v5-c-spinner--AnimationTimingFunction: linear;
+  --pf-v5-c-spinner--stroke-width: 10;
+  --pf-v5-c-spinner__path--Stroke: var(--pf-v5-c-spinner--Color);
+  --pf-v5-c-spinner__path--StrokeWidth: var(--pf-v5-c-spinner--stroke-width);
+  --pf-v5-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v5-c-spinner--m-sm--diameter: var(--pf-v5-global--icon--FontSize--sm);
+  --pf-v5-c-spinner--m-md--diameter: var(--pf-v5-global--icon--FontSize--md);
+  --pf-v5-c-spinner--m-lg--diameter: var(--pf-v5-global--icon--FontSize--lg);
+  --pf-v5-c-spinner--m-xl--diameter: var(--pf-v5-global--icon--FontSize--xl);
+  animation: pf-v5-c-spinner-animation-rotate calc(var(--pf-v5-c-spinner--AnimationDuration) * 2) var(--pf-v5-c-spinner--AnimationTimingFunction) infinite;
 }
-svg.pf-c-spinner.pf-m-sm {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-sm--diameter);
+svg.pf-v5-c-spinner.pf-m-sm {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
 }
-svg.pf-c-spinner.pf-m-md {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-md--diameter);
+svg.pf-v5-c-spinner.pf-m-md {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
 }
-svg.pf-c-spinner.pf-m-lg {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
+svg.pf-v5-c-spinner.pf-m-lg {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
 }
-svg.pf-c-spinner.pf-m-xl {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
+svg.pf-v5-c-spinner.pf-m-xl {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
 }
 
-.pf-c-spinner__path {
+.pf-v5-c-spinner__path {
   width: 100%;
   height: 100%;
-  stroke: var(--pf-c-spinner--Color);
+  stroke: var(--pf-v5-c-spinner--Color);
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
   stroke-linecap: round;
-  stroke-width: var(--pf-c-spinner--stroke-width);
+  stroke-width: var(--pf-v5-c-spinner--stroke-width);
   transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
+  animation: pf-v5-c-spinner-animation-dash var(--pf-v5-c-spinner--AnimationDuration) var(--pf-v5-c-spinner__path--AnimationTimingFunction) infinite;
 }
 
-@keyframes pf-c-spinner-animation-rotate {
+@keyframes pf-v5-c-spinner-animation-rotate {
   0% {
     transform: rotate(0deg);
   }
@@ -75,13 +75,13 @@ svg.pf-c-spinner.pf-m-xl {
     transform: rotate(360deg);
   }
 }
-@keyframes pf-c-spinner-animation-dash {
+@keyframes pf-v5-c-spinner-animation-dash {
   0% {
     stroke-dashoffset: 280;
     transform: rotate(0);
   }
   15% {
-    stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
+    stroke-width: calc(var(--pf-v5-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-c-spinner",
-  "spinnerPath": "pf-c-spinner__path"
+  "spinner": "pf-v5-c-spinner",
+  "spinnerPath": "pf-v5-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-c-spinner",
-  "spinnerPath": "pf-c-spinner__path"
+  "spinner": "pf-v5-c-spinner",
+  "spinnerPath": "pf-v5-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-c-spinner",
-  "spinnerPath": "pf-c-spinner__path"
+  "spinner": "pf-v5-c-spinner",
+  "spinnerPath": "pf-v5-c-spinner__path"
 };