Rewrite list and list-item without Tailwind
Plan step 36 (containment group, last of its four components): moves into resources/css/components/list.css (the container: display, the 2px segmented gap) and list-item.css (everything else — anatomy, states, the segmented item's own background/corner, and the row interaction pattern list.css used to carry). One commit for both: list-item.css keys heavily on list's own data-md-list="segmented" attribute and the two files are designed together. Kept, now on data-md-* hooks: selectable/selection listbox semantics (role="listbox"/"option", aria-selected, a trailing check as the second cue, C-03), a disabled item's link dropped entirely rather than left focusable (C-02), the segmented row's own state layer no longer racing its background through an unlayered escape hatch (C-08 doesn't recur — nothing here is unlayered), leading video/icon/avatar slots, three-line top alignment and 12px vertical padding (C-15), 16px leading/trailing gap (C-14), dividers inset 16px (C-16), the segmented list's surface fill (C-21) and its hover/focus/pressed/selected corner morph (C-22). The segmented icon size (20px) is now the `size` prop `<x-icon>` already takes from the parent's @aware(['segmented']), replacing the CSS override C-26's fix suggested. data-md-lines="1|2|3" replaces the old line-count classes; data-md-list-item-* hooks replace every other class list. Hooks renamed data-list -> data-md-list, data-list-item -> data-md-list-item, data-dividers -> data-md-dividers, data-selected -> data-md-selected, the generic data-list-row/-open row pattern's last consumer (list-item) moved, so list-rows.js drops the transitional dual-hook fallback the card commit added. table.css now @imports list-item.css, completing what its own comment already claimed (a row answers a pointer as a list row does) under the new per-component-import architecture. Imported from the Containment block of components.css; leaves tailwind.css, which now carries only dialog.css for this group. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
5cb11cd127
commit
9ff5a7a809
@@ -1,163 +1,27 @@
|
||||
/*
|
||||
* Rows a person can go into (`data-list-row`, resources/js/list-rows.js), and M3 Expressive lists.
|
||||
* <x-list>: `<x-list-item>`s, one under another.
|
||||
*
|
||||
* 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.
|
||||
* 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.
|
||||
*
|
||||
* 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.
|
||||
* `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 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);
|
||||
@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;
|
||||
}
|
||||
|
||||
/*
|
||||
* 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-md-list='segmented'] {
|
||||
gap: var(--md-sys-measurement-space25);
|
||||
}
|
||||
}
|
||||
|
||||
[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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user