lightning-base-components 1.26.4-alpha → 1.27.2-alpha

package/src/lightning/spinner/spinner.slds.css

@@ -1,5 +1,4 @@
 
-
 :host([data-render-mode="shadow"]) [part='spinner'] .slds-assistive-text {
   position: absolute !important;
   margin: -1px !important;
@@ -13,429 +12,431 @@
   white-space: nowrap !important;
 }
 
-  :host([data-render-mode="shadow"]) [part='backdrop'] {
-    position: absolute;
-    inset: 0;
-    z-index: 9050;
-    background-color: var(--_slds-c-spinner-backdrop-color-background, var(--slds-g-color-neutral-base-100));
-    visibility: visible;
-    opacity: 0.75;
-    transition: opacity 0.2s ease, visibility 0s;
-    transition-delay: 0s, 0.3s;
-  }
+:host([data-render-mode="shadow"]) [part='backdrop'] {
+  position: absolute;
+  inset: 0;
+  z-index: 9050;
+  background-color: var(--_slds-c-spinner-backdrop-color-background, var(--slds-g-color-neutral-base-100));
+  visibility: visible;
+  opacity: 0.75;
+  transition:
+    opacity 0.2s ease,
+    visibility 0s;
+  transition-delay: 0s, 0.3s;
+}
 
-  /* brand */
+/* brand */
 
-  :host([data-render-mode="shadow"][variant='brand']) [part='spinner'],:host([data-render-mode="shadow"])  
-  .slds-spinner_brand {
-    --_slds-c-spinner-color-background: var(--slds-g-color-accent-1);
-  }
+:host([data-render-mode="shadow"][variant='brand']) [part='spinner'],:host([data-render-mode="shadow"]) 
+.slds-spinner_brand {
+  --_slds-c-spinner-color-background: var(--slds-g-color-accent-1);
+}
 
-  /* inverse */
+/* inverse */
 
-  :host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
-    --_slds-c-spinner-color-background: var(--slds-g-color-neutral-base-100);
-  }
+:host([data-render-mode="shadow"][variant='inverse']) [part='spinner'] {
+  --_slds-c-spinner-color-background: var(--slds-g-color-neutral-base-100);
+}
 
-  /* large */
+/* large */
 
-  :host([data-render-mode="shadow"][size='large']) [part='spinner'] {
-    width: 2.75rem;
-  }
+:host([data-render-mode="shadow"][size='large']) [part='spinner'] {
+  width: 2.75rem;
+}
 
-  :host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
-    width: 0.625rem;
-    height: 0.625rem;
-  }
+:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='spinner']::after {
+  width: 0.625rem;
+  height: 0.625rem;
+}
 
-  :host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
-    top: -0.3125rem;
-    left: -0.3125rem;
-    animation-name: dotsBounceBefore-medium;
-  }
+:host([data-render-mode="shadow"][size='large']) [part='spinner']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::before {
+  top: -0.3125rem;
+  left: -0.3125rem;
+  animation-name: dotsBounceBefore-medium;
+}
 
-  :host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
-    top: -0.3125rem;
-    right: -0.3125rem;
-    animation-name: dotsBounceAfter-medium;
-  }
+:host([data-render-mode="shadow"][size='large']) [part='spinner']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='large']) [part='dot-b']::after {
+  top: -0.3125rem;
+  right: -0.3125rem;
+  animation-name: dotsBounceAfter-medium;
+}
 
-  /* end size large */
+/* end size large */
 
-  /* medium */
+/* medium */
 
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
-    width: 2rem;
-  }
+:host([data-render-mode="shadow"][size='medium']) [part='spinner'] {
+  width: 2rem;
+}
 
-  :host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
-    width: 0.5rem;
-    height: 0.5rem;
-  }
+:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after {
+  width: 0.5rem;
+  height: 0.5rem;
+}
 
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
-    top: -0.25rem;
-    left: -0.25rem;
-    animation-name: dotsBounceBefore-medium;
-  }
+:host([data-render-mode="shadow"][size='medium']) [part='spinner']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::before {
+  top: -0.25rem;
+  left: -0.25rem;
+  animation-name: dotsBounceBefore-medium;
+}
 
-  :host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
-    top: -0.25rem;
-    right: -0.25rem;
-    animation-name: dotsBounceAfter-medium;
-  }
+:host([data-render-mode="shadow"][size='medium']) [part='spinner']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='medium']) [part='dot-b']::after {
+  top: -0.25rem;
+  right: -0.25rem;
+  animation-name: dotsBounceAfter-medium;
+}
+
+/* end size medium */
 
-  /* end size medium */
+/* small */
+
+:host([data-render-mode="shadow"][size='small']) [part='spinner'] {
+  width: 1.25rem;
+}
 
