@iroco/ui 1.10.2 → 1.10.3

package/dist/svelte-steps/Alert.svelte

@@ -5,8 +5,12 @@
 
   https://github.com/shaozi/svelte-steps
 -->
-<script>
-	export let stroke = 'currentColor';
+<script lang="ts">
+	interface Props {
+		stroke?: string;
+	}
+
+	let { stroke = 'currentColor' }: Props = $props();
 </script>
 
 <svg

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

@@ -1,26 +1,6 @@
-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;
+interface Props {
+    stroke?: string;
 }
+declare const Alert: import("svelte").Component<Props, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/svelte-steps/{check.svelte → Check.svelte}

@@ -5,8 +5,12 @@
 
   https://github.com/shaozi/svelte-steps
 -->
-<script>
-	export let stroke = 'currentColor';
+<script lang="ts">
+	interface Props {
+		stroke?: string;
+	}
+
+	let { stroke = 'currentColor' }: Props = $props();
 </script>
 
 <svg

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

@@ -1,26 +1,6 @@
-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;
+interface Props {
+    stroke?: string;
 }
+declare const Check: import("svelte").Component<Props, {}, "">;
+type Check = ReturnType<typeof Check>;
+export default Check;

package/dist/svelte-steps/Steps.svelte

@@ -53,6 +53,8 @@
 
 -->
 <script>
+	import { run } from 'svelte/legacy';
+
 	// A bootstrap step component
 	import { tweened } from 'svelte/motion';
 	import { cubicOut } from 'svelte/easing';
@@ -61,25 +63,49 @@
 	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;
+	/**
+	 * @typedef {Object} Props
+	 * @property {any} steps
+	 * @property {number} [current]
+	 * @property {boolean} [vertical]
+	 * @property {any} [size]
+	 * @property {any} [line]
+	 * @property {any} [lineHeight]
+	 * @property {string} [primary]
+	 * @property {string} [secondary]
+	 * @property {string} [light]
+	 * @property {string} [dark]
+	 * @property {string} [borderRadius]
+	 * @property {string} [fontFamily]
+	 * @property {boolean} [reverse]
+	 * @property {boolean} [clickable]
+	 * @property {any} [checkIcon]
+	 * @property {any} [alertIcon]
+	 * @property {string} [alertColor]
+	 * @property {boolean} [htmlMode]
+	 */
+
+	/** @type {Props} */
+	let {
+		steps,
+		current = $bindable(0),
+		vertical = false,
+		size = vertical ? '2rem' : '3rem',
+		line = $bindable(vertical ? '0.15rem' : '0.3rem'),
+		lineHeight = undefined,
+		primary = 'var(--bs-primary, #3a86ff)',
+		secondary = 'var(--bs-secondary, #bbbbc0)',
+		light = 'var(--bs-light, white)',
+		dark = 'var(--bs-dark, black)',
+		borderRadius = '50%',
+		fontFamily = '',
+		reverse = false,
+		clickable = true,
+		checkIcon = Check,
+		alertIcon = Alert,
+		alertColor = 'var(--bs-danger, #dc3545)',
+		htmlMode = false
+	} = $props();
 
 	const minStepSize = '5rem';
 	const stepLabelSpace = '1rem';
@@ -92,7 +118,7 @@
 	// each segment is half of the step size
 
 	// @type { height: number; width: number }[]
-	let segmentSizes = [];
+	let segmentSizes = $state([]);
 	for (let i = 0; i < steps.length; i++) {
 		segmentSizes.push({ height: 0, width: 0 });
 	}
@@ -105,7 +131,7 @@
 	}
 
 	let progress = tweened(current, { duration: 400, easing: cubicOut });
-	let total = 0;
+	let total = $state(0);
 	let key = vertical ? 'height' : 'width';
 
 	function f(p /*@type number*/) {
@@ -125,9 +151,9 @@
 		return ret;
 	}
 
-	let fill = f(current);
+	let fill = $state(f(current));
 
