The growing ticket

Option 1 · Sticky total barStyle: glass control layer over the page · Components: one frosted bottom bar (total + item count + chevron, Continue), a bottom sheet with the itemised list and VAT · Art: none, the room photo shows through the frost · Motion: each new line slides in above the bar with its "+AED" tag (220 ms), the bar gives one light pulse, the total rolls; the sheet rises 260 ms · Material: frosted glass bar, solid sheetbackdrop-filter blur(18px) saturate(160%) · role=dialog aria-modal, focus to Close, Esc / scrim / X close, focus returns · visibility-delayed transition so the closed sheet leaves the tab order

    Option 2 · Receipt cardStyle: a till receipt, monochrome + one accent · Components: a ticket card with perforated top and bottom edges and two cut-outs, a header row (items · total · chevron), the itemised body · Art: punched holes drawn in the page colour, a dashed tear line · Motion: the card extends line by line (grid rows 0fr → 1fr, 260 ms), each new line prints down from the tear; closed, the header counts up and the "+AED" tag floats · Material: flat paper on the pagegrid-template-rows animation (no height maths) · perforation = radial-gradient repeat in --canvas · aria-expanded / aria-controls

      Option 3 · Hex badgeStyle: hexagonal geometry as a marker (the house's allowed "top-right badge") · Components: a 56 px pointy-top hex fused to a rectangle tab that carries the total and item count, flips into the itemised panel · Art: a ticket glyph in the hex (never the mic: a mic in a hex is the logo redrawn); the total sits in the rectangle because the house hex rule allows no text inside a hex under 144 px · Motion: on growth the hex bumps (240 ms) and two hex outline rings ripple out (520 ms, 2nd at 90 ms); tap flips the badge away (rotateY 90°) and the panel flips in from its corner · Material: tactile blue hex, white panelinline SVG hex (stroke + fill) · perspective + rotateY, transform-origin at the inline-end corner · Esc and Close return focus to the badge

        Option 4 · Side ticketStyle: a pull-tab drawer, monochrome + one accent · Components: a 64 px vertical tab that peeks from the inline-end edge (right in English, left in Arabic) with the total, a 300 px ticket panel it pulls over the content · Art: none · Motion: drag the tab and the panel follows the finger, release past a third to open; a tap toggles; on growth the tab nudges out 8 px and the "+AED" tag rises beside it · Material: raised tab, solid panel over a scrimpointer events + setPointerCapture, translateX follows the finger, transform only · translateX(calc(100% × --local-dir)) mirrors in RTL · the tab is a real button, so keyboard = tap

        Option 5 · Inline ledgerStyle: Swiss grid, quiet · Components: the ticket lives at the top as a row of chips (people · length · room · each add-on · the total), it gains a chip per add-on; tap a chip to edit it in place, tap the total to open the itemised ledger · Art: the logo mic on the people chip, line icons on the rest · Motion: a new chip grows in from 0.95 (180 ms), a changed chip flashes once, the editor unfolds (grid rows, 260 ms) · Material: flat chips, the total chip tactilekeyed chips (focus survives a re-render) · one editor region, aria-expanded on the chip that owns it · chips wrap, never clip