Context without visual noise
Toast, dialog, progress, empty and loading states remain useful, dismissible and on-brand.
Toast family
Every toast keeps a neutral 44px close target in the top-left and a 4px semantic rail.
Otvertka-67 is ready for today’s task.
Your install bundle is being assembled.
This pet is less suited to open-ended ideation.
Check the package and try again.
Trigger a production-style toast inside the feedback layer.
Toast Stack Lab
Collapsed cards intentionally peek. Expanded cards use a physical 24px gap so the upper shadow and the lower top-left close key never collide.
Your companion tray is still local to this device.
Today’s pet stays pinned until you clear it.
- State
- collapsed
- Visible
- 2 / 2
- Expanded gap
- 24px
Install dialog
The close control follows the same top-left contract.
Egg loading state
Proposed collectible alternative to the production rectangular skeleton. It is explicitly not yet a product rule.
Egg loading rollout contract
The collectible egg remains proposed until performance, motion and fallback gates pass. Documentation does not silently replace production skeletons.
| Gate | Required behavior | Evidence | Fallback |
|---|---|---|---|
| Performance | Reserve aspect ratio and stay inside the media budget | LCP + CLS check | Production rectangular skeleton |
| Motion | Pause decorative float under reduced motion | Reduced-motion browser check | Static egg frame |
| Loading | Name the active operation without animation | Live copy + deterministic state | Current loading components |
| Failure | Keep the selected pet and expose one retry | Offline and package error specimen | Local catalog state |
Async state matrix
The first two views render the current production loading components. Empty, error and package progress keep the same hierarchy; the egg remains a separate proposal.
Warming up pet matcher
Preparing the catalog, state previews and local matching signals.
Feedback timing
| State | Entry | Dismissal | Layer |
|---|---|---|---|
| Toast | 180–230ms | Manual + timed | 500 |
| Popover | 230ms | Outside click + Escape | 200 |
| Dialog | 260ms | Close + Cancel + Escape | 400 |
| Tray | 360ms | Explicit collapse | 100 |