@chenzy-design/svelte 0.3.1 → 0.4.1

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

@@ -1,33 +1,38 @@
 import type { Snippet } from 'svelte';
-import { type AvatarShape, type AvatarSizeEnum } from './context.js';
-type AvatarStatus = 'default' | 'warning' | 'error';
+import { type AvatarShape, type AvatarSizeEnum, type AvatarColor, type AvatarBorder, type AvatarTopSlot, type AvatarBottomSlot } from './context.js';
 interface Props {
     src?: string;
-    srcset?: string;
+    srcSet?: string;
     alt?: string;
     shape?: AvatarShape;
-    size?: AvatarSizeEnum | number;
-    color?: 'auto' | string;
-    status?: AvatarStatus;
-    dot?: boolean;
-    dotColor?: string;
+    /** 7 档枚举或合法 width 值（如 "10px" / 数字按 px）。 */
+    size?: AvatarSizeEnum | number | string;
+    /** 16 档语义色名 + white，默认 grey；也可用 style 自定义 background/color。 */
+    color?: AvatarColor;
+    /** 额外边框：true 用默认主色环；对象可定制 color 并用 motion 开启呼吸动画。 */
+    border?: AvatarBorder;
+    /** 头像内容区域动效（对齐 Semi contentMotion）。 */
+    contentMotion?: boolean;
+    /** 字符头像距左右两侧的像素（用于 JS 缩放测量）。 */
     gap?: number;
-    /** 可交互：跳转链接，渲染为 <a>（优先于 onClick 的 button 语义）。 */
-    href?: string;
-    /** 链接 target（仅 href 时生效）。 */
-    target?: string;
-    /** 可交互：点击回调；无 href 时根元素取 role=button + 键盘 Enter/Space 激活。 */
-    onClick?: (event: MouseEvent | KeyboardEvent) => void;
-    /** hover 时显示的遮罩层 Snippet。 */
+    /** hover 时头像内容覆盖层（对齐 Semi hoverMask，无默认样式）。 */
     hoverMask?: Snippet;
-    /** 右下角绝对定位标记 Snippet（如在线状态徽标）。 */
-    bottomSlot?: Snippet;
-    /** 右上角绝对定位标记 Snippet。 */
-    topSlot?: Snippet;
-    /** 额外传给 img 标签的属性（如 loading、decoding 等）。 */
-    imgAttr?: Record<string, string>;
-    /** img 加载失败回调。 */
-    onError?: (e: Event) => void;
+    /** 顶部 Slot 配置（对齐 Semi topSlot；仅 circle 且枚举尺寸生效）。 */
+    topSlot?: AvatarTopSlot;
+    /** 底部 Slot 配置（对齐 Semi bottomSlot；仅枚举尺寸生效）。 */
+    bottomSlot?: AvatarBottomSlot;
+    /** 额外传给 img 标签的原生属性。 */
+    imgAttr?: Record<string, unknown>;
+    /** 图片加载失败回调；返回 false 关闭默认 fallback（对齐 Semi onError）。 */
+    onError?: () => boolean | void;
+    /** 单击回调；提供时头像可聚焦并响应键盘 Enter（对齐 Semi onClick）。 */
+    onClick?: (e: MouseEvent | KeyboardEvent) => void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+    /** 附加类名（合并到根元素，对齐 Semi className）。 */
+    class?: string;
+    /** 内联样式（合并到根元素，对齐 Semi style）。 */
+    style?: string;
     children?: Snippet;
 }
 declare const Avatar: import("svelte").Component<Props, {}, "">;

package/dist/avatar/Avatar.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../src/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAAyB,KAAK,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAG1F,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEpD,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,iDAAiD;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IACtD,6BAA6B;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,kBAAkB;IAClB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+JH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Avatar.svelte.d.ts","sourceRoot":"","sources":["../../src/avatar/Avatar.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,YAAY,EACjB,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACtB,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAK;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;IACxC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,qDAAqD;IACrD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uCAAuC;IACvC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gCAAgC;IAChC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,8CAA8C;IAC9C,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,wBAAwB;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IAC/B,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuRH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/avatar/AvatarGroup.svelte

