Productizes the event-driven cascade on a real component (not the explicit `<Cascade>` orchestrator). When a DropdownMenu opens, its items fade in staggered by structural order — the appearance flows from the `open` (emerge) event, nothing in the app wires it. Architecture: a +1 GENERIC selector branch in the motion generator, NOT a per-item `data-state`. A `menuitem` isn't open/closed — the menu is — and eidos writing a state attr is a smell. The new container-driven form `[data-stagger][data-state='open'] > [data-animation-style='X']` fires each child's ENTER off the container's `data-state` (which soma already writes via the morfo `commits`); items carry only `data-animation-style`. ENTER only: the coordinated EXIT cascade (retain the container until children finish) is the deferred soma PresenceGroup work, so a closing container can't drive a child exit that would be cut off on unmount. - render-css.ts: `renderCssPresetRules` adds the container-driven enter branch (same declarations, shared comma selector) — reuses the existing presets + the foundation `:nth-child` stagger index; zero new system. - DropdownMenu: Content marks itself `[data-stagger]` + `--motion-stagger-each: var(--motion-stagger)` (20ms, themeable, no magic number); item/checkbox-item/radio-item carry `data-animation-style="fade"` (overridable). `fade` so item opacity doesn't fight the panel's own scale. - regen generated/base.css (8 css presets gain the container-driven enter). Verified in browser (frozen frame): index from `:nth-child`, `delay = idx × each`, opacity gradient in flight (Ruler 0.98 → Grid 0.89 → Guides 0.69, Log out 0.00). Honest limit (documented): only DIRECT-child items cascade — items in a <Group>/<RadioGroup> DOM wrapper aren't `:nth-child` of the panel, so they appear instantly (the "transparent intermediate"). Docs: dropdown README §Motion, cascade README §2 (concrete consumer), RFC §D.11.4. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>active-uix
parent
7d31cd3fd7
commit
9d40ebe9c8
@ -1,7 +1,13 @@
|
||||
<script lang="ts">
|
||||
/**
|
||||
* `data-animation-style="fade"` makes the item a participant in the Content's
|
||||
* event-driven cascade: when the menu opens, items fade in staggered by their
|
||||
* structural index (see `<DropdownMenu.Content>`). Override with a different
|
||||
* preset, or set the Content's `--motion-stagger-each: 0` for a parallel fade.
|
||||
*/
|
||||
import * as DropdownMenu from '$soma/components/dropdown-menu';
|
||||
import type { DropdownMenuItemProps } from './types';
|
||||
let { children, ...rest }: DropdownMenuItemProps = $props();
|
||||
</script>
|
||||
|
||||
<DropdownMenu.Item {...rest}>{@render children?.()}</DropdownMenu.Item>
|
||||
<DropdownMenu.Item data-animation-style="fade" {...rest}>{@render children?.()}</DropdownMenu.Item>
|
||||
|
||||
Loading…
Reference in new issue