@patternfly/patternfly 5.0.0-alpha.4 → 5.0.0-alpha.41

package/components/Sidebar/sidebar.scss

@@ -1,9 +1,38 @@
 $pf-c-sidebar--breakpoint-map--width: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
 $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
-
 .pf-c-sidebar {
+  --pf-c-sidebar--inset: var(--pf-global--spacer--md);
+  --pf-c-sidebar--xl--inset: var(--pf-global--spacer--lg);
   --pf-c-sidebar--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-sidebar--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-sidebar--BorderColor--base: var(--pf-global--BorderColor--100);
+
+  // Panel
+  --pf-c-sidebar__panel--PaddingTop: 0;
+  --pf-c-sidebar__panel--PaddingRight: 0;
+  --pf-c-sidebar__panel--PaddingBottom: 0;
+  --pf-c-sidebar__panel--PaddingLeft: 0;
+  --pf-c-sidebar__panel--Order: -1;
+
+  // Panel padding
+  --pf-c-sidebar__panel--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__panel--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
+
+  // Content
+  --pf-c-sidebar__content--PaddingTop: 0;
+  --pf-c-sidebar__content--PaddingRight: 0;
+  --pf-c-sidebar__content--PaddingBottom: 0;
+  --pf-c-sidebar__content--PaddingLeft: 0;
+  --pf-c-sidebar__content--Order: 1;
+
+  // Content padding
+  --pf-c-sidebar__content--m-padding--PaddingTop: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingRight: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingBottom: var(--pf-c-sidebar--inset);
+  --pf-c-sidebar__content--m-padding--PaddingLeft: var(--pf-c-sidebar--inset);
 
   // Main
   --pf-c-sidebar__main--FlexDirection: column;
@@ -11,15 +40,20 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar__main--AlignItems: stretch;
   --pf-c-sidebar__main--md--AlignItems: start;
   --pf-c-sidebar__main--child--MarginTop: 0;
-  --pf-c-sidebar__main--child--MarginLeft: 0;
 
   // Gutter
-  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-global--spacer--md);
-  --pf-c-sidebar--m-gutter__main--xl--Gap: var(--pf-global--spacer--lg);
+  --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--inset);
+
+  // Border
+  --pf-c-sidebar__main--m-border--before--Display: none;
+  --pf-c-sidebar__main--m-border--before--md--Display: block;
+  --pf-c-sidebar__main--m-border--before--BorderWidth: var(--pf-c-sidebar--BorderWidth--base);
+  --pf-c-sidebar__main--m-border--before--BorderColor: var(--pf-c-sidebar--BorderColor--base);
 
   // Panel right
-  --pf-c-sidebar--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-panel-right__panel--Order: -1;
   --pf-c-sidebar--m-panel-right__panel--md--Order: 1;
+  --pf-c-sidebar--m-panel-right__content--md--Order: -1;
 
   // Stack
   --pf-c-sidebar--m-stack__main--FlexDirection: column;
@@ -27,7 +61,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-stack__panel--Position: sticky;
   --pf-c-sidebar--m-stack__panel--Top: 0;
   --pf-c-sidebar--m-stack__panel--BoxShadow: var(--pf-c-sidebar__panel--BoxShadow--base);
-  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: 0;
+  --pf-c-sidebar--m-stack--m-panel-right__panel--Order: -1;
 
   // Split
   --pf-c-sidebar--m-split__main--AlignItems: start;
@@ -35,6 +69,7 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar--m-split__panel--Position: static;
   --pf-c-sidebar--m-split__panel--Top: auto;
   --pf-c-sidebar--m-split--m-panel-right__panel--Order: 1;
+  --pf-c-sidebar--m-split__main--m-border--before--Display: block;
 
   // Panel
   --pf-c-sidebar__panel--FlexBasis--base: auto;
@@ -50,7 +85,6 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   --pf-c-sidebar__panel--m-split--FlexBasis: #{pf-size-prem(250px)};
   --pf-c-sidebar__panel--m-stack--FlexBasis: auto;
   --pf-c-sidebar__panel--ZIndex: var(--pf-global--ZIndex--xs);
