update localize and fix range RTL

package-lock.json

@@ -12,7 +12,7 @@
         "@floating-ui/dom": "^0.5.1",
         "@lit-labs/react": "^1.0.4",
         "@shoelace-style/animations": "^1.1.0",
-        "@shoelace-style/localize": "^2.1.3",
+        "@shoelace-style/localize": "^2.2.0",
         "color": "4.2",
         "lit": "^2.2.5",
         "qr-creator": "^1.0.0"
@@ -960,9 +960,9 @@
       }
     },
     "node_modules/@shoelace-style/localize": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-2.1.3.tgz",
-      "integrity": "sha512-AY3uF1Dzg3sBK4nKxvZ2KAjsdFxhLfHVWUpXXjIPaR+rPp8fxBWoNVvnLiROOV/cLg/zdLcU+Nn/xJdqcbEuDw=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-2.2.0.tgz",
+      "integrity": "sha512-xM8u4w3BVhbXhgYWk4Q7p/K4qZ8iGWpgx7T9aOLXkwR6t1LKu0oY1K+vQ1T6bclKHzGmt8o+HxYEtotHK+euQQ=="
     },
     "node_modules/@sindresorhus/is": {
       "version": "0.7.0",
@@ -14837,9 +14837,9 @@
       "integrity": "sha512-Be+cahtZyI2dPKRm8EZSx3YJQ+jLvEcn3xzRP7tM4tqBnvd/eW/64Xh0iOf0t2w5P8iJKfdBbpVNE9naCaOf2g=="
     },
     "@shoelace-style/localize": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-2.1.3.tgz",
-      "integrity": "sha512-AY3uF1Dzg3sBK4nKxvZ2KAjsdFxhLfHVWUpXXjIPaR+rPp8fxBWoNVvnLiROOV/cLg/zdLcU+Nn/xJdqcbEuDw=="
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-2.2.0.tgz",
+      "integrity": "sha512-xM8u4w3BVhbXhgYWk4Q7p/K4qZ8iGWpgx7T9aOLXkwR6t1LKu0oY1K+vQ1T6bclKHzGmt8o+HxYEtotHK+euQQ=="
     },
     "@sindresorhus/is": {
       "version": "0.7.0",

package.json

@@ -55,7 +55,7 @@
     "@floating-ui/dom": "^0.5.1",
     "@lit-labs/react": "^1.0.4",
     "@shoelace-style/animations": "^1.1.0",
-    "@shoelace-style/localize": "^2.1.3",
+    "@shoelace-style/localize": "^2.2.0",
     "color": "4.2",
     "lit": "^2.2.5",
     "qr-creator": "^1.0.0"

src/components/range/range.styles.ts

@@ -157,7 +157,7 @@ export default css`
     width: 0;
     height: 0;
     left: 50%;
-    margin-inline-start: calc(-1 * var(--sl-tooltip-arrow-size));
+    transform: translateX(calc(-1 * var(--sl-tooltip-arrow-size)));
   }
 
   .range--tooltip-visible .range__tooltip {

src/components/range/range.ts

@@ -7,6 +7,7 @@ import { emit } from '../../internal/event';
 import { FormSubmitController } from '../../internal/form';
 import { HasSlotController } from '../../internal/slot';
 import { watch } from '../../internal/watch';
+import { LocalizeController } from '../../utilities/localize';
 import styles from './range.styles';
 
 /**
@@ -44,6 +45,7 @@ export default class SlRange extends LitElement {
   // @ts-expect-error -- Controller is currently unused
   private readonly formSubmitController = new FormSubmitController(this);
   private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');
+  private readonly localize = new LocalizeController(this);
   private resizeObserver: ResizeObserver;
 
   @state() private hasFocus = false;
@@ -193,10 +195,19 @@ export default class SlRange extends LitElement {
       const inputWidth = this.input.offsetWidth;
       const tooltipWidth = this.output.offsetWidth;
       const thumbSize = getComputedStyle(this.input).getPropertyValue('--thumb-size');
-      const x = `calc(${inputWidth * percent}px - calc(calc(${percent} * ${thumbSize}) - calc(${thumbSize} / 2)))`;
+      const isRtl = this.localize.dir() === 'rtl';
+      const percentAsWidth = inputWidth * percent;
 
-      this.output.style.transform = `translateX(${x})`;
-      this.output.style.marginLeft = `-${tooltipWidth / 2}px`;
+      // The calculations are used to "guess" where the thumb is located. Since we're using the native range control
+      // under the hood, we don't have access to the thumb's true coordinates. These measurements can be a pixel or two
+      // off depending on the size of the control, thumb, and tooltip dimensions.
+      if (isRtl) {
+        const x = `${inputWidth - percentAsWidth}px + ${percent} * ${thumbSize}`;
+        this.output.style.transform = `translateX(calc((${x} - ${tooltipWidth / 2}px - ${thumbSize} / 2)))`;
+      } else {
+        const x = `${percentAsWidth}px - ${percent} * ${thumbSize}`;
+        this.output.style.transform = `translateX(calc(${x} - ${tooltipWidth / 2}px + ${thumbSize} / 2))`;
+      }
     }
   }