@iroco/ui 1.15.2 → 1.16.0

package/dist/PasswordInput.svelte

@@ -19,6 +19,9 @@
 		readonly?: boolean;
 		border?: boolean;
 		oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
+		showPasswordAriaLabel?: string | null;
+		passwordShownAriaLive?: string | null;
+		passwordHiddenAriaLive?: string | null;
 	}
 
 	let {
@@ -36,14 +39,24 @@
 		border = false,
 		autocomplete = 'on',
 		oninput,
+		showPasswordAriaLabel = 'Show password',
+		passwordShownAriaLive = 'password visible',
+		passwordHiddenAriaLive = 'password hidden',
+
 		...rest
 	}: Props = $props();
 
-	let showPassword = $state(false);
-	let fieldType: 'password' | 'text' = $derived(showPassword ? 'text' : 'password');
+	const HANDLED_KEYS = new Set(['Space', 'Enter']);
+
+	let passwordShown = $state(false);
+	let fieldType: 'password' | 'text' = $derived(passwordShown ? 'text' : 'password');
+
+	function showPassword() {
+		passwordShown = true;
+	}
 
-	function toggleShowPassword() {
-		showPassword = !showPassword;
+	function hidePassword() {
+		passwordShown = false;
 	}
 
 	function hasErrors() {
@@ -74,12 +87,21 @@
 		/>
 		<button
 			type="button"
-			onclick={toggleShowPassword}
-			aria-label="Show password"
-			aria-pressed="false"
+			onpointerdown={showPassword}
+			onpointerup={hidePassword}
+			onpointerleave={hidePassword}
+			onpointercancel={hidePassword}
+			onkeydown={(e) => HANDLED_KEYS.has(e.code) && showPassword()}
+			onkeyup={(e) => HANDLED_KEYS.has(e.code) && hidePassword()}
+			onblur={hidePassword}
+			aria-label={showPasswordAriaLabel}
+			aria-pressed={passwordShown}
 		>
 			<Icon data={eye} />
 		</button>
+		<div class="password-aria-live" aria-live="assertive">
+			{passwordShown ? passwordShownAriaLive : passwordHiddenAriaLive}
+		</div>
 	</div>
 	{#if error != null}
 		<p data-testid="error" class="error">
@@ -304,4 +326,9 @@
   display: flex;
   align-items: center;
   color: var(--color-foreground);
+}
+
+.password-aria-live {
+  width: 0;
+  overflow: hidden;
 }</style>

package/dist/PasswordInput.svelte.d.ts

@@ -17,6 +17,9 @@ interface Props extends HTMLInputAttributes {
     readonly?: boolean;
     border?: boolean;
     oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
+    showPasswordAriaLabel?: string | null;
+    passwordShownAriaLive?: string | null;
+    passwordHiddenAriaLive?: string | null;
 }
 declare const PasswordInput: import("svelte").Component<Props, {}, "value">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

package/dist/Steps.stories.svelte

@@ -22,3 +22,4 @@
 {/snippet}
 
 <Story name="Default" />
+<Story name="Non clickable" args={{ clickable: false }} />

package/dist/svelte-steps/Steps.svelte

@@ -272,6 +272,7 @@
 				>
 					<!-- circle -->
 					<button
+						disabled={!clickable}
 						class="step
               {i <= $progress ? (step.alert ? 'bg-danger' : 'bg-primary') : 'bg-secondary'} 
               text-light
@@ -327,6 +328,7 @@
 					<!-- text label -->
 					{#if typeof step.text != 'undefined'}
 						<button
+							disabled={!clickable}
 							class="steps__label"
 							class:hover-highlight={clickable}
 							style:margin-left={vertical ? (reverse ? null : stepLabelSpace) : null}

package/package.json

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