@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/float-button/FloatButton.svelte

@@ -0,0 +1,161 @@
+<!--
+  FloatButton — 悬浮固定在视口的可操作按钮。严格对齐 Semi Design：
+  纯 div + onClick（非 button/a），href 靠 JS 跳转（_blank → window.open，否则 location.href）。
+  外层 div 带 size + shape class；body 带 shape + size (+ colorful? + disabled?) class。
+  有 badge 时 body 外层包裹 Badge（复用本库 Badge）。
+-->
+<script lang="ts">
+  import Badge from '../badge/Badge.svelte';
+  import type { FloatButtonProps } from './types.js';
+
+  let {
+    icon,
+    badge,
+    shape = 'round',
+    size = 'default',
+    colorful = false,
+    disabled = false,
+    href,
+    target,
+    onClick,
+    class: className = '',
+    style,
+  }: FloatButtonProps = $props();
+
+  const rootClass = $derived(
+    ['cd-floatButton', `cd-floatButton-${size}`, `cd-floatButton-${shape}`, className]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const bodyClass = $derived(
+    [
+      'cd-floatButton-body',
+      `cd-floatButton-${shape}`,
+      `cd-floatButton-${size}`,
+      colorful ? 'cd-floatButton-colorful' : '',
+      disabled ? 'cd-floatButton-disabled' : '',
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  function handleClick(e: MouseEvent) {
+    if (disabled) return;
+    if (href) {
+      if (target === '_blank') window.open(href, '_blank');
+      else window.location.href = href;
+    }
+    onClick?.(e);
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={rootClass} {style} onclick={handleClick}>
+  {#if badge}
+    <Badge {...badge}>
+      <div class={bodyClass}>{@render icon?.()}</div>
+    </Badge>
+  {:else}
+    <div class={bodyClass}>{@render icon?.()}</div>
+  {/if}
+</div>
+
+<style>
+  .cd-floatButton {
+    position: fixed;
+    bottom: var(--cd-floatbutton-bottom);
+    right: var(--cd-floatbutton-right);
+    z-index: var(--cd-floatbutton-z);
+    cursor: pointer;
+  }
+
+  .cd-floatButton-body {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--cd-floatbutton-bg);
+    box-shadow: var(--cd-floatbutton-shadow);
+    color: var(--cd-floatbutton-color);
+  }
+  .cd-floatButton-body:hover {
+    background-color: var(--cd-floatbutton-bg-hover);
+  }
+  .cd-floatButton-body:active {
+    background-color: var(--cd-floatbutton-bg-active);
+  }
+
+  /* 形状（作用于 body：Semi round/square 圆角在 body 上生效） */
+  .cd-floatButton-body.cd-floatButton-round {
+    border-radius: var(--cd-floatbutton-radius-round);
+  }
+  .cd-floatButton-body.cd-floatButton-square {
+    border-radius: var(--cd-floatbutton-radius-square);
+  }
+
+  /* 尺寸（作用于 body） */
+  .cd-floatButton-body.cd-floatButton-small {
+    width: var(--cd-floatbutton-size-small);
+    height: var(--cd-floatbutton-size-small);
+  }
+  .cd-floatButton-body.cd-floatButton-default {
+    width: var(--cd-floatbutton-size-default);
+    height: var(--cd-floatbutton-size-default);
+  }
+  .cd-floatButton-body.cd-floatButton-large {
+    width: var(--cd-floatbutton-size-large);
+    height: var(--cd-floatbutton-size-large);
+  }
+
+  /* colorful（AI 多彩渐变） */
+  .cd-floatButton-body.cd-floatButton-colorful {
+    background: var(--cd-floatbutton-colorful-bg);
+    color: var(--cd-floatbutton-colorful-text);
+  }
+  .cd-floatButton-body.cd-floatButton-colorful:hover {
+    background: var(--cd-floatbutton-colorful-bg-hover);
+  }
+  .cd-floatButton-body.cd-floatButton-colorful:active {
+    background: var(--cd-floatbutton-colorful-bg-active);
+  }
+
+  /* 禁用（Semi：disabled-bg + disabled-text，非 opacity） */
+  .cd-floatButton-body.cd-floatButton-disabled {
+    background: var(--cd-floatbutton-disabled-bg);
+    color: var(--cd-floatbutton-disabled-text);
+    cursor: not-allowed;
+  }
+  .cd-floatButton-body.cd-floatButton-disabled:hover {
+    background-color: var(--cd-floatbutton-disabled-bg);
+  }
+
+  .cd-floatButton-body :global(svg) {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  /* 徽章定位（对齐 Semi 几何公式：偏移 = 0.29 × R）。
+     Semi 直接选 .semi-badge-dot / .semi-badge-count；本库 Badge 用 cd-badge-* 类。
+     round：R = 0.5 × 边长；square：R = 圆角半径。 */
+  .cd-floatButton-round.cd-floatButton-small :global(.cd-badge-dot),
+  .cd-floatButton-round.cd-floatButton-small :global(.cd-badge-count) {
+    top: calc(0.29 * 0.5 * var(--cd-floatbutton-size-small));
+    inset-inline-end: calc(0.29 * 0.5 * var(--cd-floatbutton-size-small));
+  }
+  .cd-floatButton-round.cd-floatButton-default :global(.cd-badge-dot),
+  .cd-floatButton-round.cd-floatButton-default :global(.cd-badge-count) {
+    top: calc(0.29 * 0.5 * var(--cd-floatbutton-size-default));
+    inset-inline-end: calc(0.29 * 0.5 * var(--cd-floatbutton-size-default));
+  }
+  .cd-floatButton-round.cd-floatButton-large :global(.cd-badge-dot),
+  .cd-floatButton-round.cd-floatButton-large :global(.cd-badge-count) {
+    top: calc(0.29 * 0.5 * var(--cd-floatbutton-size-large));
+    inset-inline-end: calc(0.29 * 0.5 * var(--cd-floatbutton-size-large));
+  }
+  .cd-floatButton-square :global(.cd-badge-dot),
+  .cd-floatButton-square :global(.cd-badge-count) {
+    top: calc(0.29 * var(--cd-floatbutton-radius-square));
+    inset-inline-end: calc(0.29 * var(--cd-floatbutton-radius-square));
+  }
+</style>

package/dist/float-button/FloatButton.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { FloatButtonProps } from './types.js';
+declare const FloatButton: import("svelte").Component<FloatButtonProps, {}, "">;
+type FloatButton = ReturnType<typeof FloatButton>;
+export default FloatButton;
+//# sourceMappingURL=FloatButton.svelte.d.ts.map

package/dist/float-button/FloatButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatButton.svelte.d.ts","sourceRoot":"","sources":["../../src/float-button/FloatButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAiEnD,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/float-button/FloatButtonGroup.svelte

@@ -0,0 +1,90 @@
+<!--
+  FloatButtonGroup — 胶囊工具条（严格对齐 Semi）：一个背景圆角条内 inline-flex 横排多个
+  「图标 + 文字」项，事件委托直接读 e.target.dataset.value 回传（不向上查找，对齐 Semi）。
+  纯 div（非 button），item.badge 时 item 外层包裹 Badge。
+-->
+<script lang="ts">
+  import Badge from '../badge/Badge.svelte';
+  import type { FloatButtonGroupProps } from './types.js';
+
+  let {
+    items = [],
+    disabled = false,
+    onClick,
+    class: className = '',
+    style,
+  }: FloatButtonGroupProps = $props();
+
+  const rootClass = $derived(
+    ['cd-floatButtonGroup', disabled ? 'cd-floatButtonGroup-disabled' : '', className]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  // 点击委托：对齐 Semi，直接读 e.target.dataset.value（不向上冒泡查找）。
+  function handleClick(e: MouseEvent) {
+    if (disabled) return;
+    const value = (e.target as HTMLElement).dataset?.value;
+    if (value != null) onClick?.(value, e);
+  }
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={rootClass} {style} onclick={handleClick}>
+  {#each items as item (item.value)}
+    {#if item.badge}
+      <Badge {...item.badge}>
+        <div class="cd-floatButtonGroup-item" data-value={item.value}>
+          {@render item.icon?.()}
+          {#if typeof item.content === 'string'}{item.content}{:else if item.content}{@render item.content()}{/if}
+        </div>
+      </Badge>
+    {:else}
+      <div class="cd-floatButtonGroup-item" data-value={item.value}>
+        {@render item.icon?.()}
+        {#if typeof item.content === 'string'}{item.content}{:else if item.content}{@render item.content()}{/if}
+      </div>
+    {/if}
+  {/each}
+</div>
+
+<style>
+  .cd-floatButtonGroup {
+    position: fixed;
+    border-radius: var(--cd-floatbutton-group-radius);
+    bottom: var(--cd-floatbutton-group-bottom);
+    right: var(--cd-floatbutton-group-right);
+    z-index: var(--cd-floatbutton-z);
+    background: var(--cd-floatbutton-group-bg);
+    box-shadow: var(--cd-floatbutton-group-shadow);
+    display: inline-flex;
+    padding: var(--cd-floatbutton-group-padding);
+    gap: var(--cd-floatbutton-group-gap);
+  }
+
+  .cd-floatButtonGroup-item {
+    cursor: pointer;
+    display: flex;
+    padding: var(--cd-floatbutton-group-item-padding-y) var(--cd-floatbutton-group-item-padding-x);
+    align-items: center;
+    column-gap: var(--cd-floatbutton-group-item-gap);
+    border-radius: var(--cd-floatbutton-group-item-radius);
+    color: var(--cd-floatbutton-group-item-color);
+    font-size: var(--cd-floatbutton-group-item-font-size);
+    font-style: normal;
+    font-weight: var(--cd-floatbutton-group-item-font-weight);
+    line-height: var(--cd-floatbutton-group-item-line-height);
+  }
+  .cd-floatButtonGroup-item:hover {
+    background: var(--cd-floatbutton-group-item-bg-hover);
+  }
+  .cd-floatButtonGroup-item:active {
+    background: var(--cd-floatbutton-group-item-bg-active);
+  }
+
+  .cd-floatButtonGroup-item :global(svg) {
+    width: 1.25em;
+    height: 1.25em;
+  }
+</style>

package/dist/float-button/FloatButtonGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { FloatButtonGroupProps } from './types.js';
+declare const FloatButtonGroup: import("svelte").Component<FloatButtonGroupProps, {}, "">;
+type FloatButtonGroup = ReturnType<typeof FloatButtonGroup>;
+export default FloatButtonGroup;
+//# sourceMappingURL=FloatButtonGroup.svelte.d.ts.map

package/dist/float-button/FloatButtonGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatButtonGroup.svelte.d.ts","sourceRoot":"","sources":["../../src/float-button/FloatButtonGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAqDxD,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/float-button/index.d.ts

@@ -0,0 +1,5 @@
+export { default as FloatButton } from './FloatButton.svelte';
+export { default as FloatButtonGroup } from './FloatButtonGroup.svelte';
+export { meta as floatButtonMeta } from './meta.js';
+export type { FloatButtonProps, FloatButtonGroupProps, FloatButtonGroupItem, FloatButtonBadgeProps, FloatButtonShape, FloatButtonSize, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/float-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,IAAI,IAAI,eAAe,EAAE,MAAM,WAAW,CAAC;AACpD,YAAY,EACV,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,eAAe,GAChB,MAAM,YAAY,CAAC"}

package/dist/float-button/index.js

@@ -0,0 +1,3 @@
+export { default as FloatButton } from './FloatButton.svelte';
+export { default as FloatButtonGroup } from './FloatButtonGroup.svelte';
+export { meta as floatButtonMeta } from './meta.js';

package/dist/float-button/meta.d.ts

@@ -0,0 +1,136 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * FloatButton — 严格对齐 Semi Design。
+ */
+export declare const meta: {
+    readonly name: "FloatButton";
+    readonly category: "basic";
+    readonly stage: "M1";
+    readonly semiEquivalent: "FloatButton";
+    readonly description: "悬浮固定在视口的可操作按钮，用于承载全局快捷入口（AI 编辑、搜索、帮助等）。严格对齐 Semi：纯 div + onClick（非 button/a），href 靠 JS 跳转（target=_blank 用 window.open，否则 location.href），disabled 时不触发。可选包裹 Badge。形状 round(默认)/square、尺寸 small/default/large、colorful AI 渐变。默认 position:fixed 于右下角（bottom/right 24px），经 style 覆盖定位。FloatButtonGroup 将多项平铺成胶囊工具条，点击委托直接读 e.target.dataset.value 回传 value。";
+    readonly exports: readonly ["FloatButton", "FloatButtonGroup"];
+    readonly props: readonly [{
+        readonly name: "icon";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "图标内容（Snippet）";
+    }, {
+        readonly name: "badge";
+        readonly type: "BadgeProps";
+        readonly default: "undefined";
+        readonly desc: "徽章参数（复用本库 Badge：dot/count/overflowCount/type/theme），有值时外层包裹 Badge";
+    }, {
+        readonly name: "shape";
+        readonly type: "'round'|'square'";
+        readonly default: "'round'";
+        readonly desc: "形状：round=正圆（默认）、square=方形（对齐 Semi）";
+    }, {
+        readonly name: "size";
+        readonly type: "'small'|'default'|'large'";
+        readonly default: "'default'";
+        readonly desc: "尺寸三档（24/32/40px）";
+    }, {
+        readonly name: "colorful";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "AI 风格多彩渐变外观";
+    }, {
+        readonly name: "disabled";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "禁用（不触发跳转/onClick）";
+    }, {
+        readonly name: "href";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "有值时点击经 JS 跳转（对齐 Semi：_blank 用 window.open，否则 location.href）";
+    }, {
+        readonly name: "target";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "链接打开目标；'_blank' 时用 window.open 新开";
+    }, {
+        readonly name: "onClick";
+        readonly type: "(e: MouseEvent) => void";
+        readonly default: "undefined";
+        readonly desc: "点击回调；disabled 时不触发";
+    }, {
+        readonly name: "class";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "根节点自定义类名";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "定位方式：设 bottom/right 等覆盖默认 fixed 位置";
+    }];
+    readonly events: readonly [{
+        readonly name: "onClick";
+        readonly payload: "MouseEvent";
+        readonly desc: "点击；disabled 时不触发";
+    }];
+    readonly slots: readonly [{
+        readonly name: "icon";
+        readonly desc: "图标内容（也可用 icon prop）";
+    }];
+    readonly subComponents: readonly [{
+        readonly name: "FloatButtonGroup";
+        readonly usage: "<FloatButtonGroup items={...} onClick={(value, e) => {}} />";
+        readonly desc: "胶囊工具条（严格对齐 Semi）：一个背景圆角条内 inline-flex 横排多个「图标+文字」项（纯 div），点击委托直接读 e.target.dataset.value 回传 value。";
+        readonly props: readonly [{
+            readonly name: "items";
+            readonly type: "FloatButtonGroupItem[]";
+            readonly default: "[]";
+            readonly desc: "子项数组；每项 = FloatButtonProps + { value: string; content?: Snippet|string }";
+        }, {
+            readonly name: "disabled";
+            readonly type: "boolean";
+            readonly default: "false";
+            readonly desc: "组级禁用（不触发点击）";
+        }, {
+            readonly name: "onClick";
+            readonly type: "(value: string, e: MouseEvent) => void";
+            readonly default: "undefined";
+            readonly desc: "组级点击委托，回传被点项 value（直接读 e.target.dataset.value）";
+        }, {
+            readonly name: "class";
+            readonly type: "string";
+            readonly default: "''";
+            readonly desc: "根节点自定义类名";
+        }, {
+            readonly name: "style";
+            readonly type: "string";
+            readonly default: "undefined";
+            readonly desc: "定位方式，同 FloatButton";
+        }];
+    }];
+    readonly a11y: {
+        readonly role: "none";
+        readonly keyboard: readonly [];
+        readonly hasRole: false;
+        readonly focusable: false;
+        readonly note: "严格对齐 Semi：FloatButton 与 FloatButtonGroup 均为纯 div + onClick（非 button/a），无内置 ARIA 语义、无键盘可达、无 focus 环。href 经 JS 跳转而非原生链接。如需可访问性由消费方在业务层补充。";
+    };
+    readonly i18n: readonly [];
+    readonly tokens: readonly ["--cd-floatbutton-size-small", "--cd-floatbutton-size-default", "--cd-floatbutton-size-large", "--cd-floatbutton-radius-round", "--cd-floatbutton-radius-square", "--cd-floatbutton-bg", "--cd-floatbutton-bg-hover", "--cd-floatbutton-bg-active", "--cd-floatbutton-color", "--cd-floatbutton-shadow", "--cd-floatbutton-disabled-bg", "--cd-floatbutton-disabled-text", "--cd-floatbutton-colorful-bg", "--cd-floatbutton-colorful-bg-hover", "--cd-floatbutton-colorful-bg-active", "--cd-floatbutton-colorful-text", "--cd-floatbutton-bottom", "--cd-floatbutton-right", "--cd-floatbutton-z", "--cd-floatbutton-group-bg", "--cd-floatbutton-group-shadow", "--cd-floatbutton-group-radius", "--cd-floatbutton-group-padding", "--cd-floatbutton-group-gap", "--cd-floatbutton-group-bottom", "--cd-floatbutton-group-right", "--cd-floatbutton-group-item-padding-y", "--cd-floatbutton-group-item-padding-x", "--cd-floatbutton-group-item-gap", "--cd-floatbutton-group-item-radius", "--cd-floatbutton-group-item-color", "--cd-floatbutton-group-item-bg-hover", "--cd-floatbutton-group-item-bg-active", "--cd-floatbutton-group-item-font-size", "--cd-floatbutton-group-item-line-height", "--cd-floatbutton-group-item-font-weight"];
+    readonly responsive: false;
+    readonly doNot: readonly ["不要期望键盘可达 / 原生焦点：对齐 Semi 是纯 div，无内置 a11y 语义", "不要用 href 期望渲染 <a>：本组件经 JS 跳转（对齐 Semi）", "不要在 Group item 上依赖冒泡查找 data-value：对齐 Semi 直接读 e.target.dataset.value"];
+    readonly examples: readonly [{
+        readonly title: "单悬浮按钮";
+        readonly code: "<FloatButton style=\"bottom:24px;right:24px\">{#snippet icon()}?{/snippet}</FloatButton>";
+    }, {
+        readonly title: "带徽章";
+        readonly code: "<FloatButton badge={{ count: 3 }} />";
+    }, {
+        readonly title: "colorful";
+        readonly code: "<FloatButton colorful />";
+    }, {
+        readonly title: "href 跳转";
+        readonly code: "<FloatButton href=\"/docs\" target=\"_blank\" />";
+    }, {
+        readonly title: "Group 平铺";
+        readonly code: "<FloatButtonGroup items={[{ value: \"help\", content: \"帮助\" }]} onClick={(v) => {}} />";
+    }];
+};
+//# sourceMappingURL=meta.d.ts.map

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

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

package/dist/float-button/meta.js

@@ -0,0 +1,104 @@
+/**
+ * Machine-readable component metadata for AI/docs consumption.
+ * FloatButton — 严格对齐 Semi Design。
+ */
+export const meta = {
+    name: 'FloatButton',
+    category: 'basic',
+    stage: 'M1',
+    semiEquivalent: 'FloatButton',
+    description: '悬浮固定在视口的可操作按钮，用于承载全局快捷入口（AI 编辑、搜索、帮助等）。严格对齐 Semi：纯 div + onClick（非 button/a），href 靠 JS 跳转（target=_blank 用 window.open，否则 location.href），disabled 时不触发。可选包裹 Badge。形状 round(默认)/square、尺寸 small/default/large、colorful AI 渐变。默认 position:fixed 于右下角（bottom/right 24px），经 style 覆盖定位。FloatButtonGroup 将多项平铺成胶囊工具条，点击委托直接读 e.target.dataset.value 回传 value。',
+    exports: ['FloatButton', 'FloatButtonGroup'],
+    props: [
+        { name: 'icon', type: 'Snippet', default: 'undefined', desc: '图标内容（Snippet）' },
+        { name: 'badge', type: 'BadgeProps', default: 'undefined', desc: '徽章参数（复用本库 Badge：dot/count/overflowCount/type/theme），有值时外层包裹 Badge' },
+        { name: 'shape', type: "'round'|'square'", default: "'round'", desc: '形状：round=正圆（默认）、square=方形（对齐 Semi）' },
+        { name: 'size', type: "'small'|'default'|'large'", default: "'default'", desc: '尺寸三档（24/32/40px）' },
+        { name: 'colorful', type: 'boolean', default: 'false', desc: 'AI 风格多彩渐变外观' },
+        { name: 'disabled', type: 'boolean', default: 'false', desc: '禁用（不触发跳转/onClick）' },
+        { name: 'href', type: 'string', default: 'undefined', desc: '有值时点击经 JS 跳转（对齐 Semi：_blank 用 window.open，否则 location.href）' },
+        { name: 'target', type: 'string', default: 'undefined', desc: "链接打开目标；'_blank' 时用 window.open 新开" },
+        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击回调；disabled 时不触发' },
+        { name: 'class', type: 'string', default: "''", desc: '根节点自定义类名' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '定位方式：设 bottom/right 等覆盖默认 fixed 位置' },
+    ],
+    events: [
+        { name: 'onClick', payload: 'MouseEvent', desc: '点击；disabled 时不触发' },
+    ],
+    slots: [
+        { name: 'icon', desc: '图标内容（也可用 icon prop）' },
+    ],
+    subComponents: [
+        {
+            name: 'FloatButtonGroup',
+            usage: '<FloatButtonGroup items={...} onClick={(value, e) => {}} />',
+            desc: '胶囊工具条（严格对齐 Semi）：一个背景圆角条内 inline-flex 横排多个「图标+文字」项（纯 div），点击委托直接读 e.target.dataset.value 回传 value。',
+            props: [
+                { name: 'items', type: 'FloatButtonGroupItem[]', default: '[]', desc: '子项数组；每项 = FloatButtonProps + { value: string; content?: Snippet|string }' },
+                { name: 'disabled', type: 'boolean', default: 'false', desc: '组级禁用（不触发点击）' },
+                { name: 'onClick', type: '(value: string, e: MouseEvent) => void', default: 'undefined', desc: '组级点击委托，回传被点项 value（直接读 e.target.dataset.value）' },
+                { name: 'class', type: 'string', default: "''", desc: '根节点自定义类名' },
+                { name: 'style', type: 'string', default: 'undefined', desc: '定位方式，同 FloatButton' },
+            ],
+        },
+    ],
+    a11y: {
+        role: 'none',
+        keyboard: [],
+        hasRole: false,
+        focusable: false,
+        note: '严格对齐 Semi：FloatButton 与 FloatButtonGroup 均为纯 div + onClick（非 button/a），无内置 ARIA 语义、无键盘可达、无 focus 环。href 经 JS 跳转而非原生链接。如需可访问性由消费方在业务层补充。',
+    },
+    i18n: [],
+    tokens: [
+        '--cd-floatbutton-size-small',
+        '--cd-floatbutton-size-default',
+        '--cd-floatbutton-size-large',
+        '--cd-floatbutton-radius-round',
+        '--cd-floatbutton-radius-square',
+        '--cd-floatbutton-bg',
+        '--cd-floatbutton-bg-hover',
+        '--cd-floatbutton-bg-active',
+        '--cd-floatbutton-color',
+        '--cd-floatbutton-shadow',
+        '--cd-floatbutton-disabled-bg',
+        '--cd-floatbutton-disabled-text',
+        '--cd-floatbutton-colorful-bg',
+        '--cd-floatbutton-colorful-bg-hover',
+        '--cd-floatbutton-colorful-bg-active',
+        '--cd-floatbutton-colorful-text',
+        '--cd-floatbutton-bottom',
+        '--cd-floatbutton-right',
+        '--cd-floatbutton-z',
+        '--cd-floatbutton-group-bg',
+        '--cd-floatbutton-group-shadow',
+        '--cd-floatbutton-group-radius',
+        '--cd-floatbutton-group-padding',
+        '--cd-floatbutton-group-gap',
+        '--cd-floatbutton-group-bottom',
+        '--cd-floatbutton-group-right',
+        '--cd-floatbutton-group-item-padding-y',
+        '--cd-floatbutton-group-item-padding-x',
+        '--cd-floatbutton-group-item-gap',
+        '--cd-floatbutton-group-item-radius',
+        '--cd-floatbutton-group-item-color',
+        '--cd-floatbutton-group-item-bg-hover',
+        '--cd-floatbutton-group-item-bg-active',
+        '--cd-floatbutton-group-item-font-size',
+        '--cd-floatbutton-group-item-line-height',
+        '--cd-floatbutton-group-item-font-weight',
+    ],
+    responsive: false,
+    doNot: [
+        '不要期望键盘可达 / 原生焦点：对齐 Semi 是纯 div，无内置 a11y 语义',
+        '不要用 href 期望渲染 <a>：本组件经 JS 跳转（对齐 Semi）',
+        '不要在 Group item 上依赖冒泡查找 data-value：对齐 Semi 直接读 e.target.dataset.value',
+    ],
+    examples: [
+        { title: '单悬浮按钮', code: '<FloatButton style="bottom:24px;right:24px">{#snippet icon()}?{/snippet}</FloatButton>' },
+        { title: '带徽章', code: '<FloatButton badge={{ count: 3 }} />' },
+        { title: 'colorful', code: '<FloatButton colorful />' },
+        { title: 'href 跳转', code: '<FloatButton href="/docs" target="_blank" />' },
+        { title: 'Group 平铺', code: '<FloatButtonGroup items={[{ value: "help", content: "帮助" }]} onClick={(v) => {}} />' },
+    ],
+};

package/dist/float-button/types.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from 'svelte';
+/** Badge 参数子集（复用本库 Badge props）；有值时外层包裹 Badge。 */
+export interface FloatButtonBadgeProps {
+    count?: number | string;
+    dot?: boolean;
+    overflowCount?: number;
+    type?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger';
+    theme?: 'solid' | 'light' | 'inverted';
+}
+/** 形状：`'round'`（正圆，默认）/ `'square'`（方形）。对齐 Semi。 */
+export type FloatButtonShape = 'round' | 'square';
+export type FloatButtonSize = 'small' | 'default' | 'large';
+export interface FloatButtonProps {
+    /**
+     * 图标内容，渲染在按钮主体内。为 Snippet（对齐本库 Button 的 icon 约定）。
+     * 需渲染一个图标组件时，用一个内联 snippet 包裹它：`{#snippet icon()}<MyIcon />{/snippet}`。
+     */
+    icon?: Snippet;
+    /** 徽章参数（复用本库 Badge）；有值时外层包裹 Badge。 */
+    badge?: FloatButtonBadgeProps;
+    /** 形状：round=正圆（默认）、square=方形。 */
+    shape?: FloatButtonShape;
+    /** 尺寸三档。 */
+    size?: FloatButtonSize;
+    /** AI 风格多彩渐变外观。 */
+    colorful?: boolean;
+    /** 禁用（不触发跳转/onClick）。 */
+    disabled?: boolean;
+    /** 有值时点击经 JS 跳转（对齐 Semi：_blank 用 window.open，否则 location.href）。 */
+    href?: string;
+    /** 链接打开目标；`'_blank'` 时用 window.open 新开。 */
+    target?: string;
+    /** 点击回调；disabled 时不触发。 */
+    onClick?: (e: MouseEvent) => void;
+    /** 根节点自定义类名。 */
+    class?: string;
+    /** 根节点自定义内联样式（定位方式：设 bottom/right 等覆盖默认 fixed 位置）。 */
+    style?: string;
+}
+/** Group 子项 = FloatButton 全部 props + value + content。 */
+export interface FloatButtonGroupItem extends FloatButtonProps {
+    /** 渲染为 data-value，供组级点击委托回传。 */
+    value: string;
+    /** 在 icon 之后渲染的内容（文字或 Snippet）。 */
+    content?: Snippet | string;
+}
+export interface FloatButtonGroupProps {
+    /** 子项数组，遍历渲染。 */
+    items?: FloatButtonGroupItem[];
+    /** 组级禁用样式。 */
+    disabled?: boolean;
+    /** 组级点击委托，回传被点项 value（对齐 Semi：直接读 e.target.dataset.value）。 */
+    onClick?: (value: string, e: MouseEvent) => void;
+    /** 根节点自定义类名。 */
+    class?: string;
+    /** 定位方式，同 FloatButton。 */
+    style?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/float-button/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/float-button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,kDAAkD;AAClD,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IAC/E,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;CACxC;AAED,mDAAmD;AACnD,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,QAAQ,CAAC;AAClD,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE5D,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sCAAsC;IACtC,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,iCAAiC;IACjC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IACzB,YAAY;IACZ,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,mBAAmB;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,yDAAyD;AACzD,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC5D,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,iBAAiB;IACjB,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC/B,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACjD,gBAAgB;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB"}

package/dist/float-button/types.js

@@ -0,0 +1 @@
+export {};