From 2a378360e6f29a8fabcec7f8ff23e8d9a0d3c4bb Mon Sep 17 00:00:00 2001 From: dev Date: Sat, 20 Jun 2026 18:54:08 +0200 Subject: [PATCH] feat(motion): cascade fly-out submenus too (DropdownMenu + ContextMenu) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Completes the menu-family event-driven cascade: a SubContent fly-out now cascades its items in on open, same as the root panel. The SubContent has its own `data-state`, so the existing container-driven preset rule applies unchanged — it only needed the `[data-stagger]` marker on the panel + `--motion-stagger-each` on the sub-content recipe selector. Its items are the same `DropdownMenu.Item` (already `data-animation-style="fade"`). Menubar inherits via the shared DropdownMenu.SubContent. Verified at runtime: SubContent panel carries `data-stagger` + `data-state=open`, `--motion-stagger-each: 20ms`, items `name:fade-in` with consecutive `:nth-child` index 0/1/2 (a flat submenu cascades cleanly). `check` clean for the touched components. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../context-menu/context-menu-sub-content.svelte | 6 +++++- src/uix/eidos/components/context-menu/context-menu.css | 6 ++++-- src/uix/eidos/components/dropdown-menu/README.md | 4 ++++ .../dropdown-menu/dropdown-menu-sub-content.svelte | 7 ++++++- src/uix/eidos/components/dropdown-menu/dropdown-menu.css | 6 ++++-- 5 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/uix/eidos/components/context-menu/context-menu-sub-content.svelte b/src/uix/eidos/components/context-menu/context-menu-sub-content.svelte index baf48ce78..d53a5ef5d 100644 --- a/src/uix/eidos/components/context-menu/context-menu-sub-content.svelte +++ b/src/uix/eidos/components/context-menu/context-menu-sub-content.svelte @@ -1,11 +1,15 @@ - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/context-menu/context-menu.css b/src/uix/eidos/components/context-menu/context-menu.css index 2e7e69b3c..6f19d2128 100644 --- a/src/uix/eidos/components/context-menu/context-menu.css +++ b/src/uix/eidos/components/context-menu/context-menu.css @@ -44,8 +44,10 @@ `[data-stagger]`; each direct-child item carries `data-animation-style` and gets its structural index from `:nth-child`. `var(--motion-stagger)` is the canonical 20ms (0 = parallel). Same mechanism as DropdownMenu; the appearance - flows from the `open` (emerge) event — no JS writes the index. */ -[data-context-menu-content] { + flows from the `open` (emerge) event — no JS writes the index. Applies to the + root panel AND fly-out SubContent (both mark themselves `[data-stagger]`). */ +[data-context-menu-content], +[data-context-menu-sub-content] { --motion-stagger-each: var(--motion-stagger); } diff --git a/src/uix/eidos/components/dropdown-menu/README.md b/src/uix/eidos/components/dropdown-menu/README.md index 77232643c..ac569cd60 100644 --- a/src/uix/eidos/components/dropdown-menu/README.md +++ b/src/uix/eidos/components/dropdown-menu/README.md @@ -113,6 +113,10 @@ Two honest limits (both documented framework-wide): lifecycle), still deferred — so a closing container does **not** drive a child exit that would be cut off on unmount. +Fly-out **submenus** (`SubContent`) cascade too — the SubContent panel has its +own `data-state`, so the same marker + items work; a flat submenu cascades its +items consecutively (`:nth-child` 0/1/2…). + `` and `` share this verbatim (same soma menu machinery): ContextMenu has its own recipe; Menubar's per-menu panel already carries `data-dropdown-menu-content` and re-uses `DropdownMenu.Item`, so it inherits the diff --git a/src/uix/eidos/components/dropdown-menu/dropdown-menu-sub-content.svelte b/src/uix/eidos/components/dropdown-menu/dropdown-menu-sub-content.svelte index 63a316eda..35593ae47 100644 --- a/src/uix/eidos/components/dropdown-menu/dropdown-menu-sub-content.svelte +++ b/src/uix/eidos/components/dropdown-menu/dropdown-menu-sub-content.svelte @@ -1,11 +1,16 @@ - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/dropdown-menu/dropdown-menu.css b/src/uix/eidos/components/dropdown-menu/dropdown-menu.css index a824a4d20..0cb7e9522 100644 --- a/src/uix/eidos/components/dropdown-menu/dropdown-menu.css +++ b/src/uix/eidos/components/dropdown-menu/dropdown-menu.css @@ -55,8 +55,10 @@ and gets its structural index from `:nth-child`. This is the per-item delay step — `var(--motion-stagger)` (canonical 20ms); 0 = parallel, larger = a more deliberate ripple. The cascade flows from the `open` - (emerge) event — no JS writes the index, no consumer wiring. */ -[data-dropdown-menu-content] { + (emerge) event — no JS writes the index, no consumer wiring. Applies to the + root panel AND fly-out SubContent (both mark themselves `[data-stagger]`). */ +[data-dropdown-menu-content], +[data-dropdown-menu-sub-content] { --motion-stagger-each: var(--motion-stagger); }