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

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='start']: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']: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'])
-        ->and($css->has('[data-md-progress][data-md-circular]:dir(rtl)'))->toBeFalse();
+    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]:is([dir='rtl'], [dir='rtl'] *)"))->toBeFalse();
 });
 
 it('follows a value bound in Alpine', function () {