Stacked Cards About Block for React

Edit PRINCIPLES at the top of the file: each has an id, a title, a text, and a figure with the measure it counts. The list, the deck and the live region all read the same array, and the numbers come from the position. The deck's offsets assume at most five cards; more would need more entries in POSE.

It is the catalog's Toggle Group in vertical mode, so the arrow keys move between the principles and Tab leaves the list. One principle is always pressed: the group is built with multiple and a value of one, and pressing the pressed button is ignored, so it can never switch off. The group's props differ slightly between libraries (some use a set of keys, some a type), but the behaviour is the same on every target.

Only the front card is exposed: the other four are inert and aria-hidden, so they hold no tab stops and no text. The principles in the list are the controls, and a visually hidden live region announces "Principle 3 of 5" and its title when you press one. The offset edges are decoration.

The list comes first, one principle per row, and the deck sits under a rule below it with smaller offsets so the front card keeps enough width at 320 pixels. In a right-to-left layout the cards peek out toward the end, which is the opposite side, and the numbers stay at the start of each row.

The cards slide between positions in half a second, and the front one gains a stronger shadow. With reduced motion they swap places at once. The block's first load is a one-time fade-up of the heading, the list and the deck.