-	$: {
+	run(() => {
 		total = 0;
 		if (segmentSizes[0][key] > 0) {
 			for (let i = 0; i < steps.length; i++) {
@@ -136,10 +162,10 @@
 			total -= (segmentSizes[0][key] + segmentSizes[segmentSizes.length - 1][key]) / 2;
 		}
 		fill = f($progress);
-	}
-	$: {
+	});
+	run(() => {
 		$progress = current;
-	}
+	});
 	const dispatch = createEventDispatcher();
 	let onClick = (i /*: number*/) => {
 		if (clickable) {
@@ -183,7 +209,7 @@
 		<div
 			style:width={vertical ? line : `${segmentSizes[0].width / 2}px`}
 			style:height={vertical ? `${segmentSizes[0].height / 2}px` : line}
-		/>
+		></div>
 		<div
 			style:width={vertical ? line : `${total}px`}
 			style:height={vertical ? `${total}px` : line}
@@ -195,16 +221,16 @@
 				class="bg-primary"
 				style:width={vertical ? line : `${fill}px`}
 				style:height={vertical ? `${fill}px` : line}
-			/>
+			></div>
 			{#if line != size}
 				<!-- the progress indicator -->
-				<div class="bg-primary" style="width:8px; height:8px; border-radius: 50%;" />
+				<div class="bg-primary" style="width:8px; height:8px; border-radius: 50%;"></div>
 			{/if}
 		</div>
 		<div
 			style:width={vertical ? line : `${segmentSizes[0].width / 2}px`}
 			style:height={vertical ? `${segmentSizes[0].height / 2}px` : line}
-		/>
+		></div>
 	</div>
 	<!--  progress line end -->
 	<div
@@ -237,7 +263,7 @@
               "
 						class:hover-highlight={clickable}
 						class:shadow={i == current}
-						on:click={() => {
+						onclick={() => {
 							onClick(i);
 						}}
 					>
@@ -245,33 +271,37 @@
 							{#if i < $progress}
 								{#if step.alert}
 									{#if alertIcon}
-										<svelte:component this={alertIcon} />
+										{@const SvelteComponent = alertIcon}
+										<SvelteComponent />
 									{:else if step.iconProps}
-										<svelte:component this={step.icon} {...step.iconProps} />
+										<step.icon {...step.iconProps} />
 									{:else}
-										<svelte:component this={step.icon} />
+										<step.icon />
 									{/if}
 								{:else if checkIcon}
-									<svelte:component this={checkIcon} />
+									{@const SvelteComponent_1 = checkIcon}
+									<SvelteComponent_1 />
 								{:else if step.iconProps}
-									<svelte:component this={step.icon} {...step.iconProps} />
+									<step.icon {...step.iconProps} />
 								{:else}
-									<svelte:component this={step.icon} />
+									<step.icon />
 								{/if}
 							{:else if step.iconProps}
-								<svelte:component this={step.icon} {...step.iconProps} />
+								<step.icon {...step.iconProps} />
 							{:else}
-								<svelte:component this={step.icon} />
+								<step.icon />
 							{/if}
 						{:else if i < $progress}
 							{#if step.alert}
 								{#if alertIcon}
-									<svelte:component this={alertIcon} />
+									{@const SvelteComponent_2 = alertIcon}
+									<SvelteComponent_2 />
 								{:else}
 									<span class="steps__number">{i + 1}</span>
 								{/if}
 							{:else if checkIcon}
-								<svelte:component this={checkIcon} />
+								{@const SvelteComponent_3 = checkIcon}
+								<SvelteComponent_3 />
 							{:else}
 								<span class="steps__number">{i + 1}</span>
 							{/if}
@@ -288,7 +318,7 @@
 							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={() => {
 								onClick(i);
 							}}
 						>

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

@@ -0,0 +1,115 @@
+export default Steps;
+type Steps = SvelteComponent<Props, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: "line" | "current" | undefined;
+};
+/**
+ * # 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
+ *
+ * - 2025-08-07 : Use Iroco CSS var for steps label
+ *
+ * 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.
+ *
+ * ---
+ *
+ *  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
+ */
+declare const Steps: $$__sveltets_2_IsomorphicComponent<{
+    steps: any;
+    current?: number | undefined;
+    vertical?: boolean | undefined;
+    size?: any;
+    line?: any;
+    lineHeight?: any;
+    primary?: string | undefined;
+    secondary?: string | undefined;
+    light?: string | undefined;
+    dark?: string | undefined;
+    borderRadius?: string | undefined;
+    fontFamily?: string | undefined;
+    reverse?: boolean | undefined;
+    clickable?: boolean | undefined;
+    checkIcon?: any;
+    alertIcon?: any;
+    alertColor?: string | undefined;
+    htmlMode?: boolean | undefined;
+}, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "line" | "current">;
+type Props = {
+    steps: any;
+    current?: number | undefined;
+    vertical?: boolean | undefined;
+    size?: any;
+    line?: any;
+    lineHeight?: any;
+    primary?: string | undefined;
+    secondary?: string | undefined;
+    light?: string | undefined;
+    dark?: string | undefined;
+    borderRadius?: string | undefined;
+    fontFamily?: string | undefined;
+    reverse?: boolean | undefined;
+    clickable?: boolean | undefined;
+    checkIcon?: any;
+    alertIcon?: any;
+    alertColor?: string | undefined;
+    htmlMode?: boolean | undefined;
+};
+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/package.json

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