feat(eidos): depth adoption — elevated components consume the channel (shadow + halo)

The Fase 2 rim halo now reaches real UI, not just the showcase. Each elevated
component's shadow signal (recipe tokens in recipes/base.ts + the few direct
box-shadow uses) now composes `var(--depth-{plane}-shadow), var(--depth-{plane}-halo)`.

Reaches: popover, dialog, drawer, dropdown/context/navigation-menu, menubar,
select, tooltip, card, combobox, command, link-preview, words.

Shadow signal only — z-index stays component-managed (the z bands are finer than
the 5 planos), so zero stacking risk. Verified: dialog keeps its own z-index 71
and composes drop shadow + oklab halo. Retuning a plane now retunes every
component on it.

Verified: npm run check 0 errors; eidos 183/186 (3 pre-existing `words` failures,
unrelated). Regenerated generated/base.css. THEMING 29 updated.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/uix/eidos/THEMING.md

@@ -2288,9 +2288,17 @@ añade/renombra/retunea); los primitivos siguen accesibles (`box-shadow`/`z-inde
 paso); la capa eventful es aditiva y anulable (sobreescribe keyframes/signatures). Demo en
 vivo: `/temas/profundidad`.
 
+**Adopción** (hecha, 2026-06-05): los componentes elevados consumen el canal — sus tokens de
+sombra (`--{c}-…-shadow` en `recipes/base.ts`, o el `box-shadow` directo) componen
+`var(--depth-{plane}-shadow), var(--depth-{plane}-halo)`, así que **el halo llega a
+popover · dialog · drawer · dropdown/context/navigation-menu · menubar · select · tooltip ·
+card · combobox · command · link-preview · words**. La `z-index` la sigue gestionando cada
+componente (las bandas z son más finas que los 5 planos) — la adopción es solo de la señal
+sombra+halo, **cero riesgo de stacking**. La adopción plena vía atributo `data-depth` (que
+unificaría también la z) queda como opción futura.
+
 **Pendiente** (no del núcleo): atmósfera frost/scrim (Fase 4 — requiere superficies
-translúcidas) + builder `applyDepth(seed)`, y **adopción por componentes** (hoy
+translúcidas) + builder `applyDepth(seed)`.
-card/dialog/popover cablean sombra/z aparte; migrarlos a `data-depth` es una pasada separada).
 
 ---
 

src/uix/eidos/components/combobox/combobox.css

@@ -278,7 +278,7 @@
 	border: var(--border-width) solid var(--color-border-default);
 	border-radius: var(--radius-lg);
 	background: var(--color-surface-overlay);
-	box-shadow: var(--shadow-overlay);
+	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	color: var(--color-content-primary);
 	font-family: var(--font-ui);
 	font-size: var(--_combobox-font-size);
@@ -312,12 +312,12 @@
 }
 
 [data-combobox-content][data-variant='outline'] {
-	box-shadow: var(--shadow-raised);
+	box-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
 }
 
 [data-combobox-content][data-variant='ghost'] {
 	border-color: transparent;
-	box-shadow: var(--shadow-raised);
+	box-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
 }
 
 [data-combobox-content][data-state='open'] {

src/uix/eidos/components/command/command.css

@@ -36,7 +36,7 @@
 	border: 1px solid var(--color-border-default);
 	border-radius: var(--radius-md);
 	background: var(--color-surface-overlay);
-	box-shadow: var(--shadow-overlay);
+	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	overflow: hidden;
 	outline: none;
 }

src/uix/eidos/components/link-preview/link-preview.css

@@ -64,7 +64,7 @@
 	border-radius: var(--radius-md);
 	background: var(--color-surface-overlay);
 	color: var(--color-content-primary);
-	box-shadow: var(--shadow-overlay);
+	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	font-family: var(--font-ui);
 	font-size: var(--_link-preview-font-size);
 	font-weight: 400;

src/uix/eidos/components/navigation-menu/navigation-menu.css

@@ -169,7 +169,7 @@
 	border-radius: var(--radius-lg);
 	background: var(--color-surface-overlay);
 	color: var(--color-content-primary);
-	box-shadow: var(--shadow-overlay);
+	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	outline: none;
 }
 

src/uix/eidos/components/words/words.css

@@ -221,7 +221,7 @@
 	background: var(--words-bg);
 	border: var(--words-border-width) solid var(--words-border);
 	border-radius: var(--words-radius-md);
-	box-shadow: var(--shadow-overlay);
+	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	animation: words-bubble-in 120ms var(--words-transition-ease);
 }
 [data-words-bubble-menu][data-side='top'] {
@@ -1007,7 +1007,7 @@ button[data-words-breadcrumb-crumb]:focus-visible {
 	border-inline-start: var(--words-border-width) solid var(--words-border);
 	border-start-end-radius: var(--_words-radius);
 	border-end-end-radius: var(--_words-radius);
-	box-shadow: var(--shadow-overlay);
+	box-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	transform: translateX(100%);
 	transition: transform var(--words-transition-duration) var(--words-transition-ease);
 }

src/uix/eidos/generated/base.css

@@ -807,7 +807,7 @@
 	--card-emerge-ease: var(--ease-out);
 	--card-emerge-distance: 8px;
 	--card-hover-lift: -2px;
-	--card-hover-shadow: var(--shadow-overlay);
+	--card-hover-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--card-press-scale: 0.985;
 	--card-press-duration: 80ms;
 	--card-selected-ring-width: 2px;
@@ -926,7 +926,7 @@
 	--dialog-content-border: var(--color-border-default);
 	--dialog-content-border-width: var(--border-width);
 	--dialog-content-radius: var(--radius-xl);
-	--dialog-content-shadow: var(--shadow-overlay);
+	--dialog-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--dialog-content-max-height: calc(100dvh - var(--space-8));
 	--dialog-content-max-height-sheet: 85dvh;
 	--dialog-content-width-sm: 420px;
@@ -1043,7 +1043,7 @@
 	--form-panel-padding: var(--space-5);
 	--form-panel-border: var(--color-border-default);
 	--form-panel-bg: var(--color-surface-raised);
-	--form-panel-shadow: var(--shadow-raised);
+	--form-panel-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
 	--form-grid-min: 18rem;
 	--form-grid-column-gap: var(--space-5);
 	--form-action-height-xs: var(--control-height-xs);
@@ -1103,8 +1103,8 @@
 	--drawer-content-border: var(--color-border-default);
 	--drawer-content-border-width: var(--border-width);
 	--drawer-content-radius: var(--radius-xl);
-	--drawer-content-shadow: var(--shadow-overlay);
+	--drawer-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
-	--drawer-content-shadow-dragging: var(--shadow-overlay-strong, var(--shadow-overlay));
+	--drawer-content-shadow-dragging: var(--shadow-overlay-strong, var(--depth-overlay-shadow)), var(--depth-overlay-halo);
 	--drawer-content-ring-dragging-width: 2px;
 	--drawer-content-ring-dragging-color: color-mix( in srgb, var(--color-content-secondary) 32%, transparent );
 	--drawer-content-ring-dragging-offset: 2px;
@@ -1571,7 +1571,7 @@
 	--calendar-outline-bg: var(--color-surface-default);
 	--calendar-outline-shadow: none;
 	--calendar-color: var(--color-content-primary);
-	--calendar-shadow: var(--shadow-raised);
+	--calendar-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
 	--calendar-font-family: var(--font-ui);
 	--calendar-font-size-xs: var(--font-size-xs);
 	--calendar-font-size-sm: var(--font-size-xs);
@@ -1700,7 +1700,7 @@
 	--popover-bg: var(--color-surface-overlay);
 	--popover-color: var(--color-content-primary);
 	--popover-border: color-mix( in srgb, var(--color-border-default) 82%, var(--popover-bg) );
-	--popover-shadow: var(--shadow-overlay);
+	--popover-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--popover-transition-duration: var(--duration-fast);
 	--popover-transition-ease: var(--ease-default);
 	--popover-close-size: var(--control-height-xs);
@@ -2013,9 +2013,9 @@
 	--select-content-radius: var(--radius-lg);
 	--select-content-bg: var(--color-surface-overlay);
 	--select-content-color: var(--color-content-primary);
-	--select-content-shadow: var(--shadow-overlay);
+	--select-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
-	--select-content-outline-shadow: var(--shadow-raised);
+	--select-content-outline-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
-	--select-content-ghost-shadow: var(--shadow-raised);
+	--select-content-ghost-shadow: var(--depth-raised-shadow), var(--depth-raised-halo);
 	--select-open-duration: var(--duration-normal);
 	--select-close-duration: var(--duration-fast);
 	--select-viewport-gap: var(--space-0-5);
@@ -2849,7 +2849,7 @@
 	--toast-provider-py: var(--space-3);
 	--toast-provider-border-width: var(--border-width);
 	--toast-provider-radius: var(--radius-lg);
-	--toast-provider-shadow: var(--shadow-overlay);
+	--toast-provider-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--toast-accent-width: 3px;
 	--toast-transition-duration: var(--duration-fast);
 	--toast-transition-ease: var(--ease-default);
@@ -3046,7 +3046,7 @@
 	--tooltip-bg: var(--color-surface-overlay);
 	--tooltip-color: var(--color-content-primary);
 	--tooltip-border: color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) );
-	--tooltip-shadow: var(--shadow-overlay);
+	--tooltip-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--box-display: revert-layer;
 	--box-position: revert-layer;
 	--box-width: revert-layer;
@@ -3221,7 +3221,7 @@
 	--dropdown-menu-content-border-color: var(--color-border-default);
 	--dropdown-menu-content-radius: var(--radius-md);
 	--dropdown-menu-content-bg: var(--color-surface-overlay);
-	--dropdown-menu-content-shadow: var(--shadow-overlay);
+	--dropdown-menu-content-shadow: var(--depth-overlay-shadow), var(--depth-overlay-halo);
 	--dropdown-menu-content-font-size: var(--font-size-sm);
 	--dropdown-menu-item-gap: var(--space-2);
 	--dropdown-menu-item-height: 2rem;
@@ -3243,7 +3243,7 @@
 	--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(--shadow-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;

src/uix/eidos/lib/recipes/base.ts

@@ -519,7 +519,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'emerge-ease': 'var(--ease-out)',
 		'emerge-distance': '8px',
 		'hover-lift': '-2px',
-		'hover-shadow': 'var(--shadow-overlay)',
+		'hover-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
 		'press-scale': '0.985',
 		'press-duration': '80ms',
 		'selected-ring-width': '2px',
@@ -739,7 +739,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'content-border': 'var(--color-border-default)',
 		'content-border-width': 'var(--border-width)',
 		'content-radius': 'var(--radius-xl)',
-		'content-shadow': 'var(--shadow-overlay)',
+		'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
 		'content-max-height': 'calc(100dvh - var(--space-8))',
 		'content-max-height-sheet': '85dvh',
 		'content-width-sm': '420px',
@@ -861,7 +861,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'panel-padding': 'var(--space-5)',
 		'panel-border': 'var(--color-border-default)',
 		'panel-bg': 'var(--color-surface-raised)',
-		'panel-shadow': 'var(--shadow-raised)',
+		'panel-shadow': 'var(--depth-raised-shadow), var(--depth-raised-halo)',
 		'grid-min': '18rem',
 		'grid-column-gap': 'var(--space-5)',
 		'action-height-xs': 'var(--control-height-xs)',
@@ -923,8 +923,9 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'content-border': 'var(--color-border-default)',
 		'content-border-width': 'var(--border-width)',
 		'content-radius': 'var(--radius-xl)',
-		'content-shadow': 'var(--shadow-overlay)',
+		'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
-		'content-shadow-dragging': 'var(--shadow-overlay-strong, var(--shadow-overlay))',
+		'content-shadow-dragging':
+			'var(--shadow-overlay-strong, var(--depth-overlay-shadow)), var(--depth-overlay-halo)',
 		'content-ring-dragging-width': '2px',
 		'content-ring-dragging-color':
 			'color-mix( in srgb, var(--color-content-secondary) 32%, transparent )',
@@ -1543,7 +1544,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'outline-bg': 'var(--color-surface-default)',
 		'outline-shadow': 'none',
 		color: 'var(--color-content-primary)',
-		shadow: 'var(--shadow-raised)',
+		shadow: 'var(--depth-raised-shadow), var(--depth-raised-halo)',
 		'font-family': 'var(--font-ui)',
 		'font-size-xs': 'var(--font-size-xs)',
 		'font-size-sm': 'var(--font-size-xs)',
@@ -1679,7 +1680,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		bg: 'var(--color-surface-overlay)',
 		color: 'var(--color-content-primary)',
 		border: 'color-mix( in srgb, var(--color-border-default) 82%, var(--popover-bg) )',
-		shadow: 'var(--shadow-overlay)',
+		shadow: 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
 		'transition-duration': 'var(--duration-fast)',
 		'transition-ease': 'var(--ease-default)',
 		'close-size': 'var(--control-height-xs)',
@@ -2041,9 +2042,9 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'content-radius': 'var(--radius-lg)',
 		'content-bg': 'var(--color-surface-overlay)',
 		'content-color': 'var(--color-content-primary)',
-		'content-shadow': 'var(--shadow-overlay)',
+		'content-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
-		'content-outline-shadow': 'var(--shadow-raised)',
+		'content-outline-shadow': 'var(--depth-raised-shadow), var(--depth-raised-halo)',
-		'content-ghost-shadow': 'var(--shadow-raised)',
+		'content-ghost-shadow': 'var(--depth-raised-shadow), var(--depth-raised-halo)',
 		'open-duration': 'var(--duration-normal)',
 		'close-duration': 'var(--duration-fast)',
 		'viewport-gap': 'var(--space-0-5)',
@@ -3328,7 +3329,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'provider-py': 'var(--space-3)',
 		'provider-border-width': 'var(--border-width)',
 		'provider-radius': 'var(--radius-lg)',
-		'provider-shadow': 'var(--shadow-overlay)',
+		'provider-shadow': 'var(--depth-overlay-shadow), var(--depth-overlay-halo)',
 		'accent-width': '3px',
 		'transition-duration': 'var(--duration-fast)',
 		'transition-ease': 'var(--ease-default)',
@@ -3695,7 +3696,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		bg: 'var(--color-surface-overlay)',
 		color: 'var(--color-content-primary)',
 		border: 'color-mix( in srgb, var(--color-border-default) 84%, var(--tooltip-bg) )',
-		shadow: 'var(--shadow-overlay)'
+		shadow: 'var(--depth-overlay-shadow), var(--depth-overlay-halo)'
 	},
 
 	// ─────────────────────────────────────────────────────────────────────
@@ -4050,7 +4051,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'content-border-color': 'var(--color-border-default)',
 		'content-radius': 'var(--radius-md)',
 		'content-bg': 'var(--color-surface-overlay)',
-		'content-shadow': 'var(--shadow-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',
@@ -4078,7 +4079,7 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'content-border-color': 'var(--color-border-default)',
 		'content-radius': 'var(--radius-md)',
 		'content-bg': 'var(--color-surface-overlay)',
-		'content-shadow': 'var(--shadow-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',