# Track list

Track list: a free component, built on your design tokens, to use on an album, playlist or mixtape page. An album or playlist: a cover photo, title and artist, play, shuffle and save, then numbered tracks with their length, an explicit tag, a like heart and the playing one marked.

Prompt: Add the OpenDesigner component track-list to this project: https://opendesigner.dev/library/r/track-list.html. Keep its markup and states; map its --ds-* variables to my tokens.

States: playing, paused, current track, liked, shuffle on, hover, focus.

Accessibility: An ordered list where each whole row is one button that names the track, number and length; the playing row has aria-current, and like, save and shuffle are toggle buttons with aria-pressed.

File: https://opendesigner.dev/library/r/track-list.html