Toast
Show the toast
Yoga class moved to
Show the toast after Undo
Yoga class moved back to
Yoga class,
Source
<details name="toast">
<summary>Show the toast</summary>
<Kit.Phoenix.Roles.Toast.toast id="toast-outlet" confirmation_id="role-toast-move" subjects={["toast-subject"]} action={Kit.Phoenix.Roles.Toast.Action.undo(nil, %{"type" => "submit", "form" => "toast-step"})}>
<:line>Yoga class moved to <Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_day(reader(), ~U[2025-04-17 09:00:00Z], ~U[2025-04-17 11:00:00Z])} /></:line>
</Kit.Phoenix.Roles.Toast.toast>
</details>
<details name="toast">
<summary>Show the toast after Undo</summary>
<Kit.Phoenix.Roles.Toast.toast id="role-toast-undone" confirmation_id="role-toast-undone" action={Kit.Phoenix.Roles.Toast.Action.redo(nil, %{"type" => "button"})}>
<:line>Yoga class moved back to <Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_day(reader(), ~U[2025-04-15 09:00:00Z], ~U[2025-04-15 11:00:00Z])} /></:line>
</Kit.Phoenix.Roles.Toast.toast>
</details>
<form id="toast-step" method="get" action="#role-toast"></form>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="toast-replace">Replace</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="toast-clear">Clear</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<p id="toast-subject">Yoga class, <Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_day(reader(), ~U[2025-04-17 09:00:00Z], ~U[2025-04-17 11:00:00Z])} /></p>
Toast, confirmation
Show the toast
Invoice sent to Oakmere Yoga
Source
<details name="toast">
<summary>Show the toast</summary>
<Kit.Phoenix.Roles.Toast.toast id="role-toast-sent" confirmation_id="role-toast-sent">
<:line>Invoice sent to Oakmere Yoga</:line>
</Kit.Phoenix.Roles.Toast.toast>
</details>
Toast, inert
Show the toast while the move saves
Yoga class moved to
Undo waits until the move has saved.
Close waits until the move has saved.
Show the toast while the undo saves
Yoga class moved back to
Redo waits until the undo has saved.
Close waits until the undo has saved.
Source
<div style="padding-block-end: var(--kit-toast-height, 0px);">
<details name="toast">
<summary>Show the toast while the move saves</summary>
<Kit.Phoenix.Roles.Toast.toast id="role-toast-inert-undo-outlet" confirmation_id="role-toast-inert-undo" close_state={Kit.Phoenix.ActionState.inert("role-toast-inert-undo-close", [Kit.Phoenix.Words.text("Close waits until the move has saved.")])} action={Kit.Phoenix.Roles.Toast.Action.undo(Kit.Phoenix.ActionState.inert("role-toast-inert-undo", [Kit.Phoenix.Words.text("Undo waits until the move has saved.")]), %{"type" => "button"})}>
<:line>Yoga class moved to <Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_day(reader(), ~U[2025-04-17 09:00:00Z], ~U[2025-04-17 11:00:00Z])} /></:line>
</Kit.Phoenix.Roles.Toast.toast>
</details>
<details name="toast">
<summary>Show the toast while the undo saves</summary>
<Kit.Phoenix.Roles.Toast.toast id="role-toast-inert-redo-outlet" confirmation_id="role-toast-inert-redo" close_state={Kit.Phoenix.ActionState.inert("role-toast-inert-redo-close", [Kit.Phoenix.Words.text("Close waits until the undo has saved.")])} action={Kit.Phoenix.Roles.Toast.Action.redo(Kit.Phoenix.ActionState.inert("role-toast-inert-redo", [Kit.Phoenix.Words.text("Redo waits until the undo has saved.")]), %{"type" => "button"})}>
<:line>Yoga class moved back to <Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_day(reader(), ~U[2025-04-15 09:00:00Z], ~U[2025-04-15 11:00:00Z])} /></:line>
</Kit.Phoenix.Roles.Toast.toast>
</details>
</div>