stop using transform

src/components/animated-image/animated-image.styles.ts

@@ -43,7 +43,6 @@ export default css`
 
   :host([play]:hover) .animated-image__control-box {
     opacity: 1;
-    transform: scale(1);
   }
 
   :host([play]:not(:hover)) .animated-image__control-box {

src/components/button/button.styles.ts

@@ -451,14 +451,14 @@ export default css`
     position: absolute;
     top: 0;
     right: 0;
-    transform: translateY(-50%) translateX(50%);
+    translate: 50% -50%;
     pointer-events: none;
   }
 
   .button--rtl ::slotted(sl-badge) {
     right: auto;
     left: 0;
-    transform: translateY(-50%) translateX(-50%);
+    translate: -50% -50%;
   }
 
   /*

src/components/color-picker/color-picker.styles.ts

@@ -55,12 +55,12 @@ export default css`
     border: solid 2px white;
     margin-top: calc(var(--grid-handle-size) / -2);
     margin-left: calc(var(--grid-handle-size) / -2);
-    transition: var(--sl-transition-fast) transform;
+    transition: var(--sl-transition-fast) scale;
   }
 
   .color-picker__grid-handle--dragging {
     cursor: none;
-    transform: scale(1.5);
+    scale: 1.5;
   }
 
   .color-picker__grid-handle:focus-visible {

src/components/dialog/dialog.styles.ts

@@ -51,7 +51,6 @@ export default css`
   .dialog--open .dialog__panel {
     display: flex;
     opacity: 1;
-    transform: none;
   }
 
   .dialog__header {

src/components/drawer/drawer.styles.ts

@@ -41,7 +41,6 @@ export default css`
     max-height: 100%;
     background-color: var(--sl-panel-background-color);
     box-shadow: var(--sl-shadow-x-large);
-    transition: var(--sl-transition-medium) transform;
     overflow: auto;
     pointer-events: all;
   }

src/components/image-comparer/image-comparer.styles.ts

@@ -49,7 +49,7 @@ export default css`
     width: var(--divider-width);
     height: 100%;
     background-color: var(--sl-color-neutral-0);
-    transform: translateX(calc(var(--divider-width) / -2));
+    translate: calc(var(--divider-width) / -2);
     cursor: ew-resize;
   }
 

src/components/popup/popup.styles.ts

@@ -37,7 +37,7 @@ export default css`
     position: absolute;
     width: calc(var(--arrow-size-diagonal) * 2);
     height: calc(var(--arrow-size-diagonal) * 2);
-    transform: rotate(45deg);
+    rotate: 45deg;
     background: var(--arrow-color);
     z-index: -1;
   }

src/components/progress-ring/progress-ring.styles.ts

@@ -25,7 +25,7 @@ export default css`
   .progress-ring__image {
     width: var(--size);
     height: var(--size);
-    transform: rotate(-90deg);
+    rotate: -90deg;
     transform-origin: 50% 50%;
   }
 

src/components/range/range.styles.ts

@@ -72,8 +72,6 @@ export default css`
     border: solid var(--sl-input-border-width) var(--sl-color-primary-600);
     -webkit-appearance: none;
     margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);
-    transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
     cursor: pointer;
   }
 
@@ -120,7 +118,7 @@ export default css`
     background-color: var(--sl-color-primary-600);
     border-color: var(--sl-color-primary-600);
     transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color,
-      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;
+      var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;
     cursor: pointer;
   }
 
@@ -181,7 +179,7 @@ export default css`
     width: 0;
     height: 0;
     left: 50%;
-    transform: translateX(calc(-1 * var(--sl-tooltip-arrow-size)));
+    translate: calc(-1 * var(--sl-tooltip-arrow-size));
   }
 
   .range--tooltip-visible .range__tooltip {

src/components/rating/rating.styles.ts

@@ -52,11 +52,11 @@ export default css`
   }
 
   .rating__symbol {
-    transition: var(--sl-transition-fast) transform;
+    transition: var(--sl-transition-fast) scale;
   }
 
   .rating__symbol--hover {
-    transform: scale(1.2);
+    scale: 1.2;
   }
 
   .rating--disabled .rating__symbols,
@@ -66,7 +66,7 @@ export default css`
 
   .rating--disabled .rating__symbol--hover,
   .rating--readonly .rating__symbol--hover {
-    transform: none;
+    scale: none;
   }
 
   .rating--disabled {

src/components/select/select.styles.ts

@@ -147,11 +147,11 @@ export default css`
   .select__icon {
     flex: 0 0 auto;
     display: inline-flex;
-    transition: var(--sl-transition-medium) transform ease;
+    transition: var(--sl-transition-medium) rotate ease;
   }
 
   .select--open .select__icon {
-    transform: rotate(-180deg);
+    rotate: -180deg;
   }
 
   /* Placeholder */

src/components/spinner/spinner.styles.ts

@@ -46,17 +46,17 @@ export default css`
 
   @keyframes spin {
     0% {
-      transform: rotate(0deg);
+      rotate: 0deg;
       stroke-dasharray: 0.01em, 2.75em;
     }
 
     50% {
-      transform: rotate(450deg);
+      rotate: 450deg;
       stroke-dasharray: 1.375em, 1.375em;
     }
 
     100% {
-      transform: rotate(1080deg);
+      rotate: 1080deg;
       stroke-dasharray: 0.01em, 2.75em;
     }
   }

src/components/switch/switch.styles.ts

@@ -43,8 +43,8 @@ export default css`
     background-color: var(--sl-color-neutral-0);
     border-radius: 50%;
     border: solid var(--sl-input-border-width) var(--sl-color-neutral-400);
-    transform: translateX(calc((var(--width) - var(--height)) / -2));
-    transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color,
+    translate: calc((var(--width) - var(--height)) / -2);
+    transition: var(--sl-transition-fast) translate ease, var(--sl-transition-fast) background-color,
       var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;
   }
 
@@ -89,7 +89,7 @@ export default css`
   .switch--checked .switch__control .switch__thumb {
     background-color: var(--sl-color-neutral-0);
     border-color: var(--sl-color-primary-600);
-    transform: translateX(calc((var(--width) - var(--height)) / 2));
+    translate: calc((var(--width) - var(--height)) / 2);
   }
 
   /* Checked + hover */