And avatar and update the other components.

Author: dedestem

src/lib/components/Avatar.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import { Icon } from "$lib/index.js";
+
+    export let id = "";
+</script>
+
+<div class="avatar">
+    {#if id === ""}
+        <Icon icon="account_circle"/>
+    {:else}
+        <Icon icon="mood_bad"/>
+    {/if}
+</div>
+
+<style>
+    .avatar {
+        margin: 0rem var(--token-space-2);
+    }
+</style>

src/lib/components/Inputs/TextField.svelte

@@ -9,9 +9,10 @@
 	export let invalidMessage: string = "Invalid";
 	export let required: boolean = false;
 	export let onEnter: (event: KeyboardEvent) => void = () => {};
+	export let width: "100%";
 </script>
 
-<div class="input-root">
+<div class="input-root" style="width: {width};">
 	<label for={id}>
 		{label}
 		{#if required}
@@ -39,6 +40,8 @@
 			<span class="material-symbols-outlined" aria-hidden="true">error</span>
 			{invalidMessage}
 		</div>
+	{:else}
+		<div class="error-placeholder"></div>
 	{/if}
 </div>
 
@@ -76,10 +79,13 @@
 
 	.error-message {
 		display: flex;
-		flex-direction: row;
 		align-items: center;
 		color: var(--token-color-text-danger);
 		gap: var(--token-space-1);
+		min-height: 1.4rem;
+		width: 100%;
+		white-space: normal;
+		overflow-wrap: break-word;
 		vertical-align: middle;
 	}
 

src/lib/components/Overlays/index.ts

@@ -1,2 +1,2 @@
 export { default as Modal } from "$lib/components/Overlays/Modal.svelte";
-export { default as ToolTip } from "$lib/components/Overlays/ToolTip.svelte";
+

src/lib/components/Primitives/Icon.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let icon: string;
+	export let size: string = "1rem";
+	export let color: string = "var(--token-color-text)";
+</script>
+
+<span style="color: {color}; font-size: {size};" class="icon material-symbols-outlined" translate="no" aria-hidden="true">{icon}</span>

src/lib/components/Overlays/ToolTip.svelte renamed to src/lib/components/Primitives/ToolTip.svelte

@@ -0,0 +1,2 @@
+export { default as Icon } from "$lib/components/Primitives/Icon.svelte";
+export { default as ToolTip } from "$lib/components/Primitives/ToolTip.svelte";

src/lib/components/Primitives/index.ts

@@ -4,6 +4,8 @@ export * from "$lib/components/Layout/index.js";
 export * from "$lib/components/Loading/index.js";
 export * from "$lib/components/Messaging/index.js";
 export * from "$lib/components/Overlays/index.js";
+export * from "$lib/components/Primitives/index.js";
 export * from "$lib/components/Themes/index.js";
 
 export { default as ConnectivityCheck } from "$lib/components/ConnectivityCheck.svelte";
+export { default as Avatar } from "$lib/components/Avatar.svelte";

src/lib/components/index.ts

@@ -4,10 +4,10 @@ export const metadata = {
   version: "1.9.1",
   packageName: "@davidnet/svelte-ui",
   npmUrl: "https://www.npmjs.com/package/@davidnet/svelte-ui",
-  commitHash: "7708191",
-  fullCommitHash: "7708191dc087cb3ee86badf1dce7b674c8a05696",
-  commitDate: "2025-08-06T19:23:08+02:00",
+  commitHash: "ec87e51",
+  fullCommitHash: "ec87e51d45a3bd1cc37938625667a7979b62d11a",
+  commitDate: "2025-08-10T12:05:07+02:00",
   branch: "main",
-  commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/7708191dc087cb3ee86badf1dce7b674c8a05696",
+  commitUrl: "https://github.com/davidnet-net/svelte-ui/commit/ec87e51d45a3bd1cc37938625667a7979b62d11a",
   repoUrl: "https://github.com/davidnet-net/svelte-ui"
 };