@@ -1,11 +1,11 @@
 <!--
-  Avatar.Group — overlapping row of avatars.
-  Two modes:
-    1. data-driven `items` → supports maxCount collapse into a "+M" avatar
-       (collapse is a pure derived computation, no DOM measurement).
-    2. free-form `children` snippet → custom overlapping avatars, no collapse.
-  Group-level shape/size are shared to child Avatars via context; each child's
-  own prop still wins (red line: child override > group > standalone default).
+  AvatarGroup — 横向层叠的头像组（1:1 对齐 Semi AvatarGroup）。
+  两种用法：
+    1. 数据驱动 `items` → 支持 maxCount 折叠为「+N」溢出头像（Svelte 无法遍历 children snippet 计数，
+       折叠只能走数据驱动，这是与 Semi children+React.Children 等价的 Svelte 实现）。
+    2. 自由 `children` snippet → 自定义层叠头像，不折叠。
+  组级 size/shape 经 context 强制下发给子 Avatar（对齐 Semi cloneElement）。
+  overlapFrom: 'start'|'end' 控制压盖方向（对齐 Semi，枚举而非 px）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
@@ -15,88 +15,108 @@
     setAvatarGroupContext,
     type AvatarShape,
     type AvatarSizeEnum,
+    type AvatarColor,
+    type AvatarOverlapFrom,
+    type AvatarBorder,
   } from './context.js';
 
-  /** One member when using the data-driven `items` API. */
+  /** 数据驱动成员（对齐 Semi 里子 <Avatar> 的常用 props）。 */
   export interface AvatarGroupItem {
     src?: string;
-    srcset?: string;
+    srcSet?: string;
     alt?: string;
-    color?: 'auto' | string;
-    /** text/initials fallback content */
+    color?: AvatarColor;
+    border?: AvatarBorder;
+    /** 文字/缩写内容（等价 Semi 子 Avatar 的 children）。 */
     content?: string;
   }
 
   interface Props {
-    /** data-driven members; enables maxCount collapse */
+    /** 数据驱动成员；启用 maxCount 折叠。 */
     items?: AvatarGroupItem[];
-    /** show at most N avatars, the rest collapse into a "+M" avatar */
+    /** 最多展示 N 个头像，其余折叠为「+M」。 */
     maxCount?: number;
-    /** shared shape for all child avatars (child prop overrides) */
+    /** 组级形状，强制下发给子头像（对齐 Semi）。 */
     shape?: AvatarShape;
-    /** shared size for all child avatars (child prop overrides) */
+    /** 组级尺寸，强制下发给子头像，默认 medium（对齐 Semi）。 */
     size?: AvatarSizeEnum | number;
-    /** overlap distance between adjacent avatars in px */
-    overlapFrom?: number;
-    /** click handler for the "+M" overflow avatar */
-    onMore?: () => void;
-    /** 自定义溢出头像渲染，参数为 {overlapList, count}。 */
-    renderMore?: Snippet<[{ overlapList: AvatarGroupItem[]; count: number }]>;
-    /** free-form avatars when not using `items` */
+    /** 层叠压盖方向：start=前压后，end=后压前（对齐 Semi）。 */
+    overlapFrom?: AvatarOverlapFrom;
+    /** 自定义「+N」溢出头像渲染，参数为 { restNumber, restAvatars }（对齐 Semi renderMore）。 */
+    renderMore?: Snippet<[{ restNumber: number; restAvatars: AvatarGroupItem[] }]>;
+    /** 不用 items 时自由传入的头像。 */
     children?: Snippet;
   }
 
   let {
     items,
     maxCount,
-    shape,
-    size,
-    overlapFrom = 8,
-    onMore,
+    shape = 'circle',
+    size = 'medium',
+    overlapFrom = 'start',
     renderMore,
     children,
   }: Props = $props();
 
   const loc = useLocale();
 
