@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/badge/Badge.svelte

@@ -1,328 +0,0 @@
-<!--
-  Badge — see specs/components/show/Badge.spec.md
-  Wrapper-mode count/dot superscript OR standalone status dot.
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-
-  type BadgeType =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'success'
-    | 'warning'
-    | 'danger';
-  type BadgeTheme = 'solid' | 'light';
-  type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-  type BadgeSize = 'small' | 'default';
-  type BadgeStatus = 'default' | 'success' | 'processing' | 'error' | 'warning';
-
-  interface Props {
-    count?: number | string;
-    dot?: boolean;
-    overflowCount?: number;
-    showZero?: boolean;
-    type?: BadgeType;
-    theme?: BadgeTheme;
-    position?: BadgePosition;
-    offset?: [number, number];
-    size?: BadgeSize;
-    status?: BadgeStatus;
-    /** count 变化时播放滚动数字动画，默认 true。 */
-    scrollNumberMotion?: boolean;
-    children?: Snippet;
-    countContent?: Snippet;
-  }
-
-  let {
-    count,
-    dot = false,
-    overflowCount = 99,
-    showZero = false,
-    type = 'danger',
-    theme = 'solid',
-    position = 'top-right',
-    offset = [0, 0],
-    size = 'default',
-    status,
-    scrollNumberMotion = true,
-    children,
-    countContent,
-  }: Props = $props();
-
-  // count 变化时触发滚动动画
-  let motionActive = $state(false);
-  let prevDisplayCount = $state(displayCount);
-
-  $effect(() => {
-    const current = displayCount;
-    if (!scrollNumberMotion || dot || !showCount) return;
-    if (current !== prevDisplayCount) {
-      prevDisplayCount = current;
-      motionActive = false;
-      // 用微任务触发重排，确保 class 移除后再加回来
-      Promise.resolve().then(() => {
-        motionActive = true;
-      });
-    }
-  });
-
-  const isNumber = $derived(typeof count === 'number');
-
-  // displayed count text (overflow handling)
-  const displayCount = $derived.by(() => {
-    if (typeof count === 'number') {
-      return count > overflowCount ? `${overflowCount}+` : String(count);
-    }
-    return count ?? '';
-  });
-
-  // whether a numeric/text count badge should be shown
-  const showCount = $derived.by(() => {
-    if (dot) return true;
-    if (countContent) return true;
-    if (isNumber) {
-      if (count === 0 && !showZero) return false;
-      return true;
-    }
-    return count !== undefined && count !== '';
-  });
-
-  // standalone status-dot mode: status set and no wrapped children
-  const standalone = $derived(status !== undefined && !children);
-
-  const statusColor = $derived(
-    status === 'success'
-      ? 'var(--cd-color-success)'
-      : status === 'error'
-        ? 'var(--cd-color-danger)'
-        : status === 'warning'
-          ? 'var(--cd-color-warning)'
-          : status === 'processing'
-            ? 'var(--cd-color-primary)'
-            : 'var(--cd-color-text-3)',
-  );
-
-  const supStyle = $derived(
-    `inset-block-${position.startsWith('top') ? 'start' : 'end'}:${offset[1]}px;` +
-      `inset-inline-${position.endsWith('right') ? 'end' : 'start'}:${offset[0]}px`,
-  );
-
-  const supCls = $derived(
-    [
-      'cd-badge__sup',
-      `cd-badge__sup--${type}`,
-      `cd-badge__sup--${theme}`,
-      `cd-badge__sup--${size}`,
-      `cd-badge__sup--${position}`,
-      dot && 'cd-badge__sup--dot',
-      scrollNumberMotion && motionActive && !dot && 'cd-badge__count--motion',
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  const supAriaLabel = $derived(dot ? undefined : String(displayCount));
-</script>
-
-{#if standalone}
-  <span class="cd-badge cd-badge--status" role="status">
-    <span
-      class="cd-badge__status-dot"
-      class:cd-badge__status-dot--processing={status === 'processing'}
-      style="background:{statusColor}"
-      aria-hidden="true"
-    ></span>
-    {#if count !== undefined && count !== ''}
-      <span class="cd-badge__status-text">{count}</span>
-    {/if}
-  </span>
-{:else}
-  <span class="cd-badge">
-    {@render children?.()}
-    {#if showCount}
-      <sup class={supCls} style={supStyle} aria-label={supAriaLabel}>
-        {#if dot}
-          <!-- dot only -->
-        {:else if countContent}
-          {@render countContent()}
-        {:else}
-          {displayCount}
-        {/if}
-      </sup>
-    {/if}
-  </span>
-{/if}
-
-<style>
-  .cd-badge {
-    position: relative;
-    display: inline-flex;
-    line-height: 1;
-  }
-  .cd-badge--status {
-    align-items: center;
-    gap: var(--cd-spacing-2);
-  }
-
-  .cd-badge__sup {
-    position: absolute;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    min-inline-size: var(--cd-badge-size);
-    block-size: var(--cd-badge-size);
-    padding-inline: var(--cd-spacing-1);
-    border-radius: var(--cd-radius-full);
-    background: var(--cd-badge-bg);
-    color: var(--cd-badge-color);
-    font-size: var(--cd-badge-font-size);
-    font-weight: var(--cd-font-weight-medium);
-    line-height: 1;
-    white-space: nowrap;
-    box-shadow: 0 0 0 1px var(--cd-color-bg-0);
-  }
-  .cd-badge__sup--small {
-    min-inline-size: var(--cd-badge-size-small);
-    block-size: var(--cd-badge-size-small);
-  }
-  .cd-badge__sup--dot {
-    min-inline-size: var(--cd-badge-dot-size);
-    inline-size: var(--cd-badge-dot-size);
-    block-size: var(--cd-badge-dot-size);
-    padding: 0;
-  }
-
-  /* corner placement (default offsets translate over the edge) */
-  .cd-badge__sup--top-right {
-    inset-block-start: 0;
-    inset-inline-end: 0;
-    transform: translate(50%, -50%);
-  }
-  .cd-badge__sup--top-left {
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    transform: translate(-50%, -50%);
-  }
-  .cd-badge__sup--bottom-right {
-    inset-block-end: 0;
-    inset-inline-end: 0;
-    transform: translate(50%, 50%);
-  }
-  .cd-badge__sup--bottom-left {
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    transform: translate(-50%, 50%);
-  }
-
-  /* type → semantic color (solid) */
-  .cd-badge__sup--solid.cd-badge__sup--primary {
-    background: var(--cd-color-primary);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-badge__sup--solid.cd-badge__sup--secondary {
-    background: var(--cd-color-text-2);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-badge__sup--solid.cd-badge__sup--tertiary {
-    background: var(--cd-color-text-3);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-badge__sup--solid.cd-badge__sup--success {
-    background: var(--cd-color-success);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-badge__sup--solid.cd-badge__sup--warning {
-    background: var(--cd-color-warning);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-badge__sup--solid.cd-badge__sup--danger {
-    background: var(--cd-color-danger);
-    color: var(--cd-color-text-inverse);
-  }
-
-  /* light theme: tinted background + colored text */
-  .cd-badge__sup--light.cd-badge__sup--primary {
-    background: color-mix(in srgb, var(--cd-color-primary) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-primary);
-  }
-  .cd-badge__sup--light.cd-badge__sup--secondary {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-1);
-  }
-  .cd-badge__sup--light.cd-badge__sup--tertiary {
-    background: var(--cd-color-fill-1);
-    color: var(--cd-color-text-2);
-  }
-  .cd-badge__sup--light.cd-badge__sup--success {
-    background: color-mix(in srgb, var(--cd-color-success) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-success);
-  }
-  .cd-badge__sup--light.cd-badge__sup--warning {
-    background: color-mix(in srgb, var(--cd-color-warning) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-warning);
-  }
-  .cd-badge__sup--light.cd-badge__sup--danger {
-    background: color-mix(in srgb, var(--cd-color-danger) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-danger);
-  }
-
-  /* standalone status dot */
-  .cd-badge__status-dot {
-    display: inline-block;
-    inline-size: var(--cd-badge-dot-size);
-    block-size: var(--cd-badge-dot-size);
-    border-radius: var(--cd-radius-full);
-    flex: 0 0 auto;
-  }
-  .cd-badge__status-dot--processing {
-    position: relative;
-  }
-  .cd-badge__status-dot--processing::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: inherit;
-    animation: cd-badge-pulse 1.2s ease-in-out infinite;
-  }
-  .cd-badge__status-text {
-    color: var(--cd-color-text-1);
-    font-size: var(--cd-font-size-2);
-  }
-
-  @keyframes cd-badge-pulse {
-    0% {
-      transform: scale(1);
-      opacity: 0.6;
-    }
-    100% {
-      transform: scale(2.4);
-      opacity: 0;
-    }
-  }
-  @keyframes cd-badge-count-up {
-    from {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-  :global(.cd-badge__count--motion) {
-    animation: cd-badge-count-up 0.2s var(--cd-motion-ease-standard, ease) both;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-badge__status-dot--processing::after {
-      animation: none;
-    }
-    :global(.cd-badge__count--motion) {
-      animation: none;
-    }
-  }
-</style>

package/src/badge/BadgeA11yFixture.svelte

@@ -1,18 +0,0 @@
-<!--
-  Badge a11y 测试夹具：不注入 children，使独立状态点（standalone）形态生效。
-  （renderWithLocale 的 harness 恒注入空 children snippet，会让 Badge 走 count 角标形态。）
-  自带 LocaleProvider，故测试直接 render 本夹具。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Badge from './Badge.svelte';
-
-  interface Props {
-    props?: Record<string, unknown>;
-  }
-  let { props = {} }: Props = $props();
-</script>
-
-<LocaleProvider locale="en_US">
-  <Badge {...props} />
-</LocaleProvider>

package/src/badge/index.ts

@@ -1,2 +0,0 @@
-export { default as Badge } from './Badge.svelte';
-export { meta as badgeMeta } from './meta.js';

package/src/badge/meta.ts

@@ -1,62 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Badge — see specs/components/show/Badge.spec.md
- */
-export const meta = {
-  name: 'Badge',
-  category: 'show',
-  description:
-    '徽标：包裹模式在子元素角落显示 count/dot 角标(支持 overflowCount、showZero、position、offset)；独立 status 点模式显示状态点 + 可选文字。',
-  exports: ['Badge'],
-  props: [
-    { name: 'count', type: 'number|string', default: 'undefined', desc: '角标内容' },
-    { name: 'dot', type: 'boolean', default: 'false', desc: '小圆点模式，忽略 count' },
-    { name: 'overflowCount', type: 'number', default: '99', desc: '超出显示 {n}+' },
-    { name: 'showZero', type: 'boolean', default: 'false', desc: 'count=0 时是否显示' },
-    {
-      name: 'type',
-      type: "'primary'|'secondary'|'tertiary'|'success'|'warning'|'danger'",
-      default: "'danger'",
-    },
-    { name: 'theme', type: "'solid'|'light'", default: "'solid'" },
-    {
-      name: 'position',
-      type: "'top-right'|'top-left'|'bottom-right'|'bottom-left'",
-      default: "'top-right'",
-    },
-    { name: 'offset', type: '[number, number]', default: '[0, 0]', desc: '[x, y] 偏移(px)' },
-    { name: 'size', type: "'small'|'default'", default: "'default'" },
-    {
-      name: 'status',
-      type: "'default'|'success'|'processing'|'error'|'warning'",
-      default: 'undefined',
-      desc: '设置且无 children 时进入独立状态点模式',
-    },
-    { name: 'children', type: 'Snippet', default: 'undefined', desc: '被包裹元素' },
-    { name: 'countContent', type: 'Snippet', default: 'undefined', desc: '自定义角标内容' },
-  ],
-  events: [],
-  slots: [
-    { name: 'children', desc: '被角标包裹的元素' },
-    { name: 'countContent', desc: '自定义角标内容' },
-  ],
-  a11y: {
-    hasRole: false,
-    focusable: false,
-    note: '角标 sup 带 aria-label(count 值)；dot 模式与状态点 aria-hidden。',
-  },
-  tokens: [
-    '--cd-badge-size',
-    '--cd-badge-size-small',
-    '--cd-badge-dot-size',
-    '--cd-badge-bg',
-    '--cd-badge-color',
-    '--cd-badge-font-size',
-  ],
-  responsive: false,
-  examples: [
-    { title: '计数', code: '<Badge count={5}><Avatar alt="A" /></Badge>' },
-    { title: '溢出', code: '<Badge count={120} overflowCount={99}>...</Badge>' },
-    { title: '状态点', code: '<Badge status="success" count="已完成" />' },
-  ],
-} as const;

package/src/banner/Banner.a11y.test.ts

@@ -1,48 +0,0 @@
-// Banner a11y：内嵌反馈横幅。role/aria-live 由 core resolveBannerRole(type, dynamic) 推断：
-//  - 非 dynamic（默认）→ role=region（landmark，需可访问名：title 或 ariaLabel）。
-//  - dynamic + danger/warning → role=alert + aria-live=assertive。
-//  - dynamic + info/success → role=status + aria-live=polite。
-// 注意：region landmark 必须有可访问名，否则触发 axe [region]/[landmark]，故测试均提供 title。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Banner from './Banner.svelte';
-
-describe('Banner a11y', () => {
-  it('默认 info：role=region + title 提供可访问名（aria-labelledby），无 axe violations', async () => {
-    const { container } = renderWithLocale(Banner, {
-      props: { type: 'info', title: 'System notice', description: 'All good.' },
-    });
-    const banner = container.querySelector('.cd-banner');
-    expect(banner?.getAttribute('role')).toBe('region');
-    // region 可访问名来自 title（aria-labelledby 指向标题元素）。
-    const labelledby = banner?.getAttribute('aria-labelledby');
-    expect(labelledby).toBeTruthy();
-    expect(labelledby ? container.querySelector(`#${labelledby}`)?.textContent : '').toContain(
-      'System notice',
-    );
-    await expectNoAxeViolations(container);
-  });
-
-  it('dynamic + danger：role=alert + aria-live=assertive，无 axe violations', async () => {
-    const { container } = renderWithLocale(Banner, {
-      props: { type: 'danger', dynamic: true, title: 'Failed', closable: false },
-    });
-    const banner = container.querySelector('.cd-banner');
-    expect(banner?.getAttribute('role')).toBe('alert');
-    expect(banner?.getAttribute('aria-live')).toBe('assertive');
-    await expectNoAxeViolations(container);
-  });
-
-  it('dynamic + success：role=status + aria-live=polite，无 axe violations', async () => {
-    const { container } = renderWithLocale(Banner, {
-      props: { type: 'success', dynamic: true, title: 'Saved' },
-    });
-    const banner = container.querySelector('.cd-banner');
-    expect(banner?.getAttribute('role')).toBe('status');
-    expect(banner?.getAttribute('aria-live')).toBe('polite');
-    // 关闭按钮可访问名来自 locale（验证 LocaleProvider 管线）。
-    const closeBtn = container.querySelector('.cd-banner__close');
-    expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-});