noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rewrite list and list-item without Tailwind

Browse Source 
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
2026-09-14 20:37:38 +02:00
co-authored by Claude Sonnet 5
parent 5cb11cd127
commit 9ff5a7a809
10 changed files with 348 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+2
View File
@@ -59,5 +59,7 @@
@import './components/divider.css';
@import './components/collapse.css';
@import './components/card.css';
@import './components/list-item.css';
@import './components/list.css';
/* Navigation */
resources/css/components/list-item.css
+237
View File
@@ -0,0 +1,237 @@
/*
* <x-list-item>: a headline with what leads it, what supports it and what trails it, one- two- or
* three-line by `data-md-lines` (56/72/88px, `ListTokens.kt:180,323,347`, androidx Compose
* Material 3, Apache-2.0) — the tallest element sets the height, and a three-line item top-aligns
* rather than centring (docs/reference/m3/components-actions-communication-containment.md
* § Lists → Specs). Leading/trailing gap and container padding are both `space200` (16px,
* `ItemLeadingSpace`/`ItemTrailingSpace`/container padding, C-14).
*
* `data-md-list-row` (`resources/js/list-rows.js`, shared with `<x-card>` and an application's own
* table rows) and `[data-md-list-open]:focus-visible` answer with an 8%/10% on-surface state layer
* and a 3px secondary inset ring — excluded on `[data-md-card]`, which draws its own tint through
* the shared `md-state-layer` class instead (card.css). `data-md-selected` is M3's selected item,
* secondary-container filled, which also dims the description/overline/trailing/icon colour rules
* below since they exclude it — the container's own colour takes over by inheritance. A selected
* option draws a second cue, a trailing check, so selection is never colour alone (C-03).
* `aria-disabled` drops every colour to 38% on-surface 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`,
* 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
* `<x-icon>` from the parent's `@aware(['segmented'])`, so no CSS override is needed here (C-26).
*
* `data-md-dividers` on the list insets its rule 16px from both ends (`DividerLeadingSpace`/
* `DividerTrailingSpace`, C-16) rather than full-bleed.
*
* Leading media: `data-md-list-item-avatar` is 40px, full corner, initials in primary-container
* when it is a `<span>`, an image otherwise; `data-md-list-item-image` is a 56px small-corner
* thumbnail; `data-md-list-item-video` is M3's leading video in its two sizes,
* `data-md-size="sm"` 100×56px (a two-line item) or `"lg"` 114×64px (a three-line item),
* `LeadingVideoSmall`/`LeadingVideoLarge`.
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './icon.css';
@layer material.components {
[data-md-list-item] {
position: relative;
display: flex;
align-items: center;
gap: var(--md-sys-measurement-space200);
padding-inline: var(--md-sys-measurement-space200);
color: var(--md-sys-color-on-surface);
}
[data-md-list-item][data-md-lines='1'] {
min-height: 56px;
padding-block: var(--md-sys-measurement-space100);
}
[data-md-list-item][data-md-lines='2'] {
min-height: 72px;
padding-block: var(--md-sys-measurement-space100);
}
[data-md-list-item][data-md-lines='3'] {
min-height: 88px;
padding-block: calc((var(--md-sys-measurement-space100) + var(--md-sys-measurement-space200)) / 2);
align-items: flex-start;
}
[data-md-list-item][data-md-selected] {
background-color: var(--md-sys-color-secondary-container);
color: var(--md-sys-color-on-secondary-container);
}
[data-md-list-item][aria-disabled='true'] {
pointer-events: none;
}
[data-md-list-item][aria-disabled='true'] :is([data-md-list-item-title], [data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
[data-md-list-item]:not([data-md-selected], [aria-disabled='true']) :is([data-md-list-item-overline], [data-md-list-item-description], [data-md-list-item-trailing], [data-md-list-item-icon]) {
color: var(--md-sys-color-on-surface-variant);
}
[data-md-list-item-leading],
[data-md-list-item-end] {
display: flex;
flex-shrink: 0;
align-items: center;
}
[data-md-list-item-end] {
gap: var(--md-sys-measurement-space50);
}
[data-md-list-item-video] {
flex-shrink: 0;
overflow: hidden;
border-radius: var(--md-sys-shape-corner-sm);
background-color: var(--md-sys-color-surface-container-highest);
& > * {
width: 100%;
height: 100%;
object-fit: cover;
}
}
[data-md-list-item-video][data-md-size='sm'] {
width: 100px;
height: 56px;
}
[data-md-list-item-video][data-md-size='lg'] {
width: 114px;
height: 64px;
}
[data-md-list-item-avatar] {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--md-sys-shape-corner-full);
object-fit: cover;
}
span[data-md-list-item-avatar] {
display: grid;
place-items: center;
background-color: var(--md-sys-color-primary-container);
color: var(--md-sys-color-on-primary-container);
font: var(--md-sys-typescale-title-md);
letter-spacing: var(--md-sys-typescale-title-md-tracking);
}
[data-md-list-item-image] {
flex-shrink: 0;
width: 56px;
height: 56px;
border-radius: var(--md-sys-shape-corner-sm);
object-fit: cover;
}
[data-md-list-item-content] {
min-width: 0;
flex: 1 1 0%;
}
[data-md-list-item-overline] {
font: var(--md-sys-typescale-label-sm);
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
}
[data-md-list-item-title] {
display: block;
overflow: hidden;
outline: none;
font: var(--md-sys-typescale-body-lg);
letter-spacing: var(--md-sys-typescale-body-lg-tracking);
text-overflow: ellipsis;
white-space: nowrap;
}
[data-md-list-item-description] {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
font: var(--md-sys-typescale-body-md);
letter-spacing: var(--md-sys-typescale-body-md-tracking);
}
[data-md-list-item-trailing] {
flex-shrink: 0;
font: var(--md-sys-typescale-label-sm);
letter-spacing: var(--md-sys-typescale-label-sm-tracking);
}
[data-md-list][data-md-dividers] > [data-md-list-item]:not(:last-child)::after {
content: '';
position: absolute;
inset-inline: var(--md-sys-measurement-space200);
bottom: 0;
height: 1px;
background-color: var(--md-sys-color-outline-variant);
pointer-events: none;
}
[data-md-list-row] {
cursor: pointer;
transition-property: background-color, border-radius;
transition-duration: var(--md-sys-motion-effects-fast-duration), var(--md-sys-motion-spatial-fast-duration);
transition-timing-function: var(--md-sys-motion-effects-fast), var(--md-sys-motion-spatial-fast);
}
@media (hover: hover) {
[data-md-list-row]:not([data-md-card]):hover:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):hover)) {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}
}
[data-md-list-row]:not([data-md-card]):has([data-md-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;
}
[data-md-list-row]:not([data-md-card]):active:not(:has(:is(a, button, input, select, textarea, label, summary):not([data-md-list-open]):active)) {
background-color: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
}
[data-md-list-row] [data-md-list-open]:focus-visible {
outline: none;
}
[data-md-list='segmented'] > [data-md-list-item] {
background-color: var(--md-sys-color-surface);
border-radius: var(--md-sys-shape-corner-xs);
}
[data-md-list='segmented'] > [data-md-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-md-list='segmented'] > [data-md-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-md-list='segmented'] > [data-md-list-item][data-md-list-row]:hover {
border-radius: var(--md-sys-shape-corner-md);
}
}
[data-md-list='segmented'] > [data-md-list-item]:is([data-md-selected], [data-md-list-row]:active, [data-md-list-row]:has([data-md-list-open]:focus-visible)) {
border-radius: var(--md-sys-shape-corner-lg);
}
}
resources/css/components/list.css
+18 -154
View File
@@ -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);
}
resources/css/components/table.css
+4 -1
View File
@@ -8,7 +8,8 @@
* outline-variant rule, body cells in body-medium between outline-variant rules — the role itself,
* never a fraction of it, since M3 reserves opacity for state layers and disabled. A selected row
* (`aria-selected="true"`) is secondary-container. A row that opens something is `data-md-list-row`
* and answers a pointer as a list row does (components/list.css).
* and answers a pointer as a list row does (components/list-item.css, shared with `<x-card>` and
* `<x-list-item>`).
*
* A row is 52px: 16px above and below a body-medium line, 12px beside each cell. Density is never
* applied by itself — "don't apply density by default; offer an explicit density opt-in instead,
@@ -21,6 +22,8 @@
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './list-item.css';
@layer material.components {
/* `position: relative` makes the table the containing block for anything absolute inside it —
a visually hidden header label, a tooltip. Without it they escape the scroll box and widen a
resources/css/tailwind.css
-1
View File
@@ -18,7 +18,6 @@
@import './tokens/utilities.css';
/* Containment — leaving in step 36 */
@import './components/list.css';
@import './components/dialog.css';
/* Navigation — leaving in step 36 */
resources/js/list-rows.js
+14 -24
View File
@@ -1,37 +1,27 @@
/**
* A row opens from anywhere on it.
*
* A row is `data-md-list-row` (or the older, unprefixed `data-list-row`, while a component that
* has not yet moved off it still renders it) — an `<x-list-item>`, an `<x-card>`, a table row —
* and exactly one control inside it is its opener, `data-md-list-open` (or `data-list-open`): the
* title button that opens a sheet, or the link that goes to the item's page. A click anywhere else
* on the row is handed to the opener, so the whole row is the target while the opener stays a real
* control — the tab stop, the name a screen reader reads, and the owner of the `wire:click` or the
* `href`. The row's other controls keep their own clicks. How a row looks while that happens is
* resources/css/components/card.css and list.css.
* A row is `data-md-list-row` — an `<x-list-item>`, an `<x-card>`, a table row — and exactly one
* control inside it is its opener, `data-md-list-open`: the title button that opens a sheet, or
* the link that goes to the item's page. A click anywhere else on the row is handed to the opener,
* so the whole row is the target while the opener stays a real control — the tab stop, the name a
* screen reader reads, and the owner of the `wire:click` or the `href`. The row's other controls
* keep their own clicks. How a row looks while that happens is
* resources/css/components/card.css and list-item.css.
*
* Not a stretched link (`::after { inset: 0 }`): Safari makes no containing block of a <tr>, so in
* a table every overlay would cover the whole table; and not one <button> around the row, which
* could hold no other buttons. The listeners sit on `document` and are added once.
*
* A row that is also `data-md-list-actionable` (or `data-list-actionable`) is M3's **directly
* actionable card** (`<x-card actionable>`): the card is the one tab stop, so Enter and Space on
* the card reach the opener, and the card's other actions follow it in the tab order with their
* own keys. The opener itself carries `tabindex="-1"`, which the card's caller writes.
* A row that is also `data-md-list-actionable` is M3's **directly actionable card** (`<x-card
* actionable>`): the card is the one tab stop, so Enter and Space on the card reach the opener,
* and the card's other actions follow it in the tab order with their own keys. The opener itself
* carries `tabindex="-1"`, which the card's caller writes.
*/
/** Anything that answers a click itself — the row's own controls, and the opener. */
const CONTROLS = 'a, button, input, select, textarea, label, summary, [contenteditable]'
/** A row, under either its current or its older hook. */
const ROW = '[data-md-list-row], [data-list-row]'
/** A row's opener, under either its current or its older hook. */
const OPENER = '[data-md-list-open], [data-list-open]'
/** A directly actionable row, under either its current or its older hook. */
const ACTIONABLE = '[data-md-list-actionable], [data-list-actionable]'
/** How far a pointer may travel between press and release and still be a click. */
const DRAG_PX = 6
@@ -56,7 +46,7 @@ const openerFor = (event) => {
return null
}
const opener = event.target.closest(ROW)?.querySelector(OPENER)
const opener = event.target.closest('[data-md-list-row]')?.querySelector('[data-md-list-open]')
if (!opener) {
return null
@@ -122,11 +112,11 @@ document.addEventListener('keydown', (event) => {
return
}
if (event.defaultPrevented || !(event.target instanceof Element) || !event.target.matches(ACTIONABLE)) {
if (event.defaultPrevented || !(event.target instanceof Element) || !event.target.matches('[data-md-list-actionable]')) {
return
}
const opener = event.target.querySelector(OPENER)
const opener = event.target.querySelector('[data-md-list-open]')
if (!opener) {
return
resources/views/components/list-item.blade.php
+31 -43
View File
@@ -7,12 +7,12 @@
`description` under it (body-medium, up to two lines). The leading element is one of `icon`,
`avatar` (an image URL, or initials in primary-container), `image` (a 56px thumbnail) or
`video`, or a `leading` slot (a checkbox, a switch). The trailing element is `trailing` text
(label-small), `icon-right`, or an `end` slot for controls (a menu, a switch). One-, two- and three-line
heights (56, 72, 88px) follow from what is given, 16px between the item and what leads or
trails it, and a three-line item top-aligns rather than centring — M3 aligns an item middle
"by default, top-aligned if the item is 88dp+ or has 3+ lines of text". Its icons are 24px,
or 20px in a `segmented` list, which is M3 Expressive's (ListTokens, androidx Compose
Material 3, Apache-2.0).
(label-small), `icon-right`, or an `end` slot for controls (a menu, a switch). One-, two- and
three-line items (`data-md-lines`, 56, 72, 88px) follow from what is given, 16px between the
item and what leads or trails it, and a three-line item top-aligns rather than centring — M3
aligns an item middle "by default, top-aligned if the item is 88dp+ or has 3+ lines of text".
Its icons are 24px, or 20px in a `segmented` list, which is M3 Expressive's (ListTokens,
androidx Compose Material 3, Apache-2.0).
`video` is M3's leading media in its landscape size — a poster URL, or a `<x-slot:video>`
holding a `<video>` or a thumbnail with a play badge. ListTokens gives it two: 100×56px in a
@@ -27,9 +27,9 @@
(docs/reference/m3/components-actions-communication-containment.md § Lists → Anatomy, Specs).
`link` makes the whole item the link. Otherwise, to make it open something while its trailing
controls keep their own presses, give it `data-list-row` and put `data-list-open` on the one
control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected item,
in secondary-container; `disabled` greys it to 38%, drops its link and announces it
controls keep their own presses, give it `data-md-list-row` and put `data-md-list-open` on the
one control that opens — see resources/js/list-rows.js. `selected` (true) is M3's selected
item, in secondary-container; `disabled` greys it to 38%, drops its link and announces it
`aria-disabled` — M3's states model treats disabled as not interactive, so a disabled item
answers neither the pointer nor the keyboard.
@@ -81,35 +81,23 @@
// ListTokens.kt:153,156,332,335 — ItemLeading/TrailingIconExpressiveSize = 20dp against the
// baseline 24dp. At 20px the symbol is drawn from the 20 optical cut, not the 24 scaled down.
$iconSize = $segmented ? 'size-5' : 'size-6';
$optical = $segmented ? '20' : '24';
$iconSize = $segmented ? 20 : 24;
@endphp
<div
role="{{ $option ? 'option' : 'listitem' }}"
@if ($option) aria-selected="{{ $selected ? 'true' : 'false' }}" @elseif ($selected) aria-current="true" @endif
data-list-item
@if ($isLink) data-list-row @endif
@if ($selected) data-selected @endif
data-md-list-item
data-md-lines="{{ $lines + 1 }}"
@if ($isLink) data-md-list-row @endif
@if ($selected) data-md-selected @endif
@if ($disabled) aria-disabled="true" @endif
{{ $attributes->class([
'relative flex gap-4 px-4 text-on-surface',
'items-center' => $lines !== 2,
'items-start' => $lines === 2,
'min-h-14 py-2' => $lines === 0,
'min-h-18 py-2' => $lines === 1,
'min-h-22 py-3' => $lines === 2,
'pointer-events-none text-on-surface/38' => $disabled,
]) }}
{{ $attributes }}
>
@isset($leading)
<div class="flex shrink-0 items-center">{{ $leading }}</div>
<div data-md-list-item-leading>{{ $leading }}</div>
@elseif ($hasVideo)
<div @class([
'shrink-0 overflow-hidden rounded-corner-sm bg-surface-container-highest *:size-full *:object-cover',
'h-16 w-28.5' => $videoLarge,
'h-14 w-25' => ! $videoLarge,
])>
<div data-md-list-item-video data-md-size="{{ $videoLarge ? 'lg' : 'sm' }}">
@if ($video instanceof \Illuminate\View\ComponentSlot)
{{ $video }}
@else
@@ -118,48 +106,48 @@
</div>
@elseif ($avatar)
@if ($initials)
<span class="grid size-10 shrink-0 place-items-center rounded-corner-full bg-primary-container type-title-md text-on-primary-container" aria-hidden="true">{{ $avatar }}</span>
<span data-md-list-item-avatar aria-hidden="true">{{ $avatar }}</span>
@else
<img src="{{ $avatar }}" alt="" class="size-10 shrink-0 rounded-corner-full object-cover" />
<img src="{{ $avatar }}" alt="" data-md-list-item-avatar />
@endif
@elseif ($image)
<img src="{{ $image }}" alt="" class="size-14 shrink-0 rounded-corner-sm object-cover" />
<img src="{{ $image }}" alt="" data-md-list-item-image />
@elseif ($icon)
<x-livewire-material::icon :name="$icon" :optical="$optical" :class="\Illuminate\Support\Arr::toCssClasses([$iconSize, 'text-on-surface-variant' => ! $selected && ! $disabled])" />
<x-livewire-material::icon :name="$icon" :size="$iconSize" data-md-list-item-icon />
@endif
<div class="min-w-0 flex-1">
<div data-md-list-item-content>
@if ($overline)
<p @class(['type-label-sm', 'text-on-surface-variant' => ! $selected])>{{ $overline }}</p>
<p data-md-list-item-overline>{{ $overline }}</p>
@endif
@if ($isLink)
<a
href="{{ $link }}"
data-list-open
data-md-list-open
data-md-list-item-title
@if ($external) target="_blank" rel="noopener" @elseif (! $noWireNavigate) wire:navigate @endif
class="block truncate type-body-lg outline-none"
>{{ $title ?? $slot }}</a>
@else
<p class="truncate type-body-lg">{{ $title ?? $slot }}</p>
<p data-md-list-item-title>{{ $title ?? $slot }}</p>
@endif
@if ($description)
<p @class(['line-clamp-2 type-body-md', 'text-on-surface-variant' => ! $selected])>{{ $description }}</p>
<p data-md-list-item-description>{{ $description }}</p>
@endif
</div>
@isset($end)
<div class="flex shrink-0 items-center gap-1">{{ $end }}</div>
<div data-md-list-item-end>{{ $end }}</div>
@endisset
@if ($trailing)
<span @class(['shrink-0 type-label-sm', 'text-on-surface-variant' => ! $selected])>{{ $trailing }}</span>
<span data-md-list-item-trailing>{{ $trailing }}</span>
@endif
@if ($iconRight)
<x-livewire-material::icon :name="$iconRight" :optical="$optical" :class="\Illuminate\Support\Arr::toCssClasses([$iconSize, 'text-on-surface-variant' => ! $selected && ! $disabled])" />
<x-livewire-material::icon :name="$iconRight" :size="$iconSize" data-md-list-item-icon />
@elseif ($check)
<x-livewire-material::icon name="check" :optical="$optical" :class="$iconSize" />
<x-livewire-material::icon name="check" :size="$iconSize" />
@endif
</div>
resources/views/components/list.blade.php
+4 -7
View File
@@ -16,7 +16,7 @@
selection is never colour alone; give the items a leading checkbox or radio instead and pass
`icon-right` to keep the check off.
For keyboard walking between rows, `j`/`k` or arrows, the application can use `data-list`
For keyboard walking between rows, `j`/`k` or arrows, the application can use `data-md-list`
(resources/js/list-rows.js marks rows; a list keyboard arrives with the list-detail pane).
`label` names the list. --}}
@@ -39,13 +39,10 @@
<div
role="{{ $selection === null ? 'list' : 'listbox' }}"
@if ($selection === 'multi') aria-multiselectable="true" @endif
data-list="{{ $segmented ? 'segmented' : 'plain' }}"
@if ($dividers && ! $segmented) data-dividers @endif
data-md-list="{{ $segmented ? 'segmented' : 'plain' }}"
@if ($dividers && ! $segmented) data-md-dividers @endif
@if ($label) aria-label="{{ $label }}" @endif
{{ $attributes->class([
'flex flex-col',
'gap-0.5' => $segmented,
]) }}
{{ $attributes }}
>
{{ $slot }}
</div>
tests/Feature/Components/ContainmentStylesheetsTest.php
+2
View File
@@ -19,6 +19,8 @@ dataset('containment components', [
'divider',
'collapse',
'card',
'list',
'list-item',
]);
/**
tests/Feature/Components/ListTest.php
+36 -33
View File
@@ -1,58 +1,60 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('draws a plain list, with dividers on request', function () {
expect((string) $this->blade('<x-list label="Files" dividers><x-list-item title="a.zip" /></x-list>'))
->toContain('role="list"')
->toContain('aria-label="Files"')
->toContain('data-list="plain"')
->toContain('data-dividers')
->not->toContain('divide-y')
->toContain('data-md-list="plain"')
->toContain('data-md-dividers')
->toContain('role="listitem"')
->and((string) $this->blade('<x-list><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-dividers')
->and((string) $this->blade('<x-list segmented dividers><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-dividers');
->and((string) $this->blade('<x-list><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-md-dividers')
->and((string) $this->blade('<x-list segmented dividers><x-list-item title="a.zip" /></x-list>'))->not->toContain('data-md-dividers');
});
it('draws M3 Expressive\'s segmented list', function () {
expect((string) $this->blade('<x-list segmented><x-list-item title="a.zip" /></x-list>'))
->toContain('data-list="segmented"')
->toContain('gap-0.5');
->toContain('data-md-list="segmented"');
});
it('grows an item from one to three lines, top-aligning the tallest', function () {
expect((string) $this->blade('<x-list-item title="a.zip" />'))->toContain('items-center')->toContain('min-h-14 py-2')
->and((string) $this->blade('<x-list-item title="a.zip" description="248 MB" />'))->toContain('items-center')->toContain('min-h-18 py-2')->toContain('248 MB')
expect((string) $this->blade('<x-list-item title="a.zip" />'))->toContain('data-md-lines="1"')
->and((string) $this->blade('<x-list-item title="a.zip" description="248 MB" />'))->toContain('data-md-lines="2"')->toContain('248 MB')
->and((string) $this->blade('<x-list-item title="a.zip" overline="Protected" description="248 MB" />'))
->toContain('items-start')
->toContain('min-h-22 py-3')
->toContain('Protected')
->not->toContain('items-center');
->toContain('data-md-lines="3"')
->toContain('Protected');
});
it('leaves 16px between the item and what leads or trails it', function () {
expect((string) $this->blade('<x-list-item title="a.zip" icon="folder_zip" />'))->toContain('flex gap-4 px-4');
$css = ComponentStylesheet::read('list-item');
expect($css->declarations('[data-md-list-item]'))
->toHaveKey('gap', 'var(--md-sys-measurement-space200)')
->toHaveKey('padding-inline', 'var(--md-sys-measurement-space200)');
});
it('draws the expressive icon size in a segmented list', function () {
expect((string) $this->blade('<x-list segmented><x-list-item title="a" icon="settings" icon-right="chevron_right" /></x-list>'))
->toContain('size-5')
->not->toContain('size-6')
->and((string) $this->blade('<x-list><x-list-item title="a" icon="settings" /></x-list>'))->toContain('size-6');
->toContain('style="--md-icon-size: 20px"')
->and((string) $this->blade('<x-list><x-list-item title="a" icon="settings" /></x-list>'))
->not->toContain('--md-icon-size: 20px');
});
it('leads with an icon, an avatar or an image, and trails with text or an icon', function () {
expect((string) $this->blade('<x-list-item title="a" icon="folder_zip" trailing="3 days" icon-right="chevron_right" />'))
->toContain('3 days')
->and(substr_count((string) $this->blade('<x-list-item title="a" icon="folder_zip" icon-right="chevron_right" />'), '<svg'))->toBe(2)
->and((string) $this->blade('<x-list-item title="Anna" avatar="AM" />'))->toContain('bg-primary-container')->toContain('>AM</span>')
->and((string) $this->blade('<x-list-item title="Anna" avatar="AM" />'))->toContain('data-md-list-item-avatar')->toContain('>AM</span>')
->and((string) $this->blade('<x-list-item title="Anna" avatar="/anna.jpg" />'))->toContain('<img src="/anna.jpg"')
->and((string) $this->blade('<x-list-item title="Photo" image="/p.jpg" />'))->toContain('size-14');
->and((string) $this->blade('<x-list-item title="Photo" image="/p.jpg" />'))->toContain('data-md-list-item-image');
});
it('makes a linked item a row that opens from anywhere', function () {
expect((string) $this->blade('<x-list-item title="Settings" link="/settings" />'))
->toContain('data-list-row')
->toContain('data-md-list-row')
->toContain('href="/settings"')
->toContain('data-list-open')
->toContain('data-md-list-open')
->toContain('wire:navigate');
});
@@ -81,32 +83,33 @@ it('draws a second cue on a selected option, which icon-right replaces', functio
it('leaves a disabled item out of the keyboard and announces it disabled', function () {
expect((string) $this->blade('<x-list-item title="Settings" link="/settings" icon="settings" disabled />'))
->toContain('aria-disabled="true"')
->toContain('pointer-events-none text-on-surface/38')
->not->toContain('href="/settings"')
->not->toContain('data-list-open')
->not->toContain('data-list-row');
->not->toContain('data-md-list-open')
->not->toContain('data-md-list-row');
});
it('marks a selected item and takes controls in its slots', function () {
expect((string) $this->blade('<x-list-item title="Anna" :selected="true"><x-slot:leading><input type="checkbox"></x-slot:leading><x-slot:end><button>⋮</button></x-slot:end></x-list-item>'))
->toContain('data-selected')
->toContain('data-md-selected')
->toContain('data-md-list-item-leading')
->toContain('<input type="checkbox">')
->toContain('data-md-list-item-end')
->toContain('<button>⋮</button>');
});
it('leads with M3\'s video, in the size the item\'s height calls for', function () {
expect((string) $this->blade('<x-list-item title="Sunrise" video="/poster.jpg" />'))
->toContain('h-14 w-25')
->toContain('rounded-corner-sm')
->toContain('data-md-list-item-video')
->toContain('data-md-size="sm"')
->toContain('<img src="/poster.jpg" alt="" />')
->toContain('min-h-18 py-2')
->toContain('data-md-lines="2"')
->and((string) $this->blade('<x-list-item title="Sunrise" overline="Draft" description="7:48" video="/poster.jpg" />'))
->toContain('h-16 w-28.5')
->toContain('min-h-22 py-3')
->toContain('data-md-size="lg"')
->toContain('data-md-lines="3"')
->and((string) $this->blade('<x-list-item title="Sunrise"><x-slot:video><video src="/clip.mp4"></video></x-slot:video></x-list-item>'))
->toContain('<video src="/clip.mp4"></video>')
->toContain('h-14 w-25')
->toContain('data-md-size="sm"')
->and((string) $this->blade('<x-list-item title="Sunrise" />'))
->not->toContain('h-14 w-25')
->toContain('min-h-14 py-2');
->not->toContain('data-md-list-item-video')
->toContain('data-md-lines="1"');
});