@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/spin/Spin.svelte

@@ -1,65 +1,62 @@
 <!--
   Spin — see specs/components/feedback/Spin.spec.md
-  加载指示器：inline / wrapper / fullscreen 三形态。
-  delay 去抖 + minShowTime 最短显示 由 @chenzy-design/core createSpinController 提供（必须复用，不重复实现）。
-  红线 #1：spinning 是受控输入，effective 是内部派生显示态，绝不回写 spinning，仅触发 onShow/onHide。
-  红线 #3：定时器/订阅全部在 $effect 命令式管理 + cleanup，无 DOM 几何测量。
-  role=status (aria-live=polite) 公布加载；wrapper 内容 aria-busy；reduced-motion 退化为呼吸。
+  严格对齐 Semi Design（semi-ui/spin/index.tsx）：统一 DOM 结构，无 inline/wrapper/fullscreen
+  形态分叉。根 .cd-spin 始终渲染 .cd-spin-children（children，opacity 由 -hidden 决定），
+  loading 时叠加绝对定位居中的 .cd-spin-wrapper（指示器 + tip）。
+  delay 去抖由 @chenzy-design/core createSpinController 提供（Semi 无 minShowTime）。
+  红线：spinning 是受控输入，effective 是内部派生显示态，绝不回写 spinning。
+  role=status (aria-live=polite) 公布加载；装饰 SVG aria-hidden；reduced-motion 退化为呼吸。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { untrack } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
   import { createSpinController, type SpinController } from '@chenzy-design/core';
   import { useLocale } from '../locale-provider/index.js';
 
-  type Size = 'small' | 'default' | 'large';
+  type Size = 'small' | 'middle' | 'large';
 
-  interface Props {
-    spinning?: boolean;
+  interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     size?: Size;
-    tip?: string;
+    spinning?: boolean;
     delay?: number;
-    minShowTime?: number;
-    fullscreen?: boolean;
+    tip?: string;
     wrapperClassName?: string;
-    ariaLabel?: string;
-    indicator?: Snippet<[{ size: Size }]>;
+    style?: string;
+    childStyle?: string;
+    indicator?: Snippet;
     children?: Snippet;
-    onShow?: () => void;
-    onHide?: () => void;
   }
 
   let {
+    size = 'middle',
     spinning = true,
-    size = 'default',
-    tip = '',
     delay = 0,
-    minShowTime = 0,
-    fullscreen = false,
+    tip = '',
     wrapperClassName = '',
-    ariaLabel,
+    style,
+    childStyle,
     indicator,
     children,
-    onShow,
-    onHide,
+    ...rest
   }: Props = $props();
 
   const loc = useLocale();
 
-  // effective：内部派生显示态，render 读它决定显隐（红线 #1）。
-  let effective = $state(false);
-  // controller 在 client $effect 命令式创建（SSR 安全），不在 render 路径触碰定时器。
+  // effective：内部派生显示态，render 读它决定显隐（受控不回写）。
+  // 初值取 spinning 的初始快照（SSR/首帧正确显示），之后由 controller 驱动——
+  // 故意不追踪 spinning 变化（那由下方 effect 推入 controller）。
+  let effective = $state(untrack(() => spinning));
   let ctrl: SpinController | null = $state(null);
 
-  // effect A：mount 时创建 controller 并订阅；依赖 delay/minShowTime（变化才重建）。
-  // 不依赖 spinning：避免 spinning 变化重建 controller 丢失去抖/最短显示状态。
+  // controller 在 client $effect 命令式创建（SSR 安全），不在 render 路径触碰定时器。
+  // 依赖 delay（变化才重建），不依赖 spinning：避免 spinning 变化重建 controller 丢失去抖态。
   $effect(() => {
-    const controller = createSpinController({ delay, minShowTime, spinning });
+    const controller = createSpinController({ delay, spinning });
     ctrl = controller;
     effective = controller.getEffective();
     const unsub = controller.subscribe((v) => {
       effective = v;
-      if (v) onShow?.();
-      else onHide?.();
     });
     return () => {
       unsub();
@@ -68,219 +65,187 @@
     };
   });
 
