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

`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>

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);
     }

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);');