perf(eidos): code-split 15 form-control recipes (Phase 3, batch 3)

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,4 +1,5 @@
 <script lang="ts">
+	import './checkbox.css';
 	/**
 	 * Eidos `<Checkbox>` — root component. Wraps Soma's
 	 * `<Checkbox.Provider>` and adds visual concerns (size, variant,

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';

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';

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.

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';

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';

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.

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,

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.

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.

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';

src/uix/eidos/components/switch/switch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './switch.css';
 	/**
 	 * Eidos `<Switch>` — visual wrapper over the Soma.
 	 *

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';

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.
 	 *

src/uix/eidos/components/toggle/toggle.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './toggle.css';
 	/**
 	 * Eidos `<Toggle>` — visual wrapper over the Soma.
 	 *

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';