From bfac34dd4fe92c9ba2cfbe16546ba07b2dea90a9 Mon Sep 17 00:00:00 2001 From: dev Date: Sat, 20 Jun 2026 21:27:20 +0200 Subject: [PATCH] =?UTF-8?q?feat(motion):=20unify=20the=20animation=20selec?= =?UTF-8?q?tor=20to=20one=20`motion`=20prop=20=E2=80=94=20(a)=20of=20?= =?UTF-8?q?=C2=A7D.12?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit `` was the last component using `animation` as its preset selector — a vestige of the coordinated `cascade-*` system retired in Plan A. Every other animatable component (Dialog, Popover, Drawer, …) already uses `motion`. Renames ``'s prop + its context field `animation` → `motion`, so the framework has ONE universal selector name (RFC §D.12 step a). `MotionPresetName` and the low-level `data-animation-style` attr are unchanged. - cascade: types `animation?` → `motion?`; context `CascadeContext.animation` → `.motion`; component destructure + getter; item reads `ctx?.motion`. - docs/demo: README props table + usage, index usage, panel-cascade demo. Verified at runtime: `` produces identical wiring — items carry `data-animation-style="scale-fade"`, `animation-name: scale-in, fade-in`, structural index 0/1/2/3. `check` clean for the touched files; no dangling `animation`-prop reference remains (only the `data-animation-style` attr). Co-Authored-By: Claude Opus 4.8 (1M context) --- src/uix/eidos/components/cascade/README.md | 6 +++--- src/uix/eidos/components/cascade/cascade-item.svelte | 2 +- src/uix/eidos/components/cascade/cascade.svelte | 6 +++--- src/uix/eidos/components/cascade/context.ts | 7 ++++--- src/uix/eidos/components/cascade/index.ts | 2 +- src/uix/eidos/components/cascade/types.ts | 5 +++-- web/routes/temas/animations/panel-cascade/+page.svelte | 4 ++-- 7 files changed, 17 insertions(+), 15 deletions(-) diff --git a/src/uix/eidos/components/cascade/README.md b/src/uix/eidos/components/cascade/README.md index 151796794..e3bb2f674 100644 --- a/src/uix/eidos/components/cascade/README.md +++ b/src/uix/eidos/components/cascade/README.md @@ -12,7 +12,7 @@ same foundation stagger do it (see "Two ways" below). let open = $state(true) - + {#each items as item (item.id)} {item.label} {/each} @@ -20,7 +20,7 @@ same foundation stagger do it (see "Two ways" below). ``` `--motion-stagger-each: 0` (the default) → **parallel**; `N` → **cascade**. The keyframe, -duration, easing and reduced-motion all come from the `animation` preset. +duration, easing and reduced-motion all come from the `motion` preset. ## How it works — it reuses everything @@ -45,7 +45,7 @@ down (`:nth-last-child`) so the last item leaves first. | Prop | Type | Default | Notes | | --- | --- | --- | --- | | `open` | `boolean` | `true` | Drives the staggered enter (forward) / exit (reverse) via `data-state`. | -| `animation` | `MotionPresetName` | `'fade'` | The state-preset every item plays (`fade` / `scale-fade` / `slide-fade` / …). | +| `motion` | `MotionPresetName` | `'fade'` | The state-preset every item plays (`fade` / `scale-fade` / `slide-fade` / …). Unified with the overlays' selector (RFC §D.12). | Plus any `HTMLAttributes`. Set the layout + the rhythm (`--motion-stagger-each`) here. diff --git a/src/uix/eidos/components/cascade/cascade-item.svelte b/src/uix/eidos/components/cascade/cascade-item.svelte index af31e596a..731c88045 100644 --- a/src/uix/eidos/components/cascade/cascade-item.svelte +++ b/src/uix/eidos/components/cascade/cascade-item.svelte @@ -30,7 +30,7 @@
diff --git a/src/uix/eidos/components/cascade/context.ts b/src/uix/eidos/components/cascade/context.ts index 5f540d5a3..1feda0451 100644 --- a/src/uix/eidos/components/cascade/context.ts +++ b/src/uix/eidos/components/cascade/context.ts @@ -5,12 +5,13 @@ const KEY = Symbol('cascade'); /** * What `` passes to its items: the container's open state + the state-preset the - * items should play. Items read it to carry `data-state` + `data-animation-style` — they - * never receive a timing or a visual var, only these two semantic/structural facts. + * items should play (the `motion` prop value). Items read it to carry `data-state` + + * `data-animation-style` — they never receive a timing or a visual var, only these two + * semantic/structural facts. */ export type CascadeContext = { readonly open: boolean; - readonly animation: MotionPresetName; + readonly motion: MotionPresetName; }; export function setCascadeContext(ctx: CascadeContext): void { diff --git a/src/uix/eidos/components/cascade/index.ts b/src/uix/eidos/components/cascade/index.ts index 0d4bdd814..7f9798923 100644 --- a/src/uix/eidos/components/cascade/index.ts +++ b/src/uix/eidos/components/cascade/index.ts @@ -2,7 +2,7 @@ // // import { Cascade } from '$uix/eidos/components/cascade'; // -// +// // {#each items as item (item.id)} // {item.label} // {/each} diff --git a/src/uix/eidos/components/cascade/types.ts b/src/uix/eidos/components/cascade/types.ts index 524073cec..37c8be3b7 100644 --- a/src/uix/eidos/components/cascade/types.ts +++ b/src/uix/eidos/components/cascade/types.ts @@ -13,9 +13,10 @@ export type CascadeProps = Omit, 'children'> & { /** * The state-preset every item plays (its `data-animation-style`) — any registered eidos * motion preset (`fade`, `scale-fade`, `slide-fade`, …). The keyframe / duration / - * reduced-motion all come from the preset. @default 'fade' + * reduced-motion all come from the preset. Unified with the overlays' selector: the + * universal `motion` prop (RFC §D.12), not a separate `animation` axis. @default 'fade' */ - animation?: MotionPresetName; + motion?: MotionPresetName; children?: Snippet; }; diff --git a/web/routes/temas/animations/panel-cascade/+page.svelte b/web/routes/temas/animations/panel-cascade/+page.svelte index 12a945927..a2b77939e 100644 --- a/web/routes/temas/animations/panel-cascade/+page.svelte +++ b/web/routes/temas/animations/panel-cascade/+page.svelte @@ -95,13 +95,13 @@

Sin recipe propio: el contenedor se marca data-stagger (la foundation da el índice por :nth-child), los items cargan un preset existente - (animation="scale-fade") + data-state, y el stagger sale del + (motion="scale-fade") + data-state, y el stagger sale del preset (--motion-stagger-each, 0 = paralelo). Retención out: en el item. Cero --cascade-*.

{#each cards as i (i)}