-  /* small */
+:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
+  width: 0.25rem;
+  height: 0.25rem;
+}
+
+:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
+  top: -0.125rem;
+  left: -0.125rem;
+  animation-name: dotsBounceBefore-small;
+}
 
-  :host([data-render-mode="shadow"][size='small']) [part='spinner'] {
-    width: 1.25rem;
+:host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
+  width: 0.25rem;
+  height: 0.25rem;
+  top: -0.125rem;
+  right: -0.125rem;
+  animation-name: dotsBounceAfter-small;
+}
+
+@keyframes dotsBounceBefore-small {
+  0% {
+    transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='spinner']::after {
-    width: 0.25rem;
-    height: 0.25rem;
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::before {
-    top: -0.125rem;
-    left: -0.125rem;
-    animation-name: dotsBounceBefore-small;
+  80% {
+    transform: translate3d(-0.375rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
   }
 
-  :host([data-render-mode="shadow"][size='small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='small']) [part='dot-b']::after {
-    width: 0.25rem;
-    height: 0.25rem;
-    top: -0.125rem;
-    right: -0.125rem;
-    animation-name: dotsBounceAfter-small;
+  100% {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  @keyframes dotsBounceBefore-small {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
+@keyframes dotsBounceAfter-small {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
 
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-    }
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  }
 
-    80% {
-      transform: translate3d(-0.375rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
-    }
+  80% {
+    transform: translate3d(0.375rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+  }
 
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
+  100% {
+    transform: translateX(0);
   }
+}
 
-  @keyframes dotsBounceAfter-small {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
+/* end size small */
 
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-    }
+/* x-small */
 
-    80% {
-      transform: translate3d(0.375rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
-    }
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner'],:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small[part='spinner'] {
+  width: 1rem;
+}
 
-    100% {
-      transform: translateX(0);
-    }
-  }
+:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small[part='spinner']::before,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small[part='spinner']::after,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-a']::before,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-b']::before,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-a']::after,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-b']::after {
+  width: 0.25rem;
+  height: 0.25rem;
+}
 
-  /* end size small */
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small[part='spinner']::before,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-a']::before,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-b']::before {
+  top: -0.125rem;
+  left: -0.125rem;
+  animation-name: dotsBounceBefore-extraSmall;
+}
 
-  /* x-small */
+:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small[part='spinner']::after,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-a']::after,:host([data-render-mode="shadow"]) 
+.slds-spinner_x-small [part='dot-b']::after {
+  top: -0.125rem;
+  right: -0.125rem;
+  animation-name: dotsBounceAfter-extraSmall;
+}
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner'],:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small[part='spinner'] {
-    width: 1rem;
+@keyframes dotsBounceBefore-extraSmall {
+  0% {
+    transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small[part='spinner']::before,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small[part='spinner']::after,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-a']::before,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-b']::before,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-a']::after,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-b']::after {
-    width: 0.25rem;
-    height: 0.25rem;
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::before,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small[part='spinner']::before,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-a']::before,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-b']::before {
-    top: -0.125rem;
-    left: -0.125rem;
-    animation-name: dotsBounceBefore-extraSmall;
+  80% {
+    transform: translate3d(-0.25rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
   }
 
-  :host([data-render-mode="shadow"][size='x-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='x-small']) [part='dot-b']::after,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small[part='spinner']::after,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-a']::after,:host([data-render-mode="shadow"]) 
-  .slds-spinner_x-small [part='dot-b']::after {
-    top: -0.125rem;
-    right: -0.125rem;
-    animation-name: dotsBounceAfter-extraSmall;
+  100% {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  @keyframes dotsBounceBefore-extraSmall {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
+@keyframes dotsBounceAfter-extraSmall {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
 
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-    }
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+  }
 
-    80% {
-      transform: translate3d(-0.25rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
-    }
+  80% {
+    transform: translate3d(0.25rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
+  }
 
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
+  100% {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  @keyframes dotsBounceAfter-extraSmall {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
+/* end size x-small */
 
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-    }
+/* xx-small */
 
-    80% {
-      transform: translate3d(0.25rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
-    }
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
+  width: 0.5rem;
+}
 
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
-  }
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+  width: 0.125rem;
+  height: 0.125rem;
+}
 
-  /* end size x-small */
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
+  top: -0.0625rem;
+  left: -0.0625rem;
+  animation-name: dotsBounceBefore-extraExtraSmall;
+}
 
-  /* xx-small */
+:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
+  top: -0.0625rem;
+  right: -0.0625rem;
+  animation-name: dotsBounceAfter-extraExtraSmall;
+}
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner'] {
-    width: 0.5rem;
+@keyframes dotsBounceBefore-extraExtraSmall {
+  0% {
+    transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
-    width: 0.125rem;
-    height: 0.125rem;
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
   }
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::before,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::before {
-    top: -0.0625rem;
-    left: -0.0625rem;
-    animation-name: dotsBounceBefore-extraExtraSmall;
+  80% {
+    transform: translate3d(-0.125rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
   }
 
-  :host([data-render-mode="shadow"][size='xx-small']) [part='spinner']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-a']::after,:host([data-render-mode="shadow"][size='xx-small']) [part='dot-b']::after {
-    top: -0.0625rem;
-    right: -0.0625rem;
-    animation-name: dotsBounceAfter-extraExtraSmall;
+  100% {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  @keyframes dotsBounceBefore-extraExtraSmall {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
+@keyframes dotsBounceAfter-extraExtraSmall {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
 
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
-    }
+  60% {
+    animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
+    transform: translate3d(0, 0, 0);
+  }
 
-    80% {
-      transform: translate3d(-0.125rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
-    }
+  80% {
+    animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
+    transform: translate3d(0.125rem, 0, 0);
+  }
 
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
+  100% {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  @keyframes dotsBounceAfter-extraExtraSmall {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
+/* end size xx-small */
 
-    60% {
-      animation-timing-function: cubic-bezier(0.275, 0.0425, 0.34, 0.265);
-      transform: translate3d(0, 0, 0);
-    }
+:host([data-render-mode="shadow"]) [part='spinner'] {
+  position: absolute;
+  top: 50%;
+  width: 2rem;
 
-    80% {
-      animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715);
-      transform: translate3d(0.125rem, 0, 0);
-    }
+  /*! @noflip */
+  left: 50%;
+  z-index: 9050;
+  transform: translate(-50%, -50%) rotate(90deg);
+}
 
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
-  }
+:host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"]) 
+[part='dot-a'],:host([data-render-mode="shadow"]) 
+[part='dot-b'] {
+  transform-origin: 50% 50%;
+  will-change: transform;
+}
 
-  /* end size xx-small */
+/* creates the circles */
 
-  :host([data-render-mode="shadow"]) [part='spinner'] {
-    position: absolute;
-    top: 50%;
-    width: 2rem;
+:host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"]) 
+[part='dot-b'] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
 
-    /*! @noflip */
-    left: 50%;
-    z-index: 9050;
-    transform: translate(-50%, -50%) rotate(90deg);
-  }
+/* stylelint-disable no-duplicate-selectors */
+
+:host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
+[part='spinner']::after,:host([data-render-mode="shadow"]) 
+[part='dot-a']::before,:host([data-render-mode="shadow"]) 
+[part='dot-b']::before,:host([data-render-mode="shadow"]) 
+[part='dot-a']::after,:host([data-render-mode="shadow"]) 
+[part='dot-b']::after {
+  content: '';
+  position: absolute;
+  background-color: var(--_slds-c-spinner-color-background, var(--slds-g-color-neutral-base-65));
+  border-radius: 50%;
+  animation-duration: 1000ms;
+  animation-iteration-count: infinite;
+  transform: translate3d(0, 0, 0);
+}
 
-  :host([data-render-mode="shadow"]) [part='spinner'],:host([data-render-mode="shadow"]) 
-  [part='dot-a'],:host([data-render-mode="shadow"]) 
-  [part='dot-b'] {
-    transform-origin: 50% 50%;
-    will-change: transform;
-  }
+:host([data-render-mode="shadow"]) [part='dot-a'] {
+  transform: rotate(60deg);
+}
 
-  /* creates the circles */
+:host([data-render-mode="shadow"]) [part='dot-b'] {
+  transform: rotate(120deg);
+}
 
-  :host([data-render-mode="shadow"]) [part='dot-a'],:host([data-render-mode="shadow"]) 
-  [part='dot-b'] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
+:host([data-render-mode="shadow"]) [part='spinner']::before {
+  animation-delay: -83.3333ms;
+}
+
+:host([data-render-mode="shadow"]) [part='dot-a']::before {
+  animation-delay: 83.3333ms;
+}
 
-  /* stylelint-disable no-duplicate-selectors */
+:host([data-render-mode="shadow"]) [part='dot-b']::before {
+  animation-delay: 250ms;
+}
 
-  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
-  [part='spinner']::after,:host([data-render-mode="shadow"]) 
-  [part='dot-a']::before,:host([data-render-mode="shadow"]) 
-  [part='dot-b']::before,:host([data-render-mode="shadow"]) 
-  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part='dot-b']::after {
-    content: '';
-    position: absolute;
-    background-color: var(--_slds-c-spinner-color-background, var(--slds-g-color-neutral-base-65));
-    border-radius: 50%;
-    animation-duration: 1000ms;
-    animation-iteration-count: infinite;
-    transform: translate3d(0, 0, 0);
-  }
+:host([data-render-mode="shadow"]) [part='spinner']::after {
+  animation-delay: 416.6667ms;
+}
 
-  :host([data-render-mode="shadow"]) [part='dot-a'] {
-    transform: rotate(60deg);
-  }
+:host([data-render-mode="shadow"]) [part='dot-a']::after {
+  animation-delay: 583.3333ms;
+}
 
-  :host([data-render-mode="shadow"]) [part='dot-b'] {
-    transform: rotate(120deg);
-  }
+:host([data-render-mode="shadow"]) [part='dot-b']::after {
+  animation-delay: 750ms;
+}
 
-  :host([data-render-mode="shadow"]) [part='spinner']::before {
-    animation-delay: -83.3333ms;
-  }
+:host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+[part='spinner']::before,:host([data-render-mode="shadow"]) 
+[part='dot-a']::after,:host([data-render-mode="shadow"]) 
+[part='dot-a']::before,:host([data-render-mode="shadow"]) 
+[part='dot-b']::after,:host([data-render-mode="shadow"]) 
+[part='dot-b']::before {
+  width: 0.5rem;
+  height: 0.5rem;
+}
 
-  :host([data-render-mode="shadow"]) [part='dot-a']::before {
-    animation-delay: 83.3333ms;
-  }
+:host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
+[part='dot-a']::before,:host([data-render-mode="shadow"]) 
+[part='dot-b']::before {
+  animation-name: dotsBounceBefore-medium;
+  top: -0.25rem;
+  left: -0.25rem;
+}
 
-  :host([data-render-mode="shadow"]) [part='dot-b']::before {
-    animation-delay: 250ms;
-  }
+:host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
+[part='dot-a']::after,:host([data-render-mode="shadow"]) 
+[part='dot-b']::after {
+  animation-name: dotsBounceAfter-medium;
+  top: -0.25rem;
+  right: -0.25rem;
+}
 
-  :host([data-render-mode="shadow"]) [part='spinner']::after {
-    animation-delay: 416.6667ms;
+@keyframes dotsBounceBefore-medium {
+  0% {
+    transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-a']::after {
-    animation-delay: 583.3333ms;
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
   }
 
-  :host([data-render-mode="shadow"]) [part='dot-b']::after {
-    animation-delay: 750ms;
+  80% {
+    transform: translate3d(-0.5rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
-  [part='spinner']::before,:host([data-render-mode="shadow"]) 
-  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part='dot-a']::before,:host([data-render-mode="shadow"]) 
-  [part='dot-b']::after,:host([data-render-mode="shadow"]) 
-  [part='dot-b']::before {
-    width: 0.5rem;
-    height: 0.5rem;
+  100% {
+    transform: translate3d(0, 0, 0);
   }
+}
 
-  :host([data-render-mode="shadow"]) [part='spinner']::before,:host([data-render-mode="shadow"]) 
-  [part='dot-a']::before,:host([data-render-mode="shadow"]) 
-  [part='dot-b']::before {
-    animation-name: dotsBounceBefore-medium;
-    top: -0.25rem;
-    left: -0.25rem;
+@keyframes dotsBounceAfter-medium {
+  0% {
+    transform: translate3d(0, 0, 0);
   }
 
-  :host([data-render-mode="shadow"]) [part='spinner']::after,:host([data-render-mode="shadow"]) 
-  [part='dot-a']::after,:host([data-render-mode="shadow"]) 
-  [part='dot-b']::after {
-    animation-name: dotsBounceAfter-medium;
-    top: -0.25rem;
-    right: -0.25rem;
+  60% {
+    transform: translate3d(0, 0, 0);
+    animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
   }
 
-  @keyframes dotsBounceBefore-medium {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
-
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-    }
-
-    80% {
-      transform: translate3d(-0.5rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
-    }
-
-    100% {
-      transform: translate3d(0, 0, 0);
-    }
+  80% {
+    transform: translate3d(0.5rem, 0, 0);
+    animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
   }
 
-  @keyframes dotsBounceAfter-medium {
-    0% {
-      transform: translate3d(0, 0, 0);
-    }
-
-    60% {
-      transform: translate3d(0, 0, 0);
-      animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-    }
-
-    80% {
-      transform: translate3d(0.5rem, 0, 0);
-      animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43);
-    }
-
-    100% {
-      transform: translateX(0);
-    }
+  100% {
+    transform: translateX(0);
   }
+}