Company Size Tab-Filtered Logos Block for React

Edit SIZES and CUSTOMERS at the top of the file. A size has an id, the range shown on the control, the spoken form ("Teams of 1-50"), a title, a line, and its two figures, team and dives. A customer names its size in group, with an icon, a name and a style (an index into STYLES). Keep six customers per size so the wall is full. The figures are made-up placeholders for your own numbers.

The control is a real tab list named "Team size": the arrow keys move between sizes (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. Each panel has an h3 for its title, the figures are a description list, and the logos are a list named "Customers". Ranges and figures sit in bdi elements so a right-to-left layout keeps them in order. Focusing a tab selects it, as on the other libraries, so an arrow key both moves and switches.

Every size's panel is also rendered once more, unseen, stacked in the same grid cell as the real panel, hidden from assistive technology and the keyboard (aria-hidden and inert). The cell is as tall as the tallest of them, so switching only swaps what shows and nothing below it moves. Panels that aren't open are not in the page's accessibility tree twice.

The logos' column has a start border (lg:border-s) and a Guides layer with + marks, so the divider runs from the band's top rule to the foot of the block. Below lg the divider is replaced by a rule between the summary and the logos. The block ends on the wall, with no bottom rule: the next section's top rule closes it.

The control becomes the full width of the header with three equal parts, the summary comes first, and the logos sit under it two across, in cells that keep their hairlines. Nothing scrolls sideways at 320 pixels.

The header and the panel fade up once when the page loads, and each logo's colour eases on hover. Switching sizes swaps the panel at once. With reduced motion the entrance and the hover transitions are off.