diff --git a/src/uix/eidos/components/carousel/carousel.css b/src/uix/eidos/components/carousel/carousel.css
index 16958dc51..368b9ab43 100644
--- a/src/uix/eidos/components/carousel/carousel.css
+++ b/src/uix/eidos/components/carousel/carousel.css
@@ -55,13 +55,28 @@
  * level needs `100%` (or the token at the root) so the basis-100% along
  * the column main axis resolves to viewport block-size, not content.
  */
+/*
+ * Vertical layout flips the root flex axis to row, putting the viewport
+ * on the left (taking the available inline space) and the indicator
+ * group on the right as a narrow column of dots. This matches the
+ * common pattern in Mantine / ark-ui vertical carousels and stops the
+ * indicator-group from claiming the full inline width as a stretch
+ * child of a column flex container.
+ *
+ * The viewport / item-group / item each take 100% along the block axis
+ * so slide basis resolves to the bounded block-size.
+ */
 [data-carousel][data-orientation='vertical'] {
+	flex-direction: row;
+	align-items: stretch;
 	block-size: var(--_carousel-vertical-block-size);
 }
 
 [data-carousel][data-orientation='vertical'] [data-carousel-viewport] {
+	flex: 1 1 auto;
 	block-size: 100%;
 	min-block-size: 0;
+	min-inline-size: 0;
 }
 
 [data-carousel][data-orientation='vertical'] [data-carousel-item-group] {
@@ -75,6 +90,13 @@
 	block-size: 100%;
 }
 
+/* Indicator group becomes a narrow auto-sized column on the right. */
+[data-carousel][data-orientation='vertical'] [data-carousel-indicator-group] {
+	flex: 0 0 auto;
+	inline-size: max-content;
+	align-self: center;
+}
+
 [data-carousel][data-block] {
 	inline-size: 100%;
 }
diff --git a/web/routes/uix/components/carousel/+page.svelte b/web/routes/uix/components/carousel/+page.svelte
index 5563e5e02..aa1655fdd 100644
--- a/web/routes/uix/components/carousel/+page.svelte
+++ b/web/routes/uix/components/carousel/+page.svelte
@@ -43,16 +43,14 @@
 
 	let disabled = $state(false);
 
-	// i18n — `dir` controls the keyboard arrow semantics (RTL swaps
-	// next/prev) AND flips the translation sign so horizontal advance
-	// follows reading direction. `locale` is forwarded for label
-	// formatting hooks (consumers using lang-aware aria-labels).
-	type DirCtl = 'auto' | 'ltr' | 'rtl';
-	let dirCtl = $state<DirCtl>('auto');
+	// `dir` controls keyboard arrow semantics (RTL swaps next/prev) and
+	// flips the translation sign so horizontal advance follows reading
+	// direction. `locale` is forwarded for downstream lang-aware behavior
+	// (announcer text, future label formatting).
+	type Direction = 'ltr' | 'rtl';
+	let dir = $state<Direction>('ltr');
 	let locale = $state('en-US');
 
-	const dir = $derived(dirCtl === 'auto' ? undefined : dirCtl);
-
 	let size = $state<CarouselSize>('md');
 	let variant = $state<CarouselVariant>('surface');
 	let color = $state<CarouselColor>('primary');
@@ -137,7 +135,6 @@
 			autoplay && stopOnLastSnap && '  stopOnLastSnap',
 			disabled && '  disabled',
 			dir && `  dir="${dir}"`,
-			locale !== 'en-US' && `  locale="${locale}"`,
 			'>',
 			'  <Carousel.Viewport>',
 			'    <Carousel.ItemGroup>',
@@ -460,24 +457,21 @@
 
 			<div data-uix-subsection-head>
 				<span data-uix-layer-badge="soma">soma</span> i18n
-				<span style="margin-inline-start: auto; color: var(--color-content-secondary); font-size: var(--font-size-xs);">
-					<code>dir</code> flips arrow-key + drag semantics for horizontal RTL; <code>locale</code> is forwarded for downstream label formatting.
-				</span>
 			</div>
 			<div data-uix-controls>
 				<label data-uix-control>
