@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/tabs/TabsA11yFixture.svelte

@@ -1,20 +0,0 @@
-<!--
-  仅供 Tabs.a11y.test.ts 使用的测试夹具：声明式 <Tabs.Pane> 用法（含 role=tabpanel 面板），
-  使 tab 的 aria-controls 指向真实存在的面板 id（axe aria-valid-attr-value 通过）。
-  纯 tabList 用法不渲染面板，aria-controls 会悬空，不是 a11y-clean 路径。
--->
-<script lang="ts">
-  import { Tabs } from './index.js';
-
-  interface Props {
-    defaultValue?: string | number;
-    type?: 'line' | 'card' | 'button';
-  }
-  let { defaultValue = 'overview', type = 'line' }: Props = $props();
-</script>
-
-<Tabs {defaultValue} {type}>
-  <Tabs.Pane itemKey="overview" tab="Overview">Overview content</Tabs.Pane>
-  <Tabs.Pane itemKey="details" tab="Details">Details content</Tabs.Pane>
-  <Tabs.Pane itemKey="history" tab="History">History content</Tabs.Pane>
-</Tabs>

package/src/tabs/TabsKbdFixture.svelte

@@ -1,25 +0,0 @@
-<!--
-  仅供 Tabs.kbd.test.ts（browser project）使用的 tablist roving 键盘 e2e 夹具。
-  声明式 <Tabs.Pane> 用法：tab 的 aria-controls 指向真实面板，面板按 activeKey 显隐，
-  便于断言 keyboardActivation='auto'（默认）下「焦点移动即激活」。
-  菜单前后各放一个按钮，用于验证 roving 单停靠点（Tab 只进一个 tab，其余 tabindex=-1）。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import { Tabs } from './index.js';
-
-  interface Props {
-    defaultValue?: string;
-  }
-  let { defaultValue = 'overview' }: Props = $props();
-</script>
-
-<LocaleProvider locale="en_US">
-  <button type="button" data-testid="before">before</button>
-  <Tabs {defaultValue} type="line">
-    <Tabs.Pane itemKey="overview" tab="Overview">Overview content</Tabs.Pane>
-    <Tabs.Pane itemKey="details" tab="Details">Details content</Tabs.Pane>
-    <Tabs.Pane itemKey="history" tab="History">History content</Tabs.Pane>
-  </Tabs>
-  <button type="button" data-testid="after">after</button>
-</LocaleProvider>

package/src/tabs/context.ts

@@ -1,43 +0,0 @@
-import { getContext, setContext } from 'svelte';
-
-const KEY = Symbol('cd-tabs');
-
-/** 声明式 <Tabs.Pane> 向父 Tabs 注册时上报的标签元数据（推导 tabList 用）。 */
-export interface TabPaneRegistration {
-  itemKey: string | number;
-  tab: string;
-  disabled?: boolean;
-  closable?: boolean;
-}
-
-export interface TabsContext {
-  /** 当前激活 key 的 getter（响应式，TabPane 读取以决定显隐） */
-  getActiveKey: () => string | number | undefined;
-  /** 是否懒加载（首次激活才挂载） */
-  getLazy: () => boolean;
-  /** 是否保留激活过的面板 DOM（display:none 隐藏而非卸载） */
-  getKeepDOM: () => boolean;
-  /** 稳定 tab 按钮 id（与 panel 的 aria-labelledby 双向关联）。 */
-  getTabId: (key: string | number) => string;
-  /** 稳定 tabpanel id（与 tab 的 aria-controls 双向关联）。 */
-  getPanelId: (key: string | number) => string;
-  /**
-   * 纯声明式自动收集：父未传 tabList 时，TabPane 挂载时注册自身标签元数据（按源码顺序）。
-   * 返回稳定 id，TabPane 卸载时用它注销；元数据变化时调用 update 同步。
-   *
-   * 红线 #2：注册/注销/更新均发生在 TabPane 的 mount/unmount/同步 $effect（副作用），
-   * 写父级簿记普通数组 + 仅 bump 一个 version $state；父 render 派生只读 version 重建快照，
-   * 子 effect 绝不读该快照 → 副作用写 / 渲染读分离，无 effect 自循环。
-   */
-  registerPane?: (reg: TabPaneRegistration) => number;
-  updatePane?: (id: number, reg: TabPaneRegistration) => void;
-  unregisterPane?: (id: number) => void;
-}
-
-export function setTabsContext(ctx: TabsContext): void {
-  setContext(KEY, ctx);
-}
-
-export function getTabsContext(): TabsContext | undefined {
-  return getContext<TabsContext | undefined>(KEY);
-}

