@chenzy-design/svelte 0.1.0

package/src/tag/meta.ts

@@ -0,0 +1,92 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * Tag — see specs/components/show/Tag.spec.md
+ */
+export const meta = {
+  name: 'Tag',
+  category: 'show',
+  description:
+    '标签：light/solid/ghost 三态，五种语义色，可关闭(closable)与可选中(checkable)；受控 checked/visible 不回写，仅通过 onChange/onClose 通知。',
+  exports: ['Tag'],
+  props: [
+    { name: 'type', type: "'light'|'solid'|'ghost'", default: "'light'", desc: '视觉风格' },
+    {
+      name: 'color',
+      type: "'grey'|'primary'|'success'|'warning'|'danger'",
+      default: "'grey'",
+      desc: '语义色',
+    },
+    { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
+    { name: 'shape', type: "'square'|'circle'", default: "'square'", desc: 'circle 用 full 圆角' },
+    { name: 'closable', type: 'boolean', default: 'false', desc: '尾部关闭按钮' },
+    {
+      name: 'visible',
+      type: 'boolean',
+      default: 'undefined',
+      desc: '受控显隐；false 不渲染。受控时不回写',
+    },
+    { name: 'checkable', type: 'boolean', default: 'false', desc: '可选中 chip(role=checkbox)' },
+    {
+      name: 'checked',
+      type: 'boolean',
+      default: 'undefined',
+      desc: '受控选中态；受控时不回写，仅 onChange',
+    },
+    { name: 'disabled', type: 'boolean', default: 'false' },
+    { name: 'onClose', type: '() => void', default: 'undefined', desc: '关闭点击回调' },
+    { name: 'onChange', type: '(checked: boolean) => void', default: 'undefined' },
+    { name: 'children', type: 'Snippet', default: 'undefined', desc: '标签内容' },
+    { name: 'prefixIcon', type: 'Snippet', default: 'undefined', desc: '前置图标' },
+    { name: 'suffixIcon', type: 'Snippet', default: 'undefined', desc: '后置图标（关闭图标始终最右）' },
+    { name: 'avatarSrc', type: 'string', default: 'undefined', desc: '头像型 Tag 的图片地址' },
+    {
+      name: 'avatarShape',
+      type: "'square'|'circle'",
+      default: "'square'",
+      desc: '头像形状',
+    },
+    { name: 'closeIcon', type: 'Snippet', default: 'undefined', desc: '自定义关闭图标（默认内置 X）' },
+    {
+      name: 'tagText',
+      type: 'string',
+      default: 'undefined',
+      desc: '标签纯文本，用于派生 closable 关闭按钮无障碍名（移除 <文本>）',
+    },
+    { name: 'tagKey', type: 'string|number', default: 'undefined', desc: '在 TagGroup 中的稳定标识' },
+    { name: 'class', type: 'string', default: 'undefined', desc: '透传根类名' },
+    { name: 'style', type: 'string', default: 'undefined', desc: '透传根内联样式' },
+  ],
+  events: [
+    { name: 'onClose', desc: '关闭按钮点击' },
+    { name: 'onChange', desc: 'checkable 切换' },
+  ],
+  slots: [
+    { name: 'children', desc: '标签文本/内容' },
+    { name: 'prefixIcon', desc: '前置图标' },
+    { name: 'suffixIcon', desc: '后置图标' },
+    { name: 'closeIcon', desc: '自定义关闭图标' },
+  ],
+  a11y: {
+    hasRole: true,
+    focusable: true,
+    note: 'checkable 时 role=checkbox + aria-checked，可键盘 Space/Enter 切换；关闭按钮 aria-label「关闭」。',
+  },
+  tokens: [
+    '--cd-tag-height-default',
+    '--cd-tag-height-small',
+    '--cd-tag-height-large',
+    '--cd-tag-padding-x',
+    '--cd-tag-radius',
+    '--cd-tag-font-size',
+    '--cd-tag-gap',
+  ],
+  responsive: false,
+  examples: [
+    { title: '基础', code: '<Tag color="primary">标签</Tag>' },
+    { title: '可关闭', code: '<Tag closable onClose={() => {}}>关闭</Tag>' },
+    {
+      title: '可选中',
+      code: '<Tag checkable checked={on} onChange={(v) => (on = v)}>选中</Tag>',
+    },
+  ],
+} as const;

package/src/tag-input/TagInput.a11y.test.ts

@@ -0,0 +1,41 @@
+// TagInput a11y：role=group + ariaLabel 容器可访问名；输入框可访问名；
+// 标签删除按钮 locale 可访问名。
+import { describe, it, expect } from 'vitest';
+import { renderWithLocale, expectNoAxeViolations } from '../test-utils/a11y.js';
+import TagInput from './TagInput.svelte';
+
+describe('TagInput a11y', () => {
+  it('默认渲染：role=group + ariaLabel，输入框有可访问名，无 axe violations', async () => {
+    const { container } = renderWithLocale(TagInput, {
+      props: { ariaLabel: 'Tags', placeholder: 'Add tag' },
+    });
+    const group = container.querySelector('[role="group"]');
+    expect(group).not.toBeNull();
+    expect(group?.getAttribute('aria-label')).toBe('Tags');
+    // 输入框同样以 ariaLabel 暴露可访问名（无可见 label）。
+    const input = container.querySelector('input');
+    expect(input?.getAttribute('aria-label')).toBe('Tags');
+    await expectNoAxeViolations(container);
+  });
+
+  it('已有标签：删除按钮 locale 可访问名，无 axe violations', async () => {
+    const { container } = renderWithLocale(TagInput, {
+      props: { ariaLabel: 'Skills', defaultValue: ['svelte', 'a11y'] },
+    });
+    const removeBtns = container.querySelectorAll('.cd-tag-input__remove');
+    expect(removeBtns.length).toBe(2);
+    const label = removeBtns[0]?.getAttribute('aria-label');
+    expect(label).toBeTruthy();
+    expect(label).not.toBe('TagInput.remove');
+    await expectNoAxeViolations(container);
+  });
+
+  it('disabled：aria-disabled=true，无 axe violations', async () => {
+    const { container } = renderWithLocale(TagInput, {
+      props: { ariaLabel: 'Tags', defaultValue: ['a'], disabled: true },
+    });
+    const group = container.querySelector('[role="group"]');
+    expect(group?.getAttribute('aria-disabled')).toBe('true');
+    await expectNoAxeViolations(container);
+  });
+});

package/src/tag-input/TagInput.svelte

@@ -0,0 +1,544 @@
+<!--
+  TagInput — see specs/components/input/TagInput.spec.md
+  基础子集：标签输入。受控 value 不回写 (红线 #1)，变更仅 onChange。
+  受控 inputValue 同理：提供 inputValue 时输入框文本由外部控制，
+  键入仅触发 onInputChange，组件不自行写回 (红线 #1)。
+  maxTagTextLength: 标签显示文本超长时截断为「前缀…」，完整文本经 title 查看；
+  截断仅影响显示派生 (纯函数 truncate)，标签实际值不变 (红线 #1)。
+  draggable: 启用后标签可用鼠标拖拽重排，新顺序经 reorder 纯函数 (红线 #2) 算出后
+  仅经 onChange 回传 (受控不回写 value，红线 #1)；拖拽监听命令式 + 拖拽态存 $state (红线 #3)。
+  拖拽是鼠标增强，键盘增删标签交互不受影响。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { useLocale } from '../locale-provider/index.js';
+  import { computeInsertSide, reorder, type InsertSide } from './reorder.js';
+
+  type Size = 'small' | 'default' | 'large';
+  type Status = 'default' | 'warning' | 'error';
+
+  interface Props {
+    value?: string[];
+    defaultValue?: string[];
+    inputValue?: string;
+    defaultInputValue?: string;
+    placeholder?: string;
+    size?: Size;
+    status?: Status;
+    disabled?: boolean;
+    readonly?: boolean;
+    max?: number;
+    maxLength?: number;
+    maxTagTextLength?: number;
+    separator?: string | string[];
+    addOnBlur?: boolean;
+    allowDuplicates?: boolean;
+    trimWhitespace?: boolean;
+    draggable?: boolean;
+    onChange?: (tags: string[]) => void;
+    onInputChange?: (value: string) => void;
+    ariaLabel?: string;
+    /** 透传给内部 input 的额外属性（除 value/onChange/onKeyDown 外） */
+    inputProps?: Record<string, unknown>;
+    /** 完全自定义 tag 渲染 */
+    renderTagItem?: Snippet<[{ value: string; index: number; onClose: () => void }]>;
+    /** 超出可见时 hover 显示 Popover（预留，当前仅存储，浮层功能可后续扩展） */
+    showRestTagsPopover?: boolean;
+    /** Popover 配置（预留） */
+    restTagsPopoverProps?: Record<string, unknown>;
+    /** 显示清除全部按钮 */
+    showClear?: boolean;
+    /** 自定义清除图标 */
+    clearIcon?: Snippet;
+    /** 超出 max 时触发 */
+    onExceed?: (value: string) => void;
+    /** 单 tag 超出 maxLength 时触发 */
+    onInputExceed?: (value: string) => void;
+    /** 输入框失焦 */
+    onBlur?: (e: FocusEvent) => void;
+    /** 输入框聚焦 */
+    onFocus?: (e: FocusEvent) => void;
+    /** focus 时阻止滚动 */
+    preventScroll?: boolean;
+    /** 挂载自动聚焦 */
+    autoFocus?: boolean;
+  }
+
+  let {
+    value,
+    defaultValue = [],
+    inputValue,
+    defaultInputValue = '',
+    placeholder,
+    size = 'default',
+    status = 'default',
+    disabled = false,
+    readonly = false,
+    max,
+    maxLength,
+    maxTagTextLength,
+    separator = ['Enter'],
+    addOnBlur = false,
+    allowDuplicates = false,
+    trimWhitespace = true,
+    draggable = false,
+    onChange,
+    onInputChange,
+    ariaLabel,
+    inputProps,
+    renderTagItem,
+    showRestTagsPopover = false,
+    restTagsPopoverProps,
+    showClear = false,
+    clearIcon,
+    onExceed,
+    onInputExceed,
+    onBlur,
+    onFocus,
+    preventScroll = false,
+    autoFocus = false,
+  }: Props = $props();
+
+  const loc = useLocale();
+
+  // 截断纯函数：仅影响显示，超过 max 时取前 max 字符 + 省略号 (红线 #2)。
+  function truncate(text: string, limit?: number): string {
+    if (limit === undefined || limit < 0) return text;
+    return text.length > limit ? `${text.slice(0, limit)}…` : text;
+  }
+
+  // --- 受控值 (红线 #1): 不回写 value，仅 onChange ---
+  const isControlled = $derived(value !== undefined);
+  let inner = $state<string[]>(getInitialValue());
+  const current = $derived<string[]>(isControlled ? (value ?? []) : inner);
+
+  function getInitialValue(): string[] {
+    return defaultValue;
+  }
+
+  // --- 受控 inputValue (红线 #1): 不回写 inputValue，仅 onInputChange ---
+  const isInputControlled = $derived(inputValue !== undefined);
+  let innerInput = $state<string>(getInitialInput());
+  const currentInput = $derived<string>(
+    isInputControlled ? (inputValue ?? '') : innerInput,
+  );
+
+  function getInitialInput(): string {
+    return defaultInputValue;
+  }
+
+  function setInput(next: string) {
+    if (!isInputControlled) innerInput = next;
+    onInputChange?.(next);
+  }
+
+  const separators = $derived(
+    Array.isArray(separator) ? separator : [separator],
+  );
+
+  const atMax = $derived(max !== undefined && current.length >= max);
+
+  // 派生显示文本：实际值不变，仅渲染层截断 (红线 #1/#2)。
+  const displayTags = $derived(
+    current.map((tag) => ({
+      value: tag,
+      label: truncate(tag, maxTagTextLength),
+      truncated: truncate(tag, maxTagTextLength) !== tag,
+    })),
+  );
+
+  function setTags(next: string[]) {
+    if (!isControlled) inner = next;
+    onChange?.(next);
+  }
+
+  function clearAll() {
+    if (disabled || readonly) return;
+    setTags([]);
+  }
+
+  function commitInput() {
+    if (disabled || readonly) return;
+    let text = currentInput;
+    if (trimWhitespace) text = text.trim();
+    if (text === '') {
+      setInput('');
+      return;
+    }
+    if (atMax) {
+      onExceed?.(text);
+      return;
+    }
+    if (!allowDuplicates && current.includes(text)) {
+      setInput('');
+      return;
+    }
+    setTags([...current, text]);
+    setInput('');
+  }
+
+  function removeAt(index: number) {
+    if (disabled || readonly) return;
+    setTags(current.filter((_, i) => i !== index));
+  }
+
+  function removeLast() {
+    if (disabled || readonly) return;
+    if (current.length === 0) return;
+    setTags(current.slice(0, -1));
+  }
+
+  // --- 拖拽排序：HTML5 DnD（draggable + drag 事件），与库内 Tree 对齐 ---
+  // 受控不改 value，仅经 onChange 通知新顺序（红线 #1）；
+  // 拖拽态用 $state，事件处理命令式 + drop/dragend 清理（红线 #3）；
+  // 插入位置与重排交由 reorder.ts 纯函数计算（红线 #2）。
+  const canDrag = $derived(draggable && !disabled && !readonly);
+  let dragIndex = $state<number | null>(null); // 被拖拽标签下标
+  let dropIndex = $state<number | null>(null); // 当前悬停目标下标
+  let dropSide = $state<InsertSide | null>(null); // 插入到目标前/后
+
+  function resetDrag() {
+    dragIndex = null;
+    dropIndex = null;
+    dropSide = null;
+  }
+
+  function onTagDragStart(e: DragEvent, index: number) {
+    if (!canDrag) {
+      e.preventDefault();
+      return;
+    }
+    dragIndex = index;
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = 'move';
+      // 必须 setData，否则部分浏览器不触发 drop。
+      e.dataTransfer.setData('text/plain', String(index));
+    }
+  }
+
+  function onTagDragOver(e: DragEvent, index: number) {
+    if (dragIndex === null) return;
+    // dragover 必须 preventDefault 才能触发 drop（红线 #3）。
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = 'move';
+    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+    dropIndex = index;
+    dropSide = computeInsertSide(e.clientX - rect.left, rect.width);
+  }
+
+  function onTagDragLeave(e: DragEvent, index: number) {
+    // 仅当真正离开该标签（而非进入其子元素）时清理目标，避免指示线闪烁。
+    const related = e.relatedTarget as Node | null;
+    const cur = e.currentTarget as HTMLElement;
+    if (related && cur.contains(related)) return;
+    if (dropIndex === index) {
+      dropIndex = null;
+      dropSide = null;
+    }
+  }
+
+  function onTagDrop(e: DragEvent, index: number) {
+    if (dragIndex === null || dropSide === null) {
+      resetDrag();
+      return;
+    }
+    e.preventDefault();
+    const next = reorder(current, dragIndex, index, dropSide);
+    resetDrag();
+    // 顺序未变时不发 onChange，避免无意义回调。
+    if (next.length === current.length && next.some((t, i) => t !== current[i])) {
+      setTags(next);
+    }
+  }
+
+  function onTagDragEnd() {
+    resetDrag();
+  }
+
+  function matchesSeparator(e: KeyboardEvent): boolean {
+    // 'Enter' 按 key 名匹配；字符分隔符（如 ',' / ';'）按 key 字符匹配。
+    return separators.some((sep) => sep === e.key);
+  }
+
+  function handleInput(e: Event & { currentTarget: HTMLInputElement }) {
+    const val = e.currentTarget.value;
+    // onInputExceed：单 tag 超出 maxLength 时触发（maxLength 本身已由 input[maxlength] 截断，
+    // 此处检测输入值长度超过 maxLength 的情况并回调）。
+    if (maxLength !== undefined && val.length > maxLength) {
+      onInputExceed?.(val);
+    }
+    setInput(val);
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (disabled || readonly) return;
+    if (matchesSeparator(e)) {
+      e.preventDefault();
+      commitInput();
+      return;
+    }
+    if (e.key === 'Backspace' && currentInput === '') {
+      e.preventDefault();
+      removeLast();
+    }
+  }
+
+  function handleBlur(e: FocusEvent) {
+    if (addOnBlur) commitInput();
+    onBlur?.(e);
+  }
+
+  function handleFocus(e: FocusEvent) {
+    onFocus?.(e);
+  }
+
+  let inputEl = $state<HTMLInputElement | null>(null);
+
+  // autoFocus：命令式聚焦一次（$effect 仅 client，SSR 安全）。
+  $effect(() => {
+    if (autoFocus && inputEl && !disabled) {
+      inputEl.focus({ preventScroll });
+    }
+  });
+
+  function focusInput() {
+    if (disabled) return;
+    inputEl?.focus();
+  }
+
+  const cls = $derived(
+    [
+      'cd-tag-input',
+      `cd-tag-input--${size}`,
+      `cd-tag-input--${status}`,
+      disabled && 'cd-tag-input--disabled',
+      readonly && 'cd-tag-input--readonly',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const hasClear = $derived(showClear && !disabled && !readonly && current.length > 0);
+</script>
+
+<!-- 点击容器聚焦输入框；容器本身非交互控件，仅做转发 -->
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
+<div
+  class={cls}
+  role="group"
+  aria-label={ariaLabel}
+  aria-disabled={disabled || undefined}
+  onclick={focusInput}
+>
+  {#each displayTags as tag, i (`${tag.value}-${i}`)}
+    <!-- 标签拖拽为鼠标增强（HTML5 DnD），键盘用户经下方输入框与删除按钮增删，无需此处 role -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <span
+      class="cd-tag-input__tag"
+      class:cd-tag-input__tag--dragging={dragIndex === i}
+      class:cd-tag-input__tag--drop-before={dropIndex === i && dropSide === 'before'}
+      class:cd-tag-input__tag--drop-after={dropIndex === i && dropSide === 'after'}
+      draggable={canDrag}
+      ondragstart={(e) => onTagDragStart(e, i)}
+      ondragover={(e) => onTagDragOver(e, i)}
+      ondragleave={(e) => onTagDragLeave(e, i)}
+      ondrop={(e) => onTagDrop(e, i)}
+      ondragend={onTagDragEnd}
+    >
+      {#if renderTagItem}
+        {@render renderTagItem({ value: tag.value, index: i, onClose: () => removeAt(i) })}
+      {:else}
+        <span
+          class="cd-tag-input__text"
+          title={tag.truncated ? tag.value : undefined}
+        >{tag.label}</span>
+        {#if !readonly && !disabled}
+          <button
+            type="button"
+            class="cd-tag-input__remove"
+            aria-label={loc().t('TagInput.remove')}
+            tabindex={-1}
+            onclick={(e) => {
+              e.stopPropagation();
+              removeAt(i);
+            }}
+          >
+            ×
+          </button>
+        {/if}
+      {/if}
+    </span>
+  {/each}
+
+  <input
+    class="cd-tag-input__input"
+    bind:this={inputEl}
+    type="text"
+    value={currentInput}
+    placeholder={current.length === 0 ? placeholder : undefined}
+    {disabled}
+    {readonly}
+    maxlength={maxLength}
+    aria-label={ariaLabel}
+    oninput={handleInput}
+    onkeydown={handleKeydown}
+    onblur={handleBlur}
+    onfocus={handleFocus}
+    {...(inputProps ?? {})}
+  />
+
+  {#if hasClear}
+    <button
+      type="button"
+      class="cd-tag-input__clear"
+      aria-label={loc().t('TagInput.clear')}
+      tabindex={-1}
+      onclick={(e) => {
+        e.stopPropagation();
+        clearAll();
+      }}
+    >
+      {#if clearIcon}
+        {@render clearIcon()}
+      {:else}
+        <svg viewBox="0 0 16 16" width="14" height="14" aria-hidden="true" focusable="false">
+          <path
+            fill="currentColor"
+            d="M8 1a7 7 0 1 0 0 14A7 7 0 0 0 8 1Zm2.5 9.1-1.4 1.4L8 9.4 6.5 11l-1.4-1.4L6.6 8 5.1 6.5 6.5 5.1 8 6.6 9.5 5.1l1.4 1.4L9.4 8l1.1 1.1Z"
+          />
+        </svg>
+      {/if}
+    </button>
+  {/if}
+</div>
+
+<style>
+  .cd-tag-input {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--cd-spacing-1);
+    inline-size: 100%;
+    min-block-size: var(--cd-input-height-default);
+    padding-inline: var(--cd-input-padding-x);
+    padding-block: var(--cd-spacing-1);
+    background: var(--cd-input-bg);
+    border: 1px solid var(--cd-input-border);
+    border-radius: var(--cd-input-radius);
+    font-size: var(--cd-input-font-size);
+    cursor: text;
+    transition: border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  }
+  .cd-tag-input--small {
+    min-block-size: var(--cd-input-height-small);
+    font-size: var(--cd-font-size-1);
+  }
+  .cd-tag-input--large {
+    min-block-size: var(--cd-input-height-large);
+    font-size: var(--cd-font-size-3);
+  }
+  .cd-tag-input:focus-within {
+    border-color: var(--cd-input-border-active);
+    box-shadow: var(--cd-focus-ring);
+  }
+  .cd-tag-input--error {
+    border-color: var(--cd-input-border-error);
+  }
+  .cd-tag-input--disabled {
+    background: var(--cd-color-fill-0);
+    color: var(--cd-color-text-3);
+    cursor: not-allowed;
+  }
+  .cd-tag-input--readonly {
+    cursor: default;
+  }
+  .cd-tag-input__tag {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cd-spacing-1);
+    padding-inline: var(--cd-spacing-2);
+    background: var(--cd-color-fill-1);
+    border-radius: var(--cd-radius-1);
+    font-size: var(--cd-font-size-1);
+    white-space: nowrap;
+  }
+  .cd-tag-input__tag[draggable='true'] {
+    cursor: grab;
+  }
+  .cd-tag-input__tag--dragging {
+    opacity: 0.5;
+    cursor: grabbing;
+  }
+  /* 插入指示线：拖拽时显示在目标标签的前 / 后侧（红线 #3 状态驱动渲染）。 */
+  .cd-tag-input__tag--drop-before::before,
+  .cd-tag-input__tag--drop-after::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inline-size: 2px;
+    background: var(--cd-input-border-active);
+    border-radius: 1px;
+  }
+  .cd-tag-input__tag--drop-before::before {
+    inset-inline-start: calc(var(--cd-spacing-1) / -2 - 1px);
+  }
+  .cd-tag-input__tag--drop-after::after {
+    inset-inline-end: calc(var(--cd-spacing-1) / -2 - 1px);
+  }
+  .cd-tag-input__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .cd-tag-input__remove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--cd-color-text-2);
+    font-size: var(--cd-font-size-3);
+    line-height: 1;
+    cursor: pointer;
+  }
+  .cd-tag-input__remove:hover {
+    color: var(--cd-color-text-0);
+  }
+  .cd-tag-input__input {
+    flex: 1 1 auto;
+    min-inline-size: 4rem;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+  .cd-tag-input__input::placeholder {
+    color: var(--cd-input-color-placeholder);
+  }
+  .cd-tag-input__input:disabled {
+    cursor: not-allowed;
+  }
+  .cd-tag-input__clear {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--cd-color-text-2);
+    cursor: pointer;
+  }
+  .cd-tag-input__clear:hover {
+    color: var(--cd-color-text-0);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .cd-tag-input {
+      transition: none;
+    }
+  }
+</style>

package/src/tag-input/index.ts

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