@iroco/ui 1.10.3 → 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,4 +1,14 @@
 <!--
+
+	- 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.

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,4 +1,14 @@
 <!--
+
+	- 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.

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,7 +17,7 @@
   https://github.com/shaozi/svelte-steps
 
 -->
-<script>
+<script lang="ts">
 	import { run } from 'svelte/legacy';
 
 	// A bootstrap step component
@@ -60,30 +25,57 @@
 	import { cubicOut } from 'svelte/easing';
 
 	import { createEventDispatcher } from 'svelte';
-	import Check from './Check.svelte';
-	import Alert from './Alert.svelte';
-
-	/**
-	 * @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]
-	 */
+	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 {
@@ -92,7 +84,6 @@
 		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)',
@@ -101,20 +92,16 @@
 		fontFamily = '',
 		reverse = false,
 		clickable = true,
-		checkIcon = Check,
-		alertIcon = Alert,
+		checkIcon = StepIconCheck,
+		alertIcon = StepIconAlert,
 		alertColor = 'var(--bs-danger, #dc3545)',
-		htmlMode = false
-	} = $props();
+		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 }[]
@@ -177,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"
@@ -184,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}; 

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

@@ -1,107 +1,56 @@
-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 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> & {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;
     } & Exports;
     (internal: unknown, props: Props & {
@@ -113,3 +62,33 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, 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.3",
+	"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,6 +0,0 @@
-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.d.ts

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