-  // share group config with descendant Avatars across the context boundary
+  // 组级 size/shape 经 context 强制下发（子 Avatar 里 group 值优先）。
   setAvatarGroupContext({
     getShape: () => shape,
     getSize: () => size,
   });
 
-  // pure collapse computation — slice visible items and count the rest.
+  // 折叠计算：前 maxCount 个可见，其余进 restAvatars。
   const list = $derived(items ?? []);
-  const limit = $derived(
-    typeof maxCount === 'number' && maxCount >= 0 ? maxCount : list.length,
+  const hasLimit = $derived(typeof maxCount === 'number' && maxCount >= 0);
+  const visible = $derived(hasLimit ? list.slice(0, maxCount) : list);
+  const restAvatars = $derived(hasLimit ? list.slice(maxCount) : []);
+  const restNumber = $derived(restAvatars.length);
+
+  // 溢出头像 alt（对齐 Semi finalAlt：剩余数 + 各成员名）。
+  const restAlt = $derived(
+    restAvatars
+      .map((a) => a.alt ?? a.content ?? '')
+      .filter((s) => s.length > 0)
+      .join(','),
+  );
+  const moreAlt = $derived(
+    `${loc().t('Avatar.moreAlt', { count: restNumber })}${restAlt ? `,${restAlt}` : ''}`,
   );
-  const overlapList = $derived(list.slice(limit));
-  const visible = $derived(list.slice(0, limit));
-  const restCount = $derived(Math.max(0, list.length - visible.length));
 
-  const groupStyle = $derived(`--cd-avatar-overlap:${overlapFrom}px`);
+  // 各档尺寸对应一个 group 类，CSS 里直接用对应 margin token（对齐 Semi，无中间变量/fallback）。
+  const sizeIsEnum = $derived(typeof size === 'string');
+  const groupSizeClass = $derived(sizeIsEnum ? `cd-avatar-group--${size}` : undefined);
 </script>
 
-<div class="cd-avatar-group" style={groupStyle} role="group">
+<div
+  class={['cd-avatar-group', groupSizeClass].filter(Boolean).join(' ')}
+  role={items ? 'list' : 'group'}
+  aria-label={loc().t('Avatar.groupLabel')}
+>
   {#if items}
     {#each visible as item, i (i)}
-      {@const { content, color, ...rest } = item}
-      <span class="cd-avatar-group__item">
-        <Avatar {...rest} color={color ?? 'grey'}>
+      {@const { content, ...rest } = item}
+      <span
+        class="cd-avatar-group__item"
+        role="listitem"
+        style="z-index:{overlapFrom === 'start' ? 100 - i : 80 + i}"
+      >
+        <Avatar {...rest}>
           {#if content}{content}{/if}
         </Avatar>
       </span>
     {/each}
-    {#if restCount > 0}
-      <span class="cd-avatar-group__item">
+    {#if restNumber > 0}
+      <span
+        class="cd-avatar-group__item cd-avatar-group__item-more"
+        role="listitem"
+        style="z-index:{overlapFrom === 'start' ? 100 - visible.length : 80 + visible.length}"
+      >
         {#if renderMore}
-          {@render renderMore({ overlapList, count: restCount })}
-        {:else if onMore}
-          <button type="button" class="cd-avatar-group__more-btn" onclick={onMore}>
-            <Avatar color="grey" alt={loc().t('Avatar.moreAlt', { count: restCount })}>+{restCount}</Avatar>
-          </button>
+          {@render renderMore({ restNumber, restAvatars })}
         {:else}
-          <Avatar color="grey" alt={loc().t('Avatar.moreAlt', { count: restCount })}>+{restCount}</Avatar>
+          <Avatar class="cd-avatar-item-more" alt={moreAlt}>{`+${restNumber}`}</Avatar>
         {/if}
       </span>
     {/if}
@@ -107,36 +127,97 @@
 
 <style>
   .cd-avatar-group {
-    display: inline-flex;
-    align-items: center;
+    display: inline-block;
+  }
+  .cd-avatar-group :global(.cd-avatar) {
+    box-sizing: border-box;
   }
-  /* later avatars overlap (and sit above) the previous ones */
-  .cd-avatar-group :global(.cd-avatar),
   .cd-avatar-group__item {
     position: relative;
+    display: inline-flex;
   }
-  .cd-avatar-group > :global(.cd-avatar:not(:first-child)),
-  .cd-avatar-group__item:not(:first-child) {
-    margin-inline-start: calc(-1 * var(--cd-avatar-overlap, 8px));
+  /* 各档层叠 marginLeft（直接用对应 token，对齐 Semi，无中间变量/fallback） */
+  .cd-avatar-group--extra-extra-small .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-extra-extra-small-margin);
   }
-  /* ring so overlapping avatars read as separated */
-  .cd-avatar-group > :global(.cd-avatar),
-  .cd-avatar-group__item :global(.cd-avatar) {
-    box-shadow: 0 0 0 2px var(--cd-color-bg-0);
+  .cd-avatar-group--extra-small .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-extra-small-margin);
   }
-  .cd-avatar-group__item :global(.cd-avatar) {
-    display: inline-flex;
+  .cd-avatar-group--small .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-small-margin);
   }
-  .cd-avatar-group__more-btn {
-    display: inline-flex;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    cursor: pointer;
-    border-radius: var(--cd-border-radius-full);
-  }
-  .cd-avatar-group__more-btn:focus-visible {
-    outline: 2px solid var(--cd-color-primary);
-    outline-offset: 2px;
+  .cd-avatar-group--default .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-default-margin);
+  }
+  .cd-avatar-group--medium .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-medium-margin);
+  }
+  .cd-avatar-group--large .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-large-margin);
+  }
+  .cd-avatar-group--extra-large .cd-avatar-group__item {
+    margin-left: var(--cd-avatar-group-extra-large-margin);
+  }
+  .cd-avatar-group__item:first-child {
+    margin-left: 0;
+  }
+  /* 成员描边（各档宽度，对齐 Semi）保证彼此分隔 */
+  .cd-avatar-group :global(.cd-avatar-extra-extra-small) {
+    border: var(--cd-avatar-group-extra-extra-small-border) solid var(--cd-avatar-border);
+  }
+  .cd-avatar-group :global(.cd-avatar-extra-small) {
+    border: var(--cd-avatar-group-extra-small-border) solid var(--cd-avatar-border);
+  }
+  .cd-avatar-group :global(.cd-avatar-small) {
+    border: var(--cd-avatar-group-small-border) solid var(--cd-avatar-border);
+  }
+  .cd-avatar-group :global(.cd-avatar-default) {
+    border: var(--cd-avatar-group-default-border) solid var(--cd-avatar-border);
+  }
+  .cd-avatar-group :global(.cd-avatar-medium) {
+    border: var(--cd-avatar-group-medium-border) solid var(--cd-avatar-border);
+  }
+  .cd-avatar-group :global(.cd-avatar-large) {
+    border: var(--cd-avatar-group-large-border) solid var(--cd-avatar-border);
+  }
+  .cd-avatar-group :global(.cd-avatar-extra-large) {
+    border: var(--cd-avatar-group-extra-large-border) solid var(--cd-avatar-border);
+  }
+  /* 溢出「+N」头像背景（对齐 Semi item-more；双类压过单色类） */
+  .cd-avatar-group :global(.cd-avatar.cd-avatar-item-more) {
+    background-color: var(--cd-avatar-more-bg);
+    color: var(--cd-avatar-palette-text);
+  }
+  /* RTL 层叠镜像（1:1 对齐 Semi avatar/rtl.scss：左右外边距互换） */
+  :global([dir='rtl']) .cd-avatar-group {
+    direction: rtl;
+  }
+  :global([dir='rtl']) .cd-avatar-group__item {
+    margin-left: auto;
+  }
+  :global([dir='rtl']) .cd-avatar-group--extra-extra-small .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-extra-extra-small-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group--extra-small .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-extra-small-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group--small .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-small-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group--default .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-default-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group--medium .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-medium-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group--large .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-large-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group--extra-large .cd-avatar-group__item {
+    margin-right: var(--cd-avatar-group-extra-large-margin);
+  }
+  :global([dir='rtl']) .cd-avatar-group__item:first-child {
+    margin-left: auto;
+    margin-right: 0;
   }
 </style>

