diff --git a/resources/css/components/carousel.css b/resources/css/components/carousel.css
index 4e0f4dcd..a1ad612c 100644
--- a/resources/css/components/carousel.css
+++ b/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-next]: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]:is([dir='rtl'], [dir='rtl'] *) {
transform: scaleX(-1);
}
}
diff --git a/resources/css/components/chip-set.css b/resources/css/components/chip-set.css
index bbe7a84e..f6babbc1 100644
--- a/resources/css/components/chip-set.css
+++ b/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);
}
diff --git a/resources/css/components/drawer.css b/resources/css/components/drawer.css
index 9ed13e71..1afca009 100644
--- a/resources/css/components/drawer.css
+++ b/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%;
}
diff --git a/resources/css/components/icon.css b/resources/css/components/icon.css
index 8613afe4..9e89c25d 100644
--- a/resources/css/components/icon.css
+++ b/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);
}
}
diff --git a/resources/css/components/menu.css b/resources/css/components/menu.css
index b3fbeabb..e7f391a4 100644
--- a/resources/css/components/menu.css
+++ b/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;
}
}
diff --git a/resources/css/components/navigation-rail.css b/resources/css/components/navigation-rail.css
index eb97f648..4c2a3e9c 100644
--- a/resources/css/components/navigation-rail.css
+++ b/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 {
diff --git a/resources/css/components/progress.css b/resources/css/components/progress.css
index 483f0feb..f21832b6 100644
--- a/resources/css/components/progress.css
+++ b/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;
}
diff --git a/resources/css/components/slider.css b/resources/css/components/slider.css
index 01583e9f..6b0c3278 100644
--- a/resources/css/components/slider.css
+++ b/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;
}
}
diff --git a/resources/css/layout/list-detail.css b/resources/css/layout/list-detail.css
index 4ef0a1f7..112bca71 100644
--- a/resources/css/layout/list-detail.css
+++ b/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);
}
diff --git a/resources/css/layout/pane.css b/resources/css/layout/pane.css
index ec3704b1..c539c783 100644
--- a/resources/css/layout/pane.css
+++ b/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);
}
}
diff --git a/resources/css/layout/scaffold.css b/resources/css/layout/scaffold.css
index 2f652adb..75638266 100644
--- a/resources/css/layout/scaffold.css
+++ b/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))
diff --git a/tests/Browser/ContainmentTest.php b/tests/Browser/ContainmentTest.php
index 5460e094..53f432de 100644
--- a/tests/Browser/ContainmentTest.php
+++ b/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'
-
+
@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
- // rewrites to a `:lang()` list, hence `lang="ar"` here as well as `dir="rtl"`): caught well
- // before the 500ms spatial transition ends, it is still off-screen on the left.
+ // slides in from off the left, not the right (the CSS mirror reads `[dir='rtl']` rather than
+ // `:dir(rtl)`, plan step 39 — Vite's own minifier rewrote that to a `:lang()` list, same as
+ // 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'")
diff --git a/tests/Browser/LayoutTest.php b/tests/Browser/LayoutTest.php
index 8b515c62..d57f824b 100644
--- a/tests/Browser/LayoutTest.php
+++ b/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(<<
-
+
diff --git a/tests/Feature/Components/CarouselTest.php b/tests/Feature/Components/CarouselTest.php
index 5827bff6..633a53ce 100644
--- a/tests/Feature/Components/CarouselTest.php
+++ b/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)']);
});
diff --git a/tests/Feature/Components/IconTest.php b/tests/Feature/Components/IconTest.php
index d9adabe9..0b632411 100644
--- a/tests/Feature/Components/IconTest.php
+++ b/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';");
});
diff --git a/tests/Feature/Components/ListDetailTest.php b/tests/Feature/Components/ListDetailTest.php
index 4babf90f..e795eabf 100644
--- a/tests/Feature/Components/ListDetailTest.php
+++ b/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'");
});
diff --git a/tests/Feature/Components/MenuTest.php b/tests/Feature/Components/MenuTest.php
index 8d41c906..00d85d4d 100644
--- a/tests/Feature/Components/MenuTest.php
+++ b/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 () {
diff --git a/tests/Feature/Components/OverlayTest.php b/tests/Feature/Components/OverlayTest.php
index 8985c8bf..1d128740 100644
--- a/tests/Feature/Components/OverlayTest.php
+++ b/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']);
diff --git a/tests/Feature/Components/ProgressTest.php b/tests/Feature/Components/ProgressTest.php
index 2e1f03a2..998d6660 100644
--- a/tests/Feature/Components/ProgressTest.php
+++ b/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 () {