@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/list/meta.d.ts

@@ -1,150 +1,156 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * List — see specs/components/show/List.spec.md
+ * List — 严格对齐 Semi Design（@douyinfe/semi-ui/list）。
  */
 export declare const meta: {
     readonly name: "List";
     readonly category: "show";
-    readonly description: "列表：数据驱动渲染（dataSource + renderItem），支持 header/footer（string 或 Snippet）、bordered 外框、split 行间分隔线、loading 骨架/spinner 与空态（默认 Empty）。泛型组件。";
-    readonly exports: readonly ["List", "ListItem", "ListMeta"];
-    readonly subComponents: readonly ["List.Item", "List.Item.Meta", "List.Meta"];
+    readonly description: "列表：数据驱动渲染（dataSource + renderItem）或声明式内嵌 <List.Item>，支持 header/footer（string 或 Snippet）、bordered 外框、split 分隔线、layout（vertical/horizontal）、grid 栅格（复用 Row/Col）、loading（复用 Spin）与空态（缺省 locale emptyText）。严格镜像 Semi List API。";
+    readonly exports: readonly ["List", "ListItem"];
+    readonly subComponents: readonly ["List.Item"];
     readonly props: readonly [{
+        readonly name: "bordered";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "是否显示外框";
+    }, {
         readonly name: "dataSource";
         readonly type: "T[]";
-        readonly default: "[]";
-        readonly desc: "列表数据数组";
+        readonly default: "undefined";
+        readonly desc: "列表数据源";
     }, {
         readonly name: "renderItem";
         readonly type: "Snippet<[item: T, index: number]>";
         readonly default: "undefined";
-        readonly desc: "行渲染 Snippet";
-    }, {
-        readonly name: "rowKey";
-        readonly type: "string|((item: T) => string|number)";
-        readonly default: "'key'";
-        readonly desc: "行唯一标识，用于 each key";
-    }, {
-        readonly name: "size";
-        readonly type: "'small'|'default'|'large'";
-        readonly default: "'default'";
-        readonly desc: "行内边距尺寸";
+        readonly desc: "使用 dataSource 时自定义渲染列表项";
     }, {
-        readonly name: "bordered";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "外层边框 + 圆角";
+        readonly name: "emptyContent";
+        readonly type: "string | Snippet";
+        readonly default: "undefined";
+        readonly desc: "空列表展示内容，缺省回退 locale List.emptyText";
     }, {
-        readonly name: "split";
-        readonly type: "boolean";
-        readonly default: "true";
-        readonly desc: "行间分隔线";
+        readonly name: "footer";
+        readonly type: "string | Snippet";
+        readonly default: "undefined";
+        readonly desc: "列表底部";
     }, {
         readonly name: "header";
-        readonly type: "string|Snippet";
+        readonly type: "string | Snippet";
         readonly default: "undefined";
-        readonly desc: "头部内容";
+        readonly desc: "列表头部";
     }, {
-        readonly name: "footer";
-        readonly type: "string|Snippet";
+        readonly name: "layout";
+        readonly type: "'vertical' | 'horizontal'";
+        readonly default: "'vertical'";
+        readonly desc: "列表布局方向";
+    }, {
+        readonly name: "loadMore";
+        readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "底部内容";
+        readonly desc: "加载更多按钮区";
     }, {
         readonly name: "loading";
         readonly type: "boolean";
         readonly default: "false";
-        readonly desc: "加载态，覆盖 body";
+        readonly desc: "加载态，列表体外包裹 Spin";
+    }, {
+        readonly name: "size";
+        readonly type: "'small' | 'default' | 'large'";
+        readonly default: "'default'";
+        readonly desc: "列表尺寸";
     }, {
-        readonly name: "loadingSkeleton";
+        readonly name: "split";
         readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "loading 时用骨架行替代 spinner";
+        readonly default: "true";
+        readonly desc: "是否展示分割线";
     }, {
-        readonly name: "skeletonCount";
-        readonly type: "number";
-        readonly default: "3";
-        readonly desc: "骨架占位行数";
+        readonly name: "grid";
+        readonly type: "ListGrid";
+        readonly default: "undefined";
+        readonly desc: "栅格配置（复用 Row/Col）：gutter/align/justify/wrap → Row，span/offset/order/push/pull/flex/xs..xxl → Col";
     }, {
-        readonly name: "emptyContent";
-        readonly type: "string|Snippet";
+        readonly name: "style";
+        readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "空数据展示内容，默认内置 Empty";
+        readonly desc: "根容器行内样式";
     }, {
-        readonly name: "grid";
-        readonly type: "number | { column?: number; gutter?: number }";
+        readonly name: "onClick";
+        readonly type: "(e: MouseEvent) => void";
         readonly default: "undefined";
-        readonly desc: "网格布局列数/间距";
+        readonly desc: "列表项点击回调（下发给 Item 作为回退）";
     }, {
-        readonly name: "loadMore";
-        readonly type: "Snippet";
+        readonly name: "onRightClick";
+        readonly type: "(e: MouseEvent) => void";
         readonly default: "undefined";
-        readonly desc: "自定义底部加载区";
+        readonly desc: "列表项右键回调（下发给 Item 作为回退）";
     }, {
-        readonly name: "onLoadMore";
-        readonly type: "() => void";
+        readonly name: "children";
+        readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "内置加载更多按钮回调";
+        readonly desc: "声明式用法：内嵌 <List.Item>";
     }, {
-        readonly name: "loadingMore";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "内置按钮 loading 态";
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "根类名";
+    }];
+    readonly itemProps: readonly [{
+        readonly name: "header";
+        readonly type: "string | Snippet";
+        readonly default: "undefined";
+        readonly desc: "列表项头内容";
     }, {
-        readonly name: "hasMore";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "是否还有更多数据";
+        readonly name: "main";
+        readonly type: "string | Snippet";
+        readonly default: "undefined";
+        readonly desc: "列表项主体内容";
     }, {
-        readonly name: "pagination";
-        readonly type: "false | { pageSize?, current?, defaultCurrent?, onChange? }";
+        readonly name: "extra";
+        readonly type: "string | Snippet";
         readonly default: "undefined";
-        readonly desc: "分页（切片当页，与 loadMore 互斥优先）";
+        readonly desc: "列表项附加内容（右侧）";
     }, {
-        readonly name: "virtualized";
-        readonly type: "false | { itemSize?: number|\"auto\"; estimatedItemSize?: number; height: number|string; overscan?: number }";
-        readonly default: "false";
-        readonly desc: "虚拟化：仅渲染视口内行，定高/动态测高，复用 core 区间数学（与 grid/pagination 互斥，优先生效）";
+        readonly name: "align";
+        readonly type: "'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'";
+        readonly default: "'flex-start'";
+        readonly desc: "header 与 main 的垂直对齐方式";
     }, {
-        readonly name: "selectable";
-        readonly type: "false | 'single' | 'multiple'";
-        readonly default: "false";
-        readonly desc: "行可选模式：单选/多选（listbox/option 语义）";
+        readonly name: "children";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "项内主内容";
     }, {
-        readonly name: "selectedKeys";
-        readonly type: "(string|number)[]";
+        readonly name: "style";
+        readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "受控选中 key 集合（不回写，仅 onSelectionChange 回调）";
+        readonly desc: "行内样式";
     }, {
-        readonly name: "defaultSelectedKeys";
-        readonly type: "(string|number)[]";
-        readonly default: "[]";
-        readonly desc: "非受控初始选中 key 集合";
+        readonly name: "onClick";
+        readonly type: "(e: MouseEvent) => void";
+        readonly default: "undefined";
+        readonly desc: "点击回调（自带优先，否则回退 List.onClick）";
     }, {
-        readonly name: "onSelectionChange";
-        readonly type: "(keys, { item, key, selected }) => void";
+        readonly name: "onRightClick";
+        readonly type: "(e: MouseEvent) => void";
         readonly default: "undefined";
-        readonly desc: "选中态变更回调（受控/非受控均触发）";
+        readonly desc: "右键回调（自带优先，否则回退 List.onRightClick）";
     }, {
-        readonly name: "children";
-        readonly type: "Snippet";
+        readonly name: "onMouseEnter";
+        readonly type: "(e: MouseEvent) => void";
+        readonly default: "undefined";
+        readonly desc: "鼠标移入";
+    }, {
+        readonly name: "onMouseLeave";
+        readonly type: "(e: MouseEvent) => void";
         readonly default: "undefined";
-        readonly desc: "声明式用法：内嵌 <List.Item>（不传 dataSource 时生效）";
+        readonly desc: "鼠标移出";
     }, {
         readonly name: "class";
         readonly type: "string";
         readonly default: "''";
-        readonly desc: "根类名透传";
-    }];
-    readonly capabilities: readonly ["data-render", "pagination", "load-more", "virtualized", "grid", "selectable", "declarative-items", "empty/loading-state"];
-    readonly methods: readonly [{
-        readonly name: "scrollToIndex";
-        readonly type: "(index: number, opts?: { align?: 'start'|'center'|'end' }) => void";
-        readonly desc: "虚拟化模式命令式滚动到指定索引项";
-    }];
-    readonly events: readonly [{
-        readonly name: "onSelectionChange";
-        readonly payload: "(keys, { item, key, selected })";
-        readonly desc: "selectable 选中态变更";
+        readonly desc: "根类名";
     }];
+    readonly capabilities: readonly ["data-render", "declarative-items", "grid", "horizontal-layout", "load-more", "loading-state", "empty-state"];
     readonly slots: readonly [{
         readonly name: "renderItem";
         readonly desc: "行渲染（item, index）";
@@ -157,19 +163,25 @@ export declare const meta: {
     }, {
         readonly name: "emptyContent";
         readonly desc: "空态 Snippet";
+    }, {
+        readonly name: "loadMore";
+        readonly desc: "加载更多区域 Snippet";
     }, {
         readonly name: "children";
-        readonly desc: "声明式 <List.Item> 子项（不传 dataSource 时）";
+        readonly desc: "声明式 <List.Item> 子项";
     }];
     readonly a11y: {
         readonly role: "list";
         readonly focusable: false;
-        readonly notes: readonly ["ul/li 原生列表语义；selectable 时容器 role=listbox（multiple 加 aria-multiselectable），行 role=option + aria-selected", "selectable 行 tabindex=0，Space/Enter 切换选中；multiple 支持 shift 连选", "loading 时根容器 aria-busy=true", "骨架行 aria-hidden=true，spinner aria-hidden=true", "虚拟化行带 aria-setsize/aria-posinset"];
+        readonly notes: readonly ["ul/li 原生列表语义（cd-list-items > cd-list-item）", "loading 由 Spin 包裹提供 role=status（aria-live=polite）", "空态文案缺省来自 locale List.emptyText"];
     };
-    readonly tokens: readonly ["--cd-list-bg", "--cd-list-border", "--cd-list-radius", "--cd-list-item-padding", "--cd-list-item-padding-small", "--cd-list-split-color", "--cd-list-header-color", "--cd-list-item-color", "--cd-border-radius-full", "--cd-border-radius-small", "--cd-color-primary"];
+    readonly tokens: readonly ["--cd-color-list-default-border-default", "--cd-color-list-empty-text-default", "--cd-spacing-list-empty-paddingx", "--cd-spacing-list-empty-paddingy", "--cd-spacing-list-footer-paddingx", "--cd-spacing-list-footer-paddingy", "--cd-spacing-list-item-paddingx", "--cd-spacing-list-item-paddingy", "--cd-spacing-list-small-paddingx", "--cd-spacing-list-small-paddingy", "--cd-spacing-list-large-paddingx", "--cd-spacing-list-large-paddingy", "--cd-spacing-list-header-marginright", "--cd-spacing-list-header-marginleft", "--cd-spacing-list-extra-marginleft", "--cd-spacing-list-extra-marginright"];
     readonly examples: readonly [{
         readonly title: "基础";
-        readonly code: "{#snippet item(d)}<span>{d.title}</span>{/snippet}\n<List dataSource={data} renderItem={item} bordered />";
+        readonly code: "{#snippet item(d)}<List.Item>{d}</List.Item>{/snippet}\n<List dataSource={data} renderItem={item} bordered header={'Header'} footer={'Footer'} />";
+    }, {
+        readonly title: "模板";
+        readonly code: "{#snippet item(d)}<List.Item header={avatar} main={title} extra={actions} />{/snippet}\n<List dataSource={data} renderItem={item} />";
     }];
 };
 //# sourceMappingURL=meta.d.ts.map

package/dist/list/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/list/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/list/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHP,CAAC"}

package/dist/list/meta.js

@@ -1,97 +1,115 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * List — see specs/components/show/List.spec.md
+ * List — 严格对齐 Semi Design（@douyinfe/semi-ui/list）。
  */
 export const meta = {
     name: 'List',
     category: 'show',
-    description: '列表：数据驱动渲染（dataSource + renderItem），支持 header/footer（string 或 Snippet）、bordered 外框、split 行间分隔线、loading 骨架/spinner 与空态（默认 Empty）。泛型组件。',
-    exports: ['List', 'ListItem', 'ListMeta'],
-    subComponents: ['List.Item', 'List.Item.Meta', 'List.Meta'],
+    description: '列表：数据驱动渲染（dataSource + renderItem）或声明式内嵌 <List.Item>，支持 header/footer（string 或 Snippet）、bordered 外框、split 分隔线、layout（vertical/horizontal）、grid 栅格（复用 Row/Col）、loading（复用 Spin）与空态（缺省 locale emptyText）。严格镜像 Semi List API。',
+    exports: ['List', 'ListItem'],
+    subComponents: ['List.Item'],
     props: [
-        { name: 'dataSource', type: 'T[]', default: '[]', desc: '列表数据数组' },
+        { name: 'bordered', type: 'boolean', default: 'false', desc: '是否显示外框' },
+        { name: 'dataSource', type: 'T[]', default: 'undefined', desc: '列表数据源' },
         {
             name: 'renderItem',
             type: 'Snippet<[item: T, index: number]>',
             default: 'undefined',
-            desc: '行渲染 Snippet',
+            desc: '使用 dataSource 时自定义渲染列表项',
         },
         {
-            name: 'rowKey',
-            type: 'string|((item: T) => string|number)',
-            default: "'key'",
-            desc: '行唯一标识，用于 each key',
+            name: 'emptyContent',
+            type: 'string | Snippet',
+            default: 'undefined',
+            desc: '空列表展示内容，缺省回退 locale List.emptyText',
         },
-        { name: 'size', type: "'small'|'default'|'large'", default: "'default'", desc: '行内边距尺寸' },
-        { name: 'bordered', type: 'boolean', default: 'false', desc: '外层边框 + 圆角' },
-        { name: 'split', type: 'boolean', default: 'true', desc: '行间分隔线' },
-        { name: 'header', type: 'string|Snippet', default: 'undefined', desc: '头部内容' },
-        { name: 'footer', type: 'string|Snippet', default: 'undefined', desc: '底部内容' },
-        { name: 'loading', type: 'boolean', default: 'false', desc: '加载态，覆盖 body' },
-        { name: 'loadingSkeleton', type: 'boolean', default: 'false', desc: 'loading 时用骨架行替代 spinner' },
-        { name: 'skeletonCount', type: 'number', default: '3', desc: '骨架占位行数' },
+        { name: 'footer', type: 'string | Snippet', default: 'undefined', desc: '列表底部' },
+        { name: 'header', type: 'string | Snippet', default: 'undefined', desc: '列表头部' },
         {
-            name: 'emptyContent',
-            type: 'string|Snippet',
+            name: 'layout',
+            type: "'vertical' | 'horizontal'",
+            default: "'vertical'",
+            desc: '列表布局方向',
+        },
+        { name: 'loadMore', type: 'Snippet', default: 'undefined', desc: '加载更多按钮区' },
+        { name: 'loading', type: 'boolean', default: 'false', desc: '加载态，列表体外包裹 Spin' },
+        { name: 'size', type: "'small' | 'default' | 'large'", default: "'default'", desc: '列表尺寸' },
+        { name: 'split', type: 'boolean', default: 'true', desc: '是否展示分割线' },
+        {
+            name: 'grid',
+            type: 'ListGrid',
             default: 'undefined',
-            desc: '空数据展示内容，默认内置 Empty',
+            desc: '栅格配置（复用 Row/Col）：gutter/align/justify/wrap → Row，span/offset/order/push/pull/flex/xs..xxl → Col',
         },
-        { name: 'grid', type: 'number | { column?: number; gutter?: number }', default: 'undefined', desc: '网格布局列数/间距' },
-        { name: 'loadMore', type: 'Snippet', default: 'undefined', desc: '自定义底部加载区' },
-        { name: 'onLoadMore', type: '() => void', default: 'undefined', desc: '内置加载更多按钮回调' },
-        { name: 'loadingMore', type: 'boolean', default: 'false', desc: '内置按钮 loading 态' },
-        { name: 'hasMore', type: 'boolean', default: 'false', desc: '是否还有更多数据' },
-        { name: 'pagination', type: 'false | { pageSize?, current?, defaultCurrent?, onChange? }', default: 'undefined', desc: '分页（切片当页，与 loadMore 互斥优先）' },
-        { name: 'virtualized', type: 'false | { itemSize?: number|"auto"; estimatedItemSize?: number; height: number|string; overscan?: number }', default: 'false', desc: '虚拟化：仅渲染视口内行，定高/动态测高，复用 core 区间数学（与 grid/pagination 互斥，优先生效）' },
-        { name: 'selectable', type: "false | 'single' | 'multiple'", default: 'false', desc: '行可选模式：单选/多选（listbox/option 语义）' },
-        { name: 'selectedKeys', type: '(string|number)[]', default: 'undefined', desc: '受控选中 key 集合（不回写，仅 onSelectionChange 回调）' },
-        { name: 'defaultSelectedKeys', type: '(string|number)[]', default: '[]', desc: '非受控初始选中 key 集合' },
-        { name: 'onSelectionChange', type: '(keys, { item, key, selected }) => void', default: 'undefined', desc: '选中态变更回调（受控/非受控均触发）' },
-        { name: 'children', type: 'Snippet', default: 'undefined', desc: '声明式用法：内嵌 <List.Item>（不传 dataSource 时生效）' },
-        { name: 'class', type: 'string', default: "''", desc: '根类名透传' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根容器行内样式' },
+        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '列表项点击回调（下发给 Item 作为回退）' },
+        { name: 'onRightClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '列表项右键回调（下发给 Item 作为回退）' },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '声明式用法：内嵌 <List.Item>' },
+        { name: 'class', type: 'string', default: "''", desc: '根类名' },
     ],
-    capabilities: ['data-render', 'pagination', 'load-more', 'virtualized', 'grid', 'selectable', 'declarative-items', 'empty/loading-state'],
-    methods: [
-        { name: 'scrollToIndex', type: "(index: number, opts?: { align?: 'start'|'center'|'end' }) => void", desc: '虚拟化模式命令式滚动到指定索引项' },
-    ],
-    events: [
-        { name: 'onSelectionChange', payload: '(keys, { item, key, selected })', desc: 'selectable 选中态变更' },
+    itemProps: [
+        { name: 'header', type: 'string | Snippet', default: 'undefined', desc: '列表项头内容' },
+        { name: 'main', type: 'string | Snippet', default: 'undefined', desc: '列表项主体内容' },
+        { name: 'extra', type: 'string | Snippet', default: 'undefined', desc: '列表项附加内容（右侧）' },
+        {
+            name: 'align',
+            type: "'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch'",
+            default: "'flex-start'",
+            desc: 'header 与 main 的垂直对齐方式',
+        },
+        { name: 'children', type: 'Snippet', default: 'undefined', desc: '项内主内容' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '行内样式' },
+        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击回调（自带优先，否则回退 List.onClick）' },
+        { name: 'onRightClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '右键回调（自带优先，否则回退 List.onRightClick）' },
+        { name: 'onMouseEnter', type: '(e: MouseEvent) => void', default: 'undefined', desc: '鼠标移入' },
+        { name: 'onMouseLeave', type: '(e: MouseEvent) => void', default: 'undefined', desc: '鼠标移出' },
+        { name: 'class', type: 'string', default: "''", desc: '根类名' },
     ],
+    capabilities: ['data-render', 'declarative-items', 'grid', 'horizontal-layout', 'load-more', 'loading-state', 'empty-state'],
     slots: [
         { name: 'renderItem', desc: '行渲染（item, index）' },
         { name: 'header', desc: '头部 Snippet（与 header string 二选一）' },
         { name: 'footer', desc: '底部 Snippet' },
         { name: 'emptyContent', desc: '空态 Snippet' },
-        { name: 'children', desc: '声明式 <List.Item> 子项（不传 dataSource 时）' },
+        { name: 'loadMore', desc: '加载更多区域 Snippet' },
+        { name: 'children', desc: '声明式 <List.Item> 子项' },
     ],
     a11y: {
         role: 'list',
         focusable: false,
         notes: [
-            'ul/li 原生列表语义；selectable 时容器 role=listbox（multiple 加 aria-multiselectable），行 role=option + aria-selected',
-            'selectable 行 tabindex=0，Space/Enter 切换选中；multiple 支持 shift 连选',
-            'loading 时根容器 aria-busy=true',
-            '骨架行 aria-hidden=true，spinner aria-hidden=true',
-            '虚拟化行带 aria-setsize/aria-posinset',
+            'ul/li 原生列表语义（cd-list-items > cd-list-item）',
+            'loading 由 Spin 包裹提供 role=status（aria-live=polite）',
+            '空态文案缺省来自 locale List.emptyText',
         ],
     },
     tokens: [
-        '--cd-list-bg',
-        '--cd-list-border',
-        '--cd-list-radius',
-        '--cd-list-item-padding',
-        '--cd-list-item-padding-small',
-        '--cd-list-split-color',
-        '--cd-list-header-color',
-        '--cd-list-item-color',
-        '--cd-border-radius-full',
-        '--cd-border-radius-small',
-        '--cd-color-primary',
+        // 严格对齐 Semi list/variables.scss（16 个，名/值一比一）
+        '--cd-color-list-default-border-default',
+        '--cd-color-list-empty-text-default',
+        '--cd-spacing-list-empty-paddingx',
+        '--cd-spacing-list-empty-paddingy',
+        '--cd-spacing-list-footer-paddingx',
+        '--cd-spacing-list-footer-paddingy',
+        '--cd-spacing-list-item-paddingx',
+        '--cd-spacing-list-item-paddingy',
+        '--cd-spacing-list-small-paddingx',
+        '--cd-spacing-list-small-paddingy',
+        '--cd-spacing-list-large-paddingx',
+        '--cd-spacing-list-large-paddingy',
+        '--cd-spacing-list-header-marginright',
+        '--cd-spacing-list-header-marginleft',
+        '--cd-spacing-list-extra-marginleft',
+        '--cd-spacing-list-extra-marginright',
     ],
     examples: [
         {
             title: '基础',
-            code: '{#snippet item(d)}<span>{d.title}</span>{/snippet}\n<List dataSource={data} renderItem={item} bordered />',
+            code: "{#snippet item(d)}<List.Item>{d}</List.Item>{/snippet}\n<List dataSource={data} renderItem={item} bordered header={'Header'} footer={'Footer'} />",
+        },
+        {
+            title: '模板',
+            code: '{#snippet item(d)}<List.Item header={avatar} main={title} extra={actions} />{/snippet}\n<List dataSource={data} renderItem={item} />',
         },
     ],
 };

package/dist/lottie/Lottie.svelte

@@ -0,0 +1,138 @@
+<!--
+  Lottie — 严格对齐 Semi Design Lottie。在网页中展示 Lottie 动画，内部基于 lottie-web 渲染。
+  相较直接用 lottie-web：无需关心动画容器的创建与销毁、无需关心动画生命周期。
+
+  镜像 Semi 逻辑（semi-foundation/lottie/foundation.ts）：
+  - mount：lottie.loadAnimation(loadParams)，回调 getAnimationInstance(animation) + getLottie(lottie)
+  - params 变（深比较）：destroy 旧实例 → 重新 loadAnimation → 回调 getAnimationInstance
+  - unmount：destroy
+  - loadParams 默认 renderer:'svg' / loop:true / autoplay:true，被 params 覆盖
+  - params.container 存在 → 渲染 null（用户自管容器）；否则渲染 <div class="cd-lottie">
+  Semi foundation 极简且强依赖 lottie-web(浏览器)，无跨框架复用价值，逻辑内联于此（不设 core headless）。
+  SSR：lottie-web 依赖 window，动态 import + onMount 加载（服务端只渲染空容器 div）。
+  零 scss / 零 token —— 严格对齐 Semi（Semi 仅一个无样式的 .semi-lottie class）。
+-->
+<script lang="ts" module>
+  import type { AnimationItem, LottiePlayer } from 'lottie-web';
+
+  /**
+   * lottie.loadAnimation 的入参类型（path 或 animationData 二选一 + 通用配置）。
+   * 用 Partial 对齐 Semi foundation（`Partial<ArgsType<typeof lottie.loadAnimation>[0]>`）：
+   * container 可缺省（缺省时由组件自管 div 提供），故整体设为可选。
+   */
+  export type LottieParams = Partial<Parameters<LottiePlayer['loadAnimation']>[0]>;
+
+  /**
+   * getLottie —— 获取全局 lottie 包。静态方法版本，与 Semi `Lottie.getLottie` 对齐。
+   * 动态 import lottie-web 并返回其 default 导出（浏览器端）。SSR 下无 window 会抛错。
+   */
+  export async function getLottie(): Promise<LottiePlayer> {
+    const mod = await import('lottie-web');
+    return mod.default;
+  }
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  interface Props {
+    /** 用于配置动画相关参数，透传 lottie.loadAnimation（path / animationData / renderer / loop / autoplay / container 等）。**必填**。 */
+    params: LottieParams;
+    /** 容器宽度（作用于根 div 的 width，如 "300px"）。params.container 存在时不生效。 */
+    width?: string;
+    /** 容器高度（作用于根 div 的 height，如 "300px"）。params.container 存在时不生效。 */
+    height?: string;
+    /** 获取当前动画 AnimationItem 实例（含 play/pause/setSpeed 等方法）。mount 及 params 变更后回调。 */
+    getAnimationInstance?: (animation: AnimationItem | null) => void;
+    /** 获取全局 lottie 包（含 setQuality 等全局方法）。mount 时回调。 */
+    getLottie?: (lottie: LottiePlayer) => void;
+    /** 根节点类名。 */
+    class?: string;
+    /** 根节点内联样式。 */
+    style?: string;
+  }
+
+  let {
+    params,
+    width,
+    height,
+    getAnimationInstance,
+    getLottie: getLottieProp,
+    class: className,
+    style,
+  }: Props = $props();
+
+  let containerEl = $state<HTMLDivElement | null>(null);
+  let animation: AnimationItem | null = null;
+  let lottie: LottiePlayer | null = null;
+
+  // —— loadParams：默认 svg/loop/autoplay 被用户 params 覆盖；container 缺省用组件自管的 div，
+  //    用户 params.container 优先（故 container 放 spread 之后，用 ?? 兜底缺省值）。
+  //    返回 loadAnimation 的完整入参类型（已补全必填的 container）——
+  type LoadParams = Parameters<LottiePlayer['loadAnimation']>[0];
+  function loadParams(): LoadParams {
+    return {
+      renderer: 'svg',
+      loop: true,
+      autoplay: true,
+      ...params,
+      container: params.container ?? (containerEl as Element),
+    } as LoadParams;
+  }
+
+  function load(): void {
+    if (!lottie) return;
+    animation = lottie.loadAnimation(loadParams());
+    getAnimationInstance?.(animation);
+  }
+
+  onMount(() => {
+    let disposed = false;
+    void (async () => {
+      lottie = (await import('lottie-web')).default;
+      if (disposed) return;
+      load();
+      getLottieProp?.(lottie);
+    })();
+    return () => {
+      disposed = true;
+      animation?.destroy();
+      animation = null;
+    };
+  });
+
+  // —— params 变更（深比较）：destroy 旧实例 → 重建 → 回调（对齐 Semi handleParamsUpdate）——
+  // 首帧由 onMount 负责 load，故 prevParamsJSON 初值为「首帧序列化值」以跳过首次触发。
+  let prevParamsJSON: string | undefined = undefined;
+  $effect(() => {
+    const json = safeStringify(params);
+    if (prevParamsJSON === undefined) {
+      prevParamsJSON = json;
+      return;
+    }
+    if (json !== prevParamsJSON) {
+      prevParamsJSON = json;
+      animation?.destroy();
+      load();
+    }
+  });
+
+  // animationData 可能含大对象，JSON.stringify 失败时返回 undefined；与已存值比较恒不等→触发重建（安全兜底）。
+  function safeStringify(v: unknown): string | undefined {
+    try {
+      return JSON.stringify(v);
+    } catch {
+      return undefined;
+    }
+  }
+
+  const cls = $derived(['cd-lottie', className].filter(Boolean).join(' '));
+  const wrapperStyle = $derived(
+    [width && `width:${width}`, height && `height:${height}`, style].filter(Boolean).join(';'),
+  );
+</script>
+
+<!-- params.container 存在 → 用户自管容器，组件不渲染 DOM（对齐 Semi 返回 null）。 -->
+{#if !params.container}
+  <div bind:this={containerEl} class={cls} style={wrapperStyle}></div>
+{/if}