@chenzy-design/svelte 0.2.0 → 0.3.0

package/dist/button/SplitButtonGroup.svelte

@@ -0,0 +1,127 @@
+<!--
+  SplitButtonGroup — 分裂按钮：左侧主 Button + 右侧带下拉箭头的小 Button。
+  右侧小按钮点击触发 Dropdown（复用现有 Dropdown 的 items API / menu snippet）。
+  视觉上两者拼接、中间细分隔；主按钮 type/theme 透传给两侧。
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Button from './Button.svelte';
+  import { Dropdown } from '../dropdown/index.js';
+  import type { DropdownItem } from '../dropdown/types.js';
+  import type { Placement } from '@chenzy-design/core';
+  import type { ButtonType, ButtonTheme, ButtonSize } from './context.js';
+
+  interface Props {
+    type?: ButtonType;
+    theme?: ButtonTheme;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    /** 下拉菜单数据项（透传给 Dropdown.items）。 */
+    items?: DropdownItem[];
+    /** 下拉浮层位置（透传给 Dropdown.position）。 */
+    position?: Placement;
+    /** 下拉箭头按钮的 aria-label（无文字按钮必填）。 */
+    triggerAriaLabel?: string;
+    /** 选中下拉项回调。 */
+    onSelect?: (key: string | number) => void;
+    /** 主按钮点击回调。 */
+    onclick?: (e: MouseEvent) => void;
+    /** 分裂按钮组语义标签（root aria-label，对齐 Semi）。 */
+    ariaLabel?: string;
+    /** 根元素自定义类名（透传）。 */
+    class?: string;
+    /** 根元素自定义内联样式（透传）。 */
+    style?: string;
+    /** 左侧主按钮内容。 */
+    children?: Snippet;
+    /** 自定义下拉菜单体（替代 items）。 */
+    menu?: Snippet;
+  }
+
+  let {
+    type = 'primary',
+    theme = 'solid',
+    size = 'default',
+    disabled = false,
+    loading = false,
+    items = [],
+    position = 'bottomEnd',
+    triggerAriaLabel = '更多操作',
+    onSelect,
+    onclick,
+    ariaLabel,
+    class: className,
+    style,
+    children,
+    menu,
+  }: Props = $props();
+</script>
+
+<div class={['cd-split-button', className].filter(Boolean).join(' ')} {style} role="group" aria-label={ariaLabel}>
+  <Button {type} {theme} {size} {disabled} {loading} onclick={(e) => onclick?.(e)}>
+    {@render children?.()}
+  </Button>
+  <!-- 有自定义 menu 时把它作为 children 透传给 Dropdown；
+       否则不传 children，让 Dropdown 走内置 items 渲染分支。
+       注意：标签体内即便是空 {#if} 也会被 Svelte 收集成 children snippet，
+       从而覆盖 items 导致菜单为空，故必须按 menu 是否存在分叉两个调用。 -->
+  {#if menu}
+    <Dropdown
+      trigger="click"
+      {items}
+      {position}
+      {disabled}
+      onSelect={(key) => onSelect?.(key)}
+    >
+      {#snippet triggerContent()}
+        <Button {type} {theme} {size} {disabled} ariaLabel={triggerAriaLabel} icon={caret}></Button>
+      {/snippet}
+      {@render menu()}
+    </Dropdown>
+  {:else}
+    <Dropdown
+      trigger="click"
+      {items}
+      {position}
+      {disabled}
+      onSelect={(key) => onSelect?.(key)}
+    >
+      {#snippet triggerContent()}
+        <Button {type} {theme} {size} {disabled} ariaLabel={triggerAriaLabel} icon={caret}></Button>
+      {/snippet}
+    </Dropdown>
+  {/if}
+</div>
+
+{#snippet caret()}
+  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+{/snippet}
+
+<style>
+  .cd-split-button {
+    display: inline-flex;
+    align-items: center;
+  }
+  /* 拼接：主按钮右侧去圆角、箭头按钮左侧去圆角并叠边。 */
+  .cd-split-button :global(.cd-button:first-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .cd-split-button :global(.cd-dropdown) {
+    display: inline-flex;
+    margin-inline-start: -1px;
+  }
+  .cd-split-button :global(.cd-dropdown .cd-button) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    position: relative;
+    /* 中间细分隔线 */
+    box-shadow: inset 1px 0 0 0 var(--cd-button-group-divider);
+  }
+  .cd-split-button :global(.cd-dropdown__trigger) {
+    display: inline-flex;
+  }
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import type { DropdownItem } from '../dropdown/types.js';
+import type { Placement } from '@chenzy-design/core';
+import type { ButtonType, ButtonTheme, ButtonSize } from './context.js';
+interface Props {
+    type?: ButtonType;
+    theme?: ButtonTheme;
+    size?: ButtonSize;
+    disabled?: boolean;
+    loading?: boolean;
+    /** 下拉菜单数据项（透传给 Dropdown.items）。 */
+    items?: DropdownItem[];
+    /** 下拉浮层位置（透传给 Dropdown.position）。 */
+    position?: Placement;
+    /** 下拉箭头按钮的 aria-label（无文字按钮必填）。 */
+    triggerAriaLabel?: string;
+    /** 选中下拉项回调。 */
+    onSelect?: (key: string | number) => void;
+    /** 主按钮点击回调。 */
+    onclick?: (e: MouseEvent) => void;
+    /** 分裂按钮组语义标签（root aria-label，对齐 Semi）。 */
+    ariaLabel?: string;
+    /** 根元素自定义类名（透传）。 */
+    class?: string;
+    /** 根元素自定义内联样式（透传）。 */
+    style?: string;
+    /** 左侧主按钮内容。 */
+    children?: Snippet;
+    /** 自定义下拉菜单体（替代 items）。 */
+    menu?: Snippet;
+}
+declare const SplitButtonGroup: import("svelte").Component<Props, {}, "">;
+type SplitButtonGroup = ReturnType<typeof SplitButtonGroup>;
+export default SplitButtonGroup;
+//# sourceMappingURL=SplitButtonGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/button/SplitButtonGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AACrD,OAAO,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAGtE,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,mCAAmC;IACnC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,eAAe;IACf,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe;IACf,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AA6DH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/button/context.d.ts

@@ -0,0 +1,14 @@
+export type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
+export type ButtonTheme = 'solid' | 'borderless' | 'light' | 'outline';
+export type ButtonSize = 'small' | 'default' | 'large';
+export interface ButtonGroupContext {
+    type?: ButtonType | undefined;
+    theme?: ButtonTheme | undefined;
+    size?: ButtonSize | undefined;
+    disabled?: boolean | undefined;
+    colorful?: boolean | undefined;
+}
+export declare const BUTTON_GROUP_CTX: unique symbol;
+/** Button 内部读取 ButtonGroup 上下文（无则 undefined）。 */
+export declare function getButtonGroupContext(): ButtonGroupContext | undefined;
+//# sourceMappingURL=context.d.ts.map

package/dist/button/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/button/context.ts"],"names":[],"mappings":"AAQA,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,SAAS,CAAC;AACvE,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,KAAK,CAAC,EAAE,WAAW,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,eAA4B,CAAC;AAE1D,iDAAiD;AACjD,wBAAgB,qBAAqB,IAAI,kBAAkB,GAAG,SAAS,CAItE"}

package/dist/button/context.js

@@ -0,0 +1,14 @@
+/**
+ * ButtonGroup → Button 上下文。
+ * ButtonGroup 通过 setContext 提供组级默认值（size/type/theme/disabled）；
+ * Button 通过 getContext 读取，仅在「未显式设置该 prop」时作为默认回退，
+ * 不破坏 Button 现有 API（显式 prop 始终优先）。
+ */
+import { getContext, hasContext } from 'svelte';
+export const BUTTON_GROUP_CTX = Symbol('cd-button-group');
+/** Button 内部读取 ButtonGroup 上下文（无则 undefined）。 */
+export function getButtonGroupContext() {
+    return hasContext(BUTTON_GROUP_CTX)
+        ? getContext(BUTTON_GROUP_CTX)
+        : undefined;
+}

package/dist/button/index.d.ts

@@ -1,3 +1,6 @@
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as SplitButtonGroup } from './SplitButtonGroup.svelte';
 export { meta as buttonMeta } from './meta.js';
+export { BUTTON_GROUP_CTX, getButtonGroupContext, type ButtonGroupContext, type ButtonType, type ButtonTheme, type ButtonSize, } from './context.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,IAAI,IAAI,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EACL,gBAAgB,EAChB,qBAAqB,EACrB,KAAK,kBAAkB,EACvB,KAAK,UAAU,EACf,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,cAAc,CAAC"}

package/dist/button/index.js

@@ -1,2 +1,5 @@
 export { default as Button } from './Button.svelte';
+export { default as ButtonGroup } from './ButtonGroup.svelte';
+export { default as SplitButtonGroup } from './SplitButtonGroup.svelte';
 export { meta as buttonMeta } from './meta.js';
+export { BUTTON_GROUP_CTX, getButtonGroupContext, } from './context.js';

package/dist/button/meta.d.ts

@@ -10,46 +10,94 @@ export declare const meta: {
         readonly name: "type";
         readonly type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'";
         readonly default: "secondary";
+        readonly desc: "语义类型";
     }, {
         readonly name: "theme";
         readonly type: "'solid'|'borderless'|'light'|'outline'";
         readonly default: "light";
+        readonly desc: "视觉变体：有背景/无背景/浅背景/边框";
     }, {
         readonly name: "size";
         readonly type: "'small'|'default'|'large'";
         readonly default: "default";
+        readonly desc: "尺寸";
     }, {
         readonly name: "block";
         readonly type: "boolean";
         readonly default: "false";
+        readonly desc: "撑满容器宽度";
     }, {
         readonly name: "disabled";
         readonly type: "boolean";
         readonly default: "false";
+        readonly desc: "禁用状态";
     }, {
         readonly name: "loading";
         readonly type: "boolean";
         readonly default: "false";
+        readonly desc: "加载态（带 Spin，禁用点击）";
+    }, {
+        readonly name: "colorful";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "AI 多彩按钮：所有 theme 下品牌蓝→紫渐变；type 仅 primary/tertiary 有意义";
+    }, {
+        readonly name: "htmlType";
+        readonly type: "'button'|'submit'|'reset'";
+        readonly default: "button";
+        readonly desc: "原生 button 的 type 值";
+    }, {
+        readonly name: "icon";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "图标插槽；纯图标按钮需提供 ariaLabel";
     }, {
         readonly name: "iconPosition";
         readonly type: "'left'|'right'";
         readonly default: "left";
         readonly desc: "图标相对文字位置";
     }, {
-        readonly name: "href";
+        readonly name: "noHorizontalPadding";
+        readonly type: "boolean|'left'|'right'|('left'|'right')[]";
+        readonly default: "false";
+        readonly desc: "仅设置 icon 时去单/双侧水平内距";
+    }, {
+        readonly name: "ariaLabel";
         readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "提供则渲染为链接";
+        readonly desc: "无障碍名；纯图标按钮必填";
     }, {
-        readonly name: "ariaLabel";
+        readonly name: "class";
         readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "仅图标按钮必填";
+        readonly desc: "根元素自定义类名";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "根元素自定义内联样式";
+    }, {
+        readonly name: "contentClassName";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "内容区自定义类名";
     }];
     readonly events: readonly [{
         readonly name: "onclick";
         readonly payload: "MouseEvent";
         readonly desc: "disabled/loading 时不触发";
+    }, {
+        readonly name: "onmousedown";
+        readonly payload: "MouseEvent";
+        readonly desc: "鼠标按下";
+    }, {
+        readonly name: "onmouseenter";
+        readonly payload: "MouseEvent";
+        readonly desc: "鼠标移入";
+    }, {
+        readonly name: "onmouseleave";
+        readonly payload: "MouseEvent";
+        readonly desc: "鼠标移出";
     }];
     readonly slots: readonly [{
         readonly name: "children";
@@ -58,6 +106,127 @@ export declare const meta: {
         readonly name: "icon";
         readonly desc: "图标";
     }];
+    readonly subComponents: readonly [{
+        readonly name: "ButtonGroup";
+        readonly usage: "<ButtonGroup> 包裹多个 <Button>，组级默认经 context 透传";
+        readonly desc: "横向拼接多个 Button；组级 size/type/theme/disabled/colorful 经 context 透传，组内 Button 显式 prop 始终优先。";
+        readonly props: readonly [{
+            readonly name: "type";
+            readonly type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'";
+            readonly default: "undefined";
+            readonly desc: "组级语义类型";
+        }, {
+            readonly name: "theme";
+            readonly type: "'solid'|'borderless'|'light'|'outline'";
+            readonly default: "undefined";
+            readonly desc: "组级视觉变体";
+        }, {
+            readonly name: "size";
+            readonly type: "'small'|'default'|'large'";
+            readonly default: "undefined";
+            readonly desc: "组级尺寸";
+        }, {
+            readonly name: "disabled";
+            readonly type: "boolean";
+            readonly default: "undefined";
+            readonly desc: "组级禁用，整组一并禁用";
+        }, {
+            readonly name: "colorful";
+            readonly type: "boolean";
+            readonly default: "undefined";
+            readonly desc: "组级多彩，透传给组内 Button";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "按钮组语义标签（aria-label）";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }];
+    }, {
+        readonly name: "SplitButtonGroup";
+        readonly usage: "<SplitButtonGroup items={...}>，左侧主操作 + 右侧箭头触发下拉";
+        readonly desc: "分裂按钮：左侧主 Button + 右侧箭头按钮，点击箭头弹出 Dropdown（复用 items API 或 menu snippet）。";
+        readonly props: readonly [{
+            readonly name: "type";
+            readonly type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'";
+            readonly default: "primary";
+            readonly desc: "两侧按钮语义类型";
+        }, {
+            readonly name: "theme";
+            readonly type: "'solid'|'borderless'|'light'|'outline'";
+            readonly default: "solid";
+            readonly desc: "两侧按钮视觉变体";
+        }, {
+            readonly name: "size";
+            readonly type: "'small'|'default'|'large'";
+            readonly default: "default";
+            readonly desc: "两侧按钮尺寸";
+        }, {
+            readonly name: "disabled";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "禁用整个分裂按钮";
+        }, {
+            readonly name: "loading";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "主按钮加载态";
+        }, {
+            readonly name: "items";
+            readonly type: "DropdownItem[]";
+            readonly default: "[]";
+            readonly desc: "下拉菜单数据项（透传给 Dropdown.items）";
+        }, {
+            readonly name: "position";
+            readonly type: "Placement";
+            readonly default: "bottomEnd";
+            readonly desc: "下拉浮层位置";
+        }, {
+            readonly name: "triggerAriaLabel";
+            readonly type: "string";
+            readonly default: "更多操作";
+            readonly desc: "下拉箭头按钮的 aria-label";
+        }, {
+            readonly name: "onSelect";
+            readonly type: "(key: string|number) => void";
+            readonly default: "undefined";
+            readonly desc: "选中下拉项回调";
+        }, {
+            readonly name: "onclick";
+            readonly type: "(e: MouseEvent) => void";
+            readonly default: "undefined";
+            readonly desc: "主按钮点击回调";
+        }, {
+            readonly name: "menu";
+            readonly type: "Snippet";
+            readonly default: "undefined";
+            readonly desc: "自定义下拉菜单体（替代 items）";
+        }, {
+            readonly name: "ariaLabel";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "分裂按钮组语义标签（root aria-label）";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "根元素自定义内联样式";
+        }];
+    }];
     readonly a11y: {
         readonly role: "button";
         readonly keyboard: readonly ["Enter", "Space"];

package/dist/button/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/button/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuBP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/button/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwEP,CAAC"}

package/dist/button/meta.js

@@ -7,21 +7,70 @@ export const meta = {
     category: 'basic',
     description: '触发即时操作的按钮，最基础的交互原子。',
     props: [
-        { name: 'type', type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'", default: 'secondary' },
-        { name: 'theme', type: "'solid'|'borderless'|'light'|'outline'", default: 'light' },
-        { name: 'size', type: "'small'|'default'|'large'", default: 'default' },
-        { name: 'block', type: 'boolean', default: 'false' },
-        { name: 'disabled', type: 'boolean', default: 'false' },
-        { name: 'loading', type: 'boolean', default: 'false' },
+        { name: 'type', type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'", default: 'secondary', desc: '语义类型' },
+        { name: 'theme', type: "'solid'|'borderless'|'light'|'outline'", default: 'light', desc: '视觉变体：有背景/无背景/浅背景/边框' },
+        { name: 'size', type: "'small'|'default'|'large'", default: 'default', desc: '尺寸' },
+        { name: 'block', type: 'boolean', default: 'false', desc: '撑满容器宽度' },
+        { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用状态' },
+        { name: 'loading', type: 'boolean', default: 'false', desc: '加载态（带 Spin，禁用点击）' },
+        { name: 'colorful', type: 'boolean', default: 'false', desc: 'AI 多彩按钮：所有 theme 下品牌蓝→紫渐变；type 仅 primary/tertiary 有意义' },
+        { name: 'htmlType', type: "'button'|'submit'|'reset'", default: 'button', desc: '原生 button 的 type 值' },
+        { name: 'icon', type: 'Snippet', default: 'undefined', desc: '图标插槽；纯图标按钮需提供 ariaLabel' },
         { name: 'iconPosition', type: "'left'|'right'", default: 'left', desc: '图标相对文字位置' },
-        { name: 'href', type: 'string', default: 'undefined', desc: '提供则渲染为链接' },
-        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '仅图标按钮必填' },
+        { name: 'noHorizontalPadding', type: "boolean|'left'|'right'|('left'|'right')[]", default: 'false', desc: '仅设置 icon 时去单/双侧水平内距' },
+        { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '无障碍名；纯图标按钮必填' },
+        { name: 'class', type: 'string', default: 'undefined', desc: '根元素自定义类名' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+        { name: 'contentClassName', type: 'string', default: 'undefined', desc: '内容区自定义类名' },
+    ],
+    events: [
+        { name: 'onclick', payload: 'MouseEvent', desc: 'disabled/loading 时不触发' },
+        { name: 'onmousedown', payload: 'MouseEvent', desc: '鼠标按下' },
+        { name: 'onmouseenter', payload: 'MouseEvent', desc: '鼠标移入' },
+        { name: 'onmouseleave', payload: 'MouseEvent', desc: '鼠标移出' },
     ],
-    events: [{ name: 'onclick', payload: 'MouseEvent', desc: 'disabled/loading 时不触发' }],
     slots: [
         { name: 'children', desc: '按钮文本' },
         { name: 'icon', desc: '图标' },
     ],
+    subComponents: [
+        {
+            name: 'ButtonGroup',
+            usage: '<ButtonGroup> 包裹多个 <Button>，组级默认经 context 透传',
+            desc: '横向拼接多个 Button；组级 size/type/theme/disabled/colorful 经 context 透传，组内 Button 显式 prop 始终优先。',
+            props: [
+                { name: 'type', type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'", default: 'undefined', desc: '组级语义类型' },
+                { name: 'theme', type: "'solid'|'borderless'|'light'|'outline'", default: 'undefined', desc: '组级视觉变体' },
+                { name: 'size', type: "'small'|'default'|'large'", default: 'undefined', desc: '组级尺寸' },
+                { name: 'disabled', type: 'boolean', default: 'undefined', desc: '组级禁用，整组一并禁用' },
+                { name: 'colorful', type: 'boolean', default: 'undefined', desc: '组级多彩，透传给组内 Button' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '按钮组语义标签（aria-label）' },
+                { name: 'class', type: 'string', default: 'undefined', desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+            ],
+        },
+        {
+            name: 'SplitButtonGroup',
+            usage: '<SplitButtonGroup items={...}>，左侧主操作 + 右侧箭头触发下拉',
+            desc: '分裂按钮：左侧主 Button + 右侧箭头按钮，点击箭头弹出 Dropdown（复用 items API 或 menu snippet）。',
+            props: [
+                { name: 'type', type: "'primary'|'secondary'|'tertiary'|'warning'|'danger'", default: 'primary', desc: '两侧按钮语义类型' },
+                { name: 'theme', type: "'solid'|'borderless'|'light'|'outline'", default: 'solid', desc: '两侧按钮视觉变体' },
+                { name: 'size', type: "'small'|'default'|'large'", default: 'default', desc: '两侧按钮尺寸' },
+                { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用整个分裂按钮' },
+                { name: 'loading', type: 'boolean', default: 'false', desc: '主按钮加载态' },
+                { name: 'items', type: 'DropdownItem[]', default: '[]', desc: '下拉菜单数据项（透传给 Dropdown.items）' },
+                { name: 'position', type: 'Placement', default: 'bottomEnd', desc: '下拉浮层位置' },
+                { name: 'triggerAriaLabel', type: 'string', default: '更多操作', desc: '下拉箭头按钮的 aria-label' },
+                { name: 'onSelect', type: '(key: string|number) => void', default: 'undefined', desc: '选中下拉项回调' },
+                { name: 'onclick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '主按钮点击回调' },
+                { name: 'menu', type: 'Snippet', default: 'undefined', desc: '自定义下拉菜单体（替代 items）' },
+                { name: 'ariaLabel', type: 'string', default: 'undefined', desc: '分裂按钮组语义标签（root aria-label）' },
+                { name: 'class', type: 'string', default: 'undefined', desc: '根元素自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '根元素自定义内联样式' },
+            ],
+        },
+    ],
     a11y: { role: 'button', keyboard: ['Enter', 'Space'] },
     tokens: ['--cd-button-*'],
     examples: [{ title: '基础', code: '<Button type="primary">确定</Button>' }],

package/dist/calendar/Calendar.svelte

@@ -991,7 +991,7 @@
   .cd-calendar {
     display: flex;
     flex-direction: column;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     color: var(--cd-calendar-text);
     background: var(--cd-calendar-bg);
     border: 1px solid var(--cd-calendar-border);
@@ -1002,8 +1002,8 @@
   .cd-calendar__toolbar {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-spacing-2) var(--cd-spacing-3);
+    gap: var(--cd-spacing-tight);
+    padding: var(--cd-spacing-tight) var(--cd-spacing-base-tight);
     background: var(--cd-calendar-header-bg);
     border-bottom: 1px solid var(--cd-calendar-border);
     border-start-start-radius: var(--cd-calendar-radius);
@@ -1020,7 +1020,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding: var(--cd-spacing-1) var(--cd-spacing-2);
+    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
     color: inherit;
     background: transparent;
     border: 1px solid var(--cd-calendar-border);
@@ -1050,7 +1050,7 @@
   }
 
   .cd-calendar__weekday {
-    padding: var(--cd-spacing-1);
+    padding: var(--cd-spacing-extra-tight);
     color: var(--cd-calendar-text-secondary);
     text-align: center;
     font-weight: 500;
@@ -1063,9 +1063,9 @@
   .cd-calendar__cell {
     display: flex;
     flex-direction: column;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     min-block-size: var(--cd-calendar-cell-min-h);
-    padding: var(--cd-spacing-1);
+    padding: var(--cd-spacing-extra-tight);
     border-inline-end: 1px solid var(--cd-calendar-border);
     border-block-end: 1px solid var(--cd-calendar-border);
     cursor: pointer;
@@ -1146,10 +1146,10 @@
   .cd-calendar__event {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-1);
+    gap: var(--cd-spacing-extra-tight);
     min-inline-size: 0;
     padding-block: 1px;
-    padding-inline: var(--cd-spacing-1);
+    padding-inline: var(--cd-spacing-extra-tight);
     color: var(--cd-calendar-text);
     background: var(--cd-calendar-cell-bg-hover);
     border-radius: var(--cd-calendar-radius);
@@ -1213,8 +1213,8 @@
   .cd-calendar__allday {
     display: flex;
     align-items: flex-start;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-spacing-1) var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
+    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
     border-block-end: 1px solid var(--cd-calendar-border);
     background: var(--cd-calendar-header-bg);
   }
@@ -1239,7 +1239,7 @@
   .cd-calendar__hour {
     display: flex;
     align-items: stretch;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     min-block-size: var(--cd-calendar-hour-min-h, 40px);
     border-block-end: 1px solid var(--cd-calendar-border);
   }
@@ -1248,7 +1248,7 @@
   }
   .cd-calendar__hour-label {
     flex: 0 0 var(--cd-calendar-hour-label-w, 56px);
-    padding: var(--cd-spacing-1) var(--cd-spacing-2);
+    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-tight);
     color: var(--cd-calendar-text-secondary);
     text-align: end;
     font-variant-numeric: tabular-nums;
@@ -1260,7 +1260,7 @@
     gap: 2px;
     flex: 1 1 auto;
     min-inline-size: 0;
-    padding: var(--cd-spacing-1);
+    padding: var(--cd-spacing-extra-tight);
   }
   .cd-calendar__event--timed {
     padding-block: 2px;
@@ -1291,8 +1291,8 @@
   .cd-calendar-popup__trigger {
     display: inline-flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
-    padding: var(--cd-spacing-1) var(--cd-spacing-3);
+    gap: var(--cd-spacing-tight);
+    padding: var(--cd-spacing-extra-tight) var(--cd-spacing-base-tight);
     color: var(--cd-calendar-text);
     background: var(--cd-calendar-bg);
     border: 1px solid var(--cd-calendar-border);