diff --git a/src/arts/prefs/active-prefs.svelte.ts b/src/arts/prefs/active-prefs.svelte.ts
index 7ede07aed..8f0b5cba1 100644
--- a/src/arts/prefs/active-prefs.svelte.ts
+++ b/src/arts/prefs/active-prefs.svelte.ts
@@ -185,8 +185,30 @@ export function createActivePrefs<S extends PrefsSchema>(
 	const pendingCell = $state(false);
 	const lastErrorCell = $state<unknown>(null);
 
+	// Svelte only re-runs a reaction that has READ a `$state`. `get()` reads a
+	// plain object off the engine, so without this nothing is ever tracked and
+	// every reader freezes at the value it saw first. Each dimension owns a
+	// counter, bumped when that dimension actually changes; `get()` reads its
+	// own counter so the caller subscribes to THAT dimension and no other.
+	// The number itself means nothing — reading it is the whole point.
+	//
+	// Bumped from `effectiveDiff`, which the engine computes by diffing the
+	// resolved `effective` views. So a dimension that changed by derivation
+	// (direction following language) bumps too, not only one set by intent.
+	//
+	// One counter per key, not one shared cell: a shared cell would wake every
+	// dimension's readers on any commit — a `motion` change would re-run every
+	// `direction` reader in the app. The engine stays the only source of the
+	// VALUE; the counter carries only the "something changed" signal.
+	const changeCounts = $state<Record<string, number>>(
+		Object.fromEntries(Object.keys(options.schema).map((key) => [key, 0]))
+	);
+
 	const detachCommit = engine.subscribe((event) => {
 		snapshotCell = event.next;
+		for (const key of Object.keys(event.effectiveDiff)) {
+			changeCounts[key] = (changeCounts[key] ?? 0) + 1;
+		}
 	});
 
 	const state: ActivePrefsState<S> = {
@@ -215,7 +237,7 @@ export function createActivePrefs<S extends PrefsSchema>(
 
 	const dimensionMembers: Record<string, ActivePrefsDimension<unknown, unknown>> = {};
 	for (const key of Object.keys(options.schema)) {
-		dimensionMembers[key] = makeDimension(engine, key);
+		dimensionMembers[key] = makeDimension(engine, key, changeCounts);
 	}
 
 	const base = {
@@ -243,10 +265,15 @@ export function createActivePrefs<S extends PrefsSchema>(
 
 function makeDimension(
 	engine: ReturnType<typeof createEnginePrefs>,
-	key: string
+	key: string,
+	changeCounts: Record<string, number>
 ): ActivePrefsDimension<unknown, unknown> {
 	return {
 		get() {
+			// Read the counter first so the caller subscribes to this dimension;
+			// the value still comes from the engine. Outside a reaction this is
+			// a plain property read and costs nothing.
+			void changeCounts[key];
 			return (engine.snapshot().effective as Record<string, unknown>)[key];
 		},
 		set(value: unknown) {
diff --git a/src/arts/prefs/dom-projection.ts b/src/arts/prefs/dom-projection.ts
index c78a12765..7245dde49 100644
--- a/src/arts/prefs/dom-projection.ts
+++ b/src/arts/prefs/dom-projection.ts
@@ -1,14 +1,11 @@
+import { untrack } from 'svelte';
 import type { ActiveDom } from '$adom';
 import type { Direction } from '$libs/direction';
 import type { DomAttrValue } from '$adom';
 import type { HapticEffective } from '$libs/haptic';
 import type { MotionEffective } from '$libs/motion';
 import type { SoundEffective } from '$libs/sound';
-import {
-	readActivePrefsSlot,
-	type ActivePrefs,
-	type ActivePrefsSlot
-} from './active-prefs.svelte';
+import { readActivePrefsSlot, type ActivePrefs, type ActivePrefsSlot } from './active-prefs.svelte';
 
 export type ActivePrefsDomTarget = HTMLElement | (() => HTMLElement | null | undefined);
 
@@ -50,10 +47,19 @@ export function createActivePrefsDomProjection(
 		if (!target) return;
 
 		const attrs: Record<string, DomAttrValue> = {};
-		readSlotIntoAttr(slots.direction, attrs, PREFS_DOM_ATTRS.DIR, managedAttrs);
-		readSlotIntoAttr(slots.motion, attrs, PREFS_DOM_ATTRS.MOTION, managedAttrs);
-		readSlotIntoAttr(slots.sound, attrs, PREFS_DOM_ATTRS.SOUND, managedAttrs);
-		readSlotIntoAttr(slots.haptic, attrs, PREFS_DOM_ATTRS.HAPTIC, managedAttrs);
+		// Reading a dimension subscribes the reader to it. This projection is
+		// already driven by its own `onChange` subscriptions below, so it must
+		// not ALSO become a reactive dependency of whoever happens to be on the
+		// stack: `apply()` runs synchronously inside the engine commit, and the
+		// app triggers that commit from its own `$effect` (setIntent). Tracking
+		// here would leave that effect subscribed to the very cell it just
+		// wrote, so every preference change would run it twice.
+		untrack(() => {
+			readSlotIntoAttr(slots.direction, attrs, PREFS_DOM_ATTRS.DIR, managedAttrs);
+			readSlotIntoAttr(slots.motion, attrs, PREFS_DOM_ATTRS.MOTION, managedAttrs);
+			readSlotIntoAttr(slots.sound, attrs, PREFS_DOM_ATTRS.SOUND, managedAttrs);
+			readSlotIntoAttr(slots.haptic, attrs, PREFS_DOM_ATTRS.HAPTIC, managedAttrs);
+		});
 
 		if (Object.keys(attrs).length === 0) return;
 
diff --git a/src/arts/prefs/test/active-prefs-reactivity.svelte.test.ts b/src/arts/prefs/test/active-prefs-reactivity.svelte.test.ts
new file mode 100644
index 000000000..a5353bf4e
--- /dev/null
+++ b/src/arts/prefs/test/active-prefs-reactivity.svelte.test.ts
@@ -0,0 +1,96 @@
+import { describe, expect, it } from 'vitest';
+import { flushSync } from 'svelte';
+import { directionDimension, enumDimension, localeDimension } from '$prefs';
+import { createActivePrefs } from '../active-prefs.svelte.ts';
+
+/**
+ * Reactivity contract of the dimension surface (`prefs.<key>.get()`).
+ *
+ * This file MUST stay `*.svelte.test.ts`: it only runs under the `client`
+ * project (vite.config.ts:93). The `server` project compiles `$state` away
+ * entirely — Svelte's server transform rewrites `let x = $state(v)` to a plain
+ * `let x = v` — so a `.test.ts` here would pass no matter what the code does.
+ *
+ * Why this exists: `getDir()` (src/uix/active-uix/prefs.ts:39) reads a
+ * dimension through this surface, and ~64 soma component wrappers resolve
+ * their direction as `dir ?? soma?.prefs.getDir() ?? 'ltr'`. If that read is
+ * untracked, every one of them freezes its direction at mount.
+ */
+
+const schema = {
+	language: localeDimension({ catalog: ['es-ES', 'ar-EG'], default: 'es-ES' }),
+	direction: directionDimension(),
+	accent: enumDimension(['blue', 'green'] as const, { default: 'blue' })
+};
+
+describe('createActivePrefs — dimension reads are reactive', () => {
+	it('re-runs a reaction when the dimension it reads commits', () => {
+		const prefs = createActivePrefs({ schema });
+		const seen: string[] = [];
+
+		const stop = $effect.root(() => {
+			$effect(() => {
+				seen.push(prefs.direction.get() as string);
+			});
+			flushSync();
+
+			prefs.direction.set('rtl');
+			flushSync();
+		});
+
+		expect(seen).toEqual(['ltr', 'rtl']);
+
+		stop();
+		prefs.dispose();
+	});
+
+	it('does NOT re-run a reaction when an unrelated dimension commits', () => {
+		const prefs = createActivePrefs({ schema });
+		let runs = 0;
+
+		const stop = $effect.root(() => {
+			$effect(() => {
+				void prefs.direction.get();
+				runs++;
+			});
+			flushSync();
+
+			prefs.accent.set('green');
+			flushSync();
+		});
+
+		// Tracking must be per-dimension: a commit on `accent` shares the same
+		// engine snapshot, so a single global cell would wake every direction
+		// reader in the app (~64 component roots).
+		expect(runs).toBe(1);
+
+		stop();
+		prefs.dispose();
+	});
+
+	it('re-runs when the dimension changes by DERIVATION, not only by intent', () => {
+		const prefs = createActivePrefs({ schema });
+		const seen: string[] = [];
+
+		const stop = $effect.root(() => {
+			$effect(() => {
+				seen.push(prefs.direction.get() as string);
+			});
+			flushSync();
+
+			// `direction` derives from `language` (dimensions/direction.ts:36-40);
+			// no intent is ever set on `direction` itself here.
+			prefs.language.set('ar-EG');
+			flushSync();
+		});
+
+		// The derivation itself is sound — the engine rebuilds `effective`
+		// through the derive hooks on every commit. What is missing is the
+		// propagation: nothing re-runs the reaction that read it.
+		expect(prefs.direction.get()).toBe('rtl');
+		expect(seen).toEqual(['ltr', 'rtl']);
+
+		stop();
+		prefs.dispose();
+	});
+});
diff --git a/src/uix/active-uix/prefs.ts b/src/uix/active-uix/prefs.ts
index 4562db496..e5703293a 100644
--- a/src/uix/active-uix/prefs.ts
+++ b/src/uix/active-uix/prefs.ts
@@ -3,12 +3,24 @@ import type { Direction } from '$libs/direction';
 import type { LocaleSource } from '$libs/locale';
 
 export interface ActiveUixPrefsView {
-	getDir(): Direction;
+	/**
+	 * Effective direction, or `undefined` when the app registered no
+	 * `direction` dimension.
+	 *
+	 * The `undefined` is load-bearing, not laziness. A component uses this
+	 * for two different purposes: its own logic (arrow keys, pointer sign,
+	 * placement flip) needs a concrete value and defaults to `'ltr'`; the
+	 * `dir` ATTRIBUTE it writes to the DOM must only appear when someone
+	 * actually asserted a direction. Collapsing the two here — returning
+	 * `'ltr'` for "nobody said" — is what makes a component stamp
+	 * `dir="ltr"` onto a page whose `<html>` says `rtl`, flipping its own
+	 * subtree back. Absent attribute means "inherit", which is the right
+	 * answer and costs no DOM read.
+	 */
+	getDir(): Direction | undefined;
 	onPreferenceChange(handler: () => void): () => void;
 }
 
-const DEFAULT_DIR: Direction = 'ltr';
-
 export const readActiveUixPrefsSlot = readActivePrefsSlot as <T>(
 	prefs: unknown,
 	key: string
@@ -36,8 +48,8 @@ export function connectLangsToPrefs(
 
 export function createActiveUixPrefsView(prefs: ActivePrefs): ActiveUixPrefsView {
 	return {
-		getDir(): Direction {
-			return readActiveUixPrefsSlot<Direction>(prefs, 'direction')?.get() ?? DEFAULT_DIR;
+		getDir(): Direction | undefined {
+			return readActiveUixPrefsSlot<Direction>(prefs, 'direction')?.get();
 		},
 		onPreferenceChange(handler: () => void): () => void {
 			const detachers = [
diff --git a/src/uix/active-uix/test/prefs-view.svelte.test.ts b/src/uix/active-uix/test/prefs-view.svelte.test.ts
new file mode 100644
index 000000000..deeaff33e
--- /dev/null
+++ b/src/uix/active-uix/test/prefs-view.svelte.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest';
+import { booleanDimension, createActivePrefs, directionDimension, localeDimension } from '$prefs';
+import { createActiveUixPrefsView } from '../prefs.ts';
+
+/**
+ * `getDir()` distinguishes "nobody asserted a direction" (`undefined`) from
+ * "the direction is ltr" (`'ltr'`). Components collapse it to a concrete value
+ * for their own math, but the `dir` ATTRIBUTE they write must only appear in
+ * the first case — otherwise a component dropped into a page whose `<html>`
+ * says `rtl` stamps `dir="ltr"` on its own root and flips its subtree back.
+ *
+ * `*.svelte.test.ts` because `createActivePrefs` is rune-backed: the `server`
+ * vitest project compiles `$state` away and would pass regardless.
+ */
+
+describe('createActiveUixPrefsView — getDir distinguishes absent from ltr', () => {
+	it('returns undefined when the app registered no `direction` dimension', () => {
+		const prefs = createActivePrefs({
+			schema: { sidebarCollapsed: booleanDimension({ default: false }) }
+		});
+
+		expect(createActiveUixPrefsView(prefs).getDir()).toBeUndefined();
+
+		prefs.dispose();
+	});
+
+	it('returns the effective value when the dimension IS registered', () => {
+		const prefs = createActivePrefs({
+			schema: {
+				language: localeDimension({ catalog: ['es-ES', 'ar-EG'], default: 'es-ES' }),
+				direction: directionDimension()
+			}
+		});
+		const view = createActiveUixPrefsView(prefs);
+
+		expect(view.getDir()).toBe('ltr');
+
+		prefs.direction.set('rtl');
+		expect(view.getDir()).toBe('rtl');
+
+		// Derivation counts as an assertion too: the app declared a language,
+		// and direction follows from it.
+		prefs.direction.clear();
+		prefs.language.set('ar-EG');
+		expect(view.getDir()).toBe('rtl');
+
+		prefs.dispose();
+	});
+});
diff --git a/src/uix/eidos/components/accordion/accordion.css b/src/uix/eidos/components/accordion/accordion.css
index dbdcad1c2..1d75b9bd5 100644
--- a/src/uix/eidos/components/accordion/accordion.css
+++ b/src/uix/eidos/components/accordion/accordion.css
@@ -112,7 +112,10 @@
 	font-size: var(--_accordion-trigger-font-size);
 	font-weight: var(--accordion-trigger-font-weight);
 	line-height: var(--accordion-trigger-line-height);
-	text-align: left;
+	/* Logical, not `left`: a button defaults to `center`, so this rule exists to
+	   pin the label to the reading start. `left` does not flip under RTL — the
+	   bidi reordering happens but the block stays against the wrong edge. */
+	text-align: start;
 	cursor: pointer;
 	transition:
 		background var(--accordion-trigger-transition-duration) var(--accordion-trigger-transition-ease),
diff --git a/src/uix/eidos/components/slider/slider.css b/src/uix/eidos/components/slider/slider.css
index 082a68561..fd7ba451d 100644
--- a/src/uix/eidos/components/slider/slider.css
+++ b/src/uix/eidos/components/slider/slider.css
@@ -92,11 +92,15 @@
 	transform: translateY(-50%);
 }
 
+/* Centring on the inline axis is a LOGICAL offset (`margin-inline-start`), never
+   `translateX(-50%)`: transforms are physical, so pairing one with
+   `inset-inline-start` centres in LTR and lands a full track-width off-axis in
+   RTL. Same idiom the Tick already used below. */
 [data-slider][data-orientation='vertical']::before {
 	inset-block: 0;
 	inset-inline-start: 50%;
 	inline-size: var(--_slider-track-size);
-	transform: translateX(-50%);
+	margin-inline-start: calc(var(--_slider-track-size) / -2);
 }
 
 [data-slider-range] {
@@ -114,7 +118,7 @@
 [data-slider-range][data-orientation='vertical'] {
 	inset-inline-start: 50%;
 	inline-size: var(--_slider-track-size);
-	transform: translateX(-50%);
+	margin-inline-start: calc(var(--_slider-track-size) / -2);
 }
 
 /* Secondary track (buffer / preloaded region) — same geometry as the range,
@@ -134,7 +138,7 @@
 [data-slider-secondary-range][data-orientation='vertical'] {
 	inset-inline-start: 50%;
 	inline-size: var(--_slider-track-size);
-	transform: translateX(-50%);
+	margin-inline-start: calc(var(--_slider-track-size) / -2);
 }
 
 [data-slider-thumb] {
diff --git a/src/uix/soma/components/accordion/accordion-provider.svelte.ts b/src/uix/soma/components/accordion/accordion-provider.svelte.ts
index e2fd50306..27d5dba3c 100644
--- a/src/uix/soma/components/accordion/accordion-provider.svelte.ts
+++ b/src/uix/soma/components/accordion/accordion-provider.svelte.ts
@@ -26,11 +26,21 @@ interface AccordionOpts
 			disabled: boolean;
 			orientation: Orientation;
 			loop: boolean;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 			region: boolean;
 		}> {}
 
 export class AccordionProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: AccordionOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma = Soma.require();
@@ -332,7 +342,7 @@ export class AccordionTriggerProvider {
 
 		const root = this.item.provider;
 		const orientation = root.opts.orientation.current;
-		const dir = root.opts.dir.current;
+		const dir = root.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const triggers = root.getTriggers();
 		const currentIndex = triggers.indexOf(e.currentTarget as HTMLButtonElement);
diff --git a/src/uix/soma/components/accordion/components/accordion.svelte b/src/uix/soma/components/accordion/components/accordion.svelte
index 56946fb5c..e65ae53cd 100644
--- a/src/uix/soma/components/accordion/components/accordion.svelte
+++ b/src/uix/soma/components/accordion/components/accordion.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
 	import { AccordionProvider } from '../accordion-provider.svelte';
 	import type { AccordionProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -48,7 +45,7 @@
 		disabled: readableActive(() => disabled),
 		orientation: readableActive(() => orientation),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		region: readableActive(() => region)
 	});
 
diff --git a/src/uix/soma/components/calendar/calendar-provider.svelte.ts b/src/uix/soma/components/calendar/calendar-provider.svelte.ts
index f80b0a39d..3ef27788d 100644
--- a/src/uix/soma/components/calendar/calendar-provider.svelte.ts
+++ b/src/uix/soma/components/calendar/calendar-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { context, type WithRefOpts } from '../../provider';
+import type { Direction } from '../../types';
 import { createAttrs } from '$uix/morfo';
 import { boolToEmptyStrOrUndef } from '$adom';
 import { readableActive, state, type ActiveProps, type StateProps } from '$libs/reactive';
@@ -85,7 +86,7 @@ export interface CalendarOpts
 			weekNumberFormat: 'iso' | 'simple';
 			announceNavigation: boolean;
 			initialFocus: boolean;
-			dir: 'ltr' | 'rtl';
+			dir: Direction | undefined;
 			locale: string;
 		}> {
 	onValueChange?: OnChangeFn<DateValue | DateValue[] | undefined>;
@@ -116,6 +117,15 @@ function sameDateArray(a: DateValue[], b: DateValue[]): boolean {
 }
 
 export class CalendarProvider implements CalendarNav {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: CalendarOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -469,7 +479,7 @@ export class CalendarProvider implements CalendarNav {
 	 */
 	handleDayKeydown(e: SomaKeyboardEvent<HTMLElement>, date: DateValue): boolean {
 		const { nextKey: horizNext, prevKey: horizPrev } = getDirectionalKeys(
-			this.opts.dir.current,
+			this.resolvedDir,
 			'horizontal'
 		);
 
diff --git a/src/uix/soma/components/calendar/components/calendar.svelte b/src/uix/soma/components/calendar/components/calendar.svelte
index 5126d5b72..3c45814a4 100644
--- a/src/uix/soma/components/calendar/components/calendar.svelte
+++ b/src/uix/soma/components/calendar/components/calendar.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { CalendarProvider, resolveInitialCalendarPlaceholder } from '../calendar-provider.svelte';
@@ -93,7 +94,7 @@
 		showWeekNumbers: readableActive(() => showWeekNumbers),
 		weekNumberFormat: readableActive(() => weekNumberFormat),
 		announceNavigation: readableActive(() => announceNavigation),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		locale: readableActive(() => locale ?? '')
 	});
 
diff --git a/src/uix/soma/components/carousel/carousel-provider.svelte.ts b/src/uix/soma/components/carousel/carousel-provider.svelte.ts
index 541dbf342..4e30ad54d 100644
--- a/src/uix/soma/components/carousel/carousel-provider.svelte.ts
+++ b/src/uix/soma/components/carousel/carousel-provider.svelte.ts
@@ -42,13 +42,22 @@ interface CarouselOpts
 			stopOnMouseEnter: boolean;
 			stopOnLastSnap: boolean;
 			disabled: boolean;
-			dir: Direction;
+			dir: Direction | undefined;
 			locale: string | undefined;
 			ariaLabel: string | undefined;
 			onIndexChange: OnChangeFn<number> | undefined;
 		}> {}
 
 export class CarouselProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: CarouselOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -257,7 +266,7 @@ export class CarouselProvider {
 		const v = this.translate;
 		const horizontal = this.opts.orientation.current === 'horizontal';
 		if (!horizontal) return `translate3d(0, ${v}px, 0)`;
-		const flip = this.opts.dir.current === 'rtl' ? -1 : 1;
+		const flip = this.resolvedDir === 'rtl' ? -1 : 1;
 		return `translate3d(${v * flip}px, 0, 0)`;
 	});
 
@@ -351,7 +360,7 @@ export class CarouselProvider {
 	readonly onkeydown = (e: SomaKeyboardEvent<HTMLDivElement>) => {
 		if (this.isDisabled) return;
 		const { nextKey, prevKey } = getDirectionalKeys(
-			this.opts.dir.current,
+			this.resolvedDir,
 			this.opts.orientation.current
 		);
 		if (e.key === nextKey) {
@@ -410,7 +419,7 @@ export class CarouselProvider {
 		//   - Vertical: drag up (negative Y) = next, drag down = prev.
 		//   - Horizontal LTR: drag left (negative X) = next, drag right = prev.
 		//   - Horizontal RTL: mirrored — drag right = next, drag left = prev.
-		const isRtlHorizontal = horizontal && this.opts.dir.current === 'rtl';
+		const isRtlHorizontal = horizontal && this.resolvedDir === 'rtl';
 		const direction = isRtlHorizontal ? -offset : offset;
 		if (direction < 0) this.next();
 		else this.prev();
@@ -453,7 +462,7 @@ export class CarouselProvider {
 			// data-* below are contract-only in the morfo (declared with `values`,
 			// no resolvable `value`), so renderProps doesn't emit them — soma owns them.
 			'data-orientation': this.opts.orientation.current,
-			'data-dir': this.opts.dir.current,
+			'data-dir': this.resolvedDir,
 			'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
 			'data-dragging': boolToEmptyStrOrUndef(this.gesture.isDragging),
 			'data-autoplay': boolToEmptyStrOrUndef(this.opts.autoplay.current && !this.paused),
diff --git a/src/uix/soma/components/carousel/components/carousel.svelte b/src/uix/soma/components/carousel/components/carousel.svelte
index 18db4424b..93485fe78 100644
--- a/src/uix/soma/components/carousel/components/carousel.svelte
+++ b/src/uix/soma/components/carousel/components/carousel.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { CarouselProvider } from '../carousel-provider.svelte';
@@ -72,7 +70,7 @@
 		stopOnMouseEnter: readableActive(() => stopOnMouseEnter),
 		stopOnLastSnap: readableActive(() => stopOnLastSnap),
 		disabled: readableActive(() => disabled),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		locale: readableActive(() => locale),
 		ariaLabel: readableActive(() => ariaLabel)
 	});
diff --git a/src/uix/soma/components/color-field/color-field-provider.svelte.ts b/src/uix/soma/components/color-field/color-field-provider.svelte.ts
index b5562397b..518e57925 100644
--- a/src/uix/soma/components/color-field/color-field-provider.svelte.ts
+++ b/src/uix/soma/components/color-field/color-field-provider.svelte.ts
@@ -114,10 +114,19 @@ export interface ColorFieldOpts
 			required: boolean;
 			invalid: boolean;
 			errorMessageId: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 		}> {}
 
 export class ColorFieldProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ColorFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -589,7 +598,7 @@ abstract class BaseColorSegmentProvider {
 	}
 
 	protected get directionalKeys() {
-		return getDirectionalKeys(this.provider.opts.dir.current, 'horizontal');
+		return getDirectionalKeys(this.provider.resolvedDir, 'horizontal');
 	}
 
 	handleArrowUp(): void {
diff --git a/src/uix/soma/components/color-field/components/color-field.svelte b/src/uix/soma/components/color-field/components/color-field.svelte
index 16837d9d2..d5719d503 100644
--- a/src/uix/soma/components/color-field/components/color-field.svelte
+++ b/src/uix/soma/components/color-field/components/color-field.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -92,9 +90,7 @@
 		required: readableActive(() => required),
 		invalid: readableActive(() => invalid),
 		errorMessageId: readableActive(() => errorMessageId),
-		dir: readableActive<'ltr' | 'rtl'>(
-			() => (_dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-		)
+		dir: activeDir(() => _dir, soma)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts b/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts
index e9e6b5966..d8e3f9e98 100644
--- a/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts
+++ b/src/uix/soma/components/color-picker/color-picker-provider.svelte.ts
@@ -156,10 +156,19 @@ export interface ColorPickerOpts
 			invalid: boolean;
 			errorMessageId: string | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 		}> {}
 
 export class ColorPickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ColorPickerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -1082,7 +1091,6 @@ export function channelGradient(
 // `channelGradient` above.
 // ────────────────────────────────────────────────────────────────────────────
 
-
 // ── Transparency grid ───────────────────────────────────────────────────────
 
 export interface ColorPickerTransparencyGridOpts
diff --git a/src/uix/soma/components/color-picker/components/color-picker.svelte b/src/uix/soma/components/color-picker/components/color-picker.svelte
index 096bc8738..b79d88843 100644
--- a/src/uix/soma/components/color-picker/components/color-picker.svelte
+++ b/src/uix/soma/components/color-picker/components/color-picker.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -144,9 +142,7 @@
 		}
 	);
 
-	const resolvedDir = readableActive<'ltr' | 'rtl'>(
-		() => (_dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-	);
+	const resolvedDir = activeDir(() => _dir, soma);
 
 	// ── ColorPicker provider (shared state + channel setters) ────────────────
 	const picker = ColorPickerProvider.create({
diff --git a/src/uix/soma/components/combobox/combobox-provider.svelte.ts b/src/uix/soma/components/combobox/combobox-provider.svelte.ts
index 9919009a8..9c14a406e 100644
--- a/src/uix/soma/components/combobox/combobox-provider.svelte.ts
+++ b/src/uix/soma/components/combobox/combobox-provider.svelte.ts
@@ -53,11 +53,20 @@ interface ComboboxOpts
 			loop: boolean;
 			deselectable: boolean;
 			allowCustomValue: boolean;
-			dir: Direction;
+			dir: Direction | undefined;
 			onOpenChangeComplete: OnChangeFn<boolean>;
 		}> {}
 
 export class ComboboxProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ComboboxOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -482,6 +491,7 @@ export class ComboboxInputProvider {
 interface ComboboxTriggerOpts extends WithRefOpts {}
 
 export class ComboboxTriggerProvider {
+
 	readonly opts: ComboboxTriggerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: ComboboxTriggerOpts) {
@@ -542,12 +552,21 @@ interface ComboboxContentOpts
 			escapeKeydownBehavior: DismissalBehavior;
 			onInteractOutside: (e: PointerEvent) => void;
 			interactOutsideBehavior: DismissalBehavior;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 			customAnchor: HTMLElement | null;
 		}> {}
 
 export class ComboboxContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ComboboxContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: ComboboxContentOpts) {
diff --git a/src/uix/soma/components/combobox/components/combobox-content.svelte b/src/uix/soma/components/combobox/components/combobox-content.svelte
index 4bb7ab226..b1cb63e93 100644
--- a/src/uix/soma/components/combobox/components/combobox-content.svelte
+++ b/src/uix/soma/components/combobox/components/combobox-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -10,7 +8,6 @@
 	import { ComboboxContentProvider } from '../combobox-provider.svelte';
 	import type { ComboboxContentProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -62,7 +59,7 @@
 		escapeKeydownBehavior: readableActive(() => escapeKeydownBehavior),
 		onInteractOutside: readableActive(() => onInteractOutside),
 		interactOutsideBehavior: readableActive(() => interactOutsideBehavior),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style),
 		customAnchor: readableActive(() => customAnchor)
 	});
diff --git a/src/uix/soma/components/combobox/components/combobox.svelte b/src/uix/soma/components/combobox/components/combobox.svelte
index f42a0cf66..8b9283fe3 100644
--- a/src/uix/soma/components/combobox/components/combobox.svelte
+++ b/src/uix/soma/components/combobox/components/combobox.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { ComboboxProvider } from '../combobox-provider.svelte';
@@ -67,7 +68,7 @@
 		loop: readableActive(() => loop),
 		deselectable: readableActive(() => deselectable),
 		allowCustomValue: readableActive(() => allowCustomValue),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		onOpenChangeComplete: readableActive(() => onOpenChangeComplete)
 	});
 
diff --git a/src/uix/soma/components/command/command-provider.svelte.ts b/src/uix/soma/components/command/command-provider.svelte.ts
index 84c6bb99c..602a92ac9 100644
--- a/src/uix/soma/components/command/command-provider.svelte.ts
+++ b/src/uix/soma/components/command/command-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { context, type WithRefOpts } from '../../provider';
+import type { Direction } from '../../types';
 import { boolToEmptyStrOrUndef } from '$adom';
 import {
 	readableActive,
@@ -85,7 +86,7 @@ interface CommandOpts
 			vimBindings: boolean;
 			columns: number;
 			disablePointerSelection: boolean;
-			dir: 'ltr' | 'rtl';
+			dir: Direction | undefined;
 		}> {
 	/** Provider-level select event — fires for ANY item (after its own
 	 * onSelect). A host (Command.Dialog) hooks it to close on select. */
@@ -93,6 +94,15 @@ interface CommandOpts
 }
 
 export class CommandProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: CommandOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -454,7 +464,7 @@ export class CommandInputProvider {
 		const vim = this.provider.opts.vimBindings.current;
 		// In RTL, ArrowLeft moves forward and ArrowRight moves backward.
 		const { nextKey: horizNext, prevKey: horizPrev } = getDirectionalKeys(
-			this.provider.opts.dir.current,
+			this.provider.resolvedDir,
 			'horizontal'
 		);
 
diff --git a/src/uix/soma/components/command/components/command.svelte b/src/uix/soma/components/command/components/command.svelte
index a82934a13..44a06be5f 100644
--- a/src/uix/soma/components/command/components/command.svelte
+++ b/src/uix/soma/components/command/components/command.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { CommandProvider } from '../command-provider.svelte';
@@ -58,7 +59,7 @@
 		vimBindings: readableActive(() => vimBindings),
 		columns: readableActive(() => columns),
 		disablePointerSelection: readableActive(() => disablePointerSelection),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		onSelect: readableActive(() => onSelect)
 	});
 
diff --git a/src/uix/soma/components/context-menu/components/context-menu-content.svelte b/src/uix/soma/components/context-menu/components/context-menu-content.svelte
index 5237bfd04..19405d6e8 100644
--- a/src/uix/soma/components/context-menu/components/context-menu-content.svelte
+++ b/src/uix/soma/components/context-menu/components/context-menu-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -74,7 +72,7 @@
 		onInteractOutside: readableActive(() => onInteractOutside),
 		interactOutsideBehavior: readableActive(() => interactOutsideBehavior),
 		onFocusOutside: readableActive(() => onFocusOutside),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style)
 	});
 
diff --git a/src/uix/soma/components/context-menu/components/context-menu-sub-content.svelte b/src/uix/soma/components/context-menu/components/context-menu-sub-content.svelte
index 77de7d3ea..1c6ca904b 100644
--- a/src/uix/soma/components/context-menu/components/context-menu-sub-content.svelte
+++ b/src/uix/soma/components/context-menu/components/context-menu-sub-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -46,7 +44,7 @@
 		collisionBoundary: readableActive(() => collisionBoundary),
 		collisionPadding: readableActive(() => collisionPadding),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style)
 	});
 
diff --git a/src/uix/soma/components/context-menu/components/context-menu.svelte b/src/uix/soma/components/context-menu/components/context-menu.svelte
index cfa451142..08daf9aa0 100644
--- a/src/uix/soma/components/context-menu/components/context-menu.svelte
+++ b/src/uix/soma/components/context-menu/components/context-menu.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { createId } from '$active-uix/id';
 	import { ContextMenuProvider } from '../context-menu-provider.svelte';
 	import type { ContextMenuProps } from '../types';
@@ -30,7 +28,7 @@
 			}
 		),
 		onOpenChangeComplete: readableActive(() => onOpenChangeComplete),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr')
+		dir: activeDir(() => dir, soma)
 	});
 </script>
 
diff --git a/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts b/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts
index 83d7f490c..e7db01a47 100644
--- a/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts
+++ b/src/uix/soma/components/context-menu/context-menu-provider.svelte.ts
@@ -46,11 +46,20 @@ interface ContextMenuOpts
 		ProviderOpts,
 		StateProps<{ open: boolean }>,
 		ActiveProps<{
-			dir: Direction;
+			dir: Direction | undefined;
 			onOpenChangeComplete: OnChangeFn<boolean>;
 		}> {}
 
 export class ContextMenuProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ContextMenuOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -228,11 +237,20 @@ interface ContextMenuContentOpts
 			onInteractOutside: (e: PointerEvent) => void;
 			interactOutsideBehavior: DismissalBehavior;
 			onFocusOutside: (e: FocusEvent) => void;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 		}> {}
 
 export class ContextMenuContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ContextMenuContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: ContextMenuContentOpts) {
@@ -338,7 +356,7 @@ export class ContextMenuContentProvider {
 		const items = this.provider.getItems(container);
 		const active = this.provider.soma.dom.activeElement(container) as HTMLElement | null;
 		const currentIndex = active ? items.indexOf(active) : -1;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, 'vertical');
 
 		let targetIndex = -1;
@@ -962,11 +980,20 @@ interface ContextMenuSubContentOpts
 			collisionBoundary: Arrayable<Boundary>;
 			collisionPadding: number | Partial<Record<Side, number>>;
 			loop: boolean;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 		}> {}
 
 export class ContextMenuSubContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ContextMenuSubContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: ContextMenuSubContentOpts) {
diff --git a/src/uix/soma/components/css-field/css-field-provider.svelte.ts b/src/uix/soma/components/css-field/css-field-provider.svelte.ts
index 88cf2631e..c42b0abd3 100644
--- a/src/uix/soma/components/css-field/css-field-provider.svelte.ts
+++ b/src/uix/soma/components/css-field/css-field-provider.svelte.ts
@@ -135,6 +135,7 @@ interface CssFieldOpts
 		}> {}
 
 export class CssFieldProvider {
+
 	readonly opts: CssFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/date-field/components/date-field.svelte b/src/uix/soma/components/date-field/components/date-field.svelte
index 6cd8b111b..9e66f1366 100644
--- a/src/uix/soma/components/date-field/components/date-field.svelte
+++ b/src/uix/soma/components/date-field/components/date-field.svelte
@@ -1,20 +1,13 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
 	import { watch } from '$libs/reactive';
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { DateFieldProvider } from '../date-field-provider.svelte';
 	import type { DateFieldProviderProps } from '../types';
-	import {
-		CalendarDate,
-		getLocalTimeZone,
-		today,
-		type DateValue
-	} from '$libs/days';
+	import { CalendarDate, getLocalTimeZone, today, type DateValue } from '$libs/days';
 	import { Soma } from '../../../core/soma.svelte';
 
 	const uid = $props.id();
@@ -104,9 +97,7 @@
 		hideTimeZone: readableActive(() => hideTimeZone),
 		hourCycle: readableActive(() => hourCycle),
 		locale: readableActive(() => locale ?? soma?.langs.getLocale() ?? ''),
-		dir: readableActive<'ltr' | 'rtl'>(
-			() => (_dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-		),
+		dir: activeDir(() => _dir, soma),
 		minValue: readableActive(() => minValue),
 		maxValue: readableActive(() => maxValue),
 		validate: readableActive(() => validate),
diff --git a/src/uix/soma/components/date-field/date-field-provider.svelte.ts b/src/uix/soma/components/date-field/date-field-provider.svelte.ts
index 1f43fa42b..2171533cc 100644
--- a/src/uix/soma/components/date-field/date-field-provider.svelte.ts
+++ b/src/uix/soma/components/date-field/date-field-provider.svelte.ts
@@ -180,7 +180,7 @@ export interface DateFieldOpts
 			granularity: Granularity | undefined;
 			hourCycle: HourCycle | undefined;
 			locale: string;
-			dir: Direction;
+			dir: Direction | undefined;
 			hideTimeZone: boolean;
 			required: boolean;
 			errorMessageId: string | undefined;
@@ -201,6 +201,15 @@ export interface DateFieldOpts
 }
 
 export class DateFieldProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: DateFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly runtime: SomaRuntime;
@@ -624,12 +633,11 @@ export class DateFieldProvider {
 		// literals to a single one between any two visible parts. Time
 		// segments (hour/minute/second/dayPeriod) and their separators
 		// are passed through untouched.
-		const isDateOnly = (part: string) =>
-			part === 'day' || part === 'month' || part === 'year';
+		const isDateOnly = (part: string) => part === 'day' || part === 'month' || part === 'year';
 		const flat = arr.filter((seg) =>
 			isDateOnly(seg.part) ? visible.has(seg.part as EditableSegmentPart) : true
 		);
-		const out: typeof arr[number][] = [];
+		const out: (typeof arr)[number][] = [];
 		let prevWasDate = false;
 		for (const seg of flat) {
 			if (seg.part === 'literal') {
@@ -1104,7 +1112,7 @@ abstract class BaseNumericSegmentProvider {
 	}
 
 	get directionalKeys() {
-		return getDirectionalKeys(this.provider.opts.dir.current, 'horizontal');
+		return getDirectionalKeys(this.provider.resolvedDir, 'horizontal');
 	}
 
 	/**
@@ -1564,7 +1572,7 @@ class DateFieldDayPeriodSegmentProvider {
 	}
 
 	get directionalKeys() {
-		return getDirectionalKeys(this.provider.opts.dir.current, 'horizontal');
+		return getDirectionalKeys(this.provider.resolvedDir, 'horizontal');
 	}
 
 	onkeydown = (e: SomaKeyboardEvent) => {
@@ -1684,7 +1692,7 @@ class DateFieldTimeZoneSegmentProvider {
 	}
 
 	get directionalKeys() {
-		return getDirectionalKeys(this.provider.opts.dir.current, 'horizontal');
+		return getDirectionalKeys(this.provider.resolvedDir, 'horizontal');
 	}
 
 	onkeydown = (e: SomaKeyboardEvent) => {
diff --git a/src/uix/soma/components/date-picker/components/date-picker.svelte b/src/uix/soma/components/date-picker/components/date-picker.svelte
index f60690dd7..cdab202c5 100644
--- a/src/uix/soma/components/date-picker/components/date-picker.svelte
+++ b/src/uix/soma/components/date-picker/components/date-picker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { readableActive, writableActive } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
@@ -110,9 +111,7 @@
 	);
 
 	const resolvedLocale = readableActive(() => locale ?? soma?.langs.getLocale() ?? '');
-	const resolvedDir = readableActive<'ltr' | 'rtl'>(
-		() => (dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-	);
+	const resolvedDir = activeDir(() => dir, soma);
 
 	// ── DatePicker context (shared source of truth) ───────────────────────────
 	const state = DatePickerProvider.create({
diff --git a/src/uix/soma/components/date-picker/date-picker-provider.svelte.ts b/src/uix/soma/components/date-picker/date-picker-provider.svelte.ts
index e66677ed2..949abda0b 100644
--- a/src/uix/soma/components/date-picker/date-picker-provider.svelte.ts
+++ b/src/uix/soma/components/date-picker/date-picker-provider.svelte.ts
@@ -89,7 +89,7 @@ interface DatePickerOpts
 			hideTimeZone: boolean;
 			hourCycle: HourCycle | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			// Calendar options
 			pagedNavigation: boolean;
 			weekStartsOn: WeekStartsOn | undefined;
@@ -120,6 +120,15 @@ interface DatePickerOpts
  * open flags through a single context.
  */
 export class DatePickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: DatePickerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/date-range-field/components/date-range-field.svelte b/src/uix/soma/components/date-range-field/components/date-range-field.svelte
index 08b1ee287..f7b188c71 100644
--- a/src/uix/soma/components/date-range-field/components/date-range-field.svelte
+++ b/src/uix/soma/components/date-range-field/components/date-range-field.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
-	import {
-	readableActive,
-	writableActive,
-	state
-} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive, state } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -81,20 +78,17 @@
 	);
 
 	// Sync start / end → external `value`, firing onValueChange only when complete.
-	watch(
-		[() => startValue.current, () => endValue.current],
-		([s, e]) => {
-			onStartValueChange(s);
-			onEndValueChange(e);
-			if (s && e) {
-				const range: DateRange = { start: s, end: e };
-				value = range;
-				onValueChange(range);
-			} else if (!s && !e) {
-				value = { start: undefined, end: undefined } as never;
-			}
+	watch([() => startValue.current, () => endValue.current], ([s, e]) => {
+		onStartValueChange(s);
+		onEndValueChange(e);
+		if (s && e) {
+			const range: DateRange = { start: s, end: e };
+			value = range;
+			onValueChange(range);
+		} else if (!s && !e) {
+			value = { start: undefined, end: undefined } as never;
 		}
-	);
+	});
 
 	const state_ = DateRangeFieldProvider.create({
 		id: readableActive(() => id),
@@ -135,9 +129,7 @@
 		hideTimeZone: readableActive(() => hideTimeZone),
 		hourCycle: readableActive(() => hourCycle),
 		locale: readableActive(() => locale),
-		dir: readableActive<'ltr' | 'rtl'>(
-			() => (_dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-		),
+		dir: activeDir(() => _dir, soma),
 		errorMessageId: readableActive(() => errorMessageId)
 	});
 
diff --git a/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts b/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts
index dfc7d31fb..eb86d91f6 100644
--- a/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts
+++ b/src/uix/soma/components/date-range-field/date-range-field-provider.svelte.ts
@@ -62,7 +62,7 @@ interface DateRangeFieldOpts
 			hideTimeZone: boolean;
 			hourCycle: HourCycle | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			errorMessageId: string | undefined;
 		}> {}
 
@@ -72,6 +72,15 @@ interface DateRangeFieldOpts
  * wrappers each drive one endpoint via its own DateField subtree.
  */
 export class DateRangeFieldProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: DateRangeFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/date-range-picker/components/date-range-picker.svelte b/src/uix/soma/components/date-range-picker/components/date-range-picker.svelte
index 99ead0e72..e911df7eb 100644
--- a/src/uix/soma/components/date-range-picker/components/date-range-picker.svelte
+++ b/src/uix/soma/components/date-range-picker/components/date-range-picker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { readableActive, writableActive, state } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
@@ -143,9 +144,7 @@
 		}
 	);
 
-	const resolvedDir = readableActive<'ltr' | 'rtl'>(
-		() => (dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-	);
+	const resolvedDir = activeDir(() => dir, soma);
 
 	// ── Shared state via picker context ───────────────────────────────────────
 	const pickerState = DateRangePickerProvider.create({
diff --git a/src/uix/soma/components/date-range-picker/date-range-picker-provider.svelte.ts b/src/uix/soma/components/date-range-picker/date-range-picker-provider.svelte.ts
index ef794083e..4b0791550 100644
--- a/src/uix/soma/components/date-range-picker/date-range-picker-provider.svelte.ts
+++ b/src/uix/soma/components/date-range-picker/date-range-picker-provider.svelte.ts
@@ -83,7 +83,7 @@ interface DateRangePickerOpts
 			hideTimeZone: boolean;
 			hourCycle: HourCycle | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			pagedNavigation: boolean;
 			weekStartsOn: WeekStartsOn | undefined;
 			weekdayFormat: Intl.DateTimeFormatOptions['weekday'];
@@ -108,6 +108,15 @@ interface DateRangePickerOpts
  * `DateRangePicker.Calendar` creates a `RangeCalendarProvider`.
  */
 export class DateRangePickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: DateRangePickerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/drawer/drawer-provider.svelte.ts b/src/uix/soma/components/drawer/drawer-provider.svelte.ts
index ae8734fc8..d6ec157d6 100644
--- a/src/uix/soma/components/drawer/drawer-provider.svelte.ts
+++ b/src/uix/soma/components/drawer/drawer-provider.svelte.ts
@@ -178,7 +178,10 @@ export class DrawerProvider {
 	private overlayRef = state<HTMLElement | null>(null);
 
 	readonly resolvedSide = $derived.by((): DrawerSide => {
-		const dir = this.soma.prefs.getDir();
+		// Own math, so the concrete default applies. `getDir()` is undefined when
+		// the app registered no `direction` dimension; that is only meaningful
+		// for the DOM attribute, and the drawer stamps none.
+		const dir = this.soma.prefs.getDir() ?? 'ltr';
 		return resolveDirection(this.opts.direction.current, dir);
 	});
 
@@ -305,10 +308,7 @@ export class DrawerProvider {
 		return this.triggerClose(DISMISS_CAUSES[action], opts);
 	}
 
-	private async triggerClose(
-		cause: DismissCause,
-		opts: { message?: string } = {}
-	): Promise<void> {
+	private async triggerClose(cause: DismissCause, opts: { message?: string } = {}): Promise<void> {
 		// Resolve target with fall-throughs (mirrors DialogProvider): the
 		// runtime-registered Content ref takes priority over the
 		// triggerNode when contentRef state isn't separately set.
diff --git a/src/uix/soma/components/dropdown-menu/components/dropdown-menu-content.svelte b/src/uix/soma/components/dropdown-menu/components/dropdown-menu-content.svelte
index 40fbff1e4..7ea49b236 100644
--- a/src/uix/soma/components/dropdown-menu/components/dropdown-menu-content.svelte
+++ b/src/uix/soma/components/dropdown-menu/components/dropdown-menu-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -10,7 +8,6 @@
 	import { MenuContentProvider, MenuProvider } from '../dropdown-menu-provider.svelte';
 	import type { MenuContentProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 	const parentMenu = MenuProvider.get();
@@ -79,9 +76,7 @@
 		onFocusOutside: readableActive(() => onFocusOutside),
 		// Prefer an explicit prop → the parent Menu provider's dir (so wrapper
 		// components like Menubar can propagate `dir` down) → Soma → 'ltr'.
-		dir: readableActive(
-			() => dir ?? parentMenu?.opts.dir.current ?? soma?.prefs.getDir() ?? 'ltr'
-		),
+		dir: activeDir(() => dir ?? parentMenu?.opts.dir.current, soma),
 		style: readableActive(() => style),
 		customAnchor: readableActive(() => customAnchor)
 	});
diff --git a/src/uix/soma/components/dropdown-menu/components/dropdown-menu-sub-content.svelte b/src/uix/soma/components/dropdown-menu/components/dropdown-menu-sub-content.svelte
index bc9e0ad0a..f6d375ab7 100644
--- a/src/uix/soma/components/dropdown-menu/components/dropdown-menu-sub-content.svelte
+++ b/src/uix/soma/components/dropdown-menu/components/dropdown-menu-sub-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -33,13 +31,12 @@
 		...restProps
 	}: MenuSubContentProps = $props();
 
-	// Resolve the effective text direction: explicit prop → parent Menu →
-	// Soma → 'ltr'. Submenus default to the logical "end" side, which in RTL
-	// means the visual left. Explicit `side` prop always wins.
-	const effectiveDir = $derived(
-		dir ?? parentMenu?.opts.dir.current ?? soma?.prefs.getDir() ?? 'ltr'
-	);
-	const effectiveSide = $derived(side ?? (effectiveDir === 'rtl' ? 'left' : 'right'));
+	// A submenu consults its parent Menu before prefs — that extra step is
+	// declared here, at the call site, instead of being buried in an inline
+	// chain. Submenus default to the logical "end" side, which in RTL means the
+	// visual left; an explicit `side` prop always wins.
+	const assertedDir = activeDir(() => dir ?? parentMenu?.opts.dir.current, soma);
+	const effectiveSide = $derived(side ?? (assertedDir.current === 'rtl' ? 'left' : 'right'));
 
 	const state = MenuSubContentProvider.create({
 		id: readableActive(() => id),
@@ -55,7 +52,7 @@
 		collisionBoundary: readableActive(() => collisionBoundary),
 		collisionPadding: readableActive(() => collisionPadding),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => effectiveDir),
+		dir: assertedDir,
 		style: readableActive(() => style)
 	});
 
diff --git a/src/uix/soma/components/dropdown-menu/components/dropdown-menu.svelte b/src/uix/soma/components/dropdown-menu/components/dropdown-menu.svelte
index f2e1c63af..a77c4c668 100644
--- a/src/uix/soma/components/dropdown-menu/components/dropdown-menu.svelte
+++ b/src/uix/soma/components/dropdown-menu/components/dropdown-menu.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { createId } from '$active-uix/id';
 	import { MenuProvider } from '../dropdown-menu-provider.svelte';
 	import type { MenuProps } from '../types';
@@ -32,7 +30,7 @@
 			}
 		),
 		onOpenChangeComplete: readableActive(() => onOpenChangeComplete),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		accessibleWhenDisabled: readableActive(() => accessibleWhenDisabled)
 	});
 </script>
