Move color translations to morfo

src/uix/active-uix/active-uix.svelte.test.ts

@@ -30,6 +30,8 @@ import { announceMorfo } from '$uix/morfo/components/announce';
 import { breadcrumbMorfo } from '$uix/morfo/components/breadcrumb';
 import { carouselMorfo } from '$uix/morfo/components/carousel';
 import { clipboardMorfo } from '$uix/morfo/components/clipboard';
+import { colorFieldMorfo } from '$uix/morfo/components/color-field';
+import { colorPickerMorfo } from '$uix/morfo/components/color-picker';
 import { comboboxMorfo } from '$uix/morfo/components/combobox';
 import { commandMorfo } from '$uix/morfo/components/command';
 import { dragDropMorfo } from '$uix/morfo/components/drag-drop';
@@ -283,6 +285,14 @@ describe('createActiveUix (standalone)', () => {
 				'1 error del formulario necesita tu atención'
 			);
 			expect(uix.langs.t('common.buttons.submit')).toBe('Enviar');
+			registerMorfo(colorFieldMorfo);
+			registerMorfo(colorPickerMorfo);
+			expect(uix.langs.t('components.color-field.channel-r')).toBe('Rojo');
+			expect(uix.langs.t('components.color-field.format-select')).toBe('Formato de color');
+			expect(uix.langs.t('components.color-picker.trigger')).toBe('Abrir selector de color');
+			expect(uix.langs.t('components.color-picker.area-description')).toBe(
+				'Usa las flechas para ajustar saturación (horizontal) y brillo (vertical)'
+			);
 		} finally {
 			uix.dispose();
 			_resetMorfoRegistryForTesting();

src/uix/langs.ts

@@ -142,43 +142,4 @@ export const componentLangs = {
 		pm: { es: 'PM', en: 'PM' },
 	},
 
-	'color-field': {
-		input: { es: 'Valor del color', en: 'Color value' },
-		empty: { es: 'Vacío', en: 'Empty' },
-		invalid: { es: 'Color no válido', en: 'Invalid color' },
-		'format-select': { es: 'Formato de color', en: 'Color format' },
-		'format-hex': { es: 'HEX', en: 'HEX' },
-		'format-rgb': { es: 'RGB', en: 'RGB' },
-		'format-hsl': { es: 'HSL', en: 'HSL' },
-		'channel-hex': { es: 'Valor hexadecimal', en: 'Hex value' },
-		'channel-r': { es: 'Rojo', en: 'Red' },
-		'channel-g': { es: 'Verde', en: 'Green' },
-		'channel-b': { es: 'Azul', en: 'Blue' },
-		'channel-h': { es: 'Matiz', en: 'Hue' },
-		'channel-s': { es: 'Saturación', en: 'Saturation' },
-		'channel-l': { es: 'Luminosidad', en: 'Lightness' },
-		'channel-alpha': { es: 'Alfa', en: 'Alpha' },
-	},
-
-	'color-picker': {
-		trigger: { es: 'Abrir selector de color', en: 'Open color picker' },
-		'value-text': { es: 'Color actual', en: 'Current color' },
-		area: { es: 'Área de saturación y brillo', en: 'Saturation and brightness area' },
-		'area-description': {
-			es: 'Usa las flechas para ajustar saturación (horizontal) y brillo (vertical)',
-			en: 'Use arrow keys to adjust saturation (horizontal) and brightness (vertical)'
-		},
-		'hue-slider': { es: 'Matiz', en: 'Hue' },
-		'alpha-slider': { es: 'Alfa', en: 'Alpha' },
-		'saturation-slider': { es: 'Saturación', en: 'Saturation' },
-		'brightness-slider': { es: 'Brillo', en: 'Brightness' },
-		'red-slider': { es: 'Rojo', en: 'Red' },
-		'green-slider': { es: 'Verde', en: 'Green' },
-		'blue-slider': { es: 'Azul', en: 'Blue' },
-		'swatch-group': { es: 'Colores predefinidos', en: 'Preset colors' },
-		swatch: { es: 'Muestra de color', en: 'Color swatch' },
-		'eye-dropper': { es: 'Capturar color de pantalla', en: 'Pick color from screen' },
-		'format-select': { es: 'Formato de color', en: 'Color format' },
-	},
-
 } satisfies LangNode;

src/uix/morfo/components/color-field.ts

@@ -5,6 +5,23 @@ export const colorFieldMorfo = {
 	name: 'ColorField',
 	kebab: 'color-field',
 	scope: ['soma'],
+	translations: {
+		input: { es: 'Valor del color', en: 'Color value' },
+		empty: { es: 'Vacío', en: 'Empty' },
+		invalid: { es: 'Color no válido', en: 'Invalid color' },
+		'format-select': { es: 'Formato de color', en: 'Color format' },
+		'format-hex': { es: 'HEX', en: 'HEX' },
+		'format-rgb': { es: 'RGB', en: 'RGB' },
+		'format-hsl': { es: 'HSL', en: 'HSL' },
+		'channel-hex': { es: 'Valor hexadecimal', en: 'Hex value' },
+		'channel-r': { es: 'Rojo', en: 'Red' },
+		'channel-g': { es: 'Verde', en: 'Green' },
+		'channel-b': { es: 'Azul', en: 'Blue' },
+		'channel-h': { es: 'Matiz', en: 'Hue' },
+		'channel-s': { es: 'Saturación', en: 'Saturation' },
+		'channel-l': { es: 'Luminosidad', en: 'Lightness' },
+		'channel-alpha': { es: 'Alfa', en: 'Alpha' }
+	},
 	parts: [
 		{
 			name: 'Provider',

src/uix/morfo/components/color-picker.ts

@@ -5,6 +5,26 @@ export const colorPickerMorfo = {
 	name: 'ColorPicker',
 	kebab: 'color-picker',
 	scope: ['soma'],
+	translations: {
+		trigger: { es: 'Abrir selector de color', en: 'Open color picker' },
+		'value-text': { es: 'Color actual', en: 'Current color' },
+		area: { es: 'Área de saturación y brillo', en: 'Saturation and brightness area' },
+		'area-description': {
+			es: 'Usa las flechas para ajustar saturación (horizontal) y brillo (vertical)',
+			en: 'Use arrow keys to adjust saturation (horizontal) and brightness (vertical)'
+		},
+		'hue-slider': { es: 'Matiz', en: 'Hue' },
+		'alpha-slider': { es: 'Alfa', en: 'Alpha' },
+		'saturation-slider': { es: 'Saturación', en: 'Saturation' },
+		'brightness-slider': { es: 'Brillo', en: 'Brightness' },
+		'red-slider': { es: 'Rojo', en: 'Red' },
+		'green-slider': { es: 'Verde', en: 'Green' },
+		'blue-slider': { es: 'Azul', en: 'Blue' },
+		'swatch-group': { es: 'Colores predefinidos', en: 'Preset colors' },
+		swatch: { es: 'Muestra de color', en: 'Color swatch' },
+		'eye-dropper': { es: 'Capturar color de pantalla', en: 'Pick color from screen' },
+		'format-select': { es: 'Formato de color', en: 'Color format' }
+	},
 
 	focus: {
 		initial: 'first-focusable',
@@ -77,7 +97,7 @@ export const colorPickerMorfo = {
 				},
 				{
 					attr: 'aria-label',
-					value: v.translationRef('#?components.color-picker.trigger|Choose color'),
+					value: v.translationRef('#?components.color-picker.trigger|Open color picker'),
 					severity: 'recommended'
 				}
 			]