@chenzy-design/svelte 0.1.0

package/src/calendar/CalendarKbdFixture.svelte

@@ -0,0 +1,23 @@
+<!--
+  仅供 Calendar.kbd.test.ts（browser project）使用的网格键盘 e2e 夹具。
+  内联月视图 Calendar（非 popup）：网格用真实 roving 焦点（活动格 tabindex=0，
+  方向键命令式移动 DOM 焦点；跨月翻页落焦）。
+  固定 defaultValue=2024-03-15 让初始网格稳定（active 格回退到选中/锚点）。
+-->
+<script lang="ts">
+  import { LocaleProvider } from '../locale-provider/index.js';
+  import Calendar from './Calendar.svelte';
+
+  const defaultValue = new Date(2024, 2, 15);
+</script>
+
+<LocaleProvider locale="en_US">
+  <button type="button" data-testid="before">before</button>
+  <Calendar
+    mode="month"
+    {defaultValue}
+    defaultSelectedDate={defaultValue}
+    locale="en-US"
+    ariaLabel="calendar grid"
+  />
+</LocaleProvider>

package/src/calendar/index.ts

@@ -0,0 +1,3 @@
+export { default as Calendar } from './Calendar.svelte';
+export { meta as calendarMeta } from './meta.js';
+export type { CalendarEvent } from '@chenzy-design/core';

package/src/calendar/meta.ts

