Notification Banner

v1.0.0·Added in 1.0.0

iOS-style banners for incoming messages, orders and reminders that drop from the top, one at a time, with a queue and an expanded view.

Mount the host once and call notify() from anywhere: a banner drops in from the top edge with a soft spring (the phone ticks once if the page has seen a tap) and leaves on its own after the duration. It shows the app icon, name and time ("acum", "acum 2 min."), the sender's photo or an icon tile, a one-line title and two lines of text. Tap or click it to open (onPress runs and the banner goes). Swipe it up with a finger, or drag it up with the mouse, to throw it away; a short drag springs back. Pull it down and, past 40px of rubber-banded pull, the grabber arms, the phone ticks and the card grows to the full text and its actions (44px buttons on touch); with a mouse, the chevron under the text does the same. The × appears on hover and on keyboard focus (touch uses the swipe). Timers pause while you hover, hold, focus or expand a banner and while the tab is hidden. More banners wait in a queue: the next one peeks out under the card with a "+2" chip and drops in after the current one leaves; a banner sent again with the same id updates in place and cross-fades its text. Keyboard: the hotkey (Alt+N, ⌥N on a Mac) focuses the banner without stealing focus on arrival; Enter opens it, ArrowDown expands and ArrowUp collapses, Tab reaches the actions, the chevron and the ×, and Escape dismisses it and returns focus to where you were. Each new banner is read once by screen readers. Below a 576px wide host banners span the top with 8px gutters under the notch; wider, they are a 380px card at the top end.