package/dist/avatar/AvatarGroup.svelte.d.ts

@@ -1,33 +1,32 @@
 import type { Snippet } from 'svelte';
-import { type AvatarShape, type AvatarSizeEnum } from './context.js';
-/** One member when using the data-driven `items` API. */
+import { type AvatarShape, type AvatarSizeEnum, type AvatarColor, type AvatarOverlapFrom, type AvatarBorder } from './context.js';
+/** 数据驱动成员（对齐 Semi 里子 <Avatar> 的常用 props）。 */
 export interface AvatarGroupItem {
     src?: string;
-    srcset?: string;
+    srcSet?: string;
     alt?: string;
-    color?: 'auto' | string;
-    /** text/initials fallback content */
+    color?: AvatarColor;
+    border?: AvatarBorder;
+    /** 文字/缩写内容（等价 Semi 子 Avatar 的 children）。 */
     content?: string;
 }
 interface Props {
-    /** data-driven members; enables maxCount collapse */
+    /** 数据驱动成员；启用 maxCount 折叠。 */
     items?: AvatarGroupItem[];
-    /** show at most N avatars, the rest collapse into a "+M" avatar */
+    /** 最多展示 N 个头像，其余折叠为「+M」。 */
     maxCount?: number;
-    /** shared shape for all child avatars (child prop overrides) */
+    /** 组级形状，强制下发给子头像（对齐 Semi）。 */
     shape?: AvatarShape;
-    /** shared size for all child avatars (child prop overrides) */
+    /** 组级尺寸，强制下发给子头像，默认 medium（对齐 Semi）。 */
     size?: AvatarSizeEnum | number;
-    /** overlap distance between adjacent avatars in px */
-    overlapFrom?: number;
-    /** click handler for the "+M" overflow avatar */
-    onMore?: () => void;
-    /** 自定义溢出头像渲染，参数为 {overlapList, count}。 */
+    /** 层叠压盖方向：start=前压后，end=后压前（对齐 Semi）。 */
+    overlapFrom?: AvatarOverlapFrom;
+    /** 自定义「+N」溢出头像渲染，参数为 { restNumber, restAvatars }（对齐 Semi renderMore）。 */
     renderMore?: Snippet<[{
-        overlapList: AvatarGroupItem[];
-        count: number;
+        restNumber: number;
+        restAvatars: AvatarGroupItem[];
     }]>;
-    /** free-form avatars when not using `items` */
+    /** 不用 items 时自由传入的头像。 */
     children?: Snippet;
 }
 declare const AvatarGroup: import("svelte").Component<Props, {}, "">;

