@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/banner/Banner.svelte

@@ -1,368 +0,0 @@
-<!--
-  Banner — see specs/components/feedback/Banner.spec.md
-  内嵌文档流的反馈横幅：info/success/warning/danger 四语义，full/card 两形态。
-  非模态、不夺焦、不锁滚。role/aria-live 由 @chenzy-design/core resolveBannerRole 按 type + dynamic 推断。
-  红线 #1：受控 open 绝不回写——isOpen 派生自受控 open 或内部 innerOpen，关闭仅回调 + 仅非受控写 innerOpen。
-  红线 #2：render 不读 effect 写的状态。
-  红线 #3：无 DOM 几何测量；关闭过渡用 svelte/transition (slide)，reduced-motion 经 duration 降级。
-  closeOnEsc：开启且可关闭并显示时，$effect 内 window keydown 监听 Esc → close('esc')，cleanup 解绑。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { slide } from 'svelte/transition';
-  import { resolveBannerRole, useId, type BannerType } from '@chenzy-design/core';
-  import { useLocale } from '../locale-provider/index.js';
-
-  interface Props {
-    type?: BannerType;
-    fullMode?: boolean;
-    bordered?: boolean;
-    title?: string;
-    description?: string;
-    open?: boolean;
-    defaultOpen?: boolean;
-    closable?: boolean;
-    closeOnEsc?: boolean;
-    animation?: boolean;
-    dynamic?: boolean;
-    ariaLabel?: string;
-    children?: Snippet;
-    titleSnippet?: Snippet;
-    icon?: Snippet<[{ type: BannerType }]> | boolean;
-    action?: Snippet<[{ close: () => void }]>;
-    closeIcon?: Snippet;
-    onOpenChange?: (info: { open: boolean }) => void;
-    onClose?: (info: { trigger: 'closeButton' | 'esc' }) => void;
-    onAfterClose?: () => void;
-    class?: string;
-  }
-
-  let {
-    type = 'info',
-    fullMode = true,
-    bordered = false,
-    title = '',
-    description = '',
-    open,
-    defaultOpen = true,
-    closable = true,
-    closeOnEsc = false,
-    animation = true,
-    dynamic = false,
-    ariaLabel,
-    children,
-    titleSnippet,
-    icon = true,
-    action,
-    closeIcon,
-    onOpenChange,
-    onClose,
-    onAfterClose,
-    class: className = '',
-  }: Props = $props();
-
-  // 红线 #1：受控 open 绝不回写。
-  // initOpen() 仅在初始化时读 defaultOpen，避免 state_referenced_locally。
-  function initOpen(): boolean {
-    return defaultOpen;
-  }
-  const isOpenControlled = $derived(open !== undefined);
-  let innerOpen = $state(initOpen());
-  const isOpen = $derived(isOpenControlled ? open : innerOpen);
-
-  const roleProps = $derived(resolveBannerRole(type, dynamic));
-  const isRegion = $derived(roleProps.role === 'region');
-
-  const loc = useLocale();
-
-  const titleId = useId('cd-banner-title');
-  const descId = useId('cd-banner-desc');
-
-  const hasTitle = $derived(titleSnippet !== undefined || title.length > 0);
-  const hasDescription = $derived(children !== undefined || description.length > 0);
-
-  // icon 三态：false 隐藏；function 用自定义 snippet；其余真值用默认语义图标。
-  const showIcon = $derived(icon !== false);
-  const useCustomIcon = $derived(typeof icon === 'function');
-
-  const animDur = $derived(animation ? 150 : 0);
-
-  function close(trigger: 'closeButton' | 'esc') {
-    if (!isOpenControlled) innerOpen = false;
-    onOpenChange?.({ open: false });
-    onClose?.({ trigger });
-  }
-
-  // 红线 #3：Esc 监听命令式绑定 + cleanup。
-  // 仅在显示、开启 closeOnEsc 且可关闭时绑定全局 keydown（横幅内嵌文档流非夺焦，故监听 window）；
-  // 关闭后 isOpen 变 false，effect 重跑触发 cleanup 解绑，避免遗留监听。
-  $effect(() => {
-    if (!isOpen || !closeOnEsc || !closable) return;
-    function onKeydown(e: KeyboardEvent) {
-      if (e.key === 'Escape') close('esc');
-    }
-    window.addEventListener('keydown', onKeydown);
-    return () => window.removeEventListener('keydown', onKeydown);
-  });
-
-  const cls = $derived(
-    [
-      'cd-banner',
-      `cd-banner--${type}`,
-      fullMode ? 'cd-banner--full' : 'cd-banner--card',
-      !fullMode && bordered && 'cd-banner--bordered',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-</script>
-
-{#snippet defaultIcon(t: BannerType)}
-  {#if t === 'success'}
-    <svg class="cd-banner__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.6"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M5 8.2l2 2 4-4.4"
-      />
-    </svg>
-  {:else if t === 'warning'}
-    <svg class="cd-banner__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.4"
-        stroke-linejoin="round"
-        d="M8 1.8l6.4 11.4H1.6z"
-      />
-      <path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M8 6v3.4" />
-      <circle cx="8" cy="11.4" r="0.85" fill="currentColor" />
-    </svg>
-  {:else if t === 'danger'}
-    <svg class="cd-banner__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path
-        stroke="currentColor"
-        stroke-width="1.6"
-        stroke-linecap="round"
-        d="M5.5 5.5l5 5M10.5 5.5l-5 5"
-      />
-    </svg>
-  {:else}
-    <svg class="cd-banner__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <circle cx="8" cy="4.6" r="0.85" fill="currentColor" />
-      <path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M8 7v4.4" />
-    </svg>
-  {/if}
-{/snippet}
-
-{#if isOpen}
-  <div
-    class={cls}
-    {...roleProps}
-    aria-label={isRegion ? ariaLabel : undefined}
-    aria-labelledby={hasTitle ? titleId : undefined}
-    aria-describedby={hasDescription ? descId : undefined}
-    transition:slide={{ duration: animDur }}
-    onoutroend={() => onAfterClose?.()}
-  >
-    {#if showIcon}
-      <span class="cd-banner__icon" aria-hidden={useCustomIcon ? undefined : true}>
-        {#if typeof icon === 'function'}
-          {@render icon({ type })}
-        {:else}
-          {@render defaultIcon(type)}
-        {/if}
-      </span>
-    {/if}
-
-    <div class="cd-banner__content">
-      {#if hasTitle}
-        <div class="cd-banner__title" id={titleId}>
-          {#if titleSnippet}
-            {@render titleSnippet()}
-          {:else}
-            {title}
-          {/if}
-        </div>
-      {/if}
-      {#if hasDescription}
-        <div class="cd-banner__description" id={descId}>
-          {#if children}
-            {@render children()}
-          {:else}
-            {description}
-          {/if}
-        </div>
-      {/if}
-    </div>
-
-    {#if action}
-      <div class="cd-banner__action">
-        {@render action({ close: () => close('closeButton') })}
-      </div>
-    {/if}
-
-    {#if closable}
-      <button
-        type="button"
-        class="cd-banner__close"
-        aria-label={loc().t('Banner.closeButtonAriaLabel')}
-        onclick={() => close('closeButton')}
-      >
-        {#if closeIcon}
-          {@render closeIcon()}
-        {:else}
-          <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
-            <path
-              stroke="currentColor"
-              stroke-width="1.5"
-              stroke-linecap="round"
-              d="M4 4l8 8M12 4l-8 8"
-            />
-          </svg>
-        {/if}
-      </button>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .cd-banner {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--cd-banner-gap);
-    padding: var(--cd-banner-padding-y) var(--cd-banner-padding-x);
-    color: var(--cd-banner-desc-color);
-    font-size: var(--cd-banner-desc-size);
-  }
-
-  /* full：铺满，无圆角无外边框，左侧 accent 竖条 */
-  .cd-banner--full {
-    border-radius: 0;
-    border-inline-start: var(--cd-banner-accent-width) solid transparent;
-  }
-
-  /* card：圆角，可选边框 */
-  .cd-banner--card {
-    border-radius: var(--cd-banner-radius);
-  }
-  .cd-banner--bordered {
-    border: 1px solid var(--cd-color-border);
-  }
-
-  /* 语义背景 + accent（图标 / full 竖条） */
-  .cd-banner--info {
-    background: var(--cd-banner-info-bg);
-  }
-  .cd-banner--info.cd-banner--full {
-    border-inline-start-color: var(--cd-banner-info-accent);
-  }
-  .cd-banner--info .cd-banner__icon {
-    color: var(--cd-banner-info-accent);
-  }
-
-  .cd-banner--success {
-    background: var(--cd-banner-success-bg);
-  }
-  .cd-banner--success.cd-banner--full {
-    border-inline-start-color: var(--cd-banner-success-accent);
-  }
-  .cd-banner--success .cd-banner__icon {
-    color: var(--cd-banner-success-accent);
-  }
-
-  .cd-banner--warning {
-    background: var(--cd-banner-warning-bg);
-  }
-  .cd-banner--warning.cd-banner--full {
-    border-inline-start-color: var(--cd-banner-warning-accent);
-  }
-  .cd-banner--warning .cd-banner__icon {
-    color: var(--cd-banner-warning-accent);
-  }
-
-  .cd-banner--danger {
-    background: var(--cd-banner-danger-bg);
-  }
-  .cd-banner--danger.cd-banner--full {
-    border-inline-start-color: var(--cd-banner-danger-accent);
-  }
-  .cd-banner--danger .cd-banner__icon {
-    color: var(--cd-banner-danger-accent);
-  }
-
-  .cd-banner__icon {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--cd-banner-icon-size);
-    block-size: var(--cd-banner-icon-size);
-  }
-  .cd-banner__icon-svg {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  .cd-banner__content {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--cd-spacing-1);
-  }
-
-  .cd-banner__title {
-    color: var(--cd-banner-title-color);
-    font-size: var(--cd-banner-title-size);
-    font-weight: var(--cd-font-weight-medium, 500);
-    line-height: 1.4;
-  }
-  .cd-banner__description {
-    color: var(--cd-banner-desc-color);
-    font-size: var(--cd-banner-desc-size);
-    line-height: 1.5;
-  }
-
-  .cd-banner__action {
-    flex: 0 0 auto;
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .cd-banner__close {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.5rem;
-    block-size: 1.5rem;
-    padding: 0;
-    color: var(--cd-banner-close-color);
-    background: transparent;
-    border: none;
-    border-radius: var(--cd-radius-small, 4px);
-    cursor: pointer;
-    transition: background-color var(--cd-banner-motion-duration) var(--cd-motion-ease-standard);
-  }
-  .cd-banner__close:hover {
-    background: var(--cd-banner-close-hover-bg);
-  }
-  .cd-banner__close:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--cd-color-primary);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-banner__close {
-      transition: none;
-    }
-  }
-</style>

package/src/banner/index.ts

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

package/src/banner/meta.ts

@@ -1,121 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * Banner — see specs/components/feedback/Banner.spec.md
- */
-export const meta = {
-  name: 'Banner',
-  category: 'feedback',
-  description:
-    '横幅通知：info/success/warning/danger 四语义，full(铺满)/card(卡片) 两形态，标题 + 描述 + 语义图标；closable 受控关闭，role/aria-live 按 type 与 dynamic 推断，关闭过渡，reduced-motion 降级。内嵌文档流、非模态、不夺焦、不锁滚。受控 open 不回写，仅 onOpenChange/onClose 通知。',
-  exports: ['Banner'],
-  props: [
-    {
-      name: 'type',
-      type: "'info'|'success'|'warning'|'danger'",
-      default: "'info'",
-      desc: '语义类型，决定背景/图标/竖条色与 role 推断',
-    },
-    { name: 'fullMode', type: 'boolean', default: 'true', desc: 'true 铺满(左侧竖条)；false 卡片' },
-    { name: 'bordered', type: 'boolean', default: 'false', desc: 'card 模式显示 1px 边框' },
-    { name: 'title', type: 'string', default: "''", desc: '标题文本，被 titleSnippet 覆盖' },
-    { name: 'description', type: 'string', default: "''", desc: '描述文本，被 children 覆盖' },
-    { name: 'open', type: 'boolean', default: 'undefined', desc: '受控显隐；受控时不回写' },
-    { name: 'defaultOpen', type: 'boolean', default: 'true', desc: '非受控初值' },
-    { name: 'closable', type: 'boolean', default: 'true', desc: '右侧关闭按钮' },
-    {
-      name: 'closeOnEsc',
-      type: 'boolean',
-      default: 'false',
-      desc: '开启且可关闭时，按 Esc 关闭横幅（监听 window keydown，触发 onClose trigger:esc）',
-    },
-    { name: 'animation', type: 'boolean', default: 'true', desc: '关闭过渡(slide)，reduced-motion 降级' },
-    {
-      name: 'dynamic',
-      type: 'boolean',
-      default: 'false',
-      desc: '是否动态插入，传给 resolveBannerRole 决定 role/aria-live',
-    },
-    { name: 'ariaLabel', type: 'string', default: 'undefined', desc: 'region 模式的 aria-label' },
-    { name: 'children', type: 'Snippet', default: 'undefined', desc: '描述区主体，优先于 description' },
-    { name: 'titleSnippet', type: 'Snippet', default: 'undefined', desc: '自定义标题区，覆盖 title' },
-    {
-      name: 'icon',
-      type: 'Snippet<[{ type: BannerType }]> | boolean',
-      default: 'true',
-      desc: 'false 隐藏；snippet 自定义；其余真值用默认语义图标',
-    },
-    {
-      name: 'action',
-      type: 'Snippet<[{ close: () => void }]>',
-      default: 'undefined',
-      desc: '尾部操作区，渲染在关闭按钮前',
-    },
-    { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标' },
-    {
-      name: 'onOpenChange',
-      type: '(info: { open: boolean }) => void',
-      default: 'undefined',
-      desc: '显隐变更通知',
-    },
-    {
-      name: 'onClose',
-      type: "(info: { trigger: 'closeButton' | 'esc' }) => void",
-      default: 'undefined',
-      desc: '关闭触发通知',
-    },
-    { name: 'onAfterClose', type: '() => void', default: 'undefined', desc: '关闭过渡结束后回调' },
-    { name: 'class', type: 'string', default: "''", desc: '附加类名' },
-  ],
-  events: [
-    { name: 'onOpenChange', desc: '显隐状态变化（仅关闭时为 false）' },
-    { name: 'onClose', desc: '关闭按钮/Esc 触发关闭' },
-    { name: 'onAfterClose', desc: '关闭过渡播放结束' },
-  ],
-  slots: [
-    { name: 'children', desc: '描述区主体，优先于 description prop' },
-    { name: 'titleSnippet', desc: '自定义标题区，覆盖 title prop' },
-    { name: 'icon', desc: '自定义图标，入参 { type }' },
-    { name: 'action', desc: '尾部操作区，入参 { close }' },
-    { name: 'closeIcon', desc: '自定义关闭图标' },
-  ],
-  a11y: {
-    hasRole: true,
-    focusable: false,
-    note: 'role=alert/status/region 按 type 与 dynamic 推断（resolveBannerRole）；title→aria-labelledby、description→aria-describedby；region 模式加 aria-label；关闭按钮 aria-label「关闭」可 Tab + Enter/Space；默认图标 aria-hidden；非模态不夺焦不锁滚；reduced-motion 降级过渡。',
-  },
-  tokens: [
-    '--cd-banner-radius',
-    '--cd-banner-padding-y',
-    '--cd-banner-padding-x',
-    '--cd-banner-gap',
-    '--cd-banner-icon-size',
-    '--cd-banner-title-color',
-    '--cd-banner-desc-color',
-    '--cd-banner-title-size',
-    '--cd-banner-desc-size',
-    '--cd-banner-accent-width',
-    '--cd-banner-info-bg',
-    '--cd-banner-info-accent',
-    '--cd-banner-success-bg',
-    '--cd-banner-success-accent',
-    '--cd-banner-warning-bg',
-    '--cd-banner-warning-accent',
-    '--cd-banner-danger-bg',
-    '--cd-banner-danger-accent',
-    '--cd-banner-close-color',
-    '--cd-banner-close-hover-bg',
-    '--cd-banner-motion-duration',
-  ],
-  responsive: false,
-  examples: [
-    { title: '页面顶部 full info', code: '<Banner title="系统提示" description="新版本已发布。" />' },
-    {
-      title: 'card danger 带操作',
-      code: '<Banner type="danger" fullMode={false} bordered title="操作失败" description="请稍后重试。">{#snippet action({ close })}<button onclick={close}>重试</button>{/snippet}</Banner>',
-    },
-    {
-      title: '可关闭受控',
-      code: '<Banner type="success" open={visible} onOpenChange={({ open }) => (visible = open)} title="保存成功" />',
-    },
-  ],
-} as const;

package/src/breadcrumb/Breadcrumb.a11y.test.ts

@@ -1,35 +0,0 @@
-// Breadcrumb a11y：nav[aria-label] 包裹 <ol> 列表；最后一项 aria-current=page（不可点）。
-//  - routes 数据驱动模式（无需声明式 snippet）。
-// jsdom 只断言静态 ARIA + axe。
-import { describe, it, expect } from 'vitest';
-import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
-import Breadcrumb from './Breadcrumb.svelte';
-import type { BreadcrumbRoute } from './types.js';
-
-const routes: BreadcrumbRoute[] = [
-  { label: 'Home', href: '/' },
-  { label: 'Library', href: '/library' },
-  { label: 'Data' },
-];
-
-describe('Breadcrumb a11y', () => {
-  it('routes 模式：nav[aria-label] + ol 列表，无 axe violations', async () => {
-    const { container } = renderWithLocale(Breadcrumb, { props: { routes } });
-    const nav = container.querySelector('nav.cd-breadcrumb');
-    expect(nav).not.toBeNull();
-    expect(nav?.getAttribute('aria-label')).toBeTruthy();
-    expect(container.querySelector('ol.cd-breadcrumb__list')).not.toBeNull();
-    expect(container.querySelectorAll('li.cd-breadcrumb__item')).toHaveLength(3);
-    await expectNoAxeViolations(container);
-  });
-
-  it('最后一项为当前页：aria-current=page，且非链接', async () => {
-    const { container } = renderWithLocale(Breadcrumb, { props: { routes } });
-    const current = container.querySelector('[aria-current="page"]');
-    expect(current?.textContent?.trim()).toBe('Data');
-    expect(current?.tagName.toLowerCase()).toBe('span');
-    // 前序项为可点链接。
-    expect(container.querySelectorAll('a.cd-breadcrumb__link')).toHaveLength(2);
-    await expectNoAxeViolations(container);
-  });
-});

package/src/breadcrumb/Breadcrumb.kbd.test.ts

@@ -1,45 +0,0 @@
-// Breadcrumb 键盘 e2e（browser project / 真实 chromium），折叠 … disclosure。
-// maxItemCount + moreType='popover' → 中间项折叠为 … 触发器，经 Popover 包裹：
-// cd-popover__trigger（role=button, tabindex=0）承载 aria-haspopup/aria-expanded，
-// Enter/Space 键盘激活展开浮层菜单（role=menu，portal 到 document.body）。
-//   1. 折叠触发器真实聚焦，初始 aria-expanded=false。
-//   2. Enter 展开：aria-expanded=true，浮层 role=menu 出现在 document。
-//   3. Esc 收起：aria-expanded 复位 false。
-import { describe, it, expect } from 'vitest';
-import { page } from 'vitest/browser';
-import { renderKbdFixture, userEvent } from '../test-utils/kbd.js';
-import BreadcrumbKbdFixture from './BreadcrumbKbdFixture.svelte';
-
-function loc(el: Element) {
-  return page.elementLocator(el);
-}
-
-describe('Breadcrumb 键盘 e2e（折叠 … disclosure）', () => {
-  it('Enter 展开折叠浮层菜单 + aria-expanded 变化 + Esc 收起', async () => {
-    const { baseElement } = renderKbdFixture(BreadcrumbKbdFixture);
-
-    // disclosure 触发器：Popover 的 role=button 包裹（aria-expanded 宿主）。
-    const trigger = baseElement.querySelector(
-      '.cd-popover__trigger[role="button"]',
-    ) as HTMLElement;
-    expect(trigger).not.toBeNull();
-    expect(trigger.getAttribute('aria-haspopup')).toBe('dialog');
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-
-    // 1. 触发器真实聚焦（可达 tabindex=0）。
-    trigger.focus();
-    await expect.element(loc(trigger)).toHaveFocus();
-
-    // 2. Enter 展开：浮层菜单 portal 到 body，aria-expanded=true。
-    await userEvent.keyboard('{Enter}');
-    await expect.element(page.getByRole('menu')).toBeInTheDocument();
-    expect(trigger.getAttribute('aria-expanded')).toBe('true');
-    // 浮层内为折叠项 menuitem（被收纳的中间项 Library/Data）。
-    const menuitems = Array.from(document.querySelectorAll('[role="menuitem"]'));
-    expect(menuitems.length).toBeGreaterThanOrEqual(1);
-
-    // 3. Esc 收起：aria-expanded 复位。
-    await userEvent.keyboard('{Escape}');
-    expect(trigger.getAttribute('aria-expanded')).toBe('false');
-  });
-});