@iroco/ui 1.1.4 → 1.1.6

package/README.md

@@ -4,7 +4,7 @@
 
 Design system for Iroco [based on SvelteKit](https://kit.svelte.dev/docs/packaging).
 
-See the [Documentation](https://iroco-co.github.io/iroco-ui/) (not in sync anymore : to be restored with storybook)
+See the [Documentation](https://iroco-co.github.io/iroco-ui/).
 
 # Install in your svelte application
 
@@ -20,16 +20,7 @@ npm install @iroco/ui
 npm install @iroco/ui@next
 ```
 
-## Minimal scaffolding
-
-`src/app.scss`
-
-```scss
-@use 'node_modules/@iroco/ui/dist/scss/fonts';
-@use 'node_modules/@iroco/ui/dist/scss/style';
-@use 'node_modules/@iroco/ui/dist/scss/constants';
-@use 'node_modules/@iroco/ui/dist/scss/containers';
-```
+## Usage
 
 Example of layout with navigation
 
@@ -39,67 +30,108 @@ Example of layout with navigation
 <script>
 	import '../app.scss';
 	import { Navigation, NavigationItem } from '@iroco/ui';
+	import { base } from '$app/paths';
+	import { page } from '$app/state';
+
+	let currentRoute = $derived(page?.route?.id ?? '');
+
+	/** snip **/
 </script>
 
-<Navigation navigationItems={[new NavigationItem('About', '/about')]} type="topbar" />
+<Navigation
+	{navigationItems}
+	{currentRoute}
+	baseUrl={base}
+	type={'sidebar'}
+	title={$_('account.title')}
+	version={data?.version}
+/>
+
 <main class="main">
 	<slot />
 </main>
 
 <style lang="scss">
-	@use 'node_modules/@iroco/ui/dist/scss/colors.scss';
-	@use 'node_modules/@iroco/ui/dist/scss/constants.scss';
-	@use 'node_modules/@iroco/ui/dist/scss/containers.scss';
-	@use 'node_modules/@iroco/ui/dist/scss/button.scss';
+	@use '@iroco/ui/scss/constants.scss';
+	@use '@iroco/ui/scss/containers.scss';
+	@use '@iroco/ui/scss/button.scss';
 </style>
 ```
 
-# develop
+## Customize colors
+
+You can override CSS vars that mainly located in `@iroco/ui/scss/colors.scss'` in a custom scss file such as `src/app.scss`.
+
+Ex. in a custom `src/my-colors.css` file
+
+```scss
+:root {
+	--color-primary-light: pink;
+	--color-primary: red;
+}
+```
 
-[Useful Svelte 5 + Storybook examples](https://github.com/podman-desktop/podman-desktop/tree/main/storybook).
+Then in your `src/app.scss` style you can both `@iroco-ui` default scss style and the override.
+
+```scss
+@use '@iroco/ui/scss/colors.scss';
+@use 'my-colors.scss';
+```
+
+## Develop
 
 To install dependencies :
 
 ```shell
-~/src/iroco-ui$ npm ci
+npm ci
 ```
 
 Building :
 
 ```shell
-~/src/iroco-ui$ npm run build
+npm run build
 ```
 
-Releasing :
+Releasing (tags and releases to npm):
 
 ```shell
-~/iroco-ui$ npm publish
+npm publish
 ```
 
-# documentation (to be done with storybook)
+## Documentation (Storybook)
 
 The docs directory contains the documentation app deployed on github pages. To install dependencies :
 
 ```shell
-~/src/iroco-ui/docs$ npm ci
+npm ci
 ```
 
 You can add/update components documentation into `docs/src/pages/components` and update the left menu in `docs/src/includes/sidebar.md`.
 
-When you have to work on the CSS for components, you can have hot reloading. To do so you have to make the iroco-ui build watched with :
+When you have to work on the CSS for components, you can have hot reloading.
+Launch the dev server for docs :
 
 ```shell
-~/src/iroco-ui$ npx npm-watch build
+npm run dev
 ```
 
-And in the same time launch the dev server for docs :
+To build the documentation (in `/docs`) :
 
 ```shell
-~/src/iroco-ui/docs$ npm run dev
+npm run build-storybook
 ```
 
-To build the documentation (in docs) :
+## CSS Custom properties in Storybook
 
-```shell
-~/src/iroco-ui/docs$ npm run build
-```
+CSS Custom properties allows to try out variations of the design system.
+It relies on parts of the design system style that have been ported to CSS vars in this very purpose.
+
+Those variable relate mainly to colors.
+
+Add missing variables to Storybook
+
+[.storybook/preview.ts](.storybook/preview.ts)
+
+It should reflect variables declared here :
+
+[src/lib/scss/colors.scss](src/lib/scss/colors.scss)

package/dist/Alert.stories.svelte

@@ -14,13 +14,15 @@
 
 {#snippet template({ ...args })}
 	<Alert {...args}>
-		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.
+		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.
 	</Alert>
 {/snippet}
 
@@ -28,4 +30,3 @@
 <Story name="Danger" args={{ type: 'danger' }} />
 <Story name="Flash" args={{ type: 'flash' }} />
 <Story name="Success" args={{ type: 'success' }} />
-

package/dist/Button.stories.svelte

@@ -4,7 +4,6 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
 		title: 'Iroco-UI/Atoms/Button',
 		component: Button,
 		argTypes: {
@@ -26,7 +25,6 @@
 	}
 </script>
 
-
 <script lang="ts">
 	setTemplate(template);
 </script>

package/dist/Button.svelte

@@ -22,12 +22,11 @@
 		children,
 		onclick
 	}: Props = $props();
-
 </script>
 
 <button
 	{id}
-	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind} ${fullWidth?'iroco-ui-button--full-width':''}`}
+	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind} ${fullWidth ? 'iroco-ui-button--full-width' : ''}`}
 	class:disabled
 	{type}
 	{disabled}

package/dist/DataTable.stories.svelte

@@ -4,7 +4,6 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
 		title: 'Iroco-UI/Components/DataTable',
 		component: DataTable,
 		argTypes: {},
@@ -22,15 +21,13 @@
 		}
 	});
 </script>
