Select on [dir='rtl'] now that no build rewrites :dir()

Plan step 39 (part 4). With Tailwind gone the Workbench's Vite build
still turns every `:dir(rtl)` into a long `:lang()` list (its own CSS
minifier, not Tailwind's doing — confirmed by rebuilding and grepping
the output). Every RTL mirror rule across the eleven stylesheets that
had one now selects `:is([dir='rtl'], [dir='rtl'] *)` instead, matching
`:dir(rtl)`'s own specificity (one pseudo-class) and its inherited
"this element or a descendant of one carrying the attribute" reach; the
built CSS now keeps the selector as written (no `:lang(` or `:dir(` left).

RTL browser tests drop the `lang="ar"` workaround the old rewrite
needed (ContainmentTest's side-sheet probe, LayoutTest's shared
layoutPage() helper) and set only dir="rtl"; CarouselTest's probe
already did. Feature tests asserting the selector's literal text
(Progress, Overlay, Menu, ListDetail, Icon, Carousel) updated to match.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/carousel.css

@@ -106,8 +106,8 @@
         }
     }
 
-    [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:dir(rtl),
+    [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:is([dir='rtl'], [dir='rtl'] *),
-    [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:dir(rtl) {
+    [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:is([dir='rtl'], [dir='rtl'] *) {
         transform: scaleX(-1);
     }
 }

resources/css/components/chip-set.css

@@ -79,7 +79,7 @@
         scrollbar-width: none;
         mask-image: linear-gradient(to right, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
 
-        &:dir(rtl) {
+        &:is([dir='rtl'], [dir='rtl'] *) {
             mask-image: linear-gradient(to left, transparent, black var(--chip-fade-start), black calc(100% - var(--chip-fade-end)), transparent);
         }
 

resources/css/components/drawer.css

@@ -98,11 +98,11 @@
         inset-inline-start: 0;
     }
 
-    [data-md-drawer-sheet][data-md-side='end']:dir(rtl) {
+    [data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *) {
         --sheet-offset: -100%;
     }
 
-    [data-md-drawer-sheet][data-md-side='start']:dir(rtl) {
+    [data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *) {
         --sheet-offset: 100%;
     }
 

resources/css/components/icon.css

@@ -16,7 +16,7 @@
         block-size: var(--md-icon-size, 24px);
     }
 
-    [data-md-icon][data-md-mirror-rtl]:dir(rtl) {
+    [data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *) {
         transform: scaleX(-1);
     }
 }

resources/css/components/menu.css

@@ -252,7 +252,7 @@
     [data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron] {
         rotate: 90deg;
 
-        &:dir(rtl) {
+        &:is([dir='rtl'], [dir='rtl'] *) {
             rotate: -90deg;
         }
     }

resources/css/components/navigation-rail.css

@@ -341,7 +341,7 @@
                 translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
                 display var(--md-sys-motion-effects-default-duration) allow-discrete;
 
-            &:dir(rtl) {
+            &:is([dir='rtl'], [dir='rtl'] *) {
                 translate: 100% 0;
             }
         }
@@ -357,7 +357,7 @@
                 translate: -100% 0;
             }
 
-            &:dir(rtl) {
+            &:is([dir='rtl'], [dir='rtl'] *) {
                 translate: 0 0;
 
                 @starting-style {
@@ -386,7 +386,7 @@
                 translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
                 display var(--md-sys-motion-effects-default-duration) allow-discrete;
 
-            &:dir(rtl) {
+            &:is([dir='rtl'], [dir='rtl'] *) {
                 translate: 100% 0;
             }
         }
@@ -399,7 +399,7 @@
                     translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
                     display var(--md-sys-motion-effects-default-duration) allow-discrete;
 
-                &:dir(rtl) {
+                &:is([dir='rtl'], [dir='rtl'] *) {
                     translate: 100% 0;
                 }
             }
@@ -413,7 +413,7 @@
                     translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
                     display var(--md-sys-motion-effects-default-duration) allow-discrete;
 
-                &:dir(rtl) {
+                &:is([dir='rtl'], [dir='rtl'] *) {
                     translate: 100% 0;
                 }
             }
@@ -430,7 +430,7 @@
                     translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
                     display var(--md-sys-motion-effects-default-duration) allow-discrete;
 
-                &:dir(rtl) {
+                &:is([dir='rtl'], [dir='rtl'] *) {
                     translate: 100% 0;
                 }
             }
@@ -447,7 +447,7 @@
                     translate var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-easing-emphasized-accelerate),
                     display var(--md-sys-motion-effects-default-duration) allow-discrete;
 
-                &:dir(rtl) {
+                &:is([dir='rtl'], [dir='rtl'] *) {
                     translate: 100% 0;
                 }
             }
@@ -465,7 +465,7 @@
             translate: -100% 0;
         }
 
-        &:dir(rtl) {
+        &:is([dir='rtl'], [dir='rtl'] *) {
             translate: 0 0;
 
             @starting-style {

resources/css/components/progress.css

@@ -42,7 +42,7 @@
         height: 4px;
     }
 
-    [data-md-progress]:not([data-md-circular]):dir(rtl) {
+    [data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *) {
         rotate: 180deg;
     }
 

resources/css/components/slider.css

@@ -188,7 +188,7 @@
         inset-inline: var(--md-sys-measurement-space25);
         pointer-events: none;
 
-        &:dir(rtl) {
+        &:is([dir='rtl'], [dir='rtl'] *) {
             scale: -1 1;
         }
     }
@@ -254,7 +254,7 @@
             color: var(--slider-on-active);
         }
 
-        &:dir(rtl) {
+        &:is([dir='rtl'], [dir='rtl'] *) {
             scale: -1 1;
         }
     }
@@ -304,7 +304,7 @@
         justify-content: center;
         translate: -50% 0;
 
-        &:dir(rtl) {
+        &:is([dir='rtl'], [dir='rtl'] *) {
             scale: -1 1;
         }
     }

resources/css/layout/list-detail.css

@@ -70,7 +70,7 @@
         min-block-size: var(--md-sys-measurement-space800);
     }
 
-    [data-md-list-detail-back] [data-md-icon]:dir(rtl) {
+    [data-md-list-detail-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) {
         transform: scaleX(-1);
     }
 

resources/css/layout/pane.css

@@ -69,7 +69,7 @@
         --md-layout-margin: 0px;
     }
 
-    [data-md-pane-back] [data-md-icon]:dir(rtl) {
+    [data-md-pane-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *) {
         transform: scaleX(-1);
     }
 }

resources/css/layout/scaffold.css

@@ -234,7 +234,7 @@
         }
     }
 
-    [data-md-scaffold-fab]:dir(rtl) {
+    [data-md-scaffold-fab]:is([dir='rtl'], [dir='rtl'] *) {
         inset-inline-end: max(
             var(--md-scaffold-fab-margin),
             var(--material-safe-left, env(safe-area-inset-left))

tests/Browser/ContainmentTest.php

@@ -631,7 +631,7 @@ it('fades the bottom sheet\'s scrim out on close, rather than making it vanish',
 it('slides the side sheet in from its own edge in a right-to-left page', function () {
     Route::middleware('web')->get('/drawer-rtl-probe', fn () => Blade::render(<<<'BLADE'
         <!DOCTYPE html>
-        <html lang="ar" dir="rtl">
+        <html dir="rtl">
             <head>
                 <x-theme-script />
                 @vite(config('livewire-material.showcase.vite'))
@@ -655,9 +655,10 @@ it('slides the side sheet in from its own edge in a right-to-left page', functio
     $page->click('button:has-text("Open")');
 
     // `side="end"` (the default) is the trailing edge — the *left* of a right-to-left page — so it
-    // slides in from off the left, not the right (the CSS `:dir(rtl)` mirror the Tailwind build
+    // slides in from off the left, not the right (the CSS mirror reads `[dir='rtl']` rather than
-    // rewrites to a `:lang()` list, hence `lang="ar"` here as well as `dir="rtl"`): caught well
+    // `:dir(rtl)`, plan step 39 — Vite's own minifier rewrote that to a `:lang()` list, same as
-    // before the 500ms spatial transition ends, it is still off-screen on the left.
+    // Tailwind's build did): caught well before the 500ms spatial transition ends, it is still
+    // off-screen on the left.
     $page->wait(0.05);
 
     $page->assertScript("getComputedStyle({$sheet}).display !== 'none'")

tests/Browser/LayoutTest.php

@@ -13,14 +13,11 @@ use Livewire\Livewire;
  */
 function layoutPage(string $body, int $width, int $height = 900, string $dir = 'ltr'): mixed
 {
-    // Until the Workbench leaves Tailwind, its build turns `:dir(rtl)` into a list of `:lang()`s, so a
-    // right-to-left page also says which language it is in.
-    $lang = $dir === 'rtl' ? 'ar' : 'en';
     $path = '/layout-probe/'.md5($body.$dir);
 
     Route::middleware('web')->get($path, fn () => Blade::render(<<<BLADE
         <!DOCTYPE html>
-        <html dir="{$dir}" lang="{$lang}">
+        <html dir="{$dir}" lang="en">
             <head>
                 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
                 <x-theme-script />

tests/Feature/Components/CarouselTest.php

@@ -192,7 +192,7 @@ it('offers previous and next buttons for fine pointers, always, or never', funct
         ->toBe(['display' => 'flex'])
         // The button carries no class of its own, and mirrors whole in RTL rather than through
         // an icon prop button.blade.php does not expose.
-        ->and($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:dir(rtl), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:dir(rtl)"))
+        ->and($carousel->declarations("[data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-previous]:is([dir='rtl'], [dir='rtl'] *), [data-md-carousel]:not([data-md-carousel='full-screen']) > [data-md-carousel-controls] > [data-md-carousel-next]:is([dir='rtl'], [dir='rtl'] *)"))
         ->toBe(['transform' => 'scaleX(-1)']);
 });
 

tests/Feature/Components/IconTest.php

@@ -56,7 +56,7 @@ it('draws its size from a stylesheet in the components layer', function () {
 
     expect($css)->toContain('@layer material.components')
         ->toContain('inline-size: var(--md-icon-size, 24px)')
-        ->toContain('[data-md-icon][data-md-mirror-rtl]:dir(rtl)')
+        ->toContain("[data-md-icon][data-md-mirror-rtl]:is([dir='rtl'], [dir='rtl'] *)")
         ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './components/icon.css';");
 });
 

tests/Feature/Components/ListDetailTest.php

@@ -87,7 +87,7 @@ it('shows one pane below expanded and both from it, at M3\'s fixed pane widths',
         ->toContain("@media (width >= 840px) {\n            grid-template-columns: 360px minmax(0, 1fr);\n            column-gap: var(--md-sys-measurement-space300);")
         ->toContain("@media (width >= 1200px) {\n            grid-template-columns: 412px minmax(0, 1fr);")
         ->toContain("@media (width < 840px) {\n        [data-md-list-detail]:not([data-md-selected]) > [data-md-list-detail-pane='detail'],\n        [data-md-list-detail][data-md-selected] > [data-md-list-detail-pane='list'] {\n            display: none;")
-        ->toContain('[data-md-list-detail-back] [data-md-icon]:dir(rtl)')
+        ->toContain("[data-md-list-detail-back] [data-md-icon]:is([dir='rtl'], [dir='rtl'] *)")
         ->and((string) file_get_contents(__DIR__.'/../../../resources/css/all.css'))->toContain("@import './layout/list-detail.css';")
         ->and((string) file_get_contents(__DIR__.'/../../../resources/js/material.js'))->toContain("import './layout.js'");
 });

tests/Feature/Components/MenuTest.php

@@ -381,7 +381,7 @@ it('restyles a submenu to open in place under its item inside the sheet, and can
             'overflow' => 'visible',
         ])
         ->and($css->declarations('[data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron]'))->toMatchArray(['rotate' => '90deg'])
-        ->and($css->declarations('[data-md-menu-sheet] [aria-expanded="true"] > [data-md-submenu-chevron]:dir(rtl)'))->toBe(['rotate' => '-90deg']);
+        ->and($css->declarations("[data-md-menu-sheet] [aria-expanded=\"true\"] > [data-md-submenu-chevron]:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['rotate' => '-90deg']);
 });
 
 it('draws the dropdown a select or a searchable choices field opens, the same family as a menu', function () {

tests/Feature/Components/OverlayTest.php

@@ -255,8 +255,8 @@ it('slides a side sheet out as it slid in, from its own edge in either direction
         ->toHaveKey('translate', 'var(--sheet-offset) 0')
         ->toHaveKey('transition-behavior', 'allow-discrete')
         ->not->toHaveKey('opacity')
-        ->and($css->declarations("[data-md-drawer-sheet][data-md-side='end']:dir(rtl)"))->toBe(['--sheet-offset' => '-100%'])
+        ->and($css->declarations("[data-md-drawer-sheet][data-md-side='end']:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['--sheet-offset' => '-100%'])
-        ->and($css->declarations("[data-md-drawer-sheet][data-md-side='start']:dir(rtl)"))->toBe(['--sheet-offset' => '100%'])
+        ->and($css->declarations("[data-md-drawer-sheet][data-md-side='start']:is([dir='rtl'], [dir='rtl'] *)"))->toBe(['--sheet-offset' => '100%'])
         ->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-sheet]', ['@starting-style']))->toBe(['translate' => 'var(--sheet-offset) 0'])
         ->and($css->declarations('[data-md-drawer-scrim]'))->toHaveKey('opacity', '0')
         ->and($css->declarations('[data-md-drawer][data-md-open] > [data-md-drawer-scrim]'))->toBe(['opacity' => '1']);

tests/Feature/Components/ProgressTest.php

@@ -113,8 +113,8 @@ it('takes the caller\'s size instead of its own, its class landing on the root u
 it('mirrors the linear indicator in a right-to-left document, unconditionally', function () {
     $css = ComponentStylesheet::read('progress');
 
-    expect($css->declarations('[data-md-progress]:not([data-md-circular]):dir(rtl)'))->toBe(['rotate' => '180deg'])
+    expect($css->declarations("[data-md-progress]:not([data-md-circular]):is([dir='rtl'], [dir='rtl'] *)"))->toBe(['rotate' => '180deg'])
-        ->and($css->has('[data-md-progress][data-md-circular]:dir(rtl)'))->toBeFalse();
+        ->and($css->has("[data-md-progress][data-md-circular]:is([dir='rtl'], [dir='rtl'] *)"))->toBeFalse();
 });
 
 it('follows a value bound in Alpine', function () {