Uptime Card

Accessibility

• Every day is a button named with the service, date and status.
• Incidents are named in text as well as colour, and the badge has a glyph per status.
• Hover and focus show the same story.

Motion

• The hovered bar turns ink and grows to 1.15 in height over 150 ms.
• The story fades in above the bars.
• A pin lifts the story from the tray to an inset chip in 200 ms.
• With reduced motion, colours change at once and bars keep their height.

Responsive behavior

• 576 px with 90 days on Web, and 358 px with the latest 45 days on Mobile.
• The story slot keeps its 48 px, so nothing moves.

Performance

• Each service row is memoized, so moving over a row re-renders that row, not all 360 buttons.
• One set of pointer and focus listeners sits on the bars wrapper and reads the day from data attributes.
• Only one bar in the grid is in the tab order, and the Escape listener on window exists only while a day is pinned.

• Import UptimeCard from @/components/fetaui/uptime-card and pass services, each with name, uptime and optional incidents.
• An incident's daysAgo counts from today, and 0 is today. Incidents today set the header Badge tone.
• uptime is a display string. The card does not compute it, so send it from your monitoring data.
• active is for docs and tests. For real use pinned or defaultPinned with onPinnedChange. Composes Card, Badge and Icon Button.