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

Give a segmented list item a fill that reads against the page

Browse Source 
`ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`
(ListTokens.kt, C-21) was taken literally, but foundation/base.css
paints the page `surface` too — so a segmented list was invisible on any
default page. The token reads against a Compose scaffold, not against
this package's own page.

The tile is `surface-container` now, the step M3 names for a container
that has to read against the page, and what 1.x drew. Found in
SealShare: the files chosen for an upload list under the drop zone with
nothing to set them apart from it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 22:23:16 +02:00
co-authored by Claude Opus 5
parent 5800ab1fe1
commit 66d3d661e7
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/list-item.css
+9 -4
View File
@@ -20,7 +20,8 @@
* on-surface at the disabled-content opacity (38%) and blocks the pointer; the view drops the
* item's link entirely rather than leaving a focusable, activatable control behind it (C-02).
*
* `data-md-list="segmented"` items (M3 Expressive) are `surface` tiles (`ItemSegmentedContainerColor`,
* `data-md-list="segmented"` items (M3 Expressive) are `surface-container` tiles (one tone up from
* `ItemSegmentedContainerColor`, so they read against the package's own `surface` page;
* C-21), 4px corners that open to 16px at the list's own ends and while hovered (12px), pressed,
* focused or selected (16px) — the specs page's interaction-state expressive shapes (C-22). Leading
* icons there are drawn at 20px, not scaled down from 24 — list-item.blade.php passes `size` to
@@ -73,10 +74,14 @@
}
/* M3 Expressive's segmented list gives each item its own container: ListTokens.kt:201,
`ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`. Before the selected
rule, which outranks it on the same weight. */
`ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`. One tone up from that,
because the token reads against a Compose scaffold and this package paints the page
`surface` itself (foundation/base.css): a surface tile on a surface page is a list nobody
can see. `surface-container` is the step M3 names for a container that has to read against
the page, and what 1.x drew. Before the selected rule, which outranks it on the same
weight. */
[data-md-list='segmented'] > [data-md-list-item] {
--md-list-row-fill: var(--md-sys-color-surface);
--md-list-row-fill: var(--md-sys-color-surface-container);
background-color: var(--md-list-row-fill);
}
tests/Feature/Components/ListTest.php
+1 -1
View File
@@ -127,7 +127,7 @@ it('lays a row\'s state layer over its fill, so a selected or segmented row keep
->and($css->declarations('[data-md-list-row]:not([data-md-card]):has([data-md-list-open]:focus-visible)'))
->toHaveKey('background-color', 'color-mix(in srgb, currentColor calc(var(--md-sys-state-focus-state-layer-opacity) * 100%), var(--md-list-row-fill, transparent))')
->and($css->declarations(':where([data-md-list-row])'))->toBe(['--md-list-row-fill' => 'transparent'])
->and($css->declarations("[data-md-list='segmented'] > [data-md-list-item]"))->toHaveKey('--md-list-row-fill', 'var(--md-sys-color-surface)')
->and($css->declarations("[data-md-list='segmented'] > [data-md-list-item]"))->toHaveKey('--md-list-row-fill', 'var(--md-sys-color-surface-container)')
->and($css->declarations('[data-md-list-item][data-md-selected]'))->toHaveKey('--md-list-row-fill', 'var(--md-sys-color-secondary-container)')
->and(File::get(ComponentStylesheet::path('table')))->toContain('--md-list-row-fill: var(--md-sys-color-secondary-container);');