uix(color): abre `color` en button-group + highlight (delegan a Button/Mark)

Ambos delegan el color a un componente ya abierto, así que es solo tipo + wrapper
(sin recipe/css):

- button-group: pasa `color` a los <Button> hijos por contexto (cada Button lo
  resuelve, incl. custom). Tipo 'primary'|'secondary'|'neutral' → ComponentColorProp;
  el `data-color` del <Group> (presentacional, sin consumidor) pasa por
  `resolveComponentColor` para no estampar un hex crudo inválido.
- highlight: envuelve coincidencias en `<mark data-mark>` (ya forward-ready). Tipo
  → ComponentColorProp; wrapper estampa el trío en el shell `[data-highlight]` +
  cada `<mark>`, con el seed `--color-custom` en el shell que los marks heredan.

check: 0 errores en componentes tocados (el total oscila 76↔94 por la caché de
svelte-check aflorando errores `any` de demos ajenos).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

src/uix/eidos/components/button-group/button-group.svelte

@@ -14,6 +14,7 @@
 	 * an attr the morfo doesn't declare.
 	 */
 	import { ActiveEidos } from '$uix/eidos';
+	import { resolveComponentColor } from '$uix/eidos/lib/component-color';
 	import Group from '$uix/eidos/components/group';
 	import type { ButtonGroupProps } from './types';
 	import { setButtonGroupEidosCtx } from './context';
@@ -39,6 +40,10 @@
 	// container (main-axis), which is rarely the wanted default, so it stays OFF
 	// (natural content widths) unless set explicitly.
 	const resolvedEqual = $derived(equal ?? (attached && orientation === 'vertical'));
+	// The Group's `data-color` is presentational only — child Buttons take the
+	// colour via context and resolve it themselves (incl. raw custom values). Route
+	// the stamp so a raw value doesn't land invalidly in `data-color`.
+	const colorAttrs = $derived(resolveComponentColor(color));
 
 	// Shared visual defaults for child <Button>s. Getters keep it reactive:
 	// when a group prop changes, every child re-reads on its next derivation.
@@ -71,7 +76,8 @@
 	data-orientation={orientation}
 	data-variant={variant}
 	data-size={resolvedSize}
-	data-color={color}
+	data-color={colorAttrs.dataColor}
+	data-color-custom={colorAttrs.isCustom ? '' : undefined}
 	data-block={block ? '' : undefined}
 	data-equal={resolvedEqual ? '' : undefined}
 	data-disabled={disabled ? '' : undefined}

src/uix/eidos/components/button-group/types.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { GroupProps } from '$uix/eidos/components/group';
 import type { ButtonSize, ButtonVariant } from '$uix/eidos/components/button';
-import type { ResponsiveProp } from '$uix/eidos/lib/types';
+import type { ComponentColorProp, ResponsiveProp } from '$uix/eidos/lib/types';
 
 /** Visual variant propagated to child Buttons. Mirrors {@link ButtonVariant}. */
 export type ButtonGroupVariant = ButtonVariant;
@@ -9,8 +9,8 @@ export type ButtonGroupVariant = ButtonVariant;
 /** Sizing scale propagated to child Buttons. Mirrors {@link ButtonSize}. */
 export type ButtonGroupSize = ButtonSize;
 
-/** Hierarchical color propagated to child Buttons (non-evaluative). */
-export type ButtonGroupColor = 'primary' | 'secondary' | 'neutral';
+/** Colour propagated to child Buttons — full system (role · intent · scale · value). */
+export type ButtonGroupColor = ComponentColorProp;
 
 /** Layout axis of the group. */
 export type ButtonGroupOrientation = 'horizontal' | 'vertical';

src/uix/eidos/components/highlight/highlight.svelte

@@ -11,6 +11,8 @@
 	 * inherit the same recipe as the standalone `<Mark>` primitive.
 	 */
 	import { ActiveEidos } from '$uix/eidos';
+	import { composeInlineStyle } from '$uix/eidos/lib/style';
+	import { resolveComponentColor } from '$uix/eidos/lib/component-color';
 	import type { HighlightProps } from './types';
 
 	let {
@@ -26,6 +28,11 @@
 
 	const eidos = ActiveEidos.require();
 	const resolvedColor = $derived(eidos.resolve(color) ?? 'fulfill');
+	// `color` accepts the full system: canonical → `data-color`, raw value →
+	// `data-color-custom` + a `--color-custom` seed on the shell that the nested
+	// marks inherit (so their shared-palette forward derives the custom ramp).
+	const colorAttrs = $derived(resolveComponentColor(resolvedColor));
+	const mergedStyle = $derived(composeInlineStyle(tagStyle, colorAttrs.customStyle));
 
 	type Segment = { text: string; mark: boolean };
 
@@ -60,12 +67,16 @@
 	{...restProps}
 	class={className}
 	data-highlight=""
-	data-color={resolvedColor}
-	style={tagStyle}
+	data-color={colorAttrs.dataColor}
+	data-color-custom={colorAttrs.isCustom ? '' : undefined}
+	style={mergedStyle}
 >
 	{#each segments as seg}
 		{#if seg.mark}
-			<mark data-mark="" data-color={resolvedColor}>{seg.text}</mark>
+			<mark
+				data-mark=""
+				data-color={colorAttrs.dataColor}
+				data-color-custom={colorAttrs.isCustom ? '' : undefined}>{seg.text}</mark>
 		{:else}
 			{seg.text}
 		{/if}

src/uix/eidos/components/highlight/types.ts

@@ -1,8 +1,8 @@
 import type { HTMLAttributes } from 'svelte/elements';
-import type { ColorRole, ResponsiveProp } from '$uix/eidos/lib/types';
+import type { ComponentColorProp, ResponsiveProp } from '$uix/eidos/lib/types';
 
-/** Intent palette for the highlight tint. */
-export type HighlightColor = ColorRole;
+/** Colour of the highlight — full system (role · intent · scale · value). */
+export type HighlightColor = ComponentColorProp;
 
 export type HighlightProps = Omit<HTMLAttributes<HTMLElement>, 'style' | 'children'> & {
 	/** Full text to render. Matches of `query` will be wrapped in `<mark>`. */