-  --pf-c-sidebar__panel--Order: 0;
   --pf-c-sidebar__panel--BackgroundColor: var(--pf-global--BackgroundColor--100);
 
   // Content
@@ -62,61 +96,51 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
   @media (min-width: $pf-global--breakpoint--md) {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar__main--md--FlexDirection);
+    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar__main--m-border--before--md--Display); // show border starting at md breakpoint
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--md--FlexBasis);
-    --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar__main--md--AlignItems);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--md--Top);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--md--Position);
   }
 
   @media (min-width: $pf-global--breakpoint--xl) {
-    --pf-c-sidebar--m-gutter__main--Gap: var(--pf-c-sidebar--m-gutter__main--xl--Gap);
+    --pf-c-sidebar--inset: var(--pf-c-sidebar--xl--inset);
   }
 
-  &.pf-m-gutter {
-    --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-    --pf-c-sidebar__main--child--MarginLeft: 0;
-
-    > .pf-c-sidebar__main > * + * {
-      margin-top: var(--pf-c-sidebar__main--child--MarginTop);
-      margin-left: var(--pf-c-sidebar__main--child--MarginLeft);
-    }
-
-    @media (min-width: $pf-global--breakpoint--md) {
-      --pf-c-sidebar__main--child--MarginTop: 0;
-      --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
-    }
+  &.pf-m-gutter > .pf-c-sidebar__main {
+    gap: var(--pf-c-sidebar--m-gutter__main--Gap);
   }
 
   &.pf-m-panel-right {
     --pf-c-sidebar__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--Order);
+    --pf-c-sidebar__content--Order: var(--pf-c-sidebar--m-panel-right__content--Order);
 
     @media (min-width: $pf-global--breakpoint--md) {
       --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-panel-right__panel--md--Order);
+      --pf-c-sidebar--m-panel-right__content--Order: var(--pf-c-sidebar--m-panel-right__content--md--Order);
     }
   }
 
   &.pf-m-stack {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-stack__main--FlexDirection);
     --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-stack__main--AlignItems);
-    --pf-c-sidebar__main--child--MarginTop: var(--pf-c-sidebar--m-gutter__main--Gap);
-    --pf-c-sidebar__main--child--MarginLeft: 0;
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-stack__panel--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-stack__panel--Top);
     --pf-c-sidebar__panel--BoxShadow: var(--pf-c-sidebar--m-stack__panel--BoxShadow);
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-stack--FlexBasis);
+    --pf-c-sidebar__main--m-border--before--Display: none;
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-stack--m-panel-right__panel--Order);
   }
 
   &.pf-m-split {
     --pf-c-sidebar__main--FlexDirection: var(--pf-c-sidebar--m-split__main--FlexDirection);
     --pf-c-sidebar__main--AlignItems: var(--pf-c-sidebar--m-split__main--AlignItems);
-    --pf-c-sidebar__main--child--MarginTop: 0;
-    --pf-c-sidebar__main--child--MarginLeft: var(--pf-c-sidebar--m-gutter__main--Gap);
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar--m-split__panel--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar--m-split__panel--Top);
     --pf-c-sidebar__panel--BoxShadow: none;
     --pf-c-sidebar__panel--FlexBasis: var(--pf-c-sidebar__panel--m-split--FlexBasis);
+    --pf-c-sidebar__main--m-border--before--Display: var(--pf-c-sidebar--m-split__main--m-border--before--Display);
     --pf-c-sidebar--m-panel-right__panel--Order: var(--pf-c-sidebar--m-split--m-panel-right__panel--Order);
   }
 
@@ -127,18 +151,34 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   display: flex;
   flex-direction: var(--pf-c-sidebar__main--FlexDirection);
   align-items: var(--pf-c-sidebar__main--AlignItems);
