Collectible Product Card Block for Svelte

Edit GRADES. Each has an id (the grade), a condition word, the price in cents, how many were graded and the caseNumber printed on the label. The group, the facts and the card's label strip are all generated from it, so a card can have two grades or six.

From the count, not typed. pipsOf lights five pips at 60 copies or fewer, four up to 250, three up to 500, two up to 800 and one above that, and the scarcity word comes from the same number. The pips are decorative; the text beside them says "Rare, 4 of 5".

A pseudo-element with a diagonal gradient that slides across the card on hover, with no script. It is decoration only, so keyboard and touch users miss nothing, and it is hidden when the visitor prefers reduced motion.

The grade and the bag are page state; nothing is stored, charged or sent. The population counts, prices and case numbers are typed, so load them from your inventory. Replace the body of add and undo with your cart calls. The card is typed shapes: swap Slab for an img of the case.

It is a line of words stating what was checked, here that the card is sealed in a numbered case. It carries no colour or badge, and in a real shop it should only appear when your grading partner has confirmed it.

The card is a named image that includes its grade, the grade group is named "Grade" and each fact is a term and a value. The popover opens with a click, Enter or Space and closes with Escape, and a change of grade is announced by the polite status line.