ExpandableCard

A summary card whose header button grows the card in width and height to reveal its details in place.

When to use

• Dense dashboards where each card shows a status line and only some readers need the breakdown.
• Cards that should be able to widen into spare room when opened (expandedWidth).
• Not for lists of FAQ-style sections where only one should be open: use Accordion. For a modal detail view use Dialog.

Usage

import { ExpandableCard } from "@/components/iris/expandable-card/expandable-card";

h(
  ExpandableCard,
  { title: "Webhook deliveries", description: "Healthy · last delivery 3 min ago", width: 400, expandedWidth: 520 },
  h("p", null, "Decisions go back by signed webhook, with an Opsisid-Signature header on every delivery."),
);

Props

Prop	Type	Default	Description
title	string	—	Required. Bold heading inside the trigger button.
description	string	—	Summary line; changed words roll in while unchanged words hold still.
children	ReactNode	—	Required. The details revealed when expanded.
defaultExpanded	boolean	false	Start open.
width	number	—	Collapsed width cap in px. The card is centered and never wider than its container; fills it when omitted.
expandedWidth	number	width	Width cap when open, so the card can grow sideways.
…article props			className, style, onKeyDown, aria-*.

Notes

• The whole header is a button with aria-expanded / aria-controls; Escape inside an open card closes it and returns focus to the header. Closed details are inert.
• Width and height animate on one non-overshooting spring (real size, not scale, so text never stretches); details fade in after the box makes room. Reduced motion snaps.
• Expansion is uncontrolled only; there is no expanded prop.
• Reads --surface, --hover, --line, --ink, --ink-2, --ink-3.