@marianmeres/stuic 3.93.0 → 3.94.1

package/dist/components/Avatar/README.md

@@ -18,7 +18,9 @@ A flexible avatar component that displays user photos, initials, or icons with a
 | `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                          |
+| `padding`        | `string`                                          | -        | CSS padding around the visual circle. Outer keeps its size, inner circle shrinks (e.g. `"4px"`, `"0.25rem"`). Useful for larger tap targets. |
 | `class`          | `string`                                          | -        | Additional CSS classes                                                                 |
+| `classInner`     | `string`                                          | -        | Additional CSS classes for the inner element (only used when `padding` is set)         |
 | `el`             | `HTMLElement`                                     | -        | Bindable element reference                                                             |
 
 ## Usage
@@ -82,6 +84,18 @@ Generate deterministic pastel colors based on a hash source:
 <Avatar src="/photo.jpg" onclick={() => console.log("clicked")} />
 ```
 
+### Padded (larger tap target / visually smaller circle)
+
+Use `padding` to keep the avatar's outer footprint (e.g. a 44px tap target) while shrinking the visible colored circle. The padded ring is transparent.
+
+```svelte
+<!-- Outer stays at size="md" (2.75rem), circle shrinks by 4px on each side -->
+<Avatar size="md" initials="AB" padding="4px" />
+<Avatar size="md" autoColor initials="john@example.com" padding="0.25rem" onclick={() => {}} />
+```
+
+When `padding` is set, `bg`, `textColor`, and `autoColor` automatically apply to the inner circle (not the outer element).
+
 ### Custom Colors
 
 ```svelte
@@ -107,6 +121,7 @@ Override globally in `:root` or locally via `style` prop:
 | `--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                  |
+| `--stuic-avatar-padding`     | -                                | Set by the `padding` prop; can also be driven directly via CSS |
 
 ### Size Tokens
 
@@ -148,6 +163,7 @@ The component uses data attributes for CSS styling:
 | ------------------ | ----------------------------- | ----------------------------------- |
 | `data-size`        | `sm`, `md`, `lg`, `xl`, `2xl` | Size preset (only for preset sizes) |
 | `data-interactive` | `true`                        | Present when `onclick` is provided  |
+| `data-padded`      | `""`                          | Present when `padding` is set       |
 
 ## Theming
 

package/dist/components/UserAvatarMenu/README.md

