Counted Hiring Bands Team Block for React

Edit DEPARTMENTS at the top of the file: each department has an id, a name and its roles (a title and a location). The open-roles figure, the teams-hiring figure, the count beside each name and each share bar are counted from that list, and so is the sentence under the title. WEEKS_TO_OFFER is the one figure you set by hand.

Each is a Sliding Number set to roll up from zero once, when it scrolls into view; it never replays. Under reduced motion it shows the final value at once. Each figure sits in a bdi that keeps its width, so nothing around it shifts while it rolls. A stack screenshot taken without scrolling shows zeros: the numbers only start when the band is on screen.

Each is that team's share of the biggest team's open roles, so the largest department has a full bar. They're decoration: the count is in the text beside the name, and the roles are listed in the band, so a screen reader hears "Engineering, 4 roles" and then the four. No bar carries information by colour.

The figures are a description list (a label and a value each). Every department is a labelled section with its name in an h3 under the block's h2, and its roles are a list named after the department.

The three figures stay side by side, one third each, and their notes drop away. Each department band becomes a column: the name, count and bar first, then the roles one per row. Nothing scrolls sideways at 320 pixels.

The figures band and the department bands each draw their top rule, with + marks, from Guides; hairlines between bands come from divide-y. The last band draws no bottom rule and the column has no bottom padding, so the next block's top rule closes the block.