diff --git a/src/uix/soma/components/dropdown-menu/dropdown-menu-provider.svelte.ts b/src/uix/soma/components/dropdown-menu/dropdown-menu-provider.svelte.ts
index f095e6b57..4f0f32c4f 100644
--- a/src/uix/soma/components/dropdown-menu/dropdown-menu-provider.svelte.ts
+++ b/src/uix/soma/components/dropdown-menu/dropdown-menu-provider.svelte.ts
@@ -51,12 +51,21 @@ interface MenuOpts
 		ProviderOpts,
 		StateProps<{ open: boolean }>,
 		ActiveProps<{
-			dir: Direction;
+			dir: Direction | undefined;
 			accessibleWhenDisabled: boolean;
 			onOpenChangeComplete: OnChangeFn<boolean>;
 		}> {}
 
 export class MenuProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: MenuOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -284,12 +293,21 @@ interface MenuContentOpts
 			onInteractOutside: (e: PointerEvent) => void;
 			interactOutsideBehavior: DismissalBehavior | undefined;
 			onFocusOutside: (e: FocusEvent) => void;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 			customAnchor: HTMLElement | null;
 		}> {}
 
 export class MenuContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: MenuContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: MenuContentOpts) {
@@ -439,7 +457,7 @@ export class MenuContentProvider {
 		const items = this.provider.getItems(container);
 		const active = this.provider.soma.dom.activeElement(container) as HTMLElement | null;
 		const currentIndex = active ? items.indexOf(active) : -1;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, 'vertical');
 
 		let targetIndex = -1;
@@ -1192,11 +1210,20 @@ interface MenuSubContentOpts
 			collisionBoundary: Arrayable<Boundary>;
 			collisionPadding: number | Partial<Record<Side, number>>;
 			loop: boolean;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 		}> {}
 
 export class MenuSubContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: MenuSubContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: MenuSubContentOpts) {
diff --git a/src/uix/soma/components/emoji-picker/components/emoji-picker.svelte b/src/uix/soma/components/emoji-picker/components/emoji-picker.svelte
index 40756cfb3..93244625c 100644
--- a/src/uix/soma/components/emoji-picker/components/emoji-picker.svelte
+++ b/src/uix/soma/components/emoji-picker/components/emoji-picker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -62,7 +63,7 @@
 		showRecents: readableActive(() => showRecents),
 		maxRecents: readableActive(() => maxRecents),
 		closeOnSelect: readableActive(() => closeOnSelect),
-		dir: readableActive(() => (dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl')
+		dir: activeDir(() => dir, soma)
 	});
 
 	// The composed Popover — owns open/close, focus trap/return, portal.
diff --git a/src/uix/soma/components/emoji-picker/emoji-picker-provider.svelte.ts b/src/uix/soma/components/emoji-picker/emoji-picker-provider.svelte.ts
index e6c94281e..ff88288d7 100644
--- a/src/uix/soma/components/emoji-picker/emoji-picker-provider.svelte.ts
+++ b/src/uix/soma/components/emoji-picker/emoji-picker-provider.svelte.ts
@@ -43,6 +43,15 @@ interface EmojiPickerOpts
 		}> {}
 
 export class EmojiPickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: EmojiPickerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/link-preview/components/link-preview-content.svelte b/src/uix/soma/components/link-preview/components/link-preview-content.svelte
