@insymetri/styleguide 0.1.92 → 0.1.93

package/dist/IISegmentedControl/IISegmentedControl.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import {untrack} from 'svelte'
 	import {cn} from '../utils/cn'
 	import {useDensity} from '../density'
 
@@ -52,6 +53,41 @@
 
 	const activeIndex = $derived(items.findIndex(item => item.value === value))
 
+	/* The thumb stays mounted even when nothing is selected so it can animate in and
+	   out. `thumbIndex` remembers where it last was, so clearing the value fades it
+	   out under the segment that was selected instead of yanking it back to the first. */
+	let thumbIndex = $state(untrack(() => Math.max(activeIndex, 0)))
+	let thumbVisible = $state(untrack(() => activeIndex >= 0))
+	let sliding = $state(false)
+	/* Seeded with the mount-time index on purpose: the effect below compares against
+	   it and bails on its first run, so a control that renders already-selected shows
+	   its thumb in place rather than animating it in on load. */
+	let prevIndex = untrack(() => activeIndex)
+
+	$effect(() => {
+		const next = activeIndex
+		if (next === prevIndex) return
+		const appearing = prevIndex < 0
+		prevIndex = next
+
+		if (next < 0) {
+			sliding = false
+			thumbVisible = false
+			return
+		}
+
+		/* Appearing from nothing must not transition `left`: a thumb that slides in
+		   from segment 0 reads as "it was always there, just hidden". Dropping the
+		   slide lets it grow into place under the segment that was actually picked,
+		   and the scale/opacity transition carries the motion instead. */
+		sliding = !appearing
+		thumbIndex = next
+		thumbVisible = true
+	})
+
+	// Guards against `items` shrinking underneath a remembered index.
+	const thumbPosition = $derived(Math.min(thumbIndex, Math.max(items.length - 1, 0)))
+
 	function select(v: string) {
 		value = v
 		onValueChange?.(v)
@@ -113,17 +149,19 @@
 	style="padding: {thumbInset[density.value]}px; grid-template-columns: repeat({items.length}, 1fr);"
 >
 	<!-- Sliding thumb -->
-	{#if activeIndex >= 0}
+	{#if items.length > 0}
 		<div
-			class="absolute"
+			class="ii-seg-thumb absolute"
+			class:is-visible={thumbVisible}
+			class:is-sliding={sliding}
+			aria-hidden="true"
 			style:border-radius="calc(var(--ii-radius-control) - {thumbInset[density.value]}px)"
 			style="
 				top: {thumbInset[density.value]}px;
 				bottom: {thumbInset[density.value]}px;
-				left: calc({thumbInset[density.value]}px + {activeIndex} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
+				left: calc({thumbInset[density.value]}px + {thumbPosition} * (100% - {thumbInset[density.value] * 2}px) / {items.length});
 				width: calc((100% - {thumbInset[density.value] * 2}px) / {items.length});
-				background: {getThumbColor(items[activeIndex])};
-				transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+				background: {getThumbColor(items[thumbPosition])};
 			"
 		></div>
 	{/if}
@@ -147,3 +185,52 @@
 		</button>
 	{/each}
 </div>
+
+<style>
+	/* Resting state is hidden-and-small, so the thumb has somewhere to grow from.
+	   Also governs the exit: a transition uses the curve declared on the state it is
+	   travelling *to*, so this rule is what plays when the selection is cleared —
+	   short and ease-in, because leaving should not ask for attention. */
+	.ii-seg-thumb {
+		opacity: 0;
+		transform: scale(0.82);
+		pointer-events: none;
+		transition:
+			opacity 120ms ease-in,
+			transform 180ms ease-in;
+	}
+
+	/* The entrance. The back-out curve grows the thumb past its resting size — about
+	   1.02 at the peak — before settling, which is the gesture iOS and macOS
+	   segmented controls use to say "this materialised here" rather than "this
+	   blinked on". At these sizes the overshoot is barely a pixel; it reads as
+	   liveliness in the deceleration, not as a bounce. Opacity finishes well before
+	   the scale so the tail of the motion is pure settle, not fade. */
+	.ii-seg-thumb.is-visible {
+		opacity: 1;
+		transform: scale(1);
+		transition:
+			opacity 140ms ease-out,
+			transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
+
+	/* `left` only animates once the thumb is already on screen and moving between
+	   segments — see the effect above. Must stay after `.is-visible`: equal
+	   specificity, so source order decides. */
+	.ii-seg-thumb.is-sliding {
+		transition:
+			opacity 140ms ease-out,
+			transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
+			background-color 200ms ease,
+			left 300ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.ii-seg-thumb,
+		.ii-seg-thumb.is-visible,
+		.ii-seg-thumb.is-sliding {
+			transform: none;
+			transition: opacity 100ms linear;
+		}
+	}
+</style>

package/dist/IISegmentedControl/IISegmentedControlStories.svelte

@@ -10,6 +10,8 @@
 
 	let fullWidthMode = $state('allow')
 	let fullWidthThree = $state('monthly')
+
+	let emptyStart = $state('')
 </script>
 
 <div class="flex flex-col gap-32">
@@ -151,6 +153,31 @@
 		/>
 	</section>
 
+	<!-- Animating in from empty -->
+	<section>
+		<h2 class="text-default-emphasis text-primary mb-8">Animating in from empty</h2>
+		<p class="text-small text-secondary mb-12">
+			With no selection there is no thumb to slide, so picking a segment scales the thumb up
+			into place with a small overshoot instead of flashing it on. Clearing fades it back out
+			under the segment it was on. Moving between segments still slides.
+		</p>
+		<IISegmentedControl
+			items={[
+				{label: 'Monthly', value: 'monthly'},
+				{label: 'Quarterly', value: 'quarterly'},
+				{label: 'Annual', value: 'annual'},
+			]}
+			bind:value={emptyStart}
+		/>
+		<button
+			type="button"
+			class="mt-12 px-12 py-6 bg-button-primary text-button-primary-text rounded-control"
+			onclick={() => (emptyStart = '')}
+		>
+			Clear selection
+		</button>
+	</section>
+
 	<!-- Density-responsive -->
 	<section>
 		<h2 class="text-default-emphasis text-primary mb-8">Density Responsive</h2>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@insymetri/styleguide",
-	"version": "0.1.92",
+	"version": "0.1.93",
 	"description": "Insymetri shared UI component library built with Svelte 5",
 	"type": "module",
 	"scripts": {