Drawer header

Every specimen here is capped at 500px, the width of the slide-cart panel a drawer header actually renders in. Full-bleed across this page is a width the component never has, and at it even the long title fits on one line, so nothing clips. Resize the browser to compare 390 with 1200 and up; the bar stays 63 until 1199 and 65 from 1200.

Chip

Slide cart footer

Pinned to the real slide-cart panel width the footer renders in: 390px below 768, where the drawer is full-bleed, and 500px from 768 up, the panel's own max-width (Figma 13960:273733). Each cell adds its own padding and border around that panel, so at 390 the specimens are wider than this page. They stay in one column, and the whole stack scrolls sideways (drag or swipe it) rather than the panel being squeezed. The total is a finished string the caller passes in: the footer reads nothing from cart and applies no money filter. The progress-tab slot on the dedicated specimen renders the live cart-progress-tab component; with the slot empty the footer renders no box at all.

Cart progress tab

Figma counts goals (`options`), this component counts badges in `checkpoint_amounts`. Mapping: options=1 is an empty list — dot · line · end-dot, no badge, 31 tall; put the amount in the label. options=2 is two entries (51 tall), options=3 is three. A one-goal live cart must pass the list empty, not a single amount. One badge and four badges are reachable states of the N-ary contract but match no Figma option count — they sit below as Off-design. Badge 1 defaults to the box icon and every later badge to gift, unless checkpoint_icons overrides a slot by index.

Slide cart card

Pinned to the real 500px panel width the card renders inside (Figma 13960:273733), 390 below 768 where the drawer is full-bleed. Each card sits in the panel's own cards list, so it takes that list's inset: 16 up to 1199, 24 from 1200. The message slot renders the real message component, info or warning as each block sets it, with an optional title line above its text: a bundle item is this same default card with an info message whose title names the bundle and whose text names the pack discount. Where a specimen carries a caption, it either names a known conflict rather than a silent workaround or spells out how the specimen is composed.

Slide cart

Pinned to the real panel width, 500 from 768 (Figma 13960:273733) and full-bleed 390 below, the same rule the card and footer groups use. One specimen renders presentation='drawer', closed behind an 'Open the slide cart' trigger — the one specimen on this page that exercises Escape, the Tab trap, focus restore and the scrim, since this guide page is the only place AC-3 can be demonstrated without a theme session. Its trigger does not call the drawer: it publishes slide-cart:active with the panel id, and the drawer opens because it reacts to that topic, as it would for any other sender. The remaining five render presentation='inline', the same panel flat in the page flow with none of that dialog behaviour. Every stub card here is a fixed generic product, not driven by a setting. The all-slots specimen fills the messages slot with a real dismissible warning; dismissing it hides the message and moves focus to that specimen cell. The carousel slot holds the real upsell-carousel: the products picked in the block's Carousel products setting, or four stub product cards when none are picked, titled Bestsellers on the Empty state. The summary slot holds the real order-summary with fixed demo totals. Quick add and Apply run a ~800ms demo action; Apply always succeeds here. Quick add succeeds on the inline specimens and fails inside the drawer, so its error shows in the panel's message area under the drawer header: newest on top, up to three, 4 seconds each.