package/dist/avatar/AvatarGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/avatar/AvatarGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AAGtB,yDAAyD;AACzD,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gEAAgE;IAChE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,WAAW,EAAE,eAAe,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;IAC1E,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAyEH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"AvatarGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/avatar/AvatarGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAEH,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,iBAAiB,EACtB,KAAK,YAAY,EAClB,MAAM,cAAc,CAAC;AAGtB,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,KAAK;IACb,6BAA6B;IAC7B,KAAK,CAAC,EAAE,eAAe,EAAE,CAAC;IAC1B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,wCAAwC;IACxC,IAAI,CAAC,EAAE,cAAc,GAAG,MAAM,CAAC;IAC/B,yCAAyC;IACzC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IAChC,yEAAyE;IACzE,UAAU,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,WAAW,EAAE,eAAe,EAAE,CAAA;KAAE,CAAC,CAAC,CAAC;IAC/E,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA+EH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/avatar/TopSlotSvg.svelte

@@ -0,0 +1,62 @@
+<!--
+  TopSlotSvg — 顶部 Slot 的渐变气泡背景（1:1 对齐 Semi TopSlotSvg.tsx 的 path/filter/gradient）。
+  唯一 id 用 $props.id() 保证同页多实例的 <linearGradient>/<filter> 不冲突。
+-->
+<script lang="ts">
+  interface Props {
+    gradientStart?: string | undefined;
+    gradientEnd?: string | undefined;
+  }
+  let { gradientStart, gradientEnd }: Props = $props();
+
+  const startColor = $derived(gradientStart ?? 'var(--cd-avatar-top-slot-gradient-start)');
+  const endColor = $derived(gradientEnd ?? 'var(--cd-avatar-top-slot-gradient-end)');
+
+  const uid = $props.id();
+  const gradId = `cd-avatar-top-grad-${uid}`;
+  const filterId = `cd-avatar-top-filter-${uid}`;
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" width="51" height="52" viewBox="0 0 51 52" fill="none">
+  <g filter="url(#{filterId})">
+    <path
+      d="M40.4918 46.5592C44.6795 43.176 46.261 34.1333 47.5301 25.6141C49.5854 11.8168 39.6662 1 25.8097 1C11.2857 1 3 11.4279 3 25.3518C3 33.7866 6.29361 43.8947 10.4602 46.5592C12.5868 47.9192 12.5868 47.9051 25.8097 47.9192C38.3651 47.9282 38.5352 48.14 40.4918 46.5592Z"
+      fill="url(#{gradId})"
+    />
+  </g>
+  <defs>
+    <filter
+      id={filterId}
+      x="0.789215"
+      y="0.447304"
+      width="49.2216"
+      height="51.3549"
+      filterUnits="userSpaceOnUse"
+      color-interpolation-filters="sRGB"
+    >
+      <feFlood flood-opacity="0" result="BackgroundImageFix" />
+      <feColorMatrix
+        in="SourceAlpha"
+        type="matrix"
+        values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+        result="hardAlpha"
+      />
+      <feOffset dy="1.65809" />
+      <feGaussianBlur stdDeviation="1.10539" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" />
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow" />
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape" />
+    </filter>
+    <linearGradient
+      id={gradId}
+      x1="17.671"
+      y1="31.7392"
+      x2="17.671"
+      y2="47.9333"
+      gradientUnits="userSpaceOnUse"
+    >
+      <stop stop-color={startColor} />
+      <stop offset="1" stop-color={endColor} />
+    </linearGradient>
+  </defs>
+</svg>