+
 <script lang="ts">
 	setTemplate(template);
 </script>
 
 {#snippet template({ ...args })}
-	<DataTable
-		{...args}
-
-	/>
+	<DataTable {...args} />
 {/snippet}
 
 <Story name="Default" />

package/dist/DataTable.svelte

@@ -2,8 +2,8 @@
 	import type { Component } from 'svelte';
 
 	interface Props {
-		rows: Array<TableRow>,
-		columns: Array<TableColumn>
+		rows: Array<TableRow>;
+		columns: Array<TableColumn>;
 	}
 
 	type TableColumn = {
@@ -11,7 +11,6 @@
 		title: string;
 		renderComponent?: {
 			component: Component;
-			/* eslint-disable @typescript-eslint/no-explicit-any */
 			props?: any;
 		};
 	};
@@ -25,31 +24,29 @@
 
 <table class="data-table">
 	<thead class="data-table__header">
-	<tr>
-		{#each columns as column}
-			<th class="data-table__header__cell">
-				{column.title}
-			</th>
-		{/each}
-	</tr>
+		<tr>
+			{#each columns as column}
+				<th class="data-table__header__cell">
+					{column.title}
+				</th>
+			{/each}
+		</tr>
 	</thead>
 
 	<tbody class="data-table__body">
-	{#each rows as row}
-		<tr class="data-table__body__row">
-			{#each columns as { key, renderComponent }}
-				<td class="data-table__body__cell">
-					{#if renderComponent}
-						<renderComponent.component
-							on:click={() => renderComponent.props.onclick(row)}
-						/>
-					{:else}
-						{row[key]}
-					{/if}
-				</td>
-			{/each}
-		</tr>
-	{/each}
+		{#each rows as row}
+			<tr class="data-table__body__row">
+				{#each columns as { key, renderComponent }}
+					<td class="data-table__body__cell">
+						{#if renderComponent}
+							<renderComponent.component on:click={() => renderComponent.props.onclick(row)} />
+						{:else}
+							{row[key]}
+						{/if}
+					</td>
+				{/each}
+			</tr>
+		{/each}
 	</tbody>
 </table>
 

package/dist/IconBurger.stories.svelte

@@ -1,11 +1,8 @@
 <script module lang="ts">
 	import { IconBurger } from './index';
-	import {defineMeta} from '@storybook/addon-svelte-csf'
-
-	const {Story} = defineMeta({
-
-
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Icons/IconBurger',
 		component: IconBurger,
 		argTypes: {
@@ -20,7 +17,7 @@
 				max: 512
 			}
 		}
-	})
+	});
 </script>
 
 <Story name="Default" />

package/dist/IconInfo.stories.svelte

@@ -1,12 +1,9 @@
 <script module lang="ts">
 	import { IconInfo } from './index';
 
-	import {defineMeta} from '@storybook/addon-svelte-csf'
-
-	const {Story} = defineMeta({
-
-
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Icons/IconInfo',
 		type: 'Icons',
 		component: IconInfo,
@@ -22,7 +19,7 @@
 				max: 512
 			}
 		}
-	})
+	});
 </script>
 
 <Story name="Default" />

package/dist/IconIrocoLogo.stories.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
 	import { IconIrocoLogo } from './index';
-	import {defineMeta,setTemplate} from '@storybook/addon-svelte-csf'
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
-	const {Story} = defineMeta({
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Iroco/IconIrocoLogo',
 		component: IconIrocoLogo,
 		argTypes: {
@@ -20,7 +20,7 @@
 				control: { type: 'color' }
 			}
 		}
-	})
+	});
 </script>
 
 <script lang="ts">

