Flags

Summary

Auto-dismissing toast notifications for the outcome of an action: "Saved", "User created", "Delete failed". Flags stack in the top-right corner, slide in, and (by default) dismiss themselves after 8 seconds; the timer pauses while the pointer or keyboard focus is on the flag. Each flag wraps a message in its solid variant - chrome surfaces (flags, banners) use the saturated banner palette for at-a-glance type recognition, while inline messages stay subtle. Pass solid: false for the quiet look. Type styling, icons, and theming carry over automatically. When more flags stack than the viewport holds, the stack scrolls; the newest flag is kept in view.

Use a flag for transient feedback about something that already happened. Use a message for state the user needs to keep seeing (validation problems, empty states, persistent warnings).

Screen readers announce flags automatically: role="alert" for error/warning, role="status" for success/info. Under prefers-reduced-motion the slide animation is disabled.

Each Neura.flag() call creates a new flag (no singleton). Flags render into a fixed #neura-flag-container at z-index 4000 - above the layer manager's range, so they stay visible over open modal dialogs. The state classes .neura-flag-open / .neura-flag-closing on the .neura-flag wrapper drive the slide transitions.

When to use

Option	Use it for
close: 'auto' (default)	Routine confirmations. Dismisses after `duration` (8 s); also manually closeable.
close: 'manual'	Outcomes the user should acknowledge: errors, warnings. Stays until the close button is clicked.
close: 'never'	Programmatic lifecycles, e.g. "Uploading…" closed by your own code via `f.close()`.

Examples

JavaScript API

const f = Neura.flag({
  type: 'success',        // success | info | warning | error
  title: 'Saved',
  body: 'Your changes are live.',   // plain text; bodyHtml for markup
  close: 'auto',          // 'auto' (default) | 'manual' | 'never'
  duration: 8000,         // auto-dismiss delay in ms
  solid: true,            // banner-palette fill (default); false = subtle
});

f.close();                // dismiss programmatically
f.on('close', fn);        // or listen for the DOM event:
f.el.addEventListener('neura-flag-close', fn);

AUI compatibility

None: flags did not exist in AUI 5.4 (Atlassian added AJS.flag in AUI 6). This is Neura's first post-parity component: the option shape nods to AUI 6's API for familiarity, but there is no aui-* alias and no AJS facade entry, and none is planned; no AUI-5.4-era code can be calling it.