@iroco/ui 1.7.0 → 1.8.0

package/dist/Alert.stories.svelte

@@ -14,15 +14,9 @@
 
 {#snippet template({ ...args })}
 	<Alert {...args} onclose={() => alert('click')}>
-		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eros lacus, commodo eu tristique
-		non, ultricies eu tellus. Nulla facilisi. Integer a tincidunt purus. Proin vulputate tristique
-		magna. Aliquam id eros id ante malesuada interdum. Phasellus tristique ac leo at fringilla. Cras
-		a viverra nibh, vitae rutrum ante. Sed pharetra nibh ac velit dignissim ornare sed accumsan
-		lacus. Vestibulum tincidunt purus sapien, ac dapibus sem semper a. Nullam venenatis vestibulum
-		risus id molestie. Aliquam facilisis nunc at nunc aliquam hendrerit. Etiam sodales sodales
-		lectus, ut suscipit lacus vehicula nec. Proin vel magna sed orci condimentum ornare in a odio.
-		In varius eu augue eget tincidunt. Ut quis porttitor nulla. Nulla leo nunc, efficitur non ipsum
-		vel, tincidunt auctor lectus.
+		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+		<p>Nunc eros lacus, commodo eu tristique non, ultricies eu tellus.</p>
+		<p>Nulla facilisi. Integer a tincidunt purus.</p>
 	</Alert>
 {/snippet}
 

package/dist/Alert.svelte

@@ -5,14 +5,21 @@
 	interface Props {
 		type?: 'success' | 'danger' | 'flash';
 		showClose?: boolean;
+		fullWidth?: boolean;
 		onclose?: MouseEventHandler<HTMLButtonElement>;
 		children?: import('svelte').Snippet;
 	}
 
-	let { type = 'success', showClose = true, onclose, children }: Props = $props();
+	let {
+		type = 'success',
+		showClose = true,
+		fullWidth = false,
+		onclose,
+		children
+	}: Props = $props();
 </script>
 
-<div class={`alert alert--${type}`}>
+<div class={['alert', `alert--${type}`, { fullWidth }]}>
 	{#if showClose}
 		<button onclick={onclose} class="alert__close">
 			<IconClose width="2em" height="2em" />
@@ -59,4 +66,8 @@
 .alert__close:focus {
   outline-color: var(--color-secondary);
   outline-style: auto;
+}
+
+.fullWidth {
+  width: 100%;
 }</style>

package/dist/Alert.svelte.d.ts

@@ -2,6 +2,7 @@ import type { MouseEventHandler } from 'svelte/elements';
 interface Props {
     type?: 'success' | 'danger' | 'flash';
     showClose?: boolean;
+    fullWidth?: boolean;
     onclose?: MouseEventHandler<HTMLButtonElement>;
     children?: import('svelte').Snippet;
 }

package/package.json

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