package/dist/IconMoreSign.stories.svelte

@@ -21,4 +21,4 @@
 	});
 </script>
 
-<Story name="Default" />
+<Story name="Default" />

package/dist/IconTrashCan.stories.svelte

@@ -1,10 +1,9 @@
 <script module lang="ts">
 	import { IconTrashCan } from './index';
 
-	import {defineMeta} from '@storybook/addon-svelte-csf'
-
-	const {Story} = defineMeta({
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Icons/IconTrashCan',
 		component: IconTrashCan,
 		argTypes: {
@@ -19,7 +18,7 @@
 				max: 512
 			}
 		}
-	})
+	});
 </script>
 
 <Story name="Default" />

package/dist/ImageArticle.stories.svelte

@@ -8,7 +8,6 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
 		title: 'Iroco-UI/Components/ImageArticle',
 		component: ImageArticle,
 		argTypes: {
@@ -25,7 +24,8 @@
 					discordImageFile,
 					youtubeImageFile,
 					tutorialsImageFile,
-					tutorialsImageFile]
+					tutorialsImageFile
+				]
 			},
 			buttonList: {}
 		},
@@ -34,7 +34,8 @@
 			imgSrc: accessibilityImageFile,
 			figureCaption: undefined,
 			articleTitle: 'Accessibility',
-			articleContent: 'Accessibility is incredibly important, yet often overlooked in traditional digital design and development education. Because of this, The A11Y Project strives to be a living example of how to create beautiful, accessible, and inclusive digital experiences.',
+			articleContent:
+				'Accessibility is incredibly important, yet often overlooked in traditional digital design and development education. Because of this, The A11Y Project strives to be a living example of how to create beautiful, accessible, and inclusive digital experiences.',
 			buttonList: [
 				{ href: '/foo', label: 'Foo' },
 				{ href: '/bar', label: 'Bar' }
@@ -54,11 +55,15 @@
 
 <Story name="Default" />
 <Story name="Reversed" args={{ reversed: true }} />
-<Story name="Figure caption" args={{ figureCaption: "An optional caption for the figure" ,
-buttonList:[
-	{
-		href:"https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description",
-		label:"Learn about accessible description"
-	}
-	]
-}} />
+<Story
+	name="Figure caption"
+	args={{
+		figureCaption: 'An optional caption for the figure',
+		buttonList: [
+			{
+				href: 'https://developer.mozilla.org/en-US/docs/Glossary/Accessible_description',
+				label: 'Learn about accessible description'
+			}
+		]
+	}}
+/>

package/dist/ImageArticle.svelte

@@ -26,11 +26,9 @@
 
 <div class="imagearticle" class:reversed>
 	<figure class="imagearticle__figure">
-		<img class="imagearticle__figure__image"
-				 src={imgSrc}
-				 {alt} />
+		<img class="imagearticle__figure__image" src={imgSrc} {alt} />
 		{#if figureCaption}
-			<figcaption>{ figureCaption }</figcaption>
+			<figcaption>{figureCaption}</figcaption>
 		{/if}
 	</figure>
 

package/dist/IrocoLogo.stories.svelte

@@ -1,12 +1,9 @@
 <script module lang="ts">
 	import { IrocoLogo } from './index';
 
-	import {defineMeta,setTemplate} from '@storybook/addon-svelte-csf'
-
-	const {Story} = defineMeta({
-
-
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Iroco/IrocoLogo',
 		type: 'Icons',
 		component: IrocoLogo,
@@ -22,7 +19,7 @@
 				max: 512
 			}
 		}
-	})
+	});
 </script>
 
 <script lang="ts">

