@iroco/ui 1.10.2 → 1.11.0

package/dist/Steps.stories.svelte

@@ -7,6 +7,7 @@
 		title: 'Iroco-UI/Components/Steps',
 		component: Steps,
 		args: {
+			aria_label: 'Steps example',
 			steps: [{ text: 'Foo' }, { text: 'Bar' }, { text: 'Baz' }]
 		}
 	});

package/dist/svelte-steps/{Alert.svelte → StepIconAlert.svelte}

@@ -1,12 +1,26 @@
 <!--
+
+	- 2025-08-14 : Migrate to Svelte 5 syntax
+	- 2025-08-14 : Rename from Alter to StepIconAlert
+
+	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
 -->
-<script>
-	export let stroke = 'currentColor';
+<script lang="ts">
+	interface Props {
+		stroke?: string;
+	}
+
+	let { stroke = 'currentColor' }: Props = $props();
 </script>
 
 <svg

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

@@ -0,0 +1,6 @@
+interface Props {
+    stroke?: string;
+}
+declare const StepIconAlert: import("svelte").Component<Props, {}, "">;
+type StepIconAlert = ReturnType<typeof StepIconAlert>;
+export default StepIconAlert;

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

@@ -1,12 +1,26 @@
 <!--
+
+	- 2025-08-14 : Migrate to Svelte 5 syntax
+	- 2025-08-14 : Rename from Check to StepIconCheck
+
+	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
 -->
-<script>
-	export let stroke = 'currentColor';
+<script lang="ts">
+	interface Props {
+		stroke?: string;
+	}
+
+	let { stroke = 'currentColor' }: Props = $props();
 </script>
 
 <svg

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

@@ -0,0 +1,6 @@
+interface Props {
+    stroke?: string;
+}
+declare const StepIconCheck: import("svelte").Component<Props, {}, "">;
+type StepIconCheck = ReturnType<typeof StepIconCheck>;
+export default StepIconCheck;

package/dist/svelte-steps/Steps.svelte

@@ -1,43 +1,8 @@
 <!--
 
-  @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
-
 	- 2025-08-07 : Use Iroco CSS var for steps label
+	- 2025-08-14 : Migrate to Svelte 5 syntax
+	- 2025-08-14 : Migrate to Typescript
 
 	Copyright (c) 2025, Iroco. All rights reserved.
   Use of this source code is governed by a BSD-style license that can be found
@@ -52,47 +17,95 @@
   https://github.com/shaozi/svelte-steps
 
 -->
-<script>
+<script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	// 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;
+	import StepIconCheck from './StepIconCheck.svelte';
+	import StepIconAlert from './StepIconAlert.svelte';
+
+	interface Props {
+		/** Accessible name for this component (it has role="progressbar") */
+		aria_label: string;
+		/**
+		 *
+		 * 	- 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.
+		 */
+		steps: { text: string; alert?: boolean; icon?: boolean; iconProps?: any }[];
+		/** Current step index. Default `0` */
+		current: number;
+		/** When set to `false`, Clicking icons and labels will not change step. You have to change `current` to change step. Default `true` */
+		clickable: boolean;
+
+		/** Vertical steps */
+		vertical: boolean;
+		/** For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false` */
+		reverse: boolean;
+
+		/** size of the step buttons. String. Default `"3rem"` */
+		size: string;
+		/** thickness of the connecting lines between the step buttons. String. Default `"0.3rem"` */
+		line: string;
+		/** Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'` */
+		primary: string;
+		/** Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'` */
+		secondary: string;
+		/** Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'` */
+		light: string;
+		/** Secondary color of text color in future steps. String. Default `'var(--bs-dark, black)'` */
+		dark: string;
+		/** Border radius of the step buttons. String. Default `'50%'` (circle) */
+		borderRadius: string;
+		/** Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"` */
+		fontFamily: string;
+		/** 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. */
+		checkIcon: any;
+		/** 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. */
+		alertIcon: any;
+		/** User defined bg color for passed steps that has truthful `alert` property. Default 'var(--bs-danger, #dc3545)' */
+		alertColor: string;
+		/** Evaluates step test as HTML */
+		htmlMode: boolean;
+	}
+
+	/** @type {Props} */
+	let {
+		steps,
+		current = $bindable(0),
+		vertical = false,
+		size = vertical ? '2rem' : '3rem',
+		line = $bindable(vertical ? '0.15rem' : '0.3rem'),
+		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 = StepIconCheck,
+		alertIcon = StepIconAlert,
+		alertColor = 'var(--bs-danger, #dc3545)',
+		htmlMode = false,
+		aria_label
+	}: Props = $props();
 
 	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 = [];
