Sheet is a portalled modal bottom sheet: role="dialog" with aria-modal and a required accessible name, focus moved in, trapped and restored on close, Escape and scrim click call onClose, and the rest of <body> is inert while open. It rises from translateY(100%) over 320 ms var(--ease-out-soft) over a scrim fading to 50% neutral-900; under prefers-reduced-motion it opens in place. ErrorBanner is a muted neutral-100 Card with grape-700 text and a Retry Button; Skeleton is a --color-surface pill with a 1.2 s opacity pulse switched off under reduced motion; EmptyState has a Bagel title, body and an optional primary Button action. jsdom never matches prefers-reduced-motion, resolves var() colours to transparent and does not expand the animation shorthand, so the new src/test/cssRules.ts reads the CSS Modules' declared rules, the reduced-motion media block and the hashed @keyframes directly. Maestro task: 2f9b64dd-0c26-47b9-b2b8-557bdf506d68 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
17 lines
280 B
CSS
17 lines
280 B
CSS
.banner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
background: var(--color-neutral-100);
|
|
}
|
|
|
|
.message {
|
|
flex: 1;
|
|
margin: 0;
|
|
color: var(--color-accent-700);
|
|
font-family: var(--font-body);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
line-height: 1.35;
|
|
}
|