package/dist/avatar/TopSlotSvg.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    gradientStart?: string | undefined;
+    gradientEnd?: string | undefined;
+}
+declare const TopSlotSvg: import("svelte").Component<Props, {}, "">;
+type TopSlotSvg = ReturnType<typeof TopSlotSvg>;
+export default TopSlotSvg;
+//# sourceMappingURL=TopSlotSvg.svelte.d.ts.map

package/dist/avatar/TopSlotSvg.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TopSlotSvg.svelte.d.ts","sourceRoot":"","sources":["../../src/avatar/TopSlotSvg.svelte.ts"],"names":[],"mappings":"AAGE,UAAU,KAAK;IACb,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAClC;AAqCH,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/avatar/context.d.ts

@@ -1,5 +1,32 @@
 export type AvatarShape = 'circle' | 'square';
-export type AvatarSizeEnum = 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
+export type AvatarSizeEnum = 'extra-extra-small' | 'extra-small' | 'small' | 'default' | 'medium' | 'large' | 'extra-large';
+export type AvatarColor = 'amber' | 'blue' | 'cyan' | 'green' | 'grey' | 'indigo' | 'light-blue' | 'light-green' | 'lime' | 'orange' | 'pink' | 'purple' | 'red' | 'teal' | 'violet' | 'yellow' | 'white';
+export type AvatarOverlapFrom = 'start' | 'end';
+/** 额外边框（对齐 Semi border prop）。 */
+export type AvatarBorder = boolean | {
+    color?: string;
+    motion?: boolean;
+};
+/** 顶部 Slot 配置（对齐 Semi topSlot）。text 可为字符串或 Snippet。 */
+export interface AvatarTopSlot {
+    render?: unknown;
+    gradientStart?: string;
+    gradientEnd?: string;
+    text?: unknown;
+    textColor?: string;
+    className?: string;
+    style?: string;
+}
+/** 底部 Slot 配置（对齐 Semi bottomSlot）。text 可为字符串或 Snippet。 */
+export interface AvatarBottomSlot {
+    render?: unknown;
+    shape?: AvatarShape;
+    text?: unknown;
+    bgColor?: string;
+    textColor?: string;
+    className?: string;
+    style?: string;
+}
 export interface AvatarGroupContext {
     getShape: () => AvatarShape | undefined;
     getSize: () => AvatarSizeEnum | number | undefined;

package/dist/avatar/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/avatar/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,cAAc,GACtB,aAAa,GACb,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,aAAa,CAAC;AAElB,MAAM,WAAW,kBAAkB;IAGjC,QAAQ,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IACxC,OAAO,EAAE,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;CACpD;AAID,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,kBAAkB,GAAG,IAAI,CAEnE;AAED,wBAAgB,qBAAqB,IAAI,kBAAkB,GAAG,SAAS,CAEtE"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/avatar/context.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAE9C,MAAM,MAAM,cAAc,GACtB,mBAAmB,GACnB,aAAa,GACb,OAAO,GACP,SAAS,GACT,QAAQ,GACR,OAAO,GACP,aAAa,CAAC;AAElB,MAAM,MAAM,WAAW,GACnB,OAAO,GACP,MAAM,GACN,MAAM,GACN,OAAO,GACP,MAAM,GACN,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,MAAM,GACN,QAAQ,GACR,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,QAAQ,GACR,QAAQ,GACR,OAAO,CAAC;AACZ,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,KAAK,CAAC;AAEhD,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAE1E,uDAAuD;AACvD,MAAM,WAAW,aAAa;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,0DAA0D;AAC1D,MAAM,WAAW,gBAAgB;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAkB;IAGjC,QAAQ,EAAE,MAAM,WAAW,GAAG,SAAS,CAAC;IACxC,OAAO,EAAE,MAAM,cAAc,GAAG,MAAM,GAAG,SAAS,CAAC;CACpD;AAID,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,kBAAkB,GAAG,IAAI,CAEnE;AAED,wBAAgB,qBAAqB,IAAI,kBAAkB,GAAG,SAAS,CAEtE"}