+	let segmentSizes = $state([]);
 	for (let i = 0; i < steps.length; i++) {
 		segmentSizes.push({ height: 0, width: 0 });
 	}
@@ -105,7 +118,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 +138,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 +149,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) {
@@ -151,6 +164,33 @@
 	};
 </script>
 
+<!--
+
+  @component
+
+  A customizable and accessible step component.
+
+	## Usage
+
+	```svelte
+	<Steps
+		aria_label="My steps"
+		current={0}
+		steps={[
+			{test:"Foo"},
+			{test:"Bar"},
+			{test:"Baz"},
+		]}
+	/>
+	```
+
+  ## Events
+
+  - `onclick(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
+
+-->
 <div
 	class="steps-container"
 	role="progressbar"
@@ -158,6 +198,7 @@
 	aria-valuemax={`${(steps?.length ?? 0) + 1}`}
 	aria-valuenow={`${(current ?? 0) + 1}`}
 	aria-valuetext={`${steps[current]?.text}`}
+	aria-label={aria_label}
 	style={`--size: ${size};
       --line-thickness: ${line};
       --primary: ${primary}; 
@@ -183,7 +224,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 +236,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 +278,7 @@
               "
 						class:hover-highlight={clickable}
 						class:shadow={i == current}
-						on:click={() => {
+						onclick={() => {
 							onClick(i);
 						}}
 					>
@@ -245,33 +286,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 +333,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,94 @@
+interface Props {
+    /** Accessible name for this component (it has role="progressbar") */
+    aria_label: string;
+    /**
+     *
+     * 	- 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.
+     */
+    steps: {
+        text: string;
+        alert?: boolean;
+        icon?: boolean;
+        iconProps?: any;
+    }[];
+    /** Current step index. Default `0` */
+    current: number;
+    /** When set to `false`, Clicking icons and labels will not change step. You have to change `current` to change step. Default `true` */
+    clickable: boolean;
+    /** Vertical steps */
+    vertical: boolean;
+    /** For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false` */
+    reverse: boolean;
+    /** size of the step buttons. String. Default `"3rem"` */
+    size: string;
+    /** thickness of the connecting lines between the step buttons. String. Default `"0.3rem"` */
+    line: string;
+    /** Primary color of passed and current steps. String. Default `'var(--bs-primary, #3a86ff)'` */
+    primary: string;
+    /** Secondary color of future steps. String. Default `'var(--bs-secondary, #bbbbc0)'` */
+    secondary: string;
+    /** Primary color of text color in passed anc current steps. String. Default `'var(--bs-light, white)'` */
+    light: string;
+    /** Secondary color of text color in future steps. String. Default `'var(--bs-dark, black)'` */
+    dark: string;
+    /** Border radius of the step buttons. String. Default `'50%'` (circle) */
+    borderRadius: string;
+    /** Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"` */
+    fontFamily: string;
+    /** 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. */
+    checkIcon: any;
+    /** 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. */
+    alertIcon: any;
+    /** User defined bg color for passed steps that has truthful `alert` property. Default 'var(--bs-danger, #dc3545)' */
+    alertColor: string;
+    /** Evaluates step test as HTML */
+    htmlMode: boolean;
+}
+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;
+}
+/**
+ * A customizable and accessible step component.
+ *
+ * ## Usage
+ *
+ * ```svelte
+ * <Steps
+ * 	aria_label="My steps"
+ * 	current={0}
+ * 	steps={[
+ * 		{test:"Foo"},
+ * 		{test:"Bar"},
+ * 		{test:"Baz"},
+ * 	]}
+ * />
+ * ```
+ *
+ *  ## Events
+ *
+ *  - `onclick(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
+ */
+declare const Steps: $$__sveltets_2_IsomorphicComponent<Props, {
+    click: CustomEvent<any>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, "line" | "current">;
+type Steps = InstanceType<typeof Steps>;
+export default Steps;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.10.2",
+	"version": "1.11.0",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
@@ -9,7 +9,7 @@
 		"test:watch": "vitest watch --passWithNoTests",
 		"svelte:check": "svelte-check --tsconfig ./tsconfig.json",
 		"dev": "storybook dev -p 5175",
-		"build": "svelte-package",
+		"build": "svelte-package --types",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier . --check . && eslint .",
@@ -276,6 +276,5 @@
 				"./dist/index.d.ts"
 			]
 		}
-	},
-	"packageManager": "yarn@1.22.21+sha1.1959a18351b811cdeedbd484a8f86c3cc3bbaf72"
+	}
 }

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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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;
-}