From 5c79ee4ec5dfbb6e1c66d363c1f119bcaa3d1137 Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Sat, 6 Jun 2026 01:53:29 +0200
Subject: [PATCH] perf(eidos): code-split 15 form-control recipes (Phase 3,
 batch 3)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

field form number-field toggle toggle-group switch checkbox radio-group
rating-group search-field select combobox tags-input file-upload editable.

Caught + fixed a real coupling: toggle-group items are DOM-equivalent to
a standalone <Toggle> (carry data-toggle via the morfo, per the 2026-05-28
structural-identity refactor) and rely on toggle.css for their base
treatment — but the group never mounts an eidos <Toggle>. Without the
aggregate, items rendered as raw buttons (bg #f0f0f0, 2px outset border).
Fix: toggle-group.svelte imports toggle.css FIRST (before its own grouping
rules, so attached-corner overrides still win). Verified: item now bg
srgb(0.133), 1px border, font-weight 500, min-block-size 36px.

All recipes left the monolith (residual [data-*] are base.css token
contracts, verified base==monolith counts). Portaled select content
verified styled. index.css 51→36 @imports. Monolith 633,277→533,103 raw
(−100 KB) / 86,535→74,716 gz (−11.8 KB). check 0 errors.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/uix/eidos/components/checkbox/checkbox.svelte |  1 +
 src/uix/eidos/components/combobox/combobox.svelte |  1 +
 src/uix/eidos/components/editable/editable.svelte |  1 +
 src/uix/eidos/components/field/field.svelte       |  1 +
 .../components/file-upload/file-upload.svelte     |  1 +
 src/uix/eidos/components/form/form.svelte         |  1 +
 .../components/number-field/number-field.svelte   |  1 +
 .../components/radio-group/radio-group.svelte     |  1 +
 .../components/rating-group/rating-group.svelte   |  1 +
 .../components/search-field/search-field.svelte   |  1 +
 src/uix/eidos/components/select/select.svelte     |  1 +
 src/uix/eidos/components/switch/switch.svelte     |  1 +
 .../eidos/components/tags-input/tags-input.svelte |  1 +
 .../components/toggle-group/toggle-group.svelte   |  6 ++++++
 src/uix/eidos/components/toggle/toggle.svelte     |  1 +
 src/uix/eidos/index.css                           | 15 ---------------
 16 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/uix/eidos/components/checkbox/checkbox.svelte b/src/uix/eidos/components/checkbox/checkbox.svelte
index 821dc73e1..ab1c95cf5 100644
--- a/src/uix/eidos/components/checkbox/checkbox.svelte
+++ b/src/uix/eidos/components/checkbox/checkbox.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './checkbox.css';
 	/**
 	 * Eidos `<Checkbox>` — root component. Wraps Soma's
 	 * `<Checkbox.Provider>` and adds visual concerns (size, variant,
diff --git a/src/uix/eidos/components/combobox/combobox.svelte b/src/uix/eidos/components/combobox/combobox.svelte
index 88988fc24..1d1274500 100644
--- a/src/uix/eidos/components/combobox/combobox.svelte
+++ b/src/uix/eidos/components/combobox/combobox.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './combobox.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Combobox from '$soma/components/combobox';
 	import { setComboboxVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/editable/editable.svelte b/src/uix/eidos/components/editable/editable.svelte
index 9e318314b..493374170 100644
--- a/src/uix/eidos/components/editable/editable.svelte
+++ b/src/uix/eidos/components/editable/editable.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './editable.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Editable from '$soma/components/editable';
 	import type { EditableProps } from './types';
diff --git a/src/uix/eidos/components/field/field.svelte b/src/uix/eidos/components/field/field.svelte
index 61200a6f4..a9422b1be 100644
--- a/src/uix/eidos/components/field/field.svelte
+++ b/src/uix/eidos/components/field/field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Field>` — visual wrapper over Soma's form field primitive.
diff --git a/src/uix/eidos/components/file-upload/file-upload.svelte b/src/uix/eidos/components/file-upload/file-upload.svelte
index 6928cb2d7..2d8e36d83 100644
--- a/src/uix/eidos/components/file-upload/file-upload.svelte
+++ b/src/uix/eidos/components/file-upload/file-upload.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './file-upload.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as FileUpload from '$soma/components/file-upload';
 	import type { FileUploadProps } from './types';
diff --git a/src/uix/eidos/components/form/form.svelte b/src/uix/eidos/components/form/form.svelte
index a56a2115f..f48bf4fe0 100644
--- a/src/uix/eidos/components/form/form.svelte
+++ b/src/uix/eidos/components/form/form.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './form.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Form from '$soma/components/form';
 	import type { FormProps, FormProviderSnippetProps } from './types';
diff --git a/src/uix/eidos/components/number-field/number-field.svelte b/src/uix/eidos/components/number-field/number-field.svelte
index 7af51b1bd..94ff0f537 100644
--- a/src/uix/eidos/components/number-field/number-field.svelte
+++ b/src/uix/eidos/components/number-field/number-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './number-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<NumberField>` — visual wrapper over Soma's spinbutton primitive.
diff --git a/src/uix/eidos/components/radio-group/radio-group.svelte b/src/uix/eidos/components/radio-group/radio-group.svelte
index fb470395f..b4c629c31 100644
--- a/src/uix/eidos/components/radio-group/radio-group.svelte
+++ b/src/uix/eidos/components/radio-group/radio-group.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './radio-group.css';
 	/**
 	 * Eidos `<RadioGroup>` — root component. Wraps Soma's
 	 * `<RadioGroup.Provider>` and adds visual concerns (size, variant,
diff --git a/src/uix/eidos/components/rating-group/rating-group.svelte b/src/uix/eidos/components/rating-group/rating-group.svelte
index f2201ed4c..f5cc2a3ce 100644
--- a/src/uix/eidos/components/rating-group/rating-group.svelte
+++ b/src/uix/eidos/components/rating-group/rating-group.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './rating-group.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<RatingGroup>` — visual wrapper over Soma's rating primitive.
diff --git a/src/uix/eidos/components/search-field/search-field.svelte b/src/uix/eidos/components/search-field/search-field.svelte
index 04aa1c64e..7a1d9cc01 100644
--- a/src/uix/eidos/components/search-field/search-field.svelte
+++ b/src/uix/eidos/components/search-field/search-field.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './search-field.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<SearchField>` — visual wrapper over Soma's search primitive.
diff --git a/src/uix/eidos/components/select/select.svelte b/src/uix/eidos/components/select/select.svelte
index 851c01a95..f71337752 100644
--- a/src/uix/eidos/components/select/select.svelte
+++ b/src/uix/eidos/components/select/select.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './select.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Select from '$soma/components/select';
 	import { setSelectVisualContext } from './context.svelte';
diff --git a/src/uix/eidos/components/switch/switch.svelte b/src/uix/eidos/components/switch/switch.svelte
index c7df18981..d202d2da3 100644
--- a/src/uix/eidos/components/switch/switch.svelte
+++ b/src/uix/eidos/components/switch/switch.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './switch.css';
 	/**
 	 * Eidos `<Switch>` — visual wrapper over the Soma.
 	 *
diff --git a/src/uix/eidos/components/tags-input/tags-input.svelte b/src/uix/eidos/components/tags-input/tags-input.svelte
index 84624b50a..852e8b9de 100644
--- a/src/uix/eidos/components/tags-input/tags-input.svelte
+++ b/src/uix/eidos/components/tags-input/tags-input.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './tags-input.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as TagsInput from '$soma/components/tags-input';
 	import type { TagsInputProps } from './types';
diff --git a/src/uix/eidos/components/toggle-group/toggle-group.svelte b/src/uix/eidos/components/toggle-group/toggle-group.svelte
index 4837b7fc9..40aa1d6d8 100644
--- a/src/uix/eidos/components/toggle-group/toggle-group.svelte
+++ b/src/uix/eidos/components/toggle-group/toggle-group.svelte
@@ -1,4 +1,10 @@
 <script lang="ts">
+	// Each item is DOM-equivalent to a standalone <Toggle> (carries data-toggle via
+	// the morfo) and relies on Toggle's recipe for its base treatment — but the group
+	// never mounts an eidos <Toggle>, so we must load toggle.css here. It comes FIRST
+	// so toggle-group's grouping rules (attached corners, etc.) win on conflicts.
+	import '$uix/eidos/components/toggle/toggle.css';
+	import './toggle-group.css';
 	/**
 	 * Eidos `<ToggleGroup>` — root.
 	 *
diff --git a/src/uix/eidos/components/toggle/toggle.svelte b/src/uix/eidos/components/toggle/toggle.svelte
index a91869dac..12c8c4362 100644
--- a/src/uix/eidos/components/toggle/toggle.svelte
+++ b/src/uix/eidos/components/toggle/toggle.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './toggle.css';
 	/**
 	 * Eidos `<Toggle>` — visual wrapper over the Soma.
 	 *
diff --git a/src/uix/eidos/index.css b/src/uix/eidos/index.css
index 7280e1c24..0e2b721ed 100644
--- a/src/uix/eidos/index.css
+++ b/src/uix/eidos/index.css
@@ -80,18 +80,6 @@
 @import './components/auto-grid/auto-grid.css';
 @import './components/time-range-field/time-range-field.css';
 @import './components/date-range-field/date-range-field.css';
-@import './components/field/field.css';
-@import './components/form/form.css';
-@import './components/number-field/number-field.css';
-@import './components/toggle/toggle.css';
-@import './components/toggle-group/toggle-group.css';
-@import './components/switch/switch.css';
-@import './components/checkbox/checkbox.css';
-@import './components/radio-group/radio-group.css';
-@import './components/rating-group/rating-group.css';
-@import './components/search-field/search-field.css';
-@import './components/select/select.css';
-@import './components/combobox/combobox.css';
 @import './components/calendar/calendar.css';
 @import './components/range-calendar/range-calendar.css';
 @import './components/month-grid/month-grid.css';
@@ -106,9 +94,6 @@
 @import './components/time-range-picker/time-range-picker.css';
 @import './components/color-picker/color-picker.css';
 @import './components/slider/slider.css';
-@import './components/tags-input/tags-input.css';
-@import './components/file-upload/file-upload.css';
-@import './components/editable/editable.css';
 @import './components/words/words.css';
 @import './components/table/table.css';
 @import './components/tree-view/tree-view.css';