@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/skeleton/SkeletonTitle.svelte

@@ -1,74 +0,0 @@
-<!--
-  SkeletonTitle — 单行标题骨架块。
-  active 优先从 context 读（无 context 默认 false）；width 数字转 px。
--->
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import { SKELETON_KEY, type SkeletonContext } from './context.js';
-
-  interface Props {
-    width?: string | number;
-    height?: string | number;
-    class?: string;
-    style?: string;
-  }
-
-  let { width = '38%', height, class: className, style }: Props = $props();
-
-  const ctx = getContext<SkeletonContext | undefined>(SKELETON_KEY);
-  const active = $derived(ctx?.active ?? false);
-
-  const inlineSize = $derived(typeof width === 'number' ? `${width}px` : width);
-  const blockSize = $derived(
-    height === undefined
-      ? 'var(--cd-skeleton-title-height)'
-      : typeof height === 'number'
-        ? `${height}px`
-        : height,
-  );
-  const cls = $derived(
-    ['cd-skeleton__block', 'cd-skeleton__title', className].filter(Boolean).join(' '),
-  );
-</script>
-
-<div
-  class={cls}
-  class:cd-skeleton__block--active={active}
-  aria-hidden="true"
-  style="inline-size:{inlineSize}; block-size:{blockSize}; {style ?? ''}"
-></div>
-
-<style>
-  .cd-skeleton__block {
-    background: var(--cd-skeleton-color-bg);
-    border-radius: var(--cd-skeleton-radius);
-  }
-  .cd-skeleton__block--active {
-    background-image: linear-gradient(
-      90deg,
-      var(--cd-skeleton-color-bg) 25%,
-      var(--cd-skeleton-color-highlight) 37%,
-      var(--cd-skeleton-color-bg) 63%
-    );
-    background-size: 400% 100%;
-    animation: -global-cd-skeleton-shimmer var(--cd-skeleton-anim-duration)
-      var(--cd-skeleton-anim-timing) infinite;
-  }
-
-  @keyframes -global-cd-skeleton-shimmer {
-    0% {
-      background-position: 100% 50%;
-    }
-    100% {
-      background-position: 0 50%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-skeleton__block--active {
-      animation: none;
-      background-image: none;
-      background: var(--cd-skeleton-color-bg);
-    }
-  }
-</style>

package/src/skeleton/context.ts

@@ -1,11 +0,0 @@
-/**
- * Skeleton context — 容器向原子子组件传递响应式 active 状态。
- * setContext 一个带 getter 的对象，Svelte 5 中读取 .active 即建立响应式依赖。
- */
-export interface SkeletonContext {
-  readonly active: boolean;
-}
-
-export const SKELETON_KEY = Symbol('cd-skeleton');
-
-export type SkeletonSize = 'small' | 'default' | 'large';

package/src/skeleton/index.ts

@@ -1,8 +0,0 @@
-export { default as Skeleton } from './Skeleton.svelte';
-export { default as SkeletonTitle } from './SkeletonTitle.svelte';
-export { default as SkeletonParagraph } from './SkeletonParagraph.svelte';
-export { default as SkeletonAvatar } from './SkeletonAvatar.svelte';
-export { default as SkeletonImage } from './SkeletonImage.svelte';
-export { default as SkeletonButton } from './SkeletonButton.svelte';
-export { meta as skeletonMeta } from './meta.js';
-export type { SkeletonSize } from './context.js';

package/src/skeleton/meta.ts

@@ -1,65 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Skeleton — see specs/components/feedback/Skeleton.spec.md
- */
-export const meta = {
-  name: 'Skeleton',
-  category: 'feedback',
-  description:
-    '骨架屏：loading 切换占位/真实内容，active 开启 shimmer 流光动画；提供 Title / Paragraph / Avatar / Image / Button 五个原子形状自由组合；占位容器 aria-busy + aria-live=polite，骨架块 aria-hidden；reduced-motion 下关闭动画退化为静态底色。loading 受控不回写。',
-  exports: [
-    'Skeleton',
-    'SkeletonTitle',
-    'SkeletonParagraph',
-    'SkeletonAvatar',
-    'SkeletonImage',
-    'SkeletonButton',
-  ],
-  props: [
-    { name: 'loading', type: 'boolean', default: 'true', desc: 'true 渲染占位，false 渲染真实内容；受控不回写' },
-    { name: 'active', type: 'boolean', default: 'false', desc: '开启 shimmer 流光动画（经 context 传给原子子组件）' },
-    {
-      name: 'unmountPlaceholder',
-      type: 'boolean',
-      default: 'true',
-      desc: 'true 用 {#if} 条件渲染，未激活一侧从 DOM 卸载；false 走 keepDOM 模式：占位与真实内容同时挂载，靠 display:none 切换（隐藏侧 inert+aria-hidden），避免重挂开销',
-    },
-    { name: 'placeholder', type: 'Snippet', default: 'undefined', desc: '自定义占位模板，缺省渲染 Avatar+Title+Paragraph 组合' },
-    { name: 'children', type: 'Snippet', default: 'undefined', desc: '真实内容' },
-    { name: 'ariaLabel', type: 'string', default: "'内容加载中'", desc: '占位容器可访问名' },
-    { name: 'class', type: 'string', default: 'undefined', desc: '容器自定义类' },
-  ],
-  events: [],
-  slots: [
-    { name: 'placeholder', desc: '自定义占位模板' },
-    { name: 'children', desc: 'loading=false 时渲染的真实内容' },
-  ],
-  a11y: {
-    hasRole: false,
-    focusable: false,
-    note: '占位容器 aria-busy=true + aria-live=polite + aria-label 公布加载；所有骨架块 aria-hidden（纯装饰）；不可聚焦；reduced-motion 下关闭 shimmer 动画，退化为静态底色。',
-  },
-  tokens: [
-    '--cd-skeleton-color-bg',
-    '--cd-skeleton-color-highlight',
-    '--cd-skeleton-radius',
-    '--cd-skeleton-radius-pill',
-    '--cd-skeleton-gap',
-    '--cd-skeleton-title-height',
-    '--cd-skeleton-paragraph-height',
-    '--cd-skeleton-anim-duration',
-    '--cd-skeleton-anim-timing',
-  ],
-  responsive: false,
-  examples: [
-    { title: '基础骨架', code: '<Skeleton loading={loading}>\n  <p>真实内容</p>\n</Skeleton>' },
-    {
-      title: 'active 动画',
-      code: '<Skeleton active loading={loading}>\n  <p>真实内容</p>\n</Skeleton>',
-    },
-    {
-      title: '卡片组合',
-      code: "<Skeleton active loading>\n  {#snippet placeholder()}\n    <SkeletonImage />\n    <SkeletonTitle width=\"50%\" />\n    <SkeletonParagraph rows={2} />\n    <SkeletonButton />\n  {/snippet}\n</Skeleton>",
-    },
-  ],
-} as const;

package/src/slider/Slider.a11y.test.ts

@@ -1,44 +0,0 @@
-// Slider a11y：role="group" 容器 + 每个手柄 role="slider"（aria-valuemin/max/now）。
-// 只断言静态 ARIA + axe 0 violations，不测拖拽/键盘（jsdom 限制）。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Slider from './Slider.svelte';
-
-describe('Slider a11y', () => {
-  it('默认单值：group 容器 + role=slider 手柄（aria-valuemin/max/now），无 axe violations', async () => {
-    const { container } = renderWithLocale(Slider, {
-      props: { ariaLabel: 'Volume', value: 30 },
-    });
-    const group = container.querySelector('[role="group"]');
-    expect(group?.getAttribute('aria-label')).toBe('Volume');
-
-    const handle = container.querySelector('[role="slider"]');
-    expect(handle).not.toBeNull();
-    expect(handle?.getAttribute('aria-valuemin')).toBe('0');
-    expect(handle?.getAttribute('aria-valuemax')).toBe('100');
-    expect(handle?.getAttribute('aria-valuenow')).toBe('30');
-    await expectNoAxeViolations(container);
-  });
-
-  it('range：两个 slider 手柄，各自 aria-valuenow', async () => {
-    const { container } = renderWithLocale(Slider, {
-      props: { ariaLabel: 'Price range', range: true, value: [20, 60] },
-    });
-    const handles = container.querySelectorAll('[role="slider"]');
-    expect(handles.length).toBe(2);
-    expect(handles[0]?.getAttribute('aria-valuenow')).toBe('20');
-    expect(handles[1]?.getAttribute('aria-valuenow')).toBe('60');
-    await expectNoAxeViolations(container);
-  });
-
-  it('禁用：aria-disabled=true，无 axe violations', async () => {
-    const { container } = renderWithLocale(Slider, {
-      props: { ariaLabel: 'Brightness', value: 50, disabled: true },
-    });
-    const group = container.querySelector('[role="group"]');
-    expect(group?.getAttribute('aria-disabled')).toBe('true');
-    const handle = container.querySelector('[role="slider"]');
-    expect(handle?.getAttribute('aria-disabled')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/slider/Slider.kbd.test.ts

@@ -1,74 +0,0 @@
-// Slider 键盘 e2e（browser project / 真实 chromium）。
-// 焦点落在 role=slider 手柄本身（tabindex=0）：方向键 ←↓ 减、→↑ 增，
-// Home/End 跳 min/max，aria-valuenow 真实变化。range 双手柄各自可聚焦、各自调值。
-// jsdom 焦点模型不完整、方向键步进的真实焦点不可靠，故在真浏览器里测。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import SliderKbdFixture from './SliderKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Slider 键盘 e2e（role=slider 方向键调值）', () => {
-  it('单值：Tab 聚焦手柄 + ←→ 步进 + Home/End 到 min/max', async () => {
-    const { baseElement } = renderKbdFixture(SliderKbdFixture);
-
-    const single = baseElement.querySelector('[data-testid="single"]') as HTMLElement;
-    const thumb = single.querySelector('[role="slider"]') as HTMLElement;
-    expect(thumb).not.toBeNull();
-    expect(thumb.getAttribute('aria-valuenow')).toBe('50');
-
-    // Tab 从 before 进入，焦点落到手柄本身。
-    const before = baseElement.querySelector('[data-testid="before"]') as HTMLElement;
-    before.focus();
-    await expect.element(loc(before)).toHaveFocus();
-    await userEvent.tab();
-    await expect.element(loc(thumb)).toHaveFocus();
-
-    // → 增一步（51），← 减两步（49）。
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(thumb)).toHaveAttribute('aria-valuenow', '51');
-    await userEvent.keyboard('{ArrowLeft}{ArrowLeft}');
-    await expect.element(loc(thumb)).toHaveAttribute('aria-valuenow', '49');
-
-    // ↑ 增（50），↓ 减（49）——竖直方向键也步进（APG：Up 增 Down 减）。
-    await userEvent.keyboard('{ArrowUp}');
-    await expect.element(loc(thumb)).toHaveAttribute('aria-valuenow', '50');
-    await userEvent.keyboard('{ArrowDown}');
-    await expect.element(loc(thumb)).toHaveAttribute('aria-valuenow', '49');
-
-    // Home → min(0)，End → max(100)。
-    await userEvent.keyboard('{Home}');
-    await expect.element(loc(thumb)).toHaveAttribute('aria-valuenow', '0');
-    await userEvent.keyboard('{End}');
-    await expect.element(loc(thumb)).toHaveAttribute('aria-valuenow', '100');
-  });
-
-  it('range：两手柄各自可聚焦并各自调值', async () => {
-    const { baseElement } = renderKbdFixture(SliderKbdFixture);
-
-    const range = baseElement.querySelector('[data-testid="range"]') as HTMLElement;
-    const thumbs = Array.from(range.querySelectorAll<HTMLElement>('[role="slider"]'));
-    expect(thumbs.length).toBe(2);
-    const [low, high] = thumbs as [HTMLElement, HTMLElement];
-    expect(low.getAttribute('aria-valuenow')).toBe('20');
-    expect(high.getAttribute('aria-valuenow')).toBe('60');
-
-    // 低位手柄聚焦后 → 增（21）。
-    low.focus();
-    await expect.element(loc(low)).toHaveFocus();
-    await userEvent.keyboard('{ArrowRight}');
-    await expect.element(loc(low)).toHaveAttribute('aria-valuenow', '21');
-    // 高位手柄未受影响。
-    expect(high.getAttribute('aria-valuenow')).toBe('60');
-
-    // 高位手柄聚焦后 ← 减（59）。
-    high.focus();
-    await expect.element(loc(high)).toHaveFocus();
-    await userEvent.keyboard('{ArrowLeft}');
-    await expect.element(loc(high)).toHaveAttribute('aria-valuenow', '59');
-    expect(low.getAttribute('aria-valuenow')).toBe('21');
-  });
-});