package/dist/IrocoLogo.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	interface Props {
 		href?: string;
 		ariaLabel?: string;

package/dist/Loader.stories.svelte

@@ -4,13 +4,12 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
-
 		title: 'Iroco-UI/Atoms/Loader',
 		component: Loader,
 		argTypes: {}
 	});
 </script>
+
 <script lang="ts">
 	setTemplate(template);
 </script>

package/dist/Loader.svelte

@@ -7,24 +7,24 @@
 </div>
 
 <style>
-    .rotate {
-        animation: rotation 2s;
-    }
+	.rotate {
+		animation: rotation 2s;
+	}
 
-    .linear {
-        animation-timing-function: linear;
-    }
+	.linear {
+		animation-timing-function: linear;
+	}
 
-    .infinite {
-        animation-iteration-count: infinite;
-    }
+	.infinite {
+		animation-iteration-count: infinite;
+	}
 
-    @keyframes rotation {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(359deg);
-        }
-    }
+	@keyframes rotation {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(359deg);
+		}
+	}
 </style>

package/dist/NavBar.stories.svelte

@@ -13,7 +13,7 @@
 			}
 		},
 		args: {
-			type:"topbar",
+			type: 'topbar',
 			navigationItems: [
 				new NavigationItem('About', `/about`),
 				new NavigationItem('Foo', `/foo`),
@@ -23,9 +23,9 @@
 				new NavigationItem('Form', `/form`, NavigationItemType.FORM)
 			]
 		}
-
 	});
 </script>
+
 <script lang="ts">
 	setTemplate(template);
 </script>
@@ -37,11 +37,14 @@
 <Story name="Default" />
 <Story name="Sidebar" args={{ type: 'sidebar' }} />
 <Story name="Topbar" args={{ type: 'topbar' }} />
-<Story name="Active" args={{
-		currentRoute:"/bar",
+<Story
+	name="Active"
+	args={{
+		currentRoute: '/bar',
 		navigationItems: [
-				new NavigationItem('About', `/about`),
-				new NavigationItem('Foo', `/foo`),
-				new NavigationItem('Bar', `/bar`),
-			]
-}} />
+			new NavigationItem('About', `/about`),
+			new NavigationItem('Foo', `/foo`),
+			new NavigationItem('Bar', `/bar`)
+		]
+	}}
+/>

package/dist/NavBar.svelte

@@ -8,11 +8,11 @@
 		navigationItems: Array<NavigationItem>;
 		type: 'sidebar' | 'topbar';
 		version?: string | null;
-		currentRoute?: string| null;
+		currentRoute?: string | null;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
 
-	let { navigationItems, type, version = null,currentRoute, onclick }: Props = $props();
+	let { navigationItems, type, version = null, currentRoute, onclick }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
@@ -26,14 +26,11 @@
 
 	function isActive(item: NavigationItem): boolean {
 		if (typeof item.hrefOrCallback === 'string') {
-			console.log("is string url",currentRoute);
 			const b = item.hrefOrCallback === currentRoute;
-			console.log("is active : ",b);
 			return b;
 		}
 		return false;
 	}
-
 </script>
 
 <nav data-testid={type} class="nav__{type}">

