Cart Drawer | Zyeon UI

ready · the live basket, $57.00 short of free shipping — step the lamp or the shelf up once and the subtotal, the discount, the meter and the live region all re-derive from that one event. The chair is already at its stock cap, so its + is aria-disabled and prints the reason instead of going dead; the cable tray sold out in the basket and is kept on screen but out of every figure. Remove parks a line for 6 seconds behind an Undo before onRemove is ever called. Try SPRING10, then try anything else.

Checkout started 0× — the ref guard locks it for one burst, so a double click still counts once.

ready · nine lines in JPY — the list scrolls while the heading and the money stay put, and a zero-decimal currency proves the divisor is asked of Intl rather than hard-coded to 100: every price here would read ¥12.00 if it were. The promo arrives already applied from the host, so the summary carries a discount row.

Checkout started 0×.

Your cart18 items

Generic Wooden Table
Concrete · Sky blue
¥1,200
1¥1,200 each
Oriental Granite Computer
Plastic · Orange
¥4,100
2¥2,050 each
Modern Bamboo Hat
Bronze · Azure
¥8,700
3¥2,900 each
Tasty Metal Pizza
Rubber · Plum
¥3,750
1¥3,750 each
Generic Concrete Hat
Bamboo · Tan
¥9,200
2¥4,600 each
Practical Aluminum Soap
Ceramic · Violet
¥16,350
3¥5,450 each
Luxurious Ceramic Tuna
Rubber · Mint green
¥6,300
1¥6,300 each
Gorgeous Cotton Pizza
Steel · Purple
¥14,300
2¥7,150 each
Small Granite Soap
Aluminum · Teal
¥24,000
3¥8,000 each

You have unlocked free shipping

Subtotal · 18 items: ¥87,900
Discount · AUTUMN: −¥4,395
Total: ¥83,505

Taxes and delivery are calculated at checkout.

empty · it sells rather than scolds — no data is not a failure, so it says what happens to anything you add and what the perk is worth. status='ready' with nothing left lands here too, because an empty list under a checkout button quoting zero is worse than saying nothing.

The CTA is real: press it. It is only painted because onBrowse was passed.

loading · the heading survives because it is known before the feed answers; three skeleton rows plus a skeleton footer, aria-busy on the root, pulse off under prefers-reduced-motion.

error · it never claims the cart is empty — a cart that failed to load is unknown, not empty — and it says the basket is safe. The retry button exists only because onRetry was passed, and the ref guard makes a double click count once.

Retry fired 0×.

ready · degenerate data — a 67-character unbroken name, a thumbnail that will never load, quantity 0 raised to the floor, 999 clamped to a cap of 3, a cap reported below its own floor, a NaN price settled at zero, a negative deposit-refund line, a promo worth more than the basket (clamped, so the total floors at zero) and a perk threshold of zero that must not divide. The currency is malformed on purpose: Intl throws, and the panel prints the code beside the number instead of blanking out.

Checkout started 0×.

Your cart15 items

Handcrafted-solid-brass-architects-task-lamp-with-counterweight-arm
sku-EU-warehouse-3-shelf-B-slot-114-brass-counterweight-variant-b
dollars 129.00
1dollars 129.00 each
Field notebook, pack of three
dollars 90.00
2dollars 45.00 each
Linen coasters
dollars 25.00
1dollars 25.00 each
Refill ink, black
dollars 57.00
3dollars 19.00 each
3 is the most you can take of this one.
Ceramic tile sample
Sold in fives
dollars 165.00
5dollars 33.00 each
5 is the most you can take of this one.
Gift wrapping
dollars 0.00
2dollars 0.00 each
Bag deposit refund
dollars -5.00
1dollars -5.00 each

You have unlocked free shipping

Subtotal · 15 items: dollars 461.00
Discount · TAKEITALL: −dollars 461.00
Total: dollars 0.00

Taxes and delivery are calculated at checkout.

ready · the composition this block is built for — the panel is the contents, the overlay is yours. Here it is a contained slide-out so the docs page stays usable; in an app it goes inside a Drawer, Dialog or Sheet, which keeps the focus trap and the scroll lock with the layer that owns them.

A stand-in page. Open the cart, then press Escape or the X and watch focus land back on this trigger — the panel focuses closeFocusRef before it calls onClose, because a control that unmounts while focused drops the caret on the document body.