@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/card/Card.svelte

@@ -1,68 +1,79 @@
 <!--
-  Card — see specs/components/show/Card.spec.md
-  Container: cover → header → body (with loading skeleton) → actions.
+  Card — 卡片容器，对齐 Semi Design Card。
+  DOM 顺序（同 Semi）：header → cover → body(含 actions) → footer。
+  - header：header snippet 优先，否则 headerExtraContent(左) + title(右)，wrapper row-reverse 使视觉为 title 左 / extra 右。
+  - title 为 string 时用 Typography.Title heading=6 + 单行省略 + tooltip（同 Semi）。
+  - body：loading 时用 Skeleton 占位（Title + Paragraph rows=3），仅在有 children 时渲染。
+  - actions：body 内底部操作区，用 Space spacing=12 逐项排布（同 Semi）。
+  - footer：自定义页脚，footerLine 控制其与 body 的上分隔线（默认 false，同 Semi）。
+  shadows：'hover' | 'always'（无 never，同 Semi）；bordered 默认 true。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { useId } from '@chenzy-design/core';
+  import { Typography } from '../typography/index.js';
+  import { Skeleton, SkeletonTitle, SkeletonParagraph } from '../skeleton/index.js';
+  import { Space } from '../space/index.js';
 
-  type CardSize = 'small' | 'default' | 'large';
-  type CardShadow = 'never' | 'hover' | 'always';
+  export type Shadows = 'hover' | 'always';
 
   export interface Props {
+    /** 卡片标题；string 时用 Typography.Title heading=6 渲染并关联 aria-labelledby。 */
     title?: string | Snippet;
-    extra?: Snippet;
-    cover?: Snippet;
-    actions?: Snippet;
-    size?: CardSize;
-    bordered?: boolean;
-    shadow?: CardShadow;
-    hoverable?: boolean;
-    loading?: boolean;
-    loadingRows?: number;
-    /** header 区内联样式透传 */
+    /** header 右侧的额外内容（对齐 Semi headerExtraContent）。 */
+    headerExtraContent?: Snippet;
+    /** 自定义头部，传入将覆盖 title 与 headerExtraContent（对齐 Semi header）。 */
+    header?: Snippet;
+    /** 头部与内容区是否有分隔线。 */
+    headerLine?: boolean;
+    /** 头部区内联样式透传。 */
     headerStyle?: string;
-    /** body 区内联样式透传 */
+    /** 卡片封面（出血）。 */
+    cover?: Snippet;
+    /** 内容区内联样式透传。 */
     bodyStyle?: string;
-    /** header 与 body 间是否显示分隔线 */
-    headerLine?: boolean;
-    /** actions 区上方是否显示分隔线 */
+    /** 卡片内容区底部的操作组，以 12px 水平间距排布。 */
+    actions?: Snippet;
+    /** 自定义页脚。 */
+    footer?: Snippet;
+    /** 页脚区与内容区是否有分隔线（默认 false）。 */
     footerLine?: boolean;
-    /** actions/footer 区内联样式透传 */
+    /** 页脚区内联样式透传。 */
     footerStyle?: string;
-    /** 整卡可点击：合并 hoverable 视觉并启用键盘/点击激活与 role=button */
-    clickable?: boolean;
-    /** 仅在 clickable 时生效，禁用点击与 hover 反馈 */
-    disabled?: boolean;
+    /** 是否有外边框。 */
+    bordered?: boolean;
+    /** 阴影显示时机；不设则无阴影。 */
+    shadows?: Shadows;
+    /** 内容区是否显示加载占位。 */
+    loading?: boolean;
+    /** 根节点自定义类名。 */
     class?: string;
-    onClick?: (originalEvent: MouseEvent | KeyboardEvent) => void;
-    onMouseenter?: (originalEvent: MouseEvent) => void;
-    onMouseleave?: (originalEvent: MouseEvent) => void;
+    /** 根节点自定义内联样式。 */
+    style?: string;
+    /** 根节点 aria-label，表述该 Card 的作用。 */
+    ariaLabel?: string;
+    /** 卡片正文。 */
     children?: Snippet;
   }
 
   let {
     title,
-    extra,
+    headerExtraContent,
+    header,
+    headerLine = true,
+    headerStyle,
     cover,
+    bodyStyle,
     actions,
-    size = 'default',
+    footer,
+    footerLine = false,
+    footerStyle,
     bordered = true,
-    shadow = 'never',
-    hoverable = false,
+    shadows,
     loading = false,
-    loadingRows = 3,
-    headerStyle,
-    bodyStyle,
-    headerLine = true,
-    footerLine = true,
-    footerStyle,
-    clickable = false,
-    disabled = false,
     class: className,
-    onClick,
-    onMouseenter,
-    onMouseleave,
+    style,
+    ariaLabel,
     children,
   }: Props = $props();
 
