@marianmeres/stuic 2.65.0 → 3.0.0

package/dist/components/AlertConfirmPrompt/Current.svelte.d.ts

@@ -1,4 +1,6 @@
+import type { IntentColorKey } from "../../utils/design-tokens.js";
 import { type AlertConfirmPromptStack } from "./alert-confirm-prompt-stack.svelte.js";
+import "./index.css";
 interface Props {
     acp?: AlertConfirmPromptStack;
     isPending?: boolean;
@@ -19,9 +21,9 @@ interface Props {
     classButtonCancel?: string;
     classButtonCustom?: string;
     classButtonPrimary?: string;
-    variantButtonCancel?: string;
-    variantButtonCustom?: string;
-    variantButtonPrimary?: string;
+    intentButtonCancel?: IntentColorKey;
+    intentButtonCustom?: IntentColorKey;
+    intentButtonPrimary?: IntentColorKey;
     classSpinnerBox?: string;
     defaultIcons?: Partial<Record<"info" | "success" | "warn" | "error" | "spinner", () => string | undefined>>;
 }

package/dist/components/AlertConfirmPrompt/acp-icons.js

@@ -1,8 +1,9 @@
 import { iconAlertInfo, iconAlertSuccess, iconAlertWarning, iconAlertError, iconRefresh, } from "../../icons/index.js";
+const size = 23;
 export const acpDefaultIcons = {
-    info: () => iconAlertInfo({ size: 24 }),
-    success: () => iconAlertSuccess({}),
-    warn: () => iconAlertWarning({ class: "-mt-[3px]" }), // move up a little because it looks better with the triangle
-    error: () => iconAlertError({}),
+    info: () => iconAlertInfo({ size }),
+    success: () => iconAlertSuccess({ size }),
+    warn: () => iconAlertWarning({ size, class: "-mt-[2px]" }), // move up a little because it looks better with the triangle
+    error: () => iconAlertError({ size }),
     spinner: () => iconRefresh({ size: 32, class: "opacity-50" }),
 };

package/dist/components/AlertConfirmPrompt/index.css

@@ -0,0 +1,62 @@
+/* ============================================================================
+   ALERT CONFIRM PROMPT COMPONENT TOKENS
+   Override globally: :root { --stuic-acp-icon-box-radius: 0; }
+   Override locally:  <AlertConfirmPrompt style="--stuic-acp-icon-box-radius: 4px;">
+   ============================================================================ */
+
+:root {
+	--stuic-acp-icon-box-radius: 9999px;
+	--stuic-acp-spinner-overlay-opacity: 0.75;
+}
+
+/* ============================================================================
+   ICON BOX - colors set by variant
+   ============================================================================ */
+
+.stuic-acp .icon-box {
+	background: var(--_icon-bg);
+	color: var(--_icon-text);
+	border-radius: var(--stuic-acp-icon-box-radius);
+}
+
+/* ============================================================================
+   SPINNER OVERLAY - uses surface color
+   ============================================================================ */
+
+.stuic-acp .spinner-box {
+	background: color-mix(
+		in srgb,
+		var(--stuic-color-surface) calc(var(--stuic-acp-spinner-overlay-opacity) * 100%),
+		transparent
+	);
+}
+
+/* ============================================================================
+   VARIANT COLOR MAPPING
+   Each variant sets internal CSS vars for the icon box.
+   ============================================================================ */
+
+/* Variant: info (default) */
+.stuic-acp[data-variant='info'],
+.stuic-acp:not([data-variant]) {
+	--_icon-bg: color-mix(in srgb, var(--stuic-color-info) 15%, transparent);
+	--_icon-text: var(--stuic-color-info);
+}
+
+/* Variant: success */
+.stuic-acp[data-variant='success'] {
+	--_icon-bg: color-mix(in srgb, var(--stuic-color-success) 15%, transparent);
+	--_icon-text: var(--stuic-color-success);
+}
+
+/* Variant: warn */
+.stuic-acp[data-variant='warn'] {
+	--_icon-bg: color-mix(in srgb, var(--stuic-color-warning) 15%, transparent);
+	--_icon-text: var(--stuic-color-warning);
+}
+
+/* Variant: error */
+.stuic-acp[data-variant='error'] {
+	--_icon-bg: color-mix(in srgb, var(--stuic-color-destructive) 15%, transparent);
+	--_icon-text: var(--stuic-color-destructive);
+}

package/dist/components/AssetsPreview/AssetsPreview.svelte

@@ -171,6 +171,8 @@
 </script>
 
 <script lang="ts">
+	import "./index.css";
+	import Button from "../Button/Button.svelte";
 	const clog = createClog("AssetsPreview", { color: "auto" });
 
 	let {
@@ -219,7 +221,13 @@
 	let imgEl: HTMLImageElement | null = null;
 	let containerEl: HTMLDivElement | null = $state(null);
 
-	const TOP_BUTTON_CLS = "rounded bg-white hover:bg-neutral-200 p-1";
+	const BUTTON_CLS = "stuic-assets-preview-control pointer-events-auto p-0!";
+
+	const BUTTON_PROPS = {
+		aspect1: true,
+		variant: "soft",
+		roundedFull: true,
+	};
 
 	$effect(() => {
 		const visible = modal?.visibility().visible;
@@ -457,6 +465,7 @@
 		previewIdx = idx % assets.length;
 	}
 
+	const ICON_SIZE = 24;
 	// $inspect(assets).with(clog);
 </script>
 
@@ -513,7 +522,9 @@
 							class: "mx-auto",
 						})}
 					</div>
