@insymetri/styleguide 0.1.92 → 0.1.94

package/dist/IIAccordion/IIAccordion.svelte

@@ -9,6 +9,8 @@
 		trigger: Snippet<[{expanded: boolean}]>
 		children: Snippet
 		disabled?: boolean
+		/** `card` (default) frames each item; `plain` separates them with a hairline. */
+		variant?: 'card' | 'plain'
 		class?: string
 	}
 
@@ -18,6 +20,7 @@
 		trigger,
 		children,
 		disabled = false,
+		variant = 'card',
 		class: className,
 	}: Props = $props()
 
@@ -28,7 +31,14 @@
 	}
 </script>
 
-<div class={cn('border border-primary rounded-10 overflow-hidden', className)}>
+<div
+	class={cn(
+		variant === 'plain'
+			? 'border-b border-subtle last:border-b-0'
+			: 'border border-primary rounded-10 overflow-hidden',
+		className
+	)}
+>
 	<button
 		type="button"
 		class="flex items-center gap-8 w-full bg-transparent border-none px-16 py-12 cursor-default text-left font-inherit hover:bg-background"
@@ -47,7 +57,7 @@
 		</div>
 	</button>
 	{#if expanded}
-		<div class="border-t border-primary">
+		<div class={variant === 'plain' ? '' : 'border-t border-primary'}>
 			{@render children()}
 		</div>
 	{/if}

package/dist/IIAccordion/IIAccordion.svelte.d.ts

@@ -7,6 +7,8 @@ type Props = {
     }]>;
     children: Snippet;
     disabled?: boolean;
+    /** `card` (default) frames each item; `plain` separates them with a hairline. */
+    variant?: 'card' | 'plain';
     class?: string;
 };
 declare const IIAccordion: import("svelte").Component<Props, {}, "expanded">;

package/dist/IIFormField/IIFormField.svelte

@@ -1,18 +1,28 @@
 <script lang="ts">
 	import type {Snippet} from 'svelte'
+	import {cn} from '../utils/cn'
 
 	type Props = {
 		label?: string
 		id?: string
-		children: Snippet
+		/** Control on the label's own line, right-aligned. Ignored without a `label`. */
+		labelAction?: Snippet
+		class?: string
 	}
 
-	let {label, id, children}: Props = $props()
+	let {label, id, labelAction, children, class: className}: Props & {children: Snippet} = $props()
 </script>
 
-<div class="mb-16 last:mb-0">
+<div class={cn('mb-16 last:mb-0', className)}>
 	{#if label}
-		<label class="block text-small-emphasis text-body mb-8" for={id}>{label}</label>
+		{#if labelAction}
+			<div class="mb-8 flex items-center justify-between gap-10">
+				<label class="block text-small-emphasis text-body" for={id}>{label}</label>
+				{@render labelAction()}
+			</div>
+		{:else}
+			<label class="block text-small-emphasis text-body mb-8" for={id}>{label}</label>
+		{/if}
 	{/if}
 	{@render children()}
 </div>

package/dist/IIFormField/IIFormField.svelte.d.ts

@@ -2,8 +2,13 @@ import type { Snippet } from 'svelte';
 type Props = {
     label?: string;
     id?: string;
+    /** Control on the label's own line, right-aligned. Ignored without a `label`. */
+    labelAction?: Snippet;
+    class?: string;
+};
+type $$ComponentProps = Props & {
     children: Snippet;
 };
-declare const IIFormField: import("svelte").Component<Props, {}, "">;
+declare const IIFormField: import("svelte").Component<$$ComponentProps, {}, "">;
 type IIFormField = ReturnType<typeof IIFormField>;
 export default IIFormField;

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/dist/IITable/IITable.svelte

@@ -41,6 +41,8 @@
 		stickyHeader?: boolean
 		/** `sm` → text-small (default), `md` → text-default. */
 		size?: 'sm' | 'md'
+		/** `card` (default) frames the table; `plain` drops the frame and header fill for hairline rules. */
+		variant?: 'card' | 'plain'
 		class?: string
 	}
 
@@ -58,31 +60,45 @@
 		isExpanded,
 		stickyHeader = false,
 		size = 'sm',
+		variant = 'card',
 		class: className,
 	}: Props = $props()
 
 	const alignClass = {left: 'text-left', right: 'text-right', center: 'text-center'} as const
 	const cellText = $derived(size === 'sm' ? 'text-small' : 'text-default')
 	const interactive = $derived(!!onRowClick)
