You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.7 KiB
63 lines
1.7 KiB
<script lang="ts">
|
|
/**
|
|
* One coordinated child surface. It DISCOVERS its group via Svelte context
|
|
* (RFC §7.1) — the parent `CoordList` published it; this item never receives
|
|
* the group explicitly. Pure CSS handles the visual (stagger via --i); the
|
|
* group only decides WHEN this surface is released / unmounted.
|
|
*/
|
|
import { Presence } from '$soma/layers/presence.svelte'
|
|
import { PresenceGroup } from '$soma/layers/presence-group'
|
|
import { readableActive } from '$libs/reactive'
|
|
import { ActiveEidos } from '$uix/eidos'
|
|
|
|
let { open, index }: { open: boolean; index: number } = $props()
|
|
|
|
const eidos = ActiveEidos.require()
|
|
const group = PresenceGroup.get()
|
|
let el = $state<HTMLElement | null>(null)
|
|
const presence = new Presence({
|
|
dom: eidos.dom,
|
|
open: readableActive(() => open),
|
|
ref: readableActive(() => el),
|
|
group,
|
|
groupRole: 'child'
|
|
})
|
|
</script>
|
|
|
|
{#if presence.isPresent}
|
|
<div class="coord-item" bind:this={el} style="--i: {index}" {...presence.transitionAttrs}>
|
|
ítem {index + 1}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.coord-item {
|
|
padding: 0.5rem 0.85rem;
|
|
border-radius: 8px;
|
|
background: var(--color-primary-solid, #4f46e5);
|
|
color: var(--color-primary-contrast, #fff);
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
transition:
|
|
opacity 0.4s ease,
|
|
transform 0.4s ease;
|
|
transition-delay: calc(var(--i) * 0.08s);
|
|
}
|
|
.coord-item[data-starting-style] {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
.coord-item[data-ending-style] {
|
|
animation: coord-item-out 0.4s ease forwards;
|
|
animation-delay: calc(var(--i) * 0.1s);
|
|
}
|
|
@keyframes coord-item-out {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(12px);
|
|
}
|
|
}
|
|
</style>
|