@@ -0,0 +1,117 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Calendar — see specs/components/show/Calendar.spec.md
+ */
+export const meta = {
+  name: 'Calendar',
+  category: 'show',
+  description:
+    '月/周/日视图日历：日格网格 + 事件展示与 +N 折叠，today/selected/outside/weekend/disabled 态、导航（上一/今天/下一，月或周或天）；mode 切换月(6×7)/周(1×7)/日(单日时间轴)视图，day 模式纵向列出小时段(dayStartHour~dayEndHour)，带时间的事件按起始小时入对应时段、全天或跨天延续事件入顶部「全天」区，selectionMode 切换单选(selectedDate)/范围(rangeValue，起止+区间高亮+hover 预览)。受控 value(锚点)/selectedDate/rangeValue 不回写，仅通过 onChange/onSelect/onRangeChange/onDateClick/onMoreClick 通知。完整 WAI-ARIA grid roving 键盘焦点（方向键/PageUp-Down/Home-End/Enter-Space），popup 弹层模式（复用 _floating 门户 + 外部点击/Esc 关闭），day 视图时间轴虚拟化（复用 core fixedRange）。',
+  exports: ['Calendar'],
+  props: [
+    { name: 'value', type: 'Date', default: 'undefined', desc: '受控锚点日期(决定展示月份/周)，受控时不回写' },
+    { name: 'defaultValue', type: 'Date', default: 'new Date()', desc: '非受控初始锚点' },
+    { name: 'mode', type: "'month' | 'week' | 'day'", default: "'month'", desc: '视图模式：月(6×7)/周(1×7)/日(单日时间轴)' },
+    { name: 'selectionMode', type: "'single' | 'range'", default: "'single'", desc: '选择模式：单选或范围' },
+    { name: 'events', type: 'CalendarEvent[]', default: '[]', desc: '事件列表' },
+    { name: 'weekStartsOn', type: '0|1|2|3|4|5|6', default: '0', desc: '一周起始(0=周日)' },
+    { name: 'maxEventsPerDay', type: 'number', default: '3', desc: '每格最多事件数，超出折叠 +N（month/week）' },
+    { name: 'dayStartHour', type: 'number', default: '0', desc: 'day 视图时间轴起始小时(0-23)' },
+    { name: 'dayEndHour', type: 'number', default: '23', desc: 'day 视图时间轴结束小时(0-23，含)' },
+    { name: 'weekendDays', type: 'number[]', default: '[0, 6]', desc: '周末列序号' },
+    { name: 'markWeekend', type: 'boolean', default: 'true', desc: '弱化高亮周末列' },
+    { name: 'disabledDate', type: '(date: Date) => boolean', default: 'undefined', desc: '命中则该格禁用' },
+    { name: 'selectedDate', type: 'Date', default: 'undefined', desc: '受控选中日(边框态，single 模式)，受控时不回写' },
+    { name: 'defaultSelectedDate', type: 'Date', default: 'undefined', desc: '非受控选中日初值' },
+    { name: 'rangeValue', type: '[Date, Date] | null', default: 'undefined', desc: '受控选中范围(range 模式)，受控时不回写' },
+    { name: 'defaultRangeValue', type: '[Date, Date] | null', default: 'undefined', desc: '非受控范围初值' },
+    { name: 'locale', type: 'string', default: "'zh-CN'", desc: 'Intl 月份/星期名格式化语言' },
+    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '网格 aria-label，默认取月份标题' },
+    { name: 'popup', type: 'boolean', default: 'false', desc: '弹层模式：渲染 trigger，日历作为浮层弹出（复用 _floating 门户定位）' },
+    { name: 'open', type: 'boolean', default: 'undefined', desc: '受控展开态(popup)，受控时不回写仅 onOpenChange' },
+    { name: 'defaultOpen', type: 'boolean', default: 'false', desc: '非受控初始展开态' },
+    { name: 'onOpenChange', type: '(info: { open: boolean }) => void', default: 'undefined', desc: '展开态变化回调' },
+    { name: 'placement', type: 'Placement', default: "'bottomStart'", desc: '浮层相对 trigger 的位置' },
+    { name: 'getContainer', type: '() => HTMLElement | null', default: 'undefined', desc: '浮层门户挂载容器(默认 body)' },
+    { name: 'trigger', type: 'Snippet', default: 'undefined', desc: 'popup 模式 trigger 自定义内容 { open, toggle }' },
+    { name: 'virtualizeDay', type: "boolean | 'auto'", default: "'auto'", desc: 'day 时间轴虚拟化：auto 按阈值/true 强制/false 关闭' },
+    { name: 'virtualizeThreshold', type: 'number', default: '18', desc: '触发虚拟化的最少小时行数(auto 生效)' },
+    { name: 'timelineViewportHeight', type: 'number', default: '360', desc: 'day 时间轴虚拟化视口高度(px)' },
+    { name: 'onChange', type: '(info: { value: Date }) => void', default: 'undefined' },
+    { name: 'onSelect', type: '(info: { date: Date }) => void', default: 'undefined' },
+    { name: 'onRangeChange', type: '(info: { range: [Date, Date] }) => void', default: 'undefined' },
+    { name: 'onDateClick', type: '(info: { date: Date }) => void', default: 'undefined' },
+    {
+      name: 'onMoreClick',
+      type: '(info: { date: Date; events: CalendarEvent[] }) => void',
+      default: 'undefined',
+    },
+    { name: 'dateCell', type: 'Snippet', default: 'undefined', desc: '自定义整格内容' },
+    { name: 'event', type: 'Snippet', default: 'undefined', desc: '自定义事件块' },
+  ],
+  events: [
+    { name: 'onChange', desc: '锚点(翻月/翻周/今天)变化' },
+    { name: 'onSelect', desc: '选中某日(single 模式)' },
+    { name: 'onRangeChange', desc: '范围选择完成(range 模式，已排序)' },
+    { name: 'onDateClick', desc: '点击日格' },
+    { name: 'onMoreClick', desc: '点击 +N 折叠触发器' },
+  ],
+  slots: [
+    { name: 'dateCell', desc: '自定义整格内容 { date, events, isToday, isOutside, disabled }' },
+    { name: 'event', desc: '自定义事件块 { event }' },
+    { name: 'trigger', desc: 'popup 模式 trigger 自定义内容 { open, toggle }' },
+  ],
+  a11y: {
+    hasRole: true,
+    focusable: true,
+    note: '网格 role=grid，星期表头行 role=row 含 role=columnheader，每周一行 role=row 含 role=gridcell；today 设 aria-current=date，选中设 aria-selected，禁用设 aria-disabled。完整 WAI-ARIA grid roving 焦点：网格内仅活动格 tabindex=0（余 -1），方向键移动焦点（←→ 天、↑↓ 周、PageUp/Down 月、Home/End 周首末），跨月/周自动翻页并落焦，Enter/Space 选中。popup 模式：trigger aria-haspopup=dialog/aria-expanded，浮层 role=dialog，外部点击/Esc 关闭并归还焦点。',
+  },
+  tokens: [
+    '--cd-calendar-bg',
+    '--cd-calendar-border',
+    '--cd-calendar-header-bg',
+    '--cd-calendar-text',
+    '--cd-calendar-text-secondary',
+    '--cd-calendar-today-bg',
+    '--cd-calendar-today-fg',
+    '--cd-calendar-selected-border',
+    '--cd-calendar-range-bg',
+    '--cd-calendar-range-edge-bg',
+    '--cd-calendar-week-cell-min-h',
+    '--cd-calendar-hour-min-h',
+    '--cd-calendar-hour-label-w',
+    '--cd-calendar-weekend-bg',
+    '--cd-calendar-cell-bg-hover',
+    '--cd-calendar-event-default-bg',
+    '--cd-calendar-event-fg',
+    '--cd-calendar-disabled-bg',
+    '--cd-calendar-more-color',
+    '--cd-calendar-cell-min-h',
+    '--cd-calendar-radius',
+  ],
+  responsive: false,
+  examples: [
+    { title: '基础月历', code: '<Calendar />' },
+    {
+      title: '带事件',
+      code: '<Calendar events={[{ key: 1, start: new Date(), title: "会议" }]} />',
+    },
+    { title: '周视图', code: '<Calendar mode="week" />' },
+    {
+      title: '日视图（单日时间轴）',
+      code: '<Calendar mode="day" dayStartHour={8} dayEndHour={20} events={[{ key: 1, start: new Date(), title: "会议" }]} />',
+    },
+    {
+      title: '范围选择',
+      code: '<Calendar selectionMode="range" onRangeChange={(i) => console.log(i.range)} />',
+    },
+    {
+      title: '弹层模式',
+      code: '<Calendar popup defaultOpen onSelect={(i) => console.log(i.date)} />',
+    },
+    {
+      title: '弹层模式（自定义 trigger）',
+      code: '<Calendar popup>{#snippet trigger({ toggle })}<button onclick={toggle}>选择日期</button>{/snippet}</Calendar>',
+    },
+  ],
+} as const;