-					<div class="opacity-50 mt-4">{t("unable_to_preview")}</div>
+					<div class="text-(--stuic-color-muted-foreground) mt-4">
+						{t("unable_to_preview")}
+					</div>
 				</div>
 			{/if}
 
@@ -521,95 +532,103 @@
 				<div
 					class="absolute inset-0 flex items-center justify-between pointer-events-none"
 				>
-					<button
-						class={twMerge("p-4 pointer-events-auto", classControls)}
+					<!-- class={twMerge("p-4 aspect-square pointer-events-auto", classControls)} -->
+					<Button
+						class={twMerge(BUTTON_CLS, "ml-4", classControls)}
 						onclick={preview_previous}
 						type="button"
+						{...BUTTON_PROPS}
 					>
-						<span class="bg-white rounded-full p-3 block">
-							{@html iconPrevious()}
-						</span>
-					</button>
-
-					<button
-						class={twMerge("p-4 pointer-events-auto", classControls)}
+						<!-- <span class="stuic-assets-preview-control-nav p-3 block"> -->
+						{@html iconPrevious({ size: ICON_SIZE })}
+						<!-- </span> -->
+					</Button>
+
+					<!-- class={twMerge("p-4 aspect-square pointer-events-auto", classControls)} -->
+					<Button
+						class={twMerge(BUTTON_CLS, "mr-4", classControls)}
 						onclick={preview_next}
 						type="button"
+						{...BUTTON_PROPS}
 					>
