perf(eidos): code-split 35 component recipes (Phase 3, batch 1)

Self-contained recipes (typography/inline/feedback/overlays/misc):
banner button float scroll-area separator splitter text heading display
code code-block kbd mark highlight link icon avatar breadcrumb toast
alert-dialog carousel pin-input popover tooltip link-preview progress
meter pagination collapsible accordion tabs toolbar tag-group stepper
drawer.

Each self-imports its `.css` from its root `.svelte`; removed from
index.css. Menus held back (batch 2) because menu-indicator.css must
load after them. index.css 93→58 @imports. Monolith 805,692→666,436 raw
(−139 KB) / 107,843→90,381 gz (−17.5 KB). Verified: recipes gone from
monolith (residual popover sub-part refs are batch-3 pickers; [data-
stepper] is base.css token contract); portaled popover content styled in
browser; check 0 errors.

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

src/uix/eidos/components/accordion/accordion.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './accordion.css';
 	/**
 	 * Eidos `<Accordion>` — root component. Wraps Soma's
 	 * `<Accordion.Provider>` to set up the headless context; resolves

src/uix/eidos/components/alert-dialog/alert-dialog.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './alert-dialog.css';
 	/**
 	 * Eidos `<AlertDialog>` — root. Wraps soma's
 	 * `<AlertDialog.Provider>` which delegates to the Dialog runtime

src/uix/eidos/components/avatar/avatar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './avatar.css';
 	/**
 	 * Eidos `<Avatar>` — root component. Eidos-native (no headless backing
 	 * for avatar). Renders a `<span data-avatar>` shell with size /

src/uix/eidos/components/banner/banner.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './banner.css';
 	/**
 	 * Eidos `<Banner>` — full-bleed announcement strip with intent /
 	 * variant / size visual treatment. Renders as

src/uix/eidos/components/breadcrumb/breadcrumb.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './breadcrumb.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Breadcrumb>` — visual wrapper over Soma's breadcrumb primitive.

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

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

src/uix/eidos/components/carousel/carousel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './carousel.css';
 	/**
 	 * Eidos `<Carousel>` — root wrapper around Soma's `Carousel.Provider`.
 	 * Adds `size`, `variant`, `color` and `block` visual concerns; cascades

src/uix/eidos/components/code-block/code-block.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './code-block.css';
 	/**
 	 * Eidos `<CodeBlock>` — multi-line code block.
 	 *

src/uix/eidos/components/code/code.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './code.css';
 	/**
 	 * Eidos `<Code>` — inline monospace text.
 	 *

src/uix/eidos/components/collapsible/collapsible.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './collapsible.css';
 	/**
 	 * Eidos `<Collapsible>` — root component. Wraps Soma's
 	 * root provider internally; children compose via the named members

src/uix/eidos/components/display/display.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './display.css';
 	/**
 	 * Eidos `<Display>` — hero / oversize typography primitive.
 	 *

src/uix/eidos/components/drawer/drawer.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './drawer.css';
 	/**
 	 * Eidos `<Drawer>` — root component. Wraps Soma's `<Drawer.Drawer.Provider>`
 	 * to set up the headless context; children compose via the named

src/uix/eidos/components/float/float.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './float.css';
 	/**
 	 * Eidos `<Float>` — pulls its child to the start or end of the text
 	 * flow so adjacent inline content wraps around it. Composes through

src/uix/eidos/components/heading/heading.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './heading.css';
 	/**
 	 * Eidos `<Heading>` — semantic heading (h1..h6) typography primitive.
 	 *

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './highlight.css';
 	/**
 	 * Eidos `<Highlight>` — substring highlighter.
 	 *

src/uix/eidos/components/icon/icon.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './icon.css';
 	import { composeInlineStyle } from '$uix/eidos/lib/style';
 	import type { IconProps } from './types';
 	import { resolveIconSize, resolveIconStrokeWidth } from './create-icon';

src/uix/eidos/components/kbd/kbd.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './kbd.css';
 	/**
 	 * Eidos `<Kbd>` — keyboard shortcut visual.
 	 *

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './link-preview.css';
 	/**
 	 * Eidos `<LinkPreview>` — root component. Wraps Soma's
 	 * `<LinkPreview.Provider>` to set up the headless context; children

src/uix/eidos/components/link/link.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './link.css';
 	/**
 	 * Eidos `<Link>` — inline text link.
 	 *

src/uix/eidos/components/mark/mark.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './mark.css';
 	/**
 	 * Eidos `<Mark>` — text highlight.
 	 *

src/uix/eidos/components/meter/meter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './meter.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Meter>` — visual wrapper over Soma's meter primitive.

src/uix/eidos/components/pagination/pagination.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './pagination.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Pagination>` — visual wrapper over Soma's pagination primitive.

src/uix/eidos/components/pin-input/pin-input.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './pin-input.css';
 	/**
 	 * Eidos `<PinInput>` — root. Passes `data-size` to the container so
 	 * the cell recipe picks up the right token slice. Snippet args

src/uix/eidos/components/popover/popover.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './popover.css';
 	/**
 	 * Eidos `<Popover>` — root component. Wraps Soma's `<Popover.Provider>`
 	 * to set up the headless context; children compose via the named

src/uix/eidos/components/progress/progress.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './progress.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Progress>` — visual wrapper over Soma's progressbar.

src/uix/eidos/components/scroll-area/scroll-area.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './scroll-area.css';
 	/**
 	 * Eidos `<ScrollArea>` — root component. Wraps Soma's
 	 * `<ScrollArea.Provider>` to set up the headless context.

src/uix/eidos/components/separator/separator.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './separator.css';
 	/**
 	 * Eidos `<Separator>` — visual divider between sections. Single
 	 * `<div>` element; the recipe sizes it based on `data-orientation`.

src/uix/eidos/components/splitter/splitter.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './splitter.css';
 	/**
 	 * Eidos `<Splitter>` — root component. Wraps Soma's
 	 * `<Splitter.Provider>` to set up the headless context; children

src/uix/eidos/components/stepper/stepper.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './stepper.css';
 	import { ActiveEidos } from '$uix/eidos';
 	import * as Stepper from '$soma/components/stepper';
 	import type { StepperProps } from './types';

src/uix/eidos/components/tabs/tabs.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './tabs.css';
 	/**
 	 * Eidos `<Tabs>` — root component. Wraps Soma's `<Tabs.Provider>` and
 	 * adds visual concerns (size, variant, fitted, collapseAt, scrollable,

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './tag-group.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<TagGroup>` — visual wrapper over Soma's display-only tag group.

src/uix/eidos/components/text/text.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './text.css';
 	/**
 	 * Eidos `<Text>` — universal inline-flow typography primitive.
 	 *

src/uix/eidos/components/toast/toast.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './toast.css';
 	/**
 	 * Eidos `<Toast>` — root component. Wraps Soma's `<Toast.Provider>`
 	 * to set up the toaster context for descendants (Viewport, Item, …).

src/uix/eidos/components/toolbar/toolbar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './toolbar.css';
 	import { ActiveEidos } from '$uix/eidos';
 	/**
 	 * Eidos `<Toolbar>` — visual wrapper over Soma's toolbar primitive.

src/uix/eidos/components/tooltip/tooltip.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import './tooltip.css';
 	/**
 	 * Eidos `<Tooltip>` — root component. Wraps Soma's `<Tooltip.Provider>`
 	 * to set up the headless context; children compose via the named

src/uix/eidos/index.css

@@ -78,26 +78,6 @@
 @import './components/section/section.css';
 @import './components/aspect-ratio/aspect-ratio.css';
 @import './components/auto-grid/auto-grid.css';
-@import './components/banner/banner.css';
-@import './components/button/button.css';
-@import './components/float/float.css';
-@import './components/scroll-area/scroll-area.css';
-@import './components/separator/separator.css';
-@import './components/splitter/splitter.css';
-@import './components/text/text.css';
-@import './components/heading/heading.css';
-@import './components/display/display.css';
-@import './components/code/code.css';
-@import './components/code-block/code-block.css';
-@import './components/kbd/kbd.css';
-@import './components/mark/mark.css';
-@import './components/highlight/highlight.css';
-@import './components/link/link.css';
-@import './components/icon/icon.css';
-@import './components/avatar/avatar.css';
-@import './components/breadcrumb/breadcrumb.css';
-@import './components/toast/toast.css';
-@import './components/alert-dialog/alert-dialog.css';
 @import './components/dropdown-menu/dropdown-menu.css';
 @import './components/context-menu/context-menu.css';
 @import './components/menubar/menubar.css';
@@ -106,29 +86,17 @@
 @import './components/navigation-menu/navigation-menu.css';
 @import './components/grid-list/grid-list.css';
 @import './components/time-range-field/time-range-field.css';
-@import './components/carousel/carousel.css';
 /* Shared menu-item indicator partial — must load AFTER the menu recipes
    so its `padding-inline-start` calc wins over the row rule's
    `padding-inline` shorthand at equal specificity. */
 @import './lib/menu-indicator.css';