+	const plain = $derived(variant === 'plain')
+
+	const containerClass = $derived(
+		plain ? 'overflow-x-auto' : 'bg-surface-raised border border-subtle rounded-12 overflow-x-auto overflow-y-hidden'
+	)
+	const headClass = $derived(plain ? 'border-b border-subtle' : 'bg-background border-b border-primary')
+	const headCellClass = $derived(
+		plain
+			? 'px-12 pb-8 text-micro text-tertiary uppercase'
+			: 'px-14 py-9 text-tiny-emphasis text-tertiary uppercase tracking-wide'
+	)
+	const bodyCellClass = $derived(plain ? 'px-12 py-11' : 'px-14 py-10')
+	const rowRuleClass = $derived(plain ? 'border-subtle' : 'border-primary')
 
 	function cellClass(col: Column, row: T): string {
 		return typeof col.class === 'function' ? col.class(row) : (col.class ?? '')
 	}
 </script>
 
-<div class={cn('bg-surface-raised border border-subtle rounded-12 overflow-x-auto overflow-y-hidden', className)}>
+<div class={cn(containerClass, className)}>
 	{#if children}
 		<table class="w-full border-collapse">
 			{@render children()}
 		</table>
 	{:else}
 		<table class="w-full border-collapse">
-			<thead class={cn('bg-background border-b border-primary', stickyHeader && 'sticky top-0 z-1')}>
+			<thead class={cn(headClass, stickyHeader && 'sticky top-0 z-1')}>
 				<tr>
 					{#each columns as col (col.key)}
 						<th
 							class={cn(
-								'px-14 py-9 text-tiny-emphasis text-tertiary uppercase tracking-wide',
+								headCellClass,
 								alignClass[col.align ?? 'left'],
 								col.width,
 								col.headerClass
@@ -108,7 +124,8 @@
 					{#each rows as row (rowKey?.(row) ?? row)}
 						<tr
 							class={cn(
-								'border-b border-primary last:border-b-0',
+								'border-b last:border-b-0',
+							rowRuleClass,
 								interactive && 'cursor-pointer hover:bg-background',
 								rowClass?.(row)
 							)}
@@ -119,7 +136,8 @@
 							{#each columns as col (col.key)}
 								<td
 									class={cn(
-										'px-14 py-10 text-body',
+										bodyCellClass,
+								'text-body',
 										cellText,
 										alignClass[col.align ?? 'left'],
 										col.width,
@@ -131,7 +149,7 @@
 							{/each}
 						</tr>
 						{#if expandedRow && isExpanded?.(row)}
-							<tr class="border-b border-primary last:border-b-0 bg-background">
+							<tr class={cn('border-b last:border-b-0 bg-background', rowRuleClass)}>
 								<td colspan={columns.length} class="px-16 py-12">
 									{@render expandedRow(row)}
 								</td>

package/dist/IITable/IITable.svelte.d.ts

@@ -36,6 +36,8 @@ declare function $$render<T>(): {
         stickyHeader?: boolean;
         /** `sm` → text-small (default), `md` → text-default. */
         size?: "sm" | "md";
+        /** `card` (default) frames the table; `plain` drops the frame and header fill for hairline rules. */
+        variant?: "card" | "plain";
         class?: string;
     };
     exports: {};

package/package.json

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