Speaking Events Team Block for React

Edit UPCOMING and PAST at the top of the file. A talk is a title, a speaker and role, an event and city, a kind, a month (1 to 12) and a day, its topics and an abstract. The tile and the machine-readable date (MM-DD) come from the month and the day; the tab counts come from the lists. A past talk's Slides link is added by the row, so point it at your slides.

A year in the data would go stale, and the block doesn't read the clock, so it never decides by itself which talks are over. You move a talk from UPCOMING to PAST when it happens; until then the tab it is in is the truth.

Each title is a heading with a button inside it: Tab reaches each row, Enter or Space opens and closes it, and the open state is announced. The plus becomes a minus when open. The calendar tile is a time element, so the date is read as a date. A closed row keeps its topics and abstract in the page, hidden until it opens.

They are tabs: the arrow keys move between Upcoming and Past, and Home and End jump to the ends. Base UI selects a tab as it takes focus.

The open list and an unseen copy of both lists share a grid cell, so the cell is always as tall as the taller one. Upcoming's closing band stretches to fill what its three rows leave, and holds the invitation. Opening a row, or Show all on a phone, does grow the block, because that is what you asked for.

Each row puts the calendar tile on its own line with the plus at the end, then the title and the speaker under it, so the title keeps its full width. Past shows three talks and a Show all 6 button, a disclosure that says whether the list is expanded and keeps its label. The tab band scrolls if its tabs don't fit. Nothing scrolls sideways at 320 pixels.