diff --git a/packages/accordion/src/spectrum-accordion-item.css b/packages/accordion/src/spectrum-accordion-item.css
index 12bf0f834b6..09859748d99 100644
--- a/packages/accordion/src/spectrum-accordion-item.css
+++ b/packages/accordion/src/spectrum-accordion-item.css
@@ -45,8 +45,7 @@
     inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
 }
 
-.iconContainer:dir(rtl),
-:host([dir="rtl"]) .iconContainer {
+.iconContainer:dir(rtl) {
     transform: scaleX(-1);
 }
 
diff --git a/packages/accordion/src/spectrum-accordion.css b/packages/accordion/src/spectrum-accordion.css
index c4f79e97ee4..b7121a17868 100644
--- a/packages/accordion/src/spectrum-accordion.css
+++ b/packages/accordion/src/spectrum-accordion.css
@@ -51,8 +51,7 @@
     );
 }
 
-:host:dir(rtl),
-:host([dir="rtl"]) {
+:host:dir(rtl) {
     --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 }
 
diff --git a/packages/action-button/src/spectrum-action-button.css b/packages/action-button/src/spectrum-action-button.css
index 210ddc0591a..033baee723e 100644
--- a/packages/action-button/src/spectrum-action-button.css
+++ b/packages/action-button/src/spectrum-action-button.css
@@ -101,8 +101,7 @@
     --spectrum-actionbutton-focus-indicator-color: var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-focus-indicator-color)));
 }
 
-:host:dir(rtl),
-:host([dir="rtl"]) {
+:host:dir(rtl) {
     --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 }
 
diff --git a/packages/action-group/src/action-group.css b/packages/action-group/src/action-group.css
index cc542760182..fa6ca393786 100644
--- a/packages/action-group/src/action-group.css
+++ b/packages/action-group/src/action-group.css
@@ -18,7 +18,7 @@
     --spectrum-actiongroup-vertical-spacing-regular: var(--spectrum-spacing-75);
 }
 
-:host([dir][compact][vertical]) ::slotted(:nth-child(n)) {
+:host([compact][vertical]) ::slotted(:nth-child(n)) {
     margin-right: 0;
     margin-left: 0;
 }
@@ -41,32 +41,26 @@
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0;
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:not([role]):last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --overriden-border-radius: 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 }
 
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+:host([compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
     --overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 }
 
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):first-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:not([role]):first-child) {
     --overriden-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
 }
 
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+:host([compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
     --overriden-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
 }
 
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:not([role]):last-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:not([role]):last-child) {
     --overriden-border-radius: var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 }
 
@@ -75,32 +69,26 @@
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
     --mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0 0;
 }
 
 :host([compact][vertical]:not([quiet])) ::slotted(:last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
     --mod-actionbutton-focus-ring-border-radius: 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 }
 
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+:host([compact]:not([quiet], [vertical])) ::slotted(:first-child) {
     --mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 }
 
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:first-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child */
+:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:first-child) {
     --mod-actionbutton-focus-ring-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
 }
 
