@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/button/Button.svelte

@@ -1,9 +1,14 @@
 <!--
-  Button — see specs/components/basic/Button.spec.md
-  Token-driven, a11y-correct (native <button>/<a>), no hardcoded values.
+  Button — 对外派发器（严格对齐 Semi semi-ui/button/index.tsx）。
+  Semi：有 icon || (loading && !disabled) → IconButton 组装；否则 → BaseButton 纯容器。
+  Svelte 无 cloneElement，故：BaseButton 承载全部视觉 CSS，本组件负责 content 子结构组装
+  （icon 元素 + 文字 span），并把组装出的额外 class（-with-icon/-with-icon-only/-loading）、
+  noHorizontalPadding 的 inline padding 透传给 BaseButton。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { IconAILoading } from '@chenzy-design/icons';
+  import BaseButton from './BaseButton.svelte';
   import {
     getButtonGroupContext,
     type ButtonType,
@@ -19,32 +24,37 @@
     disabled?: boolean;
     loading?: boolean;
     /**
-     * AI 多彩按钮：所有 theme 下用品牌蓝→紫渐变（对齐 Semi AI 风格）。
-     * type 仅 primary / tertiary 有意义（其余 type 回退为 primary）。
+     * AI 多彩按钮：对齐 Semi，仅 type=primary/tertiary 有 colorful 语义
+     * （primary solid/light/borderless/outline，tertiary solid），其余组合无效果。
      */
     colorful?: boolean;
     htmlType?: 'button' | 'submit' | 'reset';
-    /** required for icon-only buttons */
+    /** 圆形按钮（border-radius:50%），配合 icon-only 呈正圆。 */
+    circle?: boolean;
+    /** 无障碍名；纯图标按钮必填（透传 aria-label）。 */
     ariaLabel?: string;
+    /** 图标内容（Snippet）。 */
     icon?: Snippet;
-    /** 图标相对文字位置。spec §4 L27 */
+    /** 图标相对文字位置。 */
     iconPosition?: 'left' | 'right';
     /**
-     * 设置水平方向是否去掉内边距，仅在设置了 icon 时有效（对齐 Semi）。
-     * true 等效 ['left','right']；'left'/'right' 去单侧；数组组合去两侧。
+     * 水平方向去内边距，仅在设置了 icon 时有效（对齐 Semi IconButton）。
+     * true 等效 ['left','right']；'left'/'right' 去单侧；数组组合去两侧。inline padding 实现。
      */
     noHorizontalPadding?: boolean | 'left' | 'right' | Array<'left' | 'right'>;
     /** 根元素自定义类名（透传，叠加在内置 class 之后）。 */
     class?: string;
     /** 根元素自定义内联样式（透传）。 */
     style?: string;
-    /** 内容区（文本 + 图标包裹）自定义类名（对齐 Semi contentClassName）。 */
+    /** 内容区（.cd-button-content）自定义类名（对齐 Semi contentClassName）。 */
     contentClassName?: string;
     children?: Snippet;
     onclick?: (e: MouseEvent) => void;
     onmousedown?: (e: MouseEvent) => void;
     onmouseenter?: (e: MouseEvent) => void;
     onmouseleave?: (e: MouseEvent) => void;
+    /** 其余原生属性透传到根 button（data-* 名 name value form title tabindex aria-controls aria-expanded 等）。 */
+    [key: string]: unknown;
   }
 
   let {
@@ -56,354 +66,214 @@
     loading = false,
     colorful: colorfulProp,
     htmlType = 'button',
+    circle = false,
     ariaLabel,
     icon,
     iconPosition = 'left',
     noHorizontalPadding = false,
     class: className,
-    style,
+    style: styleProp,
     contentClassName,
     children,
     onclick,
     onmousedown,
     onmouseenter,
     onmouseleave,
+    ...rest
   }: Props = $props();
 
   // ButtonGroup 上下文：仅在未显式设置对应 prop 时作为默认回退（显式 prop 始终优先）。
   const group = getButtonGroupContext();