-  // effect B：仅依赖 spinning + ctrl，把受控请求推给 controller（红线 #1：只推入，不回写）。
+  // 仅依赖 spinning + ctrl：把受控请求推给 controller（只推入，不回写）。
   $effect(() => {
     ctrl?.setSpinning(spinning);
   });
 
-  const isWrapper = $derived(children !== undefined && !fullscreen);
-  const isFullscreen = $derived(fullscreen);
-  const isInline = $derived(!isWrapper && !isFullscreen);
-
+  const hasChildren = $derived(children !== undefined);
   const hasTip = $derived(tip.length > 0);
-  // 有 tip 时 tip 文本作为可访问名；无 tip 时用 ariaLabel。
-  const statusLabel = $derived(hasTip ? undefined : (ariaLabel ?? loc().t('Spin.loading')));
+  const statusLabel = $derived(hasTip ? undefined : loc().t('Spin.loading'));
 
-  const indicatorClass = $derived(`cd-spin__indicator cd-spin__indicator--${size}`);
+  const rootClass = $derived(
+    [
+      'cd-spin',
+      `cd-spin-${size}`,
+      hasChildren && 'cd-spin-block',
+      !effective && 'cd-spin-hidden',
+      // 对齐 Semi：wrapperClassName 合并进根 class（供消费方定位/覆盖，如 Switch loading）。
+      wrapperClassName,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
 </script>
 
-{#snippet defaultIndicator()}
+{#snippet spinIcon()}
+  <!-- Semi 默认指示器：linearGradient 渐变弧 path，currentColor 继承自 .cd-spin-wrapper -->
   <svg
-    class={indicatorClass}
-    viewBox="0 0 24 24"
+    class="cd-spin-icon"
+    width="48"
+    height="48"
+    viewBox="0 0 36 36"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
     aria-hidden="true"
-    focusable="false"
+    data-icon="spin"
   >
-    <circle
-      class="cd-spin__track"
-      cx="12"
-      cy="12"
-      r="10"
-      fill="none"
-      stroke="var(--cd-spin-track-color)"
-      stroke-width="2.5"
-    />
-    <circle
-      class="cd-spin__arc"
-      cx="12"
-      cy="12"
-      r="10"
-      fill="none"
-      stroke="var(--cd-spin-color)"
-      stroke-width="2.5"
-      stroke-linecap="round"
-      stroke-dasharray="47 63"
-    />
+    <defs>
+      <linearGradient x1="0%" y1="100%" x2="100%" y2="100%" id="cd-spin-gradient">
+        <stop stop-color="currentColor" stop-opacity="0" offset="0%" />
+        <stop stop-color="currentColor" stop-opacity="0.5" offset="39.9430698%" />
+        <stop stop-color="currentColor" offset="100%" />
+      </linearGradient>
+    </defs>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <rect fill-opacity="0.01" fill="none" x="0" y="0" width="36" height="36" />
+      <path
+        d="M34,18 C34,9.163444 26.836556,2 18,2 C11.6597233,2 6.18078805,5.68784135 3.59122325,11.0354951"
+        stroke="url(#cd-spin-gradient)"
+        stroke-width="4"
+        stroke-linecap="round"
+      />
+    </g>
   </svg>
 {/snippet}
 
-{#snippet spinner()}
-  {#if indicator}
-    {@render indicator({ size })}
-  {:else}
-    {@render defaultIndicator()}
-  {/if}
-{/snippet}
-
-{#if isInline}
-  <div
-    class="cd-spin cd-spin--{size}"
-    role="status"
-    aria-live="polite"
-    aria-label={statusLabel}
-  >
-    {@render spinner()}
-    {#if hasTip}
-      <div class="cd-spin__tip">{tip}</div>
-    {/if}
-  </div>
-{:else if isFullscreen}
+<div class={rootClass} {style} {...rest}>
   {#if effective}
-    <div
-      class="cd-spin cd-spin--{size} cd-spin--fullscreen"
-      role="status"
-      aria-live="polite"
-      aria-label={statusLabel}
-    >
-      <div class="cd-spin__box">
-        {@render spinner()}
-        {#if hasTip}
-          <div class="cd-spin__tip">{tip}</div>
-        {/if}
-      </div>
+    <div class="cd-spin-wrapper" role="status" aria-live="polite" aria-label={statusLabel}>
+      {#if indicator}
+        <div class="cd-spin-animate">{@render indicator()}</div>
+      {:else}
+        {@render spinIcon()}
+      {/if}
+      {#if hasTip}
+        <div>{tip}</div>
+      {/if}
     </div>
   {/if}
-{:else}
-  <div class="cd-spin-wrapper {wrapperClassName}">
-    <div
-      class="cd-spin__content"
-      class:cd-spin__content--blur={effective}
-      aria-busy={effective ? true : undefined}
-      inert={effective ? true : undefined}
-    >
-      {@render children?.()}
-    </div>
-    {#if effective}
-      <div
-        class="cd-spin__overlay cd-spin--{size}"
-        role="status"
-        aria-live="polite"
-        aria-label={statusLabel}
-      >
-        <div class="cd-spin__box">
-          {@render spinner()}
-          {#if hasTip}
-            <div class="cd-spin__tip">{tip}</div>
-          {/if}
-        </div>
-      </div>
-    {/if}
+  <div class="cd-spin-children" style={childStyle}>
+    {@render children?.()}
   </div>
-{/if}
+</div>
 
 <style>
   .cd-spin {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cd-spin-tip-gap);
-    color: var(--cd-spin-color);
+    position: relative;
+    display: inline-block;
+    /* 根节点尺寸由 .cd-spin-<size>:not(.cd-spin-block) 提供（见下），
+       block 包裹态不设根尺寸 → auto 撑满内容。size=middle 恒存在，独立态尺寸不缺失。 */
   }
 
-  .cd-spin__indicator {
-    display: block;
-    inline-size: var(--cd-spin-size-default);
-    block-size: var(--cd-spin-size-default);
-    animation: cd-spin-rotate var(--cd-spin-duration) linear infinite;
-  }
-  .cd-spin__indicator--small {
-    inline-size: var(--cd-spin-size-small);
-    block-size: var(--cd-spin-size-small);
+  .cd-spin-wrapper {
+    text-align: center;
+    position: absolute;
+    inline-size: 100%;
+    transform: translateY(-50%);
+    inset-block-start: 50%;
+    color: var(--cd-color-spin-bg);
   }
-  .cd-spin__indicator--default {
-    inline-size: var(--cd-spin-size-default);
-    block-size: var(--cd-spin-size-default);
+
+  .cd-spin-wrapper > :global(svg) {
+    display: inline;
+    animation: cd-spin-rotate var(--cd-animation-duration-spin-wrapper-spin) linear infinite;
+    animation-fill-mode: forwards;
+    vertical-align: top;
+    inline-size: var(--cd-width-spin-middle);
+    block-size: var(--cd-width-spin-middle);
   }
-  .cd-spin__indicator--large {
-    inline-size: var(--cd-spin-size-large);
-    block-size: var(--cd-spin-size-large);
+
+  .cd-spin-animate {
+    display: inline-flex;
+    animation: cd-spin-rotate var(--cd-animation-duration-spin-custom-children-spin) linear infinite;
+    animation-fill-mode: forwards;
   }
 
-  .cd-spin__tip {
-    color: var(--cd-spin-tip-color);
-    font-size: var(--cd-font-size-body);
-    text-align: center;
+  .cd-spin-children {
+    opacity: var(--cd-opacity-spin-children);
+    user-select: none;
   }
 
-  /* wrapper 形态 */
-  .cd-spin-wrapper {
-    position: relative;
+  /* 尺寸：根节点尺寸仅在独立态（无 children）时约束，避免约束到 block 包裹容器。
+     Svelte 会把 .cd-spin-block.cd-spin 优化成 .cd-spin-block（特异性与 .cd-spin-<size>
+     相同、且靠后失效），故此处用 :not(.cd-spin-block) 显式排除，稳过 HMR / 编译优化。
+     wrapper 内 SVG 尺寸始终随 size。 */
+  .cd-spin-small:not(.cd-spin-block) {
+    inline-size: var(--cd-width-spin-small);
+    block-size: var(--cd-width-spin-small);
   }
-  .cd-spin__content {
-    transition: opacity var(--cd-spin-fade-duration) var(--cd-motion-ease-standard);
+  .cd-spin-small > .cd-spin-wrapper :global(svg) {
+    inline-size: var(--cd-width-spin-small);
+    block-size: var(--cd-width-spin-small);
   }
-  .cd-spin__content--blur {
-    opacity: 0.5;
-    pointer-events: none;
-    user-select: none;
+  .cd-spin-middle:not(.cd-spin-block) {
+    inline-size: var(--cd-width-spin-middle);
+    block-size: var(--cd-width-spin-middle);
   }
-  .cd-spin__overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: var(--cd-spin-z);
-    background: var(--cd-spin-mask-bg);
-    animation: cd-spin-fade var(--cd-spin-fade-duration) var(--cd-motion-ease-standard);
+  .cd-spin-middle > .cd-spin-wrapper :global(svg) {
+    inline-size: var(--cd-width-spin-middle);
+    block-size: var(--cd-width-spin-middle);
+  }
+  .cd-spin-large:not(.cd-spin-block) {
+    inline-size: var(--cd-width-spin-large);
+    block-size: var(--cd-width-spin-large);
+  }
+  .cd-spin-large > .cd-spin-wrapper :global(svg) {
+    inline-size: var(--cd-width-spin-large);
+    block-size: var(--cd-width-spin-large);
   }
 
-  /* fullscreen 形态 */
-  .cd-spin--fullscreen {
-    position: fixed;
-    inset: 0;
-    z-index: var(--cd-spin-z-fullscreen);
-    background: var(--cd-spin-mask-bg);
-    animation: cd-spin-fade var(--cd-spin-fade-duration) var(--cd-motion-ease-standard);
+  /* 有 children：块级布局 + 遮罩解决嵌套 Spin 穿透 */
+  .cd-spin-block {
+    display: block;
+    inline-size: auto;
+    block-size: auto;
+  }
+  .cd-spin-block::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    z-index: 1;
+  }
+  .cd-spin-block .cd-spin-wrapper {
+    display: block;
   }
 
-  .cd-spin__box {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--cd-spin-tip-gap);
-    color: var(--cd-spin-color);
+  /* !loading：移除遮罩，children 恢复不透明可交互 */
+  .cd-spin-hidden::after {
+    content: none;
+  }
+  .cd-spin-hidden > .cd-spin-children {
+    opacity: 1;
+    user-select: auto;
   }
 
   @keyframes cd-spin-rotate {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes cd-spin-fade {
     from {
-      opacity: 0;
+      transform: rotate(0);
     }
     to {
-      opacity: 1;
+      transform: rotate(360deg);
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .cd-spin__indicator {
-      animation: cd-spin-pulse var(--cd-spin-duration-reduced) ease-in-out infinite;
-    }
-    .cd-spin__overlay,
-    .cd-spin--fullscreen {
-      animation: none;
-    }
-    .cd-spin__content {
-      transition: none;
+    .cd-spin-wrapper > :global(svg),
+    .cd-spin-animate {
+      animation: cd-spin-pulse var(--cd-animation-duration-spin-custom-children-spin) ease-in-out infinite;
     }
   }
-
   @keyframes cd-spin-pulse {
     0%,
     100% {

package/dist/spin/Spin.svelte.d.ts

@@ -1,20 +1,16 @@
 import type { Snippet } from 'svelte';
-type Size = 'small' | 'default' | 'large';
-interface Props {
-    spinning?: boolean;
+import type { HTMLAttributes } from 'svelte/elements';
+type Size = 'small' | 'middle' | 'large';
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     size?: Size;
-    tip?: string;
+    spinning?: boolean;
     delay?: number;
-    minShowTime?: number;
-    fullscreen?: boolean;
+    tip?: string;
     wrapperClassName?: string;
-    ariaLabel?: string;
-    indicator?: Snippet<[{
-        size: Size;
-    }]>;
+    style?: string;
+    childStyle?: string;
+    indicator?: Snippet;
     children?: Snippet;
-    onShow?: () => void;
-    onHide?: () => void;
 }
 declare const Spin: import("svelte").Component<Props, {}, "">;
 type Spin = ReturnType<typeof Spin>;

package/dist/spin/Spin.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spin.svelte.d.ts","sourceRoot":"","sources":["../../src/spin/Spin.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKpC,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1C,UAAU,KAAK;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,IAAI,EAAE,IAAI,CAAA;KAAE,CAAC,CAAC,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAwHH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Spin.svelte.d.ts","sourceRoot":"","sources":["../../src/spin/Spin.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKpD,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACtE,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8GH,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/spin/meta.d.ts

@@ -5,98 +5,81 @@
 export declare const meta: {
     readonly name: "Spin";
     readonly category: "feedback";
-    readonly description: "加载指示器：inline / wrapper / fullscreen 三形态；delay 去抖 + minShowTime 最短显示（复用 @chenzy-design/core createSpinController）；role=status + aria-live=polite 公布加载，wrapper 内容 aria-busy；reduced-motion 下旋转退化为呼吸。spinning 受控不回写，显隐变化仅触发 onShow/onHide。";
+    readonly description: "加载指示器，严格对齐 Semi Design：统一 DOM（.cd-spin > .cd-spin-wrapper 指示器 + .cd-spin-children 内容），有 children 时块级包裹并遮罩内容（opacity 0.5、不可交互），无 children 时独立指示器。delay 延迟去抖（复用 @chenzy-design/core createSpinController，无 minShowTime）。role=status + aria-live=polite 公布加载，装饰 SVG aria-hidden，reduced-motion 退化为呼吸。spinning 受控不回写。";
     readonly exports: readonly ["Spin"];
     readonly props: readonly [{
         readonly name: "spinning";
         readonly type: "boolean";
         readonly default: "true";
-        readonly desc: "是否加载态；受控不回写";
+        readonly desc: "是否处于加载中的状态；受控不回写";
     }, {
         readonly name: "size";
-        readonly type: "'small'|'default'|'large'";
-        readonly default: "'default'";
+        readonly type: "'small'|'middle'|'large'";
+        readonly default: "'middle'";
+        readonly desc: "组件大小";
     }, {
-        readonly name: "tip";
-        readonly type: "string";
-        readonly default: "''";
-        readonly desc: "指示器下方文案，空则不渲染";
+        readonly name: "indicator";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "自定义加载指示符";
     }, {
         readonly name: "delay";
         readonly type: "number";
         readonly default: "0";
-        readonly desc: "延迟显示 ms（去抖）";
+        readonly desc: "延迟显示加载效果的时间（ms）";
     }, {
-        readonly name: "minShowTime";
-        readonly type: "number";
-        readonly default: "0";
-        readonly desc: "最短显示 ms";
-    }, {
-        readonly name: "fullscreen";
-        readonly type: "boolean";
-        readonly default: "false";
-        readonly desc: "全屏固定覆盖";
+        readonly name: "tip";
+        readonly type: "string";
+        readonly default: "''";
+        readonly desc: "作为包裹元素时的描述文字，空则不渲染";
     }, {
         readonly name: "wrapperClassName";
         readonly type: "string";
         readonly default: "''";
-        readonly desc: "wrapper 外层自定义类";
+        readonly desc: "包裹元素的类名";
     }, {
-        readonly name: "ariaLabel";
+        readonly name: "style";
         readonly type: "string";
-        readonly default: "'加载中'";
-        readonly desc: "无 tip 时的可访问名";
+        readonly default: "undefined";
+        readonly desc: "根节点内联样式";
     }, {
-        readonly name: "indicator";
-        readonly type: "Snippet<[{ size }]>";
+        readonly name: "childStyle";
+        readonly type: "string";
         readonly default: "undefined";
-        readonly desc: "自定义指示器";
+        readonly desc: "内部子元素（.cd-spin-children）的样式";
     }, {
         readonly name: "children";
         readonly type: "Snippet";
         readonly default: "undefined";
-        readonly desc: "提供则进入 wrapper 模式包裹内容";
-    }, {
-        readonly name: "onShow";
-        readonly type: "() => void";
-        readonly default: "undefined";
-        readonly desc: "effective false→true";
-    }, {
-        readonly name: "onHide";
-        readonly type: "() => void";
-        readonly default: "undefined";
-        readonly desc: "effective true→false";
-    }];
-    readonly events: readonly [{
-        readonly name: "onShow";
-        readonly desc: "有效显示态由 false 变 true（delay 后真正显示时触发）";
-    }, {
-        readonly name: "onHide";
-        readonly desc: "有效显示态由 true 变 false（满足 minShowTime 后隐藏时触发）";
+        readonly desc: "提供则块级包裹内容并叠加遮罩";
     }];
+    readonly events: readonly [];
     readonly slots: readonly [{
         readonly name: "children";
-        readonly desc: "wrapper 模式下被遮罩包裹的内容";
+        readonly desc: "被包裹的内容（提供则进入 block 包裹模式）";
     }, {
         readonly name: "indicator";
-        readonly desc: "自定义指示器（接收 { size }）";
+        readonly desc: "自定义指示器";
     }];
     readonly a11y: {
         readonly hasRole: true;
         readonly focusable: false;
-        readonly note: "role=status + aria-live=polite（隐式 aria-atomic）公布加载；无 tip 时 aria-label，有 tip 时 tip 文本即可访问名；wrapper 内容 effectiveSpinning 时 aria-busy=true 并 inert 阻断交互；内置 SVG aria-hidden；不捕获焦点；reduced-motion 旋转退化为 opacity 呼吸。";
+        readonly note: "loading 时 .cd-spin-wrapper 使用 role=status + aria-live=polite（隐式 aria-atomic）公布加载；无 tip 时以 i18n Spin.loading 为 aria-label；内置渐变 SVG aria-hidden；组件无可聚焦元素，不进入 Tab 序列；reduced-motion 旋转退化为 opacity 呼吸。";
     };
-    readonly tokens: readonly ["--cd-spin-color", "--cd-spin-track-color", "--cd-spin-size-small", "--cd-spin-size-default", "--cd-spin-size-large", "--cd-spin-duration", "--cd-spin-duration-reduced", "--cd-spin-tip-gap", "--cd-spin-tip-color", "--cd-spin-mask-bg", "--cd-spin-z", "--cd-spin-z-fullscreen", "--cd-spin-fade-duration"];
+    readonly tokens: readonly ["--cd-color-spin-bg", "--cd-width-spin-large", "--cd-width-spin-middle", "--cd-width-spin-small", "--cd-opacity-spin-children", "--cd-animation-duration-spin-wrapper-spin", "--cd-animation-duration-spin-custom-children-spin"];
     readonly responsive: false;
     readonly examples: readonly [{
-        readonly title: "inline";
-        readonly code: "<Spin spinning />";
+        readonly title: "基本";
+        readonly code: "<Spin />";
+    }, {
+        readonly title: "尺寸";
+        readonly code: "<Spin size=\"small\" />\n<Spin size=\"middle\" />\n<Spin size=\"large\" />";
     }, {
-        readonly title: "wrapper 包裹卡片";
-        readonly code: "<Spin spinning={loading}>\n  <Card>内容</Card>\n</Spin>";
+        readonly title: "带文字包裹";
+        readonly code: "<Spin tip=\"加载中…\">\n  <div>内容</div>\n</Spin>";
     }, {
-        readonly title: "带 tip";
-        readonly code: "<Spin spinning tip=\"加载中…\" />";
+        readonly title: "延迟显示";
+        readonly code: "<Spin delay={1000} spinning={loading} />";
     }];
 };
 //# sourceMappingURL=meta.d.ts.map

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

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