package/dist/Navigation.stories.svelte

@@ -4,8 +4,6 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
-
 		title: 'Iroco-UI/Components/Navigation',
 		component: Navigation,
 		argTypes: {
@@ -15,6 +13,7 @@
 		},
 		args: {
 			type: 'topbar',
+			currentRoute: '/foo',
 			navigationItems: [
 				new NavigationItem('About', `/about`),
 				new NavigationItem('Foo', `/foo`),
@@ -26,25 +25,27 @@
 		}
 	});
 </script>
+
 <script lang="ts">
 	setTemplate(template);
 </script>
 
 {#snippet template({ ...args })}
-	<Navigation
-		{...args}
-	/>
+	<Navigation {...args} />
 {/snippet}
 
 <Story name="Default" />
 <Story name="Sidebar" args={{ type: 'sidebar' }} />
 <Story name="Title" args={{ title: 'Alternative title' }} />
 <Story name="Color" args={{ color: '#ABCDEF' }} />
-<Story name="Active" args={{
-		currentRoute:"/bar",
+<Story
+	name="Active"
+	args={{
+		currentRoute: '/bar',
 		navigationItems: [
-				new NavigationItem('About', `/about`),
-				new NavigationItem('Foo', `/foo`),
-				new NavigationItem('Bar', `/bar`),
-			]
-}} />
+			new NavigationItem('About', `/about`),
+			new NavigationItem('Foo', `/foo`),
+			new NavigationItem('Bar', `/bar`)
+		]
+	}}
+/>

package/dist/Navigation.svelte

@@ -5,27 +5,26 @@
 
 	interface Props {
 		baseUrl?: string;
-		href?: string;
 		navigationItems: Array<NavigationItem>;
 		type?: 'sidebar' | 'topbar';
 		title?: string | null;
 		version?: string | null;
 		color?: Color | string;
-		currentRoute?:string | null;
+		currentRoute?: string | null;
 	}
 
-	let showMenu = $state(false);
-
 	let {
 		baseUrl = '',
-		href = `${baseUrl}/`,
 		navigationItems,
 		type = 'topbar',
-		title = null,
-		version = null,
+		title = '',
+		version = '',
 		color = Color.green,
-		currentRoute
+		currentRoute = '/foo'
 	}: Props = $props();
+
+	let showMenu = $state(false);
+	let href = $derived(`${baseUrl}/`);
 </script>
 
 <div class="navigation--mobile">
