From d229447a33af25af838b164f42b636241125975e Mon Sep 17 00:00:00 2001 From: dev Date: Tue, 23 Jun 2026 02:30:13 +0200 Subject: [PATCH] feat(floating): cascade the canonical gap to all menus + panels Stamp `data-floating-gap` on every floating content so the token-driven offset (the foundation from the previous commit) drives the whole set, replacing the hardcoded per-component sideOffsets (0/4/6/8): - menus (dropdown, context, their sub-menus, menubar, select, navigation-menu) = flush (`menu`, gap 0); - panels (combobox, link-preview, popover, and the 5 pickers via composed PopoverContent) = `panel` (gap --space-1-5). The stamp is CONDITIONAL (`sideOffset === undefined ? archetype : undefined`, matching split-button): a consumer-set `sideOffset` still wins (the Popover / picker demos document `sideOffset={N}`); only the default falls through to the canonical token. The pickers default their `sideOffset` to undefined so they follow the panel token instead of a hardcoded 6. Verified in-browser: navigation-menu (demo sets no sideOffset) stamps `data-floating-gap="menu"` (STAMP branch); combobox / date-picker / dropdown (demos set sideOffset) stamp nothing (SUPPRESS branch -- override respected). The token-driven offset itself was validated in the pilot commit. check 0. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../eidos/components/color-picker/color-picker-content.svelte | 2 +- src/uix/eidos/components/combobox/combobox-content.svelte | 1 + .../eidos/components/context-menu/context-menu-content.svelte | 2 +- .../components/context-menu/context-menu-sub-content.svelte | 2 +- src/uix/eidos/components/date-picker/date-picker-content.svelte | 2 +- .../date-range-picker/date-range-picker-content.svelte | 2 +- .../eidos/components/dropdown-menu/dropdown-menu-content.svelte | 2 +- .../components/dropdown-menu/dropdown-menu-sub-content.svelte | 2 +- .../eidos/components/link-preview/link-preview-content.svelte | 2 +- src/uix/eidos/components/menubar/menubar-content.svelte | 2 +- .../components/navigation-menu/navigation-menu-content.svelte | 2 +- src/uix/eidos/components/popover/popover-content.svelte | 2 +- src/uix/eidos/components/select/select-content.svelte | 1 + src/uix/eidos/components/time-picker/time-picker-content.svelte | 2 +- .../time-range-picker/time-range-picker-content.svelte | 2 +- 15 files changed, 15 insertions(+), 13 deletions(-) diff --git a/src/uix/eidos/components/color-picker/color-picker-content.svelte b/src/uix/eidos/components/color-picker/color-picker-content.svelte index 6f07d7d19..2181cbf01 100644 --- a/src/uix/eidos/components/color-picker/color-picker-content.svelte +++ b/src/uix/eidos/components/color-picker/color-picker-content.svelte @@ -8,7 +8,7 @@ let { size, align = 'start', - sideOffset = 6, + sideOffset, collisionPadding = 12, children: bodyContent, ...rest diff --git a/src/uix/eidos/components/combobox/combobox-content.svelte b/src/uix/eidos/components/combobox/combobox-content.svelte index 233bd6da2..e7de71bda 100644 --- a/src/uix/eidos/components/combobox/combobox-content.svelte +++ b/src/uix/eidos/components/combobox/combobox-content.svelte @@ -40,6 +40,7 @@ style={composedStyle} data-list-surface="" data-depth="overlay" + data-floating-gap={rest.sideOffset === undefined ? 'panel' : undefined} data-size={resolvedSize} data-variant={resolvedVariant} data-color={resolvedColor} 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 6f9d50694..542f3c063 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 d80bc8188..fed99c600 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/date-picker/date-picker-content.svelte b/src/uix/eidos/components/date-picker/date-picker-content.svelte index 953392885..e33ae0dbe 100644 --- a/src/uix/eidos/components/date-picker/date-picker-content.svelte +++ b/src/uix/eidos/components/date-picker/date-picker-content.svelte @@ -9,7 +9,7 @@ let { size, align = 'end', - sideOffset = 6, + sideOffset, collisionPadding = 12, width, minWidth, diff --git a/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte b/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte index d8c94ed89..b24d9e440 100644 --- a/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte +++ b/src/uix/eidos/components/date-range-picker/date-range-picker-content.svelte @@ -9,7 +9,7 @@ let { size, align = 'end', - sideOffset = 6, + sideOffset, collisionPadding = 12, width, minWidth, diff --git a/src/uix/eidos/components/dropdown-menu/dropdown-menu-content.svelte b/src/uix/eidos/components/dropdown-menu/dropdown-menu-content.svelte index fd322cf4a..4e839a2b7 100644 --- a/src/uix/eidos/components/dropdown-menu/dropdown-menu-content.svelte +++ b/src/uix/eidos/components/dropdown-menu/dropdown-menu-content.svelte @@ -34,7 +34,7 @@ setListSurfaceSizeContext({ getSize: () => resolvedSize }); - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} 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 0f70f3b35..60ecb6a96 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 @@ -21,7 +21,7 @@ const resolvedSize = $derived(eidos.resolve(size ?? sizeCtx?.getSize(), 'md')); - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/link-preview/link-preview-content.svelte b/src/uix/eidos/components/link-preview/link-preview-content.svelte index 268e8e4ba..563295e0c 100644 --- a/src/uix/eidos/components/link-preview/link-preview-content.svelte +++ b/src/uix/eidos/components/link-preview/link-preview-content.svelte @@ -22,7 +22,7 @@ const resolvedSize = $derived(eidos.resolve(size, 'md')); - + {#snippet children(snippetProps)} {@render bodyContent?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/menubar/menubar-content.svelte b/src/uix/eidos/components/menubar/menubar-content.svelte index a4c3d31b1..24adc4db9 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 79cb58165..c6618a782 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/popover/popover-content.svelte b/src/uix/eidos/components/popover/popover-content.svelte index 0160f70e8..eb20e9b94 100644 --- a/src/uix/eidos/components/popover/popover-content.svelte +++ b/src/uix/eidos/components/popover/popover-content.svelte @@ -74,7 +74,7 @@ style={composedStyle} data-size={resolvedSize} data-depth="overlay" - data-floating-gap="panel" + data-floating-gap={rest.sideOffset === undefined ? 'panel' : undefined} data-animation-style={motion === 'none' ? undefined : motion} > {#snippet children(snippetProps)} diff --git a/src/uix/eidos/components/select/select-content.svelte b/src/uix/eidos/components/select/select-content.svelte index 2a72b1856..3fcf1b86e 100644 --- a/src/uix/eidos/components/select/select-content.svelte +++ b/src/uix/eidos/components/select/select-content.svelte @@ -35,6 +35,7 @@ style={composedStyle} data-list-surface="" data-depth="overlay" + data-floating-gap={rest.sideOffset === undefined ? 'menu' : undefined} data-size={resolvedSize} data-variant={resolvedVariant} data-color={resolvedColor} diff --git a/src/uix/eidos/components/time-picker/time-picker-content.svelte b/src/uix/eidos/components/time-picker/time-picker-content.svelte index 36bf11c1a..e3010044c 100644 --- a/src/uix/eidos/components/time-picker/time-picker-content.svelte +++ b/src/uix/eidos/components/time-picker/time-picker-content.svelte @@ -9,7 +9,7 @@ let { size, align = 'end', - sideOffset = 6, + sideOffset, collisionPadding = 12, width, minWidth, diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker-content.svelte b/src/uix/eidos/components/time-range-picker/time-range-picker-content.svelte index db11006e8..28476fd34 100644 --- a/src/uix/eidos/components/time-range-picker/time-range-picker-content.svelte +++ b/src/uix/eidos/components/time-range-picker/time-range-picker-content.svelte @@ -9,7 +9,7 @@ let { size, align = 'end', - sideOffset = 6, + sideOffset, collisionPadding = 12, width, minWidth,