@@ -71,271 +82,198 @@
   const titleText = $derived(typeof title === 'string' ? title : undefined);
   const titleSnippet = $derived(typeof title === 'function' ? title : undefined);
   const hasTitle = $derived(title !== undefined);
-  const hasHeader = $derived(hasTitle || extra !== undefined);
-
-  // skeleton rows is render-only (derived from a number prop, not a mounted array)
-  const rows = $derived(
-    Array.from({ length: Math.max(0, loadingRows) }, (_, i) => i),
-  );
+  const hasHeader = $derived(header !== undefined || headerExtraContent !== undefined || hasTitle);
 
   const cls = $derived(
     [
       'cd-card',
-      `cd-card--${size}`,
       bordered && 'cd-card--bordered',
-      `cd-card--shadow-${shadow}`,
-      (hoverable || shadow === 'hover' || (clickable && !disabled)) &&
-        'cd-card--hoverable',
-      clickable && 'cd-card--clickable',
-      clickable && disabled && 'cd-card--disabled',
+      shadows && 'cd-card--shadows',
+      shadows && `cd-card--shadows-${shadows}`,
       className,
     ]
       .filter(Boolean)
       .join(' '),
   );
-
-  // clickable interaction: pure handlers, no global listeners → no cleanup needed
-  function handleClick(e: MouseEvent) {
-    if (!clickable || disabled) return;
-    onClick?.(e);
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (!clickable || disabled) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      // Space: prevent page scroll on activation
-      e.preventDefault();
-      onClick?.(e);
-    }
-  }
-
-  function handleMouseenter(e: MouseEvent) {
-    onMouseenter?.(e);
-  }
-  function handleMouseleave(e: MouseEvent) {
-    onMouseleave?.(e);
-  }
 </script>
 
-<!--
-  tabindex is only set together with role="button" (clickable, not disabled),
-  so the element is interactive when focusable; the static check can't see the
-  cross-attribute correlation.
--->
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
   class={cls}
-  role={clickable ? 'button' : hasTitle ? 'region' : undefined}
-  aria-labelledby={titleIsString ? titleId : undefined}
+  {style}
+  role={hasTitle ? 'region' : undefined}
+  aria-label={ariaLabel}
+  aria-labelledby={titleIsString && !ariaLabel ? titleId : undefined}
   aria-busy={loading || undefined}
-  aria-disabled={clickable && disabled ? 'true' : undefined}
-  tabindex={clickable ? (disabled ? -1 : 0) : undefined}
-  onclick={clickable ? handleClick : undefined}
-  onkeydown={clickable ? handleKeydown : undefined}
-  onmouseenter={onMouseenter ? handleMouseenter : undefined}
-  onmouseleave={onMouseleave ? handleMouseleave : undefined}
 >