@@ -53,6 +53,19 @@ The component composes existing primitives and adds convention, not behavior. It
 />
 ```
 
+### Separate trigger vs header-tile avatar styling
+
+`avatar` is the shared base; `avatarHeader` overrides keys on the header-tile Avatar only (shallow merge).
+
+```svelte
+<UserAvatarMenu
+	identity={{ email: user.email }}
+	actions={{ onProfile: () => goto("/me"), onLogout: () => goto("/logout") }}
+	avatar={{ class: "size-8" }}
+	avatarHeader={{ class: "size-16", padding: "10px" }}
+/>
+```
+
 ## Props
 
 | Prop             | Type                                          | Default | Description                                                                                 |
@@ -65,7 +78,8 @@ The component composes existing primitives and adds convention, not behavior. It
 | `showRoles`      | `boolean`                                     | `false` | Render `identity.roles` under the email in the header tile.                                 |
 | `extraItems`     | `DropdownMenuItem[]`                          | —       | Appended to the standard item set.                                                          |
 | `items`          | `DropdownMenuItem[]`                          | —       | Full override of the item list. Trigger + dropdown shell still render.                      |
-| `avatar`         | `Partial<AvatarProps>`                        | —       | Forwarded to the default trigger Avatar (and the header-tile Avatar).                       |
+| `avatar`         | `Partial<AvatarProps>`                        | —       | Forwarded to BOTH the trigger Avatar and the header-tile Avatar.                            |
+| `avatarHeader`   | `Partial<AvatarProps>`                        | —       | Overrides applied on top of `avatar` for the header-tile Avatar only. Shallow merge.        |
 | `position`       | `DropdownMenuPosition`                        | —       | Forwarded to `DropdownMenu`.                                                                |
 | `offset`         | `string`                                      | —       | Forwarded.                                                                                  |
 | `maxHeight`      | `string`                                      | —       | Forwarded.                                                                                  |

package/dist/components/UserAvatarMenu/UserAvatarMenu.svelte

@@ -116,9 +116,16 @@
 		 */
 		items?: DropdownMenuItem[];
 
-		/** Forwarded to the default `Avatar` trigger and header-tile avatar. */
+		/** Forwarded to BOTH the trigger `Avatar` and the header-tile `Avatar`. */
 		avatar?: Partial<Omit<AvatarProps, "onclick" | "initials" | "src" | "el">>;
 
+		/**
+		 * Overrides applied on top of `avatar` for the header-tile `Avatar` only
+		 * (the larger avatar shown above the menu items inside the popup).
+		 * Shallow-merged: keys present here win over `avatar`.
+		 */
+		avatarHeader?: Partial<Omit<AvatarProps, "onclick" | "initials" | "src" | "el">>;
+
 		/** Forwarded to `DropdownMenu`. */
 		position?: DropdownMenuPosition;
 		offset?: string;
@@ -181,6 +188,7 @@
 		extraItems,
 		items: itemsOverride,
 		avatar: avatarOverrides,
+		avatarHeader: avatarHeaderOverrides,
 		position,
 		offset,
 		maxHeight,
@@ -197,6 +205,11 @@
 
 	const isAuthed = $derived(!!identity);
 
+	const avatarHeaderMerged = $derived({
+		...(avatarOverrides ?? {}),
+		...(avatarHeaderOverrides ?? {}),
+	});
+
 	// Color-scheme config normalization
 	const cs = $derived(
 		typeof colorScheme === "object" && colorScheme !== null ? colorScheme : {}
@@ -285,6 +298,11 @@
 				renderedAny = true;
 			}
 
+			if (extraItems?.length) {
+				out.push(...extraItems);
+				renderedAny = true;
+			}
+
 			if (renderedAny && actions.onLogout) {
 				out.push({ type: "divider", id: "div-logout" });
 			}
@@ -324,9 +342,9 @@
 				});
 			}
 			if (csEnabled) out.push(buildColorSchemeItem());
+			if (extraItems?.length) out.push(...extraItems);
 		}
 
-		if (extraItems?.length) out.push(...extraItems);
 		return out;
 	});
 
@@ -345,7 +363,7 @@
 				hashSource={identity.email}
 				src={identity.src}
 				onclick={actions.onProfile}
-				{...avatarOverrides}
+				{...avatarHeaderMerged}
 			/>
 			<div class={!unstyled ? "stuic-user-avatar-menu-header-email" : undefined}>
 				{identity.name ?? identity.email}

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

@@ -97,8 +97,14 @@ export interface Props {
      * `showHeaderTile`, `showRoles`) is not.
      */
     items?: DropdownMenuItem[];
-    /** Forwarded to the default `Avatar` trigger and header-tile avatar. */
+    /** Forwarded to BOTH the trigger `Avatar` and the header-tile `Avatar`. */
     avatar?: Partial<Omit<AvatarProps, "onclick" | "initials" | "src" | "el">>;
+    /**
+     * Overrides applied on top of `avatar` for the header-tile `Avatar` only
+     * (the larger avatar shown above the menu items inside the popup).
+     * Shallow-merged: keys present here win over `avatar`.
+     */
+    avatarHeader?: Partial<Omit<AvatarProps, "onclick" | "initials" | "src" | "el">>;
     /** Forwarded to `DropdownMenu`. */
     position?: DropdownMenuPosition;
     offset?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.93.0",
+	"version": "3.94.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && pnpm run prepack",