-:host([dir="ltr"][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
-    /* [dir=ltr] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+:host([compact]:not([quiet], [vertical])) ::slotted(:last-child) {
     --mod-actionbutton-focus-ring-border-radius: 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius)) 0;
 }
 
-:host([dir="rtl"][compact]:not([quiet], [vertical])) ::slotted(:last-child) {
-    /* [dir=rtl] .spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child */
+:host([compact]:not([quiet], [vertical]):dir(rtl)) ::slotted(:last-child) {
     --mod-actionbutton-focus-ring-border-radius: var(--spectrum-alias-component-border-radius) 0 0 var(--mod-actiongroup-border-radius, var(--spectrum-actiongroup-border-radius));
 }
 
diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
index 6f9e4f92dff..5f84165c8aa 100644
--- a/packages/action-group/test/action-group.test.ts
+++ b/packages/action-group/test/action-group.test.ts
@@ -1491,7 +1491,7 @@ describe('ActionGroup', () => {
         `);
         await acceptKeyboardInput(el);
     });
-    it('accepts keybord input when [dir="ltr"]', async () => {
+    it('accepts keybord input when in left-to-right direction', async () => {
         const el = await fixture<ActionGroup>(html`
             <sp-action-group
                 label="Selects Single Group"
diff --git a/packages/action-menu/src/action-menu.css b/packages/action-menu/src/action-menu.css
index b7dd55a19dc..c90467ef348 100644
--- a/packages/action-menu/src/action-menu.css
+++ b/packages/action-menu/src/action-menu.css
@@ -38,22 +38,19 @@
     max-width: none;
 }
 
-:host([dir="ltr"]) ::slotted([slot="icon"]),
-:host([dir="ltr"]) .icon {
-    /* [dir=ltr] .spectrum-ActionButton .spectrum-Icon */
+::slotted([slot="icon"]),
+.icon {
     margin-left: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
 }
 
-:host([dir="rtl"]) ::slotted([slot="icon"]),
-:host([dir="rtl"]) .icon {
-    /* [dir=rtl] .spectrum-ActionButton .spectrum-Icon */
+::slotted([slot="icon"]:dir(rtl)),
+.icon:dir(rtl) {
     margin-right: calc(-1 * (var(--spectrum-actionbutton-textonly-padding-left-adjusted) - var(--spectrum-actionbutton-padding-left-adjusted)));
 }
 
-:host([dir]) slot[icon-only]::slotted([slot="icon"]),
-:host([dir]) slot[icon-only] .icon {
-    margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1); /* .spectrum-ActionButton-hold+.spectrum-ActionButton-icon,
-   * .spectrum-ActionButton-icon:only-child */
+slot[icon-only]::slotted([slot="icon"]),
+slot[icon-only] .icon {
+    margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1);
 }
 
 sp-overlay:not(:defined) {
diff --git a/packages/breadcrumbs/src/breadcrumbs.css b/packages/breadcrumbs/src/breadcrumbs.css
index 12b4420d867..d4bc7776d82 100644
--- a/packages/breadcrumbs/src/breadcrumbs.css
+++ b/packages/breadcrumbs/src/breadcrumbs.css
@@ -24,7 +24,7 @@
     --mod-breadcrumbs-action-button-spacing-block: var(--mod-breadcrumbs-action-button-spacing-block-compact, var(--spectrum-breadcrumbs-action-button-spacing-block-compact));
 }
 
-:host([dir]) slot[slot="icon"]::slotted([slot="icon"]),
-:host([dir]) slot[slot="icon"] .icon {
+slot[slot="icon"]::slotted([slot="icon"]:dir(rtl)),
+slot[slot="icon"] .icon:dir(rtl) {
     margin-inline: calc((var(--custom-actionbutton-edge-to-text, var(--spectrum-actionbutton-edge-to-text)) - var(--custom-actionbutton-edge-to-visual-only, var(--spectrum-actionbutton-edge-to-visual-only))) * -1);
 }
diff --git a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
index 23540d348fd..498ce6630cb 100644
--- a/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
+++ b/packages/breadcrumbs/src/spectrum-breadcrumbs-item.css
@@ -18,8 +18,7 @@
     position: relative;
 }
 
-#separator:dir(rtl),
-:host([dir="rtl"]) #separator {
+#separator:dir(rtl) {
     transform: scaleX(-1);
 }
 
diff --git a/packages/button-group/src/button-group.css b/packages/button-group/src/button-group.css
index 4086352773d..a9eba67ee84 100644
--- a/packages/button-group/src/button-group.css
+++ b/packages/button-group/src/button-group.css
@@ -15,12 +15,9 @@
 
 :host([vertical]) ::slotted(sp-action-button) {
     --spectrum-actionbutton-label-flex-grow: 1;
-}
-
-:host([dir="ltr"][vertical]) ::slotted(sp-action-button) {
     --spectrum-actionbutton-label-text-align: left;
 }
 
-:host([dir="rtl"][vertical]) ::slotted(sp-action-button) {
+:host([vertical]:dir(rtl)) ::slotted(sp-action-button):dir(rtl) {
     --spectrum-actionbutton-label-text-align: right;
 }
diff --git a/packages/button/src/button-base.css b/packages/button/src/button-base.css
index 48951955137..9d6cefc12dd 100644
--- a/packages/button/src/button-base.css
+++ b/packages/button/src/button-base.css
@@ -13,19 +13,16 @@
 @import url("./spectrum-button-base.css");
 
 :host {
-    display: inline-flex;
-    vertical-align: top;
-
     --spectrum-progress-circle-size: var(--spectrum-workflow-icon-size-100);
     --spectrum-icon-size: var(--spectrum-workflow-icon-size-100);
-}
 
-:host([dir]) {
     /* spectrum-button.css uses "-webkit-appearance: button" to workaround an
-     * iOS and Safari issue. However, it results in incorrect styling
-     * when applied in :host
-     */
+    * iOS and Safari issue. However, it results in incorrect styling
+    * when applied in :host
+    */
     -webkit-appearance: none; /* stylelint-disable-line */
+    display: inline-flex;
+    vertical-align: top;
 }
 
 :host([disabled]) {
diff --git a/packages/card/src/card.css b/packages/card/src/card.css
index 08b899438c0..71cb4522e07 100644
--- a/packages/card/src/card.css
+++ b/packages/card/src/card.css
@@ -25,13 +25,10 @@
 
 .action-button {
     flex-grow: 0;
-}
-
-:host([dir="ltr"]) .action-button {
     margin-left: auto;
 }
 
-:host([dir="rtl"]) .action-button {
+.action-button:dir(rtl) {
     margin-right: auto;
 }
 
diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
index fddb3ad5cfe..9e67931947c 100644
--- a/packages/color-area/src/ColorArea.ts
+++ b/packages/color-area/src/ColorArea.ts
@@ -245,10 +245,10 @@ export class ColorArea extends SpectrumElement {
                     deltaY = step * -1;
                     break;
                 case 'ArrowLeft':
-                    deltaX = this.step * (this.isLTR ? -1 : 1);
+                    deltaX = this.step * (this.dir === 'ltr' ? -1 : 1);
                     break;
                 case 'ArrowRight':
-                    deltaX = this.step * (this.isLTR ? 1 : -1);
+                    deltaX = this.step * (this.dir === 'ltr' ? 1 : -1);
                     break;
                 case 'PageUp':
                     deltaY = step * 10;
@@ -257,10 +257,10 @@ export class ColorArea extends SpectrumElement {
                     deltaY = step * -10;
                     break;
                 case 'Home':
-                    deltaX = step * (this.isLTR ? -10 : 10);
+                    deltaX = step * (this.dir === 'ltr' ? -10 : 10);
                     break;
                 case 'End':
-                    deltaX = step * (this.isLTR ? 10 : -10);
+                    deltaX = step * (this.dir === 'ltr' ? 10 : -10);
                     break;
                 /* c8 ignore next 2 */
                 default:
@@ -404,7 +404,7 @@ export class ColorArea extends SpectrumElement {
             Math.min(1, (offsetY - minOffsetY) / height)
         );
 
-        return [this.isLTR ? percentX : 1 - percentX, 1 - percentY];
+        return [this.dir === 'ltr' ? percentX : 1 - percentX, 1 - percentY];
     }
 
     private handleAreaPointerdown(event: PointerEvent): void {
@@ -465,7 +465,7 @@ export class ColorArea extends SpectrumElement {
                 color=${this.colorController.getHslString()}
                 ?disabled=${this.disabled}
                 style=${`transform: translate(${
-                    (this.isLTR ? this.x : 1 - this.x) * width
+                    (this.dir === 'ltr' ? this.x : 1 - this.x) * width
                 }px, ${height - this.y * height}px);`}
                 ${streamingListener({
                     start: ['pointerdown', this.handlePointerdown],
diff --git a/packages/color-area/src/color-area.css b/packages/color-area/src/color-area.css
index d6ec84955e4..ed6db630a8b 100644
--- a/packages/color-area/src/color-area.css
+++ b/packages/color-area/src/color-area.css
@@ -34,7 +34,7 @@
     height: 100%;
 }
 
-:host([dir="rtl"]) .gradient {
+.gradient:dir(rtl) {
     transform: scaleX(-1);
 }
 
diff --git a/packages/color-area/src/spectrum-color-area.css b/packages/color-area/src/spectrum-color-area.css
index 3a2f44bbf6e..eb86f569a65 100644
--- a/packages/color-area/src/spectrum-color-area.css
+++ b/packages/color-area/src/spectrum-color-area.css
@@ -58,8 +58,7 @@
     inset-block-start: 0;
 }
 
-.handle:dir(rtl),
-:host([dir="rtl"]) .handle {
+.handle:dir(rtl) {
     inset-inline-end: 0;
 }
 
diff --git a/packages/color-loupe/src/spectrum-color-loupe.css b/packages/color-loupe/src/spectrum-color-loupe.css
index 98f200dc27d..ed427eefe14 100644
--- a/packages/color-loupe/src/spectrum-color-loupe.css
+++ b/packages/color-loupe/src/spectrum-color-loupe.css
@@ -27,8 +27,7 @@
     inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);
 }
 
-:host:dir(rtl),
-:host([dir="rtl"]) {
+:host:dir(rtl) {
     inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2 - 1px);
 }
 
diff --git a/packages/color-slider/src/ColorSlider.ts b/packages/color-slider/src/ColorSlider.ts
index d415c65186f..8452f359a42 100644
--- a/packages/color-slider/src/ColorSlider.ts
+++ b/packages/color-slider/src/ColorSlider.ts
@@ -129,10 +129,10 @@ export class ColorSlider extends Focusable {
                 delta = -this.step;
                 break;
             case 'ArrowLeft':
-                delta = this.step * (this.isLTR ? -1 : 1);
+                delta = this.step * (this.dir === 'ltr' ? -1 : 1);
                 break;
             case 'ArrowRight':
-                delta = this.step * (this.isLTR ? 1 : -1);
+                delta = this.step * (this.dir === 'ltr' ? 1 : -1);
                 break;
             default:
                 return;
@@ -269,7 +269,9 @@ export class ColorSlider extends Focusable {
 
         const percent = Math.max(0, Math.min(1, (offset - minOffset) / size));
         const sliderHandlePosition =
-            this.vertical || !this.isLTR ? 100 - 100 * percent : 100 * percent;
+            this.vertical || this.dir === 'rtl'
+                ? 100 - 100 * percent
+                : 100 * percent;
 
         return sliderHandlePosition;
     }
diff --git a/packages/color-slider/src/spectrum-color-slider.css b/packages/color-slider/src/spectrum-color-slider.css
index 39f8ffe3aa3..0ba347c2b0e 100644
--- a/packages/color-slider/src/spectrum-color-slider.css
+++ b/packages/color-slider/src/spectrum-color-slider.css
@@ -87,8 +87,7 @@
     border-radius: var(--mod-color-slider-border-rounding, var(--spectrum-color-slider-border-rounding));
 }
 
-.gradient:dir(rtl),
-:host([dir="rtl"]) .gradient {
+.gradient:dir(rtl) {
     transform: scaleX(-1);
 }
 
diff --git a/packages/color-wheel/src/ColorWheel.ts b/packages/color-wheel/src/ColorWheel.ts
index b165752bfcb..7931bd348c8 100644
--- a/packages/color-wheel/src/ColorWheel.ts
+++ b/packages/color-wheel/src/ColorWheel.ts
@@ -118,10 +118,10 @@ export class ColorWheel extends Focusable {
                 delta = -this.step;
                 break;
             case 'ArrowLeft':
-                delta = this.step * (this.isLTR ? -1 : 1);
+                delta = this.step * (this.dir === 'ltr' ? -1 : 1);
                 break;
             case 'ArrowRight':
-                delta = this.step * (this.isLTR ? 1 : -1);
+                delta = this.step * (this.dir === 'ltr' ? 1 : -1);
                 break;
             default:
                 return;
@@ -253,7 +253,7 @@ export class ColorWheel extends Focusable {
         const pointY = event.clientY - centerY;
         const value = (Math.atan2(pointY, pointX) * 180) / Math.PI;
 
-        return (360 + (360 + (this.isLTR ? value : 180 - value))) % 360;
+        return (360 + (360 + (this.dir === 'ltr' ? value : 180 - value))) % 360;
     }
 
     private handleGradientPointerdown(event: PointerEvent): void {
@@ -305,7 +305,7 @@ export class ColorWheel extends Focusable {
 
         // Calculate handle position on the wheel.
         const translateX =
-            (this.isLTR ? 1 : -1) *
+            (this.dir === 'ltr' ? 1 : -1) *
             (radius - trackWidth / 2) *
             Math.cos((this.value * Math.PI) / 180);
         const translateY =
diff --git a/packages/color-wheel/src/color-wheel.css b/packages/color-wheel/src/color-wheel.css
index d1e04a61512..c274e3094ae 100644
--- a/packages/color-wheel/src/color-wheel.css
+++ b/packages/color-wheel/src/color-wheel.css
@@ -33,7 +33,7 @@
     z-index: 0;
 }
 
-:host([dir="rtl"]) .wheel,
-:host([dir="rtl"]) ::slotted([slot="gradient"]) {
+.wheel:dir(rtl),
+::slotted([slot="gradient"]:dir(rtl)) {
     transform: scaleX(-1);
 }
diff --git a/packages/combobox/src/spectrum-combobox.css b/packages/combobox/src/spectrum-combobox.css
index cd99f4aa7b9..bb5d5003287 100644
--- a/packages/combobox/src/spectrum-combobox.css
+++ b/packages/combobox/src/spectrum-combobox.css
@@ -220,8 +220,7 @@
     inset-inline-end: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
 }
 
-.progress-circle:dir(rtl),
-:host([dir="rtl"]) .progress-circle {
+.progress-circle:dir(rtl) {
     inset-inline-start: calc(var(--mod-combobox-spacing-inline-icon-to-button, var(--spectrum-combobox-spacing-inline-icon-to-button)) + var(--mod-combobox-button-width, var(--spectrum-combobox-button-width)));
     inset-inline-end: inherit;
 }
diff --git a/packages/field-group/src/field-group.css b/packages/field-group/src/field-group.css
index c1c4c6f496e..c5bfbcb37b0 100644
--- a/packages/field-group/src/field-group.css
+++ b/packages/field-group/src/field-group.css
@@ -13,14 +13,14 @@
 @import url("./spectrum-field-group.css");
 @import url("./field-group-overrides.css");
 
-:host([horizontal][dir="rtl"]) slot:not([name])::slotted(*:not(:last-child)),
-:host([dir="rtl"]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) {
+:host([horizontal]) slot:not([name])::slotted(*:not(:last-child)),
+:host(:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) {
     /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */
-    margin: 0 0 0 var(--spectrum-fieldgroup-margin);
+    margin: 0 var(--spectrum-fieldgroup-margin) 0 0;
 }
 
-:host([horizontal][dir="ltr"]) slot:not([name])::slotted(*:not(:last-child)),
-:host([dir="ltr"]:not([vertical])) slot:not([name])::slotted(*:not(:last-child)) {
+:host([horizontal]) slot:not([name])::slotted(*:not(:last-child):dir(rtl)),
+:host(:not([vertical])) slot:not([name])::slotted(*:not(:last-child):dir(rtl)) {
     /* .spectrum-FieldGroup--horizontal .spectrum-FieldGroup-item+.spectrum-FieldGroup-item */
-    margin: 0 var(--spectrum-fieldgroup-margin) 0 0;
+    margin: 0 0 0 var(--spectrum-fieldgroup-margin);
 }
diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts
index 32b04b46d02..8aa1e498edc 100644
--- a/packages/menu/src/Menu.ts
+++ b/packages/menu/src/Menu.ts
@@ -671,12 +671,12 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
 
     protected navigateBetweenRelatedMenus(event: MenuItemKeydownEvent): void {
         const { key, root } = event;
+        const isLTR = this.dir === 'ltr';
         const shouldOpenSubmenu =
-            (this.isLTR && key === 'ArrowRight') ||
-            (!this.isLTR && key === 'ArrowLeft');
+            (isLTR && key === 'ArrowRight') || (!isLTR && key === 'ArrowLeft');
         const shouldCloseSelfAsSubmenu =
-            (this.isLTR && key === 'ArrowLeft') ||
-            (!this.isLTR && key === 'ArrowRight') ||
+            (isLTR && key === 'ArrowLeft') ||
+            (!isLTR && key === 'ArrowRight') ||
             key === 'Escape';
         const lastFocusedItem = root as MenuItem;
         if (shouldOpenSubmenu) {
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
index 05f899b1f1a..6f94dc93f70 100644
--- a/packages/menu/src/MenuItem.ts
+++ b/packages/menu/src/MenuItem.ts
@@ -385,7 +385,7 @@ export class MenuItem extends LikeAnchor(
                 ?open=${this.hasSubmenu &&
                 this.open &&
                 this.dependencyManager.loaded}
-                .placement=${this.isLTR ? 'right-start' : 'left-start'}
+                .placement=${this.dir === 'ltr' ? 'right-start' : 'left-start'}
                 receives-focus="false"
                 .offset=${[-10, -5] as [number, number]}
                 .type=${'auto'}
diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css
index d6c82a5b689..9382b99afdd 100644
--- a/packages/menu/src/menu-item.css
+++ b/packages/menu/src/menu-item.css
@@ -40,11 +40,11 @@
     inset: 0;
 }
 
-:host([dir="ltr"]) [icon-only]::slotted(:last-of-type) {
+[icon-only]::slotted(:last-of-type) {
     margin-right: auto;
 }
 
-:host([dir="rtl"]) [icon-only]::slotted(:last-of-type) {
+[icon-only]::slotted(:dir(rtl):last-of-type) {
     margin-left: auto;
 }
 
diff --git a/packages/menu/src/spectrum-menu.css b/packages/menu/src/spectrum-menu.css
index 66df013a67e..1dcb9cc224d 100644
--- a/packages/menu/src/spectrum-menu.css
+++ b/packages/menu/src/spectrum-menu.css
@@ -159,8 +159,7 @@
     --spectrum-menu-back-icon-margin: var(--spectrum-navigational-indicator-top-to-back-icon-extra-large);
 }
 
-:host:dir(rtl),
-:host([dir="rtl"]) {
+:host:dir(rtl) {
     --spectrum-menu-item-focus-indicator-direction-scalar: -1;
 }
 
diff --git a/packages/meter/src/meter.css b/packages/meter/src/meter.css
index e65ef9785fd..383dfe073b8 100644
--- a/packages/meter/src/meter.css
+++ b/packages/meter/src/meter.css
@@ -19,6 +19,6 @@
     transform-origin: left;
 }
 
-:host([dir="rtl"]) .fill {
+.fill:dir(rtl) {
     transform-origin: right;
 }
diff --git a/packages/meter/src/spectrum-progress-bar.css b/packages/meter/src/spectrum-progress-bar.css
index 6ce38cc4e67..558f56140a5 100644
--- a/packages/meter/src/spectrum-progress-bar.css
+++ b/packages/meter/src/spectrum-progress-bar.css
@@ -75,8 +75,7 @@
     position: relative;
 }
 
-:host([indeterminate]) .fill:dir(rtl),
-:host([dir="rtl"][indeterminate]) .fill {
+:host([indeterminate]) .fill:dir(rtl) {
     animation-name: indeterminate-loop-rtl;
 }
 
diff --git a/packages/popover/src/spectrum-popover.css b/packages/popover/src/spectrum-popover.css
index 2e9ade1f7af..0790eb3e671 100644
--- a/packages/popover/src/spectrum-popover.css
+++ b/packages/popover/src/spectrum-popover.css
@@ -156,10 +156,7 @@
 
 :host([open]) .spectrum-Popover--start-bottom:dir(rtl),
 :host([open]) .spectrum-Popover--start-top:dir(rtl),
-:host([open]) .spectrum-Popover--start:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Popover--start-bottom,
-:host([dir="rtl"][open]) .spectrum-Popover--start-top,
-:host([dir="rtl"][open]) .spectrum-Popover--start {
+:host([open]) .spectrum-Popover--start:dir(rtl) {
     transform: translateX(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance))) translateZ(0);
 }
 
@@ -177,10 +174,7 @@
 
 :host([open]) .spectrum-Popover--end-bottom:dir(rtl),
 :host([open]) .spectrum-Popover--end-top:dir(rtl),
-:host([open]) .spectrum-Popover--end:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Popover--end-bottom,
-:host([dir="rtl"][open]) .spectrum-Popover--end-top,
-:host([dir="rtl"][open]) .spectrum-Popover--end {
+:host([open]) .spectrum-Popover--end:dir(rtl) {
     transform: translateX(calc(var(--mod-popover-animation-distance, var(--spectrum-popover-animation-distance)) * -1)) translateZ(0);
 }
 
@@ -299,10 +293,7 @@
 
 :host([tip]) .spectrum-Popover--start #tip:dir(rtl),
 :host([tip]) .spectrum-Popover--start-bottom #tip:dir(rtl),
-:host([tip]) .spectrum-Popover--start-top #tip:dir(rtl),
-:host([dir="rtl"][tip]) .spectrum-Popover--start #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--start-bottom #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--start-top #tip {
+:host([tip]) .spectrum-Popover--start-top #tip:dir(rtl) {
     transform: none;
 }
 
@@ -315,9 +306,6 @@
 
 :host([tip]) .spectrum-Popover--end #tip:dir(rtl),
 :host([tip]) .spectrum-Popover--end-bottom #tip:dir(rtl),
-:host([tip]) .spectrum-Popover--end-top #tip:dir(rtl),
-:host([dir="rtl"][tip]) .spectrum-Popover--end #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--end-bottom #tip,
-:host([dir="rtl"][tip]) .spectrum-Popover--end-top #tip {
+:host([tip]) .spectrum-Popover--end-top #tip:dir(rtl) {
     transform: scaleX(1);
 }
diff --git a/packages/progress-bar/src/progress-bar.css b/packages/progress-bar/src/progress-bar.css
index a8ca73df200..9e0b63f64c8 100644
--- a/packages/progress-bar/src/progress-bar.css
+++ b/packages/progress-bar/src/progress-bar.css
@@ -18,7 +18,7 @@
     transform-origin: left;
 }
 
-:host([dir="rtl"]) .fill {
+.fill:dir(rtl) {
     transform-origin: right;
 }
 
diff --git a/packages/progress-bar/src/spectrum-progress-bar.css b/packages/progress-bar/src/spectrum-progress-bar.css
index 6ce38cc4e67..558f56140a5 100644
--- a/packages/progress-bar/src/spectrum-progress-bar.css
+++ b/packages/progress-bar/src/spectrum-progress-bar.css
@@ -75,8 +75,7 @@
     position: relative;
 }
 
-:host([indeterminate]) .fill:dir(rtl),
-:host([dir="rtl"][indeterminate]) .fill {
+:host([indeterminate]) .fill:dir(rtl) {
     animation-name: indeterminate-loop-rtl;
 }
 
diff --git a/packages/radio/src/radio.css b/packages/radio/src/radio.css
index 892d6fd2353..d3bbe878d2a 100644
--- a/packages/radio/src/radio.css
+++ b/packages/radio/src/radio.css
@@ -24,7 +24,7 @@
 /**
  * Work around for https://github.com/adobe/spectrum-css/issues/2251
  **/
-:host([dir="rtl"]) #button:after {
+#button:dir(rtl):after {
     transform: translateX(50%) translateY(-50%);
 }
 
diff --git a/packages/radio/src/spectrum-radio.css b/packages/radio/src/spectrum-radio.css
index 9bffd22f1e1..995f062e46a 100644
--- a/packages/radio/src/spectrum-radio.css
+++ b/packages/radio/src/spectrum-radio.css
@@ -229,7 +229,6 @@
     transform: translateX(-50%) translateY(-50%);
 }
 
-:host:dir(rtl) #button:after,
-:host([dir="rtl"]) #button:after {
+#button:dir(rtl):after {
     transform: translateX(50%) translateY(-50%);
 }
diff --git a/packages/slider/src/HandleController.ts b/packages/slider/src/HandleController.ts
index 08673ef6678..eae83a2a8ed 100644
--- a/packages/slider/src/HandleController.ts
+++ b/packages/slider/src/HandleController.ts
@@ -502,9 +502,10 @@ export class HandleController {
         const offset = event.clientX;
         const size = rect.width;
 
-        const directionalOffset = this.host.isLTR
-            ? offset - minOffset
-            : size - (offset - minOffset);
+        const directionalOffset =
+            this.host.dir === 'ltr'
+                ? offset - minOffset
+                : size - (offset - minOffset);
         const normalized = directionalOffset / size;
 
         return model.normalization.fromNormalized(
@@ -526,7 +527,7 @@ export class HandleController {
             'handle-highlight': model.highlight,
         };
         const style = {
-            [this.host.isLTR ? 'left' : 'right']: `${
+            [this.host.dir === 'ltr' ? 'left' : 'right']: `${
                 model.normalizedValue * 100
             }%`,
             'z-index': zIndex.toString(),
diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
index 4460a2ef7c2..dc5674425d0 100644
--- a/packages/slider/src/slider.css
+++ b/packages/slider/src/slider.css
@@ -70,25 +70,25 @@
     justify-content: start;
 }
 
-:host([dir="ltr"]) .not-exact .tick {
+.not-exact .tick {
     padding-right: var(--sp-slider-tick-offset);
 }
 
-:host([dir="rtl"]) .not-exact .tick {
+.not-exact .tick:dir(rtl) {
     padding-left: var(--sp-slider-tick-offset);
 }
 
-:host([dir="ltr"]) .not-exact .tick:after {
+.not-exact .tick:after {
     left: auto;
     transform: translate(-50%, 0);
 }
 
-:host([dir="rtl"]) .not-exact .tick:after {
+.not-exact .tick:dir(rtl):after {
     right: auto;
     transform: translate(50%, 0);
 }
 
-:host([dir="rtl"]) .handle:before {
+.handle:dir(rtl):before {
     transform: translate(50%, -50%);
 }
 
@@ -101,19 +101,19 @@
     background-size: var(--spectrum-slider-track-background-size) !important;
 }
 
-:host([dir="ltr"]) .track:last-of-type:before {
+.track:last-of-type:before {
     background-position: 100%;
 }
 
-:host([dir="rtl"]) .track:first-of-type:before {
+.track:first-of-type:before:dir(rtl) {
     background-position: 100%;
 }
 
-:host([dir="ltr"]) .track:not(:first-of-type, :last-of-type) {
+.track:not(:first-of-type, :last-of-type) {
     left: var(--spectrum-slider-track-segment-position);
 }
 
-:host([dir="rtl"]) .track:not(:first-of-type, :last-of-type) {
+.track:not(:first-of-type, :last-of-type):dir(rtl) {
     right: var(--spectrum-slider-track-segment-position);
 }
 
@@ -127,11 +127,11 @@
     width: 1px;
 }
 
-:host([label-visibility="value"][dir="ltr"]) #value {
+:host([label-visibility="value"]) #value {
     margin-left: auto;
 }
 
-:host([label-visibility="value"][dir="rtl"]) #value {
+:host([label-visibility="value"]) #value:dir(rtl) {
     margin-right: auto;
 }
 
diff --git a/packages/slider/src/spectrum-slider.css b/packages/slider/src/spectrum-slider.css
index 2e1f076045c..05994588d0c 100644
--- a/packages/slider/src/spectrum-slider.css
+++ b/packages/slider/src/spectrum-slider.css
@@ -51,8 +51,7 @@
     position: relative;
 }
 
-:host:dir(rtl),
-:host([dir="rtl"]) {
+:host:dir(rtl) {
     --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 }
 
@@ -299,8 +298,7 @@
     transform: translate(-50%, -50%);
 }
 
-:host:dir(rtl) .handle:before,
-:host([dir="rtl"]) .handle:before {
+.handle:dir(rtl):before {
     transform: translate(50%, -50%);
 }
 
diff --git a/packages/slider/stories/slider.stories.ts b/packages/slider/stories/slider.stories.ts
index 5890badd250..13936e18859 100644
--- a/packages/slider/stories/slider.stories.ts
+++ b/packages/slider/stories/slider.stories.ts
@@ -736,7 +736,7 @@ export const Gradient = (args: StoryArgs = {}): TemplateResult => {
                     green 100%
                 );
             }
-            sp-slider[dir='rtl'] {
+            sp-slider:dir(rtl) {
                 --mod-slider-track-color: linear-gradient(
                     to left,
                     red,
diff --git a/packages/split-view/src/SplitView.ts b/packages/split-view/src/SplitView.ts
index 01d050c588e..332056c6072 100644
--- a/packages/split-view/src/SplitView.ts
+++ b/packages/split-view/src/SplitView.ts
@@ -272,7 +272,7 @@ export class SplitView extends SpectrumElement {
     private onPointermove(event: PointerEvent): void {
         event.preventDefault();
         let pos =
-            this.vertical || this.isLTR
+            this.vertical || this.dir === 'ltr'
                 ? this.getPosition(event) - this.offset
                 : this.offset - this.getPosition(event);
         if (this.collapsible && pos < this.minPos - COLLAPSE_THREASHOLD) {
@@ -292,7 +292,7 @@ export class SplitView extends SpectrumElement {
         if (!this.rect) {
             this.rect = this.getBoundingClientRect();
         }
-        const offsetX = this.isLTR ? this.rect.left : this.rect.right;
+        const offsetX = this.dir === 'ltr' ? this.rect.left : this.rect.right;
         return this.vertical ? this.rect.top : offsetX;
     }
 
@@ -312,7 +312,7 @@ export class SplitView extends SpectrumElement {
             return;
         }
         let direction = 0;
-        const isLTRorVertical = this.isLTR || this.vertical;
+        const isLTRorVertical = this.dir === 'ltr' || this.vertical;
         switch (event.key) {
             case 'Home':
                 event.preventDefault();
diff --git a/packages/split-view/src/split-view.css b/packages/split-view/src/split-view.css
index e6f143dcd02..c3d9aae4704 100644
--- a/packages/split-view/src/split-view.css
+++ b/packages/split-view/src/split-view.css
@@ -61,13 +61,13 @@
     cursor: ns-resize;
 }
 
-:host([resizable][dir="ltr"]) #splitter.is-resized-start,
-:host([resizable][dir="rtl"]) #splitter.is-resized-end {
+:host([resizable]) #splitter.is-resized-start,
+:host([resizable]) #splitter.is-resized-end:dir(rtl) {
     cursor: e-resize;
 }
 
-:host([resizable][dir="ltr"]) #splitter.is-resized-end,
-:host([resizable][dir="rtl"]) #splitter.is-resized-start {
+:host([resizable]) #splitter.is-resized-end,
+:host([resizable]) #splitter.is-resized-start:dir(rtl) {
     cursor: w-resize;
 }
 
@@ -84,13 +84,13 @@
     cursor: ew-resize;
 }
 
-:host([resizable][dir="ltr"][collapsible]) #splitter.is-collapsed-start,
-:host([resizable][dir="rtl"][collapsible]) #splitter.is-collapsed-end {
+:host([resizable][collapsible]) #splitter.is-collapsed-start,
+:host([resizable][collapsible]) #splitter.is-collapsed-end:dir(rtl) {
     cursor: e-resize;
 }
 
-:host([resizable][dir="ltr"][collapsible]) #splitter.is-collapsed-end,
-:host([resizable][dir="rtl"][collapsible]) #splitter.is-collapsed-start {
+:host([resizable][collapsible]) #splitter.is-collapsed-end,
+:host([resizable][collapsible]) #splitter.is-collapsed-start:dir(rtl) {
     cursor: w-resize;
 }
 
diff --git a/packages/status-light/src/spectrum-status-light.css b/packages/status-light/src/spectrum-status-light.css
index 7a37b8242b5..ce993592f0a 100644
--- a/packages/status-light/src/spectrum-status-light.css
+++ b/packages/status-light/src/spectrum-status-light.css
@@ -10,7 +10,6 @@
  * governing permissions and limitations under the License.
  */
 
-:host([dir]),
 :host {
     --spectrum-statuslight-height: var(--spectrum-component-height-100);
     --spectrum-statuslight-dot-size: var(--spectrum-status-light-dot-size-medium);
@@ -51,7 +50,7 @@
     --spectrum-statuslight-spacing-bottom-to-label: var(--spectrum-component-bottom-to-text-300);
 }
 
-:host([dir]) {
+:host {
     --spectrum-statuslight-corner-radius: 50%;
     --spectrum-statuslight-font-weight: 400;
     --spectrum-statuslight-border-width: var(--spectrum-border-width-100);
@@ -79,6 +78,7 @@
     --spectrum-statuslight-nonsemantic-purple-color: var(--spectrum-purple-visual-color);
     --spectrum-statuslight-nonsemantic-fuchsia-color: var(--spectrum-fuchsia-visual-color);
     --spectrum-statuslight-nonsemantic-magenta-color: var(--spectrum-magenta-visual-color);
+
     min-block-size: var(--mod-statuslight-height, var(--spectrum-statuslight-height));
     box-sizing: border-box;
     font-size: var(--mod-statuslight-font-size, var(--spectrum-statuslight-font-size));
@@ -199,9 +199,10 @@
 }
 
 @media (forced-colors: active) {
-    :host([dir]) {
+    :host(:dir(ltr)) {
         --highcontrast-statuslight-content-color-default: CanvasText;
         --highcontrast-statuslight-subdued-content-color-default: CanvasText;
+
         forced-color-adjust: none;
     }
 
diff --git a/packages/switch/src/spectrum-switch.css b/packages/switch/src/spectrum-switch.css
index bdcf8069a47..c33f7bf7c84 100644
--- a/packages/switch/src/spectrum-switch.css
+++ b/packages/switch/src/spectrum-switch.css
@@ -109,8 +109,7 @@
     transform: translateX(calc(var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%));
 }
 
-:host([checked]) #input + #switch:dir(rtl):before,
-:host([dir="rtl"][checked]) #input + #switch:before {
+:host([checked]) #input + #switch:dir(rtl):before {
     transform: translateX(calc((var(--mod-switch-control-width, var(--spectrum-switch-control-width)) - 100%) * -1));
 }
 
diff --git a/packages/table/src/spectrum-table.css b/packages/table/src/spectrum-table.css
index d182a4034f0..6145b040f9c 100644
--- a/packages/table/src/spectrum-table.css
+++ b/packages/table/src/spectrum-table.css
@@ -86,8 +86,7 @@
     --mod-thumbnail-size: var(--mod-table-thumbnail-size, var(--spectrum-table-thumbnail-size));
 }
 
-:host:dir(rtl),
-:host([dir="rtl"]) {
+:host:dir(rtl) {
     --spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
 }
 
diff --git a/packages/tabs/src/Tabs.ts b/packages/tabs/src/Tabs.ts
index 0c66f010a11..9ed9dcdd7f7 100644
--- a/packages/tabs/src/Tabs.ts
+++ b/packages/tabs/src/Tabs.ts
@@ -59,7 +59,7 @@ export const ScaledIndicator = {
             :host([direction='vertical']) #selection-indicator {
                 height: ${this.baseSize}px;
             }
-            :host([dir][direction='horizontal']) #selection-indicator {
+            :host([direction='horizontal']) #selection-indicator {
                 width: ${this.baseSize}px;
             }
         `;
diff --git a/packages/tabs/src/spectrum-tabs.css b/packages/tabs/src/spectrum-tabs.css
index 326db73d9ae..5ed8850e312 100644
--- a/packages/tabs/src/spectrum-tabs.css
+++ b/packages/tabs/src/spectrum-tabs.css
@@ -56,13 +56,11 @@
     --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
 }
 
-:host([direction^="vertical"]) #list:dir(rtl),
-:host([dir="rtl"][direction^="vertical"]) #list {
+:host([direction^="vertical"]) #list:dir(rtl) {
     --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
 }
 
-:host([direction^="vertical-right"]) #list:dir(rtl),
-:host([dir="rtl"][direction^="vertical-right"]) #list {
+:host([direction^="vertical-right"]) #list:dir(rtl) {
     --mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
 }
 
diff --git a/packages/tabs/src/tab.css b/packages/tabs/src/tab.css
index 429d3dfc9ae..e51c94d5e2f 100644
--- a/packages/tabs/src/tab.css
+++ b/packages/tabs/src/tab.css
@@ -61,7 +61,7 @@
     height: auto;
 }
 
-:host([dir][vertical]) slot[name="icon"] + #item-label {
+:host([vertical]) slot[name="icon"] + #item-label {
     margin-inline-start: 0;
     margin-block: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2) calc(var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text)) / 2);
 }
diff --git a/packages/tabs/src/tabs.css b/packages/tabs/src/tabs.css
index c76b3168ebb..43025202070 100644
--- a/packages/tabs/src/tabs.css
+++ b/packages/tabs/src/tabs.css
@@ -27,7 +27,7 @@
     grid-template-columns: auto 1fr;
 }
 
-:host([dir="rtl"]) #selection-indicator {
+#selection-indicator:dir(rtl) {
     left: 0;
     right: auto;
 }
@@ -66,11 +66,11 @@
     transition: none;
 }
 
-:host([dir][direction="horizontal"]) #list.scroll {
+:host([direction="horizontal"]) #list.scroll {
     scrollbar-width: none;
     overflow: auto hidden;
 }
 
-:host([dir][direction="horizontal"]) #list.scroll::-webkit-scrollbar {
+:host([direction="horizontal"]) #list.scroll::-webkit-scrollbar {
     display: none;
 }
diff --git a/packages/toast/src/spectrum-toast.css b/packages/toast/src/spectrum-toast.css
index b93b95d3bf9..d77789e5331 100644
--- a/packages/toast/src/spectrum-toast.css
+++ b/packages/toast/src/spectrum-toast.css
@@ -148,8 +148,7 @@
     margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
 }
 
-.body ::slotted([slot="action"]:dir(rtl)),
-:host([dir="rtl"]) .body ::slotted([slot="action"]) {
+.body ::slotted([slot="action"]:dir(rtl)) {
     margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
 }
 
diff --git a/packages/tooltip/src/spectrum-tooltip.css b/packages/tooltip/src/spectrum-tooltip.css
index 1bc7074c590..cdc9e0761cd 100644
--- a/packages/tooltip/src/spectrum-tooltip.css
+++ b/packages/tooltip/src/spectrum-tooltip.css
@@ -191,9 +191,7 @@
 }
 
 .spectrum-Tooltip--bottom-start #tip:dir(rtl),
-.spectrum-Tooltip--top-start #tip:dir(rtl),
-:host([dir="rtl"]) .spectrum-Tooltip--bottom-start #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--top-start #tip {
+.spectrum-Tooltip--top-start #tip:dir(rtl) {
     right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
     left: auto;
 }
@@ -204,9 +202,7 @@
 }
 
 .spectrum-Tooltip--bottom-end #tip:dir(rtl),
-.spectrum-Tooltip--top-end #tip:dir(rtl),
-:host([dir="rtl"]) .spectrum-Tooltip--bottom-end #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--top-end #tip {
+.spectrum-Tooltip--top-end #tip:dir(rtl) {
     left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
     right: auto;
 }
@@ -278,13 +274,7 @@
 .spectrum-Tooltip--end-top #tip:dir(rtl),
 :host([placement*="left"]) #tooltip #tip:dir(rtl),
 .spectrum-Tooltip--left-bottom #tip:dir(rtl),
-.spectrum-Tooltip--left-top #tip:dir(rtl),
-:host([dir="rtl"]) .spectrum-Tooltip--end #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--end-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--end-top #tip,
-:host([dir="rtl"][placement*="left"]) #tooltip #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--left-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--left-top #tip {
+.spectrum-Tooltip--left-top #tip:dir(rtl) {
     clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
     left: 100%;
     right: auto;
@@ -295,13 +285,7 @@
 .spectrum-Tooltip--right-top #tip:dir(rtl),
 .spectrum-Tooltip--start #tip:dir(rtl),
 .spectrum-Tooltip--start-bottom #tip:dir(rtl),
-.spectrum-Tooltip--start-top #tip:dir(rtl),
-:host([dir="rtl"][placement*="right"]) #tooltip #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--right-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--right-top #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--start #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--start-bottom #tip,
-:host([dir="rtl"]) .spectrum-Tooltip--start-top #tip {
+.spectrum-Tooltip--start-top #tip:dir(rtl) {
     clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
     left: auto;
     right: 100%;
@@ -395,10 +379,7 @@
 
 :host([open]) .spectrum-Tooltip--start-bottom:dir(rtl),
 :host([open]) .spectrum-Tooltip--start-top:dir(rtl),
-:host([open]) .spectrum-Tooltip--start:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Tooltip--start-bottom,
-:host([dir="rtl"][open]) .spectrum-Tooltip--start-top,
-:host([dir="rtl"][open]) .spectrum-Tooltip--start {
+:host([open]) .spectrum-Tooltip--start:dir(rtl) {
     transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
 }
 
@@ -416,9 +397,6 @@
 
 :host([open]) .spectrum-Tooltip--end-bottom:dir(rtl),
 :host([open]) .spectrum-Tooltip--end-top:dir(rtl),
-:host([open]) .spectrum-Tooltip--end:dir(rtl),
-:host([dir="rtl"][open]) .spectrum-Tooltip--end-bottom,
-:host([dir="rtl"][open]) .spectrum-Tooltip--end-top,
-:host([dir="rtl"][open]) .spectrum-Tooltip--end {
+:host([open]) .spectrum-Tooltip--end:dir(rtl) {
     transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
 }
diff --git a/projects/documentation/src/components/layout.css b/projects/documentation/src/components/layout.css
index b5942ef0479..9909c00ab55 100644
--- a/projects/documentation/src/components/layout.css
+++ b/projects/documentation/src/components/layout.css
@@ -29,7 +29,7 @@ docs-side-nav:not(:defined) {
     display: none;
 }
 
-@media screen and (min-width: 961px) {
+@media screen and (width >= 961px) {
     docs-side-nav:not(:defined) {
         position: sticky;
         top: 0;
@@ -43,11 +43,11 @@ docs-side-nav:not(:defined) {
         flex-direction: column;
     }
 
-    docs-side-nav:not(:defined) ::slotted([slot='logo']) {
+    docs-side-nav:not(:defined) ::slotted([slot="logo"]) {
         margin: 0 -24px;
     }
 
-    docs-side-nav:not(:defined) ::slotted([slot='side-nav']) {
+    docs-side-nav:not(:defined) ::slotted([slot="side-nav"]) {
         margin-top: 56px;
         width: 216px;
         flex: 1;
@@ -63,7 +63,7 @@ docs-side-nav:not(:defined) {
     background-color: var(--spectrum-gray-50);
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (width <= 960px) {
     #body {
         height: 50%;
         grid-template-columns: 100%;
@@ -71,8 +71,7 @@ docs-side-nav:not(:defined) {
 }
 
 #page {
-    padding: calc(var(--swc-scale-factor) * 40px)
-        calc(var(--swc-scale-factor) * 56px);
+    padding: calc(var(--swc-scale-factor) * 40px) calc(var(--swc-scale-factor) * 56px);
     max-width: 1080px;
     margin-left: auto;
     margin-right: auto;
@@ -92,10 +91,9 @@ docs-side-nav:not(:defined) {
     flex-direction: column;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (width <= 960px) {
     #page {
-        padding: calc(var(--swc-scale-factor) * 8px)
-            calc(var(--swc-scale-factor) * 24px);
+        padding: calc(var(--swc-scale-factor) * 8px) calc(var(--swc-scale-factor) * 24px);
     }
 
     .manage-theme {
@@ -104,7 +102,7 @@ docs-side-nav:not(:defined) {
     }
 }
 
-@media screen and (min-width: 525px) {
+@media screen and (width >= 525px) {
     .manage-theme {
         display: flex;
         flex-wrap: wrap;
@@ -114,8 +112,6 @@ docs-side-nav:not(:defined) {
 
 header {
     position: sticky;
-    top: 0;
-    left: 0;
     min-height: calc(var(--swc-scale-factor) * 48px);
     border-bottom: 1px solid var(--spectrum-gray-200);
     display: flex;
@@ -123,9 +119,9 @@ header {
     align-items: center;
     justify-content: space-between;
     background-color: var(--spectrum-gray-50);
-    top: 0px;
-    right: 0px;
-    left: 0px;
+    top: 0;
+    right: 0;
+    left: 0;
     padding-inline: 8px;
     z-index: 2;
 
@@ -144,28 +140,12 @@ header svg {
 }
 
 sp-field-label:not(:defined) {
-    height: calc(
-        var(
-                --spectrum-fieldlabel-m-text-line-height,
-                var(--spectrum-alias-component-text-line-height)
-            ) +
-            var(
-                --spectrum-fieldlabel-m-padding-top,
-                calc(var(--swc-scale-factor) * 4px)
-            ) +
-            var(
-                --spectrum-fieldlabel-m-padding-bottom,
-                calc(var(--swc-scale-factor) * 5px)
-            )
-    );
+    height: calc(var(--spectrum-fieldlabel-m-text-line-height, var(--spectrum-alias-component-text-line-height)) + var(--spectrum-fieldlabel-m-padding-top, calc(var(--swc-scale-factor) * 4px)) + var(--spectrum-fieldlabel-m-padding-bottom, calc(var(--swc-scale-factor) * 5px)));
     min-width: 70px;
 }
 
 sp-picker:not(:defined) {
-    height: var(
-        --spectrum-picker-m-height,
-        var(--spectrum-alias-item-height-m)
-    );
+    height: var(--spectrum-picker-m-height, var(--spectrum-alias-item-height-m));
     min-width: 70px;
 }
 
@@ -173,7 +153,7 @@ sp-picker:not(:defined) sp-menu-item {
     display: none;
 }
 
-@media screen and (min-width: 961px) {
+@media screen and (width >= 961px) {
     header {
         display: none;
     }
@@ -195,8 +175,7 @@ sp-picker:not(:defined) sp-menu-item {
 #logo {
     outline: none;
     margin-bottom: -11px;
-    padding: calc(var(--swc-scale-factor) * 28px)
-        calc(var(--swc-scale-factor) * 24px);
+    padding: calc(var(--swc-scale-factor) * 28px) calc(var(--swc-scale-factor) * 24px);
     border-radius: 4px;
     display: flex;
     flex-direction: row;
@@ -220,12 +199,9 @@ sp-picker:not(:defined) sp-menu-item {
     font-weight: 700;
     line-height: 1.3;
     font-style: normal;
-    letter-spacing: 0px;
+    letter-spacing: 0;
     margin: -3px 0 0;
-    font-family: var(
-        --spectrum-alias-body-text-font-family,
-        var(--spectrum-font-family)
-    );
+    font-family: var(--spectrum-alias-body-text-font-family, var(--spectrum-font-family));
 }
 
 #logo span {
@@ -245,24 +221,15 @@ aside {
     background-color: var(--spectrum-gray-75);
     width: calc(var(--swc-scale-factor) * 192px);
     transition:
-        transform
-            var(
-                --spectrum-dialog-confirm-background-entry-animation-duration,
-                var(--spectrum-animation-duration-600)
-            )
-            cubic-bezier(0, 0, 0.4, 1),
-        visibility 0s linear
-            var(
-                --spectrum-dialog-confirm-background-entry-animation-duration,
-                var(--spectrum-animation-duration-600)
-            );
+        transform var(--spectrum-dialog-confirm-background-entry-animation-duration, var(--spectrum-animation-duration-600)) cubic-bezier(0, 0, 0.4, 1),
+        visibility 0s linear var(--spectrum-dialog-confirm-background-entry-animation-duration, var(--spectrum-animation-duration-600));
     visibility: visible;
 }
 
 aside .manage-theme {
     flex-direction: column;
     display: flex;
-    padding: 0px 24px 24px;
+    padding: 0 24px 24px;
     order: 1;
 }
 
@@ -293,11 +260,11 @@ sp-underlay:not([open]) + aside {
     visibility: hidden;
 }
 
-:host([dir='rtl']) aside {
+aside:dir(rtl) {
     left: 0;
     right: auto;
 }
 
-:host([dir='rtl']) sp-underlay:not([open]) + aside {
+sp-underlay:not([open]) + aside:dir(rtl) {
     transform: translateX(-100%);
 }
diff --git a/projects/documentation/src/components/layout.ts b/projects/documentation/src/components/layout.ts
index 89d5d00fb7f..1e19f3aaedf 100644
--- a/projects/documentation/src/components/layout.ts
+++ b/projects/documentation/src/components/layout.ts
@@ -19,7 +19,6 @@ import {
 } from '@spectrum-web-components/base';
 import {
     property,
-    queryAsync,
     state,
 } from '@spectrum-web-components/base/src/decorators.js';
 import '@spectrum-web-components/theme/sp-theme.js';
@@ -27,7 +26,6 @@ import type {
     Color,
     Scale,
     SystemVariant,
-    Theme,
 } from '@spectrum-web-components/theme';
 import type { Picker } from '@spectrum-web-components/picker';
 import '@spectrum-web-components/button/sp-button.js';
@@ -60,7 +58,6 @@ const SWC_THEME_DIR_KEY = 'swc-docs:theme:dir';
 const COLOR_FALLBACK = matchMedia(DARK_MODE).matches ? 'dark' : 'light';
 const SCALE_FALLBACK = matchMedia(IS_MOBILE).matches ? 'large' : 'medium';
 const SYSTEM_FALLBACK = 'spectrum';
-const DIR_FALLBACK = 'ltr';
 const DEFAULT_COLOR = (
     window.localStorage
         ? localStorage.getItem(SWC_THEME_COLOR_KEY) || COLOR_FALLBACK
@@ -80,9 +77,9 @@ const DEFAULT_SYSTEM = (
 ) as SystemVariant;
 const DEFAULT_DIR = (
     window.localStorage
-        ? localStorage.getItem(SWC_THEME_DIR_KEY) || DIR_FALLBACK
-        : DIR_FALLBACK
-) as 'ltr' | 'rtl';
+        ? (localStorage.getItem(SWC_THEME_DIR_KEY) ?? 'ltr')
+        : 'ltr'
+) as HTMLElement['dir'];
 
 const isNarrowMediaQuery = matchMedia('screen and (max-width: 960px)');
 
@@ -173,9 +170,6 @@ export class LayoutElement extends LitElement {
     @property({ attribute: false })
     public color: Color = DEFAULT_COLOR;
 
-    @property({ reflect: true })
-    public override dir: 'ltr' | 'rtl' = DEFAULT_DIR;
-
     @property({ type: Boolean })
     public open = false;
 
@@ -191,19 +185,17 @@ export class LayoutElement extends LitElement {
     @property({ attribute: false })
     public system: SystemVariant = DEFAULT_SYSTEM;
 
-    @queryAsync('sp-theme')
-    private themeRoot!: Theme;
+    private _themeTrackers = new Map<HTMLElement, TrackTheme['callback']>();
 
-    public async startManagingContentDirection(el: HTMLElement): Promise<void> {
-        (await this.themeRoot).startManagingContentDirection(el);
-    }
+    public constructor() {
+        super();
 
-    public async stopManagingContentDirection(el: HTMLElement): Promise<void> {
-        (await this.themeRoot).stopManagingContentDirection(el);
+        // Initialize the direction to the default value if provided
+        if (['ltr', 'rtl'].includes(DEFAULT_DIR)) {
+            this.dir = DEFAULT_DIR;
+        }
     }
 
-    private _themeTrackers = new Map<HTMLElement, TrackTheme['callback']>();
-
     private handleMatchMediaChange = (event: MediaQueryListEvent) => {
         this.isNarrow = event.matches;
     };
@@ -228,9 +220,7 @@ export class LayoutElement extends LitElement {
     }
 
     private updateDirection(event: Event) {
-        const dir = (event.target as Picker).value;
-        this.dir = dir === 'rtl' ? dir : 'ltr';
-        document.documentElement.dir = this.dir;
+        this.dir = (event.target as Picker).value as HTMLElement['dir'];
     }
 
     private handleTrackTheme(event: CustomEvent<TrackTheme>): void {
diff --git a/projects/documentation/src/components/side-nav.css b/projects/documentation/src/components/side-nav.css
index c61e1ba1662..463184520c3 100644
--- a/projects/documentation/src/components/side-nav.css
+++ b/projects/documentation/src/components/side-nav.css
@@ -26,17 +26,13 @@ aside {
     background-color: var(--spectrum-gray-75);
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (width <= 960px) {
     aside {
         position: fixed;
         top: 0;
         left: 0;
-        transition: transform
-                var(
-                    --spectrum-dialog-confirm-background-entry-animation-duration,
-                    var(--spectrum-animation-duration-600)
-                )
-                cubic-bezier(0, 0, 0.4, 1),
+        transition:
+            transform var(--spectrum-dialog-confirm-background-entry-animation-duration, var(--spectrum-animation-duration-600)) cubic-bezier(0, 0, 0.4, 1),
             visibility 0s linear var(--spectrum-animation-duration-600);
         transform: translateX(-100%);
         z-index: 10;
@@ -44,7 +40,7 @@ aside {
         visibility: hidden;
     }
 
-    [dir='rtl'] + aside {
+    aside:dir(rtl) {
         right: 0;
         left: auto;
         transform: translateX(100%);
@@ -71,7 +67,7 @@ aside {
 
 .navigation {
     width: calc(var(--swc-scale-factor) * 240px - 48px);
-    padding: 0 24px 24px 24px;
+    padding: 0 24px 24px;
     flex: 1;
     flex-grow: 1;
     overflow: auto;
@@ -86,11 +82,11 @@ docs-spectrum-logo {
     padding-top: 7px;
 }
 
-:host([dir='ltr']) docs-spectrum-logo {
+docs-spectrum-logo:dir(ltr) {
     margin-right: 16px;
 }
 
-:host([dir='rtl']) docs-spectrum-logo {
+docs-spectrum-logo:dir(rtl) {
     margin-left: 16px;
 }
 
@@ -101,9 +97,7 @@ docs-spectrum-logo {
 
 docs-search {
     width: calc(var(--swc-scale-factor) * 192px);
-    padding: 0 calc(var(--swc-scale-factor) * 24px)
-        calc(var(--swc-scale-factor) * 24px)
-        calc(var(--swc-scale-factor) * 24px);
+    padding: 0 calc(var(--swc-scale-factor) * 24px) calc(var(--swc-scale-factor) * 24px);
 }
 
 sp-sidenav {
diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts
index 745824de677..6c1b3f85714 100644
--- a/projects/story-decorator/src/StoryDecorator.ts
+++ b/projects/story-decorator/src/StoryDecorator.ts
@@ -420,7 +420,7 @@ export class StoryDecorator extends SpectrumElement {
                 ?checked=${this.reduceMotion}
                 @change=${this.updateTheme}
             >
-                Reduce Motion
+                Reduce motion
             </sp-switch>
         `;
     }
diff --git a/tools/base/src/Base.ts b/tools/base/src/Base.ts
index f03543c9079..b1896a35003 100644
--- a/tools/base/src/Base.ts
+++ b/tools/base/src/Base.ts
@@ -12,10 +12,6 @@
 
 import { LitElement, ReactiveElement } from 'lit';
 import { version } from '@spectrum-web-components/base/src/version.js';
-type ThemeRoot = HTMLElement & {
-    startManagingContentDirection: (el: HTMLElement) => void;
-    stopManagingContentDirection: (el: HTMLElement) => void;
-};
 
 type Constructor<T = Record<string, unknown>> = {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -25,38 +21,9 @@ type Constructor<T = Record<string, unknown>> = {
 
 export interface SpectrumInterface {
     shadowRoot: ShadowRoot;
-    isLTR: boolean;
     hasVisibleFocusInTree(): boolean;
-    dir: 'ltr' | 'rtl';
 }
 
-const observedForElements: Set<HTMLElement> = new Set();
-
-const updateRTL = (): void => {
-    const dir =
-        document.documentElement.dir === 'rtl'
-            ? document.documentElement.dir
-            : 'ltr';
-    observedForElements.forEach((el) => {
-        el.setAttribute('dir', dir);
-    });
-};
-
-const rtlObserver = new MutationObserver(updateRTL);
-
-rtlObserver.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ['dir'],
-});
-
-type ContentDirectionManager = HTMLElement & {
-    startManagingContentDirection?(): void;
-};
-
-const canManageContentDirection = (el: ContentDirectionManager): boolean =>
-    typeof el.startManagingContentDirection !== 'undefined' ||
-    el.tagName === 'SP-THEME';
-
 export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
     constructor: T
 ): T & Constructor<SpectrumInterface> {
@@ -65,19 +32,6 @@ export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
          * @private
          */
         public override shadowRoot!: ShadowRoot;
-        private _dirParent?: HTMLElement;
-
-        /**
-         * @private
-         */
-        public override dir!: 'ltr' | 'rtl';
-
-        /**
-         * @private
-         */
-        public get isLTR(): boolean {
-            return this.dir === 'ltr';
-        }
 
         public hasVisibleFocusInTree(): boolean {
             const getAncestors = (root: Document = document): HTMLElement[] => {
@@ -125,63 +79,8 @@ export function SpectrumMixin<T extends Constructor<ReactiveElement>>(
                 return activeElement.matches('.focus-visible');
             }
         }
-
-        public override connectedCallback(): void {
-            if (!this.hasAttribute('dir')) {
-                let dirParent = ((this as HTMLElement).assignedSlot ||
-                    this.parentNode) as HTMLElement;
-                while (
-                    dirParent !== document.documentElement &&
-                    !canManageContentDirection(
-                        dirParent as ContentDirectionManager
-                    )
-                ) {
-                    dirParent = ((dirParent as HTMLElement).assignedSlot || // step into the shadow DOM of the parent of a slotted node
-                        dirParent.parentNode || // DOM Element detected
-                        (dirParent as unknown as ShadowRoot)
-                            .host) as HTMLElement;
-                }
-                this.dir =
-                    dirParent.dir === 'rtl' ? dirParent.dir : this.dir || 'ltr';
-                if (dirParent === document.documentElement) {
-                    observedForElements.add(this);
-                } else {
-                    const { localName } = dirParent;
-                    if (
-                        localName.search('-') > -1 &&
-                        !customElements.get(localName)
-                    ) {
-                        /* c8 ignore next 5 */
-                        customElements.whenDefined(localName).then(() => {
-                            (
-                                dirParent as ThemeRoot
-                            ).startManagingContentDirection(this);
-                        });
-                    } else {
-                        (dirParent as ThemeRoot).startManagingContentDirection(
-                            this
-                        );
-                    }
-                }
-                this._dirParent = dirParent as HTMLElement;
-            }
-            super.connectedCallback();
-        }
-
-        public override disconnectedCallback(): void {
-            super.disconnectedCallback();
-            if (this._dirParent) {
-                if (this._dirParent === document.documentElement) {
-                    observedForElements.delete(this);
-                } else {
-                    (this._dirParent as ThemeRoot).stopManagingContentDirection(
-                        this
-                    );
-                }
-                this.removeAttribute('dir');
-            }
-        }
     }
+
     return SpectrumMixinElement;
 }
 
diff --git a/tools/base/test/base.test.ts b/tools/base/test/base.test.ts
index 180669e1d8d..70ba2535903 100644
--- a/tools/base/test/base.test.ts
+++ b/tools/base/test/base.test.ts
@@ -21,19 +21,17 @@ describe('Base', () => {
     after(() => {
         document.dir = '';
     });
-    it('sets `dir` from `document`', async () => {
+    it('component understands `dir` from `document`', async () => {
         document.dir = 'rtl';
-        const el = await fixture<DirElement>(
-            html`
-                <dir-element></dir-element>
-            `
-        );
+        const el = await fixture<DirElement>(html`
+            <dir-element></dir-element>
+        `);
 
         await elementUpdated(el);
 
         expect(el.dir).to.equal('rtl');
-        expect(el.isLTR).to.be.false;
     });
+
     it('has a static VERSION property', () => {
         expect(DirElement.VERSION).to.equal(version);
     });