@patternfly/react-styles 4.92.7 → 5.0.0-alpha.10

package/css/components/Spinner/spinner.css

@@ -1,202 +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);
 }
 
-span.pf-c-spinner {
-  --pf-c-spinner--AnimationDuration: 1.5s;
-  --pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
-  --pf-c-spinner--stroke-width-multiplier: .1;
-  --pf-c-spinner--stroke-width: calc(var(--pf-c-spinner--diameter) * var(--pf-c-spinner--stroke-width-multiplier));
-  --pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__clipper--after--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--Height: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  --pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__tail-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-  position: relative;
-  display: inline-block;
-  text-align: left;
-  animation: pf-animation-spinner-parent 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-v5-c-spinner.pf-m-sm {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-sm--diameter);
+}
+svg.pf-v5-c-spinner.pf-m-md {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-md--diameter);
+}
+svg.pf-v5-c-spinner.pf-m-lg {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-lg--diameter);
+}
+svg.pf-v5-c-spinner.pf-m-xl {
+  --pf-v5-c-spinner--diameter: var(--pf-v5-c-spinner--m-xl--diameter);
 }
 
-@keyframes pf-animation-spinner-parent {
-  0% {
-    transform: rotate(0deg);
-  }
-  50% {
-    transform: rotate(540deg);
-  }
-  100% {
-    transform: rotate(1080deg);
-  }
-}
-.pf-c-spinner__clipper {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--Width);
-  height: var(--pf-c-spinner__clipper--Height);
-  clip-path: inset(0 0 50% 50%);
-  animation: pf-animation-spinner__clipper var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper {
-  0% {
-    transform: rotate(90deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__clipper::after {
-  position: absolute;
-  width: var(--pf-c-spinner__clipper--after--Width);
-  height: var(--pf-c-spinner__clipper--after--Height);
-  clip-path: inset(0 0 0 50%);
-  content: "";
-  border-radius: 50%;
-  box-shadow: inset 0 0 0 var(--pf-c-spinner__clipper--after--BoxShadowSpreadRadius) var(--pf-c-spinner__clipper--after--BoxShadowColor);
-  animation: pf-animation-spinner__clipper-after var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-
-@keyframes pf-animation-spinner__clipper-after {
-  0% {
-    transform: rotate(-180deg);
-  }
-  100% {
-    transform: rotate(90deg);
-  }
-}
-.pf-c-spinner__lead-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__lead-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__lead-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__lead-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__lead-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  33% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.pf-c-spinner__tail-ball {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  animation: pf-animation-spinner__tail-ball var(--pf-c-spinner--AnimationDuration) linear infinite;
-}
-.pf-c-spinner__tail-ball::after {
-  position: absolute;
-  top: calc(50% - var(--pf-c-spinner__ball--after--Height) / 2);
-  right: 0;
-  width: var(--pf-c-spinner__ball--after--Width);
-  height: var(--pf-c-spinner__ball--after--Height);
-  content: "";
-  background-color: var(--pf-c-spinner__tail-ball--after--BackgroundColor);
-  border-radius: 50%;
-  transform-origin: top right;
-}
-
-@keyframes pf-animation-spinner__tail-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-  66% {
-    transform: rotate(180deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-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-c-spinner.pf-m-sm {
-  --pf-c-spinner--diameter: var(--pf-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-c-spinner.pf-m-lg {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-lg--diameter);
-}
-svg.pf-c-spinner.pf-m-xl {
-  --pf-c-spinner--diameter: var(--pf-c-spinner--m-xl--diameter);
-}
-
-.pf-c-spinner__path {
+.pf-v5-c-spinner__path {
   width: 100%;
   height: 100%;
-  transform-origin: 50% 50%;
-  animation: pf-c-spinner-animation-dash var(--pf-c-spinner--AnimationDuration) var(--pf-c-spinner__path--AnimationTimingFunction) infinite;
-  stroke: var(--pf-c-spinner--Color);
-  stroke-linecap: round;
+  stroke: var(--pf-v5-c-spinner--Color);
   stroke-dasharray: 283;
   stroke-dashoffset: 280;
-  stroke-width: var(--pf-c-spinner--stroke-width);
+  stroke-linecap: round;
+  stroke-width: var(--pf-v5-c-spinner--stroke-width);
+  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;
 }
 
-@keyframes pf-c-spinner-animation-rotate {
+@keyframes pf-v5-c-spinner-animation-rotate {
   0% {
     transform: rotate(0deg);
   }
@@ -204,17 +75,17 @@ 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-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
   100% {
     stroke-dashoffset: 280;

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

@@ -7,10 +7,7 @@ declare const _default: {
     "lg": "pf-m-lg",
     "xl": "pf-m-xl"
   },
-  "spinner": "pf-c-spinner",
-  "spinnerClipper": "pf-c-spinner__clipper",
-  "spinnerLeadBall": "pf-c-spinner__lead-ball",
-  "spinnerPath": "pf-c-spinner__path",
-  "spinnerTailBall": "pf-c-spinner__tail-ball"
+  "spinner": "pf-v5-c-spinner",
+  "spinnerPath": "pf-v5-c-spinner__path"
 };
 export default _default;

package/css/components/Spinner/spinner.js

@@ -9,9 +9,6 @@ exports.default = {
     "lg": "pf-m-lg",
     "xl": "pf-m-xl"
   },
-  "spinner": "pf-c-spinner",
-  "spinnerClipper": "pf-c-spinner__clipper",
-  "spinnerLeadBall": "pf-c-spinner__lead-ball",
-  "spinnerPath": "pf-c-spinner__path",
-  "spinnerTailBall": "pf-c-spinner__tail-ball"
+  "spinner": "pf-v5-c-spinner",
+  "spinnerPath": "pf-v5-c-spinner__path"
 };

package/css/components/Spinner/spinner.mjs

@@ -7,9 +7,6 @@ export default {
     "lg": "pf-m-lg",
     "xl": "pf-m-xl"
   },
-  "spinner": "pf-c-spinner",
-  "spinnerClipper": "pf-c-spinner__clipper",
-  "spinnerLeadBall": "pf-c-spinner__lead-ball",
-  "spinnerPath": "pf-c-spinner__path",
-  "spinnerTailBall": "pf-c-spinner__tail-ball"
+  "spinner": "pf-v5-c-spinner",
+  "spinnerPath": "pf-v5-c-spinner__path"
 };

package/css/components/Switch/switch.css

@@ -1,144 +1,143 @@
-.pf-c-switch {
-  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
-  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
-  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
-  --pf-c-switch__toggle-icon--Offset: 0.125rem;
-  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-switch--Height: auto;
-  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
-  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
-  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
-  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
-  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
-  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
-  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
-  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
-  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
-  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
-  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
-  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
-  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
+.pf-v5-c-switch {
+  --pf-v5-c-switch--FontSize: var(--pf-v5-global--FontSize--md);
+  --pf-v5-c-switch__label--PaddingLeft: var(--pf-v5-global--spacer--md);
+  --pf-v5-c-switch--ColumnGap: var(--pf-v5-c-switch__label--PaddingLeft);
+  --pf-v5-c-switch__toggle-icon--FontSize: calc(var(--pf-v5-c-switch--FontSize) * .625);
+  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--Color--light-100);
+  --pf-v5-c-switch__toggle-icon--Left: calc(var(--pf-v5-c-switch--FontSize) * .4);
+  --pf-v5-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-v5-c-switch--LineHeight: var(--pf-v5-global--LineHeight--md);
+  --pf-v5-c-switch--Height: auto;
+  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-v5-c-switch__toggle-icon--Offset));
+  --pf-v5-c-switch__input--checked__label--Color: var(--pf-v5-global--Color--dark-100);
+  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-switch__input--disabled__label--Color: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--palette--black-150);
+  --pf-v5-c-switch__input--focus__toggle--OutlineWidth: var(--pf-v5-global--BorderWidth--md);
+  --pf-v5-c-switch__input--focus__toggle--OutlineOffset: var(--pf-v5-global--spacer--sm);
+  --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--pf-v5-global--primary-color--100);
+  --pf-v5-c-switch__toggle--Height: calc(var(--pf-v5-c-switch--FontSize) * var(--pf-v5-c-switch--LineHeight));
+  --pf-v5-c-switch__toggle--BackgroundColor: var(--pf-v5-global--palette--black-500);
+  --pf-v5-c-switch__toggle--BorderRadius: var(--pf-v5-c-switch__toggle--Height);
+  --pf-v5-c-switch__toggle--before--Width: calc(var(--pf-v5-c-switch--FontSize) - var(--pf-v5-c-switch__toggle-icon--Offset));
+  --pf-v5-c-switch__toggle--before--Height: var(--pf-v5-c-switch__toggle--before--Width);
+  --pf-v5-c-switch__toggle--before--Top: calc((var(--pf-v5-c-switch__toggle--Height) - var(--pf-v5-c-switch__toggle--before--Height)) / 2);
+  --pf-v5-c-switch__toggle--before--Left: var(--pf-v5-c-switch__toggle--before--Top);
+  --pf-v5-c-switch__toggle--before--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-switch__toggle--before--BorderRadius: var(--pf-v5-global--BorderRadius--lg);
+  --pf-v5-c-switch__toggle--before--BoxShadow: var(--pf-v5-global--BoxShadow--md);
+  --pf-v5-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-v5-c-switch__toggle--Width: calc(var(--pf-v5-c-switch__toggle--Height) + var(--pf-v5-c-switch__toggle-icon--Offset) + var(--pf-v5-c-switch__toggle--before--Width));
+  --pf-v5-c-switch__label--Color: var(--pf-v5-global--Color--dark-100);
   position: relative;
   display: inline-grid;
   grid-template-columns: auto;
   grid-auto-columns: 1fr;
-  column-gap: var(--pf-c-switch--ColumnGap);
-  height: var(--pf-c-switch--Height);
-  font-size: var(--pf-c-switch--FontSize);
-  line-height: var(--pf-c-switch--LineHeight);
+  column-gap: var(--pf-v5-c-switch--ColumnGap);
+  height: var(--pf-v5-c-switch--Height);
+  font-size: var(--pf-v5-c-switch--FontSize);
+  line-height: var(--pf-v5-c-switch--LineHeight);
   vertical-align: middle;
   cursor: pointer;
 }
-.pf-c-switch.pf-m-reverse .pf-c-switch__label,
-.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
+.pf-v5-c-switch.pf-m-reverse .pf-v5-c-switch__label,
+.pf-v5-c-switch.pf-m-reverse .pf-v5-c-switch__toggle {
   grid-row: 1;
 }
-.pf-c-switch.pf-m-reverse .pf-c-switch__label {
+.pf-v5-c-switch.pf-m-reverse .pf-v5-c-switch__label {
   grid-column: 1;
 }
 
-.pf-c-switch__input {
+.pf-v5-c-switch__input {
   position: absolute;
   cursor: pointer;
   opacity: 0;
 }
-.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
-  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
-  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
+.pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
+  outline: var(--pf-v5-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-v5-c-switch__input--focus__toggle--OutlineColor);
+  outline-offset: var(--pf-v5-c-switch__input--focus__toggle--OutlineOffset);
 }
-.pf-c-switch__input:checked ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--checked__label--Color);
+.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__label {
+  color: var(--pf-v5-c-switch__input--checked__label--Color);
 }
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
-  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
+.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
+  background-color: var(--pf-v5-c-switch__input--checked__toggle--BackgroundColor);
 }
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
-  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
+.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle::before {
+  transform: translateX(var(--pf-v5-c-switch__input--checked__toggle--before--TranslateX));
 }
-.pf-c-switch__input:checked ~ .pf-m-off {
+.pf-v5-c-switch__input:checked ~ .pf-m-off {
   display: none;
 }
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--not-checked__label--Color);
+.pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__label {
+  color: var(--pf-v5-c-switch__input--not-checked__label--Color);
 }
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
+.pf-v5-c-switch__input:not(:checked) ~ .pf-v5-c-switch__toggle .pf-v5-c-switch__toggle-icon {
   display: none;
-  visibility: hidden;
 }
-.pf-c-switch__input:not(:checked) ~ .pf-m-on {
+.pf-v5-c-switch__input:not(:checked) ~ .pf-m-on {
   display: none;
 }
-.pf-c-switch__input:disabled {
+.pf-v5-c-switch__input:disabled {
   cursor: not-allowed;
 }
-.pf-c-switch__input:disabled ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--disabled__label--Color);
+.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__label {
+  color: var(--pf-v5-c-switch__input--disabled__label--Color);
   cursor: not-allowed;
 }
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
+.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle {
   cursor: not-allowed;
-  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
+  background-color: var(--pf-v5-c-switch__input--disabled__toggle--BackgroundColor);
 }
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
-  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
+.pf-v5-c-switch__input:disabled ~ .pf-v5-c-switch__toggle::before {
+  background-color: var(--pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor);
 }
 
-.pf-c-switch__toggle {
+.pf-v5-c-switch__toggle {
   position: relative;
   display: inline-block;
-  width: var(--pf-c-switch__toggle--Width);
-  height: var(--pf-c-switch__toggle--Height);
-  background-color: var(--pf-c-switch__toggle--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--BorderRadius);
+  width: var(--pf-v5-c-switch__toggle--Width);
+  height: var(--pf-v5-c-switch__toggle--Height);
+  background-color: var(--pf-v5-c-switch__toggle--BackgroundColor);
+  border-radius: var(--pf-v5-c-switch__toggle--BorderRadius);
 }
-.pf-c-switch__toggle::before {
+.pf-v5-c-switch__toggle::before {
   position: absolute;
-  top: var(--pf-c-switch__toggle--before--Top);
-  left: var(--pf-c-switch__toggle--before--Left);
+  top: var(--pf-v5-c-switch__toggle--before--Top);
+  left: var(--pf-v5-c-switch__toggle--before--Left);
   display: block;
-  width: var(--pf-c-switch__toggle--before--Width);
-  height: var(--pf-c-switch__toggle--before--Height);
+  width: var(--pf-v5-c-switch__toggle--before--Width);
+  height: var(--pf-v5-c-switch__toggle--before--Height);
   content: "";
-  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
-  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
-  transition: var(--pf-c-switch__toggle--before--Transition);
+  background-color: var(--pf-v5-c-switch__toggle--before--BackgroundColor);
+  border-radius: var(--pf-v5-c-switch__toggle--before--BorderRadius);
+  box-shadow: var(--pf-v5-c-switch__toggle--before--BoxShadow);
+  transition: var(--pf-v5-c-switch__toggle--before--Transition);
 }
 
-.pf-c-switch__toggle-icon {
+.pf-v5-c-switch__toggle-icon {
   position: absolute;
   top: 0;
   bottom: 0;
-  left: var(--pf-c-switch__toggle-icon--Left);
+  left: var(--pf-v5-c-switch__toggle-icon--Left);
   display: flex;
   align-items: center;
-  font-size: var(--pf-c-switch__toggle-icon--FontSize);
-  color: var(--pf-c-switch__toggle-icon--Color);
+  font-size: var(--pf-v5-c-switch__toggle-icon--FontSize);
+  color: var(--pf-v5-c-switch__toggle-icon--Color);
 }
 
-.pf-c-switch__label {
+.pf-v5-c-switch__label {
   display: inline-block;
   grid-column: 2;
-  color: var(--pf-c-switch__label--Color);
+  color: var(--pf-v5-c-switch__label--Color);
   vertical-align: top;
 }
 
-:where(.pf-theme-dark) .pf-c-switch {
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--Color--100);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--disabled-color--100);
-  --pf-c-switch__toggle--before--BoxShadow: none;
+:where(.pf-v5-theme-dark) .pf-v5-c-switch {
+  --pf-v5-c-switch__toggle-icon--Color: var(--pf-v5-global--BackgroundColor--100);
+  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-global--Color--100);
+  --pf-v5-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-v5-global--disabled-color--100);
+  --pf-v5-c-switch__toggle--before--BoxShadow: none;
 }

package/css/components/Switch/switch.d.ts

@@ -5,11 +5,11 @@ declare const _default: {
     "off": "pf-m-off",
     "on": "pf-m-on"
   },
-  "switch": "pf-c-switch",
-  "switchInput": "pf-c-switch__input",
-  "switchLabel": "pf-c-switch__label",
-  "switchToggle": "pf-c-switch__toggle",
-  "switchToggleIcon": "pf-c-switch__toggle-icon",
-  "themeDark": "pf-theme-dark"
+  "switch": "pf-v5-c-switch",
+  "switchInput": "pf-v5-c-switch__input",
+  "switchLabel": "pf-v5-c-switch__label",
+  "switchToggle": "pf-v5-c-switch__toggle",
+  "switchToggleIcon": "pf-v5-c-switch__toggle-icon",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Switch/switch.js

@@ -7,10 +7,10 @@ exports.default = {
     "off": "pf-m-off",
     "on": "pf-m-on"
   },
-  "switch": "pf-c-switch",
-  "switchInput": "pf-c-switch__input",
-  "switchLabel": "pf-c-switch__label",
-  "switchToggle": "pf-c-switch__toggle",
-  "switchToggleIcon": "pf-c-switch__toggle-icon",
-  "themeDark": "pf-theme-dark"
+  "switch": "pf-v5-c-switch",
+  "switchInput": "pf-v5-c-switch__input",
+  "switchLabel": "pf-v5-c-switch__label",
+  "switchToggle": "pf-v5-c-switch__toggle",
+  "switchToggleIcon": "pf-v5-c-switch__toggle-icon",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Switch/switch.mjs

@@ -5,10 +5,10 @@ export default {
     "off": "pf-m-off",
     "on": "pf-m-on"
   },
-  "switch": "pf-c-switch",
-  "switchInput": "pf-c-switch__input",
-  "switchLabel": "pf-c-switch__label",
-  "switchToggle": "pf-c-switch__toggle",
-  "switchToggleIcon": "pf-c-switch__toggle-icon",
-  "themeDark": "pf-theme-dark"
+  "switch": "pf-v5-c-switch",
+  "switchInput": "pf-v5-c-switch__input",
+  "switchLabel": "pf-v5-c-switch__label",
+  "switchToggle": "pf-v5-c-switch__toggle",
+  "switchToggleIcon": "pf-v5-c-switch__toggle-icon",
+  "themeDark": "pf-v5-theme-dark"
 };