package/src/tabs/index.ts

@@ -1,14 +0,0 @@
-import TabsComponent from './Tabs.svelte';
-import TabPane from './TabPane.svelte';
-
-/**
- * 命名空间聚合导出：支持 <Tabs.Pane />。
- * 显式类型注解避免泄漏组件内部 Props 类型导致的声明 emit 报错。
- */
-export const Tabs: typeof TabsComponent & {
-  Pane: typeof TabPane;
-} = Object.assign(TabsComponent, { Pane: TabPane });
-
-export { default as TabPane } from './TabPane.svelte';
-export { meta as tabsMeta } from './meta.js';
-export type { TabItem } from './types.js';

package/src/tabs/meta.ts

@@ -1,152 +0,0 @@
-/**
- * Machine-readable component metadata for AI/docs consumption.
- * See specs/00-foundation/ai-friendly.spec.md.
- */
-export const meta = {
-  name: 'Tabs',
-  category: 'navigation',
-  description:
-    '标签页，在同一区域内组织并切换多组对等内容。支持 line/card/button 类型、数据驱动 tabList 或纯声明式 <Tabs.Pane> 自动收集、renderTabBar 自定义标签栏、roving tabindex 键盘导航、可关闭标签与溢出滚动/下拉收纳（overflow）。',
-  props: [
-    { name: 'value', type: 'string|number', default: 'undefined', desc: '受控选中标签 key' },
-    { name: 'defaultValue', type: 'string|number', default: '首个标签', desc: '非受控初始 key' },
-    { name: 'type', type: "'line'|'card'|'button'", default: 'line', desc: '视觉风格（button=分段按钮组）' },
-    { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-    {
-      name: 'tabPosition',
-      type: "'top'|'bottom'|'left'|'right'",
-      default: 'top',
-      desc: '标签栏位置',
-    },
-    { name: 'lazy', type: 'boolean', default: 'false', desc: '首次激活后才挂载面板' },
-    { name: 'keepDOM', type: 'boolean', default: 'false', desc: '激活过的面板保留 DOM' },
-    {
-      name: 'tabList',
-      type: 'TabItem[]',
-      default: 'undefined',
-      desc: '数据驱动标签定义；不传则从子 <Tabs.Pane> 的 tab/itemKey/disabled/closable 纯声明式自动收集',
-    },
-    { name: 'closable', type: 'boolean', default: 'false', desc: '全局可关闭（单项可覆盖）' },
-    {
-      name: 'addable',
-      type: 'boolean',
-      default: 'false',
-      desc: '标签栏末尾显示「+」按钮，点击触发 onAdd（受控，由父组件追加）',
-    },
-    {
-      name: 'keyboardActivation',
-      type: "'auto'|'manual'",
-      default: 'auto',
-      desc: '方向键聚焦即激活 / 需 Enter/Space 激活',
-    },
-    {
-      name: 'overflow',
-      type: "'scroll'|'dropdown'",
-      default: 'scroll',
-      desc: '横向溢出处理：scroll 前/后滚动箭头；dropdown 收纳进末尾「更多」下拉（仅 top/bottom 生效，纵向始终滚动）',
-    },
-    {
-      name: 'collapsible',
-      type: 'boolean',
-      default: 'false',
-      desc: 'line 风格横向溢出时启用折叠收纳（便捷开关，等价 overflow=dropdown：放不下的标签进末尾「更多」下拉，仅 top/bottom 生效）',
-    },
-    {
-      name: 'more',
-      type: "number | { count?: number; render?: Snippet; dropdownProps?: object }",
-      default: 'undefined',
-      desc: '溢出折叠配置：数字简写或对象形式，仅 dropdown 模式有效',
-    },
-    {
-      name: 'arrowPosition',
-      type: "'start'|'end'|'both'",
-      default: 'both',
-      desc: 'scroll 模式中前/后箭头位置',
-    },
-    {
-      name: 'renderArrow',
-      type: "Snippet<[{ type: 'start'|'end'; onClick: () => void }]>",
-      default: 'undefined',
-      desc: '自定义前/后滚动箭头',
-    },
-    {
-      name: 'showRestInDropdown',
-      type: 'boolean',
-      default: 'true',
-      desc: 'dropdown 折叠模式是否在下拉中展示收起 tabs',
-    },
-    {
-      name: 'dropdownProps',
-      type: 'object',
-      default: 'undefined',
-      desc: '透传给「更多」Dropdown 组件的 props',
-    },
-    {
-      name: 'onVisibleTabsChange',
-      type: '(visibleTabKeys: (string|number)[]) => void',
-      default: 'undefined',
-      desc: 'dropdown 模式下溢出项变化时回调，携带当前可见 tab keys',
-    },
-    {
-      name: 'contentStyle',
-      type: 'string | Record<string, string>',
-      default: 'undefined',
-      desc: '内容区外层样式（string 或 CSSProperties 对象）',
-    },
-    {
-      name: 'preventScroll',
-      type: 'boolean',
-      default: 'false',
-      desc: 'Tab 聚焦时是否阻止页面滚动',
-    },
-    {
-      name: 'tabPaneMotion',
-      type: 'boolean',
-      default: 'true',
-      desc: '面板切换是否启用动画',
-    },
-    {
-      name: 'tabBarExtraContent',
-      type: 'Snippet',
-      default: 'undefined',
-      desc: '标签栏右侧额外内容',
-    },
-    { name: 'onChange', type: '(key: string|number) => void', default: 'undefined' },
-    { name: 'onTabClose', type: '(key: string|number) => void', default: 'undefined' },
-    {
-      name: 'onTabClick',
-      type: '(key: string|number, event: MouseEvent) => void',
-      default: 'undefined',
-      desc: '标签被点击触发（含已选中标签，未必触发 onChange；disabled 拦截前发出，可用于埋点）',
-    },
-    {
-      name: 'onAdd',
-      type: '() => void',
-      default: 'undefined',
-      desc: 'addable=true 时点击「+」按钮回调（受控数据，组件内不改 tabList）',
-    },
-    {
-      name: 'renderTabBar',
-      type: 'Snippet<[TabItem[], string|number|undefined, (key) => void]>',
-      default: 'undefined',
-      desc: '自定义整个标签栏渲染（接收 tab 列表、当前激活 key、切换回调 setActive）；传入时跳过内置标签栏与溢出处理，面板内容仍按 activeKey 显隐',
-    },
-    { name: 'children', type: 'Snippet', default: 'undefined', desc: '声明式 TabPane 内容（<Tabs.Pane>）' },
-  ],
-  a11y: {
-    role: 'tablist',
-    keyboard: ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'Enter', 'Space'],
-    notes: [
-      'tablist 内每个标签为 role=tab，aria-selected 标记激活，aria-controls 关联面板',
-      'roving tabindex：仅激活标签 tabindex=0，其余 -1',
-      'keyboardActivation=auto 聚焦即激活，manual 需 Enter/Space 确认',
-      '面板 role=tabpanel；关闭叉为带 aria-label 的原生 button',
-      '标签溢出时出现前/后滚动箭头（带 aria-label，tabindex=-1 不入 Tab 序），激活标签自动滚到可视区',
-      'overflow=dropdown 时溢出标签收进末尾「更多」下拉（aria-haspopup=menu，带 aria-label），激活标签始终保持可见',
-      'addable 的「+」为带 aria-label 的原生 button',
-      'renderTabBar 自定义标签栏时由调用方负责无障碍语义（role=tab/aria-selected 等）',
-      'preventScroll=true 时 Tab 聚焦不触发页面滚动',
-    ],
-  },
-  tokens: ['--cd-tabs-*', '--cd-focus-ring', '--cd-radius-1', '--cd-spacing-*'],
-} as const;

