@chenzy-design/svelte 0.2.1 → 0.3.1

package/dist/button/Button.svelte

@@ -4,10 +4,12 @@
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
-
-  type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-  type ButtonTheme = 'solid' | 'borderless' | 'light' | 'outline';
-  type ButtonSize = 'small' | 'default' | 'large';
+  import {
+    getButtonGroupContext,
+    type ButtonType,
+    type ButtonTheme,
+    type ButtonSize,
+  } from './context.js';
 
   interface Props {
     type?: ButtonType;
@@ -16,33 +18,84 @@
     block?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * AI 多彩按钮：所有 theme 下用品牌蓝→紫渐变（对齐 Semi AI 风格）。
+     * type 仅 primary / tertiary 有意义（其余 type 回退为 primary）。
+     */
+    colorful?: boolean;
     htmlType?: 'button' | 'submit' | 'reset';
-    href?: string;
     /** required for icon-only buttons */
     ariaLabel?: string;
     icon?: Snippet;
     /** 图标相对文字位置。spec §4 L27 */
     iconPosition?: 'left' | 'right';
+    /**
+     * 设置水平方向是否去掉内边距，仅在设置了 icon 时有效（对齐 Semi）。
+     * true 等效 ['left','right']；'left'/'right' 去单侧；数组组合去两侧。
+     */
+    noHorizontalPadding?: boolean | 'left' | 'right' | Array<'left' | 'right'>;
+    /** 根元素自定义类名（透传，叠加在内置 class 之后）。 */
+    class?: string;
+    /** 根元素自定义内联样式（透传）。 */
+    style?: string;
+    /** 内容区（文本 + 图标包裹）自定义类名（对齐 Semi contentClassName）。 */
+    contentClassName?: string;
     children?: Snippet;
     onclick?: (e: MouseEvent) => void;
+    onmousedown?: (e: MouseEvent) => void;
+    onmouseenter?: (e: MouseEvent) => void;
+    onmouseleave?: (e: MouseEvent) => void;
   }
 
   let {
-    type = 'secondary',
-    theme = 'light',
-    size = 'default',
+    type: typeProp,
+    theme: themeProp,
+    size: sizeProp,
     block = false,
-    disabled = false,
+    disabled: disabledProp,
     loading = false,
+    colorful: colorfulProp,
     htmlType = 'button',
-    href,
     ariaLabel,
     icon,
     iconPosition = 'left',
+    noHorizontalPadding = false,
+    class: className,
+    style,
+    contentClassName,
     children,
     onclick,
+    onmousedown,
+    onmouseenter,
+    onmouseleave,
   }: Props = $props();
 