-@import './components/pin-input/pin-input.css';
 @import './components/date-range-field/date-range-field.css';
-@import './components/drawer/drawer.css';
 @import './components/field/field.css';
 @import './components/form/form.css';
-@import './components/popover/popover.css';
-@import './components/tooltip/tooltip.css';
-@import './components/link-preview/link-preview.css';
-@import './components/progress/progress.css';
-@import './components/meter/meter.css';
 @import './components/number-field/number-field.css';
-@import './components/pagination/pagination.css';
 @import './components/toggle/toggle.css';
 @import './components/toggle-group/toggle-group.css';
 @import './components/switch/switch.css';
-@import './components/collapsible/collapsible.css';
-@import './components/accordion/accordion.css';
-@import './components/tabs/tabs.css';
 @import './components/checkbox/checkbox.css';
 @import './components/radio-group/radio-group.css';
 @import './components/rating-group/rating-group.css';
@@ -149,13 +117,10 @@
 @import './components/time-range-picker/time-range-picker.css';
 @import './components/color-picker/color-picker.css';
 @import './components/slider/slider.css';
-@import './components/toolbar/toolbar.css';
-@import './components/tag-group/tag-group.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/stepper/stepper.css';
 @import './components/table/table.css';
 @import './components/tree-view/tree-view.css';
 @import './components/tree-grid/tree-grid.css';