Sidebar Nav Tab-Filtered Logos Block for React

Edit TRADES and CUSTOMERS at the top of the file. A trade has an id, an icon, a label, a line and its customers, taken from the CUSTOMERS whose group is the trade's id; a customer has a name, an icon and a style (an index into STYLES). Keep six customers per trade, so the grid is full. A fifth or sixth trade fits the sidebar; more than that wants a search.

The trades are a real tab list named "Trade", set vertical: the Up and Down arrow keys move between them, Home and End jump to the first and last, and Tab moves on into the open panel. On a phone the list lies on its side, and the same Up and Down keys still move along it. Each panel has an h3 for its trade and a list of customers. Focusing a tab selects it, as on the other libraries, so an arrow key both moves and switches.

Every trade'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.

It's the same tab list: below lg the root stacks its children, the list switches to a row inside a sideways scroller, and each tab is as wide as its label. The list keeps its vertical orientation, so the keys stay Up and Down. A rule between the row and the logos takes the split divider's place.

The split divider is the block's only interior line, so the open grid reads as one calm group and the logos are never boxed. The wordmarks keep their muted colour, which turns to the text colour on hover. The block ends on the split with no bottom rule: the next section's top rule closes it.

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