@reshape-biotech/design-system 1.1.1 → 1.1.2

package/dist/components/activity/Activity.svelte

@@ -12,7 +12,9 @@
 		| 'start'
 		| 'stop'
 		| 'warning'
-		| 'success';
+		| 'success'
+		| 'export-succeeded'
+		| 'export-failed';
 
 	type Activity = {
 		activity_type?: string;
@@ -40,7 +42,9 @@
 		start: 'Play',
 		stop: 'Stop',
 		warning: 'Warning',
-		success: 'Check'
+		success: 'Check',
+		'export-succeeded': 'DownloadSimple',
+		'export-failed': 'DownloadSimple'
 	};
 
 	const ACTIVITY_COLOR: Record<ActivityIcon, IconColor> = {
@@ -53,7 +57,9 @@
 		start: 'icon-secondary',
 		stop: 'icon-secondary',
 		warning: 'icon-warning',
-		success: 'icon-secondary'
+		success: 'icon-secondary',
+		'export-succeeded': 'icon-secondary',
+		'export-failed': 'icon-danger'
 	};
 
 	const ACTIVITY_BACKGROUND: Record<ActivityIcon, BackgroundClass> = {
@@ -66,7 +72,9 @@
 		start: 'bg-neutral',
 		stop: 'bg-neutral',
 		warning: 'bg-warning',
-		success: 'bg-neutral'
+		success: 'bg-neutral',
+		'export-succeeded': 'bg-neutral',
+		'export-failed': 'bg-danger'
 	};
 
 	function formatDateTime(timestamp: string): string {

package/dist/components/activity/Activity.svelte.d.ts

@@ -1,4 +1,4 @@
-type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success';
+type ActivityIcon = 'add' | 'capture' | 'delete' | 'edit' | 'failed' | 'pause' | 'start' | 'stop' | 'warning' | 'success' | 'export-succeeded' | 'export-failed';
 type Activity = {
     activity_type?: string;
     icon: ActivityIcon;

package/dist/components/banner/Banner.svelte

@@ -29,7 +29,7 @@
 </script>
 
 {#if show}
-	<div class="rounded-lg bg-{color} flex h-11 w-full items-center justify-between p-3">
+	<div class="rounded-lg bg-{color} flex w-full items-center justify-between p-3">
 		<div class="inline-flex w-full items-center justify-start gap-3">
 			{#if icon}
 				<div class="flex size-5 items-center justify-center text-icon-{color} ">

package/dist/components/datepicker/DatePicker.stories.svelte

@@ -4,7 +4,6 @@
 	import { DateTime } from 'luxon';
 	import DatePicker from './DatePicker.svelte';
 	import Dropdown from '../dropdown/Dropdown.svelte';
-	import Button from '../button/Button.svelte';
 	import { Icon } from '../icons';
 
 	const { Story } = defineMeta({
@@ -19,6 +18,8 @@
 		}
 	});
 
+	const staticDate = DateTime.local(2023, 10, 15);
+
 	let selectedDate = $state<DateTime | undefined>(undefined);
 	let loggedDate = $state<string | undefined>(undefined);
 
@@ -51,7 +52,7 @@
 
 <Story name="Default" args={{ selectedDate: undefined }} />
 
-<Story name="With Selected Date" args={{ selectedDate: DateTime.local(2023, 10, 15) }} />
+<Story name="With Selected Date" args={{ selectedDate: staticDate }} />
 
 <Story name="With Date Change Handler" asChild>
 	<div class="p-4">
@@ -68,7 +69,7 @@
 
 <Story name="Month Navigation" asChild>
 	<div class="p-4">
-		<DatePicker selectedDate={DateTime.local()} />
+		<DatePicker selectedDate={staticDate} />
 		<div class="mt-4 text-sm text-tertiary">
 			<p>Click the arrow buttons to navigate between months</p>
 		</div>
@@ -117,11 +118,11 @@
 	<div class="flex flex-col gap-4 p-4 md:flex-row">
 		<div>
 			<h3 class="mb-2 text-sm font-medium">Start Date</h3>
-			<DatePicker selectedDate={DateTime.local().minus({ days: 7 })} />
+			<DatePicker selectedDate={staticDate.minus({ days: 7 })} />
 		</div>
 		<div>
 			<h3 class="mb-2 text-sm font-medium">End Date</h3>
-			<DatePicker selectedDate={DateTime.local()} />
+			<DatePicker selectedDate={staticDate} />
 		</div>
 	</div>
 </Story>

package/dist/components/datepicker/DatePicker.svelte

@@ -140,6 +140,7 @@
 											{#if dayOfMonth === currentDay && shownMonth === currentMonth && shownYear === currentYear && dayOfMonth != selectedDay}
 												<svg
 													class="current-date-indicator text-accent"
+													data-chromatic="ignore"
 													xmlns="http://www.w3.org/2000/svg"
 													width="4"
 													height="4"

package/dist/components/graphs/chart/Chart.stories.svelte

@@ -54,9 +54,6 @@
 <!-- Custom Size -->
 <Story name="Custom Size" args={{ options: baseOptions, ...defaultProps }} />
 
-<!-- Loading State -->
-<Story name="Loading State" args={{ options: baseOptions, ...defaultProps, loading: true }} />
-
 <!-- With Events -->
 <Story
 	name="With Click Events"

package/dist/components/graphs/line/LineChart.stories.svelte

@@ -51,19 +51,7 @@
 		/>
 	</div>
 </Story>
-<Story name="Loading" asChild>
-	<div class="h-[400px] w-full">
-		<LineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			loading
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
-</Story>
+
 <Story name="Large datasets with capture intervals" asChild>
 	<div class="h-[400px] w-full">
 		<LineChart

package/dist/components/graphs/matrix/Matrix.stories.svelte

@@ -81,20 +81,6 @@
 	</div>
 </Story>
 
-<Story name="Loading" asChild>
-	<div class="h-[500px] w-full">
-		<Matrix
-			data={confusionMatrix}
-			{rowLabels}
-			{colLabels}
-			loading={true}
-			invertYAxis={true}
-			xAxisName="Model count"
-			yAxisName="Manual count"
-		/>
-	</div>
-</Story>
-
 <Story name="Multiple Classes" asChild>
 	<div class="h-[500px] w-full">
 		<Matrix

package/dist/components/graphs/multiline/MultiLineChart.stories.svelte

@@ -1,8 +1,6 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	// Import the specific type to resolve mismatch
 	import type { ECElementEvent } from 'echarts';
-
 	import MultiLineChart from './MultiLineChart.svelte';
 
 	const { Story } = defineMeta({
@@ -16,40 +14,31 @@
 	const xAxisName = 'Time';
 	const yAxisName = 'Value';
 
-	const smooth = (data: number[]) =>
-		data.map((_, i, arr) => {
-			const windowSize = 2;
-			const start = Math.max(i - windowSize, 0);
-			const end = Math.min(i + windowSize, arr.length - 1);
-			const subset = arr.slice(start, end + 1);
-			return subset.reduce((sum, v) => sum + v, 0) / subset.length;
-		});
-
-	// Define static data arrays
-	const rawDataGroup1 = [
-		10, 12, 15, 13, 16, 18, 20, 22, 25, 23, 26, 28, 30, 32, 35, 33, 36, 38, 40, 42, 45, 43, 46, 48,
-		50
-	]; // length 25
-	const rawDataGroup2 = [
-		5, 7, 9, 8, 10, 12, 14, 13, 15, 17, 19, 18, 20, 22, 24, 23, 25, 27, 29, 28
-	]; // length 20
-	const rawDataGroup3 = [
-		20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66,
-		68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88
-	]; // length 35
+	const staticSmoothedData1 = [
+		12.333333333333334, 13.5, 14.8, 15.6, 17.4, 19.8, 22.2, 23.6, 25.2, 26.8, 29, 31.6, 33.8, 34.8,
+		36.4, 37.6, 40.2, 42.4, 44.4, 45.6, 46.4, 46.75, 48.25, 49, 49.333333333333336
+	];
+	const staticSmoothedData2 = [
+		7, 8, 8.8, 10.2, 11.8, 13.2, 14.8, 16.2, 17.6, 18.4, 19.2, 20.6, 22.4, 23.6, 24.8, 25.8, 27,
+		27.75, 28.5, 28.5
+	];
+	const staticSmoothedData3 = [
+		22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68,
+		70, 72, 74, 76, 78, 80, 82, 84, 86, 87, 88
+	];
 
 	const data = [
 		{
 			key: 'Group 1',
-			series: smooth(rawDataGroup1)
+			series: staticSmoothedData1
 		},
 		{
 			key: 'Group 2',
-			series: smooth(rawDataGroup2)
+			series: staticSmoothedData2
 		},
 		{
 			key: 'Group 3',
-			series: smooth(rawDataGroup3)
+			series: staticSmoothedData3
 		}
 	];
 
@@ -77,20 +66,6 @@
 	</div>
 </Story>
 
-<Story name="Loading" asChild>
-	<div class="h-[400px] w-full">
-		<MultiLineChart
-			{xAxisName}
-			{yAxisName}
-			{data}
-			loading
-			onitemclick={handleItemClick}
-			onmouseover={handleMouseOver}
-			onmouseout={handleMouseOut}
-		/>
-	</div>
-</Story>
-
 <Story name="With Area Gradient" asChild>
 	<div class="h-[400px] w-full">
 		<MultiLineChart

package/dist/components/graphs/scatterplot/Scatterplot.stories.svelte

@@ -20,7 +20,7 @@
 
 	const errorBarsData: DataPoint[] = data.map((d) => ({
 		...d,
-		error_value: Math.random() * 3
+		error_value: 1.5
 	}));
 
 	const lineData: [[number, number], [number, number]] = [

package/dist/components/icons/AnalysisIcon.svelte

@@ -9,9 +9,10 @@
 		withBackground?: boolean;
 		size?: 'sm' | 'md' | 'lg';
 		class?: string;
+		disabled?: boolean;
 	};
 
-	let { model, withBackground, size = 'md', class: className }: Props = $props();
+	let { model, withBackground, size = 'md', class: className, disabled = false }: Props = $props();
 
 	const getIconSize = () => {
 		switch (size) {
@@ -25,6 +26,10 @@
 	};
 
 	const backgroundColor = (analysis: SupportedAnalysisModelIcons) => {
+		if (disabled) {
+			return 'bg-neutral';
+		}
+
 		switch (analysis) {
 			case 'pipeline_halos':
 				return 'bg-warning';
@@ -46,6 +51,10 @@
 	};
 
 	const mapAnalysisToColor = (analysis: SupportedAnalysisModelIcons): IconColor => {
+		if (disabled) {
+			return 'secondary';
+		}
+
 		switch (analysis) {
 			case 'pipeline_halos':
 				return 'warning';

package/dist/components/icons/AnalysisIcon.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = {
     withBackground?: boolean;
     size?: 'sm' | 'md' | 'lg';
     class?: string;
+    disabled?: boolean;
 };
 declare const AnalysisIcon: import("svelte").Component<Props, {}, "">;
 type AnalysisIcon = ReturnType<typeof AnalysisIcon>;

package/dist/components/icons/index.d.ts

@@ -2,7 +2,7 @@ import type { IconComponentProps } from 'phosphor-svelte';
 import type { Component } from 'svelte';
 import type { textColor } from './../../tokens';
 export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
-export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
+export type IconName = 'Aperture' | 'ArrowFatLineRight' | 'ArrowCounterClockwise' | 'ArrowRight' | 'ArrowUpRight' | 'ArrowUpLeft' | 'ArrowUUpLeft' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'BugBeetle' | 'Calendar' | 'CalendarBlank' | 'Camera' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'Dna' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'Link' | 'ListMagnifyingGlass' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'MicrosoftExcelLogo' | 'Moon' | 'Minus' | 'Palette' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealCheck' | 'RadioButton' | 'SealQuestion' | 'SealWarning' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SignIn' | 'SignOut' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'Target' | 'TestTube' | 'Trash' | 'TrashSimple' | 'TreeStructure' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
 export declare const iconMap: Record<IconName, PhosphorIconProps>;
 export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
 export type IconColor = keyof typeof textColor;

package/dist/components/icons/index.js

@@ -35,6 +35,7 @@ import Copy from 'phosphor-svelte/lib/Copy';
 import Crop from 'phosphor-svelte/lib/Crop';
 import Cube from 'phosphor-svelte/lib/Cube';
 import Database from 'phosphor-svelte/lib/Database';
+import Dna from 'phosphor-svelte/lib/Dna';
 import DotsThree from 'phosphor-svelte/lib/DotsThree';
 import DotsThreeOutlineVertical from 'phosphor-svelte/lib/DotsThreeOutlineVertical';
 import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
@@ -58,11 +59,14 @@ import House from 'phosphor-svelte/lib/House';
 import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
 import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
 import Info from 'phosphor-svelte/lib/Info';
+import Link from 'phosphor-svelte/lib/Link';
 import Lock from 'phosphor-svelte/lib/Lock';
 import LineSegments from 'phosphor-svelte/lib/LineSegments';
 import List from 'phosphor-svelte/lib/List';
+import ListMagnifyingGlass from 'phosphor-svelte/lib/ListMagnifyingGlass';
 import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
 import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
+import MicrosoftExcelLogo from 'phosphor-svelte/lib/MicrosoftExcelLogo';
 import Moon from 'phosphor-svelte/lib/Moon';
 import Minus from 'phosphor-svelte/lib/Minus';
 import Pause from 'phosphor-svelte/lib/Pause';
@@ -101,6 +105,7 @@ import Target from 'phosphor-svelte/lib/Target';
 import TestTube from 'phosphor-svelte/lib/TestTube';
 import Trash from 'phosphor-svelte/lib/Trash';
 import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
+import TreeStructure from 'phosphor-svelte/lib/TreeStructure';
 import UserCircle from 'phosphor-svelte/lib/UserCircle';
 import UserPlus from 'phosphor-svelte/lib/UserPlus';
 import Video from 'phosphor-svelte/lib/Video';
@@ -146,6 +151,7 @@ export const iconMap = {
     Crop,
     Cube,
     Database,
+    Dna,
     DotsThree,
     DotsThreeOutlineVertical,
     DownloadSimple,
@@ -172,8 +178,11 @@ export const iconMap = {
     Lock,
     LineSegments,
     List,
+    Link,
+    ListMagnifyingGlass,
     MagnifyingGlass,
     MegaphoneSimple,
+    MicrosoftExcelLogo,
     Moon,
     Minus,
     Palette,
@@ -212,6 +221,7 @@ export const iconMap = {
     TestTube,
     Trash,
     TrashSimple,
+    TreeStructure,
     UserCircle,
     UserPlus,
     Video,

package/dist/components/select-new/components/Group.svelte

@@ -8,16 +8,17 @@
 		label?: string;
 		children: Snippet;
 		class?: string;
+		contentClass?: string;
 	}
 
-	let { label, children, class: className, ...restProps }: Props = $props();
+	let { label, children, class: className, contentClass, ...restProps }: Props = $props();
 </script>
 
 <SelectPrimitive.Group class={className} {...restProps}>
 	{#if label}
 		<GroupHeading>{label}</GroupHeading>
 	{/if}
-	<div class="pl-2">
+	<div class={contentClass}>
 		{@render children()}
 	</div>
 </SelectPrimitive.Group>

package/dist/components/select-new/components/Group.svelte.d.ts

@@ -4,6 +4,7 @@ interface Props extends PrimitiveGroupProps {
     label?: string;
     children: Snippet;
     class?: string;
+    contentClass?: string;
 }
 declare const Group: import("svelte").Component<Props, {}, "">;
 type Group = ReturnType<typeof Group>;

package/dist/components/stepper/Stepper.stories.svelte

@@ -0,0 +1,243 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import * as Stepper from './index';
+	import StepperComponent from './components/stepper-root.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Design System/Stepper',
+		component: StepperComponent,
+		tags: ['autodocs'],
+		argTypes: {
+			class: { control: 'text', description: 'Additional CSS classes' },
+			currentStep: { control: 'text', description: 'The currently active step identifier' }
+		}
+	});
+</script>
+
+<Story name="Controlled by Root">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Stepper controlled by currentStep prop</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="2">
+					<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+					<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+					<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+					<Stepper.Step stepNumber="4">Review</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Non-Numeric Steps">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Stepper with Letter-based Steps</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="B">
+					<Stepper.Step stepNumber="A">Configure</Stepper.Step>
+					<Stepper.Step stepNumber="B">Process</Stepper.Step>
+					<Stepper.Step stepNumber="C">Complete</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="All States (Individually set)">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Individual Step States</h3>
+			<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Completed State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="completed" stepNumber="1">Configure experiment</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Active State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="active" stepNumber="2">Set run conditions</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Future State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root>
+							<Stepper.Step state="future" stepNumber="3">Approve plate maps</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Progress Examples">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Progress States</h3>
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Start State</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Mid Progress</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="3">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Almost Complete</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="4">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">All Complete</h4>
+					<div class="max-w-sm">
+						<!-- To show all as complete, set currentStep to a non-existent step after the last one -->
+						<Stepper.Root currentStep="5">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+							<Stepper.Step stepNumber="4">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Different Step Counts">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Various Step Configurations</h3>
+			<div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Two Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Setup</Stepper.Step>
+							<Stepper.Step stepNumber="2">Review</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Three Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure</Stepper.Step>
+							<Stepper.Step stepNumber="2">Process</Stepper.Step>
+							<Stepper.Step stepNumber="3">Complete</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Five Steps</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="3">
+							<Stepper.Step stepNumber="1">Initialize</Stepper.Step>
+							<Stepper.Step stepNumber="2">Configure</Stepper.Step>
+							<Stepper.Step stepNumber="3">Process</Stepper.Step>
+							<Stepper.Step stepNumber="4">Validate</Stepper.Step>
+							<Stepper.Step stepNumber="5">Complete</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Single Step</h4>
+					<div class="max-w-sm">
+						<Stepper.Root currentStep="1">
+							<Stepper.Step stepNumber="1">Single action step</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Custom Styling">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Custom Classes</h3>
+			<div class="max-w-sm">
+				<Stepper.Root currentStep="2" class="rounded-lg border bg-surface p-4">
+					<Stepper.Step stepNumber="1" class="font-bold">Configure experiment</Stepper.Step>
+					<Stepper.Step stepNumber="2" class="font-bold">Set run conditions</Stepper.Step>
+					<Stepper.Step stepNumber="3" class="font-bold">Approve plate maps</Stepper.Step>
+				</Stepper.Root>
+			</div>
+		</div>
+	</div>
+</Story>
+
+<Story name="Responsive Behavior">
+	<div class="space-y-8 p-4">
+		<div>
+			<h3 class="mb-4 text-lg font-medium">Text Truncation</h3>
+			<div class="space-y-6">
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Normal Width (224px - Figma spec)</h4>
+					<div class="w-56">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure experiment</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve plate maps</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Narrow Width (160px)</h4>
+					<div class="w-40">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1">Configure experiment parameters</Stepper.Step>
+							<Stepper.Step stepNumber="2">Set run conditions and parameters</Stepper.Step>
+							<Stepper.Step stepNumber="3">Approve all plate maps and configurations</Stepper.Step>
+						</Stepper.Root>
+					</div>
+				</div>
+				<div>
+					<h4 class="mb-2 text-sm font-medium text-secondary">Very Narrow Width (120px)</h4>
+					<div class="w-30">
+						<Stepper.Root currentStep="2">
+							<Stepper.Step stepNumber="1"
+								>Configure experiment parameters and settings</Stepper.Step
+							>
+							<Stepper.Step stepNumber="2">Set detailed run conditions and parameters</Stepper.Step>
+							<Stepper.Step stepNumber="3"
+								>Approve all plate maps and final configurations</Stepper.Step
+							>
+						</Stepper.Root>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</Story>

package/dist/components/stepper/Stepper.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import * as Stepper from './index';
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Stepper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Stepper = InstanceType<typeof Stepper>;
+export default Stepper;

package/dist/components/stepper/components/stepper-root.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setContext } from 'svelte';
+
+	interface Props {
+		children: Snippet;
+		class?: string;
+		currentStep?: string;
+	}
+
+	let { children, class: className = '', currentStep }: Props = $props();
+
+	setContext('STEPPER_CONTEXT', {
+		currentStep
+	});
+</script>
+
+<div class="flex w-full flex-col gap-3 {className}" role="progressbar">
+	{@render children()}
+</div>

package/dist/components/stepper/components/stepper-root.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    children: Snippet;
+    class?: string;
+    currentStep?: string;
+}
+declare const StepperRoot: import("svelte").Component<Props, {}, "">;
+type StepperRoot = ReturnType<typeof StepperRoot>;
+export default StepperRoot;

package/dist/components/stepper/components/stepper-step.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { getContext } from 'svelte';
+	import { Icon } from '../../icons/';
+	import type { StepState } from '../';
+
+	interface Props {
+		children: Snippet;
+		state?: StepState;
+		stepNumber: string;
+		class?: string;
+	}
+
+	let { children, state: stateProp, stepNumber, class: className = '' }: Props = $props();
+	const id = $props.id();
+
+	type StepperContext = {
+		currentStep: string;
+	};
+
+	const context = getContext<StepperContext | undefined>('STEPPER_CONTEXT');
+
+	const currentState = $derived.by(() => {
+		if (context && context.currentStep !== undefined) {
+			if (context.currentStep > stepNumber) {
+				return 'completed';
+			} else if (context.currentStep === stepNumber) {
+				return 'active';
+			} else {
+				return 'future';
+			}
+		}
+		return stateProp ?? 'future';
+	});
+
+	const stateVariants = {
+		completed: {
+			container: 'bg-transparent text-primary-inverse',
+			iconContainer: 'bg-primary ',
+			iconColor: 'text-surface',
+			labelColor: 'text-primary',
+			showIcon: true
+		},
+		active: {
+			container: 'bg-accent text-primary-inverse',
+			iconContainer: 'bg-primary ',
+			iconColor: 'text-surface',
+			labelColor: 'text-primary',
+			showIcon: false
+		},
+		future: {
+			container: 'bg-transparent',
+			iconContainer: 'bg-transparent border border-interactive',
+			iconColor: 'text-secondary',
+			labelColor: 'text-secondary',
+			showIcon: false
+		}
+	};
+
+	const variant = $derived(stateVariants[currentState]);
+</script>
+
+<div
+	{id}
+	class="relative flex items-center gap-3 rounded-lg px-2 py-3 {variant.container} {className}"
+	role="progressbar"
+	aria-valuenow={currentState === 'completed' ? 100 : currentState === 'active' ? 50 : 0}
+	aria-valuemin="0"
+	aria-valuemax="100"
+	aria-label="Step {stepNumber}"
+>
+	<div
+		class="flex h-6 w-6 items-center justify-center rounded-md {variant.iconContainer}"
+		aria-hidden="true"
+	>
+		{#if variant.showIcon}
+			<Icon iconName="Check" class="h-3 w-3 {variant.iconColor}" />
+		{:else}
+			<span class="text-xs font-medium leading-none {variant.iconColor}">
+				{stepNumber}
+			</span>
+		{/if}
+	</div>
+
+	<span class="text-sm font-medium leading-tight {variant.labelColor} flex-1 truncate">
+		{@render children()}
+	</span>
+</div>
+
+<style>
+	div[role='progressbar']:not(:last-child)::after {
+		content: '';
+		position: absolute;
+		width: 1px;
+		background-color: #12192a0d;
+		left: calc(0.5rem + 1.5rem / 2 - 1px / 2);
+		top: 2.25rem;
+		height: 2.25rem;
+	}
+</style>

package/dist/components/stepper/components/stepper-step.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { StepState } from '../';
+interface Props {
+    children: Snippet;
+    state?: StepState;
+    stepNumber: string;
+    class?: string;
+}
+declare const StepperStep: import("svelte").Component<Props, {}, "">;
+type StepperStep = ReturnType<typeof StepperStep>;
+export default StepperStep;

package/dist/components/stepper/index.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+export { default as Root } from './components/stepper-root.svelte';
+export { default as Step } from './components/stepper-step.svelte';
+export type StepState = 'completed' | 'active' | 'future';
+export interface StepperRootProps {
+    children: Snippet;
+    class?: string;
+    currentStep?: string;
+}
+export interface StepperStepProps {
+    children: Snippet;
+    state?: StepState;
+    stepNumber: string;
+    class?: string;
+}

package/dist/components/stepper/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './components/stepper-root.svelte';
+export { default as Step } from './components/stepper-step.svelte';

package/dist/index.d.ts

@@ -27,11 +27,13 @@ export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
+export * as SelectNew from './components/select-new/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';
 export * from './components/stat-card/';
 export * from './components/status-badge/';
+export * from './components/stepper/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';

package/dist/index.js

@@ -28,11 +28,13 @@ export * from './components/progress-circle/';
 export * from './components/required-status-indicator/';
 export * from './components/segmented-control-buttons/';
 export * from './components/select/';
+export * as SelectNew from './components/select-new/';
 export * from './components/skeleton-loader/';
 export * from './components/slider/';
 export * from './components/spinner/';
 export * from './components/stat-card/';
 export * from './components/status-badge/';
+export * from './components/stepper/';
 export * from './components/table/';
 export * from './components/tabs/';
 export * from './components/tag/';

package/dist/tailwind.preset.d.ts

@@ -45,18 +45,21 @@ declare const config: {
                         10: string;
                         25: string;
                         50: string;
+                        75: string;
                     };
                     4: {
                         default: string;
                         10: string;
                         25: string;
                         50: string;
+                        75: string;
                     };
                     5: {
                         default: string;
                         10: string;
                         25: string;
                         50: string;
+                        75: string;
                     };
                     6: string;
                 };

package/dist/tokens.d.ts

@@ -40,18 +40,21 @@ export declare const colors: {
             10: string;
             25: string;
             50: string;
+            75: string;
         };
         4: {
             default: string;
             10: string;
             25: string;
             50: string;
+            75: string;
         };
         5: {
             default: string;
             10: string;
             25: string;
             50: string;
+            75: string;
         };
         6: string;
     };
@@ -475,18 +478,21 @@ export declare const tokens: {
                 10: string;
                 25: string;
                 50: string;
+                75: string;
             };
             4: {
                 default: string;
                 10: string;
                 25: string;
                 50: string;
+                75: string;
             };
             5: {
                 default: string;
                 10: string;
                 25: string;
                 50: string;
+                75: string;
             };
             6: string;
         };

package/dist/tokens.js

@@ -35,9 +35,9 @@ export const colors = {
     periwinkle: {
         1: '#eeeefd',
         2: '#cbc9fa',
-        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480' },
-        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180' },
-        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80' },
+        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480', 75: '#8e8af4BF' },
+        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180', 75: '#7973f1BF' },
+        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80', 75: '#5750eeBF' },
         6: '#4741c1'
     },
     orange: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "1.1.1",
+	"version": "1.1.2",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",