RTL Toast

A toast that enters from the RTL end side with a draining countdown

השינויים נשמרו בהצלחה

Create an RTL toast notification. A dir="rtl" ink-dark toast pinned to the bottom-LEFT corner, the inline-end side in RTL, mirroring the LTR bottom-right convention, that slides in from the left edge with a spring (from x: -90 and transparent, stiffness 400, damping 28). Position it with inset-inline-end so the same component lands bottom-right under dir="ltr". Internal order follows RTL reading: status icon on the right (green check), Hebrew message ('השינויים נשמרו בהצלחה'), close × on the left. Along the toast's bottom edge runs a 2px accent countdown bar that drains in the reading direction, scaleX from 1 to 0 with transform-origin on the RIGHT edge, linear, over the toast's ~2.6s lifetime, so the reader's eye follows the time running out right-to-left. When the countdown empties (or the × is clicked), the toast slides back out the way it came, slightly faster (0.22s). Stack multiple toasts upward with layout animation if several fire. Accessibility: role="status" so the message is announced without stealing focus; the close button keeps a Hebrew aria-label; hovering the toast should pause the countdown in a real implementation. If prefers-reduced-motion is set, fade in and out with no slide and hide the countdown bar. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data