+
+  &.pf-m-border::before {
+    display: var(--pf-c-sidebar__main--m-border--before--Display);
+    flex: 0 0 var(--pf-c-sidebar__main--m-border--before--BorderWidth);
+    align-self: stretch;
+    content: "";
+    background-color: var(--pf-c-sidebar__main--m-border--before--BorderColor);
+  }
 }
 
 .pf-c-sidebar__panel {
   position: var(--pf-c-sidebar__panel--Position);
   top: var(--pf-c-sidebar__panel--Top);
   z-index: var(--pf-c-sidebar__panel--ZIndex);
-  flex-shrink: 0;
   flex-basis: var(--pf-c-sidebar__panel--FlexBasis);
+  flex-shrink: 0;
   order: var(--pf-c-sidebar__panel--Order);
+  padding: var(--pf-c-sidebar__panel--PaddingTop) var(--pf-c-sidebar__panel--PaddingRight) var(--pf-c-sidebar__panel--PaddingBottom) var(--pf-c-sidebar__panel--PaddingLeft);
   background-color: var(--pf-c-sidebar__panel--BackgroundColor);
   box-shadow: var(--pf-c-sidebar__panel--BoxShadow);
 
+  &.pf-m-padding {
+    --pf-c-sidebar__panel--PaddingTop: var(--pf-c-sidebar__panel--m-padding--PaddingTop);
+    --pf-c-sidebar__panel--PaddingRight: var(--pf-c-sidebar__panel--m-padding--PaddingRight);
+    --pf-c-sidebar__panel--PaddingBottom: var(--pf-c-sidebar__panel--m-padding--PaddingBottom);
+    --pf-c-sidebar__panel--PaddingLeft: var(--pf-c-sidebar__panel--m-padding--PaddingLeft);
+  }
+
   &.pf-m-sticky {
     --pf-c-sidebar__panel--Position: var(--pf-c-sidebar__panel--m-sticky--Position);
     --pf-c-sidebar__panel--Top: var(--pf-c-sidebar__panel--m-sticky--Top);
@@ -152,11 +192,28 @@ $pf-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 .pf-c-sidebar__content {
   flex-grow: 1;
+  order: var(--pf-c-sidebar__content--Order);
+  padding: var(--pf-c-sidebar__content--PaddingTop) var(--pf-c-sidebar__content--PaddingRight) var(--pf-c-sidebar__content--PaddingBottom) var(--pf-c-sidebar__content--PaddingLeft);
   background-color: var(--pf-c-sidebar__content--BackgroundColor);
 
+  &.pf-m-padding {
+    --pf-c-sidebar__content--PaddingTop: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+    --pf-c-sidebar__content--PaddingRight: var(--pf-c-sidebar__content--m-padding--PaddingRight);
+    --pf-c-sidebar__content--PaddingBottom: var(--pf-c-sidebar__content--m-padding--PaddingBottom);
+    --pf-c-sidebar__content--PaddingLeft: var(--pf-c-sidebar__content--m-padding--PaddingTop);
+  }
+
   &.pf-m-no-background {
     --pf-c-sidebar__content--BackgroundColor: transparent;
   }
+
+  & + .pf-c-sidebar__panel {
+    --pf-c-sidebar__panel--Order: 1;
+  }
+
+  :where(&:first-child) {
+    --pf-c-sidebar__content--Order: -1;
+  }
 }
 
 .pf-c-sidebar,

package/components/SimpleList/simple-list.css

@@ -40,9 +40,9 @@
   border: none;
 }
 .pf-c-simple-list__item-link:hover {
-  text-decoration: none;
   --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
   --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+  text-decoration: none;
 }
 .pf-c-simple-list__item-link:focus {
   --pf-c-simple-list__item-link--FontWeight: var(--pf-c-simple-list__item-link--focus--FontWeight);

package/components/SimpleList/simple-list.scss

@@ -45,10 +45,10 @@
   border: none;
 
   &:hover {
-    text-decoration: none;
-
     --pf-c-simple-list__item-link--BackgroundColor: var(--pf-c-simple-list__item-link--hover--BackgroundColor);
     --pf-c-simple-list__item-link--Color: var(--pf-c-simple-list__item-link--hover--Color);
+
+    text-decoration: none;
   }
 
   &:focus {

package/components/Spinner/spinner.css

@@ -28,135 +28,6 @@
   --pf-c-spinner--diameter: var(--pf-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;
-}
-
-@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;
@@ -187,13 +58,13 @@ svg.pf-c-spinner.pf-m-xl {
 .pf-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-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-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;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -213,8 +84,8 @@ svg.pf-c-spinner.pf-m-xl {
     stroke-width: calc(var(--pf-c-spinner__path--StrokeWidth) - 4);
   }
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
   100% {
     stroke-dashoffset: 280;

package/components/Spinner/spinner.scss

@@ -41,175 +41,6 @@
   }
 }
 
-// stylelint-disable selector-no-qualifying-type
-span.pf-c-spinner {
-  --pf-c-spinner--AnimationDuration: 1.5s;
-  --pf-c-spinner--AnimationTimingFunction: cubic-bezier(.77, .005, .315, 1);
-
-  // These conceptual variables are used to size the stroke width, which is accomplished using various properties in the clipper:after and the ball animations
-  --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));
-
-  // Clipper variables
-  --pf-c-spinner__clipper--Width: var(--pf-c-spinner--diameter);
-  --pf-c-spinner__clipper--Height: var(--pf-c-spinner--diameter);
-
-  // Clipper:after (circle) values
-  --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);
-
-  // This creates the stroke and needs to match the spinner__ball:after Height and Width
-  --pf-c-spinner__clipper--after--BoxShadowSpreadRadius: var(--pf-c-spinner--stroke-width);
-
-  // Lead ball variables
-  --pf-c-spinner__lead-ball--after--BackgroundColor: var(--pf-c-spinner--Color);
-
-  // These sizes need to match the stroke width, i.e. clipper:after BoxShadowSpreadRadius
-  --pf-c-spinner__ball--after--Width: var(--pf-c-spinner--stroke-width);
-  --pf-c-spinner__ball--after--Height: var(--pf-c-spinner--stroke-width);
-
-  // Tail ball variables
-  --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;
-}
-// stylelint-enable
-
-// Rotate the parent 360deg as the basic line animation happens, repeat that twice, and another rotation overall. This adds up to 3 complete rotations.
-@keyframes pf-animation-spinner-parent {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  50% {
-    transform: rotate(540deg);
-  }
-
-  100% {
-    transform: rotate(1080deg);
-  }
-}
-
-// Clipper is a rotating rectangle clipped to one quarter the size of the spinner, starting in the upper right
-.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);
-  }
-}
-
-// The :after of the Clipper is a rotating semicircle that has the part that you see moving around (inset box shadow), growing and shrinking because it is moving into and out of the Clipper box
-.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;
-}
-
-// The Clipper:after moves rotates 270deg in relation to its parent (so that it appears to grow and then shrink)
-@keyframes pf-animation-spinner__clipper-after {
-  0% {
-    transform: rotate(-180deg);
-  }
-
-  100% {
-    transform: rotate(90deg);
-  }
-}
-
-// The Lead ball is at the front of the stroke to round out the leading end
-.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;
-
-  &::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;
-  }
-}
-
-// The Lead ball rotates to match the line that grows and shrinks - first following the Clipper:after and then the Clipper itself.
-@keyframes pf-animation-spinner__lead-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  33% {
-    transform: rotate(180deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-// The tail ball is at the end of the stroke to round out the tail end
-.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;
-
-  &::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;
-  }
-}
-
-// The Tail ball rotates to match the tail end of the line that grows and shrinks - first following the Clipper and then the Clipper:after
-@keyframes pf-animation-spinner__tail-ball {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  66% {
-    transform: rotate(180deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
 // stylelint-disable selector-no-qualifying-type
 svg.pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
@@ -252,13 +83,13 @@ svg.pf-c-spinner {
 .pf-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-dasharray: 283;
   stroke-dashoffset: 280;
+  stroke-linecap: round;
   stroke-width: var(--pf-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;
 }
 
 @keyframes pf-c-spinner-animation-rotate {
@@ -282,8 +113,8 @@ svg.pf-c-spinner {
   }
 
   40% {
-    stroke-dashoffset: 150;
     stroke-dasharray: 220;
+    stroke-dashoffset: 150;
   }
 
   100% {