Item with Image Media for Svelte

It turns ItemMedia into a small square that clips its picture: the image fills it with object-cover, corners follow your style, and the square shrinks at the sm and xs sizes. You only supply the image and its width and height.

ItemGroup stacks related Items in a column and gives the block the list role. This list sets gap-4 on the group. Add grid classes on ItemGroup when the rows should sit in columns.

Here the whole row is the link, so the title, art and duration are one target, and it gets a muted hover background and a focus ring. When a row needs a separate action, keep it a plain Item and put a Button in ItemActions instead.

Put the main line in ItemTitle, the album here in a muted span, the secondary line in ItemDescription, and a short value like the duration in a second ItemContent with flex-none so it stays at its width at the inline end. The title clamps to one line, so long names don't push the duration out.

It's a style choice: grayscale keeps colorful album art from competing with the text, and the list reads as one block. Remove the class to show the art in color, or add hover:grayscale-0 with a transition to bring color back on hover.

Yes: the art has an empty alt, so it's skipped, and each link is named by its text, the title, album, artist and duration. Give the image real alt text only if it shows something the row doesn't say.