Add avatar component

.nvmrc

@@ -1 +1 @@
-22
+23

apps/docs/docs.html

@@ -300,6 +300,28 @@ <h2>Form elements</h2>
 			</button>
 		</form>
 	</section>
+	<section id="avatar">
+		<h2>Avatar</h2>
+		<p>
+			Avatar images are styled automatically when alt text contains
+			"avatar" or "profile":
+		</p>
+		<div>
+			<img src="https://picsum.photos/id/237/150" alt="User avatar" />
+			<img src="https://picsum.photos/id/238/150" alt="Profile picture" />
+			<img src="https://picsum.photos/id/239/150" alt="John's avatar" />
+			<img
+				src="https://picsum.photos/id/236/150"
+				alt="Team member profile"
+			/>
+		</div>
+		<p>Avatars work in different contexts like navigation and content:</p>
+		<p>
+			<img src="https://picsum.photos/id/235/150" alt="Author avatar" />
+			Written by <strong>Alex Johnson</strong> - This article was written
+			by our lead developer.
+		</p>
+	</section>
 	<section id="modal">
 		<h2>Modal</h2>
 		<button class="contrast" onclick="modalExample.showModal()">

packages/main/src/compoments/_avatar.scss

@@ -0,0 +1,37 @@
+img[alt*="avatar" i],
+img[alt*="profile" i] {
+	border: 1px solid var(--border);
+	border-radius: 50%;
+	width: 2.5rem;
+	height: 2.5rem;
+	object-fit: cover;
+}
+
+/* Fallback for missing images */
+img[alt*="avatar" i]:not([src]),
+img[alt*="profile" i]:not([src]) {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--background-secondary);
+	color: var(--color-muted);
+	font-weight: 500;
+	font-size: 0.875rem;
+}
+
+/* Style for broken/loading images */
+img[alt*="avatar" i]::after,
+img[alt*="profile" i]::after {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background: var(--background-secondary);
+	width: 100%;
+	height: 100%;
+	content: attr(alt);
+	color: var(--color-muted);
+	font-weight: 500;
+	font-size: 0.75rem;
+	line-height: 1;
+	text-align: center;
+}

packages/main/src/compoments/_index.scss

@@ -14,3 +14,4 @@
 @use "form";
 @use "blog";
 @use "tabs";
+@use "avatar";