@iroco/ui 1.4.2 → 1.6.0

package/dist/Alert.svelte

@@ -54,4 +54,8 @@
   border: none;
   cursor: pointer;
   color: var(--color-icon-primary);
+}
+.alert__close:focus {
+  outline-color: var(--color-secondary);
+  outline-style: auto;
 }</style>

package/dist/Button.stories.svelte

@@ -30,7 +30,7 @@
 </script>
 
 {#snippet template({ ...args })}
-	<!--👇 'on:click' allows to forward event to addon-actions  -->
+	<!--👇 'onclick' allows to forward event to addon-actions  -->
 	<Button {...args} onclick={handleClick}>
 		You clicked: {count}
 	</Button>

package/dist/Button.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-	import type { MouseEventHandler } from 'svelte/elements';
+	import type {
+		HTMLButtonAttributes,
+		HTMLInputAttributes,
+		MouseEventHandler
+	} from 'svelte/elements';
 
-	interface Props {
-		type?: 'button' | 'reset' | 'submit' | null | undefined;
-		disabled?: boolean;
+	interface Props extends HTMLButtonAttributes {
 		kind?: 'danger' | 'success' | 'dark' | 'basic';
 		size?: 'small' | 'regular';
 		fullWidth?: boolean;
-		id?: string | null;
-		formaction?: string | null;
-		form?: string | null;
-		children?: import('svelte').Snippet;
-		onclick?: MouseEventHandler<HTMLButtonElement>;
 	}
 
 	let {
@@ -20,23 +17,15 @@
 		kind = 'basic',
 		size = 'regular',
 		fullWidth = false,
-		id = null,
-		formaction = null,
-		form = null,
 		children,
-		onclick
+		...rest
 	}: Props = $props();
 </script>
 
 <button
-	{id}
 	class={`iroco-ui-button iroco-ui-button--${size} iroco-ui-button--${kind} ${fullWidth ? 'iroco-ui-button--full-width' : ''}`}
 	class:disabled
-	{type}
-	{formaction}
-	{disabled}
-	{onclick}
-	{form}
+	{...rest}
 >
 	{@render children?.()}
 </button>
@@ -243,6 +232,10 @@
 .iroco-ui-button:active {
   box-shadow: none;
 }
+.iroco-ui-button:focus {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
 .iroco-ui-button.disabled, .iroco-ui-button:disabled {
   background-color: var(--btn-disabled-bg);
   color: var(--btn-disabled-label);

package/dist/Button.svelte.d.ts

@@ -1,15 +1,8 @@
-import type { MouseEventHandler } from 'svelte/elements';
-interface Props {
-    type?: 'button' | 'reset' | 'submit' | null | undefined;
-    disabled?: boolean;
+import type { HTMLButtonAttributes } from 'svelte/elements';
+interface Props extends HTMLButtonAttributes {
     kind?: 'danger' | 'success' | 'dark' | 'basic';
     size?: 'small' | 'regular';
     fullWidth?: boolean;
-    id?: string | null;
-    formaction?: string | null;
-    form?: string | null;
-    children?: import('svelte').Snippet;
-    onclick?: MouseEventHandler<HTMLButtonElement>;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/ImageArticle.svelte

@@ -252,6 +252,10 @@
 .iroco-ui-button:active {
   box-shadow: none;
 }
+.iroco-ui-button:focus {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
 .iroco-ui-button.disabled, .iroco-ui-button:disabled {
   background-color: var(--btn-disabled-bg);
   color: var(--btn-disabled-label);

package/dist/NavBar.stories.svelte

@@ -24,6 +24,14 @@
 			]
 		}
 	});
+
+	function handleClose() {
+		console.log('onclick');
+	}
+
+	function handleClickLink(e) {
+		console.log('onclick_link : ', e);
+	}
 </script>
 
 <script lang="ts">
@@ -31,7 +39,7 @@
 </script>
 
 {#snippet template({ ...args })}
-	<NavBar {...args} />
+	<NavBar {...args} onclick={handleClose} onclick_link={handleClickLink} />
 {/snippet}
 
 <Story name="Default" />

package/dist/NavBar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { IconClose } from './index';
-	import { createEventDispatcher } from 'svelte';
 	import { NavigationItem, NavigationItemType } from './definition.js';
 	import type { MouseEventHandler } from 'svelte/elements';
 
@@ -10,19 +9,17 @@
 		version?: string | null;
 		currentRoute?: string | null;
 		onclick?: MouseEventHandler<HTMLButtonElement>;
+		onclick_link?: MouseEventHandler<HTMLButtonElement>;
 	}
 
-	let { navigationItems, type, version = null, currentRoute, onclick }: Props = $props();
-
-	const dispatch = createEventDispatcher();
-
-	const handleClickLink = (menuItem: NavigationItem) => {
-		if (typeof menuItem.hrefOrCallback === 'function') {
-			menuItem.hrefOrCallback();
-			return false; // to avoid calling href
-		}
-		dispatch('click_link');
-	};
+	let {
+		navigationItems,
+		type,
+		version = null,
+		currentRoute,
+		onclick,
+		onclick_link
+	}: Props = $props();
 
 	function isActive(item: NavigationItem): boolean {
 		if (typeof item.hrefOrCallback === 'string') {
@@ -47,7 +44,13 @@
 					</form>
 				{:else}
 					<a
-						onclick={() => handleClickLink(item)}
+						onclick={() => {
+							if (typeof item.hrefOrCallback === 'function') {
+								item.hrefOrCallback();
+								return false; // to avoid calling href
+							}
+							onclick_link();
+						}}
 						href={typeof item.hrefOrCallback === 'string' ? item.hrefOrCallback : '#'}
 						class:iroco-ui-button={item.type === NavigationItemType.BUTTON}
 						class:iroco-ui-button--small={item.type === NavigationItemType.BUTTON}
@@ -264,6 +267,10 @@
 .iroco-ui-button:active {
   box-shadow: none;
 }
+.iroco-ui-button:focus {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
 .iroco-ui-button.disabled, .iroco-ui-button:disabled {
   background-color: var(--btn-disabled-bg);
   color: var(--btn-disabled-label);

package/dist/NavBar.svelte.d.ts

@@ -6,24 +6,8 @@ interface Props {
     version?: string | null;
     currentRoute?: string | null;
     onclick?: MouseEventHandler<HTMLButtonElement>;
+    onclick_link?: MouseEventHandler<HTMLButtonElement>;
 }
-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: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NavBar: $$__sveltets_2_IsomorphicComponent<Props, {
-    click_link: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type NavBar = InstanceType<typeof NavBar>;
+declare const NavBar: import("svelte").Component<Props, {}, "">;
+type NavBar = ReturnType<typeof NavBar>;
 export default NavBar;

package/dist/Navigation.svelte

@@ -47,8 +47,8 @@
 			{currentRoute}
 			{type}
 			{version}
-			on:click_link={() => (showMenu = false)}
-			on:click={() => (showMenu = false)}
+			onclick_link={() => (showMenu = false)}
+			onclick={() => (showMenu = false)}
 		/>
 	{/if}
 </div>

package/dist/NumberInput.svelte

@@ -1,35 +1,19 @@
 <script lang="ts">
-	import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLInputAttributes {
-		id: string;
-		label: string | '' | undefined;
-		placeholder?: string | '' | undefined;
+		label?: string | '' | undefined;
 		error?: string | undefined;
-		value?: number | undefined;
-		min: number | undefined;
-		max: number | undefined;
-		onchange: ChangeEventHandler<HTMLInputElement> | null | undefined;
 	}
 
-	let {
-		id,
-		label,
-		placeholder = '',
-		error = undefined,
-		value = $bindable(undefined),
-		min,
-		max,
-		onchange,
-		...rest
-	}: Props = $props();
+	let { id, label, error = undefined, ...rest }: Props = $props();
 </script>
 
 <div class="iroco-ui-input">
 	{#if label}
 		<label class="iroco-ui-label" for={id}>{label}</label>
 	{/if}
-	<input {onchange} bind:value {id} type="number" {placeholder} {min} {max} {...rest} />
+	<input {id} type="number" {...rest} />
 	{#if error}
 		<p data-testid="error" class="error">{error}</p>
 	{/if}
@@ -37,10 +21,16 @@
 
 <style>.iroco-ui-form input,
 .iroco-ui-form textarea {
-  outline: none;
+  outline-color: var(--color-secondary);
+  outline-style: ridge;
   text-decoration: none;
   font-size: 14px;
 }
+.iroco-ui-form input:focus,
+.iroco-ui-form textarea:focus {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
 .iroco-ui-form .iroco-ui-input {
   display: flex;
   flex-direction: column;
@@ -61,25 +51,59 @@
 .iroco-ui-form .iroco-ui-input > input.error {
   border-color: var(--color-danger);
 }
+.iroco-ui-form .iroco-ui-input > input.error:focus {
+  outline-color: var(--color-danger);
+}
 .iroco-ui-form .iroco-ui-input > input.readonlyInput {
   cursor: not-allowed;
 }
+.iroco-ui-form .iroco-ui-input > input.border {
+  border: 1px solid var(--form-element-border);
+}
 .iroco-ui-form .iroco-ui-label {
   color: var(--color-text-op-60);
   font-weight: bold;
   padding-bottom: 10px;
   display: inline-block;
 }
-.iroco-ui-form .field {
-  margin-top: 20px;
-}
-.iroco-ui-form .field:first-child {
-  margin: 0;
-}
-.iroco-ui-form > .submit {
-  margin-top: 40px;
-}
 .iroco-ui-form p.error {
   margin: 0;
   color: var(--color-danger);
+}
+
+/* radio button */
+.iroco-ui-radio {
+  color: var(--color-text);
+  position: relative;
+  margin-top: 0.5em;
+  padding-left: 1.5em;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.iroco-ui-radio input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+.iroco-ui-radio input:focus + .radio-button-color {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
+
+.radio-button-color {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1em;
+  width: 1em;
+  background-color: var(--form-element-bg);
+  border-radius: 50%;
+}
+
+.iroco-ui-radio input:checked ~ .radio-button-color {
+  background-color: var(--color-primary);
 }</style>

package/dist/NumberInput.svelte.d.ts

@@ -1,14 +1,8 @@
-import type { ChangeEventHandler, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-    id: string;
-    label: string | '' | undefined;
-    placeholder?: string | '' | undefined;
+    label?: string | '' | undefined;
     error?: string | undefined;
-    value?: number | undefined;
-    min: number | undefined;
-    max: number | undefined;
-    onchange: ChangeEventHandler<HTMLInputElement> | null | undefined;
 }
-declare const NumberInput: import("svelte").Component<Props, {}, "value">;
+declare const NumberInput: import("svelte").Component<Props, {}, "">;
 type NumberInput = ReturnType<typeof NumberInput>;
 export default NumberInput;

package/dist/RadioButton.svelte

@@ -2,27 +2,73 @@
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	interface Props extends HTMLInputAttributes {
-		value?: string | number | null;
 		group?: string | number | null;
-		name?: string | null;
-		checked?: boolean;
 		children?: import('svelte').Snippet;
 	}
 
-	let { value = null, group = $bindable(null), name = null, checked, children }: Props = $props();
-
-	function onchange(event: Event) {
-		group = event.currentTarget.value;
-	}
+	let { group = $bindable(null), children, ...others }: Props = $props();
 </script>
 
 <label class="iroco-ui-radio">
-	<input type="radio" bind:group {value} {name} {checked} {onchange} />
+	<input type="radio" bind:group {...others} />
 	<span class="radio-button-color"></span>
 	{@render children?.()}
 </label>
 
-<style>.iroco-ui-radio {
+<style>.iroco-ui-form input,
+.iroco-ui-form textarea {
+  outline-color: var(--color-secondary);
+  outline-style: ridge;
+  text-decoration: none;
+  font-size: 14px;
+}
+.iroco-ui-form input:focus,
+.iroco-ui-form textarea:focus {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
+.iroco-ui-form .iroco-ui-input {
+  display: flex;
+  flex-direction: column;
+}
+.iroco-ui-form .iroco-ui-input > input {
+  color: var(--color-text);
+  background: var(--color-body);
+  border: 1px solid var(--color-border);
+  padding: 1em 1.5em;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  border-radius: 0.5em;
+}
+.iroco-ui-form .iroco-ui-input > input::placeholder {
+  color: var(--color-text-op-50);
+}
+.iroco-ui-form .iroco-ui-input > input.error {
+  border-color: var(--color-danger);
+}
+.iroco-ui-form .iroco-ui-input > input.error:focus {
+  outline-color: var(--color-danger);
+}
+.iroco-ui-form .iroco-ui-input > input.readonlyInput {
+  cursor: not-allowed;
+}
+.iroco-ui-form .iroco-ui-input > input.border {
+  border: 1px solid var(--form-element-border);
+}
+.iroco-ui-form .iroco-ui-label {
+  color: var(--color-text-op-60);
+  font-weight: bold;
+  padding-bottom: 10px;
+  display: inline-block;
+}
+.iroco-ui-form p.error {
+  margin: 0;
+  color: var(--color-danger);
+}
+
+/* radio button */
+.iroco-ui-radio {
   color: var(--color-text);
   position: relative;
   margin-top: 0.5em;
@@ -39,6 +85,10 @@
   opacity: 0;
   cursor: pointer;
 }
+.iroco-ui-radio input:focus + .radio-button-color {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
 
 .radio-button-color {
   position: absolute;

package/dist/RadioButton.svelte.d.ts

@@ -1,9 +1,6 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 interface Props extends HTMLInputAttributes {
-    value?: string | number | null;
     group?: string | number | null;
-    name?: string | null;
-    checked?: boolean;
     children?: import('svelte').Snippet;
 }
 declare const RadioButton: import("svelte").Component<Props, {}, "group">;

package/dist/TextInput.svelte

@@ -1,46 +1,30 @@
 <script lang="ts">
-	import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes } from 'svelte/elements';
 
 	export type ValidationErrorMessage = { key: string; isHtml?: boolean };
 
 	interface Props extends HTMLInputAttributes {
-		id?: string | null;
-		type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | null | undefined;
-		name?: string | null;
 		label?: string | null;
-		placeholder?: string | null;
 		error?: string | null;
 		errors?: Array<ValidationErrorMessage> | null;
 		htmlError?: boolean;
-		value?: string | null;
-		onFocus?: ((e: FocusEvent) => void) | null;
-		onBlur?: ((e: Event) => void) | null;
-		readonly?: boolean;
 		border?: boolean;
-		autocomplete?: FullAutoFill | null | undefined;
-		oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
 	}
 
 	let {
-		id = null,
 		type = 'text',
-		name = null,
 		label = null,
-		placeholder = null,
 		error = null,
-		errors = null,
+		errors = [],
 		htmlError = false,
-		value = $bindable(null),
-		onFocus = null,
-		onBlur = null,
-		readonly = false,
 		border = false,
 		autocomplete = 'on',
-		oninput
+		readonly,
+		...rest
 	}: Props = $props();
 
 	function hasErrors() {
-		return error !== null || errors?.length > 0;
+		return error !== null || (errors?.length ?? 0) > 0;
 	}
 </script>
 
@@ -49,19 +33,12 @@
 		<label class="iroco-ui-label" for={id}>{label}</label>
 	{/if}
 	<input
-		{oninput}
-		bind:value
-		onfocus={onFocus}
-		onblur={onBlur}
-		{id}
 		{type}
-		{name}
-		{placeholder}
 		class:border
 		class:error={hasErrors()}
 		class:readonlyInput={readonly === true}
-		{readonly}
 		{autocomplete}
+		{...rest}
 	/>
 	{#if error != null}
 		<p data-testid="error" class="error">
@@ -74,59 +51,91 @@
 	{/if}
 </div>
 
-<style>input,
-textarea {
-  outline: none;
+<style>.iroco-ui-form input,
+.iroco-ui-form textarea {
+  outline-color: var(--color-secondary);
+  outline-style: ridge;
   text-decoration: none;
   font-size: 14px;
 }
-input:focus,
-textarea:focus {
-  outline: none;
-  text-decoration: none;
-  font-size: 14px;
+.iroco-ui-form input:focus,
+.iroco-ui-form textarea:focus {
+  outline-color: var(--color-primary);
+  outline-style: auto;
 }
-
-.iroco-ui-input {
+.iroco-ui-form .iroco-ui-input {
   display: flex;
   flex-direction: column;
 }
-.iroco-ui-input > input {
+.iroco-ui-form .iroco-ui-input > input {
   color: var(--color-text);
-  background: var(--color-dark-blue);
-  border: 1px solid var(--color-dark-blue);
+  background: var(--color-body);
+  border: 1px solid var(--color-border);
   padding: 1em 1.5em;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  border-radius: 0.3em;
-}
-.iroco-ui-input > input.border {
-  border: 1px solid var(--form-element-border);
+  border-radius: 0.5em;
 }
-.iroco-ui-input > input::placeholder {
+.iroco-ui-form .iroco-ui-input > input::placeholder {
   color: var(--color-text-op-50);
 }
-.iroco-ui-input > input.error {
+.iroco-ui-form .iroco-ui-input > input.error {
   border-color: var(--color-danger);
 }
-.iroco-ui-input > input.readonlyInput {
+.iroco-ui-form .iroco-ui-input > input.error:focus {
+  outline-color: var(--color-danger);
+}
+.iroco-ui-form .iroco-ui-input > input.readonlyInput {
   cursor: not-allowed;
 }
-.iroco-ui-input .error {
-  color: var(--color-danger);
+.iroco-ui-form .iroco-ui-input > input.border {
+  border: 1px solid var(--form-element-border);
 }
-
-.iroco-ui-label {
+.iroco-ui-form .iroco-ui-label {
   color: var(--color-text-op-60);
   font-weight: bold;
   padding-bottom: 10px;
   display: inline-block;
 }
+.iroco-ui-form p.error {
+  margin: 0;
+  color: var(--color-danger);
+}
 
-.field {
-  margin-top: 20px;
+/* radio button */
+.iroco-ui-radio {
+  color: var(--color-text);
+  position: relative;
+  margin-top: 0.5em;
+  padding-left: 1.5em;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
-.field:first-child {
-  margin: 0;
+
+.iroco-ui-radio input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+}
+.iroco-ui-radio input:focus + .radio-button-color {
+  outline-color: var(--color-primary);
+  outline-style: auto;
+}
+
+.radio-button-color {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 1em;
+  width: 1em;
+  background-color: var(--form-element-bg);
+  border-radius: 50%;
+}
+
+.iroco-ui-radio input:checked ~ .radio-button-color {
+  background-color: var(--color-primary);
 }</style>

package/dist/TextInput.svelte.d.ts

@@ -1,25 +1,15 @@
-import type { FormEventHandler, FullAutoFill, HTMLInputAttributes } from 'svelte/elements';
+import type { HTMLInputAttributes } from 'svelte/elements';
 export type ValidationErrorMessage = {
     key: string;
     isHtml?: boolean;
 };
 interface Props extends HTMLInputAttributes {
-    id?: string | null;
-    type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | null | undefined;
-    name?: string | null;
     label?: string | null;
-    placeholder?: string | null;
     error?: string | null;
     errors?: Array<ValidationErrorMessage> | null;
     htmlError?: boolean;
-    value?: string | null;
-    onFocus?: ((e: FocusEvent) => void) | null;
-    onBlur?: ((e: Event) => void) | null;
-    readonly?: boolean;
     border?: boolean;
-    autocomplete?: FullAutoFill | null | undefined;
-    oninput?: FormEventHandler<HTMLInputElement> | null | undefined;
 }
-declare const TextInput: import("svelte").Component<Props, {}, "value">;
+declare const TextInput: import("svelte").Component<Props, {}, "">;
 type TextInput = ReturnType<typeof TextInput>;
 export default TextInput;

package/dist/scss/button.scss

@@ -1,4 +1,3 @@
-//@use './colors';
 @use './fonts';
 @use './containers';
 @use './constants';
@@ -59,6 +58,11 @@
 		box-shadow: none;
 	}
 
+	&:focus {
+		outline-color: var(--color-primary);
+		outline-style: auto;
+	}
+
 	&.disabled,
 	&:disabled {
 		background-color: var(--btn-disabled-bg);

package/dist/scss/forms.scss

@@ -1,18 +1,26 @@
 .iroco-ui-form {
 	input,
 	textarea {
-		outline: none;
+		outline-color: var(--color-secondary);
+		outline-style: ridge;
 		text-decoration: none;
 		font-size: 14px;
+
+		&:focus {
+			outline-color: var(--color-primary);
+			outline-style: auto;
+		}
 	}
 
 	.iroco-ui-input {
 		display: flex;
 		flex-direction: column;
+
 		> input {
 			color: var(--color-text);
 			background: var(--color-body);
 			border: 1px solid var(--color-border);
+			//border: 1px solid var(--color-dark-blue);
 			padding: 1em 1.5em;
 			text-overflow: ellipsis;
 			white-space: nowrap;
@@ -22,12 +30,22 @@
 			&::placeholder {
 				color: var(--color-text-op-50);
 			}
+
 			&.error {
 				border-color: var(--color-danger);
+
+				&:focus {
+					outline-color: var(--color-danger);
+				}
 			}
+
 			&.readonlyInput {
 				cursor: not-allowed;
 			}
+
+			&.border {
+				border: 1px solid var(--form-element-border);
+			}
 		}
 	}
 
@@ -38,20 +56,47 @@
 		display: inline-block;
 	}
 
-	.field {
-		margin-top: 20px;
-
-		&:first-child {
-			margin: 0;
-		}
-	}
-
-	> .submit {
-		margin-top: 40px;
-	}
-
 	p.error {
 		margin: 0;
 		color: var(--color-danger);
 	}
 }
+
+/* radio button */
+
+.iroco-ui-radio {
+	color: var(--color-text);
+	position: relative;
+	margin-top: 0.5em;
+	padding-left: 1.5em;
+	cursor: pointer;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.iroco-ui-radio input {
+	position: absolute;
+	opacity: 0;
+	cursor: pointer;
+
+	&:focus + .radio-button-color {
+		outline-color: var(--color-primary);
+		outline-style: auto;
+	}
+}
+
+.radio-button-color {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: 1em;
+	width: 1em;
+	background-color: var(--form-element-bg);
+	border-radius: 50%;
+}
+
+.iroco-ui-radio input:checked ~ .radio-button-color {
+	background-color: var(--color-primary);
+}

package/dist/scss/style.scss

@@ -1,5 +1,11 @@
-//@use 'colors';
 @use 'containers';
 @use 'fonts';
 @use 'forms';
 @use 'layouts';
+
+button:focus,
+a:focus,
+input:focus {
+	outline-color: var(--color-primary);
+	outline-style: auto;
+}

package/package.json

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

package/dist/scss/fields/_checkbox.scss

@@ -1,39 +0,0 @@
-.ui-fields-checkbox {
-	> .container {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-
-		> label {
-			@include Arial(0.9em, #00b9ff /*$blue*/, bold);
-			letter-spacing: 0.05em;
-			text-transform: uppercase;
-			display: inline-block;
-			margin-left: 20px;
-
-			@include small-screen() {
-				font-size: 0.8em;
-				margin-left: 15px;
-			}
-		}
-	}
-
-	> .error,
-	> .warning {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		margin-top: 15px;
-
-		> span {
-			@include Arial(0.9em, var(--color-danger) /* red */);
-			margin-left: 10px;
-		}
-	}
-
-	> .warning {
-		> span {
-			color: #00b9ff /*$blue*/;
-		}
-	}
-}

package/dist/scss/fields/_input.scss

@@ -1,158 +0,0 @@
-//@use './../colors';
-.ui-fields-input {
-	width: 100%;
-	transition: width linear 100ms;
-
-	> label {
-		@include Arial(1em, white, bold);
-		letter-spacing: 0.05em;
-		text-transform: uppercase;
-		padding-bottom: 10px;
-		display: inline-block;
-	}
-
-	input,
-	input:active,
-	input:focus {
-		border: none;
-		outline: none;
-		text-decoration: none;
-		background: transparent;
-	}
-
-	> .container {
-		transition: background linear 100ms;
-		background: white;
-		width: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		position: relative;
-
-		&:after {
-			content: '';
-			display: block;
-			position: absolute;
-			bottom: 0;
-			left: 0;
-			width: 0;
-			height: 3px;
-			background: var(--color-primary);
-			transition: all 400ms cubic-bezier(0.215, 0.61, 0.355, 1);
-		}
-
-		> .left-icon {
-			padding-left: 15px;
-		}
-
-		> input {
-			@include Arial(1em, #211d28); /* $darkBlue */
-			flex: 1;
-			padding: 10px 15px;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-
-			&::placeholder {
-				color: var(--color-dark-blue-op-30);
-				font-style: italic;
-			}
-		}
-
-		> .suggestions {
-			overflow: hidden;
-			visibility: hidden;
-			opacity: 0;
-			position: absolute;
-			background: white;
-			width: 100%;
-			top: 100%;
-			transition: opacity linear 100ms;
-			@include modal-layout();
-
-			> .suggestion {
-				display: block;
-				text-align: left;
-				width: 100%;
-				border: none;
-				cursor: pointer;
-				-webkit-touch-callout: none;
-				-webkit-user-select: none;
-				-moz-user-select: none;
-				-ms-user-select: none;
-				user-select: none;
-				flex-shrink: 0;
-				border-top: solid var(--color-beige) 1px;
-				background: white;
-				transition: background linear 100ms;
-
-				&:first-child {
-					border: none;
-				}
-
-				&:hover,
-				&.selected {
-					background: #f5f5f5 /*lighGrey*/;
-				}
-			}
-		}
-	}
-
-	> .instructions {
-		@include Arial(1em, var(--color-secondary-dark) /*$darkBeige*/);
-		margin-top: 10px;
-	}
-
-	> .error,
-	> .warning {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		margin-top: 15px;
-
-		> span {
-			@include Arial(0.9em, var(--color-danger) /*$red*/);
-			margin-left: 10px;
-		}
-	}
-
-	> .warning {
-		> span {
-			color: #00b9ff /*$blue*/;
-		}
-	}
-
-	&.active {
-		> .container {
-			&:after {
-				width: 100%;
-			}
-
-			> .suggestions.active {
-				visibility: visible;
-				opacity: 1;
-			}
-		}
-	}
-
-	&.dark {
-		> .container {
-			background: var(--color-body);
-
-			> input {
-				padding: 15px 20px;
-
-				&::placeholder {
-					color: var(--color-white-op-30);
-				}
-			}
-		}
-
-		&.active,
-		&.touched {
-			> .container {
-				background: white;
-			}
-		}
-	}
-}

package/dist/scss/fields/_style.scss

@@ -1,2 +0,0 @@
-@use 'input';
-@use 'checkbox';