From bae1df09dab06e8de8bede827554de46fe2575e5 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Tue, 15 Sep 2026 22:23:16 +0200 Subject: [PATCH] Give a segmented list item a fill that reads against the page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `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) --- resources/css/components/list-item.css | 13 +++++++++---- tests/Feature/Components/ListTest.php | 2 +- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/resources/css/components/list-item.css b/resources/css/components/list-item.css index d48db7ec..2b0181a0 100644 --- a/resources/css/components/list-item.css +++ b/resources/css/components/list-item.css @@ -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); } diff --git a/tests/Feature/Components/ListTest.php b/tests/Feature/Components/ListTest.php index eb47fa13..05c86ec8 100644 --- a/tests/Feature/Components/ListTest.php +++ b/tests/Feature/Components/ListTest.php @@ -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);');