Status Island

Accessibility

• Progress is announced politely, and errors assertively.
• The ring is a progressbar with a value.
• Actions are real buttons.

Motion

• The pill morphs between states on one spring, and content cross fades with a 2 px blur.
• The ring only moves forward. Indeterminate turns every 900 ms and pauses offscreen.
• Done pops its badge, and Error shakes once.
• The tray opens in 260 ms with rows 30 ms apart.
• With reduced motion, width changes at once, the arc pulses in opacity, and Error only shows its ring.

Responsive behavior

• 40 high on Web and 44 on Mobile. The tray is 320 and 358 wide.
• Tap opens the tray on touch.

Performance

• The indeterminate ring is a CSS loop, paused off screen by the shared observer.
• The tray mounts only while expanded. The expire timer runs only for done and undo, and waits while the tray is open.
• A hidden live region reports the first task, so the tray is not read out on every update.

• Import StatusIsland from @/components/fetaui/status-island after installing it. tasks is required, and the first is the one shown.
• You own the list: update progress and state, and remove tasks from onExpire and onClearDone.
• actionLabel and onAction add Open, Undo or Retry.
• It does not position itself. The tasks in the demo are static. Composes Button.