Roadmap Task List Block for Vue

Each open card counts its size: S is 1, M is 3 and L is 5. Shipped cards count nothing, so ticking one frees room. Now and Next hold 8; Later has no limit. The bar is the open effort over the capacity, capped at full, and the number beside it is never capped.

Because plans are sometimes honest about being too big. The block says so in words and offers one way out instead of refusing. The Demote button moves the largest open card, the later one on a tie, from the first crowded band to the band after it, and tells you which card it chose. When nothing is over, the button stays focusable and says so.

The roadmap. Moving and shipping change state on the page and nothing is sent, so it resets on reload. In your app write the band and the shipped flag from the move and done handlers. Change the bands, their quarter labels and capacity in BANDS.

The Move select and the Shipped checkbox are named by their card ("Move 'Add card refunds' to", "Shipped: Add card refunds"), the size chip reads "Large, effort 5" to a screen reader, each band's cards are a named scroll region, and one polite message reports every move.

No. Moving is a select on the card, which works the same with a keyboard, touch and a screen reader. Bands run across the page rather than in columns so the roadmap does not read as a kanban board.

Cards stack in one column inside each band, and each band's list is a fixed-height scroll region so the page stays short. The capacity meter wraps under the band name.