package/src/card/Card.a11y.test.ts

@@ -0,0 +1,38 @@
+// Card a11y：有 title 时 role=region + aria-labelledby；clickable 时 role=button + tabindex。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import Card from './Card.svelte';
+
+describe('Card a11y', () => {
+  it('带 title：role=region + aria-labelledby 指向标题，无 axe violations', async () => {
+    const { container } = renderWithLocale(Card, {
+      props: { title: 'User profile' },
+    });
+    const root = container.querySelector('.cd-card');
+    expect(root?.getAttribute('role')).toBe('region');
+    const labelledby = root?.getAttribute('aria-labelledby');
+    expect(labelledby).toBeTruthy();
+    const titleEl = labelledby ? container.querySelector(`#${labelledby}`) : null;
+    expect(titleEl?.textContent).toContain('User profile');
+    await expectNoAxeViolations(container);
+  });
+
+  it('clickable：role=button + tabindex=0，无 axe violations', async () => {
+    const { container } = renderWithLocale(Card, {
+      props: { title: 'Clickable card', clickable: true, onClick: () => {} },
+    });
+    const root = container.querySelector('.cd-card');
+    expect(root?.getAttribute('role')).toBe('button');
+    expect(root?.getAttribute('tabindex')).toBe('0');
+    await expectNoAxeViolations(container);
+  });
+
+  it('loading：aria-busy=true，无 axe violations', async () => {
+    const { container } = renderWithLocale(Card, {
+      props: { title: 'Loading card', loading: true },
+    });
+    const root = container.querySelector('.cd-card');
+    expect(root?.getAttribute('aria-busy')).toBe('true');
+    await expectNoAxeViolations(container);
+  });
+});

