livewire-material/resources/css/components/list.css

/*
 * Rows a person can go into (`data-list-row`, resources/js/list-rows.js), and M3 Expressive lists.
 *
 * A row answers a pointer with M3's state layer — hover 8%, press and focus 10% — but not while the
 * pointer is on one of its own controls, which light only themselves. Hover only under
 * `(hover: hover)`, because a touch screen keeps the last hover after a tap. The opener draws no
 * focus ring inside a row; the row draws it, inset, so keyboard focus shows which row Enter opens.
 * `data-selected` is M3's selected list item, in secondary-container.
 *
 * Unlayered where a component paints its fill as a utility (`<x-card>`): anything in a @layer loses
 * to a utility whatever its specificity.
 *
 * Every selector that paints a row is `:where()`, so they all weigh nothing and the later rule
 * wins: the segmented list's own fill is declared first and a row's state layer, further down,
 * paints over it. Written any other way — outside the layer, or with its real specificity — the
 * fill would beat the state layer and a segmented row would answer nothing.
 */

@layer components {
    /*
     * M3 Expressive's segmented list gives each item its own container. ListTokens.kt:201 —
     * `ItemSegmentedContainerColor get() = ColorSchemeKeyTokens.Surface`.
     */
    :where([data-list='segmented'] > [data-list-item]) {
        background-color: var(--md-sys-color-surface);
    }

    /*
     * ListTokens.kt:30,36 — `DividerLeadingSpace` and `DividerTrailingSpace` are 16dp, so a
     * list's dividers are inset from both ends rather than full-bleed (`<x-list dividers>`).
     */
    :where([data-list][data-dividers] > [data-list-item]:not(:last-child))::after {
        content: '';
        position: absolute;
        inset-inline: 16px;
        bottom: 0;
        height: 1px;
        background-color: var(--md-sys-color-outline-variant);
        pointer-events: none;
    }

    :where([data-list-row]) {
        cursor: pointer;
        transition: background-color var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast),
            border-radius var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
    }

    @media (hover: hover) {
        :where([data-list-row]:not([data-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover))) {
            background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
        }
    }

    :where([data-list-row]:not([data-card]):has([data-list-open]:focus-visible)) {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
        outline: 3px solid var(--md-sys-color-secondary);
        outline-offset: -3px;
    }

    :where([data-list-row]:not([data-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active))) {
        background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
    }
}

[data-list-row] [data-list-open]:focus-visible {
    outline: none;
}

:is([data-list-row], [data-list-item])[data-selected]:not([data-card]) {
    background-color: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

/*
 * A card that opens answers with M3's state layer and one step of elevation, both written as one
 * box-shadow because the elevated card's rest level is a `shadow-elevation-1` utility that only
 * an unlayered rule can replace. Per-state elevation from the token files (the specs page's
 * Hovered / Focused / Pressed rows): elevated 1 → 2 hovered → 1 focused and pressed; filled and
 * outlined 0 → 1 hovered → 0. Its corner does not move: M3 gives a card one shape and specifies
 * shape morph for buttons, FABs and list items, never for cards.
 */
[data-card][data-list-row] {
    transition-property: background-color, box-shadow;
    transition-duration: var(--md-sys-motion-spatial-default-duration);
    transition-timing-function: var(--md-sys-motion-spatial-default);
}

@media (hover: hover) {
    [data-card][data-list-row]:not([data-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover)) {
        box-shadow: var(--md-sys-elevation-1), inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    }

    [data-card='elevated'][data-list-row]:not([data-dragged]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):hover)) {
        box-shadow: var(--md-sys-elevation-2), inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
    }
}

[data-card][data-list-row]:not([data-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active)) {
    box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

[data-card='elevated'][data-list-row]:not([data-dragged]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-list-open]):active)) {
    box-shadow: var(--md-sys-elevation-1), inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}

/*
 * M3's dragged card (`<x-card data-dragged>`): the highest elevation a card ever takes, under the
 * 16% dragged state layer. The token files' per-state elevation — elevated Level4 (8dp), filled
 * and outlined Level3 (6dp) — and md.sys.state.dragged-state-layer-opacity from tokens/state.css
 * (docs/reference/m3/components-actions-communication-containment.md § Cards → Specs). Written as
 * one box-shadow with the row's other states, and named in the hover and press rules above so the
 * card a pointer is holding stays at its dragged level rather than falling back to a press.
 *
 * The application owns the attribute: it sets `data-dragged` when its drag starts and takes it off
 * on drop, since nothing in the browser tells a card it is being carried. M3 asks for a
 * single-pointer alternative beside any drag, so give the card a menu with the same actions.
 */
[data-card][data-dragged] {
    box-shadow: var(--md-sys-elevation-3),
        inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%), transparent);
}

[data-card='elevated'][data-dragged] {
    box-shadow: var(--md-sys-elevation-4),
        inset 0 0 0 100vmax color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%), transparent);
}

/* Focus is on the card itself when the card is the tab stop (`<x-card actionable>`). */
[data-card][data-list-row]:is(:focus-visible, :has([data-list-open]:focus-visible)) {
    outline: 3px solid var(--md-sys-color-secondary);
    outline-offset: 2px;
}

/*
 * M3 Expressive's segmented list (`<x-list segmented>`): each item its own surface, 2px apart,
 * extra-small corners that open to medium while hovered and to large at the ends and while
 * focused, pressed or selected — the specs page's interaction-state expressive shapes, and
 * ListTokens' `ItemPressedContainerExpressiveShape` / `ItemDraggedContainerExpressiveShape`
 * (androidx Compose Material 3, Apache-2.0).
 */
[data-list='segmented'] > [data-list-item] {
    border-radius: var(--md-sys-shape-corner-xs);
}

[data-list='segmented'] > [data-list-item]:first-child {
    border-start-start-radius: var(--md-sys-shape-corner-lg);
    border-start-end-radius: var(--md-sys-shape-corner-lg);
}

[data-list='segmented'] > [data-list-item]:last-child {
    border-end-start-radius: var(--md-sys-shape-corner-lg);
    border-end-end-radius: var(--md-sys-shape-corner-lg);
}

@media (hover: hover) {
    [data-list='segmented'] > [data-list-item][data-list-row]:hover {
        border-radius: var(--md-sys-shape-corner-md);
    }
}

[data-list='segmented'] > [data-list-item]:is([data-selected], [data-list-row]:active, [data-list-row]:has([data-list-open]:focus-visible)) {
    border-radius: var(--md-sys-shape-corner-lg);
}