index 7f23e1221..0801c46c3 100644
--- a/src/uix/soma/components/link-preview/components/link-preview-content.svelte
+++ b/src/uix/soma/components/link-preview/components/link-preview-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -66,7 +64,7 @@
 		onInteractOutside: readableActive(() => onInteractOutside),
 		interactOutsideBehavior: readableActive(() => interactOutsideBehavior),
 		onFocusOutside: readableActive(() => onFocusOutside),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style)
 	});
 
diff --git a/src/uix/soma/components/link-preview/link-preview-provider.svelte.ts b/src/uix/soma/components/link-preview/link-preview-provider.svelte.ts
index 4bd21a6a2..420201d42 100644
--- a/src/uix/soma/components/link-preview/link-preview-provider.svelte.ts
+++ b/src/uix/soma/components/link-preview/link-preview-provider.svelte.ts
@@ -178,6 +178,7 @@ export class LinkPreviewProvider {
 interface LinkPreviewTriggerOpts extends WithRefOpts {}
 
 export class LinkPreviewTriggerProvider {
+
 	readonly opts: LinkPreviewTriggerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: LinkPreviewTriggerOpts) {
@@ -252,11 +253,20 @@ interface LinkPreviewContentOpts
 			onInteractOutside: (e: PointerEvent) => void;
 			interactOutsideBehavior: DismissalBehavior;
 			onFocusOutside: (e: FocusEvent) => void;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 		}> {}
 
 export class LinkPreviewContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: LinkPreviewContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: LinkPreviewContentOpts) {
diff --git a/src/uix/soma/components/listbox/listbox-provider.svelte.ts b/src/uix/soma/components/listbox/listbox-provider.svelte.ts
index 5c03614e9..f74e78df3 100644
--- a/src/uix/soma/components/listbox/listbox-provider.svelte.ts
+++ b/src/uix/soma/components/listbox/listbox-provider.svelte.ts
@@ -45,6 +45,7 @@ interface ListboxOpts
 		}> {}
 
 export class ListboxProvider {
+
 	readonly opts: ListboxOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -115,8 +116,19 @@ export class ListboxProvider {
 		() => this.opts.invalid.current || (this.field?.isInvalid ?? false)
 	);
 
-	readonly resolvedDir: Active<Direction> = readableActive(
-		() => this.opts.dir.current ?? this.soma.prefs.getDir() ?? 'ltr'
+	/** Concrete direction for this component's OWN math (arrow keys). */
+	readonly resolvedDir: Active<Direction> = readableActive(() => this.assertedDir.current ?? 'ltr');
+
+	/**
+	 * What someone actually ASSERTED — `undefined` when neither the prop nor a
+	 * registered `direction` preference said anything. This, not `resolvedDir`,
+	 * is what the `dir` attribute stamps: an omitted attribute inherits, while
+	 * a defaulted `'ltr'` would force this subtree back to LTR inside an RTL
+	 * page. Unlike the other components, listbox resolves in the provider
+	 * rather than in its wrapper, so the split lives here.
+	 */
+	readonly assertedDir: Active<Direction | undefined> = readableActive(
+		() => this.opts.dir.current ?? this.soma.prefs.getDir()
 	);
 
 	readonly resolvedAriaLabel: Active<string | undefined> = readableActive(() =>
@@ -194,11 +206,7 @@ export class ListboxProvider {
 			// item element by data-value so the cascade matches this
 			// specific item (multiple items registered under same kebab).
 			const isNowSelected = next.includes(value);
-			const eventName = isNowSelected
-				? 'commit-select'
-				: wasSelected
-					? 'commit-unselect'
-					: null;
+			const eventName = isNowSelected ? 'commit-select' : wasSelected ? 'commit-unselect' : null;
 			if (eventName) {
 				const itemEl = this.opts.ref?.current?.querySelector<HTMLElement>(
 					`[${attrs.item}][data-value="${CSS.escape(value)}"]`
@@ -358,7 +366,7 @@ export class ListboxProvider {
 			// readonly/required/invalid, default aria-label) resolved against this
 			// part's registered sources — no longer re-declared here.
 			...this.runtimePart.renderProps(),
-			dir: this.resolvedDir.current,
+			dir: this.assertedDir.current,
 			// Soma override: honours explicit ariaLabel prop + suppresses when
 			// aria-labelledby is set (overrides the morfo's default translation;
 			// undefined correctly removes it). aria-labelledby is not morfo-modeled.
diff --git a/src/uix/soma/components/menubar/components/menubar-panel.svelte b/src/uix/soma/components/menubar/components/menubar-panel.svelte
index 352579070..de8f4b6b0 100644
--- a/src/uix/soma/components/menubar/components/menubar-panel.svelte
+++ b/src/uix/soma/components/menubar/components/menubar-panel.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -58,9 +59,7 @@
 		onInteractOutside: readableActive(() => onInteractOutside),
 		onFocusOutside: readableActive(() => onFocusOutside),
 		interactOutsideBehavior: readableActive(() => interactOutsideBehavior),
-		dir: readableActive(
-			() => dir ?? menu?.provider.opts.dir.current ?? soma?.prefs.getDir() ?? 'ltr'
-		),
+		dir: activeDir(() => dir ?? menu?.provider.opts.dir.current, soma),
 		style: readableActive(() => style as string | StyleProperties | null | undefined),
 		customAnchor: readableActive(() => customAnchor)
 	});
diff --git a/src/uix/soma/components/menubar/components/menubar.svelte b/src/uix/soma/components/menubar/components/menubar.svelte
index 12aed1c76..f08183ade 100644
--- a/src/uix/soma/components/menubar/components/menubar.svelte
+++ b/src/uix/soma/components/menubar/components/menubar.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { MenubarProvider } from '../menubar-provider.svelte';
@@ -37,7 +35,7 @@
 				onValueChange(v);
 			}
 		),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		loop: readableActive(() => loop)
 	});
 
diff --git a/src/uix/soma/components/menubar/menubar-provider.svelte.ts b/src/uix/soma/components/menubar/menubar-provider.svelte.ts
index 7ab154817..d174deaa2 100644
--- a/src/uix/soma/components/menubar/menubar-provider.svelte.ts
+++ b/src/uix/soma/components/menubar/menubar-provider.svelte.ts
@@ -40,11 +40,20 @@ interface MenubarOpts
 		WithRefOpts,
 		StateProps<{ value: string }>,
 		ActiveProps<{
-			dir: Direction;
+			dir: Direction | undefined;
 			loop: boolean;
 		}> {}
 
 export class MenubarProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: MenubarOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -316,7 +325,7 @@ export class MenubarMenuProvider {
 			return;
 		}
 
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, 'horizontal');
 		if (e.key !== nextKey && e.key !== prevKey) return;
 
@@ -440,7 +449,7 @@ export class MenubarTriggerProvider {
 
 	readonly onkeydown = (e: SomaKeyboardEvent<HTMLButtonElement>) => {
 		if (this.opts.disabled.current) return;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, 'horizontal');
 		const myValue = this.menu.opts.value.current;
 
@@ -523,7 +532,7 @@ interface MenubarPanelOpts
 			onInteractOutside: (e: PointerEvent) => void;
 			onFocusOutside: (e: FocusEvent) => void;
 			interactOutsideBehavior: DismissalBehavior | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 			customAnchor: HTMLElement | null;
 		}> {}