package/src/tabs/types.ts

@@ -1,6 +0,0 @@
-export interface TabItem {
-  tab: string;
-  itemKey: string | number;
-  disabled?: boolean;
-  closable?: boolean;
-}

package/src/tag/Tag.a11y.test.ts

@@ -1,33 +0,0 @@
-// Tag a11y：closable 关闭按钮有可访问名（locale 派生）；checkable 取 role=checkbox + aria-checked。
-// 经 TagA11yFixture 提供真实文本 children（自带 LocaleProvider，故直接 render）。
-import { describe, it, expect } from 'vitest';
-import { render } from '@testing-library/svelte';
-import { expectNoAxeViolations } from '../test-utils/a11y.js';
-import TagA11yFixture from './TagA11yFixture.svelte';
-
-describe('Tag a11y', () => {
-  it('基础：渲染文本内容，无 axe violations', async () => {
-    const { container } = render(TagA11yFixture, { props: { text: 'Done' } });
-    expect(container.querySelector('.cd-tag')?.textContent).toContain('Done');
-    await expectNoAxeViolations(container);
-  });
-
-  it('closable：关闭按钮带 aria-label（来自 locale），无 axe violations', async () => {
-    const { container } = render(TagA11yFixture, {
-      props: { text: 'Done', props: { closable: true, tagText: 'Done' } },
-    });
-    const closeBtn = container.querySelector('.cd-tag__close');
-    expect(closeBtn?.getAttribute('aria-label')).toBeTruthy();
-    await expectNoAxeViolations(container);
-  });
-
-  it('checkable：role=checkbox + aria-checked，无 axe violations', async () => {
-    const { container } = render(TagA11yFixture, {
-      props: { text: 'Filter', props: { checkable: true, checked: true } },
-    });
-    const root = container.querySelector('.cd-tag');
-    expect(root?.getAttribute('role')).toBe('checkbox');
-    expect(root?.getAttribute('aria-checked')).toBe('true');
-    await expectNoAxeViolations(container);
-  });
-});