-  const typeRaw = $derived<ButtonType>(typeProp ?? group?.type ?? 'secondary');
+  const type = $derived<ButtonType>(typeProp ?? group?.type ?? 'primary');
   const theme = $derived<ButtonTheme>(themeProp ?? group?.theme ?? 'light');
   const size = $derived<ButtonSize>(sizeProp ?? group?.size ?? 'default');
   const disabled = $derived<boolean>(disabledProp ?? group?.disabled ?? false);
   const colorful = $derived<boolean>(colorfulProp ?? group?.colorful ?? false);
 
-  // colorful 仅支持 primary / tertiary；其余 type 回退为 primary。
-  const type = $derived<ButtonType>(
-    colorful && typeRaw !== 'primary' && typeRaw !== 'tertiary' ? 'primary' : typeRaw,
+  // 对齐 Semi 派发：有 icon || (loading && !disabled) 走 IconButton 组装分支。
+  const isIconButton = $derived(!!icon || (loading && !disabled));
+  // loading 图标：仅在 loading && !disabled 时渲染 spinner（对齐 Semi）。
+  const showLoadingIcon = $derived(loading && !disabled);
+  // colorful loading 用自带渐变的 IconAILoading（对齐 Semi iconButton：渐变文字组合下 content
+  // color:transparent 会吃掉 stroke=currentColor 的普通 spinner，故这些组合改用 stroke=url(#渐变)
+  // 的 AILoading）。条件镜像 Semi：colorful 且 theme∈{light,outline,borderless} 或 solid+tertiary。
+  const colorfulLoading = $derived(
+    colorful &&
+      (theme === 'light' ||
+        theme === 'outline' ||
+        theme === 'borderless' ||
+        (theme === 'solid' && type === 'tertiary')),
   );
+  // 是否渲染图标元素（loading spinner 或用户 icon）。
+  const hasIconElem = $derived(showLoadingIcon || !!icon);
+  // 纯图标（无文字）→ with-icon-only（对齐 Semi children == null）。
+  const iconOnly = $derived(isIconButton && !children);
 
-  // 无 children（仅 icon 或 loading 旋转图标）时为纯图标按钮，收成方形。
-  const iconOnly = $derived(!children && (!!icon || loading));
+  // 组装到根 button 的额外 class（对齐 Semi iconBtnCls）。
+  const extraClass = $derived(
+    isIconButton
+      ? [
+          'cd-button-with-icon',
+          iconOnly && 'cd-button-with-icon-only',
+          loading && 'cd-button-loading',
+        ]
+          .filter(Boolean)
+          .join(' ')
+      : undefined,
+  );
 
-  // noHorizontalPadding 规整为 {left,right}，仅在有 icon 时生效（对齐 Semi）。
-  const noPad = $derived.by(() => {
-    if (!icon || !noHorizontalPadding) return { left: false, right: false };
-    if (noHorizontalPadding === true) return { left: true, right: true };
-    const arr = Array.isArray(noHorizontalPadding)
+  // noHorizontalPadding → inline paddingLeft/Right=0（对齐 Semi IconButton，仅有 icon 时）。
+  const style = $derived.by(() => {
+    if (!icon || !noHorizontalPadding) return styleProp;
+    const arr: Array<'left' | 'right'> = Array.isArray(noHorizontalPadding)
       ? noHorizontalPadding
-      : [noHorizontalPadding];
-    return { left: arr.includes('left'), right: arr.includes('right') };
+      : noHorizontalPadding === true
+        ? ['left', 'right']
+        : [noHorizontalPadding];
+    const parts: string[] = [];
+    const base = styleProp?.trim().replace(/;$/, '');
+    if (base) parts.push(base);
+    if (arr.includes('left')) parts.push('padding-left:0');
+    if (arr.includes('right')) parts.push('padding-right:0');
+    return parts.length ? `${parts.join(';')};` : undefined;
   });
 
-  const cls = $derived(
-    [
-      'cd-button',
-      `cd-button--${type}`,
-      `cd-button--${theme}`,
-      `cd-button--${size}`,
-      block && 'cd-button--block',
-      loading && 'cd-button--loading',
-      colorful && 'cd-button--colorful',
-      iconOnly && 'cd-button--icon-only',
-      icon && iconPosition === 'right' && 'cd-button--icon-right',
-      noPad.left && 'cd-button--no-pad-left',
-      noPad.right && 'cd-button--no-pad-right',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
+  // 文字 span class（对齐 Semi）：iconPosition=left → content-right；=right → content-left。
+  const textCls = $derived(
+    iconPosition === 'right' ? 'cd-button-content-left' : 'cd-button-content-right',
   );
-
-  function handleClick(e: MouseEvent) {
-    if (disabled || loading) {
-      e.preventDefault();
-      return;
-    }
-    onclick?.(e);
-  }
 </script>
 
-<!-- loading 时显示旋转加载图标（优先于用户 icon）；否则渲染用户 icon -->
-{#snippet leadingIcon()}
-  {#if loading}
-    <span class="cd-button__icon cd-button__icon--spin" aria-hidden="true">
-      <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+{#snippet iconElem()}
+  {#if showLoadingIcon}
+    {#if colorfulLoading}
+      <!-- colorful 渐变文字组合：用 stroke=url(#渐变) 的 AILoading，不被 content transparent 吃掉。 -->
+      <IconAILoading class="cd-button-loading-spin" />
+    {:else}
+      <svg class="cd-button-loading-spin" viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
         <path d="M12 3a9 9 0 1 0 9 9" />
       </svg>
-    </span>
+    {/if}
   {:else if icon}
-    <span class="cd-button__icon">{@render icon()}</span>
+    {@render icon()}
   {/if}
 {/snippet}
 
-<button
-  class={cls}
-  {style}
-  type={htmlType}
+{#snippet assembledContent()}
+  {#if iconPosition === 'right'}
+    {#if children}<span class={textCls}>{@render children()}</span>{/if}
+    {#if hasIconElem}{@render iconElem()}{/if}
+  {:else}
+    {#if hasIconElem}{@render iconElem()}{/if}
+    {#if children}<span class={textCls}>{@render children()}</span>{/if}
+  {/if}
+{/snippet}
+
+<BaseButton
+  {...rest}
+  {type}
+  {theme}
+  {size}
+  {block}
   {disabled}
-  aria-busy={loading || undefined}
+  {colorful}
+  {circle}
+  {htmlType}
+  {extraClass}
+  class={className}
+  {style}
+  {contentClassName}
   aria-label={ariaLabel}
-  onclick={handleClick}
+  aria-busy={loading || undefined}
+  {onclick}
   {onmousedown}
   {onmouseenter}
   {onmouseleave}
 >
-  {#if contentClassName}
-    <span class={contentClassName} style="display: contents;">
-      {@render leadingIcon()}
-      {@render children?.()}
-    </span>
+  {#if isIconButton}
+    {@render assembledContent()}
   {:else}
-    {@render leadingIcon()}
     {@render children?.()}
   {/if}
-</button>
+</BaseButton>
 
 <style>
-  .cd-button {
+  /* ===== IconButton 组装态样式（对齐 Semi iconButton.scss）===== */
+  /* with-icon：content 居中排布。 */
+  :global(.cd-button-with-icon) {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    gap: var(--cd-spacing-tight);
-    height: var(--cd-button-height-default);
-    padding-inline: var(--cd-button-padding-x);
-    border: 1px solid transparent;
-    border-radius: var(--cd-button-radius);
-    font-size: var(--cd-button-font-size);
-    font-weight: var(--cd-font-weight-bold);
-    line-height: 1;
-    cursor: pointer;
-    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),
-      color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  .cd-button:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  /* Semi：全尺寸字号统一 regular(14)，仅高度/内边距随尺寸变化 */
-  .cd-button--small {
-    height: var(--cd-button-height-small);
-  }
-  .cd-button--large {
-    height: var(--cd-button-height-large);
-    padding-inline: var(--cd-button-padding-x-large);
-  }
-  .cd-button--block {
-    width: 100%;
-  }
-  /* 纯图标（无文字）：收成正方形，宽=高，去除水平内距 */
-  .cd-button--icon-only {
-    width: var(--cd-button-height-default);
-    padding-inline: 0;
-    gap: 0;
-  }
-  .cd-button--icon-only.cd-button--small {
-    width: var(--cd-button-height-small);
-  }
-  .cd-button--icon-only.cd-button--large {
-    width: var(--cd-button-height-large);
-  }
-  /* noHorizontalPadding：仅 icon 按钮去单/双侧水平内距（对齐 Semi） */
-  .cd-button--no-pad-left {
-    padding-inline-start: 0;
-  }
-  .cd-button--no-pad-right {
-    padding-inline-end: 0;
-  }
-  .cd-button--loading {
-    cursor: default;
-    opacity: 0.75;
-  }
-  .cd-button:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-  /*
-    type 决定「色相」(--btn-hue 系列变量)，theme 决定「填充方式」，两者正交组合。
-    - --btn-hue:       该 type 的语义主色 (solid 背景 / light·borderless·outline 文字与边框)
-    - --btn-hue-hover: solid 背景 hover 加深一档
-    - --btn-hue-text:  solid 文字色 (语义色用白字，中性色用反相文字)
-    light/borderless/outline 的浅色背景统一用 color-mix 由 --btn-hue 派生，
-    避免依赖尚未定义的 *-light-* token。
-  */
-  .cd-button--primary {
-    --btn-hue: var(--cd-color-primary);
-    --btn-hue-hover: var(--cd-color-primary-hover);
-    --btn-hue-text: var(--cd-color-text-inverse);
-  }
-  .cd-button--secondary {
-    /* 中性 type：solid=深灰底白字 */
-    --btn-hue: var(--cd-color-text-0);
-    --btn-hue-hover: var(--cd-color-text-1);
-    --btn-hue-text: var(--cd-color-text-inverse);
-  }
-  .cd-button--tertiary {
-    /* 中性更弱：solid=中灰底白字、light/borderless 用次级文字色 */
-    --btn-hue: var(--cd-color-text-2);
-    --btn-hue-hover: var(--cd-color-text-1);
-    --btn-hue-text: var(--cd-color-text-inverse);
-  }
-  .cd-button--warning {
-    --btn-hue: var(--cd-color-warning);
-    --btn-hue-hover: color-mix(in srgb, var(--cd-color-warning) 88%, #000);
-    --btn-hue-text: var(--cd-color-text-inverse);
-  }
-  .cd-button--danger {
-    --btn-hue: var(--cd-color-danger);
-    --btn-hue-hover: color-mix(in srgb, var(--cd-color-danger) 88%, #000);
-    --btn-hue-text: var(--cd-color-text-inverse);
-  }
-
-  /* theme: solid — type 色相实心背景 + 反相/白字 */
-  .cd-button--solid {
-    background: var(--btn-hue);
-    color: var(--btn-hue-text);
   }
-  .cd-button--solid:hover:not(:disabled):not([aria-disabled='true']) {
-    background: var(--btn-hue-hover);
-  }
-  .cd-button--solid:active:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 82%, #000);
-  }
-
-  /* theme: light — type 色相浅色背景 + 色相文字 */
-  .cd-button--light {
-    background: color-mix(in srgb, var(--btn-hue) 12%, transparent);
-    color: var(--btn-hue);
-  }
-  .cd-button--light:hover:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 20%, transparent);
-  }
-  .cd-button--light:active:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 28%, transparent);
+  :global(.cd-button-with-icon) :global(.cd-button-content) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
-  /* theme: borderless — 透明背景 + 色相文字，无边框 */
-  .cd-button--borderless {
-    background: transparent;
-    color: var(--btn-hue);
-  }
-  .cd-button--borderless:hover:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 12%, transparent);
+  /* 图标↔文字间距（对齐 Semi -content-left / -content-right margin）。 */
+  :global(.cd-button-content-left) {
+    margin-right: var(--cd-spacing-button-icononly-content-marginright);
+    display: flex;
+    align-items: center;
   }
-  .cd-button--borderless:active:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 20%, transparent);
+  :global(.cd-button-content-right) {
+    margin-left: var(--cd-spacing-button-icononly-content-marginleft);
+    display: flex;
+    align-items: center;
   }
 
-  /* theme: outline — 透明背景 + 色相边框 + 色相文字 */
-  .cd-button--outline {
-    background: transparent;
-    border-color: var(--btn-hue);
-    color: var(--btn-hue);
-  }
-  .cd-button--outline:hover:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 8%, transparent);
-    border-color: var(--btn-hue-hover);
-    color: var(--btn-hue-hover);
-  }
-  .cd-button--outline:active:not(:disabled):not([aria-disabled='true']) {
-    background: color-mix(in srgb, var(--btn-hue) 14%, transparent);
-  }
-  /*
-    colorful (AI 多彩)：蓝 → 紫 双色渐变（对齐 Semi AI 风格，冷色调）。
-    - 支持所有 theme；type 仅 primary/tertiary（脚本里已收窄回退）。
-    - 局部变量 --cf / --cf-hover / --cf-text 复用同一渐变，各 theme 按填充方式取用。
-    - solid: 多彩实心 + 白字；light: 浅多彩底 + 紫字；
-      outline: 透明 + 渐变边框（border-image）+ 紫字；borderless: 透明 + 紫字。
-  */
-  .cd-button--colorful {
-    /* 实心渐变 + hover 加深版（向蓝/紫各深一档），各 theme 复用 */
-    --cf: linear-gradient(
-      120deg,
-      var(--cd-button-colorful-from) 0%,
-      var(--cd-button-colorful-via) 52%,
-      var(--cd-button-colorful-to) 100%
-    );
-    --cf-hover: linear-gradient(
-      120deg,
-      color-mix(in srgb, var(--cd-button-colorful-from) 85%, #000) 0%,
-      color-mix(in srgb, var(--cd-button-colorful-via) 85%, #000) 52%,
-      color-mix(in srgb, var(--cd-button-colorful-to) 85%, #000) 100%
-    );
-    --cf-text: var(--cd-button-colorful-via);
-  }
-  .cd-button--colorful.cd-button--solid {
-    background: var(--cf);
-    color: var(--cd-color-text-inverse);
-    border-color: transparent;
-  }
-  .cd-button--colorful.cd-button--solid:hover:not(:disabled):not([aria-disabled='true']) {
-    background: var(--cf-hover);
-    box-shadow: 0 4px 12px color-mix(in srgb, var(--cd-button-colorful-via) 35%, transparent);
-  }
-  .cd-button--colorful.cd-button--light {
-    background: linear-gradient(
-      120deg,
-      color-mix(in srgb, var(--cd-button-colorful-from) 16%, transparent) 0%,
-      color-mix(in srgb, var(--cd-button-colorful-via) 16%, transparent) 52%,
-      color-mix(in srgb, var(--cd-button-colorful-to) 16%, transparent) 100%
-    );
-    color: var(--cf-text);
-    border-color: transparent;
-  }
-  .cd-button--colorful.cd-button--light:hover:not(:disabled):not([aria-disabled='true']) {
-    background: linear-gradient(
-      120deg,
-      color-mix(in srgb, var(--cd-button-colorful-from) 28%, transparent) 0%,
-      color-mix(in srgb, var(--cd-button-colorful-via) 28%, transparent) 52%,
-      color-mix(in srgb, var(--cd-button-colorful-to) 28%, transparent) 100%
-    );
-  }
-  .cd-button--colorful.cd-button--borderless {
-    background: transparent;
-    color: var(--cf-text);
-  }
-  .cd-button--colorful.cd-button--borderless:hover:not(:disabled):not([aria-disabled='true']) {
-    background: linear-gradient(
-      120deg,
-      color-mix(in srgb, var(--cd-button-colorful-from) 16%, transparent) 0%,
-      color-mix(in srgb, var(--cd-button-colorful-to) 16%, transparent) 100%
-    );
-  }
-  /* outline: 渐变边框 + 渐变文字色 */
-  .cd-button--colorful.cd-button--outline {
-    background: transparent;
-    border: 1px solid transparent;
-    border-image: var(--cf) 1;
-    color: var(--cf-text);
-  }
-  .cd-button--colorful.cd-button--outline:hover:not(:disabled):not([aria-disabled='true']) {
-    background: linear-gradient(
-      120deg,
-      color-mix(in srgb, var(--cd-button-colorful-from) 12%, transparent) 0%,
-      color-mix(in srgb, var(--cd-button-colorful-to) 12%, transparent) 100%
-    );
-  }
-  .cd-button__icon {
-    display: inline-flex;
-  }
-  /* loading 旋转图标 */
-  .cd-button__icon--spin {
-    animation: cd-button-spin 0.7s linear infinite;
+  /* loading：禁用交互 + 图标旋转（对齐 Semi -loading）。 */
+  :global(.cd-button-loading) {
+    pointer-events: none;
+    cursor: not-allowed;
   }
-  @keyframes cd-button-spin {
+  /* svg 用 :global——loading spinner 可能来自外部图标组件（colorful 用 IconAILoading），
+     其 svg 不带 Button 的 scope class，不加 :global 则选择器丢失、旋转动画失效。 */
+  :global(.cd-button-loading) :global(.cd-button-content) > :global(svg) {
+    width: 16px;
+    height: 16px;
+    animation: cd-button-icon-rotate var(--cd-animation-duration-button-icon-loading) linear infinite;
+    animation-fill-mode: forwards;
+  }
+  @keyframes cd-button-icon-rotate {
+    from {
+      transform: rotate(0);
+    }
     to {
       transform: rotate(360deg);
     }
   }
-  /* iconPosition=right: 纯 CSS flex order, DOM 顺序不变 (spec §4 L27) */
-  .cd-button--icon-right .cd-button__icon {
-    order: 1;
+
+  /* with-icon-only（纯图标）：方形尺寸 + iconOnly 内边距（对齐 Semi -with-icon-only）。 */
+  :global(.cd-button-with-icon-only) {
+    padding-left: var(--cd-spacing-button-icononly-default-paddingleft);
+    padding-right: var(--cd-spacing-button-icononly-default-paddingright);
+    padding-top: var(--cd-spacing-button-icononly-default-paddingtop);
+    padding-bottom: var(--cd-spacing-button-icononly-default-paddingbottom);
+    height: var(--cd-height-button-icononly-default);
+    width: var(--cd-width-button-icononly-default);
+    justify-content: center;
+    align-items: center;
+  }
+  :global(.cd-button-with-icon-only.cd-button-size-small) {
+    padding-left: var(--cd-spacing-button-icononly-small-paddingleft);
+    padding-right: var(--cd-spacing-button-icononly-small-paddingright);
+    padding-top: var(--cd-spacing-button-icononly-small-paddingtop);
+    padding-bottom: var(--cd-spacing-button-icononly-small-paddingbottom);
+    height: var(--cd-height-button-icononly-small);
+    width: var(--cd-width-button-icononly-small);
+  }
+  :global(.cd-button-with-icon-only.cd-button-size-large) {
+    padding-left: var(--cd-spacing-button-icononly-large-paddingleft);
+    padding-right: var(--cd-spacing-button-icononly-large-paddingright);
+    padding-top: var(--cd-spacing-button-icononly-large-paddingtop);
+    padding-bottom: var(--cd-spacing-button-icononly-large-paddingbottom);
+    height: var(--cd-height-button-icononly-large);
+    width: var(--cd-width-button-icononly-large);
   }
+
   @media (prefers-reduced-motion: reduce) {
-    .cd-button {
-      transition: none;
-    }
-    /* 降级：不旋转，避免眩晕 */
-    .cd-button__icon--spin {
+    :global(.cd-button-loading) :global(.cd-button-content) > :global(svg) {
       animation: none;
     }
   }

package/dist/button/Button.svelte.d.ts

@@ -8,32 +8,37 @@ interface Props {
     disabled?: boolean;
     loading?: boolean;
     /**
-     * AI 多彩按钮：所有 theme 下用品牌蓝→紫渐变（对齐 Semi AI 风格）。
-     * type 仅 primary / tertiary 有意义（其余 type 回退为 primary）。
+     * AI 多彩按钮：对齐 Semi，仅 type=primary/tertiary 有 colorful 语义
+     * （primary solid/light/borderless/outline，tertiary solid），其余组合无效果。
      */
     colorful?: boolean;
     htmlType?: 'button' | 'submit' | 'reset';
-    /** required for icon-only buttons */
+    /** 圆形按钮（border-radius:50%），配合 icon-only 呈正圆。 */
+    circle?: boolean;
+    /** 无障碍名；纯图标按钮必填（透传 aria-label）。 */
     ariaLabel?: string;
+    /** 图标内容（Snippet）。 */
     icon?: Snippet;
-    /** 图标相对文字位置。spec §4 L27 */
+    /** 图标相对文字位置。 */
     iconPosition?: 'left' | 'right';
     /**
-     * 设置水平方向是否去掉内边距，仅在设置了 icon 时有效（对齐 Semi）。
-     * true 等效 ['left','right']；'left'/'right' 去单侧；数组组合去两侧。
+     * 水平方向去内边距，仅在设置了 icon 时有效（对齐 Semi IconButton）。
+     * true 等效 ['left','right']；'left'/'right' 去单侧；数组组合去两侧。inline padding 实现。
      */
     noHorizontalPadding?: boolean | 'left' | 'right' | Array<'left' | 'right'>;
     /** 根元素自定义类名（透传，叠加在内置 class 之后）。 */
     class?: string;
     /** 根元素自定义内联样式（透传）。 */
     style?: string;
-    /** 内容区（文本 + 图标包裹）自定义类名（对齐 Semi contentClassName）。 */
+    /** 内容区（.cd-button-content）自定义类名（对齐 Semi contentClassName）。 */
     contentClassName?: string;
     children?: Snippet;
     onclick?: (e: MouseEvent) => void;
     onmousedown?: (e: MouseEvent) => void;
     onmouseenter?: (e: MouseEvent) => void;
     onmouseleave?: (e: MouseEvent) => void;
+    /** 其余原生属性透传到根 button（data-* 名 name value form title tabindex aria-controls aria-expanded 等）。 */
+    [key: string]: unknown;
 }
 declare const Button: import("svelte").Component<Props, {}, "">;
 type Button = ReturnType<typeof Button>;

package/dist/button/Button.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../src/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,EAEH,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IAC3E,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAiHH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.svelte.d.ts","sourceRoot":"","sources":["../../src/button/Button.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,EAEH,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,gDAAgD;IAChD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qBAAqB;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,gBAAgB;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,OAAO,CAAC,CAAC;IAC3E,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,gGAAgG;IAChG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAqIH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}