package/dist/avatar/index.d.ts

@@ -5,5 +5,6 @@ export declare const Avatar: typeof Avatar_ & {
 };
 export { AvatarGroup };
 export { meta as avatarMeta } from './meta.js';
-export type { AvatarShape, AvatarSizeEnum, AvatarGroupContext } from './context.js';
+export type { AvatarShape, AvatarSizeEnum, AvatarColor, AvatarOverlapFrom, AvatarBorder, AvatarTopSlot, AvatarBottomSlot, AvatarGroupContext, } from './context.js';
+export type { AvatarGroupItem } from './AvatarGroup.svelte';
 //# sourceMappingURL=index.d.ts.map

package/dist/avatar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAE/C,eAAO,MAAM,MAAM,EAAE,OAAO,OAAO,GAAG;IACpC,KAAK,EAAE,OAAO,WAAW,CAAC;CACsB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,iBAAiB,CAAC;AACtC,OAAO,WAAW,MAAM,sBAAsB,CAAC;AAE/C,eAAO,MAAM,MAAM,EAAE,OAAO,OAAO,GAAG;IACpC,KAAK,EAAE,OAAO,WAAW,CAAC;CACsB,CAAC;AAEnD,OAAO,EAAE,WAAW,EAAE,CAAC;AACvB,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,YAAY,EACV,WAAW,EACX,cAAc,EACd,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}