package/src/card/Card.svelte

@@ -0,0 +1,341 @@
+<!--
+  Card — see specs/components/show/Card.spec.md
+  Container: cover → header → body (with loading skeleton) → actions.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useId } from '@chenzy-design/core';
+
+  type CardSize = 'small' | 'default' | 'large';
+  type CardShadow = 'never' | 'hover' | 'always';
+
+  interface Props {
+    title?: string | Snippet;
+    extra?: Snippet;
+    cover?: Snippet;
+    actions?: Snippet;
+    size?: CardSize;
+    bordered?: boolean;
+    shadow?: CardShadow;
+    hoverable?: boolean;
+    loading?: boolean;
+    loadingRows?: number;
+    /** header 区内联样式透传 */
+    headerStyle?: string;
+    /** body 区内联样式透传 */
+    bodyStyle?: string;
+    /** header 与 body 间是否显示分隔线 */
+    headerLine?: boolean;
+    /** actions 区上方是否显示分隔线 */
+    footerLine?: boolean;
+    /** actions/footer 区内联样式透传 */
+    footerStyle?: string;
+    /** 整卡可点击：合并 hoverable 视觉并启用键盘/点击激活与 role=button */
+    clickable?: boolean;
+    /** 仅在 clickable 时生效，禁用点击与 hover 反馈 */
+    disabled?: boolean;
+    class?: string;
+    onClick?: (originalEvent: MouseEvent | KeyboardEvent) => void;
+    onMouseenter?: (originalEvent: MouseEvent) => void;
+    onMouseleave?: (originalEvent: MouseEvent) => void;
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    extra,
+    cover,
+    actions,
+    size = 'default',
+    bordered = true,
+    shadow = 'never',
+    hoverable = false,
+    loading = false,
+    loadingRows = 3,
+    headerStyle,
+    bodyStyle,
+    headerLine = true,
+    footerLine = true,
+    footerStyle,
+    clickable = false,
+    disabled = false,
+    class: className,
+    onClick,
+    onMouseenter,
+    onMouseleave,
+    children,
+  }: Props = $props();
+
+  const titleId = useId('cd-card-title');
+  const titleIsString = $derived(typeof title === 'string');
+  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 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',
+      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}
+  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']
+        .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}
+        </div>
+      {/if}
+      {#if extra}
+        <div class="cd-card__extra">{@render extra()}</div>
+      {/if}
+    </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}
+      </div>
+    {:else}
+      {@render children?.()}
+    {/if}
+  </div>
+
+  {#if actions}
+    <div
+      class={['cd-card__actions', !footerLine && 'cd-card__actions--no-line']
+        .filter(Boolean)
+        .join(' ')}
+      style={footerStyle}
+    >
+      {@render actions()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .cd-card {
+    display: flex;
+    flex-direction: column;
+    background: var(--cd-card-bg);
+    border: 1px solid transparent;
+    border-radius: var(--cd-card-radius);
+    overflow: hidden;
+    transition: box-shadow var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  }
+  .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);
+  }
+
+  .cd-card--clickable {
+    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);
+  }
+  .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--disabled.cd-card--clickable:hover {
+    transform: none;
+    box-shadow: none;
+  }
+
+  .cd-card__cover {
+    display: block;
+    overflow: hidden;
+  }
+  .cd-card__cover :global(img) {
+    display: block;
+    inline-size: 100%;
+  }
+
+  .cd-card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--cd-spacing-3);
+    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--small .cd-card__header {
+    padding: var(--cd-card-padding-small);
+  }
+  .cd-card__title {
+    color: var(--cd-card-title-color);
+    font-weight: var(--cd-font-weight-semibold);
+    font-size: var(--cd-font-size-3);
+    min-inline-size: 0;
+  }
+  .cd-card--small .cd-card__title {
+    font-size: var(--cd-font-size-2);
+  }
+  .cd-card--large .cd-card__title {
+    font-size: var(--cd-font-size-4);
+  }
+  .cd-card__extra {
+    flex: 0 0 auto;
+    color: var(--cd-color-text-2);
+    font-size: var(--cd-font-size-2);
+  }
+
+  .cd-card__body {
+    flex: 1 1 auto;
+    padding: var(--cd-card-padding);
+    color: var(--cd-color-text-0);
+  }
+  .cd-card--small .cd-card__body {
+    padding: var(--cd-card-padding-small);
+  }
+
+  .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-3);
+  }
+  .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-3);
+  }
+  .cd-card__skeleton-row {
+    display: block;
+    block-size: 0.9em;
+    border-radius: var(--cd-radius-1);
+    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%;
+    }
+  }
+  @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;
+    }
+  }
+</style>

