From 009f5367a7dff1951d7fd37133ec983344d1322a Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 22 Jun 2026 12:10:30 +0200 Subject: [PATCH] feat(menu-family): adopt the `overlay` elevation plane (B2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Extend the dropdown's overlay-plane adoption to the rest of the menu family: - context-menu: Content / SubContent carry `data-depth="overlay"`; prune the recipe's content-border / bg / shadow tokens + point the arrow at `--depth-overlay-surface`. - menubar: its per-menu panel reuses `[data-dropdown-menu-content]`, so the dropdown's prune (f80f2225) had left it with NO elevation — restore it by stamping `data-depth="overlay"` on the eidos Content wrapper. (regression fix) - navigation-menu: mega-menu panel carries `data-depth="overlay"`; drop the hardcoded border / bg / shadow from the recipe CSS. Radius / font / color stay each panel's own. Verified in-browser: all three paint bg oklch(0.285) + 1px border + shadow/halo from the plane; check 0. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../context-menu/context-menu-content.svelte | 2 +- .../context-menu/context-menu-sub-content.svelte | 2 +- src/uix/eidos/components/context-menu/context-menu.css | 10 +++++----- .../eidos/components/menubar/menubar-content.svelte | 2 +- .../navigation-menu/navigation-menu-content.svelte | 2 +- .../components/navigation-menu/navigation-menu.css | 5 ++--- src/uix/eidos/generated/base.css | 4 ---- src/uix/eidos/lib/recipes/base.ts | 4 ---- 8 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/uix/eidos/components/context-menu/context-menu-content.svelte b/src/uix/eidos/components/context-menu/context-menu-content.svelte index 9616f4977..6f9d50694 100644 --- a/src/uix/eidos/components/context-menu/context-menu-content.svelte +++ b/src/uix/eidos/components/context-menu/context-menu-content.svelte @@ -22,7 +22,7 @@ setListSurfaceSizeContext({ getSize: () => resolvedSize }); - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} 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 a7dc47867..d80bc8188 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 @@ -20,7 +20,7 @@ const resolvedSize = $derived(eidos.resolve(size ?? sizeCtx?.getSize(), 'md')); - + {#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 69ecde6d1..2f3cb4baa 100644 --- a/src/uix/eidos/components/context-menu/context-menu.css +++ b/src/uix/eidos/components/context-menu/context-menu.css @@ -25,11 +25,9 @@ max-block-size: var(--context-menu-content-max-height, min(60vh, 22rem)); overflow-y: auto; padding: var(--context-menu-content-padding, var(--space-1)); - border: var(--context-menu-content-border-width, 1px) solid - var(--context-menu-content-border-color, var(--color-border-default)); + /* Elevation — surface · border · shadow — from the `overlay` plane via + `data-depth` (A1, Decisión 8). Radius / font / color stay the panel's own. */ border-radius: var(--context-menu-content-radius, var(--radius-md)); - background: var(--context-menu-content-bg, var(--color-surface-overlay)); - box-shadow: var(--context-menu-content-shadow, var(--shadow-overlay)); font-family: var(--style-label-font-family, var(--font-ui)); font-size: var(--context-menu-content-font-size, var(--font-size-sm)); color: var(--color-content-primary); @@ -178,7 +176,9 @@ /* ── Arrow ────────────────────────────────────────────────────────── */ [data-context-menu-arrow] { - fill: var(--context-menu-content-bg, var(--color-surface-overlay)); + /* The arrow is part of the elevation surface — consume the `overlay` plane so + it always matches the panel (A1, like popover), not a parallel token. */ + fill: var(--depth-overlay-surface); } /* ── State transitions ────────────────────────────────────────────── */ diff --git a/src/uix/eidos/components/menubar/menubar-content.svelte b/src/uix/eidos/components/menubar/menubar-content.svelte index 9e6a34ac4..a4c3d31b1 100644 --- a/src/uix/eidos/components/menubar/menubar-content.svelte +++ b/src/uix/eidos/components/menubar/menubar-content.svelte @@ -30,7 +30,7 @@ `DropdownMenu.Item` `data-animation-style="fade"` (re-used as Menubar.Item) already apply — this marker is all that's needed. See dropdown-menu README → Motion. --> - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu-content.svelte b/src/uix/eidos/components/navigation-menu/navigation-menu-content.svelte index dadc53666..79cb58165 100644 --- a/src/uix/eidos/components/navigation-menu/navigation-menu-content.svelte +++ b/src/uix/eidos/components/navigation-menu/navigation-menu-content.svelte @@ -4,4 +4,4 @@ let { children, ...rest }: NavigationMenuContentProps = $props(); -{@render children?.()} +{@render children?.()} diff --git a/src/uix/eidos/components/navigation-menu/navigation-menu.css b/src/uix/eidos/components/navigation-menu/navigation-menu.css index b61b10feb..0b84bec17 100644 --- a/src/uix/eidos/components/navigation-menu/navigation-menu.css +++ b/src/uix/eidos/components/navigation-menu/navigation-menu.css @@ -165,11 +165,10 @@ min-inline-size: 14rem; padding: var(--space-2); - border: var(--border-width) solid var(--color-border-default); + /* Elevation — surface · border · shadow — from the `overlay` plane via + `data-depth` (A1, Decisión 8). Radius / color stay the panel's own. */ border-radius: var(--radius-lg); - background: var(--color-surface-overlay); color: var(--color-content-primary); - box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo); outline: none; } diff --git a/src/uix/eidos/generated/base.css b/src/uix/eidos/generated/base.css index b255b3a93..84fa56905 100644 --- a/src/uix/eidos/generated/base.css +++ b/src/uix/eidos/generated/base.css @@ -3375,11 +3375,7 @@ --context-menu-content-min-width: 12rem; --context-menu-content-max-height: min(60vh, 22rem); --context-menu-content-padding: var(--space-1); - --context-menu-content-border-width: var(--border-width); - --context-menu-content-border-color: var(--color-border-default); --context-menu-content-radius: var(--radius-md); - --context-menu-content-bg: var(--color-surface-overlay); - --context-menu-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo); --context-menu-content-font-size: var(--font-size-sm); --context-menu-item-gap: var(--space-2); --context-menu-item-height: 2rem; diff --git a/src/uix/eidos/lib/recipes/base.ts b/src/uix/eidos/lib/recipes/base.ts index 1e66aa4c8..ee72f41ff 100644 --- a/src/uix/eidos/lib/recipes/base.ts +++ b/src/uix/eidos/lib/recipes/base.ts @@ -4220,11 +4220,7 @@ export const THEME_BASE_RECIPE_TOKENS = { 'content-min-width': '12rem', 'content-max-height': 'min(60vh, 22rem)', 'content-padding': 'var(--space-1)', - 'content-border-width': 'var(--border-width)', - 'content-border-color': 'var(--color-border-default)', 'content-radius': 'var(--radius-md)', - 'content-bg': 'var(--color-surface-overlay)', - 'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)', 'content-font-size': 'var(--font-size-sm)', 'item-gap': 'var(--space-2)', 'item-height': '2rem',