@iroco/ui 1.11.1 → 1.12.0

package/dist/Loader.stories.svelte

@@ -15,7 +15,10 @@
 </script>
 
 {#snippet template({ ...args })}
+	<p>Loader is not visible by default.</p>
 	<Loader {...args} />
 {/snippet}
 
 <Story name="Default" />
+<Story name="Visible" args={{ visible: true }} />
+<Story name="Aria Label" args={{ visible: true, ariaLabel: 'Loading' }} />

package/dist/Loader.svelte

@@ -1,12 +1,42 @@
 <script lang="ts">
-	import { IconIrocoLogo } from './index';
+	interface Props {
+		ariaLabel: string;
+		visible: boolean;
+	}
+
+	let { ariaLabel = 'Loading', visible = false }: Props = $props();
 </script>
 
-<div class="rotate linear infinite width-fit-content transform-origin">
-	<IconIrocoLogo width="4em" height="4em" />
+<div class="wrapper-square" aria-live="polite">
+	{#if visible}
+		<svg
+			aria-label={ariaLabel}
+			class="rotate linear infinite width-fit-content transform-origin"
+			width="4em"
+			height="4em"
+			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"
+			/>
+			<path
+				d="M18.7079 40.4406C11.1737 37.3897 6.24219 30.2033 6.24219 22.1355C6.24219 11.2202 15.2148 2.33887 26.2422 2.33887C37.2696 2.33887 46.2422 11.2202 46.2422 22.1355C46.2422 30.2033 41.3107 37.4575 33.7764 40.4406L32.2696 36.9151C38.3655 34.4745 42.3381 28.6439 42.3381 22.0677C42.3381 13.2541 35.0778 6.06768 26.1737 6.06768C17.2696 6.06768 10.0093 13.2541 10.0093 22.0677C10.0093 28.5762 13.9819 34.4067 20.0778 36.9151L18.7079 40.4406Z"
+				fill="#00D692"
+			/>
+		</svg>
+	{/if}
 </div>
 
 <style>
+	.wrapper-square {
+		padding: 1rem 1rem 0.4315rem;
+		width: fit-content;
+		height: fit-content;
+	}
+
 	.width-fit-content {
 		width: fit-content;
 		margin: 0;
@@ -16,6 +46,7 @@
 	.transform-origin {
 		transform-origin: 2.11em 1.76em;
 	}
+
 	.rotate {
 		animation: rotation 2s;
 	}

package/dist/Loader.svelte.d.ts

@@ -1,18 +1,7 @@
-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: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+interface Props {
+    ariaLabel: string;
+    visible: boolean;
 }
-declare const Loader: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Loader = InstanceType<typeof Loader>;
+declare const Loader: import("svelte").Component<Props, {}, "">;
+type Loader = ReturnType<typeof Loader>;
 export default Loader;

package/package.json

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