From 8272a0288461f645740de75de56d29f8f2e18e23 Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 22 Jun 2026 16:37:53 +0200 Subject: [PATCH] refactor(select, combobox): concentric item radius via [data-shape-nest] (A2) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Both popups hand-rolled the item's concentric radius (`calc( − )`). Consume the shared shape-engine rule instead: each Content panel exposes its radius + inline inset as `--shape-outer-radius` + `--shape-nest-gap`, the Item stamps `data-shape-nest`, and the global `[data-shape-nest]` rule computes the concentric radius once. No-op (same radius): combobox item = 4px (lg 10 − content-px 6), verified live; select item = 4px, verified via a detached probe (the real select popup hangs the preview renderer — known infra issue). Extends the menubar migration (28b0c102). Co-Authored-By: Claude Opus 4.8 (1M context) --- src/uix/eidos/components/combobox/combobox-item.svelte | 2 +- src/uix/eidos/components/combobox/combobox.css | 10 ++++++---- src/uix/eidos/components/select/select-item.svelte | 2 +- src/uix/eidos/components/select/select.css | 10 ++++++---- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/uix/eidos/components/combobox/combobox-item.svelte b/src/uix/eidos/components/combobox/combobox-item.svelte index 74b58990f..e7fd7b322 100644 --- a/src/uix/eidos/components/combobox/combobox-item.svelte +++ b/src/uix/eidos/components/combobox/combobox-item.svelte @@ -5,7 +5,7 @@ let { children, ...rest }: ComboboxItemProps = $props(); - + {#snippet children(snippetProps)} {@render children?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/combobox/combobox.css b/src/uix/eidos/components/combobox/combobox.css index c8932761b..3e65339ca 100644 --- a/src/uix/eidos/components/combobox/combobox.css +++ b/src/uix/eidos/components/combobox/combobox.css @@ -267,6 +267,10 @@ --_combobox-content-px: var(--space-1-5); --_combobox-font-size: var(--font-size-md); --_combobox-content-width: var(--_combobox-match-anchor-width, 14rem); + /* Concentric items: expose the panel radius + inline inset to the shared + `[data-shape-nest]` rule (items consume it, no hand-rolled calc). */ + --shape-outer-radius: var(--radius-lg); + --shape-nest-gap: var(--_combobox-content-px); box-sizing: border-box; inline-size: min(var(--_combobox-content-width), calc(100vw - var(--space-4))); @@ -408,10 +412,8 @@ gap: var(--space-2); min-inline-size: 0; padding-inline: var(--space-2); - /* Concentric with the popup: inner radius = content radius − the content's - inline padding (the inset), like menubar.css. Height comes from the - archetype's font-driven padding-block. */ - border-radius: calc(var(--radius-lg) - var(--_combobox-content-px)); + /* Concentric radius from the shared `[data-shape-nest]` rule — the panel exposes + --shape-outer-radius + --shape-nest-gap above. Height: archetype font-driven. */ color: var(--color-content-primary); cursor: pointer; outline: none; diff --git a/src/uix/eidos/components/select/select-item.svelte b/src/uix/eidos/components/select/select-item.svelte index 5ce84e752..7afeeb911 100644 --- a/src/uix/eidos/components/select/select-item.svelte +++ b/src/uix/eidos/components/select/select-item.svelte @@ -5,7 +5,7 @@ let { children, ...rest }: SelectItemProps = $props(); - + {#snippet children(snippetProps)} {@render children?.(snippetProps)} {/snippet} diff --git a/src/uix/eidos/components/select/select.css b/src/uix/eidos/components/select/select.css index 65819eeda..ba26780ce 100644 --- a/src/uix/eidos/components/select/select.css +++ b/src/uix/eidos/components/select/select.css @@ -169,6 +169,10 @@ --_select-content-px: var(--select-content-px-md); --_select-font-size: var(--select-font-size-md); --_select-content-width: var(--_select-match-anchor-width, var(--select-content-min-width)); + /* Concentric items: expose the panel radius + inline inset to the shared + `[data-shape-nest]` rule (items consume it, no hand-rolled calc). */ + --shape-outer-radius: var(--select-content-radius); + --shape-nest-gap: var(--_select-content-px); box-sizing: border-box; inline-size: min(var(--_select-content-width), calc(100vw - var(--space-4))); @@ -294,10 +298,8 @@ gap: var(--select-item-gap); min-inline-size: 0; padding-inline: var(--select-item-px); - /* Concentric with the popup: inner radius = content radius − the content's - inline padding. Height comes from the archetype's font-driven - padding-block. */ - border-radius: calc(var(--select-content-radius) - var(--_select-content-px)); + /* Concentric radius from the shared `[data-shape-nest]` rule — the panel exposes + --shape-outer-radius + --shape-nest-gap above. Height: archetype font-driven. */ color: var(--select-item-color); cursor: pointer; outline: none;