From 0d7489a99533c5f6c4e1f3ed71dfde439b32dfed Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 06:20:26 +0200 Subject: [PATCH] Keep the carousel label white over its scrim The scrim is --md-sys-color-scrim, black in every scheme, theme and contrast level, so the ink over it is the absolute the theme keeps rather than inverse-on-surface, which is dark in a dark scheme (containment C-25, revisited). Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/views/components/carousel-item.blade.php | 7 ++++--- tests/Feature/Components/CarouselTest.php | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/resources/views/components/carousel-item.blade.php b/resources/views/components/carousel-item.blade.php index 1dc80f68..99ba077b 100644 --- a/resources/views/components/carousel-item.blade.php +++ b/resources/views/components/carousel-item.blade.php @@ -8,8 +8,9 @@ `label` lays a short line of text over the bottom of the art, on a scrim, pinned to the item's visible edge and fading out as the item narrows — Compose's carousel sample, which fades its label chip in once the mask is wide enough to hold it. The scrim is what M3 asks - for under text on an image; the text itself is `inverse-on-surface`, a role a scheme and a - contrast profile follow, rather than a literal white. + for under text on an image, and the scrim is `--md-sys-color-scrim` — black in every scheme, + theme and contrast level — so its ink is the one absolute the theme keeps, `white`; a role + (`inverse-on-surface`) is dark ink in a dark scheme and fails on the scrim there. A focusable `group` with `aria-roledescription="slide"`, named "n of m" by the carousel around it. M3 puts the tab stop on the item, not on the row: Tab reaches the first item, the @@ -65,7 +66,7 @@ data-material-carousel-label class="pointer-events-none absolute inset-x-0 bottom-0 flex bg-linear-to-t from-scrim/60 to-transparent px-4 pt-10 pb-4 opacity-(--material-carousel-label)" > - {{ $label }} + {{ $label }} @endif diff --git a/tests/Feature/Components/CarouselTest.php b/tests/Feature/Components/CarouselTest.php index b66d932a..60e7a894 100644 --- a/tests/Feature/Components/CarouselTest.php +++ b/tests/Feature/Components/CarouselTest.php @@ -151,7 +151,7 @@ it('lays a label over an item on a scrim, and passes attributes to the item', fu ->toContain('data-material-carousel-label') ->toContain('Lake Constance') ->toContain('from-scrim/60') - ->toContain('type-title-md text-inverse-on-surface') + ->toContain('type-title-md text-white') ->toContain('[&>img]:size-full [&>img]:object-cover') ->and((string) $this->blade('A')) ->not->toContain('data-material-carousel-label');