@iroco/ui 1.10.3 → 1.11.1

package/dist/IconIrocoLogo.svelte

@@ -19,7 +19,7 @@
 </script>
 
 <a class="iroco-logo" {href} aria-label={ariaLabel}>
-	<svg {width} {height} viewBox="0 0 54 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<svg {width} {height} viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
 		<path
 			d="M30.009 29.9999C29.3241 30.0677 28.7761 30.1355 28.4336 30.2033C28.0912 30.3389 27.8857 30.5423 27.7487 30.8812C27.6117 31.2202 27.5432 31.7626 27.5432 32.5084V47.1524C27.5432 47.8982 27.6117 48.4406 27.7487 48.7795C27.8857 49.1185 28.0912 49.3219 28.4336 49.4575C28.7761 49.5931 29.2556 49.6609 30.009 49.6609V50.2711C29.1186 50.2033 27.8172 50.2033 26.2419 50.2033C24.5295 50.2033 23.2282 50.2033 22.4062 50.2711V49.7965C23.0912 49.7287 23.6391 49.6609 23.9816 49.5931C24.3241 49.4575 24.5295 49.2541 24.6665 48.9151C24.8035 48.5762 24.872 48.0338 24.872 47.288V32.5762C24.872 31.8304 24.8035 31.288 24.6665 30.949C24.5295 30.6101 24.3241 30.4067 23.9816 30.2711C23.6391 30.1355 23.1597 30.0677 22.4062 30.0677V29.4575C23.2282 29.5253 24.5295 29.5253 26.2419 29.5253C27.8172 29.5253 29.1186 29.5253 30.009 29.4575V29.9999Z"
 			fill="white"

package/dist/Loader.svelte

@@ -2,11 +2,20 @@
 	import { IconIrocoLogo } from './index';
 </script>
 
-<div class="rotate linear infinite">
+<div class="rotate linear infinite width-fit-content transform-origin">
 	<IconIrocoLogo width="4em" height="4em" />
 </div>
 
 <style>
+	.width-fit-content {
+		width: fit-content;
+		margin: 0;
+		padding: 0;
+	}
+
+	.transform-origin {
+		transform-origin: 2.11em 1.76em;
+	}
 	.rotate {
 		animation: rotation 2s;
 	}

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.1",
 	"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;