package/src/tag/Tag.svelte

@@ -1,366 +0,0 @@
-<!--
-  Tag — see specs/components/show/Tag.spec.md
-  Display atom. Controlled checked/visible never written back (only onChange/onClose).
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { useLocale } from '../locale-provider/index.js';
-  import Avatar from '../avatar/Avatar.svelte';
-
-  type TagType = 'light' | 'solid' | 'ghost';
-  type TagColor = 'grey' | 'primary' | 'success' | 'warning' | 'danger';
-  type TagSize = 'small' | 'default' | 'large';
-  type TagShape = 'square' | 'circle';
-
-  interface Props {
-    type?: TagType;
-    color?: TagColor;
-    size?: TagSize;
-    shape?: TagShape;
-    closable?: boolean;
-    /** controlled visibility; when false the tag is not rendered */
-    visible?: boolean;
-    checkable?: boolean;
-    /** controlled checked state */
-    checked?: boolean;
-    disabled?: boolean;
-    onClose?: () => void;
-    onChange?: (checked: boolean) => void;
-    children?: Snippet;
-    prefixIcon?: Snippet;
-    /** 后置图标（与 closable 互不冲突，关闭图标始终最右） */
-    suffixIcon?: Snippet;
-    /** 头像型 Tag 的图片地址 */
-    avatarSrc?: string;
-    /** 头像形状 */
-    avatarShape?: 'square' | 'circle';
-    /** 自定义关闭图标（默认内置 X） */
-    closeIcon?: Snippet;
-    /**
-     * 标签纯文本，仅用于派生 closable 关闭按钮的无障碍名（如「移除 已完成」）。
-     * children 为 Snippet 无法取文本，故由调用方显式提供；缺省时关闭按钮退回通用「关闭」标签。
-     */
-    tagText?: string;
-    /** 在 TagGroup 中的稳定标识 */
-    tagKey?: string | number;
-    /** 透传根类名 */
-    class?: string;
-    /** 透传根内联样式 */
-    style?: string;
-  }
-
-  let {
-    type = 'light',
-    color = 'grey',
-    size = 'default',
-    shape = 'square',
-    closable = false,
-    visible,
-    checkable = false,
-    checked,
-    disabled = false,
-    onClose,
-    onChange,
-    children,
-    prefixIcon,
-    suffixIcon,
-    avatarSrc,
-    avatarShape = 'square',
-    closeIcon,
-    tagText,
-    class: className,
-    style,
-  }: Props = $props();
-
-  const loc = useLocale();
-
-  // closable 关闭按钮无障碍名：有 tagText 时派生「移除 <文本>」（i18n Tag.closeAriaLabel），
-  // 缺省退回通用「关闭」（Tag.close），保证按钮永远有可读名。
-  const closeLabel = $derived(
-    tagText !== undefined && tagText !== ''
-      ? loc().t('Tag.closeAriaLabel', { label: tagText })
-      : loc().t('Tag.close'),
-  );
-
-  // --- visible: controlled vs uncontrolled (never write the prop back) ---
-  const visibleControlled = $derived(visible !== undefined);
-  let innerVisible = $state(true);
-  const currentVisible = $derived(visibleControlled ? !!visible : innerVisible);
-
-  // --- checked: controlled vs uncontrolled (never write the prop back) ---
-  const checkedControlled = $derived(checked !== undefined);
-  let innerChecked = $state(false);
-  const currentChecked = $derived(checkedControlled ? !!checked : innerChecked);
-
-  const cls = $derived(
-    [
-      'cd-tag',
-      `cd-tag--${type}`,
-      `cd-tag--${color}`,
-      `cd-tag--${size}`,
-      `cd-tag--${shape}`,
-      checkable && 'cd-tag--checkable',
-      checkable && currentChecked && 'cd-tag--checked',
-      disabled && 'cd-tag--disabled',
-      avatarSrc && 'cd-tag--has-avatar',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  // avatar sizing follows tag size; keep avatar compact within the tag
-  const avatarSize = $derived(
-    size === 'small' ? 16 : size === 'large' ? 24 : 20,
-  );
-
-  function handleToggle() {
-    if (disabled || !checkable) return;
-    const next = !currentChecked;
-    // Controlled: parent owns `checked`; propagate via onChange only.
-    if (!checkedControlled) innerChecked = next;
-    onChange?.(next);
-  }
-
-  function handleClose(e: MouseEvent) {
-    e.stopPropagation();
-    if (disabled) return;
-    // Controlled: parent owns `visible` and must set it false.
-    if (!visibleControlled) innerVisible = false;
-    onClose?.();
-  }
-
-  function handleKeydown(e: KeyboardEvent) {
-    if (!checkable || disabled) return;
-    if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      handleToggle();
-    }
-  }
-</script>
-
-{#if currentVisible}
-  {#if checkable}
-    <span
-      class={cls}
-      {style}
-      role="checkbox"
-      aria-checked={currentChecked}
-      aria-disabled={disabled || undefined}
-      tabindex={disabled ? -1 : 0}
-      onclick={handleToggle}
-      onkeydown={handleKeydown}
-    >
-      {@render leading()}
-      {#if children}<span class="cd-tag__content">{@render children()}</span>{/if}
-      {@render trailing()}
-    </span>
-  {:else}
-    <span class={cls} {style}>
-      {@render leading()}
-      {#if children}<span class="cd-tag__content">{@render children()}</span>{/if}
-      {@render trailing()}
-      {#if closable}
-        <button
-          type="button"
-          class="cd-tag__close"
-          aria-label={closeLabel}
-          disabled={disabled || undefined}
-          onclick={handleClose}
-        >
-          {#if closeIcon}
-            {@render closeIcon()}
-          {:else}
-            <svg viewBox="0 0 16 16" focusable="false" aria-hidden="true">
-              <path
-                fill="none"
-                stroke="currentColor"
-                stroke-width="1.6"
-                stroke-linecap="round"
-                d="M4 4 L12 12 M12 4 L4 12"
-              />
-            </svg>
-          {/if}
-        </button>
-      {/if}
-    </span>
-  {/if}
-{/if}
-
-<!-- leading: avatar (highest priority) then prefix icon -->
-{#snippet leading()}
-  {#if avatarSrc}
-    <span class="cd-tag__avatar">
-      <Avatar src={avatarSrc} shape={avatarShape} size={avatarSize} />
-    </span>
-  {/if}
-  {#if prefixIcon}<span class="cd-tag__prefix">{@render prefixIcon()}</span>{/if}
-{/snippet}
-
-<!-- trailing: suffix icon (closable's X is rendered separately, always rightmost) -->
-{#snippet trailing()}
-  {#if suffixIcon}<span class="cd-tag__suffix">{@render suffixIcon()}</span>{/if}
-{/snippet}
-
-<style>
-  .cd-tag {
-    --cd-tag-semantic: var(--cd-color-text-1);
-    --cd-tag-surface: var(--cd-color-bg-0);
-    display: inline-flex;
-    align-items: center;
-    gap: var(--cd-tag-gap);
-    block-size: var(--cd-tag-height-default);
-    padding-inline: var(--cd-tag-padding-x);
-    border: 1px solid transparent;
-    border-radius: var(--cd-tag-radius);
-    font-size: var(--cd-tag-font-size);
-    line-height: 1;
-    white-space: nowrap;
-    vertical-align: middle;
-    box-sizing: border-box;
-  }
-  .cd-tag--small {
-    block-size: var(--cd-tag-height-small);
-  }
-  .cd-tag--large {
-    block-size: var(--cd-tag-height-large);
-  }
-  .cd-tag--circle {
-    border-radius: var(--cd-radius-full);
-  }
-
-  /* color → semantic mapping */
-  .cd-tag--grey {
-    --cd-tag-semantic: var(--cd-color-text-1);
-  }
-  .cd-tag--primary {
-    --cd-tag-semantic: var(--cd-color-primary);
-  }
-  .cd-tag--success {
-    --cd-tag-semantic: var(--cd-color-success);
-  }
-  .cd-tag--warning {
-    --cd-tag-semantic: var(--cd-color-warning);
-  }
-  .cd-tag--danger {
-    --cd-tag-semantic: var(--cd-color-danger);
-  }
-
-  /* light: tinted background + strong text */
-  .cd-tag--light {
-    background: color-mix(in srgb, var(--cd-tag-semantic) 12%, var(--cd-tag-surface));
-    color: var(--cd-tag-semantic);
-  }
-  .cd-tag--light.cd-tag--grey {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-0);
-  }
-
-  /* solid: filled background + inverse text */
-  .cd-tag--solid {
-    background: var(--cd-tag-semantic);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-tag--solid.cd-tag--grey {
-    background: var(--cd-color-text-2);
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-tag--solid.cd-tag--warning {
-    color: var(--cd-color-text-inverse);
-  }
-
-  /* ghost: transparent background + border */
-  .cd-tag--ghost {
-    background: transparent;
-    border-color: var(--cd-tag-semantic);
-    color: var(--cd-tag-semantic);
-  }
-  .cd-tag--ghost.cd-tag--grey {
-    border-color: var(--cd-color-border);
-    color: var(--cd-color-text-1);
-  }
-
-  /* checkable chip */
-  .cd-tag--checkable {
-    cursor: pointer;
-    user-select: none;
-    transition:
-      background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
-      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-tag--checkable:not(.cd-tag--checked) {
-    background: var(--cd-color-fill-0);
-    border-color: transparent;
-    color: var(--cd-color-text-1);
-  }
-  .cd-tag--checkable.cd-tag--checked {
-    background: var(--cd-tag-semantic);
-    color: var(--cd-color-text-inverse);
-    border-color: transparent;
-  }
-  .cd-tag--checkable.cd-tag--checked.cd-tag--grey {
-    background: var(--cd-color-primary);
-  }
-  .cd-tag--checkable.cd-tag--checked.cd-tag--warning {
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-tag--checkable:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-
-  .cd-tag--disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .cd-tag__prefix,
-  .cd-tag__suffix,
-  .cd-tag__content {
-    display: inline-flex;
-    align-items: center;
-  }
-
-  .cd-tag__avatar {
-    display: inline-flex;
-    align-items: center;
-    margin-inline-start: calc(var(--cd-tag-padding-x) * -0.5);
-  }
-
-  .cd-tag__close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1em;
-    block-size: 1em;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: currentColor;
-    cursor: pointer;
-    opacity: 0.7;
-    border-radius: var(--cd-radius-full);
-  }
-  .cd-tag__close:hover {
-    opacity: 1;
-  }
-  .cd-tag__close:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  .cd-tag__close:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  .cd-tag__close svg {
-    inline-size: 100%;
-    block-size: 100%;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-tag--checkable {
-      transition: none;
-    }
-  }
-</style>

package/src/tag/TagA11yFixture.svelte

@@ -1,18 +0,0 @@
-<!--
-  Tag a11y 测试夹具：提供真实文本 children（createRawSnippet 在 harness 下不渲染文本）。
-  自带 LocaleProvider，故测试直接 render 本夹具。
--->
-<script lang="ts">
-  import { LocaleProvider } from '../locale-provider/index.js';
-  import Tag from './Tag.svelte';
-
-  interface Props {
-    text?: string;
-    props?: Record<string, unknown>;
-  }
-  let { text = 'Done', props = {} }: Props = $props();
-</script>
-
-<LocaleProvider locale="en_US">
-  <Tag {...props}>{text}</Tag>
-</LocaleProvider>

package/src/tag/index.ts

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