+  // ButtonGroup 上下文：仅在未显式设置对应 prop 时作为默认回退（显式 prop 始终优先）。
+  const group = getButtonGroupContext();
+  const typeRaw = $derived<ButtonType>(typeProp ?? group?.type ?? 'secondary');
+  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,
+  );
+
+  // 无 children（仅 icon 或 loading 旋转图标）时为纯图标按钮，收成方形。
+  const iconOnly = $derived(!children && (!!icon || loading));
+
+  // 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
+      : [noHorizontalPadding];
+    return { left: arr.includes('left'), right: arr.includes('right') };
+  });
+
   const cls = $derived(
     [
       'cd-button',
@@ -51,7 +104,12 @@
       `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(' '),
@@ -66,104 +124,276 @@
   }
 </script>
 
-{#if href}
-  <a
-    class={cls}
-    href={disabled ? undefined : href}
-    role="button"
-    aria-disabled={disabled || undefined}
-    aria-busy={loading || undefined}
-    aria-label={ariaLabel}
-    onclick={handleClick}
-  >
-    {#if icon}<span class="cd-button__icon">{@render icon()}</span>{/if}
-    {@render children?.()}
-  </a>
-{:else}
-  <button
-    class={cls}
-    type={htmlType}
-    {disabled}
-    aria-busy={loading || undefined}
-    aria-label={ariaLabel}
-    onclick={handleClick}
-  >
-    {#if icon}<span class="cd-button__icon">{@render icon()}</span>{/if}
+<!-- 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">
+        <path d="M12 3a9 9 0 1 0 9 9" />
+      </svg>
+    </span>
+  {:else if icon}
+    <span class="cd-button__icon">{@render icon()}</span>
+  {/if}
+{/snippet}
+
+<button
+  class={cls}
+  {style}
+  type={htmlType}
+  {disabled}
+  aria-busy={loading || undefined}
+  aria-label={ariaLabel}
+  onclick={handleClick}
+  {onmousedown}
+  {onmouseenter}
+  {onmouseleave}
+>
+  {#if contentClassName}
+    <span class={contentClassName} style="display: contents;">
+      {@render leadingIcon()}
+      {@render children?.()}
+    </span>
+  {:else}
+    {@render leadingIcon()}
     {@render children?.()}
-  </button>
-{/if}
+  {/if}
+</button>
 
 <style>
   .cd-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--cd-spacing-2);
+    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-medium);
+    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);
+      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);
-    font-size: var(--cd-font-size-1);
   }
   .cd-button--large {
     height: var(--cd-button-height-large);
-    font-size: var(--cd-font-size-3);
+    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,
-  .cd-button[aria-disabled='true'] {
+  .cd-button:disabled {
     cursor: not-allowed;
     opacity: 0.5;
   }
-  /* primary / solid */
+  /*
+    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 {
-    background: var(--cd-button-color-bg-primary);
-    color: var(--cd-button-color-text-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 {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-0);
+    /* 中性 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 {
-    background: transparent;
-    color: var(--cd-color-text-1);
+    /* 中性更弱：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 {
-    background: var(--cd-color-warning);
-    color: var(--cd-color-text-inverse);
+    --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 {
-    background: var(--cd-color-danger);
-    color: var(--cd-color-text-inverse);
+    --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);
+  }
+
+  /* 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);
+  }
+  .cd-button--borderless:active:not(:disabled):not([aria-disabled='true']) {
+    background: color-mix(in srgb, var(--btn-hue) 20%, transparent);
+  }
+
+  /* theme: outline — 透明背景 + 色相边框 + 色相文字 */
   .cd-button--outline {
     background: transparent;
-    border-color: var(--cd-color-border);
-    color: var(--cd-color-text-0);
+    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;
+  }
+  @keyframes cd-button-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
   /* iconPosition=right: 纯 CSS flex order, DOM 顺序不变 (spec §4 L27) */
   .cd-button--icon-right .cd-button__icon {
     order: 1;
@@ -172,5 +402,9 @@
     .cd-button {
       transition: none;
     }
+    /* 降级：不旋转，避免眩晕 */
+    .cd-button__icon--spin {
+      animation: none;
+    }
   }
 </style>

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

@@ -1,7 +1,5 @@
 import type { Snippet } from 'svelte';
-type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-type ButtonTheme = 'solid' | 'borderless' | 'light' | 'outline';
-type ButtonSize = 'small' | 'default' | 'large';
+import { type ButtonType, type ButtonTheme, type ButtonSize } from './context.js';
 interface Props {
     type?: ButtonType;
     theme?: ButtonTheme;
@@ -9,15 +7,33 @@ interface Props {
     block?: boolean;
     disabled?: boolean;
     loading?: boolean;
+    /**
+     * AI 多彩按钮：所有 theme 下用品牌蓝→紫渐变（对齐 Semi AI 风格）。
+     * type 仅 primary / tertiary 有意义（其余 type 回退为 primary）。
+     */
+    colorful?: boolean;
     htmlType?: 'button' | 'submit' | 'reset';
-    href?: string;
     /** required for icon-only buttons */
     ariaLabel?: string;
     icon?: Snippet;
     /** 图标相对文字位置。spec §4 L27 */
     iconPosition?: 'left' | 'right';
+    /**
+     * 设置水平方向是否去掉内边距，仅在设置了 icon 时有效（对齐 Semi）。
+     * true 等效 ['left','right']；'left'/'right' 去单侧；数组组合去两侧。
+     */
+    noHorizontalPadding?: boolean | 'left' | 'right' | Array<'left' | 'right'>;
+    /** 根元素自定义类名（透传，叠加在内置 class 之后）。 */
+    class?: string;
+    /** 根元素自定义内联样式（透传）。 */
+    style?: string;
+    /** 内容区（文本 + 图标包裹）自定义类名（对齐 Semi contentClassName）。 */
+    contentClassName?: string;
     children?: Snippet;
     onclick?: (e: MouseEvent) => void;
+    onmousedown?: (e: MouseEvent) => void;
+    onmouseenter?: (e: MouseEvent) => void;
+    onmouseleave?: (e: MouseEvent) => void;
 }
 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;AAGpC,KAAK,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9E,KAAK,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AAChE,KAAK,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEhD,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,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACnC;AAgEH,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;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"}

package/dist/button/ButtonGroup.svelte

@@ -0,0 +1,107 @@
+<!--
+  ButtonGroup — 把多个 Button 横向拼接：相邻按钮共享边框、圆角只在两端。
+  组级默认（size/type/theme/disabled）经 setContext 透传给组内 Button，
+  仅作为「未显式设置」的回退（Button 显式 prop 始终优先），不破坏 Button API。
+-->
+<script lang="ts">
+  import { setContext, type Snippet } from 'svelte';
+  import {
+    BUTTON_GROUP_CTX,
+    type ButtonGroupContext,
+    type ButtonType,
+    type ButtonTheme,
+    type ButtonSize,
+  } from './context.js';
+
+  interface Props {
+    size?: ButtonSize;
+    type?: ButtonType;
+    theme?: ButtonTheme;
+    disabled?: boolean;
+    /** 组级多彩开关，透传给组内 Button（对齐 Semi）。 */
+    colorful?: boolean;
+    /** 按钮组语义标签（aria-label）。 */
+    ariaLabel?: string;
+    /** 根元素自定义类名（透传）。 */
+    class?: string;
+    /** 根元素自定义内联样式（透传）。 */
+    style?: string;
+    children?: Snippet;
+  }
+
+  let {
+    size,
+    type,
+    theme,
+    disabled,
+    colorful,
+    ariaLabel,
+    class: className,
+    style,
+    children,
+  }: Props = $props();
+
+  // 透传组级默认给组内 Button（getButtonGroupContext 读取）。
+  // 用 getter 暴露 live 值，使组内 Button 始终读到最新的组级默认（context 本身不可重赋值）。
+  const ctx: ButtonGroupContext = {
+    get size() {
+      return size;
+    },
+    get type() {
+      return type;
+    },
+    get theme() {
+      return theme;
+    },
+    get disabled() {
+      return disabled;
+    },
+    get colorful() {
+      return colorful;
+    },
+  };
+  setContext(BUTTON_GROUP_CTX, ctx);
+</script>
+
+<div class={['cd-button-group', className].filter(Boolean).join(' ')} {style} role="group" aria-label={ariaLabel}>
+  {@render children?.()}
+</div>
+
+<style>
+  .cd-button-group {
+    display: inline-flex;
+    align-items: center;
+  }
+  /* 相邻按钮共享边框：除首个外左移 1px 叠边，圆角只保留两端。 */
+  .cd-button-group :global(.cd-button) {
+    border-radius: 0;
+    position: relative;
+  }
+  .cd-button-group :global(.cd-button:not(:first-child)) {
+    margin-inline-start: -1px;
+  }
+  .cd-button-group :global(.cd-button:first-child) {
+    border-start-start-radius: var(--cd-button-radius);
+    border-end-start-radius: var(--cd-button-radius);
+  }
+  .cd-button-group :global(.cd-button:last-child) {
+    border-start-end-radius: var(--cd-button-radius);
+    border-end-end-radius: var(--cd-button-radius);
+  }
+  /* hover/focus 的按钮浮到相邻按钮之上，保证边框/聚焦环完整可见。 */
+  .cd-button-group :global(.cd-button:hover),
+  .cd-button-group :global(.cd-button:focus-visible) {
+    z-index: 1;
+  }
+  /* 无边框主题（solid/light）下，用细分隔线区隔相邻按钮。 */
+  .cd-button-group :global(.cd-button:not(:first-child))::before {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    width: 1px;
+    background: var(--cd-button-group-divider);
+    opacity: 0.5;
+    pointer-events: none;
+  }
+</style>

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

@@ -0,0 +1,21 @@
+import { type Snippet } from 'svelte';
+import { type ButtonType, type ButtonTheme, type ButtonSize } from './context.js';
+interface Props {
+    size?: ButtonSize;
+    type?: ButtonType;
+    theme?: ButtonTheme;
+    disabled?: boolean;
+    /** 组级多彩开关，透传给组内 Button（对齐 Semi）。 */
+    colorful?: boolean;
+    /** 按钮组语义标签（aria-label）。 */
+    ariaLabel?: string;
+    /** 根元素自定义类名（透传）。 */
+    class?: string;
+    /** 根元素自定义内联样式（透传）。 */
+    style?: string;
+    children?: Snippet;
+}
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;
+//# sourceMappingURL=ButtonGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/button/ButtonGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAc,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAClD,OAAO,EAGH,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,EAChB,MAAM,cAAc,CAAC;AAGtB,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiDH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}