Pet Census Team Block for React

Edit PETS at the top of the file. A pet is a name, a breed, a mark (the drawing: dog, cat, rabbit or bird), a species (dog, cat or other, for the census), an owner and a note; one pet has week: true and leads. The census counts, the bar lengths and the sentence in the header are all worked out from that list, so adding a pet needs no other change.

Each bar is a share of all the pets, drawn with the Progress component in the theme's foreground colour, and it is named in words for a screen reader ("Dogs: 4 of 9 pets"). The count beside it is the same number as text.

Marks and initials keep the wall calm and the same on every page, and nobody has to supply a photo. If you want pictures, put an AvatarImage before the fallback in the owner's avatar; for a pet, swap the tile's icon for an img with empty alt text, since the name is next to it.

Below sm the roster is one column and shows the first four pets; a Show all button under it opens the other four. The button says whether the list is expanded and which list it controls, and its label stays the same. The census sits above the pet of the week, so the counts come first. Nothing scrolls sideways at 320 pixels.

Each pet draws its own end and bottom borders and a wrapper clips the last ones, so the page's rails close the sides and the next block's top rule closes the foot, with no doubled line. With an odd number of pets the last row holds one, and the divider between the columns still runs down it.

The census and the roster are lists, each pet has an h3 and the pet of the week is another h3 above them. The owner is read as "Owner" followed by the name; the tiles and initials are decoration.