@@ -544,6 +553,15 @@ interface MenubarPanelOpts
  * open coordination work unchanged for both surface kinds.
  */
 export class MenubarPanelContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: MenubarPanelOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: MenubarPanelOpts) {
diff --git a/src/uix/soma/components/month-grid/components/month-grid.svelte b/src/uix/soma/components/month-grid/components/month-grid.svelte
index 364987e11..9339313fd 100644
--- a/src/uix/soma/components/month-grid/components/month-grid.svelte
+++ b/src/uix/soma/components/month-grid/components/month-grid.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
-	import {
-		MonthGridProvider,
-		resolveInitialMonthPlaceholder
-	} from '../month-grid-provider.svelte';
+	import { MonthGridProvider, resolveInitialMonthPlaceholder } from '../month-grid-provider.svelte';
 	import type { MonthGridProps } from '../types';
 	import { Soma } from '../../../core/soma.svelte';
 
@@ -56,7 +54,7 @@
 		maxValue: readableActive(() => maxValue),
 		disabled: readableActive(() => disabled),
 		readonly: readableActive(() => readonly),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		locale: readableActive(() => locale ?? ''),
 		monthFormat: readableActive(() => monthFormat),
 		ariaLabel: readableActive(() => ariaLabel)
diff --git a/src/uix/soma/components/month-grid/month-grid-provider.svelte.ts b/src/uix/soma/components/month-grid/month-grid-provider.svelte.ts
index 5d2b750c5..7d7d3f7b2 100644
--- a/src/uix/soma/components/month-grid/month-grid-provider.svelte.ts
+++ b/src/uix/soma/components/month-grid/month-grid-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { context, type WithRefOpts } from '../../provider';
+import type { Direction } from '../../types';
 import { boolToEmptyStrOrUndef } from '$adom';
 import { state, type ActiveProps, type StateProps } from '$libs/reactive';
 import type { SomaKeyboardEvent, SomaMouseEvent, OnChangeFn } from '../../types';
@@ -57,7 +58,7 @@ export interface MonthGridOpts
 			maxValue: MonthValue | undefined;
 			disabled: boolean;
 			readonly: boolean;
-			dir: 'ltr' | 'rtl';
+			dir: Direction | undefined;
 			locale: string;
 			monthFormat: 'long' | 'short' | 'narrow';
 			ariaLabel: string | undefined;
@@ -66,6 +67,15 @@ export interface MonthGridOpts
 }
 
 export class MonthGridProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: MonthGridOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -127,9 +137,7 @@ export class MonthGridProvider {
 
 	readonly fullLabel = $derived.by(() => {
 		const base =
-			this.opts.ariaLabel.current ??
-			this.soma.langs.ts(MONTH_GRID_LANGS.LABEL) ??
-			'Month grid';
+			this.opts.ariaLabel.current ?? this.soma.langs.ts(MONTH_GRID_LANGS.LABEL) ?? 'Month grid';
 		return `${base}, ${this.headingValue}`;
 	});
 
@@ -166,7 +174,10 @@ export class MonthGridProvider {
 	private setPlaceholder(next: MonthPlaceholder, target?: HTMLElement): void {
 		if (this.opts.placeholder.current.year === next.year) return;
 		this.opts.placeholder.current = next;
-		void this.runtime.trigger('shift-navigate-step', target ? { fallbackTarget: target } : undefined);
+		void this.runtime.trigger(
+			'shift-navigate-step',
+			target ? { fallbackTarget: target } : undefined
+		);
 	}
 
 	prevPage(target?: HTMLElement): void {
@@ -193,7 +204,7 @@ export class MonthGridProvider {
 
 	handleCellKeydown(e: SomaKeyboardEvent<HTMLElement>, month: number): boolean {
 		const { nextKey: horizNext, prevKey: horizPrev } = getDirectionalKeys(
-			this.opts.dir.current,
+			this.resolvedDir,
 			'horizontal'
 		);
 
@@ -455,8 +466,7 @@ export class MonthGridGridProvider {
 
 // ── Cell ─────────────────────────────────────────────────────────────────────
 
-export interface MonthGridCellOpts
-	extends WithRefOpts, ActiveProps<{ month: number }> {}
+export interface MonthGridCellOpts extends WithRefOpts, ActiveProps<{ month: number }> {}
 
 export class MonthGridCellProvider {
 	readonly opts: MonthGridCellOpts;
diff --git a/src/uix/soma/components/natural-time-picker/natural-time-picker-provider.svelte.ts b/src/uix/soma/components/natural-time-picker/natural-time-picker-provider.svelte.ts
index 85597a553..7af2ce5cc 100644
--- a/src/uix/soma/components/natural-time-picker/natural-time-picker-provider.svelte.ts
+++ b/src/uix/soma/components/natural-time-picker/natural-time-picker-provider.svelte.ts
@@ -49,7 +49,7 @@ export interface NaturalTimePickerOpts
 			/** Whether the moment chips render icon-only (with a tooltip). */
 			chipsIconOnly: boolean;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			disabled: boolean;
 			readonly: boolean;
 			required: boolean;
@@ -64,6 +64,15 @@ export interface NaturalTimePickerOpts
  * class only edits the working value it is handed.
  */
 export class NaturalTimePickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: NaturalTimePickerOpts;
 	readonly soma: Soma;
 	readonly runtime: SomaRuntime;
diff --git a/src/uix/soma/components/navigation-menu/navigation-menu-provider.svelte.ts b/src/uix/soma/components/navigation-menu/navigation-menu-provider.svelte.ts
index b95c54b7b..0dcfa9464 100644
--- a/src/uix/soma/components/navigation-menu/navigation-menu-provider.svelte.ts
+++ b/src/uix/soma/components/navigation-menu/navigation-menu-provider.svelte.ts
@@ -114,8 +114,21 @@ export class NavigationMenuProvider {
 		});
 	}
 
+	/** Concrete direction for this component's OWN math (arrow keys, placement). */
 	readonly resolvedDir: Active<Direction> = readableActive(
-		() => this.opts.dir.current ?? this.soma.prefs.getDir() ?? 'ltr'
+		() => this.assertedDir.current ?? 'ltr'
+	);
+
+	/**
+	 * What someone actually ASSERTED — `undefined` when neither the prop nor a
+	 * registered `direction` preference said anything. This, not `resolvedDir`,
+	 * is what the `dir` attribute stamps: an omitted attribute inherits, while
+	 * a defaulted `'ltr'` would force this subtree back to LTR inside an RTL
+	 * page. Like listbox, this component resolves in the provider rather than
+	 * in its wrapper, so the split lives here.
+	 */
+	readonly assertedDir: Active<Direction | undefined> = readableActive(
+		() => this.opts.dir.current ?? this.soma.prefs.getDir()
 	);
 
 	readonly resolvedAriaLabel: Active<string | undefined> = readableActive(
@@ -367,7 +380,7 @@ export class NavigationMenuProvider {
 			// dir is soma-resolved (prop → prefs → 'ltr'); the morfo doesn't model
 			// it. data-orientation is a morfo enum without a value source, so soma
 			// supplies the value.
-			dir: this.resolvedDir.current,
+			dir: this.assertedDir.current,
 			'data-orientation': this.opts.orientation.current
 		} as const)
 	);
diff --git a/src/uix/soma/components/number-field/number-field-provider.svelte.ts b/src/uix/soma/components/number-field/number-field-provider.svelte.ts
index 7d8ee2369..54cfe1abd 100644
--- a/src/uix/soma/components/number-field/number-field-provider.svelte.ts
+++ b/src/uix/soma/components/number-field/number-field-provider.svelte.ts
@@ -148,6 +148,7 @@ interface NumberFieldOpts
 		}> {}
 
 export class NumberFieldProvider {
+
 	readonly opts: NumberFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/popover/components/popover-content.svelte b/src/uix/soma/components/popover/components/popover-content.svelte
index f91d8a73b..08f21f6c1 100644
--- a/src/uix/soma/components/popover/components/popover-content.svelte
+++ b/src/uix/soma/components/popover/components/popover-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -10,7 +8,6 @@
 	import { PopoverContentProvider } from '../popover-provider.svelte';
 	import type { PopoverContentProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -84,7 +81,7 @@
 		interactOutsideBehavior: readableActive(() => interactOutsideBehavior),
 		onFocusOutside: readableActive(() => onFocusOutside),
 		onPlaced: readableActive(() => onPlaced),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style)
 	});
 
diff --git a/src/uix/soma/components/popover/popover-provider.svelte.ts b/src/uix/soma/components/popover/popover-provider.svelte.ts
index 82c02e31a..90ebe0c08 100644
--- a/src/uix/soma/components/popover/popover-provider.svelte.ts
+++ b/src/uix/soma/components/popover/popover-provider.svelte.ts
@@ -475,7 +475,10 @@ interface PopoverContentOpts extends ActiveProps<{
 	interactOutsideBehavior: DismissalBehavior | undefined;
 	onFocusOutside: (e: FocusEvent) => void;
 	onPlaced: () => void;
-	dir: Direction;
+	/** `undefined` = nobody asserted a direction. Forwarded to the Floating
+	 *  layer, which stamps it on the portalled wrapper — omitted means inherit
+	 *  from the portal host instead of forcing `ltr`. */
+	dir: Direction | undefined;
 	style: StyleProperties | null | undefined | string;
 }> {
 	id: Active<string>;
diff --git a/src/uix/soma/components/radio-group/components/radio-group.svelte b/src/uix/soma/components/radio-group/components/radio-group.svelte
index 2b65078b6..6a66be1af 100644
--- a/src/uix/soma/components/radio-group/components/radio-group.svelte
+++ b/src/uix/soma/components/radio-group/components/radio-group.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-		readableActive,
-		writableActive
-	} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -51,7 +49,7 @@
 		invalid: readableActive(() => invalid),
 		orientation: readableActive(() => orientation),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		name: readableActive(() => name),
 		ariaLabel: readableActive(() => ariaLabel),
 		ariaLabelledby: readableActive(() => ariaLabelledby)
diff --git a/src/uix/soma/components/radio-group/radio-group-provider.svelte.ts b/src/uix/soma/components/radio-group/radio-group-provider.svelte.ts
index 38c43f151..681495440 100644
--- a/src/uix/soma/components/radio-group/radio-group-provider.svelte.ts
+++ b/src/uix/soma/components/radio-group/radio-group-provider.svelte.ts
@@ -26,13 +26,23 @@ interface RadioGroupOpts
 			invalid: boolean;
 			orientation: Orientation;
 			loop: boolean;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 			name: string;
 			ariaLabel: string | undefined;
 			ariaLabelledby: string | undefined;
 		}> {}
 
 export class RadioGroupProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: RadioGroupOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static readonly ctx = context<RadioGroupProvider>('RadioGroup');
@@ -115,8 +125,8 @@ export class RadioGroupProvider {
 			undefined
 	);
 
-	readonly resolvedAriaLabel = $derived.by(
-		() => (this.resolvedAriaLabelledby ? undefined : this.opts.ariaLabel.current || undefined)
+	readonly resolvedAriaLabel = $derived.by(() =>
+		this.resolvedAriaLabelledby ? undefined : this.opts.ariaLabel.current || undefined
 	);
 
 	selectItem(value: string, itemEl?: HTMLElement) {
@@ -226,9 +236,7 @@ export class RadioItemProvider {
 		return this.provider.isFallbackTabStop(this.opts.ref.current);
 	});
 
-	readonly isDisabled = $derived.by(
-		() => this.opts.disabled.current || this.provider.isDisabled
-	);
+	readonly isDisabled = $derived.by(() => this.opts.disabled.current || this.provider.isDisabled);
 
 	readonly onclick = (e: SomaMouseEvent<HTMLButtonElement>) => {
 		if (this.isDisabled || this.provider.isReadonly) return;
@@ -239,7 +247,7 @@ export class RadioItemProvider {
 		if (this.isDisabled || this.provider.isReadonly) return;
 
 		const orientation = this.provider.opts.orientation.current;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const items = this.provider.getItems();
 		const currentIndex = items.indexOf(e.currentTarget as HTMLElement);
diff --git a/src/uix/soma/components/range-calendar/components/range-calendar.svelte b/src/uix/soma/components/range-calendar/components/range-calendar.svelte
index c881cb88e..b7d3bf3b5 100644
--- a/src/uix/soma/components/range-calendar/components/range-calendar.svelte
+++ b/src/uix/soma/components/range-calendar/components/range-calendar.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import {
@@ -97,7 +95,7 @@
 		showWeekNumbers: readableActive(() => showWeekNumbers),
 		weekNumberFormat: readableActive(() => weekNumberFormat),
 		announceNavigation: readableActive(() => announceNavigation),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		locale: readableActive(() => locale ?? '')
 	});
 
diff --git a/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts b/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts
index 1d00d6fef..2ea11f893 100644
--- a/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts
+++ b/src/uix/soma/components/range-calendar/range-calendar-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { context, type WithRefOpts } from '../../provider';
+import type { Direction } from '../../types';
 import { createAttrs } from '$uix/morfo';
 import { boolToEmptyStrOrUndef, boolToStr } from '$adom';
 import { readableActive, state, type ActiveProps, type StateProps } from '$libs/reactive';
@@ -83,7 +84,7 @@ export interface RangeCalendarOpts
 			weekNumberFormat: 'iso' | 'simple';
 			announceNavigation: boolean;
 			initialFocus: boolean;
-			dir: 'ltr' | 'rtl';
+			dir: Direction | undefined;
 			locale: string;
 		}> {
 	onValueChange?: OnChangeFn<DateRange>;
@@ -104,6 +105,15 @@ export function resolveInitialRangeCalendarPlaceholder(
 }
 
 export class RangeCalendarProvider implements CalendarNav {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: RangeCalendarOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -414,7 +424,10 @@ export class RangeCalendarProvider implements CalendarNav {
 		this.anchor = date;
 		this.previewDate = undefined;
 		this.opts.value.current = { start: date, end: undefined };
-		void this.runtime.trigger('commit-select-start', target ? { fallbackTarget: target } : undefined);
+		void this.runtime.trigger(
+			'commit-select-start',
+			target ? { fallbackTarget: target } : undefined
+		);
 	}
 
 	private clearSelection(target?: HTMLElement): void {
@@ -470,7 +483,10 @@ export class RangeCalendarProvider implements CalendarNav {
 		this.opts.value.current = { start, end };
 		this.anchor = undefined;
 		this.previewDate = undefined;
-		void this.runtime.trigger('commit-select-range', target ? { fallbackTarget: target } : undefined);
+		void this.runtime.trigger(
+			'commit-select-range',
+			target ? { fallbackTarget: target } : undefined
+		);
 	}
 
 	/** Called by Day on pointermove when the user is mid-range. */
@@ -554,7 +570,7 @@ export class RangeCalendarProvider implements CalendarNav {
 
 	handleDayKeydown(e: SomaKeyboardEvent<HTMLElement>, date: DateValue): boolean {
 		const { nextKey: horizNext, prevKey: horizPrev } = getDirectionalKeys(
-			this.opts.dir.current,
+			this.resolvedDir,
 			'horizontal'
 		);
 
diff --git a/src/uix/soma/components/rating-group/rating-group-provider.svelte.ts b/src/uix/soma/components/rating-group/rating-group-provider.svelte.ts
index 0d7c66065..3a88295f9 100644
--- a/src/uix/soma/components/rating-group/rating-group-provider.svelte.ts
+++ b/src/uix/soma/components/rating-group/rating-group-provider.svelte.ts
@@ -45,7 +45,7 @@ interface RatingGroupOpts
 			required: boolean;
 			invalid: boolean;
 			orientation: Orientation;
-			dir: Direction;
+			dir: Direction | undefined;
 			name: string | undefined;
 			ariaLabel: string | undefined;
 			ariaLabelledby: string | undefined;
@@ -54,6 +54,15 @@ interface RatingGroupOpts
 		}> {}
 
 export class RatingGroupProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: RatingGroupOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -245,7 +254,7 @@ export class RatingGroupProvider {
 		const key = e.key;
 		// APG slider pattern: horizontal increment flips under RTL, vertical
 		// UP/DOWN are absolute (UP always increments).
-		const { nextKey, prevKey } = getDirectionalKeys(this.opts.dir.current, 'horizontal');
+		const { nextKey, prevKey } = getDirectionalKeys(this.resolvedDir, 'horizontal');
 		const isIncrement = key === nextKey || key === KEYS.ARROW_UP;
 		const isDecrement = key === prevKey || key === KEYS.ARROW_DOWN;
 
diff --git a/src/uix/soma/components/scroll-area/components/scroll-area.svelte b/src/uix/soma/components/scroll-area/components/scroll-area.svelte
index e5be33145..b577a2e80 100644
--- a/src/uix/soma/components/scroll-area/components/scroll-area.svelte
+++ b/src/uix/soma/components/scroll-area/components/scroll-area.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -31,7 +29,7 @@
 		),
 		type: readableActive(() => type),
 		scrollHideDelay: readableActive(() => scrollHideDelay),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr')
+		dir: activeDir(() => dir, soma)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts b/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts
index e7e25fff0..7bda93116 100644
--- a/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts
+++ b/src/uix/soma/components/scroll-area/scroll-area-provider.svelte.ts
@@ -18,10 +18,19 @@ interface ScrollAreaOpts
 		ActiveProps<{
 			type: ScrollAreaType;
 			scrollHideDelay: number;
-			dir: Direction;
+			dir: Direction | undefined;
 		}> {}
 
 export class ScrollAreaProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ScrollAreaOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/select/components/select-content.svelte b/src/uix/soma/components/select/components/select-content.svelte
index 1cdc9c680..877247cac 100644
--- a/src/uix/soma/components/select/components/select-content.svelte
+++ b/src/uix/soma/components/select/components/select-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -10,7 +8,6 @@
 	import { SelectContentProvider } from '../select-provider.svelte';
 	import type { SelectContentProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -63,7 +60,7 @@
 		escapeKeydownBehavior: readableActive(() => escapeKeydownBehavior),
 		onInteractOutside: readableActive(() => onInteractOutside),
 		interactOutsideBehavior: readableActive(() => interactOutsideBehavior),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style)
 	});
 
diff --git a/src/uix/soma/components/select/components/select.svelte b/src/uix/soma/components/select/components/select.svelte
index 521f90b8c..e98668d7b 100644
--- a/src/uix/soma/components/select/components/select.svelte
+++ b/src/uix/soma/components/select/components/select.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { SelectProvider } from '../select-provider.svelte';
@@ -66,7 +67,7 @@
 		loop: readableActive(() => loop),
 		deselectable: readableActive(() => deselectable),
 		scrollAlignment: readableActive(() => scrollAlignment),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		onOpenChangeComplete: readableActive(() => onOpenChangeComplete)
 	});
 
diff --git a/src/uix/soma/components/select/select-provider.svelte.ts b/src/uix/soma/components/select/select-provider.svelte.ts
index 9edb0848e..b62fc2b9d 100644
--- a/src/uix/soma/components/select/select-provider.svelte.ts
+++ b/src/uix/soma/components/select/select-provider.svelte.ts
@@ -62,11 +62,20 @@ interface SelectOpts
 			loop: boolean;
 			deselectable: boolean;
 			scrollAlignment: ScrollAlignment;
-			dir: Direction;
+			dir: Direction | undefined;
 			onOpenChangeComplete: OnChangeFn<boolean>;
 		}> {}
 
 export class SelectProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: SelectOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -321,7 +330,7 @@ export class SelectTriggerProvider {
 			}
 		} else {
 			// Open: navigate items via virtual focus (aria-activedescendant)
-			const dir = this.provider.opts.dir.current;
+			const dir = this.provider.resolvedDir;
 			const { nextKey, prevKey } = getDirectionalKeys(dir, 'vertical');
 			const container = this.provider.contentRef.current;
 			if (!container) return;
@@ -407,6 +416,7 @@ export class SelectTriggerProvider {
 interface SelectValueOpts extends WithRefOpts, ActiveProps<{ placeholder: string }> {}
 
 export class SelectValueProvider {
+
 	readonly opts: SelectValueOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: SelectValueOpts) {
@@ -461,11 +471,20 @@ interface SelectContentOpts
 			escapeKeydownBehavior: DismissalBehavior;
 			onInteractOutside: (e: PointerEvent) => void;
 			interactOutsideBehavior: DismissalBehavior;
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 		}> {}
 
 export class SelectContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: SelectContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: SelectContentOpts) {
diff --git a/src/uix/soma/components/slider/components/slider.svelte b/src/uix/soma/components/slider/components/slider.svelte
index 7a79f232d..d30abc776 100644
--- a/src/uix/soma/components/slider/components/slider.svelte
+++ b/src/uix/soma/components/slider/components/slider.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -55,7 +56,7 @@
 		orientation: readableActive(() => orientation),
 		disabled: readableActive(() => disabled),
 		readonly: readableActive(() => readonly),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		name: readableActive(() => name),
 		ariaLabel: readableActive(() => ariaLabel),
 		ariaLabelledby: readableActive(() => ariaLabelledby),
diff --git a/src/uix/soma/components/slider/slider-provider.svelte.ts b/src/uix/soma/components/slider/slider-provider.svelte.ts
index fff44938d..44838172d 100644
--- a/src/uix/soma/components/slider/slider-provider.svelte.ts
+++ b/src/uix/soma/components/slider/slider-provider.svelte.ts
@@ -51,7 +51,8 @@ interface SliderOpts
 			orientation: Orientation;
 			disabled: boolean;
 			readonly?: boolean;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 			name: string;
 			thumbLabels: string[] | undefined;
 			valueText?: (value: number, index: number) => string;
@@ -82,6 +83,18 @@ export class SliderProvider {
 
 	activeThumbIndex = $state<number | null>(null);
 
+	/**
+	 * Direction for the component's OWN math — pointer percent, thumb anchor,
+	 * arrow keys. Always concrete: `undefined` and `'ltr'` are indistinguishable
+	 * to every `=== 'rtl'` test, so defaulting here changes no behaviour.
+	 *
+	 * The DOM attribute is the other half and is deliberately NOT this value:
+	 * `props` stamps `opts.dir.current` raw, so the attribute is omitted when
+	 * nobody asserted a direction and the element inherits instead of forcing
+	 * `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly isDisabled = $derived.by(
 		() => this.opts.disabled.current || (this.field?.isDisabled ?? false)
 	);
@@ -163,7 +176,7 @@ export class SliderProvider {
 
 		const rect = el.getBoundingClientRect();
 		const isHorizontal = this.opts.orientation.current === 'horizontal';
-		const isRtl = this.opts.dir.current === 'rtl';
+		const isRtl = this.resolvedDir === 'rtl';
 
 		let percent: number;
 		if (isHorizontal) {
@@ -422,7 +435,7 @@ export class SliderRangeProvider {
 	readonly rangeStyle = $derived.by(() => {
 		const values = this.provider.opts.value.current;
 		const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
-		const isRtl = this.provider.opts.dir.current === 'rtl';
+		const isRtl = this.provider.resolvedDir === 'rtl';
 		const min = Math.min(...values);
 		const max = Math.max(...values);
 		const startPct = this.provider.getPercent(
@@ -481,7 +494,7 @@ export class SliderSecondaryRangeProvider {
 	readonly rangeStyle = $derived.by(() => {
 		const secondary = this.provider.opts.secondaryValue?.current;
 		const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
-		const isRtl = this.provider.opts.dir.current === 'rtl';
+		const isRtl = this.provider.resolvedDir === 'rtl';
 		const endPct = secondary === undefined ? 0 : this.provider.getPercent(secondary);
 
 		if (isHorizontal) {
@@ -553,7 +566,7 @@ export class SliderThumbProvider {
 		const index = this.opts.index.current;
 		let delta = 0;
 
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		// For the horizontal axis, use getDirectionalKeys to handle RTL.
 		// Vertical axis always maps UP=increase, DOWN=decrease (not RTL-dependent).
 		const { nextKey: increaseHKey, prevKey: decreaseHKey } = getDirectionalKeys(dir, 'horizontal');
@@ -587,7 +600,7 @@ export class SliderThumbProvider {
 
 	readonly thumbStyle = $derived.by(() => {
 		const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
-		const isRtl = this.provider.opts.dir.current === 'rtl';
+		const isRtl = this.provider.resolvedDir === 'rtl';
 		if (isHorizontal) {
 			// LTR anchors with `left: X%`, so the thumb must shift LEFT by half
 			// its own width to center-align its centre with the anchor
@@ -670,7 +683,7 @@ export class SliderTickProvider {
 
 	readonly props = $derived.by(() => {
 		const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
-		const isRtl = this.provider.opts.dir.current === 'rtl';
+		const isRtl = this.provider.resolvedDir === 'rtl';
 		const side = isHorizontal && isRtl ? 'right' : 'left';
 		const tx = isHorizontal && isRtl ? '50%' : '-50%';
 		return this.runtimePart.assert({
diff --git a/src/uix/soma/components/splitter/components/splitter.svelte b/src/uix/soma/components/splitter/components/splitter.svelte
index 055c19b6e..671a5384e 100644
--- a/src/uix/soma/components/splitter/components/splitter.svelte
+++ b/src/uix/soma/components/splitter/components/splitter.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
 	import { SplitterProvider } from '../splitter-provider.svelte';
 	import type { SplitterProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -36,7 +33,7 @@
 		),
 		orientation: readableActive(() => orientation),
 		disabled: readableActive(() => disabled),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		keyboardStep: readableActive(() => keyboardStep),
 		sizes: writableActive(
 			() => sizes,
diff --git a/src/uix/soma/components/splitter/splitter-provider.svelte.ts b/src/uix/soma/components/splitter/splitter-provider.svelte.ts
index 1ca2b0469..e6347c096 100644
--- a/src/uix/soma/components/splitter/splitter-provider.svelte.ts
+++ b/src/uix/soma/components/splitter/splitter-provider.svelte.ts
@@ -59,13 +59,22 @@ interface SplitterOpts
 		ActiveProps<{
 			orientation: Orientation;
 			disabled: boolean;
-			dir: Direction;
+			dir: Direction | undefined;
 			keyboardStep: number;
 			onSizesChange: (sizes: number[]) => void;
 			onResizeEnd: (sizes: number[]) => void;
 		}> {}
 
 export class SplitterProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: SplitterOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -661,7 +670,7 @@ export class SplitterResizeTriggerProvider {
 		if (this.isDisabled) return;
 
 		const orientation = this.provider.opts.orientation.current;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const step = this.provider.opts.keyboardStep.current;
 
diff --git a/src/uix/soma/components/stepper/components/stepper.svelte b/src/uix/soma/components/stepper/components/stepper.svelte
index 35ed9a3cb..d83d68e32 100644
--- a/src/uix/soma/components/stepper/components/stepper.svelte
+++ b/src/uix/soma/components/stepper/components/stepper.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
 	import { StepperProvider } from '../stepper-provider.svelte';
 	import type { StepperProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -40,7 +37,7 @@
 			}
 		),
 		orientation: readableActive(() => orientation),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		linear: readableActive(() => linear)
 	});
 
diff --git a/src/uix/soma/components/stepper/stepper-provider.svelte.ts b/src/uix/soma/components/stepper/stepper-provider.svelte.ts
index f1989ac8b..a775fb466 100644
--- a/src/uix/soma/components/stepper/stepper-provider.svelte.ts
+++ b/src/uix/soma/components/stepper/stepper-provider.svelte.ts
@@ -18,11 +18,21 @@ interface StepperOpts
 		StateProps<{ value: number }>,
 		ActiveProps<{
 			orientation: Orientation;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 			linear: boolean;
 		}> {}
 
 export class StepperProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: StepperOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -293,7 +303,7 @@ export class StepperTriggerProvider {
 		if (this.isDisabled) return;
 
 		const orientation = this.provider.opts.orientation.current;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const triggers = this.provider.getRegisteredTriggers();
 		const currentIndex = triggers.indexOf(e.currentTarget as HTMLElement);
diff --git a/src/uix/soma/components/table/components/table.svelte b/src/uix/soma/components/table/components/table.svelte
index ee06ad62e..30894fe12 100644
--- a/src/uix/soma/components/table/components/table.svelte
+++ b/src/uix/soma/components/table/components/table.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -31,7 +29,7 @@
 		),
 		table: readableActive(() => table),
 		label: readableActive(() => label),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr')
+		dir: activeDir(() => dir, soma)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/table/table-provider.svelte.ts b/src/uix/soma/components/table/table-provider.svelte.ts
index 12a835fc9..9514ca587 100644
--- a/src/uix/soma/components/table/table-provider.svelte.ts
+++ b/src/uix/soma/components/table/table-provider.svelte.ts
@@ -10,7 +10,6 @@ import type { TableInstance, TableHeader, TableRow, TableCell } from '$libs/data
 import { tableMorfo } from '../../../morfo/components/table';
 import type { SomaRuntime, SomaRuntimePart } from '../../runtime.svelte';
 
-
 // ── Helpers ─────────────────────────────────────────────────────────────────
 
 /**
@@ -47,10 +46,19 @@ interface TableProviderOpts
 		ActiveProps<{
 			table: TableInstance;
 			label: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 		}> {}
 
 export class TableProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TableProviderOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/tabs/components/tabs.svelte b/src/uix/soma/components/tabs/components/tabs.svelte
index be0dc9444..8a64b7aef 100644
--- a/src/uix/soma/components/tabs/components/tabs.svelte
+++ b/src/uix/soma/components/tabs/components/tabs.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
 	import { TabsProvider } from '../tabs-provider.svelte';
 	import type { TabsProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -47,7 +44,7 @@
 		activationMode: readableActive(() => activationMode),
 		disabled: readableActive(() => disabled),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr')
+		dir: activeDir(() => dir, soma)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/tabs/tabs-provider.svelte.ts b/src/uix/soma/components/tabs/tabs-provider.svelte.ts
index e6615f900..f9808027f 100644
--- a/src/uix/soma/components/tabs/tabs-provider.svelte.ts
+++ b/src/uix/soma/components/tabs/tabs-provider.svelte.ts
@@ -31,11 +31,21 @@ interface TabsOpts
 			activationMode: ActivationMode;
 			disabled: boolean;
 			loop: boolean;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 			onFocusChange: OnChangeFn<string>;
 		}> {}
 
 export class TabsProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TabsOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static readonly ctx = context<TabsProvider>('Tabs');
@@ -278,7 +288,7 @@ export class TabsTriggerProvider {
 
 		const p = this.provider;
 		const orientation = p.opts.orientation.current;
-		const dir = p.opts.dir.current;
+		const dir = p.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const triggers = p.getTriggers();
 		const currentIndex = triggers.indexOf(e.currentTarget as HTMLButtonElement);
diff --git a/src/uix/soma/components/time-field/components/time-field.svelte b/src/uix/soma/components/time-field/components/time-field.svelte
index 30ede4abf..9d6b6efa6 100644
--- a/src/uix/soma/components/time-field/components/time-field.svelte
+++ b/src/uix/soma/components/time-field/components/time-field.svelte
@@ -1,18 +1,11 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
-	import {
-		Time,
-		today,
-		getLocalTimeZone,
-		type TimeValue
-	} from '$libs/days';
+	import { Time, today, getLocalTimeZone, type TimeValue } from '$libs/days';
 	import { TimeFieldProvider } from '../time-field-provider.svelte';
 	import type { TimeFieldProviderProps } from '../types';
 
@@ -100,9 +93,7 @@
 		required: readableActive(() => required),
 		errorMessageId: readableActive(() => errorMessageId),
 		locale: readableActive(() => locale ?? soma?.langs.getLocale() ?? ''),
-		dir: readableActive<'ltr' | 'rtl'>(
-			() => (_dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-		),
+		dir: activeDir(() => _dir, soma),
 		hourCycle: readableActive(() => hourCycle)
 	});
 
diff --git a/src/uix/soma/components/time-field/time-field-provider.svelte.ts b/src/uix/soma/components/time-field/time-field-provider.svelte.ts
index 84138cec3..4a25ebfaf 100644
--- a/src/uix/soma/components/time-field/time-field-provider.svelte.ts
+++ b/src/uix/soma/components/time-field/time-field-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { untrack } from 'svelte';
+import type { Direction } from '../../types';
 import { watch } from '$libs/reactive';
 import { context, type ProviderOpts, type WithRefOpts } from '../../provider';
 import { boolToEmptyStrOrUndef, boolToStr } from '$adom';
@@ -104,11 +105,20 @@ export interface TimeFieldOpts
 			required: boolean;
 			errorMessageId: string | undefined;
 			locale: string;
-			dir: 'ltr' | 'rtl';
+			dir: Direction | undefined;
 			hourCycle: HourCycle | undefined;
 		}> {}
 
 export class TimeFieldProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TimeFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly runtime: SomaRuntime;
@@ -691,7 +701,7 @@ export abstract class BaseTimeNumericSegmentProvider {
 	}
 
 	protected get directionalKeys() {
-		return getDirectionalKeys(this.provider.opts.dir.current, 'horizontal');
+		return getDirectionalKeys(this.provider.resolvedDir, 'horizontal');
 	}
 
 	handleArrowUp(): void {
@@ -982,7 +992,7 @@ export class TimeFieldDayPeriodSegmentProvider {
 			return;
 		}
 		if (isSegmentNavigationKey(e.key)) {
-			const { nextKey, prevKey } = getDirectionalKeys(this.provider.opts.dir.current, 'horizontal');
+			const { nextKey, prevKey } = getDirectionalKeys(this.provider.resolvedDir, 'horizontal');
 			handleSegmentNavigation(
 				this.provider.soma.dom,
 				e as unknown as KeyboardEvent,
diff --git a/src/uix/soma/components/time-picker/components/time-picker.svelte b/src/uix/soma/components/time-picker/components/time-picker.svelte
index 9a265138b..5444a7dcd 100644
--- a/src/uix/soma/components/time-picker/components/time-picker.svelte
+++ b/src/uix/soma/components/time-picker/components/time-picker.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { readableActive, writableActive } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
@@ -87,9 +88,7 @@
 		}
 	);
 
-	const resolvedDir = readableActive<'ltr' | 'rtl'>(
-		() => (dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-	);
+	const resolvedDir = activeDir(() => dir, soma);
 
 	const state = TimePickerProvider.create({
 		id: readableActive(() => id),
diff --git a/src/uix/soma/components/time-picker/time-picker-provider.svelte.ts b/src/uix/soma/components/time-picker/time-picker-provider.svelte.ts
index 4c7afd1b2..981006693 100644
--- a/src/uix/soma/components/time-picker/time-picker-provider.svelte.ts
+++ b/src/uix/soma/components/time-picker/time-picker-provider.svelte.ts
@@ -54,7 +54,7 @@ export interface TimePickerOpts
 			hideTimeZone: boolean;
 			hourCycle: HourCycle | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			hourStep: number;
 			minuteStep: number;
 			secondStep: number;
@@ -69,6 +69,15 @@ export interface TimePickerOpts
  * underlying time.
  */
 export class TimePickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TimePickerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/time-range-field/components/time-range-field.svelte b/src/uix/soma/components/time-range-field/components/time-range-field.svelte
index 863e99b28..baaf0490b 100644
--- a/src/uix/soma/components/time-range-field/components/time-range-field.svelte
+++ b/src/uix/soma/components/time-range-field/components/time-range-field.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
-	import {
-	readableActive,
-	writableActive,
-	state
-} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive, state } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -75,20 +72,17 @@
 	);
 
 	// Sync start / end → external `value`, firing onValueChange only when complete.
-	watch(
-		[() => startValue.current, () => endValue.current],
-		([s, e]) => {
-			onStartValueChange(s);
-			onEndValueChange(e);
-			if (s && e) {
-				const range: TimeRange = { start: s as never, end: e as never };
-				value = range;
-				onValueChange(range);
-			} else if (!s && !e) {
-				value = { start: undefined, end: undefined } as never;
-			}
+	watch([() => startValue.current, () => endValue.current], ([s, e]) => {
+		onStartValueChange(s);
+		onEndValueChange(e);
+		if (s && e) {
+			const range: TimeRange = { start: s as never, end: e as never };
+			value = range;
+			onValueChange(range);
+		} else if (!s && !e) {
+			value = { start: undefined, end: undefined } as never;
 		}
-	);
+	});
 
 	const state_ = TimeRangeFieldProvider.create({
 		id: readableActive(() => id),
@@ -128,9 +122,7 @@
 		hideTimeZone: readableActive(() => hideTimeZone),
 		hourCycle: readableActive(() => hourCycle),
 		locale: readableActive(() => locale),
-		dir: readableActive<'ltr' | 'rtl'>(
-			() => (_dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-		),
+		dir: activeDir(() => _dir, soma),
 		errorMessageId: readableActive(() => errorMessageId)
 	});
 
diff --git a/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts b/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts
index 5e122a78e..d83de0c95 100644
--- a/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts
+++ b/src/uix/soma/components/time-range-field/time-range-field-provider.svelte.ts
@@ -46,7 +46,7 @@ interface TimeRangeFieldOpts
 			hideTimeZone: boolean;
 			hourCycle: HourCycle | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			errorMessageId: string | undefined;
 		}> {}
 
@@ -56,6 +56,15 @@ interface TimeRangeFieldOpts
  * wrappers each drive one endpoint via its own TimeField subtree.
  */
 export class TimeRangeFieldProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TimeRangeFieldOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/time-range-picker/components/time-range-picker.svelte b/src/uix/soma/components/time-range-picker/components/time-range-picker.svelte
index 599189955..4419c0c7c 100644
--- a/src/uix/soma/components/time-range-picker/components/time-range-picker.svelte
+++ b/src/uix/soma/components/time-range-picker/components/time-range-picker.svelte
@@ -1,10 +1,7 @@
 <script lang="ts">
 	import { watch } from '$libs/reactive';
-	import {
-		readableActive,
-		writableActive,
-		state
-	} from '$libs/reactive';
+	import { activeDir } from '../../../direction';
+	import { readableActive, writableActive, state } from '$libs/reactive';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -84,20 +81,17 @@
 	);
 
 	// Sync start / end → external `value` + fire callbacks.
-	watch(
-		[() => startValue.current, () => endValue.current],
-		([s, e]) => {
-			onStartValueChange(s);
-			onEndValueChange(e);
-			if (s && e) {
-				const next: TimeRange = { start: s as never, end: e as never };
-				value = next;
-				onValueChange(next);
-			} else if (!s && !e) {
-				value = { start: undefined, end: undefined } as never;
-			}
+	watch([() => startValue.current, () => endValue.current], ([s, e]) => {
+		onStartValueChange(s);
+		onEndValueChange(e);
+		if (s && e) {
+			const next: TimeRange = { start: s as never, end: e as never };
+			value = next;
+			onValueChange(next);
+		} else if (!s && !e) {
+			value = { start: undefined, end: undefined } as never;
 		}
-	);
+	});
 
 	const sharedValue = writableActive(
 		() => value ?? ({ start: undefined, end: undefined } as TimeRange),
@@ -126,9 +120,7 @@
 		}
 	);
 
-	const resolvedDir = readableActive<'ltr' | 'rtl'>(
-		() => (dir ?? soma?.prefs.getDir() ?? 'ltr') as 'ltr' | 'rtl'
-	);
+	const resolvedDir = activeDir(() => dir, soma);
 
 	// ── Shared state via picker context ──────────────────────────────────────
 	const state_ = TimeRangePickerProvider.create({
diff --git a/src/uix/soma/components/time-range-picker/time-range-picker-provider.svelte.ts b/src/uix/soma/components/time-range-picker/time-range-picker-provider.svelte.ts
index 97d222689..20333eb33 100644
--- a/src/uix/soma/components/time-range-picker/time-range-picker-provider.svelte.ts
+++ b/src/uix/soma/components/time-range-picker/time-range-picker-provider.svelte.ts
@@ -55,7 +55,7 @@ export interface TimeRangePickerOpts
 			hideTimeZone: boolean;
 			hourCycle: HourCycle | undefined;
 			locale: string | undefined;
-			dir: Direction;
+			dir: Direction | undefined;
 			hourStep: number;
 			minuteStep: number;
 			secondStep: number;
@@ -74,6 +74,15 @@ export interface TimeRangePickerOpts
  * `<PickerShell.Footer/Clear/Cancel/Close>` parts work out of the box.
  */
 export class TimeRangePickerProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TimeRangePickerOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
diff --git a/src/uix/soma/components/toast/toast-provider.svelte.ts b/src/uix/soma/components/toast/toast-provider.svelte.ts
index 5382f0de2..4148ed589 100644
--- a/src/uix/soma/components/toast/toast-provider.svelte.ts
+++ b/src/uix/soma/components/toast/toast-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { untrack } from 'svelte';
+import type { Direction } from '../../types';
 
 import { context } from '../../provider';
 import { readableActive, state, type Active, type ActiveProps, type State } from '$libs/reactive';
diff --git a/src/uix/soma/components/toggle-group/components/toggle-group.svelte b/src/uix/soma/components/toggle-group/components/toggle-group.svelte
index e502a4462..91512c3a3 100644
--- a/src/uix/soma/components/toggle-group/components/toggle-group.svelte
+++ b/src/uix/soma/components/toggle-group/components/toggle-group.svelte
@@ -1,16 +1,13 @@
 <script lang="ts">
 	import { untrack } from 'svelte';
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
 	import { ToggleGroupProvider } from '../toggle-group-provider.svelte';
 	import type { ToggleGroupProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -70,7 +67,7 @@
 		readonly: readableActive(() => readonly),
 		orientation: readableActive(() => orientation),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr')
+		dir: activeDir(() => dir, soma)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/toggle-group/toggle-group-provider.svelte.ts b/src/uix/soma/components/toggle-group/toggle-group-provider.svelte.ts
index 48b3f3562..23891419b 100644
--- a/src/uix/soma/components/toggle-group/toggle-group-provider.svelte.ts
+++ b/src/uix/soma/components/toggle-group/toggle-group-provider.svelte.ts
@@ -38,10 +38,20 @@ interface ToggleGroupOpts
 			readonly: boolean;
 			orientation: Orientation;
 			loop: boolean;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 		}> {}
 
 export class ToggleGroupProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: ToggleGroupOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -232,7 +242,7 @@ export class ToggleGroupItemProvider {
 		if (this.isDisabled) return;
 
 		const orientation = this.provider.opts.orientation.current;
-		const dir = this.provider.opts.dir.current;
+		const dir = this.provider.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const items = this.provider.getItems();
 		const currentIndex = items.indexOf(e.currentTarget as HTMLElement);
diff --git a/src/uix/soma/components/toolbar/components/toolbar.svelte b/src/uix/soma/components/toolbar/components/toolbar.svelte
index bbee69792..4189d9187 100644
--- a/src/uix/soma/components/toolbar/components/toolbar.svelte
+++ b/src/uix/soma/components/toolbar/components/toolbar.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
@@ -31,7 +29,7 @@
 		),
 		orientation: readableActive(() => orientation),
 		loop: readableActive(() => loop),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr')
+		dir: activeDir(() => dir, soma)
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/toolbar/toolbar-provider.svelte.ts b/src/uix/soma/components/toolbar/toolbar-provider.svelte.ts
index 561cfea3b..886fff3a8 100644
--- a/src/uix/soma/components/toolbar/toolbar-provider.svelte.ts
+++ b/src/uix/soma/components/toolbar/toolbar-provider.svelte.ts
@@ -20,11 +20,21 @@ interface ToolbarOpts
 		ActiveProps<{
 			orientation: Orientation;
 			loop: boolean;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 		}> {}
 
 export class ToolbarProvider {
 	readonly opts: ToolbarOpts;
+
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
 	readonly runtime: SomaRuntime;
@@ -88,7 +98,7 @@ export class ToolbarProvider {
 
 	readonly onkeydown = (e: SomaKeyboardEvent<HTMLElement>) => {
 		const orientation = this.opts.orientation.current;
-		const dir = this.opts.dir.current;
+		const dir = this.resolvedDir;
 		const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
 		const items = this.getItems();
 		if (items.length === 0) return;
diff --git a/src/uix/soma/components/tooltip/components/tooltip-content.svelte b/src/uix/soma/components/tooltip/components/tooltip-content.svelte
index c1c54d0cf..d66f5dcb6 100644
--- a/src/uix/soma/components/tooltip/components/tooltip-content.svelte
+++ b/src/uix/soma/components/tooltip/components/tooltip-content.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { styleToString } from '../../../css';
 	import { createId } from '$active-uix/id';
@@ -10,7 +8,6 @@
 	import { TooltipContentProvider } from '../tooltip-provider.svelte';
 	import type { TooltipContentProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -59,7 +56,7 @@
 		hideWhenDetached: readableActive(() => hideWhenDetached),
 		updatePositionStrategy: readableActive(() => updatePositionStrategy),
 		strategy: readableActive(() => strategy),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		style: readableActive(() => style),
 		onEscapeKeydown: readableActive(() => onEscapeKeydown),
 		escapeKeydownBehavior: readableActive(() => escapeKeydownBehavior)
diff --git a/src/uix/soma/components/tooltip/tooltip-provider.svelte.ts b/src/uix/soma/components/tooltip/tooltip-provider.svelte.ts
index 01ecfe145..a8edb4316 100644
--- a/src/uix/soma/components/tooltip/tooltip-provider.svelte.ts
+++ b/src/uix/soma/components/tooltip/tooltip-provider.svelte.ts
@@ -391,7 +391,7 @@ interface TooltipContentOpts
 			hideWhenDetached: boolean;
 			updatePositionStrategy: 'optimized' | 'always';
 			strategy: 'fixed' | 'absolute';
-			dir: Direction;
+			dir: Direction | undefined;
 			style: StyleProperties | null | undefined | string;
 			ariaLabel: string | undefined;
 			onEscapeKeydown: (e: KeyboardEvent) => void;
@@ -399,6 +399,15 @@ interface TooltipContentOpts
 		}> {}
 
 export class TooltipContentProvider {
+	/**
+	 * Direction for this part's OWN math (arrow keys, placement flip). Always
+	 * concrete — `undefined` and `'ltr'` are indistinguishable to every
+	 * `=== 'rtl'` test. The DOM attribute is the other half: what gets stamped
+	 * is the raw `opts.dir.current`, so it is omitted when nobody asserted a
+	 * direction and the element inherits instead of forcing `ltr`.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TooltipContentOpts;
 	readonly runtimePart: SomaRuntimePart;
 	static create(opts: TooltipContentOpts) {
diff --git a/src/uix/soma/components/tree-view/components/tree-view.svelte b/src/uix/soma/components/tree-view/components/tree-view.svelte
index d0c3abc1e..a27732e18 100644
--- a/src/uix/soma/components/tree-view/components/tree-view.svelte
+++ b/src/uix/soma/components/tree-view/components/tree-view.svelte
@@ -1,15 +1,12 @@
 <script lang="ts">
-	import {
-	readableActive,
-	writableActive
-} from '$libs/reactive';
+	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
 	import { Soma } from '../../../core/soma.svelte';
 	import { TreeViewProvider } from '../tree-view-provider.svelte';
 	import type { TreeViewProps } from '../types';
 
-
 	const uid = $props.id();
 	const soma = Soma.get();
 
@@ -52,7 +49,7 @@
 			}
 		),
 		selectionMode: readableActive(() => selectionMode),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		expandOnClick: readableActive(() => expandOnClick),
 		typeahead: readableActive(() => typeahead),
 		ariaLabel: readableActive(() => ariaLabel),
diff --git a/src/uix/soma/components/tree-view/tree-view-provider.svelte.ts b/src/uix/soma/components/tree-view/tree-view-provider.svelte.ts
index 67ebf4633..086e18421 100644
--- a/src/uix/soma/components/tree-view/tree-view-provider.svelte.ts
+++ b/src/uix/soma/components/tree-view/tree-view-provider.svelte.ts
@@ -25,7 +25,8 @@ interface TreeViewOpts
 		}>,
 		ActiveProps<{
 			selectionMode: SelectionMode;
-			dir: Direction;
+			/** `undefined` = nobody asserted a direction. See `resolvedDir`. */
+			dir: Direction | undefined;
 			expandOnClick: boolean;
 			typeahead: boolean;
 			ariaLabel: string | undefined;
@@ -33,6 +34,15 @@ interface TreeViewOpts
 		}> {}
 
 export class TreeViewProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by<Direction>(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: TreeViewOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -234,7 +244,7 @@ export class TreeViewProvider {
 
 		const activeEl = this.soma.dom.activeElement(this.opts.ref.current) as HTMLElement | null;
 		const currentIndex = activeEl ? items.indexOf(activeEl) : -1;
-		const dir = this.opts.dir.current;
+		const dir = this.resolvedDir;
 		const { nextKey: expandKey, prevKey: collapseKey } = getDirectionalKeys(dir, 'horizontal');
 
 		switch (e.key) {
@@ -417,7 +427,10 @@ export class TreeViewBranchControlProvider {
 		// Pass the branch element so the commit-select event stamps on
 		// the actual branch (the click landed on the control, but the
 		// semantic target is the branch — same value).
-		this.provider.select(this.branch.opts.value.current, this.branch.opts.ref?.current ?? undefined);
+		this.provider.select(
+			this.branch.opts.value.current,
+			this.branch.opts.ref?.current ?? undefined
+		);
 	};
 
 	readonly props = $derived.by(() =>
diff --git a/src/uix/soma/components/year-grid/components/year-grid.svelte b/src/uix/soma/components/year-grid/components/year-grid.svelte
index 6dbd25c14..a519234e2 100644
--- a/src/uix/soma/components/year-grid/components/year-grid.svelte
+++ b/src/uix/soma/components/year-grid/components/year-grid.svelte
@@ -1,11 +1,9 @@
 <script lang="ts">
 	import { readableActive, writableActive } from '$libs/reactive';
+	import { activeDir } from '../../../direction';
 	import { mergeProps } from '../../../props';
 	import { createId } from '$active-uix/id';
-	import {
-		YearGridProvider,
-		resolveInitialYearPlaceholder
-	} from '../year-grid-provider.svelte';
+	import { YearGridProvider, resolveInitialYearPlaceholder } from '../year-grid-provider.svelte';
 	import type { YearGridProps } from '../types';
 	import { Soma } from '../../../core/soma.svelte';
 
@@ -57,7 +55,7 @@
 		maxValue: readableActive(() => maxValue),
 		disabled: readableActive(() => disabled),
 		readonly: readableActive(() => readonly),
-		dir: readableActive(() => dir ?? soma?.prefs.getDir() ?? 'ltr'),
+		dir: activeDir(() => dir, soma),
 		locale: readableActive(() => locale ?? ''),
 		decadeSize: readableActive(() => decadeSize),
 		pageAligned: readableActive(() => pageAligned),
diff --git a/src/uix/soma/components/year-grid/year-grid-provider.svelte.ts b/src/uix/soma/components/year-grid/year-grid-provider.svelte.ts
index b02e59a5b..d8872e0f4 100644
--- a/src/uix/soma/components/year-grid/year-grid-provider.svelte.ts
+++ b/src/uix/soma/components/year-grid/year-grid-provider.svelte.ts
@@ -1,4 +1,5 @@
 import { context, type WithRefOpts } from '../../provider';
+import type { Direction } from '../../types';
 import { boolToEmptyStrOrUndef } from '$adom';
 import { state, type ActiveProps, type StateProps } from '$libs/reactive';
 import type { SomaKeyboardEvent, SomaMouseEvent, OnChangeFn } from '../../types';
@@ -43,7 +44,7 @@ export interface YearGridOpts
 			maxValue: YearValue | undefined;
 			disabled: boolean;
 			readonly: boolean;
-			dir: 'ltr' | 'rtl';
+			dir: Direction | undefined;
 			locale: string;
 			decadeSize: number;
 			/**
@@ -60,6 +61,15 @@ export interface YearGridOpts
 }
 
 export class YearGridProvider {
+	/**
+	 * Direction for this component's OWN math (arrow keys). Always concrete —
+	 * `undefined` and `'ltr'` are indistinguishable to every `=== 'rtl'` test.
+	 * The DOM attribute is the other half: `props` stamps `opts.dir.current`
+	 * raw, so it is omitted when nobody asserted a direction and the element
+	 * inherits instead of forcing `ltr` onto an RTL page.
+	 */
+	readonly resolvedDir = $derived.by(() => this.opts.dir.current ?? 'ltr');
+
 	readonly opts: YearGridOpts;
 	readonly runtimePart: SomaRuntimePart;
 	readonly soma: Soma;
@@ -109,7 +119,7 @@ export class YearGridProvider {
 		const placeholder = this.opts.placeholder.current.year;
 		if (this.opts.pageAligned.current === false) return placeholder;
 		const size = this.decadeSize;
-		return placeholder - ((placeholder % size + size) % size);
+		return placeholder - (((placeholder % size) + size) % size);
 	});
 
 	readonly pageEnd = $derived.by(() => this.pageStart + this.decadeSize - 1);
@@ -124,9 +134,7 @@ export class YearGridProvider {
 
 	readonly fullLabel = $derived.by(() => {
 		const base =
-			this.opts.ariaLabel.current ??
-			this.soma.langs.ts(YEAR_GRID_LANGS.LABEL) ??
-			'Year grid';
+			this.opts.ariaLabel.current ?? this.soma.langs.ts(YEAR_GRID_LANGS.LABEL) ?? 'Year grid';
 		return `${base}, ${this.headingValue}`;
 	});
 
@@ -156,7 +164,10 @@ export class YearGridProvider {
 	private setPlaceholder(next: YearPlaceholder, target?: HTMLElement): void {
 		if (this.opts.placeholder.current.year === next.year) return;
 		this.opts.placeholder.current = next;
-		void this.runtime.trigger('shift-navigate-step', target ? { fallbackTarget: target } : undefined);
+		void this.runtime.trigger(
+			'shift-navigate-step',
+			target ? { fallbackTarget: target } : undefined
+		);
 	}
 
 	prevPage(target?: HTMLElement): void {
@@ -182,7 +193,7 @@ export class YearGridProvider {
 
 	handleCellKeydown(e: SomaKeyboardEvent<HTMLElement>, year: number): boolean {
 		const { nextKey: horizNext, prevKey: horizPrev } = getDirectionalKeys(
-			this.opts.dir.current,
+			this.resolvedDir,
 			'horizontal'
 		);
 
@@ -424,8 +435,7 @@ export class YearGridGridProvider {
 
 // ── Cell ─────────────────────────────────────────────────────────────────────
 
-export interface YearGridCellOpts
-	extends WithRefOpts, ActiveProps<{ year: number }> {}
+export interface YearGridCellOpts extends WithRefOpts, ActiveProps<{ year: number }> {}
 
 export class YearGridCellProvider {
 	readonly opts: YearGridCellOpts;
diff --git a/src/uix/soma/direction.ts b/src/uix/soma/direction.ts
new file mode 100644
index 000000000..8a79e458f
--- /dev/null
+++ b/src/uix/soma/direction.ts
@@ -0,0 +1,43 @@
+import { readableActive, type Active } from '$libs/reactive';
+import type { Soma } from './core/soma.svelte';
+import type { Direction } from './types';
+
+/**
+ * The ONE way a component resolves its text direction.
+ *
+ * Before this existed the catalogue had ten spellings of these three lines —
+ * some with a `?? 'ltr'` tail, some with an `as 'ltr' | 'rtl'` cast, some
+ * resolving in the wrapper and some inside the provider, and two menu
+ * components quietly carrying an extra inheritance step nobody could see. A
+ * framework that sells homogeneity cannot afford ten shapes for its most
+ * cross-cutting axis.
+ *
+ * ## Why the result can be `undefined`
+ *
+ * `undefined` means **nobody asserted a direction** — neither the consumer via
+ * the prop nor the app via a registered `direction` preference. That is NOT
+ * the same as `'ltr'`, and collapsing the two is the bug this signature
+ * exists to prevent:
+ *
+ * - A component's own math (arrow keys, pointer sign, placement flip) wants a
+ *   concrete value. Providers default it once, in `resolvedDir`.
+ * - The `dir` ATTRIBUTE a component writes to the DOM must only appear when
+ *   someone asserted something. Stamping a defaulted `'ltr'` is what makes a
+ *   component force its subtree back to LTR inside an `<html dir="rtl">` page.
+ *   An omitted attribute inherits — for free, with no DOM read.
+ *
+ * ## Extra steps are declared, not buried
+ *
+ * A component that legitimately consults something else first passes it in the
+ * getter, where it is visible at the call site:
+ *
+ * ```ts
+ * dir: activeDir(() => dir ?? parentMenu?.opts.dir.current, soma)
+ * ```
+ */
+export function activeDir(
+	dir: () => Direction | undefined,
+	soma: Soma | undefined
+): Active<Direction | undefined> {
+	return readableActive(() => dir() ?? soma?.prefs.getDir());
+}
diff --git a/src/uix/soma/layers/floating/floating.svelte.ts b/src/uix/soma/layers/floating/floating.svelte.ts
index 87686f330..f2884974e 100644
--- a/src/uix/soma/layers/floating/floating.svelte.ts
+++ b/src/uix/soma/layers/floating/floating.svelte.ts
@@ -75,7 +75,14 @@ export interface FloatingContentOpts extends ActiveProps<{
 	updatePositionStrategy: 'optimized' | 'always';
 	strategy: 'fixed' | 'absolute';
 	onPlaced: () => void;
-	dir: Direction;
+	/**
+	 * `undefined` = nobody asserted a direction. Kept distinct from `'ltr'`
+	 * because this layer both USES the value (placement flip) and STAMPS it on
+	 * the floating wrapper. A portalled wrapper that omits the attribute
+	 * inherits from the portal host — which is where the prefs projection
+	 * lives — instead of forcing `ltr` onto an RTL page.
+	 */
+	dir: Direction | undefined;
 	style: StyleProperties | null | undefined | string;
 	enabled: boolean;
 	customAnchor: string | HTMLElement | null | Measurable;
diff --git a/web/routes/uix/+layout@.svelte b/web/routes/uix/+layout@.svelte
index f78710e1c..e158aca8c 100644
--- a/web/routes/uix/+layout@.svelte
+++ b/web/routes/uix/+layout@.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import { createActiveUix, setActiveUix } from '$active-uix';
-	import { createActivePrefsDomProjection, standardPrefsDimensions } from '$prefs';
+	import {
+		createActivePrefsDomProjection,
+		readActivePrefsSlot,
+		standardPrefsDimensions
+	} from '$prefs';
 	import { page } from '$app/state';
 	import { Soma } from '$soma/core/soma.svelte';
 	import { siumLangs } from '$sium/langs/langs';
@@ -93,13 +97,17 @@
 
 	let { children } = $props();
 
-	type Language = 'es' | 'en' | 'fr' | 'de';
+	type Language = 'es' | 'en' | 'fr' | 'de' | 'ar';
 	type Currency = 'EUR' | 'USD' | 'GBP' | 'JPY';
 	type UnitSystem = 'metric' | 'imperial';
 	type NumberFormat = 'es-ES' | 'en-US' | 'en-GB' | 'de-DE';
 
 	const docsPrefsSchema = standardPrefsDimensions({
-		languages: ['es', 'en', 'fr', 'de'] satisfies readonly Language[],
+		// `ar` is here to make the language→direction derivation exercisable:
+		// picking it flips `prefs.direction` to rtl with no direction intent set.
+		// Untranslated keys fall back to the default locale (engine-langs.ts:51-56),
+		// so it degrades to Spanish copy rather than breaking.
+		languages: ['es', 'en', 'fr', 'de', 'ar'] satisfies readonly Language[],
 		locales: ['es-ES', 'en-US', 'en-GB', 'de-DE'] satisfies readonly NumberFormat[],
 		currencies: ['EUR', 'USD', 'GBP', 'JPY'] satisfies readonly Currency[],
 		defaults: {
@@ -459,7 +467,7 @@
 				{ slug: '/uix/components/float', label: 'Float' },
 				{ slug: '/uix/components/scroll-area', label: 'ScrollArea' },
 				{ slug: '/uix/components/separator', label: 'Separator' },
-				{ slug: '/uix/components/splitter', label: 'Splitter' }
,
+				{ slug: '/uix/components/splitter', label: 'Splitter' },
 				{ slug: '/uix/components/sticky', label: 'Sticky' }
 			]
 		}
@@ -553,7 +561,16 @@
 	// engine's channels once those expose runtime setEnabled APIs; today
 	// they store preference + reflect it in the UI.
 
-	let dir = $state<'ltr' | 'rtl'>('ltr');
+	// Three states, not two. `auto` CLEARS the direction intent so the built-in
+	// `directionDimension` can derive it from `language` — the chain the
+	// architecture documents ("if the user sets no intent, it derives from
+	// prefs.language"). With a two-state toggle the shell set an intent from the
+	// first frame, which permanently masked that derivation: picking Arabic
+	// would have changed nothing.
+	let dirMode = $state<'auto' | 'ltr' | 'rtl'>('auto');
+	/** Effective direction after prefs resolves intent → derivation → default. */
+	const dirSlot = readActivePrefsSlot<'ltr' | 'rtl'>(uix.prefs, 'direction');
+	const effectiveDir = $derived(dirSlot?.get() ?? 'ltr');
 	let language = $state<Language>('es');
 	let currency = $state<Currency>('EUR');
 	let units = $state<UnitSystem>('metric');
@@ -580,7 +597,8 @@
 		es: 'Español',
 		en: 'English',
 		fr: 'Français',
-		de: 'Deutsch'
+		de: 'Deutsch',
+		ar: 'العربية'
 	};
 	const CURRENCY_LABELS: Record<Currency, string> = {
 		EUR: 'Euro',
@@ -603,7 +621,7 @@
 		if (!stored) return;
 		try {
 			const p = JSON.parse(stored);
-			if (p.dir === 'ltr' || p.dir === 'rtl') dir = p.dir;
+			if (p.dir === 'auto' || p.dir === 'ltr' || p.dir === 'rtl') dirMode = p.dir;
 			if (p.language) language = p.language;
 			if (p.currency) currency = p.currency;
 			if (p.units) units = p.units;
@@ -623,7 +641,7 @@
 	$effect(() => {
 		if (typeof localStorage === 'undefined') return;
 		const blob = {
-			dir,
+			dir: dirMode,
 			language,
 			currency,
 			units,
@@ -640,7 +658,10 @@
 
 	$effect(() => {
 		uix.prefs.setIntent('language', language);
-		uix.prefs.setIntent('direction', dir);
+		// `auto` must CLEAR, not set: intent beats derivation, so setting any
+		// value here would stop `direction` from following `language`.
+		if (dirMode === 'auto') uix.prefs.clearIntent('direction');
+		else uix.prefs.setIntent('direction', dirMode);
 		uix.prefs.setIntent('locale', numberFormat);
 		uix.prefs.setIntent('currency', currency);
 		uix.prefs.setIntent('unitSystem', units);
@@ -724,15 +745,34 @@
 				<!-- DIR: simple toggle. RTL flips the entire document direction
 					     so all eidos components (which use logical properties)
 					     reverse correctly. -->
+				<!-- Instrumented for `perm:check`: this is the ONLY control in the
+					     shell that commits a preference, so without it the permutation
+					     runner exercises component state transitions but never a prefs
+					     commit — and the reactive path from `uix.prefs` into the ~64
+					     components that resolve `dir` from it stays untested.
+					     Index 90 so it runs AFTER each demo's own steps (0..N).
+					     Two consequences a future reader should know: the runner shares
+					     one browser context across routes, so this flip persists via
+					     localStorage and routes alternate ltr/rtl through a run; and
+					     because the scan is page-wide, EVERY route under this layout now
+					     carries a step, so the runner no longer skips uninstrumented
+					     demos. Both are deliberate — morfo contracts are direction
+					     agnostic, and a prefs commit on every route is the coverage
+					     this instrumentation exists for. -->
 				<button
 					type="button"
 					data-uix-icon-btn
-					title={dir === 'ltr' ? 'Switch to RTL' : 'Switch to LTR'}
+					data-perm-step="90"
+					data-perm-label="prefs: flip direction"
+					data-perm-settle="600"
+					title="Direction: {dirMode}{dirMode === 'auto'
+						? ` (from language → ${effectiveDir})`
+						: ''} — click to cycle auto → ltr → rtl"
 					aria-label="Toggle direction"
-					aria-pressed={dir === 'rtl'}
-					onclick={() => (dir = dir === 'ltr' ? 'rtl' : 'ltr')}
+					onclick={() =>
+						(dirMode = dirMode === 'auto' ? 'ltr' : dirMode === 'ltr' ? 'rtl' : 'auto')}
 				>
-					{#if dir === 'ltr'}
+					{#if effectiveDir === 'ltr'}
 						<svg
 							viewBox="0 0 24 24"
 							fill="none"
diff --git a/web/routes/uix/components/carousel/+page.svelte b/web/routes/uix/components/carousel/+page.svelte
index 9ace934a0..0eeea9f95 100644
--- a/web/routes/uix/components/carousel/+page.svelte
+++ b/web/routes/uix/components/carousel/+page.svelte
@@ -52,7 +52,12 @@
 	// direction. `locale` is forwarded for downstream lang-aware behavior
 	// (announcer text, future label formatting).
 	type Direction = 'ltr' | 'rtl';
-	let dir = $state<Direction>('ltr');
+	// `auto` passes no `dir` prop at all, so the component resolves the
+	// documented chain `prop -> soma.prefs.getDir() -> 'ltr'` and follows the
+	// shell's direction switch. That is what a real consumer gets, so it is
+	// the default here; picking ltr/rtl shows the prop overriding prefs.
+	let dirMode = $state<'auto' | Direction>('auto');
+	const dir = $derived(dirMode === 'auto' ? undefined : dirMode);
 	let locale = $state('en-US');
 
 	let size = $state<CarouselSize>('md');
@@ -104,7 +109,11 @@
 	}
 
 	const slides = [
-		{ tone: 'var(--color-primary-element)', label: 'Aurora · primary element', sub: 'slide 1 of 4' },
+		{
+			tone: 'var(--color-primary-element)',
+			label: 'Aurora · primary element',
+			sub: 'slide 1 of 4'
+		},
 		{ tone: 'var(--color-affirm-element)', label: 'Meadow · affirm element', sub: 'slide 2 of 4' },
 		{ tone: 'var(--color-risk-element)', label: 'Ember · risk element', sub: 'slide 3 of 4' },
 		{ tone: 'var(--color-fulfill-element)', label: 'Tide · fulfill element', sub: 'slide 4 of 4' }
@@ -137,7 +146,7 @@
 			autoplay && stopOnMouseEnter && '  stopOnMouseEnter',
 			autoplay && stopOnLastSnap && '  stopOnLastSnap',
 			disabled && '  disabled',
-			dir !== 'ltr' && `  dir="${dir}"`,
+			dirMode !== 'auto' && `  dir="${dir}"`,
 			locale !== 'en-US' && `  locale="${locale}"`,
 			'>',
 			'  {#snippet children({ api, isPlaying })}',
@@ -176,7 +185,9 @@
 			slidesToScroll !== 1 && `  slidesToScroll={${slidesToScroll}}`,
 			align !== 'start' && `  align="${align}"`,
 			gap !== 0 && `  gap="${gap}rem"`,
-			orientation === 'vertical' && verticalBlockSize !== 16 && `  verticalBlockSize="${verticalBlockSize}rem"`,
+			orientation === 'vertical' &&
+				verticalBlockSize !== 16 &&
+				`  verticalBlockSize="${verticalBlockSize}rem"`,
 			size !== 'md' && `  size="${size}"`,
 			variant !== 'surface' && `  variant="${variant}"`,
 			color !== 'primary' && `  color="${color}"`,
@@ -192,7 +203,7 @@
 			autoplay && stopOnMouseEnter && '  stopOnMouseEnter',
 			autoplay && stopOnLastSnap && '  stopOnLastSnap',
 			disabled && '  disabled',
-			dir && `  dir="${dir}"`,
+			dirMode !== 'auto' && `  dir="${dir}"`,
 			!showIndicators && '  showIndicators={false}',
 			!showControls && '  showControls={false}',
 			'>',
@@ -222,11 +233,10 @@
 		<div data-uix-eyebrow>Media · Carousel</div>
 		<h1 data-uix-page-title>Carousel</h1>
 		<p data-uix-page-lede>
-			Horizontally or vertically scrollable rail of slides with keyboard,
-			button, indicator, drag and autoplay navigation. One slide per page.
-			Pattern follows the WAI-ARIA carousel
-			pattern with <code>role="region"</code> + <code>aria-roledescription="carousel"</code>;
-			indicators map 1:1 with slides as a <code>tablist</code>.
+			Horizontally or vertically scrollable rail of slides with keyboard, button, indicator, drag
+			and autoplay navigation. One slide per page. Pattern follows the WAI-ARIA carousel pattern
+			with <code>role="region"</code> + <code>aria-roledescription="carousel"</code>; indicators map
+			1:1 with slides as a <code>tablist</code>.
 		</p>
 		<div data-uix-page-meta>
 			<span data-uix-meta-pill>
@@ -243,13 +253,18 @@
 				<a href={carouselMorfo.apg} target="_blank" rel="noreferrer">carousel ↗</a>
 			</span>
 			<span data-uix-meta-pill>
-				<span data-uix-meta-key>index</span> {index}
+				<span data-uix-meta-key>index</span>
+				{index}
 			</span>
 		</div>
 	</header>
 
 	<div data-uix-stage>
-		<div data-uix-stage-area bind:this={stageRef} style="padding: var(--uix-space-3); display: flex; justify-content: center;">
+		<div
+			data-uix-stage-area
+			bind:this={stageRef}
+			style="padding: var(--uix-space-3); display: flex; justify-content: center;"
+		>
 			<div style="inline-size: min(40rem, 100%);">
 				<Carousel
 					bind:index
@@ -280,7 +295,7 @@
 					{showControls}
 				>
 					{#snippet children(snippet: CarouselProviderSnippetProps)}
-						{(api = snippet.api, isPlaying = snippet.isPlaying, '')}
+						{((api = snippet.api), (isPlaying = snippet.isPlaying), '')}
 						<Carousel.Viewport>
 							<Carousel.ItemGroup>
 								{#each slides as slide, i (slide.label)}
@@ -299,8 +314,14 @@
 												user-select: none;
 											"
 										>
-											<strong style="font-size: var(--font-size-lg); margin-block-end: var(--space-2);">{slide.label}</strong>
-											<span style="font-size: var(--font-size-sm); color: var(--color-content-secondary);">{slide.sub}</span>
+											<strong
+												style="font-size: var(--font-size-lg); margin-block-end: var(--space-2);"
+												>{slide.label}</strong
+											>
+											<span
+												style="font-size: var(--font-size-sm); color: var(--color-content-secondary);"
+												>{slide.sub}</span
+											>
 										</div>
 									</Carousel.Item>
 								{/each}
@@ -329,12 +350,17 @@
 				<span>arrow keys · drag · click indicators</span>
 			{:else}
 				{#each trace.slice(0, 3) as entry}
-					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
+					<span
+						><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
+							? ' · ' + entry.intent
+							: ''}</span
+					>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}
 			{/if}
 			<span style="margin-inline-start: auto;">
-				<span data-uix-stage-trace-key>index</span> {index}
+				<span data-uix-stage-trace-key>index</span>
+				{index}
 			</span>
 		</div>
 	</div>
@@ -352,7 +378,9 @@
 			<span data-uix-layer-badge="sema">sema</span>
 			<span data-uix-tab-count>{events.length}</span>
 		</button>
-		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}>Recipe</button>
+		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
+			>Recipe</button
+		>
 		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
 	</div>
 
@@ -360,10 +388,10 @@
 		<section data-uix-section>
 			<h2 data-uix-section-title>Controls</h2>
 			<p data-uix-section-desc>
-				Soma owns the index, autoplay timer, drag gesture, keyboard nav
-				and orientation. Eidos adds chrome (variant / size / color) and
-				renders the prev/next triggers as eidos <code>&lt;Button iconOnly variant="ghost"&gt;</code> via
-				the canonical Button consumer pattern.
+				Soma owns the index, autoplay timer, drag gesture, keyboard nav and orientation. Eidos adds
+				chrome (variant / size / color) and renders the prev/next triggers as eidos <code
+					>&lt;Button iconOnly variant="ghost"&gt;</code
+				> via the canonical Button consumer pattern.
 			</p>
 
 			<div data-uix-subsection-head>
@@ -374,7 +402,11 @@
 					<span data-uix-control-label>orientation</span>
 					<span data-uix-chips role="radiogroup">
 						{#each ['horizontal', 'vertical'] as o (o)}
-							<button data-uix-chip data-active={orientation === o} onclick={() => (orientation = o as 'horizontal' | 'vertical')}>{o}</button>
+							<button
+								data-uix-chip
+								data-active={orientation === o}
+								onclick={() => (orientation = o as 'horizontal' | 'vertical')}>{o}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -382,7 +414,11 @@
 					<span data-uix-control-label>slidesPerView</span>
 					<span data-uix-chips role="radiogroup">
 						{#each [1, 2, 3, 4] as n (n)}
-							<button data-uix-chip data-active={slidesPerView === n} onclick={() => (slidesPerView = n)}>{n}</button>
+							<button
+								data-uix-chip
+								data-active={slidesPerView === n}
+								onclick={() => (slidesPerView = n)}>{n}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -390,7 +426,11 @@
 					<span data-uix-control-label>slidesToScroll</span>
 					<span data-uix-chips role="radiogroup">
 						{#each [1, 2, 3] as n (n)}
-							<button data-uix-chip data-active={slidesToScroll === n} onclick={() => (slidesToScroll = n)}>{n}</button>
+							<button
+								data-uix-chip
+								data-active={slidesToScroll === n}
+								onclick={() => (slidesToScroll = n)}>{n}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -398,7 +438,11 @@
 					<span data-uix-control-label>align</span>
 					<span data-uix-chips role="radiogroup">
 						{#each ['start', 'center', 'end'] as a (a)}
-							<button data-uix-chip data-active={align === a} onclick={() => (align = a as CarouselAlign)}>{a}</button>
+							<button
+								data-uix-chip
+								data-active={align === a}
+								onclick={() => (align = a as CarouselAlign)}>{a}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -409,7 +453,14 @@
 				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>verticalBlockSize (rem)</span>
-					<input type="range" min="8" max="32" step="1" bind:value={verticalBlockSize} disabled={orientation !== 'vertical'} />
+					<input
+						type="range"
+						min="8"
+						max="32"
+						step="1"
+						bind:value={verticalBlockSize}
+						disabled={orientation !== 'vertical'}
+					/>
 					<span data-uix-control-label-aux>{verticalBlockSize}</span>
 				</label>
 				<label data-uix-control>
@@ -441,7 +492,14 @@
 				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>dragThreshold (0–1)</span>
-					<input type="range" min="0.05" max="0.6" step="0.05" bind:value={dragThreshold} disabled={!dragEnabled} />
+					<input
+						type="range"
+						min="0.05"
+						max="0.6"
+						step="0.05"
+						bind:value={dragThreshold}
+						disabled={!dragEnabled}
+					/>
 					<span data-uix-control-label-aux>{dragThreshold.toFixed(2)}</span>
 				</label>
 			</div>
@@ -459,7 +517,14 @@
 				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>autoplayDelay (ms)</span>
-					<input type="range" min="1000" max="8000" step="500" bind:value={autoplayDelay} disabled={!autoplay} />
+					<input
+						type="range"
+						min="1000"
+						max="8000"
+						step="500"
+						bind:value={autoplayDelay}
+						disabled={!autoplay}
+					/>
 					<span data-uix-control-label-aux>{autoplayDelay}</span>
 				</label>
 				<label data-uix-control>
@@ -508,7 +573,9 @@
 
 			<div data-uix-subsection-head>
 				<span data-uix-layer-badge="soma">soma</span> imperative API
-				<span style="margin-inline-start: auto; color: var(--color-content-secondary); font-size: var(--font-size-xs);">
+				<span
+					style="margin-inline-start: auto; color: var(--color-content-secondary); font-size: var(--font-size-xs);"
+				>
 					exposed via the <code>api</code> snippet prop — drive the carousel from external buttons
 				</span>
 			</div>
@@ -516,9 +583,15 @@
 				<button data-uix-chip onclick={() => api?.scrollPrev()}>scrollPrev()</button>
 				<button data-uix-chip onclick={() => api?.scrollNext()}>scrollNext()</button>
 				<button data-uix-chip onclick={() => api?.scrollTo(0)}>scrollTo(0)</button>
-				<button data-uix-chip onclick={() => api?.scrollTo(slides.length - 1)}>scrollTo(last)</button>
-				<button data-uix-chip onclick={() => api?.play()} disabled={!autoplay || isPlaying}>play()</button>
-				<button data-uix-chip onclick={() => api?.pause()} disabled={!autoplay || !isPlaying}>pause()</button>
+				<button data-uix-chip onclick={() => api?.scrollTo(slides.length - 1)}
+					>scrollTo(last)</button
+				>
+				<button data-uix-chip onclick={() => api?.play()} disabled={!autoplay || isPlaying}
+					>play()</button
+				>
+				<button data-uix-chip onclick={() => api?.pause()} disabled={!autoplay || !isPlaying}
+					>pause()</button
+				>
 				<button data-uix-chip onclick={() => api?.reset()} disabled={!autoplay}>reset()</button>
 				<span data-uix-control-label-aux>isPlaying = {isPlaying}</span>
 			</div>
@@ -536,10 +609,17 @@
 					</select>
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>direction</span>
+					<span data-uix-control-label
+						>direction <span data-uix-control-hint>auto = no prop, follows uix.prefs.direction</span
+						></span
+					>
 					<span data-uix-chips role="radiogroup">
-						{#each ['ltr', 'rtl'] as value (value)}
-							<button data-uix-chip data-active={dir === value} onclick={() => (dir = value as Direction)}>{value}</button>
+						{#each ['auto', 'ltr', 'rtl'] as value (value)}
+							<button
+								data-uix-chip
+								data-active={dirMode === value}
+								onclick={() => (dirMode = value as typeof dirMode)}>{value}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -553,7 +633,11 @@
 					<span data-uix-control-label>variant</span>
 					<span data-uix-chips role="radiogroup">
 						{#each ['surface', 'outline', 'ghost'] as v (v)}
-							<button data-uix-chip data-active={variant === v} onclick={() => (variant = v as CarouselVariant)}>{v}</button>
+							<button
+								data-uix-chip
+								data-active={variant === v}
+								onclick={() => (variant = v as CarouselVariant)}>{v}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -561,7 +645,11 @@
 					<span data-uix-control-label>size</span>
 					<span data-uix-chips role="radiogroup">
 						{#each ['xs', 'sm', 'md', 'lg', 'xl'] as s (s)}
-							<button data-uix-chip data-active={size === s} onclick={() => (size = s as CarouselSize)}>{s}</button>
+							<button
+								data-uix-chip
+								data-active={size === s}
+								onclick={() => (size = s as CarouselSize)}>{s}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -569,7 +657,11 @@
 					<span data-uix-control-label>color</span>
 					<span data-uix-chips role="radiogroup">
 						{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as c (c)}
-							<button data-uix-chip data-active={color === c} onclick={() => (color = c as CarouselColor)}>{c}</button>
+							<button
+								data-uix-chip
+								data-active={color === c}
+								onclick={() => (color = c as CarouselColor)}>{c}</button
+							>
 						{/each}
 					</span>
 				</label>
@@ -612,48 +704,153 @@
 	{#if tab === 'api'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>API reference</h2>
-			<p data-uix-section-desc>8 parts: Provider, Viewport, ItemGroup, Item, PrevTrigger, NextTrigger, IndicatorGroup, Indicator.</p>
+			<p data-uix-section-desc>
+				8 parts: Provider, Viewport, ItemGroup, Item, PrevTrigger, NextTrigger, IndicatorGroup,
+				Indicator.
+			</p>
 
 			<div data-uix-subsection-head>Provider (Carousel)</div>
 			<div data-uix-table-wrap>
 				<table data-uix-table>
 					<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
 					<tbody>
-						<tr><td class="name">index <span data-uix-tag data-kind="bindable">bindable</span></td><td class="type">number</td><td class="default">0</td><td>Current slide index (0-based). Pass without bind: for the initial index.</td></tr>
-						<tr><td class="name">onIndexChange</td><td class="type">(i: number) =&gt; void</td><td class="default empty">—</td><td>Called on every index change.</td></tr>
-						<tr><td class="name">orientation</td><td class="type">'horizontal' | 'vertical'</td><td class="default">'horizontal'</td><td>Scroll axis.</td></tr>
-						<tr><td class="name">slidesPerView</td><td class="type">number</td><td class="default">1</td><td>Slides visible at once (each Item basis = 100% / slidesPerView).</td></tr>
-						<tr><td class="name">slidesToScroll</td><td class="type">number</td><td class="default">1</td><td>Slides advanced per next() / prev().</td></tr>
-						<tr><td class="name">align</td><td class="type">'start' | 'center' | 'end'</td><td class="default">'start'</td><td>Alignment of active slide(s) within viewport.</td></tr>
-						<tr><td class="name">gap</td><td class="type">string (CSS length)</td><td class="default">'0px'</td><td>Inline-axis gap between slides.</td></tr>
-						<tr><td class="name">loop</td><td class="type">boolean</td><td class="default">false</td><td>Wrap at edges (also wraps autoplay).</td></tr>
-						<tr><td class="name">dragEnabled</td><td class="type">boolean</td><td class="default">true</td><td>Allow pointer drag to scrub.</td></tr>
-						<tr><td class="name">dragThreshold</td><td class="type">number (0–1)</td><td class="default">0.25</td><td>Release fraction past which next slide commits.</td></tr>
-						<tr><td class="name">autoplay</td><td class="type">boolean</td><td class="default">false</td><td>Enable timer-driven advance.</td></tr>
-						<tr><td class="name">autoplayDelay</td><td class="type">number (ms)</td><td class="default">4000</td><td>Interval in milliseconds.</td></tr>
-						<tr><td class="name">playOnInit</td><td class="type">boolean</td><td class="default">true</td><td>Start the autoplay timer on mount.</td></tr>
-						<tr><td class="name">pauseOnHover</td><td class="type">boolean</td><td class="default">true</td><td>Pause autoplay while hovered.</td></tr>
-						<tr><td class="name">stopOnInteraction</td><td class="type">boolean</td><td class="default">false</td><td>Latch-stop after user clicks prev/next/indicator or drags.</td></tr>
-						<tr><td class="name">stopOnFocusIn</td><td class="type">boolean</td><td class="default">true</td><td>Pause while focus is inside root.</td></tr>
-						<tr><td class="name">stopOnMouseEnter</td><td class="type">boolean</td><td class="default">false</td><td>Pause while cursor over root (Embla parity).</td></tr>
-						<tr><td class="name">stopOnLastSnap</td><td class="type">boolean</td><td class="default">false</td><td>Latch-stop when last snap reached (loop=false only).</td></tr>
-						<tr><td class="name">disabled</td><td class="type">boolean</td><td class="default">false</td><td>Disable all navigation.</td></tr>
-						<tr><td class="name">aria-label</td><td class="type">string</td><td class="default empty">—</td><td>Override accessible name (falls back to lang ref).</td></tr>
-						<tr><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ControlVariant: 'surface' | 'outline' | 'ghost'</td><td class="default">'surface'</td><td>Container chrome.</td></tr>
-						<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td><td class="default">'md'</td><td>Cascades to indicator + trigger size.</td></tr>
-						<tr><td class="name">color <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ColorRole</td><td class="default">'primary'</td><td>Indicator + focus accent.</td></tr>
-						<tr><td class="name">block <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">boolean</td><td class="default">true</td><td>Stretch root inline-size to container.</td></tr>
-						<tr><td class="name">verticalBlockSize <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">string (CSS length)</td><td class="default">'16rem'</td><td>Viewport block-size in vertical orientation.</td></tr>
+						<tr
+							><td class="name">index <span data-uix-tag data-kind="bindable">bindable</span></td
+							><td class="type">number</td><td class="default">0</td><td
+								>Current slide index (0-based). Pass without bind: for the initial index.</td
+							></tr
+						>
+						<tr
+							><td class="name">onIndexChange</td><td class="type">(i: number) =&gt; void</td><td
+								class="default empty">—</td
+							><td>Called on every index change.</td></tr
+						>
+						<tr
+							><td class="name">orientation</td><td class="type">'horizontal' | 'vertical'</td><td
+								class="default">'horizontal'</td
+							><td>Scroll axis.</td></tr
+						>
+						<tr
+							><td class="name">slidesPerView</td><td class="type">number</td><td class="default"
+								>1</td
+							><td>Slides visible at once (each Item basis = 100% / slidesPerView).</td></tr
+						>
+						<tr
+							><td class="name">slidesToScroll</td><td class="type">number</td><td class="default"
+								>1</td
+							><td>Slides advanced per next() / prev().</td></tr
+						>
+						<tr
+							><td class="name">align</td><td class="type">'start' | 'center' | 'end'</td><td
+								class="default">'start'</td
+							><td>Alignment of active slide(s) within viewport.</td></tr
+						>
+						<tr
+							><td class="name">gap</td><td class="type">string (CSS length)</td><td class="default"
+								>'0px'</td
+							><td>Inline-axis gap between slides.</td></tr
+						>
+						<tr
+							><td class="name">loop</td><td class="type">boolean</td><td class="default">false</td
+							><td>Wrap at edges (also wraps autoplay).</td></tr
+						>
+						<tr
+							><td class="name">dragEnabled</td><td class="type">boolean</td><td class="default"
+								>true</td
+							><td>Allow pointer drag to scrub.</td></tr
+						>
+						<tr
+							><td class="name">dragThreshold</td><td class="type">number (0–1)</td><td
+								class="default">0.25</td
+							><td>Release fraction past which next slide commits.</td></tr
+						>
+						<tr
+							><td class="name">autoplay</td><td class="type">boolean</td><td class="default"
+								>false</td
+							><td>Enable timer-driven advance.</td></tr
+						>
+						<tr
+							><td class="name">autoplayDelay</td><td class="type">number (ms)</td><td
+								class="default">4000</td
+							><td>Interval in milliseconds.</td></tr
+						>
+						<tr
+							><td class="name">playOnInit</td><td class="type">boolean</td><td class="default"
+								>true</td
+							><td>Start the autoplay timer on mount.</td></tr
+						>
+						<tr
+							><td class="name">pauseOnHover</td><td class="type">boolean</td><td class="default"
+								>true</td
+							><td>Pause autoplay while hovered.</td></tr
+						>
+						<tr
+							><td class="name">stopOnInteraction</td><td class="type">boolean</td><td
+								class="default">false</td
+							><td>Latch-stop after user clicks prev/next/indicator or drags.</td></tr
+						>
+						<tr
+							><td class="name">stopOnFocusIn</td><td class="type">boolean</td><td class="default"
+								>true</td
+							><td>Pause while focus is inside root.</td></tr
+						>
+						<tr
+							><td class="name">stopOnMouseEnter</td><td class="type">boolean</td><td
+								class="default">false</td
+							><td>Pause while cursor over root (Embla parity).</td></tr
+						>
+						<tr
+							><td class="name">stopOnLastSnap</td><td class="type">boolean</td><td class="default"
+								>false</td
+							><td>Latch-stop when last snap reached (loop=false only).</td></tr
+						>
+						<tr
+							><td class="name">disabled</td><td class="type">boolean</td><td class="default"
+								>false</td
+							><td>Disable all navigation.</td></tr
+						>
+						<tr
+							><td class="name">aria-label</td><td class="type">string</td><td class="default empty"
+								>—</td
+							><td>Override accessible name (falls back to lang ref).</td></tr
+						>
+						<tr
+							><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">ControlVariant: 'surface' | 'outline' | 'ghost'</td
+							><td class="default">'surface'</td><td>Container chrome.</td></tr
+						>
+						<tr
+							><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td
+							><td class="default">'md'</td><td>Cascades to indicator + trigger size.</td></tr
+						>
+						<tr
+							><td class="name">color <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">ColorRole</td
+							><td class="default">'primary'</td><td>Indicator + focus accent.</td></tr
+						>
+						<tr
+							><td class="name">block <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">boolean</td
+							><td class="default">true</td><td>Stretch root inline-size to container.</td></tr
+						>
+						<tr
+							><td class="name"
+								>verticalBlockSize <span data-uix-tag data-kind="eidos">eidos</span></td
+							><td class="type">string (CSS length)</td><td class="default">'16rem'</td><td
+								>Viewport block-size in vertical orientation.</td
+							></tr
+						>
 					</tbody>
 				</table>
 			</div>
 
 			<div data-uix-subsection-head>Viewport · ItemGroup</div>
 			<p data-uix-section-desc style="margin-top: 0.25rem;">
-				<code>Viewport</code> is the <code>overflow: hidden</code> clipping
-				box. <code>ItemGroup</code> is the translatable strip whose
-				<code>transform</code> the provider drives. Both are pass-through —
-				no eidos-specific props.
+				<code>Viewport</code> is the <code>overflow: hidden</code> clipping box.
+				<code>ItemGroup</code>
+				is the translatable strip whose
+				<code>transform</code> the provider drives. Both are pass-through — no eidos-specific props.
 			</p>
 
 			<div data-uix-subsection-head>Item</div>
@@ -661,8 +858,20 @@
 				<table data-uix-table>
 					<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
 					<tbody>
-						<tr><td class="name">index</td><td class="type">number</td><td class="default empty">required</td><td>0-based slide index. Used for <code>aria-roledescription</code> + indicator wiring.</td></tr>
-						<tr><td class="name">children</td><td class="type">Snippet&lt;[{`{ index, isActive }`}]&gt;</td><td class="default empty">—</td><td>Slide body. Receives active flag for per-slide effects.</td></tr>
+						<tr
+							><td class="name">index</td><td class="type">number</td><td class="default empty"
+								>required</td
+							><td
+								>0-based slide index. Used for <code>aria-roledescription</code> + indicator wiring.</td
+							></tr
+						>
+						<tr
+							><td class="name">children</td><td class="type"
+								>Snippet&lt;[{`{ index, isActive }`}]&gt;</td
+							><td class="default empty">—</td><td
+								>Slide body. Receives active flag for per-slide effects.</td
+							></tr
+						>
 					</tbody>
 				</table>
 			</div>
@@ -672,14 +881,49 @@
 				<table data-uix-table>
 					<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
 					<tbody>
-						<tr><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ControlVariant: 'surface' | 'outline' | 'ghost'</td><td class="default">'ghost'</td><td>Button variant.</td></tr>
-						<tr><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td><td class="default">cascades from Carousel</td><td>Button size override.</td></tr>
-						<tr><td class="name">rounded <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ButtonRounded</td><td class="default">'full'</td><td>Corner radius.</td></tr>
-						<tr><td class="name">intent <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">Intent</td><td class="default empty">—</td><td>Evaluative intent.</td></tr>
-						<tr><td class="name">color <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">ColorRole</td><td class="default empty">—</td><td>Hierarchical color (under intent='neutral').</td></tr>
-						<tr><td class="name">iconOnly <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">boolean</td><td class="default">true</td><td>Square aspect, label sr-only.</td></tr>
-						<tr><td class="name">icon <span data-uix-tag data-kind="eidos">eidos</span></td><td class="type">Snippet</td><td class="default">chevron</td><td>Override default arrow glyph.</td></tr>
-						<tr><td class="name">child <span data-uix-tag data-kind="soma">soma</span></td><td class="type">Snippet</td><td class="default empty">—</td><td>Bypass Button entirely; render custom element.</td></tr>
+						<tr
+							><td class="name">variant <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">ControlVariant: 'surface' | 'outline' | 'ghost'</td
+							><td class="default">'ghost'</td><td>Button variant.</td></tr
+						>
+						<tr
+							><td class="name">size <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">'xs' | 'sm' | 'md' | 'lg' | 'xl'</td
+							><td class="default">cascades from Carousel</td><td>Button size override.</td></tr
+						>
+						<tr
+							><td class="name">rounded <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">ButtonRounded</td
+							><td class="default">'full'</td><td>Corner radius.</td></tr
+						>
+						<tr
+							><td class="name">intent <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">Intent</td
+							><td class="default empty">—</td><td>Evaluative intent.</td></tr
+						>
+						<tr
+							><td class="name">color <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">ColorRole</td
+							><td class="default empty">—</td><td>Hierarchical color (under intent='neutral').</td
+							></tr
+						>
+						<tr
+							><td class="name">iconOnly <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">boolean</td
+							><td class="default">true</td><td>Square aspect, label sr-only.</td></tr
+						>
+						<tr
+							><td class="name">icon <span data-uix-tag data-kind="eidos">eidos</span></td><td
+								class="type">Snippet</td
+							><td class="default">chevron</td><td>Override default arrow glyph.</td></tr
+						>
+						<tr
+							><td class="name">child <span data-uix-tag data-kind="soma">soma</span></td><td
+								class="type">Snippet</td
+							><td class="default empty">—</td><td
+								>Bypass Button entirely; render custom element.</td
+							></tr
+						>
 					</tbody>
 				</table>
 			</div>
@@ -689,9 +933,22 @@
 				<table data-uix-table>
 					<thead><tr><th>Prop</th><th>Type</th><th>Default</th><th>Description</th></tr></thead>
 					<tbody>
-						<tr><td class="name">index (Indicator)</td><td class="type">number</td><td class="default empty">required</td><td>0-based slide this indicator navigates to.</td></tr>
-						<tr><td class="name">aria-label (Indicator)</td><td class="type">string</td><td class="default empty">—</td><td>Override accessible name; falls back to "Go to slide {`{n}`}".</td></tr>
-						<tr><td class="name">children (Indicator)</td><td class="type">Snippet&lt;[{`{ index, isActive }`}]&gt;</td><td class="default empty">—</td><td>Custom indicator body (default is a dot).</td></tr>
+						<tr
+							><td class="name">index (Indicator)</td><td class="type">number</td><td
+								class="default empty">required</td
+							><td>0-based slide this indicator navigates to.</td></tr
+						>
+						<tr
+							><td class="name">aria-label (Indicator)</td><td class="type">string</td><td
+								class="default empty">—</td
+							><td>Override accessible name; falls back to "Go to slide {`{n}`}".</td></tr
+						>
+						<tr
+							><td class="name">children (Indicator)</td><td class="type"
+								>Snippet&lt;[{`{ index, isActive }`}]&gt;</td
+							><td class="default empty">—</td><td>Custom indicator body (default is a dot).</td
+							></tr
+						>
 					</tbody>
 				</table>
 			</div>
@@ -712,8 +969,17 @@
 					<tbody>
 						<tr><td class="name">name</td><td class="type">"{carouselMorfo.name}"</td></tr>
 						<tr><td class="name">kebab</td><td class="type">"{carouselMorfo.kebab}"</td></tr>
-						<tr><td class="name">apg</td><td><a href={carouselMorfo.apg} target="_blank" rel="noreferrer">{carouselMorfo.apg}</a></td></tr>
-						<tr><td class="name">parts.length</td><td class="default">{carouselMorfo.parts.length}</td></tr>
+						<tr
+							><td class="name">apg</td><td
+								><a href={carouselMorfo.apg} target="_blank" rel="noreferrer">{carouselMorfo.apg}</a
+								></td
+							></tr
+						>
+						<tr
+							><td class="name">parts.length</td><td class="default"
+								>{carouselMorfo.parts.length}</td
+							></tr
+						>
 						<tr><td class="name">events.length</td><td class="default">{events.length}</td></tr>
 					</tbody>
 				</table>
@@ -722,7 +988,13 @@
 			<div data-uix-subsection-head>Parts</div>
 			<div data-uix-table-wrap>
 				<table data-uix-table>
-					<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Archetype</th><th>States</th><th>Optional</th></tr></thead>
+					<thead
+						><tr
+							><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Archetype</th><th
+								>States</th
+							><th>Optional</th></tr
+						></thead
+					>
 					<tbody>
 						{#each partsList as part (part.kebab)}
 							<tr>
@@ -742,12 +1014,23 @@
 			<div data-uix-subsection-head>Events declaration</div>
 			<div data-uix-table-wrap>
 				<table data-uix-table>
-					<thead><tr><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>intent</th><th>target</th></tr></thead>
+					<thead
+						><tr
+							><th>name</th><th>family</th><th>verb</th><th>sequence</th><th>intent</th><th
+								>target</th
+							></tr
+						></thead
+					>
 					<tbody>
 						{#each events as action (action.name)}
 							{@const sem = action.semantic}
 							{@const intentDecl = 'intent' in sem ? sem.intent : undefined}
-							{@const intentStr = typeof intentDecl === 'string' ? intentDecl : intentDecl ? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}` : '—'}
+							{@const intentStr =
+								typeof intentDecl === 'string'
+									? intentDecl
+									: intentDecl
+										? `fromProp:${(intentDecl as { fromProp?: string }).fromProp ?? '?'}`
+										: '—'}
 							<tr>
 								<td class="name">{action.name}</td>
 								<td class="type">{sem.family}</td>
@@ -771,7 +1054,12 @@
 			</h2>
 			<div data-uix-table-wrap>
 				<table data-uix-table>
-					<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Intent</th><th>Play</th></tr></thead>
+					<thead
+						><tr
+							><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Intent</th><th>Play</th
+							></tr
+						></thead
+					>
 					<tbody>
 						{#each events as action (action.name)}
 							{@const intentDecl = 'intent' in action.semantic ? action.semantic.intent : undefined}
@@ -786,7 +1074,8 @@
 									<button
 										data-uix-play
 										onclick={() => {
-											const target = (stageRef?.querySelector('[data-carousel]') ?? stageRef) as HTMLElement | null;
+											const target = (stageRef?.querySelector('[data-carousel]') ??
+												stageRef) as HTMLElement | null;
 											if (!target) return;
 											void uix.events?.emit({
 												name: action.name,
@@ -794,8 +1083,8 @@
 												target,
 												...(effectiveIntent ? { intent: effectiveIntent } : {})
 											});
-										}}
-									>▶ play</button>
+										}}>▶ play</button
+									>
 								</td>
 							</tr>
 						{/each}
@@ -808,20 +1097,58 @@
 	{#if tab === 'recipe'}
 		<section data-uix-section>
 			<h2 data-uix-section-title>Eidos recipe</h2>
-			<p data-uix-section-desc>Selectors at <code>src/uix/eidos/components/carousel/carousel.css</code>.</p>
+			<p data-uix-section-desc>
+				Selectors at <code>src/uix/eidos/components/carousel/carousel.css</code>.
+			</p>
 			<div data-uix-table-wrap>
 				<table data-uix-table>
 					<thead><tr><th>Selector</th><th>Source</th><th>What it paints</th></tr></thead>
 					<tbody>
-						<tr><td class="name">[data-carousel]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Root — flex column, gap, font.</td></tr>
-						<tr><td class="name">[data-carousel][data-variant]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Surface / outline / ghost chrome around the rail.</td></tr>
-						<tr><td class="name">[data-carousel][data-size]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Indicator dot diameter + gap.</td></tr>
-						<tr><td class="name">[data-carousel][data-color]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Active-indicator accent + focus ring.</td></tr>
-						<tr><td class="name">[data-carousel-viewport]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Clipping box (overflow hidden, inline soma styles).</td></tr>
-						<tr><td class="name">[data-carousel-item-group][data-dragging]</td><td><span data-uix-tag data-kind="soma">morfo</span></td><td>Transform transition off while dragging.</td></tr>
-						<tr><td class="name">[data-carousel-item]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Slide — 100% basis along axis.</td></tr>
-						<tr><td class="name">[data-carousel-prev-trigger] · [data-carousel-next-trigger]</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Absolute-positioned over viewport edges; vertical flips to top/bottom.</td></tr>
-						<tr><td class="name">[data-carousel-indicator][data-state='active']</td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Active indicator: accent fill + 2.25× inline-size stretch.</td></tr>
+						<tr
+							><td class="name">[data-carousel]</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Root — flex column, gap, font.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel][data-variant]</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Surface / outline / ghost chrome around the rail.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel][data-size]</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Indicator dot diameter + gap.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel][data-color]</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Active-indicator accent + focus ring.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel-viewport]</td><td
+								><span data-uix-tag data-kind="soma">morfo</span></td
+							><td>Clipping box (overflow hidden, inline soma styles).</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel-item-group][data-dragging]</td><td
+								><span data-uix-tag data-kind="soma">morfo</span></td
+							><td>Transform transition off while dragging.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel-item]</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Slide — 100% basis along axis.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel-prev-trigger] · [data-carousel-next-trigger]</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Absolute-positioned over viewport edges; vertical flips to top/bottom.</td></tr
+						>
+						<tr
+							><td class="name">[data-carousel-indicator][data-state='active']</td><td
+								><span data-uix-tag data-kind="eidos">eidos</span></td
+							><td>Active indicator: accent fill + 2.25× inline-size stretch.</td></tr
+						>
 					</tbody>
 				</table>
 			</div>
@@ -832,9 +1159,10 @@
 		<section data-uix-section>
 			<h2 data-uix-section-title>Accessibility</h2>
 			<p data-uix-section-desc>
-				Follows the APG <a href={carouselMorfo.apg} target="_blank" rel="noreferrer">carousel pattern</a>.
-				The root is <code>role="region"</code> with <code>aria-roledescription="carousel"</code> +
-				an accessible name. Each slide is <code>role="group"</code> with
+				Follows the APG <a href={carouselMorfo.apg} target="_blank" rel="noreferrer"
+					>carousel pattern</a
+				>. The root is <code>role="region"</code> with <code>aria-roledescription="carousel"</code>
+				+ an accessible name. Each slide is <code>role="group"</code> with
 				<code>aria-roledescription="slide"</code>. Indicators form a
 				<code>role="tablist"</code> with <code>role="tab"</code> children.
 			</p>
@@ -844,12 +1172,27 @@
 				<table data-uix-table>
 					<thead><tr><th>Key</th><th>Action</th></tr></thead>
 					<tbody>
-						<tr><td><span data-uix-kbd>ArrowRight</span> / <span data-uix-kbd>ArrowDown</span></td><td>Next slide.</td></tr>
-						<tr><td><span data-uix-kbd>ArrowLeft</span> / <span data-uix-kbd>ArrowUp</span></td><td>Previous slide.</td></tr>
+						<tr
+							><td><span data-uix-kbd>ArrowRight</span> / <span data-uix-kbd>ArrowDown</span></td
+							><td>Next slide.</td></tr
+						>
+						<tr
+							><td><span data-uix-kbd>ArrowLeft</span> / <span data-uix-kbd>ArrowUp</span></td><td
+								>Previous slide.</td
+							></tr
+						>
 						<tr><td><span data-uix-kbd>Home</span></td><td>First slide.</td></tr>
 						<tr><td><span data-uix-kbd>End</span></td><td>Last slide.</td></tr>
-						<tr><td><span data-uix-kbd>Tab</span></td><td>Move focus through prev / next / indicators / inner slide controls.</td></tr>
-						<tr><td>pointer drag</td><td>Scrub between slides; commits when past <code>dragThreshold</code>.</td></tr>
+						<tr
+							><td><span data-uix-kbd>Tab</span></td><td
+								>Move focus through prev / next / indicators / inner slide controls.</td
+							></tr
+						>
+						<tr
+							><td>pointer drag</td><td
+								>Scrub between slides; commits when past <code>dragThreshold</code>.</td
+							></tr
+						>
 					</tbody>
 				</table>
 			</div>
@@ -860,13 +1203,36 @@
 					<thead><tr><th>Part</th><th>Attribute</th><th>Value</th></tr></thead>
 					<tbody>
 						<tr><td class="name">provider</td><td>role</td><td class="type">"region"</td></tr>
-						<tr><td class="name">provider</td><td>aria-roledescription</td><td class="type">"carousel"</td></tr>
-						<tr><td class="name">provider</td><td>aria-label</td><td class="type">localized "Carousel"</td></tr>
+						<tr
+							><td class="name">provider</td><td>aria-roledescription</td><td class="type"
+								>"carousel"</td
+							></tr
+						>
+						<tr
+							><td class="name">provider</td><td>aria-label</td><td class="type"
+								>localized "Carousel"</td
+							></tr
+						>
 						<tr><td class="name">item</td><td>role</td><td class="type">"group"</td></tr>
-						<tr><td class="name">item</td><td>aria-roledescription</td><td class="type">"slide"</td></tr>
-						<tr><td class="name">prev-trigger / next-trigger</td><td>type / aria-label</td><td class="type">"button" / "Previous slide" | "Next slide"</td></tr>
-						<tr><td class="name">indicator-group</td><td>role / aria-orientation</td><td class="type">"tablist" / orientation</td></tr>
-						<tr><td class="name">indicator</td><td>role / aria-selected</td><td class="type">"tab" / "true|false"</td></tr>
+						<tr
+							><td class="name">item</td><td>aria-roledescription</td><td class="type">"slide"</td
+							></tr
+						>
+						<tr
+							><td class="name">prev-trigger / next-trigger</td><td>type / aria-label</td><td
+								class="type">"button" / "Previous slide" | "Next slide"</td
+							></tr
+						>
+						<tr
+							><td class="name">indicator-group</td><td>role / aria-orientation</td><td class="type"
+								>"tablist" / orientation</td
+							></tr
+						>
+						<tr
+							><td class="name">indicator</td><td>role / aria-selected</td><td class="type"
+								>"tab" / "true|false"</td
+							></tr
+						>
 					</tbody>
 				</table>
 			</div>
diff --git a/web/routes/uix/components/slider/+page.svelte b/web/routes/uix/components/slider/+page.svelte
index 112125031..116184541 100644
--- a/web/routes/uix/components/slider/+page.svelte
+++ b/web/routes/uix/components/slider/+page.svelte
@@ -19,8 +19,12 @@
 	let step = $state(1);
 	let orientation = $state<Orientation>('horizontal');
 	let disabled = $state(false);
-	let dir = $state<Direction>('ltr');
+	let dirMode = $state<'auto' | Direction>('auto');
 	let size = $state<SliderSize>('md');
+	// `auto` passes no prop at all, so the Slider resolves the documented chain
+	// `prop -> soma.prefs.getDir() -> 'ltr'` and follows the shell's direction
+	// switch. Picking ltr/rtl shows the prop overriding prefs.
+	const dir = $derived(dirMode === 'auto' ? undefined : dirMode);
 
 	const compiled = compileMorfo(sliderMorfo);
 	const partsList = $derived([...compiled.parts.byKebab.values()]);
@@ -151,7 +155,11 @@
 				<span>drag or commit a value to see sema events</span>
 			{:else}
 				{#each trace.slice(0, 3) as entry}
-					<span><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent ? ' · ' + entry.intent : ''}</span>
+					<span
+						><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
+							? ' · ' + entry.intent
+							: ''}</span
+					>
 					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
 				{/each}
 			{/if}
@@ -261,6 +269,23 @@
 						{/each}
 					</span>
 				</label>
+				<label data-uix-control>
+					<span data-uix-control-label
+						>direction <span data-uix-control-hint>auto = no prop, follows uix.prefs.direction</span
+						></span
+					>
+					<span data-uix-chips role="radiogroup">
+						{#each ['auto', 'ltr', 'rtl'] as d}
+							<button
+								data-uix-chip
+								data-active={dirMode === d}
+								data-perm-step={d === 'rtl' ? 0 : d === 'ltr' ? 1 : undefined}
+								data-perm-label="dir {d}"
+								onclick={() => (dirMode = d as typeof dirMode)}>{d}</button
+							>
+						{/each}
+					</span>
+				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>disabled</span>
 					<span data-uix-switch
@@ -332,8 +357,11 @@
 						>
 						<tr
 							><td class="name">orientation / dir</td><td>soma</td><td class="default"
-								>horizontal / ltr</td
-							><td>Layout and keyboard direction</td></tr
+								>horizontal / prefs.getDir()</td
+							><td
+								>Layout and keyboard direction. Omitting <code>dir</code> resolves it from
+								<code>uix.prefs.direction</code>, then <code>ltr</code>.</td
+							></tr
 						>
 						<tr
 							><td class="name">thumbLabels</td><td>soma</td><td class="default">—</td><td