@@ -44,12 +43,12 @@
 
 	{#if showMenu}
 		<NavBar
-			on:click_link={() => (showMenu = false)}
-			on:click={() => (showMenu = false)}
-			{type}
 			{navigationItems}
 			{currentRoute}
+			{type}
 			{version}
+			on:click_link={() => (showMenu = false)}
+			on:click={() => (showMenu = false)}
 		/>
 	{/if}
 </div>
@@ -63,7 +62,7 @@
 			<h1><a class="navigation__title-link" {href}>{title}</a></h1>
 		{/if}
 	</div>
-	<NavBar {navigationItems} {type} {version} />
+	<NavBar {navigationItems} {currentRoute} {type} {version} />
 </div>
 
 <style>.container-wide {

package/dist/Navigation.svelte.d.ts

@@ -2,7 +2,6 @@ import type { NavigationItem } from './definition';
 import { Color } from './definition';
 interface Props {
     baseUrl?: string;
-    href?: string;
     navigationItems: Array<NavigationItem>;
     type?: 'sidebar' | 'topbar';
     title?: string | null;

package/dist/NumberInput.stories.svelte

@@ -4,8 +4,6 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
-
 		title: 'Iroco-UI/Form/NumberInput',
 		component: NumberInput,
 		argTypes: {
@@ -34,7 +32,6 @@
 	});
 </script>
 
-
 <script lang="ts">
 	setTemplate(template);
 </script>

package/dist/NumberInput.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
 
-	interface Props extends HTMLInputAttributes{
+	interface Props extends HTMLInputAttributes {
 		id: string;
 		label: string | '' | undefined;
 		placeholder?: string | '' | undefined;
@@ -9,7 +9,7 @@
 		value?: number | undefined;
 		min: number | undefined;
 		max: number | undefined;
-		onchange: ChangeEventHandler<HTMLInputElement> | null | undefined
+		onchange: ChangeEventHandler<HTMLInputElement> | null | undefined;
 	}
 
 	let {

package/dist/RadioButton.stories.svelte

@@ -1,26 +1,26 @@
 <script module lang="ts">
 	import { RadioButton } from './index';
 
-	import {defineMeta,setTemplate} from '@storybook/addon-svelte-csf'
-
-	const {Story} = defineMeta({
+	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
+	const { Story } = defineMeta({
 		title: 'Iroco-UI/Form/RadioButton',
-		component: RadioButton,
-	})
+		component: RadioButton
+	});
 	let group = $state('bar');
 </script>
+
 <script lang="ts">
 	setTemplate(template);
 </script>
 
 {#snippet template({ ...args })}
-		<form class="iroco-ui-form">
-			<RadioButton bind:group name="name-hello" value="hello" {...args}>Hello</RadioButton>
-			<RadioButton bind:group name="name-foo" value="foo">Foo</RadioButton>
-			<RadioButton bind:group name="name-bar" value="bar">Bar</RadioButton>
-		</form>
-		Selected group : {group}
-	{/snippet}
+	<form class="iroco-ui-form">
+		<RadioButton bind:group name="name-hello" value="hello" {...args}>Hello</RadioButton>
+		<RadioButton bind:group name="name-foo" value="foo">Foo</RadioButton>
+		<RadioButton bind:group name="name-bar" value="bar">Bar</RadioButton>
+	</form>
+	Selected group : {group}
+{/snippet}
 
 <Story name="Default" />

package/dist/RadioButton.svelte

@@ -9,22 +9,15 @@
 		children?: import('svelte').Snippet;
 	}
 
-	let {
-		value = null,
-		group = $bindable(null),
-		name = null,
-		checked,
-		children
-	}: Props = $props();
+	let { value = null, group = $bindable(null), name = null, checked, children }: Props = $props();
 
 	function onchange(event: Event) {
 		group = event.currentTarget.value;
 	}
-
 </script>
 
 <label class="iroco-ui-radio">
-	<input type="radio" bind:group={group} {value} {name} {checked} {onchange} />
+	<input type="radio" bind:group {value} {name} {checked} {onchange} />
 	<span class="radio-button-color"></span>
 	{@render children?.()}
 </label>

package/dist/TextInput.stories.svelte

@@ -4,8 +4,6 @@
 	import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
 	const { Story } = defineMeta({
-
-
 		title: 'Iroco-UI/Form/TextInput',
 		component: TextInput,
 		argTypes: {
@@ -16,13 +14,11 @@
 
 	let oninputFoo = $state<string | null>('');
 
-	function handleOnInput(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
+	function handleOnInput(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
 		oninputFoo = '' + event.data + ' ' + event.timeStamp;
 	}
-
 </script>
 
-
 <script lang="ts">
 	setTemplate(template);
 </script>

package/dist/TextInput.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	/* eslint-disable svelte/no-at-html-tags */
 	import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLInputAttributes {
@@ -35,7 +34,6 @@
 		autocomplete = 'on',
 		oninput
 	}: Props = $props();
-
 </script>
 
 <div class="iroco-ui-input">

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@iroco/ui",
-	"version": "1.1.4",
+	"version": "1.1.6",
 	"description": "Iroco design system based on Svelte",
 	"main": "dist/index.js",
 	"scripts": {
@@ -12,8 +12,8 @@
 		"build": "svelte-package",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
+		"lint": "prettier . --check . && eslint .",
+		"format": "prettier  . --write .",
 		"clean": "rm -rf dist && npm cache clean --force",
 		"release": "npm run format && npm run build && release-it --only-version",
 		"build-storybook": "storybook build --output-dir docs"
@@ -45,6 +45,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-storybook": "^0.11.2",
 		"eslint-plugin-svelte": "^2.46.1",
+		"espree": "^10.3.0",
 		"happy-dom": "^16.5.3",
 		"lint-staged": "^15.3.0",
 		"prettier": "^3.4.2",