-  {#if cover}
-    <div class="cd-card__cover">{@render cover()}</div>
-  {/if}
-
   {#if hasHeader}
     <div
-      class={['cd-card__header', !headerLine && 'cd-card__header--no-line']
+      class={['cd-card__header', headerLine && 'cd-card__header--bordered']
         .filter(Boolean)
         .join(' ')}
       style={headerStyle}
     >
-      {#if hasTitle}
-        <div class="cd-card__title" id={titleIsString ? titleId : undefined}>
-          {#if titleText !== undefined}
-            {titleText}
-          {:else if titleSnippet}
-            {@render titleSnippet()}
+      {#if header}
+        {@render header()}
+      {:else}
+        <div class="cd-card__header-wrapper">
+          {#if headerExtraContent}
+            <div class="cd-card__header-wrapper-extra">{@render headerExtraContent()}</div>
+          {/if}
+          {#if hasTitle}
+            <div
+              class={[
+                'cd-card__header-wrapper-title',
+                headerExtraContent && 'cd-card__header-wrapper-spacing',
+              ]
+                .filter(Boolean)
+                .join(' ')}
+            >
+              {#if titleText !== undefined}
+                <div id={titleId}>
+                  <Typography.Title
+                    heading={6}
+                    ellipsis={{ showTooltip: true, rows: 1 }}
+                  >
+                    {titleText}
+                  </Typography.Title>
+                </div>
+              {:else if titleSnippet}
+                {@render titleSnippet()}
+              {/if}
+            </div>
           {/if}
         </div>
       {/if}
-      {#if extra}
-        <div class="cd-card__extra">{@render extra()}</div>
-      {/if}
     </div>
   {/if}
 
+  {#if cover}
+    <div class="cd-card__cover">{@render cover()}</div>
+  {/if}
+
   <div class="cd-card__body" style={bodyStyle}>
-    {#if loading}
-      <div class="cd-card__skeleton" aria-hidden="true">
-        {#each rows as row (row)}
-          <span class="cd-card__skeleton-row"></span>
-        {/each}
+    {#if children}
+      {#if loading}
+        <Skeleton loading active>
+          {#snippet placeholder()}
+            <SkeletonTitle />
+            <br />
+            <SkeletonParagraph rows={3} />
+          {/snippet}
+          {@render children()}
+        </Skeleton>
+      {:else}
+        {@render children()}
+      {/if}
+    {/if}
+    {#if actions}
+      <div class="cd-card__body-actions">
+        <Space spacing={12}>
+          {@render actions()}
+        </Space>
       </div>
-    {:else}
-      {@render children?.()}
     {/if}
   </div>
 
-  {#if actions}
+  {#if footer}
     <div
-      class={['cd-card__actions', !footerLine && 'cd-card__actions--no-line']
+      class={['cd-card__footer', footerLine && 'cd-card__footer--bordered']
         .filter(Boolean)
         .join(' ')}
       style={footerStyle}
     >
-      {@render actions()}
+      {@render footer()}
     </div>
   {/if}
 </div>
 
 <style>
   .cd-card {
-    display: flex;
-    flex-direction: column;
-    background: var(--cd-card-bg);
-    border: 1px solid transparent;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
     border-radius: var(--cd-card-radius);
+    border: var(--cd-card-border-width) solid transparent;
     overflow: hidden;
-    transition: box-shadow var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+    background-color: var(--cd-card-bg);
+    color: var(--cd-card-body-color);
+    font-size: var(--cd-card-default-size);
+    font-weight: var(--cd-card-default-weight);
+    line-height: var(--cd-card-default-lineheight);
+    letter-spacing: 0;
   }
   .cd-card--bordered {
-    border-color: var(--cd-card-border);
-  }
-  .cd-card--shadow-always {
-    box-shadow: var(--cd-card-shadow);
-  }
-  .cd-card--hoverable:hover,
-  .cd-card--shadow-hover:hover {
-    box-shadow: var(--cd-card-shadow-hover);
+    border-color: var(--cd-card-border-color);
   }
 
-  .cd-card--clickable {
+  /* shadows：hover 时悬停显示、always 常显；shadows 存在即 cursor:pointer（同 Semi）。 */
+  .cd-card--shadows {
     cursor: pointer;
-    transition:
-      box-shadow var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
-      transform var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+    transition: box-shadow var(--cd-card-transition-duration);
   }
-  .cd-card--clickable:not(.cd-card--disabled):hover {
-    transform: translateY(-2px);
-  }
-  .cd-card--clickable:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-card--disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
+  .cd-card--shadows-hover:hover {
+    box-shadow: var(--cd-card-shadow);
+    /* 避免网格型卡片组 shadow 被相邻卡覆盖 */
+    z-index: var(--cd-card-z-hover);
   }
-  .cd-card--disabled.cd-card--clickable:hover {
-    transform: none;
-    box-shadow: none;
+  .cd-card--shadows-always {
+    box-shadow: var(--cd-card-shadow);
   }
 
-  .cd-card__cover {
-    display: block;
-    overflow: hidden;
+  .cd-card__header {
+    padding: var(--cd-card-padding);
   }
-  .cd-card__cover :global(img) {
-    display: block;
-    inline-size: 100%;
+  .cd-card__header--bordered {
+    border-bottom: var(--cd-card-border-width) solid var(--cd-card-border-color);
   }
-
-  .cd-card__header {
+  .cd-card__header-wrapper {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    flex-direction: row-reverse;
     justify-content: space-between;
-    gap: var(--cd-spacing-base-tight);
-    padding: var(--cd-card-padding);
-    border-block-end: 1px solid var(--cd-card-header-border);
   }
-  .cd-card__header--no-line {
-    border-block-end: none;
+  .cd-card__header-wrapper-spacing {
+    margin-inline-end: var(--cd-card-margin);
   }
-  .cd-card--small .cd-card__header {
-    padding: var(--cd-card-padding-small);
-  }
-  .cd-card__title {
+  .cd-card__header-wrapper-title {
+    inline-size: 100%;
+    overflow: hidden;
     color: var(--cd-card-title-color);
     font-weight: var(--cd-card-title-weight);
     font-size: var(--cd-card-title-size);
-    min-inline-size: 0;
-  }
-  .cd-card--small .cd-card__title {
-    font-size: var(--cd-font-size-regular);
+    line-height: var(--cd-card-title-lineheight);
   }
-  .cd-card--large .cd-card__title {
-    font-size: var(--cd-font-size-header-4);
+  .cd-card__header-wrapper-extra {
+    flex-shrink: 0;
+    font-size: var(--cd-card-extra-size);
+    font-weight: var(--cd-card-extra-weight);
+    color: var(--cd-card-extra-color);
+    letter-spacing: 0;
   }
-  .cd-card__extra {
-    flex: 0 0 auto;
-    color: var(--cd-color-text-2);
-    font-size: var(--cd-font-size-regular);
+
+  .cd-card__cover :global(> *) {
+    display: block;
+    inline-size: 100%;
   }
 
   .cd-card__body {
-    flex: 1 1 auto;
     padding: var(--cd-card-padding);
-    color: var(--cd-color-text-0);
+    font-size: var(--cd-card-default-size);
+    font-weight: var(--cd-card-default-weight);
+    line-height: var(--cd-card-default-lineheight);
+    color: var(--cd-card-body-color);
+    letter-spacing: 0;
   }
-  .cd-card--small .cd-card__body {
-    padding: var(--cd-card-padding-small);
+  .cd-card__body-actions {
+    margin-block-start: var(--cd-card-margin);
+    padding-block-start: var(--cd-card-padding);
+    border-top: var(--cd-card-border-width) solid var(--cd-card-border-color);
   }
 
-  .cd-card__actions {
-    display: flex;
-    align-items: center;
-    border-block-start: 1px solid var(--cd-card-header-border);
-  }
-  .cd-card__actions--no-line {
-    border-block-start: none;
-  }
-  .cd-card__actions :global(> *) {
-    flex: 1 1 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-block: var(--cd-spacing-base-tight);
-  }
-  .cd-card__actions :global(> * + *) {
-    border-inline-start: 1px solid var(--cd-card-header-border);
-  }
-
-  .cd-card__skeleton {
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-base-tight);
-  }
-  .cd-card__skeleton-row {
-    display: block;
-    block-size: 0.9em;
-    border-radius: var(--cd-border-radius-small);
-    background: linear-gradient(
-      90deg,
-      var(--cd-color-fill-0) 25%,
-      var(--cd-color-fill-1) 37%,
-      var(--cd-color-fill-0) 63%
-    );
-    background-size: 400% 100%;
-    animation: cd-card-shimmer 1.4s ease infinite;
-  }
-  .cd-card__skeleton-row:last-child {
-    inline-size: 60%;
-  }
-
-  @keyframes cd-card-shimmer {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
+  .cd-card__footer {
+    padding: var(--cd-card-padding);
   }
-  @media (prefers-reduced-motion: reduce) {
-    .cd-card,
-    .cd-card--clickable,
-    .cd-card__skeleton-row {
-      transition: none;
-      animation: none;
-    }
-    .cd-card--clickable:not(.cd-card--disabled):hover {
-      transform: none;
-    }
+  .cd-card__footer--bordered {
+    border-top: var(--cd-card-border-width) solid var(--cd-card-border-color);
   }
 </style>

package/dist/card/Card.svelte.d.ts

@@ -1,35 +1,41 @@
 import type { Snippet } from 'svelte';
-type CardSize = 'small' | 'default' | 'large';
-type CardShadow = 'never' | 'hover' | 'always';
+export type Shadows = 'hover' | 'always';
 export interface Props {
+    /** 卡片标题；string 时用 Typography.Title heading=6 渲染并关联 aria-labelledby。 */
     title?: string | Snippet;
-    extra?: Snippet;
-    cover?: Snippet;
-    actions?: Snippet;
-    size?: CardSize;
-    bordered?: boolean;
-    shadow?: CardShadow;
-    hoverable?: boolean;
-    loading?: boolean;
-    loadingRows?: number;
-    /** header 区内联样式透传 */
+    /** header 右侧的额外内容（对齐 Semi headerExtraContent）。 */
+    headerExtraContent?: Snippet;
+    /** 自定义头部，传入将覆盖 title 与 headerExtraContent（对齐 Semi header）。 */
+    header?: Snippet;
+    /** 头部与内容区是否有分隔线。 */
+    headerLine?: boolean;
+    /** 头部区内联样式透传。 */
     headerStyle?: string;
-    /** body 区内联样式透传 */
+    /** 卡片封面（出血）。 */
+    cover?: Snippet;
+    /** 内容区内联样式透传。 */
     bodyStyle?: string;
-    /** header 与 body 间是否显示分隔线 */
-    headerLine?: boolean;
-    /** actions 区上方是否显示分隔线 */
+    /** 卡片内容区底部的操作组，以 12px 水平间距排布。 */
+    actions?: Snippet;
+    /** 自定义页脚。 */
+    footer?: Snippet;
+    /** 页脚区与内容区是否有分隔线（默认 false）。 */
     footerLine?: boolean;
-    /** actions/footer 区内联样式透传 */
+    /** 页脚区内联样式透传。 */
     footerStyle?: string;
-    /** 整卡可点击：合并 hoverable 视觉并启用键盘/点击激活与 role=button */
-    clickable?: boolean;
-    /** 仅在 clickable 时生效，禁用点击与 hover 反馈 */
-    disabled?: boolean;
+    /** 是否有外边框。 */
+    bordered?: boolean;
+    /** 阴影显示时机；不设则无阴影。 */
+    shadows?: Shadows;
+    /** 内容区是否显示加载占位。 */
+    loading?: boolean;
+    /** 根节点自定义类名。 */
     class?: string;
-    onClick?: (originalEvent: MouseEvent | KeyboardEvent) => void;
-    onMouseenter?: (originalEvent: MouseEvent) => void;
-    onMouseleave?: (originalEvent: MouseEvent) => void;
+    /** 根节点自定义内联样式。 */
+    style?: string;
+    /** 根节点 aria-label，表述该 Card 的作用。 */
+    ariaLabel?: string;
+    /** 卡片正文。 */
     children?: Snippet;
 }
 declare const Card: import("svelte").Component<Props, {}, "">;

package/dist/card/Card.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE/C,MAAM,WAAW,KAAK;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,yBAAyB;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mDAAmD;IACnD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,GAAG,aAAa,KAAK,IAAI,CAAC;IAC9D,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,KAAK,IAAI,CAAC;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAwIH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Card.svelte.d.ts","sourceRoot":"","sources":["../../src/card/Card.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOpC,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;AAEzC,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,8DAA8D;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,oBAAoB;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iCAAiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa;IACb,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+BAA+B;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mBAAmB;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgIH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/card/CardGroup.svelte

@@ -0,0 +1,74 @@
+<!--
+  CardGroup — 卡片组容器，对齐 Semi CardGroup。
+  基于 Space（inline-flex wrap）排布多个 Card，仅透传 spacing / wrap / class / style / ...rest：
+  - 普通型：spacing 控制卡片等间距（默认 16，同 Semi）。
+  - 网格型（type='grid'）：Space spacing=0，卡片 border-radius:0 且以 -1px 负边距拼接边框，覆盖 spacing。
+  对齐 Semi：不向 Space 传 block/align/role/ariaLabel（Semi CardGroup 无这些）。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { Space } from '../space/index.js';
+
+  export type CardGroupType = 'grid';
+
+  export interface Props {
+    /** 卡片间距：number 统一，[x, y] 分别指定水平/垂直（网格型下被忽略）。 */
+    spacing?: number | number[];
+    /** 卡片组类型；grid 为网格型，将覆盖 spacing。 */
+    type?: CardGroupType;
+    /** 根节点自定义类名。 */
+    class?: string;
+    /** 根节点自定义内联样式。 */
+    style?: string;
+    /** 子 Card。 */
+    children?: Snippet;
+    /** 其余原生属性透传到根节点（对齐 Semi ...others）。 */
+    [key: string]: unknown;
+  }
+
+  let {
+    spacing = 16,
+    type,
+    class: className,
+    style,
+    children,
+    ...rest
+  }: Props = $props();
+
+  const isGrid = $derived(type === 'grid');
+
+  // Semi：网格型 spacing 恒为 0，靠 -1px 负边距拼接；否则透传 spacing。
+  // number[] → [x, y] tuple 以对齐我们 Space 的 spacing 类型。
+  const spaceSpacing = $derived.by<number | [number, number]>(() => {
+    if (isGrid) return 0;
+    if (Array.isArray(spacing)) {
+      const x = spacing[0] ?? 0;
+      const y = spacing.length > 1 ? (spacing[1] ?? x) : x;
+      return [x, y];
+    }
+    return spacing;
+  });
+
+  const cls = $derived(
+    ['cd-card-group', isGrid && 'cd-card-group--grid', className]
+      .filter(Boolean)
+      .join(' '),
+  );
+</script>
+
+<Space spacing={spaceSpacing} wrap class={cls} style={style ?? ''} {...rest}>
+  {@render children?.()}
+</Space>
+
+<style>
+  /*
+    网格型：子 Card 去圆角，以 -1px 负边距使相邻边框重叠为单线（对齐 Semi）。
+    .cd-card-group--grid 作用在 Space 渲染的根节点（非本组件模板内），子 .cd-card 亦为外部组件，
+    故整条走 :global，否则 Svelte scoped 会因找不到静态匹配而剪掉规则、样式失效。
+  */
+  :global(.cd-card-group--grid .cd-card) {
+    border-radius: 0;
+    margin-inline-start: var(--cd-cardgroup-card-margin);
+    margin-block-start: var(--cd-cardgroup-card-margin);
+  }
+</style>