Overlays
Everything that sits above the page: the quick-edit side sheet for small changes without leaving the list, dialogs and confirms for decisions, and the small menus, popovers, tooltips and hover cards that keep rows quiet.
One scrim, one shadow per layer, one way out (Esc, the scrim, or Cancel), and focus always comes back to the button that opened it.
Side sheet · quick edit
The approved board 3 sheet. Try it: open any row, change the price, then press Esc.
Discard your changes?
You changed Stone linen jacket. Closing now loses those edits.
Sheet.k-stage.k-scrim.k-sheet.ov-sh-h.ov-sh-b.ov-sh-f--sheet-w--e-sheet--motion-sheet-in--motion-sheet-outSheet sizes, sticky footer, nested scroll
Three widths only. Header and footer stay put; the body scrolls on its own and never scrolls the page behind.
.k-sheet.md.k-sheet.lgoverscroll-behavior:contain.ov-sum--sheet-wUnsaved-changes guard
Only when something changed. Keep editing is the default and holds focus; discarding is the quiet red one.
Discard your changes?
You changed Stone linen jacket. Closing now loses those edits.
.k-guard.ov-dirtyrole=alertdialog.btn-danger-quiet--z-guard (raised)Sheet states
Loading, failed save, saving. The failure names the cause and keeps the edits.
Stone linen jacket
HS 30612 · Irish LinenStone linen jacket
HS 30612 · Irish LinenStone linen jacket
HS 30612 · Irish LinenWriting to Laravel and the three brand stores.
.ov-skel.ov-note.err.spinaria-busyDialog
For a decision with a little content. Centred, 480 wide, footer actions right, primary last.
Navy birdseye two-piece suit
HQ changed this product. Pick what to bring into RJ Clothing; anything you edited stays yours unless you tick it.
Dialog.k-dialog.ov-dg-h.ov-dg-b.ov-dg-f--dialog-w--e-dialogConfirm · neutral, destructive, typed
Neutral confirms use the navy primary. Destructive ones name exactly what goes and turn red. Irreversible deletes need the typed phrase; the button wakes on an exact match (try the third).
Publish to 6 brands?
Navy chalk-stripe three-piece v3 goes into every brand's Global Store today. Brand prices are not changed.
Revoke Website checkout?
Requests signed with rjdtc_••••f3a9 stop at once. RJ Clothing checkout uses it: 1,284 calls in the last 30 days.
The key moves to Revoked and stays there for the audit trail.
Clean up the failed attempt for RJ MTM?
This deletes the Payload tenant, the CMS tenant and 2 half-made API keys. The ERP retailer account is kept.
Type it exactly, capitals included.
The typed phrase gates it; the error names what was expected.
AlertDialog.btn-danger.ov-ic.danger[data-ov-typed].input.errConfirm unverified currency
When a save would publish prices in a currency nobody has confirmed. Lists every affected cloth, then one tick to own it. Try Save prices.
USD isn't confirmed for RJ Clothing
These prices are worked out from GBP at a rate nobody has checked since 12 Sep. Customers paying in dollars see them as soon as you save.
USD isn't confirmed for RJ Clothing
These prices are worked out from GBP at a rate nobody has checked since 12 Sep. Customers paying in dollars see them as soon as you save.
Same words, no second layer: the tick sits above the save button.
.ov-ic.warn.ov-list.ov-ack[data-ov-ack].chip.warning--warningPopover
Small, non-modal detail anchored to what you clicked. Click the price.
Navy birdseye two-piece suit
Recommended price in each currency
- GBP
- £1,150.00 Base
- EUR
- €1,320.00 Checked
- USD
- $1,450.00 Unverified
Popover.ov-pop.ov-dl.ov-moneycell.k-popTooltip
Names an icon, or says why something is off. Never holds an action or anything you must read to finish a task.
Hover and focus show the same tip.
Tooltip.tt.tip--primary--tooltip-delay (raised)Hover card
A read-only peek at a linked record, here the cloth behind a product. Clicking the code still goes to the cloth.
- Colour
- Navy birdseye
- Cloth
- 100% wool, Super 110s, 280 g
- Stock
- In stock
- Synced
- Today 06:10
Used by 3 products in the Global Store.
Hover or tab to the cloth code. Opens after 500 ms, read-only.
- Colour
- Navy birdseye
- Cloth
- 100% wool, Super 110s, 280 g
- Stock
- In stock
- Synced
- Today 06:10
Used by 3 products in the Global Store.
HoverCard.ov-hc.ov-hcard.ov-sw--hovercard-delay (raised)Focus while open
The order a keyboard user travels inside the sheet, and what happens at each edge.
- Opens
- Focus lands on the first thing you would change: the price here, the phrase box in a typed confirm, Keep editing in a guard.
- Inside
- Tab and Shift+Tab cycle through the layer only. The page behind is inert and the sheet edge carries a faint ring while it holds focus.
- Leaves
- Esc, the scrim or Cancel. With unsaved edits, the guard asks first.
- Returns
- Focus goes back to the Quick edit button on the row you came from.
aria-modal.ov-trap--focus-ring--ringMotion and reduced motion
Every move answers a click and nothing loops. With reduced motion on, layers appear and leave at once.
| Overlay | Move | Open | Close | Reduced motion |
|---|---|---|---|---|
| Side sheet | Slides in from the right edge | --motion-sheet-in · 260ms | --motion-sheet-out · 180ms | Instant, no travel |
| Phone bottom sheet | Rises from the bottom edge | --motion-sheet-in | --motion-sheet-out | Instant, no travel |
| Scrim | Fades with its layer | --motion-sheet-in | --motion-sheet-out | Instant, no travel |
| Dialog, confirm | Fades and settles 2% up | --motion-sheet-in | --motion-pop-out · 110ms | Instant, no travel |
| Menu, popover | Drops 4px and fades | --motion-pop-in · 160ms | --motion-pop-out | Instant, no travel |
| Tooltip | Fades after a 400 ms hover wait | --motion-pop-in | --motion-pop-out | Instant, no travel |
| Hover card | Drops 4px after a 500 ms wait | --motion-pop-in | --motion-pop-out | Instant, no travel |
| Save toast | Rises 8px, stays 2.6 s | --motion-toast-in · 200ms | --motion-toast-out · 140ms | Instant, no travel |
prefers-reduced-motion.ov-rm--ease-in--ease-out--pop-shift--toast-shift