-					<span data-uix-control-label>dir <span data-uix-control-hint>{dir ?? 'inherits app pref'}</span></span>
-					<span data-uix-chips role="radiogroup">
-						{#each ['auto', 'ltr', 'rtl'] as d (d)}
-							<button data-uix-chip data-active={dirCtl === d} onclick={() => (dirCtl = d as DirCtl)}>{d}</button>
-						{/each}
-					</span>
+					<span data-uix-control-label>locale</span>
+					<select bind:value={locale}>
+						<option value="en-US">en-US</option>
+						<option value="es-ES">es-ES</option>
+						<option value="fr-FR">fr-FR</option>
+					</select>
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>locale</span>
+					<span data-uix-control-label>direction</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['en-US', 'es-ES', 'ar-EG', 'he-IL', 'ja-JP'] as l (l)}
-							<button data-uix-chip data-active={locale === l} onclick={() => (locale = l)}>{l}</button>
+						{#each ['ltr', 'rtl'] as value (value)}
+							<button data-uix-chip data-active={dir === value} onclick={() => (dir = value as Direction)}>{value}</button>
 						{/each}
 					</span>
 				</label>
diff --git a/web/routes/uix/components/range-calendar/+page.svelte b/web/routes/uix/components/range-calendar/+page.svelte
index 1dd0c4995..b931e2b90 100644
--- a/web/routes/uix/components/range-calendar/+page.svelte
+++ b/web/routes/uix/components/range-calendar/+page.svelte
@@ -55,12 +55,8 @@
 	let readonly = $state(false);
 	let weekStartsOn = $state<WeekStartControl>('1');
 	let locale = $state('en-US');
-	// `dir` reflows the calendar header + weekday strip + day grid. `auto`
-	// inherits the app preference set in the topbar; explicit `ltr`/`rtl`
-	// overrides it per-instance.
-	type DirCtl = 'auto' | 'ltr' | 'rtl';
-	let dirCtl = $state<DirCtl>('auto');
-	const dir = $derived(dirCtl === 'auto' ? undefined : dirCtl);
+	type Direction = 'ltr' | 'rtl';
+	let dir = $state<Direction>('ltr');
 	let size = $state<RangeCalendarSize>('md');
 	let variant = $state<RangeCalendarVariant>('surface');
 	let color = $state<RangeCalendarColor>('primary');
@@ -464,22 +460,22 @@
 					</span>
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>dir <span data-uix-control-hint>{dir ?? 'inherits app pref'}</span></span>
-					<span data-uix-chips role="radiogroup">
-						{#each ['auto', 'ltr', 'rtl'] as d (d)}
-							<button data-uix-chip data-active={dirCtl === d} onclick={() => (dirCtl = d as DirCtl)}>{d}</button>
-						{/each}
-					</span>
+					<span data-uix-control-label>locale</span>
+					<select bind:value={locale}>
+						<option value="en-US">en-US</option>
+						<option value="es-ES">es-ES</option>
+						<option value="fr-FR">fr-FR</option>
+					</select>
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>locale</span>
+					<span data-uix-control-label>direction</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['en-US', 'es-ES', 'ar-EG', 'he-IL', 'ja-JP'] as l (l)}
-							<button data-uix-chip data-active={locale === l} onclick={() => (locale = l)}>{l}</button>
+						{#each ['ltr', 'rtl'] as value (value)}
+							<button data-uix-chip data-active={dir === value} onclick={() => (dir = value as Direction)}>{value}</button>
 						{/each}
 					</span>
 				</label>
-				<label data-uix-control>
+					<label data-uix-control>
 					<span data-uix-control-label>disabled</span>
 					<span data-uix-switch>
 						<input type="checkbox" bind:checked={disabled} />
diff --git a/web/routes/uix/components/time-range-field/+page.svelte b/web/routes/uix/components/time-range-field/+page.svelte
index 58e59296f..f6a9b5051 100644
--- a/web/routes/uix/components/time-range-field/+page.svelte
+++ b/web/routes/uix/components/time-range-field/+page.svelte
@@ -264,17 +264,17 @@
 				</label>
 				<label data-uix-control>
 					<span data-uix-control-label>locale</span>
-					<span data-uix-chips role="radiogroup">
-						{#each ['en-US', 'en-GB', 'es-ES', 'de-DE', 'fr-FR', 'ja-JP'] as l (l)}
-							<button data-uix-chip data-active={locale === l} onclick={() => (locale = l)}>{l}</button>
-						{/each}
-					</span>
+					<select bind:value={locale}>
+						<option value="en-US">en-US</option>
+						<option value="es-ES">es-ES</option>
+						<option value="fr-FR">fr-FR</option>
+					</select>
 				</label>
 				<label data-uix-control>
-					<span data-uix-control-label>dir</span>
+					<span data-uix-control-label>direction</span>
 					<span data-uix-chips role="radiogroup">
-						{#each ['ltr', 'rtl'] as d (d)}
-							<button data-uix-chip data-active={dir === d} onclick={() => (dir = d as Direction)}>{d}</button>
+						{#each ['ltr', 'rtl'] as value (value)}
+							<button data-uix-chip data-active={dir === value} onclick={() => (dir = value as Direction)}>{value}</button>
 						{/each}
 					</span>
 				</label>