-						<span class="bg-white rounded-full p-3 block">
-							{@html iconNext()}
-						</span>
-					</button>
+						<!-- <span class="stuic-assets-preview-control-nav p-3 block"> -->
+						{@html iconNext({ size: ICON_SIZE })}
+						<!-- </span> -->
+					</Button>
 				</div>
 			{/if}
 
 			<div class="absolute top-4 left-4 right-4 flex items-center justify-between gap-3">
 				{#if !noName && previewAsset?.name}
-					<span class="truncate bg-white px-1 rounded">
+					<span class="stuic-assets-preview-label truncate px-1">
 						{previewAsset?.name}
 					</span>
 				{:else}
 					<span></span>
 				{/if}
 				<div class="flex items-center space-x-3 shrink-0">
-				{#if previewAsset.isImage}
-					<button
-						class={twMerge(TOP_BUTTON_CLS, classControls)}
-						type="button"
-						onclick={zoomOut}
-						disabled={zoomLevelIdx === 0}
-						aria-label={t("zoom_out")}
-						use:tooltip={() => ({ content: t("zoom_out") })}
-					>
-						{@html iconZoomOut({ class: "size-6" })}
-					</button>
-
-					<button
-						class={twMerge(TOP_BUTTON_CLS, classControls)}
+					{#if previewAsset.isImage}
+						<Button
+							class={twMerge(BUTTON_CLS, classControls)}
+							type="button"
+							onclick={zoomOut}
+							disabled={zoomLevelIdx === 0}
+							aria-label={t("zoom_out")}
+							tooltip={t("zoom_out")}
+							{...BUTTON_PROPS}
+						>
+							{@html iconZoomOut({ size: ICON_SIZE })}
+						</Button>
+
+						<Button
+							class={twMerge(BUTTON_CLS, classControls)}
+							type="button"
+							onclick={zoomIn}
+							disabled={zoomLevelIdx === ZOOM_LEVELS.length - 1}
+							aria-label={t("zoom_in")}
+							tooltip={t("zoom_in")}
+							{...BUTTON_PROPS}
+						>
+							{@html iconZoomIn({ size: ICON_SIZE })}
+						</Button>
+					{/if}
+
+					{#if typeof onDelete === "function"}
+						<Button
+							class={twMerge(BUTTON_CLS, classControls)}
+							type="button"
+							onclick={() => onDelete(previewAsset, previewIdx, { close })}
+							aria-label={t("delete")}
+							tooltip={t("delete")}
+							{...BUTTON_PROPS}
+						>
+							{@html iconDelete({ size: ICON_SIZE })}
+						</Button>
+					{/if}
+
+					<Button
+						class={twMerge(BUTTON_CLS, classControls)}
 						type="button"
-						onclick={zoomIn}
-						disabled={zoomLevelIdx === ZOOM_LEVELS.length - 1}
-						aria-label={t("zoom_in")}
-						use:tooltip={() => ({ content: t("zoom_in") })}
+						onclick={(e) => {
+							e.preventDefault();
+							forceDownload(String(previewAsset.url.original), previewAsset?.name || "");
+						}}
+						aria-label={t("download")}
+						tooltip={t("download")}
+						{...BUTTON_PROPS}
 					>
-						{@html iconZoomIn({ class: "size-6" })}
-					</button>
-				{/if}
+						{@html iconDownload({ size: ICON_SIZE })}
+					</Button>
 
-				{#if typeof onDelete === "function"}
-					<button
-						class={twMerge(TOP_BUTTON_CLS, classControls)}
+					<Button
+						class={twMerge(BUTTON_CLS, classControls)}
+						onclick={modal?.close}
+						aria-label={t("close")}
 						type="button"
-						onclick={() => onDelete(previewAsset, previewIdx, { close })}
-						aria-label={t("delete")}
-						use:tooltip
-					>
-						{@html iconDelete({ class: "size-6" })}
-					</button>
-				{/if}
-
-				<button
-					class={twMerge(TOP_BUTTON_CLS, classControls)}
-					type="button"
-					onclick={(e) => {
-						e.preventDefault();
-						forceDownload(String(previewAsset.url.original), previewAsset?.name || "");
-					}}
-					aria-label={t("download")}
-					use:tooltip
-				>
-					{@html iconDownload({ class: "size-6" })}
-				</button>
-
-				<button
-					class={twMerge(TOP_BUTTON_CLS, classControls)}
-					onclick={modal?.close}
-					aria-label={t("close")}
-					type="button"
-					use:tooltip
-				>
-					<X />
-				</button>
+						tooltip={t("close")}
+						{...BUTTON_PROPS}
+						x
+					/>
 				</div>
 			</div>
 
@@ -619,7 +638,7 @@
 						class="absolute bottom-10 left-0 right-0 text-center"
 						transition:fade={{ duration: 100 }}
 					>
-						<span class="bg-white p-1 rounded opacity/75">
+						<span class="stuic-assets-preview-label p-1">
 							{dotTooltip}
 						</span>
 					</div>
@@ -630,8 +649,8 @@
 						<button
 							type="button"
 							class={twMerge(
-								"size-3 rounded-full transition-colors border border-black/50",
-								i === previewIdx ? "bg-white" : "bg-white/50 hover:bg-neutral-200"
+								"stuic-assets-preview-dot",
+								i === previewIdx ? "active" : ""
 							)}
 							onclick={() => {
 								previewIdx = i;

package/dist/components/AssetsPreview/AssetsPreview.svelte.d.ts

@@ -26,6 +26,7 @@ export interface Props {
     clampPan?: boolean;
 }
 export declare function getAssetIcon(ext?: string): CallableFunction;
+import "./index.css";
 declare const AssetsPreview: import("svelte").Component<Props, {
     open: (index?: number) => void;
     close: () => void;

package/dist/components/AssetsPreview/index.css

@@ -0,0 +1,59 @@
+/* ============================================================================
+   ASSETS PREVIEW COMPONENT TOKENS
+   Override globally: :root { --stuic-assets-preview-control-bg: var(--stuic-color-muted); }
+   Override locally:  <AssetsPreview style="--stuic-assets-preview-control-bg: red;">
+   ============================================================================ */
+
+:root {
+	/* Control buttons (zoom, download, close, prev/next) */
+
+	/* Labels (filename, tooltip) */
+	--stuic-assets-preview-label-bg: var(--stuic-color-surface);
+	--stuic-assets-preview-label-text: var(--stuic-color-surface-foreground);
+	--stuic-assets-preview-label-radius: var(--radius-sm);
+
+	/* Dot indicators */
+	--stuic-assets-preview-dot-size: 0.75rem;
+	--stuic-assets-preview-dot-bg: color-mix(
+		in srgb,
+		var(--stuic-color-surface) 50%,
+		transparent
+	);
+	--stuic-assets-preview-dot-bg-active: var(--stuic-color-surface);
+	--stuic-assets-preview-dot-bg-hover: var(--stuic-color-surface-hover);
+	--stuic-assets-preview-dot-border: var(--stuic-color-border);
+
+	/* Transition */
+	--stuic-assets-preview-transition: 150ms;
+}
+
+/* ============================================================================
+   LABELS (filename display, tooltip)
+   ============================================================================ */
+
+.stuic-assets-preview-label {
+	background: var(--stuic-assets-preview-label-bg);
+	color: var(--stuic-assets-preview-label-text);
+	border-radius: var(--stuic-assets-preview-label-radius);
+}
+
+/* ============================================================================
+   DOT INDICATORS (pagination dots)
+   ============================================================================ */
+
+.stuic-assets-preview-dot {
+	width: var(--stuic-assets-preview-dot-size);
+	height: var(--stuic-assets-preview-dot-size);
+	border-radius: 9999px;
+	background: var(--stuic-assets-preview-dot-bg);
+	border: 1px solid var(--stuic-assets-preview-dot-border);
+	transition: background var(--stuic-assets-preview-transition);
+}
+
+.stuic-assets-preview-dot:hover {
+	background: var(--stuic-assets-preview-dot-bg-hover);
+}
+
+.stuic-assets-preview-dot.active {
+	background: var(--stuic-assets-preview-dot-bg-active);
+}

package/dist/components/Avatar/Avatar.svelte

@@ -39,6 +39,7 @@
 </script>
 
 <script lang="ts">
+	import "./index.css";
 	import { twMerge } from "../../utils/tw-merge.js";
 	import { generateAvatarColors } from "../../utils/avatar-colors.js";
 	import { iconUser as defaultIconUser } from "../../icons/index.js";
@@ -60,14 +61,19 @@
 		el = $bindable(),
 	}: Props = $props();
 
-	const SIZE_PRESETS: Record<string, { container: string; icon: number }> = {
-		sm: { container: "size-8 text-xs", icon: 16 },
-		md: { container: "size-10 text-base", icon: 20 },
-		lg: { container: "size-12 text-lg", icon: 28 },
-		xl: { container: "size-14 text-xl", icon: 32 },
-		"2xl": { container: "size-16 text-2xl", icon: 36 },
+	// Icon sizes for preset sizes (visual sizes are handled by CSS)
+	const ICON_SIZES: Record<string, number> = {
+		sm: 16,
+		md: 20,
+		lg: 28,
+		xl: 32,
+		"2xl": 36,
 	};
 
+	// Check if size is a known preset
+	const isPresetSize = (s: string): s is "sm" | "md" | "lg" | "xl" | "2xl" =>
+		s in ICON_SIZES;
+
 	// Extract initials from input string (email, name, or raw initials)
 	function extractInitials(input: string, length: number): string {
 		let _input = (input || "").trim();
@@ -145,8 +151,7 @@
 
 	// Get icon size based on preset or custom size
 	let iconSize = $derived.by(() => {
-		const preset = SIZE_PRESETS[size];
-		if (preset) return preset.icon;
+		if (isPresetSize(size)) return ICON_SIZES[size];
 
 		// For custom sizes, try to parse size-N pattern
 		const match = size?.match(/size-(\d+)/);
@@ -162,25 +167,21 @@
 		autoColor ? generateAvatarColors(hashSource || initialsProp || "") : null
 	);
 
-	let sizeClass = $derived(SIZE_PRESETS[size]?.container || size);
-
 	let style = $derived(
 		autoColor && colors
 			? `background-color: ${colors.bg}; color: ${colors.text};`
 			: undefined
 	);
 
+	// Build class string - base class for CSS targeting, allow user overrides via classProp
 	let baseClass = $derived(
 		twMerge(
 			"stuic-avatar",
-			"inline-flex items-center justify-center",
-			"rounded-full font-medium shrink-0 overflow-hidden",
-			!autoColor &&
-				"bg-neutral-200 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200",
-			sizeClass,
+			// Custom size classes when not using preset (preset sizes handled by data-size in CSS)
+			!isPresetSize(size) && size,
+			// User-provided Tailwind overrides for colors (only when not using autoColor)
 			!autoColor && bg,
 			!autoColor && textColor,
-			onclick && "select-none cursor-pointer",
 			classProp
 		)
 	);
@@ -191,7 +192,15 @@
 </script>
 
 {#if onclick}
-	<button bind:this={el} type="button" class={baseClass} {style} {onclick}>
+	<button
+		bind:this={el}
+		type="button"
+		class={baseClass}
+		{style}
+		{onclick}
+		data-size={isPresetSize(size) ? size : undefined}
+		data-interactive="true"
+	>
 		{#if renderMode === "photo"}
 			<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
 		{:else if renderMode === "initials"}
@@ -201,7 +210,12 @@
 		{/if}
 	</button>
 {:else}
-	<div bind:this={el} class={baseClass} {style}>
+	<div
+		bind:this={el}
+		class={baseClass}
+		{style}
+		data-size={isPresetSize(size) ? size : undefined}
+	>
 		{#if renderMode === "photo"}
 			<img {src} {alt} class="size-full object-cover" onerror={handleImageError} />
 		{:else if renderMode === "initials"}

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -37,6 +37,7 @@ export interface Props {
     /** Bindable element reference */
     el?: HTMLDivElement | HTMLButtonElement;
 }
+import "./index.css";
 declare const Avatar: import("svelte").Component<Props, {}, "el">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/components/Avatar/README.md

@@ -0,0 +1,166 @@
+# Avatar
+
+A flexible avatar component that displays user photos, initials, or icons with automatic fallback handling and optional deterministic color generation.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string` | - | Photo URL - when provided, renders in photo mode |
+| `alt` | `string` | - | Alt text for photo mode |
+| `initials` | `string` | - | String to extract initials from. Supports: "AB", "John Doe", or "john.doe@example.com" |
+| `initialsLength` | `number` | `2` | Maximum length of extracted initials |
+| `icon` | `IconFn` | - | Icon function to display - when provided alone, renders in icon mode |
+| `fallback` | `AvatarFallback` | `"icon"` | Fallback when photo fails to load |
+| `hashSource` | `string` | - | String for color hash calculation (e.g., email, user ID). Falls back to `initials` |
+| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "2xl" \| string` | `"md"` | Size preset or custom Tailwind size class |
+| `onclick` | `(event: MouseEvent) => void` | - | Click handler - when provided, renders as a button |
+| `bg` | `string` | - | Background color (Tailwind class). Ignored if `autoColor=true` |
+| `textColor` | `string` | - | Text color (Tailwind class). Ignored if `autoColor=true` |
+| `autoColor` | `boolean` | `false` | Generate deterministic pastel colors from hashSource/initials |
+| `class` | `string` | - | Additional CSS classes |
+| `el` | `HTMLElement` | - | Bindable element reference |
+
+## Usage
+
+### Basic
+
+```svelte
+<script lang="ts">
+  import { Avatar } from '@marianmeres/stuic';
+</script>
+
+<!-- Photo -->
+<Avatar src="/path/to/photo.jpg" alt="John Doe" />
+
+<!-- Initials -->
+<Avatar initials="John Doe" />
+
+<!-- Icon (default fallback) -->
+<Avatar />
+```
+
+### Sizes
+
+```svelte
+<Avatar initials="AB" size="sm" />
+<Avatar initials="AB" size="md" />
+<Avatar initials="AB" size="lg" />
+<Avatar initials="AB" size="xl" />
+<Avatar initials="AB" size="2xl" />
+
+<!-- Custom size with Tailwind -->
+<Avatar initials="AB" size="size-20" />
+```
+
+### Auto Color
+
+Generate deterministic pastel colors based on a hash source:
+
+```svelte
+<!-- Same input always produces same color -->
+<Avatar initials="john@example.com" autoColor />
+<Avatar initials="Jane Smith" autoColor hashSource="user-123" />
+```
+
+### Photo with Fallback
+
+```svelte
+<!-- Falls back to icon on error -->
+<Avatar src="/maybe-broken.jpg" fallback="icon" />
+
+<!-- Falls back to initials on error -->
+<Avatar src="/maybe-broken.jpg" fallback="initials" initials="JD" />
+
+<!-- Falls back to specific initials -->
+<Avatar src="/maybe-broken.jpg" fallback={{ initials: "AB" }} />
+```
+
+### As Button
+
+```svelte
+<Avatar
+  src="/photo.jpg"
+  onclick={() => console.log('clicked')}
+/>
+```
+
+### Custom Colors
+
+```svelte
+<!-- Using Tailwind classes -->
+<Avatar initials="AB" bg="bg-blue-500" textColor="text-white" />
+
+<!-- Using inline style for component tokens -->
+<Avatar
+  initials="AB"
+  style="--stuic-avatar-bg: #3b82f6; --stuic-avatar-fg: white;"
+/>
+```
+
+## CSS Variables
+
+### Component Tokens
+
+Override globally in `:root` or locally via `style` prop:
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-avatar-radius` | `9999px` | Border radius (circle by default) |
+| `--stuic-avatar-font-weight` | `--font-weight-medium` | Font weight for initials |
+| `--stuic-avatar-transition` | `150ms` | Transition duration |
+| `--stuic-avatar-bg` | `--stuic-color-muted` | Default background color |
+| `--stuic-avatar-fg` | `--stuic-color-muted-foreground` | Default text/icon color |
+| `--stuic-avatar-ring-width` | `3px` | Focus ring width (button mode) |
+| `--stuic-avatar-ring-color` | `--stuic-color-ring` | Focus ring color |
+
+### Size Tokens
+
+Each size preset has corresponding tokens (font sizes use Tailwind CSS variables):
+
+| Size | Width/Height | Font Size |
+|------|--------------|-----------|
+| `sm` | `--stuic-avatar-size-sm` (2rem) | `--stuic-avatar-font-size-sm` (`--text-xs`) |
+| `md` | `--stuic-avatar-size-md` (2.5rem) | `--stuic-avatar-font-size-md` (`--text-base`) |
+| `lg` | `--stuic-avatar-size-lg` (3rem) | `--stuic-avatar-font-size-lg` (`--text-lg`) |
+| `xl` | `--stuic-avatar-size-xl` (3.5rem) | `--stuic-avatar-font-size-xl` (`--text-xl`) |
+| `2xl` | `--stuic-avatar-size-2xl` (4rem) | `--stuic-avatar-font-size-2xl` (`--text-2xl`) |
+
+### Customization Examples
+
+```css
+/* Global override - square avatars */
+:root {
+  --stuic-avatar-radius: 0.5rem;
+}
+
+/* Global override - larger default size */
+:root {
+  --stuic-avatar-size-md: 3rem;
+  --stuic-avatar-font-size-md: 1.25rem;
+}
+```
+
+```svelte
+<!-- Local override - square avatar -->
+<Avatar initials="AB" style="--stuic-avatar-radius: 0.25rem;" />
+```
+
+## Data Attributes
+
+The component uses data attributes for CSS styling:
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `data-size` | `sm`, `md`, `lg`, `xl`, `2xl` | Size preset (only for preset sizes) |
+| `data-interactive` | `true` | Present when `onclick` is provided |
+
+## Theming
+
+The Avatar component uses theme tokens for default colors:
+
+- Background: `--stuic-color-muted`
+- Foreground: `--stuic-color-muted-foreground`
+- Focus ring: `--stuic-color-ring`
+
+These automatically adapt to light/dark mode when using the theming system.