/*
 * <x-list>: `<x-list-item>`s, one under another.
 *
 * Plain by default; `data-md-list="segmented"` is M3 Expressive's list, each item its own surface
 * tile `space25` (2px) apart (`SegmentedGap`, `ListTokens.kt`, androidx Compose Material 3,
 * Apache-2.0) — the item's own background, corner and interaction states are list-item.css's,
 * since they are the item's to draw, not the list's.
 *
 * `selectable`/`selection` switch the container's role between `list` and `listbox`
 * (list.blade.php; docs/reference/m3/components-actions-communication-containment.md
 * § Lists → Accessibility, C-03) — a role takes no CSS of its own.
 */

@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;

@import './list-item.css';

@layer material.components {
    [data-md-list] {
        display: flex;
        flex-direction: column;
    }

    [data-md-list='segmented'] {
        gap: var(--md-sys-measurement-space25);
    }
}