refactor(select, combobox): concentric item radius via [data-shape-nest] (A2)

Both popups hand-rolled the item's concentric radius
(`calc(<panel-radius> − <content-inline-padding>)`). 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) <noreply@anthropic.com>

src/uix/eidos/components/combobox/combobox-item.svelte

@@ -5,7 +5,7 @@
 	let { children, ...rest }: ComboboxItemProps = $props();
 </script>
 
-<Combobox.Item {...rest}>
+<Combobox.Item data-shape-nest {...rest}>
 	{#snippet children(snippetProps)}
 		{@render children?.(snippetProps)}
 	{/snippet}

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;

src/uix/eidos/components/select/select-item.svelte

@@ -5,7 +5,7 @@
 	let { children, ...rest }: SelectItemProps = $props();
 </script>
 
-<Select.Item {...rest}>
+<Select.Item data-shape-nest {...rest}>
 	{#snippet children(snippetProps)}
 		{@render children?.(snippetProps)}
 	{/snippet}

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;