chore: replace isLTR instances

Author: rubencarvalho

1st-gen/packages/color-area/src/ColorArea.ts

@@ -466,7 +466,7 @@ export class ColorArea extends SpectrumElement {
                 color=${this.colorController.getHslString()}
                 ?disabled=${this.disabled}
                 style=${`transform: translate(${
-                    (this.dir !== 'rtl' ? this.x : 1 - this.x) * width
+                    (isLTR(this) ? this.x : 1 - this.x) * width
                 }px, ${height - this.y * height}px);`}
                 ${streamingListener({
                     start: ['pointerdown', this.handlePointerdown],

1st-gen/packages/color-slider/src/ColorSlider.ts

@@ -270,9 +270,7 @@ export class ColorSlider extends Focusable {
 
         const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
         const sliderHandlePosition =
-            this.vertical || this.dir === 'rtl'
-                ? 100 - 100 * percent
-                : 100 * percent;
+            this.vertical || !isLTR(this) ? 100 - 100 * percent : 100 * percent;
 
         return sliderHandlePosition;
     }

1st-gen/packages/color-wheel/src/ColorWheel.ts

@@ -308,7 +308,7 @@ export class ColorWheel extends Focusable {
 
         // Calculate handle position on the wheel.
         const translateX =
-            (this.dir !== 'rtl' ? 1 : -1) *
+            (isLTR(this) ? 1 : -1) *
             (radius - trackWidth / 2) *
             Math.cos((this.value * Math.PI) / 180);
         const translateY =

1st-gen/packages/menu/src/Menu.ts

@@ -832,11 +832,11 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
     protected navigateBetweenRelatedMenus(event: MenuItemKeydownEvent): void {
         const { key, root } = event;
         const shouldOpenSubmenu =
-            (this.dir !== 'rtl' && key === 'ArrowRight') ||
-            (this.dir === 'rtl' && key === 'ArrowLeft');
+            (isLTR(this) && key === 'ArrowRight') ||
+            (!isLTR(this) && key === 'ArrowLeft');
         const shouldCloseSelfAsSubmenu =
-            (this.dir !== 'rtl' && key === 'ArrowLeft') ||
-            (this.dir === 'rtl' && key === 'ArrowRight') ||
+            (isLTR(this) && key === 'ArrowLeft') ||
+            (!isLTR(this) && key === 'ArrowRight') ||
             key === 'Escape';
         const lastFocusedItem = root as MenuItem;
         if (shouldOpenSubmenu) {

1st-gen/packages/menu/src/MenuItem.ts

@@ -394,7 +394,7 @@ export class MenuItem extends LikeAnchor(
                 ?open=${this.hasSubmenu &&
                 this.open &&
                 this.dependencyManager.loaded}
-                .placement=${this.dir !== 'rtl' ? 'right-start' : 'left-start'}
+                .placement=${isLTR(this) ? 'right-start' : 'left-start'}
                 receives-focus="false"
                 .offset=${[-10, -5] as [number, number]}
                 .type=${'auto'}

1st-gen/packages/slider/src/Slider.ts

@@ -28,6 +28,7 @@ import {
     repeat,
     styleMap,
 } from '@spectrum-web-components/base/src/directives.js';
+import { isLTR } from '@spectrum-web-components/base/src/direction.js';
 
 import sliderStyles from './slider.css.js';
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
@@ -392,7 +393,7 @@ export class Slider extends SizedMixin(ObserveSlotText(SliderHandle, ''), {
             this.min,
             this.max
         );
-        const position = this.dir === 'rtl' ? 'right' : 'left';
+        const position = isLTR(this) ? 'left' : 'right';
         const offsetPosition =
             (this.value > centerPoint
                 ? centerPointNormalized

1st-gen/packages/split-view/src/SplitView.ts

@@ -314,7 +314,7 @@ export class SplitView extends SpectrumElement {
             return;
         }
         let direction = 0;
-        const isLTRorVertical = this.dir !== 'rtl' || this.vertical;
+        const isLTRorVertical = isLTR(this) || this.vertical;
         switch (event.key) {
             case 'Home':
                 event.preventDefault();

1st-gen/tools/base/README.md

@@ -30,6 +30,21 @@ export MyElement extends SpectrumMixin(HTMLElement) {}
 
 ### Features
 
+#### `isLTR` utility
+
+While CSS offers many powerful solutions for styling content in various directions, sometimes JS functionality depends on the specific direction. Use the `isLTR` utility function to check if an element's computed direction is left-to-right:
+
+```ts
+import { isLTR } from '@spectrum-web-components/base/src/direction.js';
+
+// In a keyboard handler
+if (isLTR(this) ? key === 'ArrowRight' : key === 'ArrowLeft') {
+    this.openSubmenu();
+}
+```
+
+The `isLTR` function uses `getComputedStyle` to read the browser's resolved direction, which respects CSS `direction` property, `dir` attributes, and inherited values from ancestors.
+
 #### public shadowRoot!: ShadowRoot;
 
 Elements built from `SpectrumMixin` assume that you will be using shadow DOM in the resulting custom element. To simplify TypeScript usage the presence of `this.shadowRoot` is asserted as non-null so that you have direct access to it without extended type checking.

1st-gen/tools/base/package.json

@@ -93,7 +93,8 @@
         "./streaming-listener.js": {
             "development": "./streaming-listener.dev.js",
             "default": "./streaming-listener.js"
-        }
+        },
+        "./src/direction.js": "./src/direction.js"
     },
     "scripts": {
         "test": "karma start --coverage"