package/src/card/CardMeta.svelte

@@ -0,0 +1,60 @@
+<!--
+  Card.Meta — 卡片内容区的结构化元信息子组件。
+  含 avatar（左侧图标/头像）、title（标题）、description（描述），均支持字符串或 Snippet。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    avatar?: Snippet;
+    title?: Snippet | string;
+    description?: Snippet | string;
+    class?: string;
+    style?: string;
+  }
+
+  let { avatar, title, description, class: className, style }: Props = $props();
+</script>
+
+<div class={['cd-card__meta', className].filter(Boolean).join(' ')} {style}>
+  {#if avatar}
+    <div class="cd-card__meta-avatar">{@render avatar()}</div>
+  {/if}
+  <div class="cd-card__meta-detail">
+    {#if title !== undefined}
+      <div class="cd-card__meta-title">
+        {#if typeof title === 'string'}{title}{:else}{@render title()}{/if}
+      </div>
+    {/if}
+    {#if description !== undefined}
+      <div class="cd-card__meta-description">
+        {#if typeof description === 'string'}{description}{:else}{@render description()}{/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .cd-card__meta {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--cd-spacing-3);
+  }
+  .cd-card__meta-avatar {
+    flex: 0 0 auto;
+  }
+  .cd-card__meta-detail {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .cd-card__meta-title {
+    color: var(--cd-card-title-color);
+    font-weight: var(--cd-font-weight-semibold);
+    font-size: var(--cd-font-size-3);
+    margin-block-end: var(--cd-spacing-1);
+  }
+  .cd-card__meta-description {
+    color: var(--cd-color-text-2);
+    font-size: var(--cd-font-size-2);
+  }
+</style>

package/src/card/index.ts

@@ -0,0 +1,8 @@
+import CardComponent from './Card.svelte';
+import CardMeta from './CardMeta.svelte';
+
+const Card = Object.assign(CardComponent, { Meta: CardMeta });
+
+export { Card };
+export { CardMeta };
+export { meta as cardMeta } from './meta.js';

package/src/card/meta.ts

@@ -0,0 +1,83 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Card — see specs/components/show/Card.spec.md
+ */
+export const meta = {
+  name: 'Card',
+  category: 'show',
+  description:
+    '卡片容器：cover(出血) → header(title + extra) → body(children，loading 时骨架占位) → actions(底部等分操作)；bordered/shadow/hoverable 控制视觉，title 为 string 时 aria-labelledby 关联。',
+  exports: ['Card'],
+  props: [
+    { name: 'title', type: 'string|Snippet', default: 'undefined', desc: '标题；string 时关联 aria-labelledby' },
+    { name: 'extra', type: 'Snippet', default: 'undefined', desc: 'header 右侧内容' },
+    { name: 'cover', type: 'Snippet', default: 'undefined', desc: '顶部出血封面' },
+    { name: 'actions', type: 'Snippet', default: 'undefined', desc: '底部等分操作区' },
+    { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
+    { name: 'bordered', type: 'boolean', default: 'true' },
+    {
+      name: 'shadow',
+      type: "'never'|'hover'|'always'",
+      default: "'never'",
+      desc: 'hover 时悬停抬升',
+    },
+    { name: 'hoverable', type: 'boolean', default: 'false', desc: '悬停阴影，同 shadow=hover 视觉' },
+    { name: 'loading', type: 'boolean', default: 'false', desc: 'body 显示骨架占位' },
+    { name: 'loadingRows', type: 'number', default: '3', desc: '骨架行数' },
+    { name: 'headerStyle', type: 'string', default: 'undefined', desc: 'header 区内联样式透传' },
+    { name: 'bodyStyle', type: 'string', default: 'undefined', desc: 'body 区内联样式透传' },
+    { name: 'headerLine', type: 'boolean', default: 'true', desc: 'header 与 body 间分隔线' },
+    { name: 'footerLine', type: 'boolean', default: 'true', desc: 'actions 区上方分隔线' },
+    {
+      name: 'clickable',
+      type: 'boolean',
+      default: 'false',
+      desc: '整卡可点击：role=button + 键盘/点击激活，合并 hoverable 视觉',
+    },
+    { name: 'disabled', type: 'boolean', default: 'false', desc: '仅 clickable 时生效，禁用点击与 hover' },
+    { name: 'class', type: 'string', default: 'undefined', desc: '根节点自定义类名' },
+    {
+      name: 'onClick',
+      type: '(e: MouseEvent | KeyboardEvent) => void',
+      default: 'undefined',
+      desc: 'clickable 时点击/键盘激活回调；disabled 不触发',
+    },
+    { name: 'onMouseenter', type: '(e: MouseEvent) => void', default: 'undefined' },
+    { name: 'onMouseleave', type: '(e: MouseEvent) => void', default: 'undefined' },
+    { name: 'children', type: 'Snippet', default: 'undefined', desc: '卡片正文' },
+  ],
+  events: [
+    { name: 'onClick', desc: 'clickable 整卡点击或键盘激活（Enter/Space）' },
+    { name: 'onMouseenter', desc: '指针进入卡片' },
+    { name: 'onMouseleave', desc: '指针离开卡片' },
+  ],
+  slots: [
+    { name: 'title', desc: '标题(string 或 Snippet)' },
+    { name: 'extra', desc: 'header 右侧' },
+    { name: 'cover', desc: '封面' },
+    { name: 'actions', desc: '底部操作' },
+    { name: 'children', desc: '正文' },
+  ],
+  a11y: {
+    hasRole: true,
+    focusable: false,
+    note: '有 title 时根 role=region；string title 经 useId 关联 aria-labelledby；骨架 aria-hidden。clickable 时根 role=button + tabindex，Enter/Space 激活，disabled 时 aria-disabled + tabindex=-1。',
+  },
+  tokens: [
+    '--cd-card-bg',
+    '--cd-card-border',
+    '--cd-card-radius',
+    '--cd-card-padding',
+    '--cd-card-padding-small',
+    '--cd-card-header-border',
+    '--cd-card-title-color',
+    '--cd-card-shadow',
+    '--cd-card-shadow-hover',
+  ],
+  responsive: false,
+  examples: [
+    { title: '基础', code: '<Card title="标题">内容</Card>' },
+    { title: '悬浮', code: '<Card hoverable title="卡片">内容</Card>' },
+    { title: '加载', code: '<Card loading loadingRows={3} />' },
+  ],
+} as const;