noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep the carousel label white over its scrim

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:20:26 +02:00
co-authored by Claude Fable 5.1
parent 24520402c1
commit 0d7489a995
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/carousel-item.blade.php
+4 -3
View File
@@ -8,8 +8,9 @@
`label` lays a short line of text over the bottom of the art, on a scrim, pinned to the `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 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 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 for under text on an image, and the scrim is `--md-sys-color-scrim` — black in every scheme,
contrast profile follow, rather than a literal white. 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 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 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 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)" 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)"
> >
<span class="truncate type-title-md text-inverse-on-surface translate-x-(--material-carousel-label-shift)">{{ $label }}</span> <span class="truncate type-title-md text-white translate-x-(--material-carousel-label-shift)">{{ $label }}</span>
</div> </div>
@endif @endif
</div> </div>
tests/Feature/Components/CarouselTest.php
+1 -1
View File
@@ -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('data-material-carousel-label')
->toContain('Lake Constance') ->toContain('Lake Constance')
->toContain('from-scrim/60') ->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') ->toContain('[&>img]:size-full [&>img]:object-cover')
->and((string) $this->blade('<x-carousel-item>A</x-carousel-item>')) ->and((string) $this->blade('<x-carousel-item>A</x-carousel-item>'))
->not->toContain('data-material-carousel-label'); ->not->toContain('data-material-carousel-label');