Lily Design System™

TimeoutDialog

A modal dialog warning users before session timeout, giving them a clear chance to keep working before unsaved data is lost or they are signed out.

The component is built on the native <dialog> element opened via showModal() so that focus is trapped and the rest of the page becomes inert. It uses role="alertdialog" so screen readers announce the warning as an interruption that requires immediate attention. The consumer drives the countdown — the component takes a live remainingSeconds prop and re-renders the visible time, but does not start, stop, or reset any timer of its own.

Common in services that hold sensitive data (banking, government, healthcare) where automatic sign-out is a regulatory requirement, but where the user still deserves an opportunity to extend the session before being kicked out.

Example

TimeoutDialog
Show demo markup 
<div class="timeout-dialog" aria-label="a modal dialog warning users before session timeout">TimeoutDialog</div>
Usage example 
<TimeoutDialog title="You are about to be signed out" open={isOpen} remainingSeconds={120}
  onExtend={extendSession} onSignOut={signOutNow} />
Show Svelte source 
// In your Svelte component:
import TimeoutDialog from "lily-design-system-svelte-headless/components/TimeoutDialog/TimeoutDialog.svelte";

<TimeoutDialog label="Dialog" open>
  <!-- dialog content -->
</TimeoutDialog>

Usage

<TimeoutDialog title="You are about to be signed out" open={isOpen} remainingSeconds={120}
  onExtend={extendSession} onSignOut={signOutNow} />

Props

PropTypeDefaultDescription
titlestring (required)—Dialog heading
openbooleanfalseWhether the dialog is open; bindable
remainingSecondsnumber (required)—Seconds remaining before timeout
onExtendcallback—Fired when the user chooses to stay signed in
onSignOutcallback—Fired when the user chooses to sign out now
...restPropsHTML attributes—Spread onto the root <dialog>

Keyboard Interactions

  • Tab / Shift+Tab cycles between focusable elements inside the dialog (focus trap)
  • Escape: triggers cancel (consumer typically wires this to "Sign out" or "Stay signed in")
  • Enter: activates the focused button (native browser behaviour)

ARIA

  • role="alertdialog" identifies this as an interruption requiring user attention
  • aria-labelledby references the heading element
  • aria-describedby references the body content

When to Use

  • Warning users before an inactive session ends, giving them a chance to extend it
  • Any context where automatic timeout is a security or data-integrity requirement

When Not to Use

  • Use AlertDialog for non-timeout urgent confirmations
  • Use Dialog for general modal content without alert semantics

Headless

This headless component renders semantic HTML with appropriate ARIA wiring. The consumer provides all visual styling — no CSS, animations, or layout assumptions are baked in.

Styles

The component renders with .timeout-dialog as the root class. No default styles are included.

Related components

  • dialog — generic modal dialog
  • alert-dialog — modal dialog for urgent confirmations

References

Implementation Notes

  • Renders a native <dialog> opened with showModal() so the dialog is modal and focus-trapped automatically
  • role="alertdialog" ensures assistive technology announces it as an interruption
  • Provides two slots: a body for the warning message (and remaining time) and a footer for action buttons
  • Common buttons are "Stay signed in" (extends the session) and "Sign out" (ends the session immediately)
  • Consumer drives the countdown clock; the component re-renders when remainingSeconds changes
  • Closes via close() on the dialog element, returning focus to the previously focused element

Canonical contract

Generated from this component's canonical metadata — the machine-checked source the implementations are held to.

Metadata

  • Component: timeout-dialog
  • PascalCase: TimeoutDialog
  • Description: a modal dialog warning users before session timeout
  • Status: beta — implemented and unit-tested in all seven frameworks with an axe-clean demo page; not yet exercised in composed flows
  • HTML tag: <dialog>
  • CSS class: .timeout-dialog
  • Interactive: yes

ARIA

  • role="alertdialog" identifies this as an interruption requiring user attention
  • aria-labelledby references the heading element
  • aria-describedby references the body content

Keyboard

  • Tab / Shift+Tab cycles between focusable elements inside the dialog (focus trap)
  • Escape: triggers cancel (consumer typically wires this to "Sign out" or "Stay signed in")
  • Enter: activates the focused button (native browser behaviour)

Props

  • title: string (required) (default: —) — Dialog heading
  • open: boolean (default: false) — Whether the dialog is open; bindable
  • remainingSeconds: number (required) (default: —) — Seconds remaining before timeout
  • onExtend: callback (default: —) — Fired when the user chooses to stay signed in
  • onSignOut: callback (default: —) — Fired when the user chooses to sign out now
  • ...restProps: HTML attributes (default: —) — Spread onto the root <dialog>