@chenzy-design/svelte 0.1.0

package/dist/list/List.svelte.d.ts

@@ -0,0 +1,100 @@
+import { type Snippet } from 'svelte';
+import { type ScrollAlign, type ListKey } from '@chenzy-design/core';
+declare function $$render<T>(): {
+    props: {
+        dataSource?: T[];
+        renderItem?: Snippet<[item: T, index: number]>;
+        rowKey?: string | ((item: T) => string | number);
+        size?: "small" | "default" | "large";
+        bordered?: boolean;
+        split?: boolean;
+        header?: string | Snippet;
+        footer?: string | Snippet;
+        loading?: boolean;
+        loadingSkeleton?: boolean;
+        skeletonCount?: number;
+        emptyContent?: string | Snippet;
+        /** 网格布局：列数或 { column, gutter } */
+        grid?: number | {
+            column?: number;
+            gutter?: number;
+        };
+        /** 自定义底部加载区（优先于内置按钮） */
+        loadMore?: Snippet;
+        /** 内置「加载更多」按钮回调 */
+        onLoadMore?: () => void;
+        /** 内置按钮 loading 态 */
+        loadingMore?: boolean;
+        /** 是否还有更多（控制内置按钮显隐） */
+        hasMore?: boolean;
+        /** 分页：复用 Pagination，对 dataSource 切片渲染当页（与 loadMore 互斥，优先生效） */
+        pagination?: false | {
+            pageSize?: number;
+            current?: number;
+            defaultCurrent?: number;
+            onChange?: (page: number) => void;
+        };
+        /** 虚拟化：大数据只渲染视口内行（与 grid/pagination 互斥，优先生效）。 */
+        virtualized?: false | {
+            /** 行高（px），默认 40；传 'auto' 启用动态测高。 */
+            itemSize?: number | "auto";
+            /** 动态测高初始估算行高（px）。 */
+            estimatedItemSize?: number;
+            /** 视口高度（px 数字，或 CSS 字符串如 '60vh'）。 */
+            height: number | string;
+            /** 上下缓冲行数，默认 3。 */
+            overscan?: number;
+        };
+        /** 行可选：'single' 单选 / 'multiple' 多选。 */
+        selectable?: false | "multiple" | "single";
+        /** 受控选中 key 集合（不回写，仅 onSelectionChange 回调，红线 #1）。 */
+        selectedKeys?: ListKey[];
+        /** 非受控初始选中 key 集合。 */
+        defaultSelectedKeys?: ListKey[];
+        /** 选中态变更回调（受控/非受控均触发）。 */
+        onSelectionChange?: (keys: ListKey[], info: {
+            item: T | undefined;
+            key: ListKey;
+            selected: boolean;
+        }) => void;
+        /** selectable 模式 listbox 容器可访问名（缺省回退 i18n List.selectableLabel）。 */
+        ariaLabel?: string;
+        /** 声明式用法：内嵌 <List.Item>（不传 dataSource 时生效）。 */
+        children?: Snippet;
+        /** 整体布局方向：'vertical'（默认）每 item 内容纵向排列；'horizontal' 横向排列。 */
+        layout?: "horizontal" | "vertical";
+        /** 列表容器滚动事件。 */
+        onListScroll?: (e: Event) => void;
+        class?: string;
+    };
+    exports: {
+        scrollToIndex: (index: number, opts?: {
+            align?: ScrollAlign;
+        }) => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {
+        scrollToIndex: (index: number, opts?: {
+            align?: ScrollAlign;
+        } | undefined) => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const List: $$IsomorphicComponent;
+type List<T> = InstanceType<typeof List<T>>;
+export default List;
+//# sourceMappingURL=List.svelte.d.ts.map

package/dist/list/List.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.svelte.d.ts","sourceRoot":"","sources":["../../src/list/List.svelte.ts"],"names":[],"mappings":"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"}

package/dist/list/ListA11yFixture.svelte

@@ -0,0 +1,38 @@
+<!--
+  仅供 List.a11y.test.ts 使用的测试夹具：数据驱动 dataSource + renderItem Snippet。
+  selectable 时容器升级 role=listbox，行 role=option + aria-selected。
+-->
+<script lang="ts">
+  import { List } from './index.js';
+
+  interface Props {
+    selectable?: false | 'single' | 'multiple';
+    bordered?: boolean;
+    header?: string;
+    defaultSelectedKeys?: (string | number)[];
+  }
+  let {
+    selectable = false,
+    bordered = false,
+    header = undefined,
+    defaultSelectedKeys = [],
+  }: Props = $props();
+
+  const dataSource = [
+    { key: 'u1', title: 'Ada Lovelace' },
+    { key: 'u2', title: 'Alan Turing' },
+    { key: 'u3', title: 'Grace Hopper' },
+  ];
+</script>
+
+<List
+  {dataSource}
+  {selectable}
+  {bordered}
+  {defaultSelectedKeys}
+  {...header !== undefined ? { header } : {}}
+>
+  {#snippet renderItem(item)}
+    <span>{(item as { title: string }).title}</span>
+  {/snippet}
+</List>

package/dist/list/ListA11yFixture.svelte.d.ts

@@ -0,0 +1,10 @@
+interface Props {
+    selectable?: false | 'single' | 'multiple';
+    bordered?: boolean;
+    header?: string;
+    defaultSelectedKeys?: (string | number)[];
+}
+declare const ListA11yFixture: import("svelte").Component<Props, {}, "">;
+type ListA11yFixture = ReturnType<typeof ListA11yFixture>;
+export default ListA11yFixture;
+//# sourceMappingURL=ListA11yFixture.svelte.d.ts.map

package/dist/list/ListA11yFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListA11yFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/list/ListA11yFixture.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,UAAU,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,mBAAmB,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC3C;AA2BH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/list/ListBenchFixture.svelte

@@ -0,0 +1,22 @@
+<!--
+  仅供 List.bench.ts 使用的基准夹具：按 count 生成 dataSource，
+  用 renderItem snippet 渲染真实行。隔离 snippet（snippet 只能在 .svelte 内定义）。
+-->
+<script lang="ts">
+  import { List } from './index.js';
+
+  interface Props {
+    count?: number;
+  }
+  let { count = 100 }: Props = $props();
+
+  const dataSource = $derived(
+    Array.from({ length: count }, (_, i) => ({ key: `r${i}`, title: `Item ${i}` })),
+  );
+</script>
+
+<List {dataSource} bordered>
+  {#snippet renderItem(item)}
+    <span>{(item as { title: string }).title}</span>
+  {/snippet}
+</List>

package/dist/list/ListBenchFixture.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    count?: number;
+}
+declare const ListBenchFixture: import("svelte").Component<Props, {}, "">;
+type ListBenchFixture = ReturnType<typeof ListBenchFixture>;
+export default ListBenchFixture;
+//# sourceMappingURL=ListBenchFixture.svelte.d.ts.map

package/dist/list/ListBenchFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListBenchFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/list/ListBenchFixture.svelte.ts"],"names":[],"mappings":"AAME,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/list/ListItem.svelte

@@ -0,0 +1,175 @@
+<!--
+  List.Item — 声明式列表项容器。
+  - 默认（非 selectable）：渲染 <li role="listitem">，与 dataSource 模式同结构，复用父 List
+    的 split/size 样式。
+  - selectable：读父 List context（getListContext），渲染 role="option" + aria-selected，
+    左侧内置 checkbox/radio 视觉，点击/键盘触发 ctx.toggle（仅回调 onSelectionChange，
+    红线 #1：不回写 selectedKeys）。
+  default 主内容 + extra（右侧附加区） + actions（底部操作区）三段插槽，对齐 spec。
+  无 effect 自循环：选中态来自父 context 派生（受控 selectedKeys），本组件不写 $state。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ListKey } from '@chenzy-design/core';
+  import { Checkbox } from '../checkbox/index.js';
+  import { getListContext } from './context.js';
+
+  interface Props {
+    /** selectable 模式下本项的唯一 key（用于选中态判定与回调）。 */
+    itemKey?: ListKey;
+    /** item 头部（字符串或 Snippet）。 */
+    header?: string | Snippet;
+    /** item 主要内容区（语义化 slot，与 children 不互斥）。 */
+    main?: Snippet;
+    /** 右侧附加内容区（如缩略图、统计数字）。 */
+    extra?: Snippet;
+    /** 底部操作区（按钮组）。 */
+    actions?: Snippet;
+    class?: string;
+    /** 主内容（通用插槽）。 */
+    children?: Snippet;
+  }
+
+  let { itemKey, header, main, extra, actions, class: className = '', children }: Props = $props();
+
+  function isSnippet(v: unknown): v is Snippet {
+    return typeof v === 'function';
+  }
+
+  const ctx = getListContext();
+
+  const selectable = $derived(ctx?.getSelectable() ?? false);
+  const selected = $derived(
+    selectable && itemKey !== undefined ? !!ctx?.isSelected(itemKey) : false,
+  );
+  const multiple = $derived(selectable === 'multiple');
+
+  function activate(shiftKey: boolean) {
+    if (!selectable || itemKey === undefined) return;
+    ctx?.toggle(itemKey, shiftKey);
+  }
+
+  function onClick(e: MouseEvent) {
+    activate(e.shiftKey);
+  }
+
+  // roving tabindex 由父派生（红线 #2：本组件只读不写父级 $state）。
+  const tabindex = $derived(
+    selectable && itemKey !== undefined ? (ctx?.rowTabindex(itemKey) ?? 0) : undefined,
+  );
+
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      activate(e.shiftKey);
+      return;
+    }
+    // ↑↓ / Home/End / PageUp/Down roving 交父按 DOM 顺序处理。
+    if (itemKey !== undefined) ctx?.onRowKeydown(e, itemKey);
+  }
+
+  const cls = $derived(
+    [
+      'cd-list__item',
+      selectable && 'cd-list__item--selectable',
+      selected && 'cd-list__item--selected',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+</script>
+
+{#snippet itemInner()}
+  {#if header !== undefined}
+    <div class="cd-list__item-header">
+      {#if isSnippet(header)}{@render header()}{:else}{header}{/if}
+    </div>
+  {/if}
+  <div class="cd-list__item-row">
+    <div class="cd-list__item-content">
+      {#if main}{@render main()}{/if}
+      {@render children?.()}
+    </div>
+    {#if extra}<div class="cd-list__item-extra">{@render extra()}</div>{/if}
+  </div>
+  {#if actions}<div class="cd-list__item-actions">{@render actions()}</div>{/if}
+{/snippet}
+
+{#if selectable}
+  <li
+    class={cls}
+    role="option"
+    aria-selected={selected}
+    data-list-key={itemKey}
+    {tabindex}
+    onclick={onClick}
+    onkeydown={onKeydown}
+    onfocus={() => itemKey !== undefined && ctx?.onRowFocus(itemKey)}
+  >
+    <span class="cd-list__item-selector" aria-hidden="true">
+      <Checkbox checked={selected} />
+    </span>
+    <div class="cd-list__item-main">
+      {@render itemInner()}
+    </div>
+  </li>
+{:else}
+  <li class={cls}>
+    <div class="cd-list__item-main">
+      {@render itemInner()}
+    </div>
+  </li>
+{/if}
+
+<style>
+  .cd-list__item-main {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .cd-list__item-header {
+    font-weight: var(--cd-font-weight-medium, 500);
+    margin-block-end: var(--cd-spacing-1, 4px);
+    color: var(--cd-color-text-0);
+  }
+  .cd-list__item-row {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--cd-spacing-3, 12px);
+  }
+  .cd-list__item-content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .cd-list__item-extra {
+    flex: none;
+  }
+  .cd-list__item-actions {
+    display: flex;
+    gap: var(--cd-spacing-3, 12px);
+    margin-block-start: var(--cd-spacing-2, 8px);
+  }
+
+  .cd-list__item--selectable {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--cd-spacing-2, 8px);
+    cursor: pointer;
+    outline: none;
+  }
+  .cd-list__item--selectable:hover {
+    background: var(--cd-color-fill-0, rgba(0, 0, 0, 0.03));
+  }
+  .cd-list__item--selectable:focus-visible {
+    box-shadow: inset 0 0 0 2px var(--cd-color-primary, #0066ff);
+  }
+  .cd-list__item--selected {
+    background: var(--cd-color-primary-light-default, rgba(0, 102, 255, 0.1));
+  }
+  .cd-list__item-selector {
+    flex: none;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+</style>

package/dist/list/ListItem.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { Snippet } from 'svelte';
+import type { ListKey } from '@chenzy-design/core';
+interface Props {
+    /** selectable 模式下本项的唯一 key（用于选中态判定与回调）。 */
+    itemKey?: ListKey;
+    /** item 头部（字符串或 Snippet）。 */
+    header?: string | Snippet;
+    /** item 主要内容区（语义化 slot，与 children 不互斥）。 */
+    main?: Snippet;
+    /** 右侧附加内容区（如缩略图、统计数字）。 */
+    extra?: Snippet;
+    /** 底部操作区（按钮组）。 */
+    actions?: Snippet;
+    class?: string;
+    /** 主内容（通用插槽）。 */
+    children?: Snippet;
+}
+declare const ListItem: import("svelte").Component<Props, {}, "">;
+type ListItem = ReturnType<typeof ListItem>;
+export default ListItem;
+//# sourceMappingURL=ListItem.svelte.d.ts.map

package/dist/list/ListItem.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.svelte.d.ts","sourceRoot":"","sources":["../../src/list/ListItem.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAKjD,UAAU,KAAK;IACb,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,2CAA2C;IAC3C,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,0BAA0B;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kBAAkB;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgGH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/list/ListKbdFixture.svelte

@@ -0,0 +1,31 @@
+<!--
+  仅供 List.kbd.test.ts（browser project）使用的键盘 e2e 夹具。
+  selectable="single" → role=listbox / 行 role=option，roving 单停靠点（真实焦点）。
+  前后各放按钮验证 Tab 进入只停靠单行、Tab 出去落到 after。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import List from './List.svelte';
+
+  type Row = { key: string; label: string };
+  const dataSource: Row[] = [
+    { key: 'a', label: 'Alpha' },
+    { key: 'b', label: 'Bravo' },
+    { key: 'c', label: 'Charlie' },
+  ];
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="before">before</button>
+  <List
+    {dataSource}
+    rowKey="key"
+    selectable="single"
+    ariaLabel="People"
+  >
+    {#snippet renderItem(item: Row)}
+      <span>{item.label}</span>
+    {/snippet}
+  </List>
+  <button type="button" data-testid="after">after</button>
+</LocaleProvider>

package/dist/list/ListKbdFixture.svelte.d.ts

@@ -0,0 +1,19 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ListKbdFixture: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ListKbdFixture = InstanceType<typeof ListKbdFixture>;
+export default ListKbdFixture;
+//# sourceMappingURL=ListKbdFixture.svelte.d.ts.map

package/dist/list/ListKbdFixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListKbdFixture.svelte.d.ts","sourceRoot":"","sources":["../../src/list/ListKbdFixture.svelte.ts"],"names":[],"mappings":"AA+BA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,cAAc;;kBAA+E,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}

package/dist/list/ListMeta.svelte

@@ -0,0 +1,73 @@
+<!--
+  List.Meta — 项内结构化布局：avatar（头像/图标） + title（标题） + description（描述）。
+  三段均可用 props（string）或同名 Snippet 提供，Snippet 优先。纯展示，无状态、无 effect。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    /** 左侧头像/图标区，string 直接渲染或用 avatar Snippet。 */
+    avatar?: string | Snippet;
+    /** 标题，string 或 title Snippet。 */
+    title?: string | Snippet;
+    /** 描述，string 或 description Snippet。 */
+    description?: string | Snippet;
+    class?: string;
+  }
+
+  let { avatar, title, description, class: className = '' }: Props = $props();
+
+  function isSnippet(v: unknown): v is Snippet {
+    return typeof v === 'function';
+  }
+</script>
+
+<div class={['cd-list__meta', className].filter(Boolean).join(' ')}>
+  {#if avatar !== undefined}
+    <div class="cd-list__meta-avatar">
+      {#if isSnippet(avatar)}{@render avatar()}{:else}{avatar}{/if}
+    </div>
+  {/if}
+  <div class="cd-list__meta-content">
+    {#if title !== undefined}
+      <div class="cd-list__meta-title">
+        {#if isSnippet(title)}{@render title()}{:else}{title}{/if}
+      </div>
+    {/if}
+    {#if description !== undefined}
+      <div class="cd-list__meta-description">
+        {#if isSnippet(description)}{@render description()}{:else}{description}{/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .cd-list__meta {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--cd-spacing-3, 12px);
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .cd-list__meta-avatar {
+    flex: none;
+    display: flex;
+    align-items: center;
+  }
+  .cd-list__meta-content {
+    flex: 1;
+    min-inline-size: 0;
+  }
+  .cd-list__meta-title {
+    color: var(--cd-list-item-color);
+    font-weight: var(--cd-font-weight-medium, 500);
+    line-height: 1.4;
+  }
+  .cd-list__meta-description {
+    color: var(--cd-list-header-color);
+    font-size: var(--cd-font-size-small, 12px);
+    line-height: 1.5;
+    margin-block-start: 2px;
+  }
+</style>

package/dist/list/ListMeta.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** 左侧头像/图标区，string 直接渲染或用 avatar Snippet。 */
+    avatar?: string | Snippet;
+    /** 标题，string 或 title Snippet。 */
+    title?: string | Snippet;
+    /** 描述，string 或 description Snippet。 */
+    description?: string | Snippet;
+    class?: string;
+}
+declare const ListMeta: import("svelte").Component<Props, {}, "">;
+type ListMeta = ReturnType<typeof ListMeta>;
+export default ListMeta;
+//# sourceMappingURL=ListMeta.svelte.d.ts.map

package/dist/list/ListMeta.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListMeta.svelte.d.ts","sourceRoot":"","sources":["../../src/list/ListMeta.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGpC,UAAU,KAAK;IACb,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqCH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/list/context.d.ts

@@ -0,0 +1,30 @@
+import type { ListKey } from '@chenzy-design/core';
+/**
+ * List context — exposes selectable state to declarative <List.Item> children.
+ * Getters keep reactivity to the parent List's props (reading a snapshot would
+ * freeze the initial value). No mutable state stored here; selection toggling
+ * goes through the parent's command (which calls the controlled onSelectionChange
+ * — red line #1: never writes back to selectedKeys).
+ */
+export interface ListContext {
+    /** Whether selectable is enabled (single|multiple). */
+    getSelectable: () => false | 'single' | 'multiple';
+    /** Whether row `key` is currently selected. */
+    isSelected: (key: ListKey) => boolean;
+    /** Request a selection toggle for row `key` (fires onSelectionChange only). */
+    toggle: (key: ListKey, shiftKey: boolean) => void;
+    /** Row vertical padding size class suffix. */
+    getSize: () => 'small' | 'default' | 'large';
+    /**
+     * roving tabindex (pure derived): focused row / first DOM row is 0, others -1.
+     * Red line #2: read-only during render, never writes parent $state.
+     */
+    rowTabindex: (key: ListKey) => 0 | -1;
+    /** Row keydown: ↑↓ roving + Home/End + PageUp/Down (imperative focus()). */
+    onRowKeydown: (event: KeyboardEvent, key: ListKey) => void;
+    /** Sync focusedRowKey when a row gains focus. */
+    onRowFocus: (key: ListKey) => void;
+}
+export declare function setListContext(ctx: ListContext): void;
+export declare function getListContext(): ListContext | undefined;
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/list/context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAEnD;;;;;;GAMG;AACH,MAAM,WAAW,WAAW;IAC1B,uDAAuD;IACvD,aAAa,EAAE,MAAM,KAAK,GAAG,QAAQ,GAAG,UAAU,CAAC;IACnD,+CAA+C;IAC/C,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,OAAO,CAAC;IACtC,+EAA+E;IAC/E,MAAM,EAAE,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,8CAA8C;IAC9C,OAAO,EAAE,MAAM,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAC7C;;;OAGG;IACH,WAAW,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;IACtC,4EAA4E;IAC5E,YAAY,EAAE,CAAC,KAAK,EAAE,aAAa,EAAE,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3D,iDAAiD;IACjD,UAAU,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAID,wBAAgB,cAAc,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,CAErD;AAED,wBAAgB,cAAc,IAAI,WAAW,GAAG,SAAS,CAExD"}

package/dist/list/context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('cd-list');
+export function setListContext(ctx) {
+    setContext(KEY, ctx);
+}
+export function getListContext() {
+    return getContext(KEY);
+}

package/dist/list/index.d.ts

@@ -0,0 +1,14 @@
+import List_ from './List.svelte';
+import ListItem_ from './ListItem.svelte';
+import ListMeta from './ListMeta.svelte';
+declare const ListItem: typeof ListItem_ & {
+    Meta: typeof ListMeta;
+};
+export declare const List: typeof List_ & {
+    Item: typeof ListItem;
+    Meta: typeof ListMeta;
+};
+export { ListItem, ListMeta };
+export { meta as listMeta } from './meta.js';
+export { getListContext, setListContext, type ListContext, } from './context.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/list/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,eAAe,CAAC;AAClC,OAAO,SAAS,MAAM,mBAAmB,CAAC;AAC1C,OAAO,QAAQ,MAAM,mBAAmB,CAAC;AAGzC,QAAA,MAAM,QAAQ,EAAE,OAAO,SAAS,GAAG;IAAE,IAAI,EAAE,OAAO,QAAQ,CAAA;CAExD,CAAC;AAEH,eAAO,MAAM,IAAI,EAAE,OAAO,KAAK,GAAG;IAChC,IAAI,EAAE,OAAO,QAAQ,CAAC;IACtB,IAAI,EAAE,OAAO,QAAQ,CAAC;CACoC,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC9B,OAAO,EAAE,IAAI,IAAI,QAAQ,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EACL,cAAc,EACd,cAAc,EACd,KAAK,WAAW,GACjB,MAAM,cAAc,CAAC"}

package/dist/list/index.js

@@ -0,0 +1,11 @@
+import List_ from './List.svelte';
+import ListItem_ from './ListItem.svelte';
+import ListMeta from './ListMeta.svelte';
+// List.Item 挂 Meta 子组件（List.Item.Meta），List 挂 Item（及 Item.Meta 镜像）。
+const ListItem = Object.assign(ListItem_, {
+    Meta: ListMeta,
+});
+export const List = Object.assign(List_, { Item: ListItem, Meta: ListMeta });
+export { ListItem, ListMeta };
+export { meta as listMeta } from './meta.js';
+export { getListContext, setListContext, } from './context.js';