eidos: V1.5 — Toggle + Switch component recipes

Two trigger-family recipes. Both Provider parts carry data-archetype=
'trigger', so cursor + hover dim + focus ring come from archetypes.css
for free; recipes layer in component-specific visuals.

Toggle (`[data-toggle]`):
  - button envelope (padding, border, radius, white bg)
  - data-state='on' → filled accent (--eidos-toggle-accent default blue)
  - data-invalid → red border (uses --eidos-tint-threat)

Switch (`[data-switch]` + `[data-switch-thumb]`):
  - 44×24 pill track, padded
  - data-state='checked' → accent track + thumb translateX(travel)
    where travel = width - thumb-size - 4px (track padding × 2)
  - thumb shadow, cursor inherited from track (overrides archetype's grab)

Eidos test page drops its :global([data-toggle]) / [data-switch]
scoped CSS — recipes now suffice.

Public CSS API:
  --eidos-toggle-{bg, bg-on, color, color-on, border, border-on, radius,
                  padding, accent}
  --eidos-switch-{track-width, track-height, track-bg, track-bg-checked,
                  track-border, thumb-size, thumb-bg, accent}

Verification: smoke 68/68, morfo-check 66/66.

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

src/routes/test/eidos/+page.svelte

@@ -251,36 +251,6 @@
 		border: 1px solid #d1d5db;
 		border-radius: 6px;
 	}
-	.row :global([data-toggle]) {
-		padding: 0.5rem 1rem;
-		background: #e5e7eb;
-		border: 1px solid #d1d5db;
-		border-radius: 6px;
-		font: inherit;
-	}
-	.row :global([data-switch]) {
-		width: 48px;
-		height: 26px;
-		background: #d1d5db;
-		border: 1px solid #9ca3af;
-		border-radius: 999px;
-		position: relative;
-		padding: 2px;
-	}
-	.row :global([data-switch][data-state='checked']) {
-		background: #3b82f6;
-		border-color: #3b82f6;
-	}
-	.row :global([data-switch-thumb]) {
-		width: 20px;
-		height: 20px;
-		background: white;
-		border-radius: 50%;
-		transform: translateX(0);
-	}
-	.row :global([data-switch][data-state='checked'] [data-switch-thumb]) {
-		transform: translateX(22px);
-	}
 	:global([data-collapsible-trigger]) {
 		padding: 0.5rem 1rem;
 		background: #f3f4f6;

src/uix/eidos/components/switch.css

@@ -0,0 +1,57 @@
+/**
+ * Eidos — Switch component recipe (V1.5).
+ *
+ * Switch is a pill track with a sliding thumb. The Provider IS the
+ * track and carries `data-archetype='trigger'`; the Thumb part carries
+ * `data-archetype='thumb'`. Cursor, hover dim, and focus ring come from
+ * archetypes.css.
+ *
+ * Geometry: track is `width × height`, padded uniformly. The thumb is
+ * `thumb-size × thumb-size`, sized so it fits inside (height - 2*pad).
+ * On `data-state='checked'` it translateX'es by `width - 2*pad - thumb-size`.
+ *
+ * Public CSS API:
+ *   --eidos-switch-track-width / --eidos-switch-track-height
+ *   --eidos-switch-track-bg / --eidos-switch-track-bg-checked
+ *   --eidos-switch-track-border
+ *   --eidos-switch-thumb-size
+ *   --eidos-switch-thumb-bg
+ *   --eidos-switch-accent (drives track-bg-checked default)
+ */
+
+[data-switch] {
+	width: var(--eidos-switch-track-width, 44px);
+	height: var(--eidos-switch-track-height, 24px);
+	padding: 2px;
+	border: 1px solid var(--eidos-switch-track-border, hsl(220 13% 75%));
+	border-radius: 999px;
+	background: var(--eidos-switch-track-bg, hsl(220 13% 89%));
+	display: inline-flex;
+	align-items: center;
+	transition:
+		background-color var(--eidos-motion-fast) var(--eidos-easing-standard),
+		border-color var(--eidos-motion-fast) var(--eidos-easing-standard);
+}
+
+[data-switch][data-state='checked'] {
+	background: var(--eidos-switch-track-bg-checked, var(--eidos-switch-accent, hsl(214 95% 55%)));
+	border-color: var(--eidos-switch-track-bg-checked, var(--eidos-switch-accent, hsl(214 95% 55%)));
+}
+
+[data-switch-thumb] {
+	display: block;
+	width: var(--eidos-switch-thumb-size, 18px);
+	height: var(--eidos-switch-thumb-size, 18px);
+	border-radius: 50%;
+	background: var(--eidos-switch-thumb-bg, hsl(0 0% 100%));
+	box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+	transition: transform var(--eidos-motion-fast) var(--eidos-easing-standard);
+	/* Override archetype 'thumb' grab cursor — switch thumb isn't draggable. */
+	cursor: inherit;
+}
+
+[data-switch][data-state='checked'] [data-switch-thumb] {
+	transform: translateX(
+		calc(var(--eidos-switch-track-width, 44px) - var(--eidos-switch-thumb-size, 18px) - 6px)
+	);
+}

src/uix/eidos/components/toggle.css

@@ -0,0 +1,43 @@
+/**
+ * Eidos — Toggle component recipe (V1.5).
+ *
+ * Toggle is a single two-state button. The Provider IS the button and
+ * carries `data-archetype='trigger'`, so cursor + hover dim + focus
+ * ring come from archetypes.css for free. The recipe layers in the
+ * button envelope (padding, border, radius, background) and the "on"
+ * appearance (filled accent).
+ *
+ * Public CSS API:
+ *   --eidos-toggle-bg / --eidos-toggle-bg-on
+ *   --eidos-toggle-color / --eidos-toggle-color-on
+ *   --eidos-toggle-border / --eidos-toggle-border-on
+ *   --eidos-toggle-radius
+ *   --eidos-toggle-padding
+ *   --eidos-toggle-accent (drives bg-on + border-on default)
+ */
+
+[data-toggle] {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.4rem;
+	padding: var(--eidos-toggle-padding, 0.4rem 0.8rem);
+	border: 1px solid var(--eidos-toggle-border, hsl(220 13% 82%));
+	border-radius: var(--eidos-toggle-radius, 6px);
+	background: var(--eidos-toggle-bg, hsl(0 0% 100%));
+	color: var(--eidos-toggle-color, hsl(220 25% 12%));
+	font: inherit;
+	transition:
+		background-color var(--eidos-motion-fast) var(--eidos-easing-standard),
+		border-color var(--eidos-motion-fast) var(--eidos-easing-standard),
+		color var(--eidos-motion-fast) var(--eidos-easing-standard);
+}
+
+[data-toggle][data-state='on'] {
+	background: var(--eidos-toggle-bg-on, var(--eidos-toggle-accent, hsl(214 95% 50%)));
+	border-color: var(--eidos-toggle-border-on, var(--eidos-toggle-accent, hsl(214 95% 50%)));
+	color: var(--eidos-toggle-color-on, hsl(0 0% 100%));
+}
+
+[data-toggle][data-invalid] {
+	border-color: var(--eidos-tint-threat);
+}

src/uix/eidos/index.css

@@ -30,3 +30,5 @@
 @import './events.css';
 @import './components/toast.css';
 @import './components/dialog.css';
+@import './components/toggle.css';
+@import './components/switch.css';