@iroco/ui 1.10.0 → 1.10.2

package/dist/svelte-steps/README.md

@@ -10,13 +10,11 @@ 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
+- [x] Release with `release-it`
+- [x] Add credit ourselves when modifying
+- [x] Web accessibility: Treat as `role="progress"` aria
+- [ ] Migrate to Svelte 5
 - [ ] 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
 

package/dist/svelte-steps/Steps.svelte

@@ -37,6 +37,14 @@
 
   ## 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.
@@ -52,6 +60,7 @@
 	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;
@@ -144,7 +153,12 @@
 
 <div
 	class="steps-container"
-	style={`--size: ${size}; 
+	role="progressbar"
+	aria-valuemin="1"
+	aria-valuemax={`${(steps?.length ?? 0) + 1}`}
+	aria-valuenow={`${(current ?? 0) + 1}`}
+	aria-valuetext={`${steps[current]?.text}`}
+	style={`--size: ${size};
       --line-thickness: ${line};
       --primary: ${primary}; 
       --secondary: ${secondary};
@@ -314,33 +328,41 @@
 		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;
+		color: var(--color-text);
 	}
 
 	.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;
 	}

package/package.json

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