@iroco/ui 1.8.1 → 1.10.0

package/dist/NumberInput.svelte

@@ -21,7 +21,7 @@
 
 <style>.iroco-ui-form input,
 .iroco-ui-form textarea {
-  outline-color: var(--color-secondary);
+  outline-color: var(--color-border);
   outline-style: ridge;
   text-decoration: none;
   font-size: 14px;

package/dist/RadioButton.svelte

@@ -17,7 +17,7 @@
 
 <style>.iroco-ui-form input,
 .iroco-ui-form textarea {
-  outline-color: var(--color-secondary);
+  outline-color: var(--color-border);
   outline-style: ridge;
   text-decoration: none;
   font-size: 14px;

package/dist/Steps.stories.svelte

@@ -0,0 +1,23 @@
+<script module lang="ts">
+	import { Steps } from './index';
+
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
+
+	const { Story } = defineMeta({
+		title: 'Iroco-UI/Components/Steps',
+		component: Steps,
+		args: {
+			steps: [{ text: 'Foo' }, { text: 'Bar' }, { text: 'Baz' }]
+		}
+	});
+</script>
+
+<script lang="ts">
+	setTemplate(template);
+</script>
+
+{#snippet template({ ...args })}
+	<Steps {...args} />
+{/snippet}
+
+<Story name="Default" />

package/dist/Steps.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import { Steps } 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 Steps: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Steps = InstanceType<typeof Steps>;
+export default Steps;

package/dist/TextInput.svelte

@@ -79,7 +79,7 @@
 
 <style>.iroco-ui-form input,
 .iroco-ui-form textarea {
-  outline-color: var(--color-secondary);
+  outline-color: var(--color-border);
   outline-style: ridge;
   text-decoration: none;
   font-size: 14px;

package/dist/index.d.ts

@@ -19,4 +19,5 @@ export { default as NumberInput } from './NumberInput.svelte';
 export { default as RadioButton } from './RadioButton.svelte';
 export { default as SlottedComponentWrapper } from './SlottedComponentWrapper.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { Steps } from './svelte-steps';
 export * from './definition';

package/dist/index.js

@@ -19,4 +19,5 @@ export { default as NumberInput } from './NumberInput.svelte';
 export { default as RadioButton } from './RadioButton.svelte';
 export { default as SlottedComponentWrapper } from './SlottedComponentWrapper.svelte';
 export { default as TextInput } from './TextInput.svelte';
+export { Steps } from './svelte-steps';
 export * from './definition';

package/dist/scss/forms.scss

@@ -1,7 +1,7 @@
 .iroco-ui-form {
 	input,
 	textarea {
-		outline-color: var(--color-secondary);
+		outline-color: var(--color-border);
 		outline-style: ridge;
 		text-decoration: none;
 		font-size: 14px;

package/dist/svelte-steps/Alert.svelte

@@ -0,0 +1,29 @@
+<!--
+  Copyright (c) 2021, Jingshao Chen. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be found
+  in the LICENSE file.
+
+  https://github.com/shaozi/svelte-steps
+-->
+<script>
+	export let stroke = 'currentColor';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+	fill="none"
+	{stroke}
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="feather feather-alert-triangle"
+>
+	<path
+		d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+	/>
+	<line x1="12" y1="9" x2="12" y2="13" />
+	<line x1="12" y1="17" x2="12.01" y2="17" />
+</svg>

package/dist/svelte-steps/Alert.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Alert;
+type Alert = SvelteComponent<{
+    stroke?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Alert: $$__sveltets_2_IsomorphicComponent<{
+    stroke?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte-steps/Check.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Check;
+type Check = SvelteComponent<{
+    stroke?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Check: $$__sveltets_2_IsomorphicComponent<{
+    stroke?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte-steps/LICENSE

@@ -0,0 +1,27 @@
+BSD 2-Clause License
+
+Copyright (c) 2025, Iroco
+Copyright (c) 2021, Jingshao Chen
+
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/dist/svelte-steps/README.md

@@ -0,0 +1,190 @@
+# 🐾 Svelte steps component 🐾
+
+## Forked by Iroco
+
+Forked from https://github.com/shaozi/svelte-steps at commit `6fef9940e354ced639bba5c5f72e8408b6bd9469`
+
+As Iroco Team, we forked this project since it did not evolve since 2022.
+
+We plan to improve the following :
+
+- [x] Adapt npm package to our organization
+- [x] Keep credits to original author
+- [ ] Release with `release-it`
+- [ ] Add credit ourselves when modifying
+- [ ] Update to Svelte 5 peer dependencies
+- [ ] Update to node lts
+- [ ] Update vulnerable dependencies
+- [ ] Fix Svelte 5 warning : `WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.`
+- [ ] Web accessibility: Treat as `role="progress"` aria
+
+## Previous task list
+
+A customizable step component written in Svelte!
+
+- [x] Bootstrap color theme
+- [x] Icons
+- [x] Animate progress
+- [x] Horizontal and vertical
+- [x] Dumpbells and bar
+- [x] Custom size
+- [x] Custom color
+- [x] Custom font
+- [x] Circle, square and between
+- [x] Left and right
+
+![demo](static/demo.png)
+
+## Installation
+
+```sh
+npm install --saveDev svelte-steps
+```
+
+## Example Usages
+
+Clone this project and run it. Itself is an example. Take a look at the homepage [here](https://svelte-steps.web.app).
+The source file of the demo is at [src/routes/index.svelte](src/routes/index.svelte)
+
+### Basic Usage
+
+```javascript
+<script>
+    import { Steps } from 'svelte-steps';
+    let steps = [
+        { text: 'step one' },
+        { text: 'step two' },
+        { text: 'the last step' }
+    ];
+</script>
+
+<Steps {steps} />
+```
+
+### Vertical Steps
+
+> NOTE: needs svelte version 3.46.3 or newer
+
+Add `vertical` props to `Steps` component.
+
+```javascript
+<Steps vertical {steps} />
+```
+
+You can also use `reverse` to put text label to the left.
+
+```javascript
+<Steps vertical reverse {steps}>
+```
+
+### With Icons
+
+```javascript
+let steps = [
+	{ text: 'step one', icon: IconMoney },
+	{ text: 'step two', icon: IconPaperClip },
+	{ text: 'the last step', icon: IconPerson }
+];
+```
+
+### Square Steps
+
+```javascript
+<Steps {steps} borderRadius="0"/>
+```
+
+### Custom Color
+
+```javascript
+<Steps {steps} primary="#ff0000" secondary="#ffaaaa"/>
+```
+
+### Custom Size
+
+```javascript
+<Steps {steps} size="2rem" line="2px"/>
+```
+
+### No Text
+
+```javascript
+let steps = [{ icon: IconMoney }, { icon: IconPaperClip }, { icon: IconPerson }];
+```
+
+### Bar
+
+```javascript
+<Steps {steps} size="2rem" line="2rem"/>
+```
+
+### Use alert and customize icons (**NEW**)
+
+````javascript
+import Escalation from './YourEscalation.svelt'
+<script>
+    let steps = [
+        { text: 'step one' , alert: true},
+        { text: 'step two' },
+        { text: 'the last step' }
+    ];
+</script>
+<Steps {steps} alertColor={'#ff00ff'} alertIcon={Escalation} checkIcon={null}>
+```
+
+### Events
+
+```javascript
+<Steps
+    {steps}
+    {current}
+    on:click={(e) => {
+        last = e.detail.last;
+        current = e.detail.current;
+    }}
+/>
+````
+
+## Use with Bootstrap
+
+It by default uses `--bs-primary`, `--bs-secondary`, `--bs-danger`, `--bs-light`, and `--bs-dark` css variables if they are defined. These css vars are defined in bootstrap css:
+
+```html
+<!-- Include Bootstrap css in app.html <head></head> -->
+<link
+	href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+	rel="stylesheet"
+	integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+	crossorigin="anonymous"
+/>
+```
+
+## Props
+
+- `steps`:
+  - Array of object. Length has to be more than 1
+  - Required
+  - Each item is a step object that can have:
+    - `text`: The text displayed below each steps.
+    - `icon`: A svelte component displayed inside each steps.
+    - `iconProps`: An object that will be passed as props to the `icon` component.
+- `current`: current step index. Number. Default `0`
+- `size`: size of the step buttons. String. Default `"3rem"` (`"2rem"` for vertical steps)
+- `line`: thickness of the connecting lines between the step buttons. String. Default `"0.3rem"` (`"0.15rem"` for vertical steps)
+- `primary`: Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'`
+- `secondary`: Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'`
+- `light`: Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'`
+- `dark`: Secondary color of text color in future steps. String. Default `'var(--bs-dark, black)'`
+- `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle)
+- `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"`
+- `vertical`: Vertical steps. Default `false`
+- `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false`
+- `clickable`: When set to `false`, Clicking icons and labels will not change step. You have to change `current` to change step. Default `true`
+- `checkIcon`: User defined check icon for passed steps. If not specified, use the default check mark. Set to `null` if you don't want a check icon.
+- `alertIcon`: User defined alert icon for passed steps that has truthful `alert` property. If not specified, use the default alert icon. Set to `null` if you don't want an alert icon.
+- `alertColor`: User defined bg color for passed steps that has truthful `alert` property. Default 'var(--bs-danger, #dc3545)'
+
+## Events
+
+- `on:click(e)`: click event. Event detail object has two keys:
+  - `e.detail.current`: the index of current step
+  - `e.detail.last`: the index of last step

package/dist/svelte-steps/Steps.svelte

@@ -0,0 +1,347 @@
+<!--
+
+  @component 
+
+  # svelte-steps
+
+  ## props 
+    
+  - `steps`:
+    - Array of object. Length has to be more than 1
+    - Required
+    - Each item is a step object that can have:
+      - `text`: The text displayed below each steps.
+      - `icon`: A svelte component displayed inside each steps.
+      - `iconProps`: An object that will be passed as props to the `icon` component.
+  - `current`: current step index. Number. Default `0`
+  - `size`: size of the step buttons. String. Default `"3rem"`
+  - `line`: thickness of the connecting lines between the step buttons. String. Default `"0.3rem"`
+  - `primary`: Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'`
+  - `secondary`: Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'`
+  - `light`: Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'`
+  - `dark`: Secondary color of text color in future steps. String. Default `'var(--bs-dark, black)'`
+  - `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle)
+  - `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"`
+  - `vertical`: Vertical steps
+  - `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false`
+  - `clickable`: When set to `false`, Clicking icons and labels will not change step. You have to change `current` to change step. Default `true`
+  - `checkIcon`: User defined check icon for passed steps. If not specified, use the default check mark. Set to `null` if you don't want a check icon.
+  - `alertIcon`: User defined alert icon for passed steps that has truthful `alert` property. If not specified, use the default alert icon. Set to `null` if you don't want an alert icon.
+  - `alertColor`: User defined bg color for passed steps that has truthful `alert` property. Default 'var(--bs-danger, #dc3545)'
+
+  ## events
+
+  - `on:click(e)`: click event. Event detail object has two keys:
+    - `e.detail.current`: the index of current step
+    - `e.detail.last`: the index of last step
+
+  ## Copyright
+
+  Copyright (c) 2021, Jingshao Chen. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be found
+  in the LICENSE file.
+
+  https://github.com/shaozi/svelte-steps
+
+-->
+<script>
+	// A bootstrap step component
+	import { tweened } from 'svelte/motion';
+	import { cubicOut } from 'svelte/easing';
+
+	import { createEventDispatcher } from 'svelte';
+	import Check from './Check.svelte';
+	import Alert from './Alert.svelte';
+	export let steps;
+	export let current = 0;
+	export let vertical = false;
+	export let size = vertical ? '2rem' : '3rem';
+	export let line = vertical ? '0.15rem' : '0.3rem';
+	export let lineHeight = undefined;
+	export let primary = 'var(--bs-primary, #3a86ff)';
+	export let secondary = 'var(--bs-secondary, #bbbbc0)';
+	export let light = 'var(--bs-light, white)';
+	export let dark = 'var(--bs-dark, black)';
+	export let borderRadius = '50%';
+	export let fontFamily = '';
+	export let reverse = false;
+	export let clickable = true;
+
+	export let checkIcon = Check;
+	export let alertIcon = Alert;
+	export let alertColor = 'var(--bs-danger, #dc3545)';
+	export let htmlMode = false;
+
+	const minStepSize = '5rem';
+	const stepLabelSpace = '1rem';
+
+	// for backward compatible when using lineHeight instead of line
+	if (lineHeight) {
+		line = lineHeight;
+	}
+
+	// each segment is half of the step size
+
+	// @type { height: number; width: number }[]
+	let segmentSizes = [];
+	for (let i = 0; i < steps.length; i++) {
+		segmentSizes.push({ height: 0, width: 0 });
+	}
+
+	if (current > steps.length - 1) {
+		current = steps.length - 1;
+	}
+	if (current < 0) {
+		current = 0;
+	}
+
+	let progress = tweened(current, { duration: 400, easing: cubicOut });
+	let total = 0;
+	let key = vertical ? 'height' : 'width';
+
+	function f(p /*@type number*/) {
+		// 0 - 1: $p * (0 + 1)/2
+		// 1 - 2: 1 * (0 + 1)/2 + ($p-1) * (1 + 2)/2
+		// 2 - 3: (0 + 1)/2 + (1 + 2)/2 + ($p-2) * (2+3)/2
+		let ret = 0;
+		let i = 0;
+		while (p > 1) {
+			p--;
+			ret += (segmentSizes[i][key] + segmentSizes[i + 1][key]) / 2;
+			i++;
+		}
+		if (i < segmentSizes.length - 1) {
+			ret += (p * (segmentSizes[i][key] + segmentSizes[i + 1][key])) / 2;
+		}
+		return ret;
+	}
+
+	let fill = f(current);
+
+	$: {
+		total = 0;
+		if (segmentSizes[0][key] > 0) {
+			for (let i = 0; i < steps.length; i++) {
+				total += segmentSizes[i][key];
+			}
+			total -= (segmentSizes[0][key] + segmentSizes[segmentSizes.length - 1][key]) / 2;
+		}
+		fill = f($progress);
+	}
+	$: {
+		$progress = current;
+	}
+	const dispatch = createEventDispatcher();
+	let onClick = (i /*: number*/) => {
+		if (clickable) {
+			let last = current;
+			current = i;
+			// $progress = i
+			dispatch('click', { current, last });
+		}
+	};
+</script>
+
+<div
+	class="steps-container"
+	style={`--size: ${size}; 
+      --line-thickness: ${line};
+      --primary: ${primary}; 
+      --secondary: ${secondary};
+      --light: ${light};
+      --dark: ${dark};
+      --danger: ${alertColor};
+      --border-radius: ${borderRadius};
+      --font-family: ${fontFamily || "'Helvetica Neue', Helvetica, Arial, sans-serif"};
+    display: flex; 
+    `}
+	style:flex-direction={vertical ? (reverse ? 'row-reverse' : 'row') : 'column'}
+>
+	<!-- progress line container -->
+	<div
+		style="display: flex; align-items: center;"
+		style:flex-direction={vertical ? 'column' : 'row'}
+		style:width={vertical ? size : '100%'}
+		style:min-width={vertical ? size : null}
+		style:height={vertical ? '100%' : size}
+		style:min-height={vertical ? null : size}
+	>
+		<div
+			style:width={vertical ? line : `${segmentSizes[0].width / 2}px`}
+			style:height={vertical ? `${segmentSizes[0].height / 2}px` : line}
+		/>
+		<div
+			style:width={vertical ? line : `${total}px`}
+			style:height={vertical ? `${total}px` : line}
+			class="bg-secondary"
+			style="display: flex; align-items:center;"
+			style:flex-direction={vertical ? 'column' : reverse ? 'row-reverse' : 'row'}
+		>
+			<div
+				class="bg-primary"
+				style:width={vertical ? line : `${fill}px`}
+				style:height={vertical ? `${fill}px` : line}
+			/>
+			{#if line != size}
+				<!-- the progress indicator -->
+				<div class="bg-primary" style="width:8px; height:8px; border-radius: 50%;" />
+			{/if}
+		</div>
+		<div
+			style:width={vertical ? line : `${segmentSizes[0].width / 2}px`}
+			style:height={vertical ? `${segmentSizes[0].height / 2}px` : line}
+		/>
+	</div>
+	<!--  progress line end -->
+	<div
+		style="display: flex; justify-content: space-between;"
+		style:flex-direction={vertical ? 'column' : reverse ? 'row-reverse' : 'row'}
+		style:margin-left={vertical ? (reverse ? null : '-' + size) : null}
+		style:margin-right={vertical ? (reverse ? '-' + size : null) : null}
+		style:margin-top={vertical ? null : '-' + size}
+	>
+		{#each steps as step, i}
+			<!-- step container -->
+			<div
+				style="display: flex; align-items:center; flex-grow: 10; width: 100%"
+				style:flex-direction={vertical ? (reverse ? 'row-reverse' : 'row') : 'column'}
+				bind:clientWidth={segmentSizes[i].width}
+				bind:clientHeight={segmentSizes[i].height}
+			>
+				<!-- circle and text label -->
+				<div
+					style="display: flex; align-items: center; "
+					style:flex-direction={vertical ? (reverse ? 'row-reverse' : 'row') : 'column'}
+					style:min-width={vertical ? 'var(--size)' : minStepSize}
+					style:min-height={vertical ? minStepSize : 'var(--size)'}
+				>
+					<!-- circle -->
+					<button
+						class="step
+              {i <= $progress ? (step.alert ? 'bg-danger' : 'bg-primary') : 'bg-secondary'} 
+              text-light
+              "
+						class:hover-highlight={clickable}
+						class:shadow={i == current}
+						on:click={() => {
+							onClick(i);
+						}}
+					>
+						{#if step.icon}
+							{#if i < $progress}
+								{#if step.alert}
+									{#if alertIcon}
+										<svelte:component this={alertIcon} />
+									{:else if step.iconProps}
+										<svelte:component this={step.icon} {...step.iconProps} />
+									{:else}
+										<svelte:component this={step.icon} />
+									{/if}
+								{:else if checkIcon}
+									<svelte:component this={checkIcon} />
+								{:else if step.iconProps}
+									<svelte:component this={step.icon} {...step.iconProps} />
+								{:else}
+									<svelte:component this={step.icon} />
+								{/if}
+							{:else if step.iconProps}
+								<svelte:component this={step.icon} {...step.iconProps} />
+							{:else}
+								<svelte:component this={step.icon} />
+							{/if}
+						{:else if i < $progress}
+							{#if step.alert}
+								{#if alertIcon}
+									<svelte:component this={alertIcon} />
+								{:else}
+									<span class="steps__number">{i + 1}</span>
+								{/if}
+							{:else if checkIcon}
+								<svelte:component this={checkIcon} />
+							{:else}
+								<span class="steps__number">{i + 1}</span>
+							{/if}
+						{:else}
+							<span class="steps__number">{i + 1}</span>
+						{/if}
+					</button>
+					<!-- text label -->
+					{#if typeof step.text != 'undefined'}
+						<button
+							class="steps__label"
+							class:hover-highlight={clickable}
+							style:margin-left={vertical ? (reverse ? null : stepLabelSpace) : null}
+							style:margin-right={vertical ? (reverse ? stepLabelSpace : null) : null}
+							style:margin-top={vertical ? null : stepLabelSpace}
+							style:text-align={vertical ? (reverse ? 'right' : 'left') : 'center'}
+							on:click={() => {
+								onClick(i);
+							}}
+						>
+							<div class:text-primary={i <= $progress}>
+								{#if htmlMode}
+									{@html step.text}
+								{:else}
+									{step.text}
+								{/if}
+							</div>
+						</button>
+					{:else}
+						{''}
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.steps-container {
+		font-family: var(--font-family);
+		box-sizing: border-box;
+	}
+
+	.step {
+		border-width: 0;
+		border-radius: var(--border-radius);
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--size);
+		min-width: var(--size);
+		height: var(--size);
+		min-height: var(--size);
+		font-size: calc(var(--size) * 0.5);
+	}
+	.hover-highlight:hover {
+		cursor: pointer;
+		filter: brightness(85%);
+		box-sizing: border-box;
+	}
+	.steps__label {
+		border-width: 0;
+		background-color: transparent;
+		font-size: larger;
+		box-sizing: border-box;
+	}
+
+	.text-primary {
+		color: var(--primary) !important;
+	}
+	.text-light {
+		color: var(--light) !important;
+	}
+	.bg-secondary {
+		background-color: var(--secondary) !important;
+	}
+	.bg-primary {
+		background-color: var(--primary) !important;
+	}
+	.bg-danger {
+		background-color: var(--danger) !important;
+	}
+	.shadow {
+		box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+	}
+</style>

package/dist/svelte-steps/check.svelte

@@ -0,0 +1,25 @@
+<!--
+  Copyright (c) 2021, Jingshao Chen. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be found
+  in the LICENSE file.
+
+  https://github.com/shaozi/svelte-steps
+-->
+<script>
+	export let stroke = 'currentColor';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="1em"
+	height="1em"
+	viewBox="0 0 24 24"
+	fill="none"
+	{stroke}
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="feather feather-check"
+>
+	<polyline points="20 6 9 17 4 12" />
+</svg>

package/dist/svelte-steps/index.d.ts

@@ -0,0 +1 @@
+export { default as Steps } from './Steps.svelte';

package/dist/svelte-steps/index.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2025, Iroco. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be found
+ * in the LICENSE file.
+ *
+ * 2025-08-07 : migrate to Typescript
+ * ---
+ *
+ * Copyright (c) 2021, Jingshao Chen. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be found
+ * in the LICENSE file.
+ *
+ * https://github.com/shaozi/svelte-steps
+ */
+export { default as Steps } from './Steps.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.8.1",
+	"version": "1.10.0",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {