({
position: 'relative',
display: 'flex',
flexDirection: 'column',
gap: `${NOTIFICATION_GAP}px`,
width: `${NOTIFICATION_WIDTH}px`
}))}
variants={stackVariants}
initial={false}
animate={isOpen ? 'open' : 'closed'}
transition={{ type: 'spring', mass: 0.7 }}
>
({
position: 'absolute',
top: -40,
left: 0,
height: 28,
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
transformOrigin: 'bottom center',
pointerEvents: 'none'
}))}
variants={headerVariants}
transition={{
type: 'spring',
stiffness: 600,
damping: 50,
delay: isOpen ? 0.2 : 0
}}
>
({
fontFamily: 'var(--brut-mono, monospace)',
fontSize: 16,
fontWeight: 700,
textTransform: 'uppercase',
letterSpacing: '0.04em',
lineHeight: 1,
marginLeft: 8,
color: 'var(--brut-ink, #0a0a0a)'
}))}
>
Notifications
(isOpen = false)}
>
Collapse
{#each Array.from({ length: N_NOTIFICATIONS }) as _, i (i)}
(isOpen = !isOpen)}
onkeydown={(e: KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
isOpen = !isOpen
}
}}
>
Note {i + 1}
{/each}
state:
{isOpen ? 'open' : 'closed'}
```