Grid Cards Team Block for React

Edit PEOPLE and TEAMS at the top of the file. A person is a name, a role, a team and a city; the initials come from the name, and the avatar's tone from the person's place in the list. The picker's headcounts and the header's "12 people in 11 cities" are counted from the same data, so adding someone needs no other change. Twelve fills every row at two, three and four columns; another count leaves a shorter last row, which still has its lines, because each cell draws its own.

It's a radio group named Department. Tab moves into it and the arrow keys move between the options, selecting as they go; each one is read with its headcount ("Engineering, 4 people"). A polite status line reads the result ("Engineering first: 4 of 12 people") without moving focus. The picked team also comes first in the list itself, so a screen reader meets those people first, and the others follow, still in the list.

Hiding them would leave a grid with a hole and a block that shrinks, which moves everything below it. Instead the picked team moves to the front, in its usual order, and everyone else stays behind it: their avatars turn to outlines, their names to the muted colour and their cells take a light tint. Every word still meets AA contrast, in light and dark themes. Every row has the same height, so the block never changes size when you pick.

Below sm the grid is two columns and shows the first six people, then a Show all 12 button in a band under it. The button is a disclosure: it says whether the list is expanded and which list it controls, and its label stays the same. The picker scrolls sideways from rail to rail when its options don't fit. In a half-width cell the department badge would crowd the avatar, so it's read to screen readers but not shown; each role keeps room for two lines, so a re-sorted grid keeps its height.

Each cell draws only its end and bottom borders. A wrapper clips the last column's and the last row's, so the page's rails close the sides and the next block's top rule closes the foot: no line is ever doubled. The grid's top rule, with + marks where it meets the rails, comes from Guides. On a phone the Show all band draws the rule under the six people instead.

Yes: add a picture to each person and put an AvatarImage in the Avatar, before the fallback; the initials show until the picture loads, and whenever it fails. Keep the pictures square and greyscale if you want the grid to stay as calm as the initials. The avatar is decorative (the name is in the heading next to it), so the picture needs no alternative text.