@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/switch/Switch.svelte

@@ -1,310 +1,329 @@
 <!--
-  Switch — see specs/components/input/Switch.spec.md
-  Native role="switch" button, controlled / uncontrolled.
+  Switch — 严格对齐 Semi Design（semi-ui/switch）。
 
-  ⚠️ 死循环红线：
-    - 受控（value=/bind:value）：父持有 value，仅经 onChange 上抛，绝不回写 prop（红线 #1）。
-    - 派生（on / nativeValue / cls / activeChildren）均为纯函数 $derived（红线 #2）。
-    - autofocus：$effect 内命令式 focus()，无 cleanup 必要（focus 一次性）；
-      announceOnChange 的 live region 写入在事件回调（非 render 期），$effect 仅清空兜底（红线 #3）。
-  - checkedValue/uncheckedValue：开/关态映射到任意业务值，仅用于 onChange.nativeValue 与
-    隐藏 input 提交值；on 仍为 boolean，映射不回写。
+  DOM 偏离说明（保守决策，见返回报告）：
+    Semi 根为 <div class="semi-switch"> + 隐藏 <input type=checkbox role=switch>；
+    本库保留 <button role="switch">（APG Switch Pattern，role 载体在按钮本身），
+    a11y 更优且已有键盘/焦点测试覆盖，故不照搬 input 结构；仅将 class 命名
+    连字符化对齐 Semi（cd-switch / cd-switch-checked / cd-switch-knob …）、
+    token 名值对齐 Semi variables.scss。
+
+  死循环红线：
+    - 受控（checked=）：父持有 checked，仅经 onChange 上抛，绝不回写 prop。
+    - on / activeText / cls 均为纯 $derived。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useLocale } from '../locale-provider/index.js';
+  import Spin from '../spin/Spin.svelte';
 
   type Size = 'small' | 'default' | 'large';
-  type Status = 'default' | 'warning' | 'error';
-  type NativeValue = string | number | boolean;
 
   interface Props {
-    value?: boolean;
-    defaultValue?: boolean;
-    /** 开态对应的实际值（onChange.nativeValue 与表单提交值）。 */
-    checkedValue?: NativeValue;
-    /** 关态对应的实际值。 */
-    uncheckedValue?: NativeValue;
+    /** 受控选中态；提供则为受控（对齐 Semi checked）。 */
+    checked?: boolean;
+    /** 非受控初始选中态（对齐 Semi defaultChecked）。 */
+    defaultChecked?: boolean;
     size?: Size;
-    status?: Status;
     disabled?: boolean;
     loading?: boolean;
-    checkedChildren?: string | Snippet;
-    uncheckedChildren?: string | Snippet;
-    name?: string;
-    /** 表单必填校验（须为开态）。 */
-    required?: boolean;
-    ariaLabel?: string;
-    /** 关联外部可见文本（如 Label 组件）的 id，体现可访问名（优先于 ariaLabel）。 */
-    ariaLabelledby?: string;
-    /** 切换后是否用 live region 播报新状态（文案经 locale）。 */
-    announceOnChange?: boolean;
-    /** 挂载后自动聚焦。 */
-    autofocus?: boolean;
-    onChange?: (
-      v: boolean,
-      detail?: { value: boolean; nativeValue: NativeValue; event: Event },
-    ) => void;
-    /** 获得焦点。 */
-    onFocus?: (event: FocusEvent) => void;
-    /** 失去焦点。 */
-    onBlur?: (event: FocusEvent) => void;
-    /** 键盘按下（可用于自定义快捷键扩展）。 */
-    onKeydown?: (event: KeyboardEvent) => void;
-    /** checked 时显示的文字（checkedChildren 的字符串别名） */
-    checkedText?: string;
-    /** unchecked 时显示的文字 */
-    uncheckedText?: string;
-    /** checked 时的 Snippet（checkedChildren 的 Snippet 别名） */
-    checkedContent?: Snippet;
-    /** unchecked 时的 Snippet */
-    uncheckedContent?: Snippet;
-    /** 鼠标进入 */
+    /** 开态内嵌文字/图标（size=small 时不渲染）。 */
+    checkedText?: string | Snippet;
+    /** 关态内嵌文字/图标（size=small 时不渲染）。 */
+    uncheckedText?: string | Snippet;
+    /** 变更回调，对齐 Semi (checked, event)。 */
+    onChange?: (checked: boolean, event: Event) => void;
     onMouseEnter?: (e: MouseEvent) => void;
-    /** 鼠标离开 */
     onMouseLeave?: (e: MouseEvent) => void;
+    /** 透传根元素内联样式。 */
+    style?: string;
+    /** 透传根元素 class（本库惯例用 class，对齐 Semi className）。 */
+    class?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
   }
 
   let {
-    value = $bindable(),
-    defaultValue = false,
-    checkedValue = true,
-    uncheckedValue = false,
+    checked,
+    defaultChecked = false,
     size = 'default',
-    status = 'default',
     disabled = false,
     loading = false,
-    checkedChildren,
-    uncheckedChildren,
-    name,
-    required = false,
-    ariaLabel,
-    ariaLabelledby,
-    announceOnChange = false,
-    autofocus = false,
-    onChange,
-    onFocus,
-    onBlur,
-    onKeydown,
     checkedText,
     uncheckedText,
-    checkedContent,
-    uncheckedContent,
+    onChange,
     onMouseEnter,
     onMouseLeave,
+    style,
+    class: className,
+    id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-errormessage': ariaErrormessage,
+    'aria-invalid': ariaInvalid,
+    'aria-required': ariaRequired,
   }: Props = $props();
 
-  const loc = useLocale();
-
-  const isControlled = $derived(value !== undefined);
+  const isControlled = $derived(checked !== undefined);
+  // 非受控初始态：仅取 defaultChecked 首值播种，后续由内部 toggle 维护（受控则读 checked）。
   let inner = $state(getInitialValue());
-  const on = $derived(isControlled ? !!value : inner);
+  const on = $derived(isControlled ? !!checked : inner);
 
   function getInitialValue(): boolean {
-    return defaultValue;
+    return defaultChecked;
   }
 
   const interactable = $derived(!disabled && !loading);
 
-  // 映射到业务值（红线 #2 纯派生）：仅用于 onChange.nativeValue 与表单提交。
-  const nativeValue = $derived<NativeValue>(on ? checkedValue : uncheckedValue);
-
-  // 切换播报 live region（命令式写入，初始空；render 期只读 $state）。
-  let announceText = $state('');
-
-  let rootEl: HTMLButtonElement | undefined;
-
-  // autofocus：命令式聚焦一次（红线 #3，SSR 安全，$effect 仅 client）。
-  $effect(() => {
-    if (autofocus && rootEl && interactable) rootEl.focus();
-  });
-
-  function announce(next: boolean) {
-    if (!announceOnChange) return;
-    announceText = '';
-    // 微任务后再写入，先清空再赋值，触发 AT 重新播报。
-    queueMicrotask(() => {
-      announceText = loc().t(next ? 'Switch.announceChecked' : 'Switch.announceUnchecked');
-    });
-  }
-
   function toggle(event: Event) {
     if (!interactable) return;
     const next = !on;
-    // Controlled (`value=` / `bind:value`): parent owns `value`; propagate only
-    // via `onChange`. Writing the prop AND firing `onChange` loops.
-    // Uncontrolled: keep our own state in sync.
+    // 受控：父持有 checked，仅 onChange 上抛；非受控：同步内部态。
     if (!isControlled) inner = next;
-    const nv = next ? checkedValue : uncheckedValue;
-    onChange?.(next, { value: next, nativeValue: nv, event });
-    announce(next);
+    onChange?.(next, event);
   }
 
-  // checkedText / uncheckedText 是 checkedChildren / uncheckedChildren 的字符串别名；
-  // checkedContent / uncheckedContent 是 Snippet 别名。
-  // 优先级：checkedChildren > checkedContent > checkedText（同理 unchecked）。
-  const resolvedChecked = $derived<string | Snippet | undefined>(
-    checkedChildren ?? checkedContent ?? checkedText,
+  // 内嵌文字在最小尺寸下不渲染（对齐 Semi：small 放不下文本）。
+  const activeText = $derived<string | Snippet | undefined>(
+    size === 'small' ? undefined : on ? checkedText : uncheckedText,
   );
-  const resolvedUnchecked = $derived<string | Snippet | undefined>(
-    uncheckedChildren ?? uncheckedContent ?? uncheckedText,
-  );
-  const activeChildren = $derived(on ? resolvedChecked : resolvedUnchecked);
   const isSnippet = (c: string | Snippet | undefined): c is Snippet => typeof c === 'function';
 
-  // 隐藏 input 提交值：boolean → 'true'/'false'，其余按原值字符串化。
-  const submitValue = $derived(
-    typeof nativeValue === 'boolean' ? (nativeValue ? 'true' : 'false') : String(nativeValue),
-  );
-
   const cls = $derived(
-    ['cd-switch', `cd-switch--${size}`, `cd-switch--${status}`, on && 'cd-switch--on']
+    [
+      'cd-switch',
+      size === 'large' && 'cd-switch-large',
+      size === 'small' && 'cd-switch-small',
+      on && 'cd-switch-checked',
+      disabled && 'cd-switch-disabled',
+      loading && 'cd-switch-loading',
+      className,
+    ]
       .filter(Boolean)
       .join(' '),
   );
 </script>
 
 <button
-  bind:this={rootEl}
+  {id}
   type="button"
   role="switch"
   class={cls}
+  {style}
   aria-checked={on}
   aria-labelledby={ariaLabelledby}
   aria-label={ariaLabelledby ? undefined : ariaLabel}
+  aria-describedby={ariaDescribedby}
+  aria-errormessage={ariaErrormessage}
+  aria-invalid={ariaInvalid || undefined}
+  aria-required={ariaRequired || undefined}
   aria-busy={loading || undefined}
-  aria-required={required || undefined}
-  aria-invalid={status === 'error' || undefined}
   disabled={disabled || loading}
   onclick={toggle}
-  onfocus={onFocus}
-  onblur={onBlur}
-  onkeydown={onKeydown}
   onmouseenter={onMouseEnter}
   onmouseleave={onMouseLeave}
 >
-  {#if name}<input type="hidden" {name} value={submitValue} {required} />{/if}
-  {#if activeChildren !== undefined}
-    <span class="cd-switch__label">
-      {#if isSnippet(activeChildren)}{@render activeChildren()}{:else}{activeChildren}{/if}
+  {#if activeText !== undefined}
+    <span class={on ? 'cd-switch-checked-text' : 'cd-switch-unchecked-text'}>
+      {#if isSnippet(activeText)}{@render activeText()}{:else}{activeText}{/if}
     </span>
   {/if}
-  <span class="cd-switch__knob">
-    {#if loading}<span class="cd-switch__spinner" aria-hidden="true"></span>{/if}
-  </span>
+  {#if loading}
+    <!-- 对齐 Semi：loading 复用 <Spin>（渐变弧 SVG），非自绘 border 圈。
+         SVG 尺寸/位移由 .cd-switch-loading-spin 作用域 CSS 控制。 -->
+    <Spin wrapperClassName="cd-switch-loading-spin" />
+  {:else}
+    <span class="cd-switch-knob" aria-hidden="true"></span>
+  {/if}
 </button>
 
-{#if announceOnChange}
-  <!-- 切换播报 live region：视觉隐藏，仅供辅助技术读取（render 期只读 $state）。 -->
-  <div class="cd-switch__sr-live" role="status" aria-live="polite" aria-atomic="true">
-    {announceText}
-  </div>
-{/if}
-
 <style>
   .cd-switch {
     position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
+    display: inline-block;
+    box-sizing: border-box;
     inline-size: var(--cd-switch-width-default);
     block-size: var(--cd-switch-height-default);
     padding: 0;
-    border: none;
+    border: var(--cd-switch-border-width) solid var(--cd-switch-border-off);
     border-radius: var(--cd-switch-radius);
     background: var(--cd-switch-bg-off);
     cursor: pointer;
-    transition: background-color var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
+    transition: background-color var(--cd-switch-transition-duration) var(--cd-switch-transition-easing);
+  }
+  .cd-switch:hover {
+    background: var(--cd-switch-bg-off-hover);
+  }
+  .cd-switch:active {
+    background: var(--cd-switch-bg-off-active);
   }
-  .cd-switch--small {
+  .cd-switch-small {
     inline-size: var(--cd-switch-width-small);
     block-size: var(--cd-switch-height-small);
   }
-  .cd-switch--large {
+  .cd-switch-large {
     inline-size: var(--cd-switch-width-large);
     block-size: var(--cd-switch-height-large);
   }
-  .cd-switch--on {
+  .cd-switch-checked {
     background: var(--cd-switch-bg-on);
-    justify-content: flex-end;
   }
-  .cd-switch--warning.cd-switch--on {
-    background: var(--cd-color-warning);
+  .cd-switch-checked:hover {
+    background: var(--cd-switch-bg-on-hover);
   }
-  .cd-switch--warning.cd-switch--on .cd-switch__label {
-    color: var(--cd-color-text-inverse);
-  }
-  .cd-switch--error.cd-switch--on {
-    background: var(--cd-color-danger);
+  .cd-switch-checked:active {
+    background: var(--cd-switch-bg-on-active);
   }
   .cd-switch:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
+    outline: var(--cd-switch-outline-width) solid var(--cd-switch-outline-focus);
+    outline-offset: 0;
   }
-  .cd-switch:disabled {
+  .cd-switch-disabled {
     cursor: not-allowed;
+    background: var(--cd-switch-bg-off);
     opacity: 0.5;
   }
-  .cd-switch__knob {
+  .cd-switch-disabled.cd-switch-checked {
+    background: var(--cd-switch-bg-on-disabled);
+    opacity: 1;
+  }
+  .cd-switch-disabled:hover,
+  .cd-switch-disabled:active {
+    background: var(--cd-switch-bg-off);
+  }
+  .cd-switch-disabled.cd-switch-checked:hover,
+  .cd-switch-disabled.cd-switch-checked:active {
+    background: var(--cd-switch-bg-on-disabled);
+  }
+
+  /* knob：绝对定位 + translateX 位移，对齐 Semi。 */
+  .cd-switch-knob {
     position: absolute;
-    inset-block: 2px;
-    inset-inline-start: 2px;
-    aspect-ratio: 1;
-    block-size: calc(100% - 4px);
+    inset-block-start: var(--cd-switch-knob-padding);
+    inset-inline-start: 0;
+    inline-size: var(--cd-switch-knob-size);
+    block-size: var(--cd-switch-knob-size);
+    border-radius: 50%;
+    background: var(--cd-switch-knob-bg);
+    box-shadow: var(--cd-switch-knob-shadow);
+    transform: translateX(var(--cd-switch-knob-tx-off));
+    transition: transform var(--cd-switch-transition-duration) var(--cd-switch-transition-easing);
+  }
+  .cd-switch-checked .cd-switch-knob {
+    transform: translateX(var(--cd-switch-knob-tx-on));
+  }
+  .cd-switch-large .cd-switch-knob {
+    inset-block-start: var(--cd-switch-knob-padding-large);
+    inline-size: var(--cd-switch-knob-size-large);
+    block-size: var(--cd-switch-knob-size-large);
+    transform: translateX(var(--cd-switch-knob-tx-off-large));
+  }
+  .cd-switch-large.cd-switch-checked .cd-switch-knob {
+    transform: translateX(var(--cd-switch-knob-tx-on-large));
+  }
+  .cd-switch-small .cd-switch-knob {
+    inset-block-start: var(--cd-switch-knob-padding-small);
+    inline-size: var(--cd-switch-knob-size-small);
+    block-size: var(--cd-switch-knob-size-small);
+    transform: translateX(var(--cd-switch-knob-tx-off-small));
+  }
+  .cd-switch-small.cd-switch-checked .cd-switch-knob {
+    transform: translateX(var(--cd-switch-knob-tx-on-small));
+  }
+
+  /* 内嵌文案：绝对定位、宽 20px、居中，对齐 Semi。 */
+  .cd-switch-checked-text,
+  .cd-switch-unchecked-text {
+    position: absolute;
+    inset-block: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    border-radius: var(--cd-border-radius-full);
-    background: var(--cd-switch-knob-bg);
-    transition: inset-inline-start var(--cd-motion-duration-mid) var(--cd-motion-ease-standard);
+    inline-size: var(--cd-switch-text-width);
+    block-size: 100%;
+    font-size: var(--cd-switch-text-font-size);
+    line-height: 1;
   }
-  .cd-switch--on .cd-switch__knob {
-    inset-inline-start: calc(100% - 2px);
-    transform: translateX(-100%);
+  .cd-switch-checked-text {
+    inset-inline-start: 0;
+    color: var(--cd-switch-checked-text-color);
   }
-  .cd-switch__label {
-    color: var(--cd-color-text-inverse);
-    font-size: var(--cd-font-size-small);
-    line-height: 1;
-    padding-inline: var(--cd-spacing-tight);
-  }
-  .cd-switch--on .cd-switch__label {
-    padding-inline-start: var(--cd-spacing-base-tight);
-    padding-inline-end: var(--cd-spacing-base-loose);
-  }
-  .cd-switch__spinner {
-    inline-size: 60%;
-    aspect-ratio: 1;
-    border: 2px solid var(--cd-color-grey-3);
-    border-block-start-color: var(--cd-color-primary);
-    border-radius: var(--cd-border-radius-full);
-    animation: cd-switch-spin var(--cd-motion-duration-slow) linear infinite;
-  }
-  @keyframes cd-switch-spin {
-    to {
-      transform: rotate(360deg);
-    }
+  .cd-switch-unchecked-text {
+    inset-inline-end: 0;
+    color: var(--cd-switch-unchecked-text-color);
+  }
+  .cd-switch-large .cd-switch-checked-text,
+  .cd-switch-large .cd-switch-unchecked-text {
+    inline-size: var(--cd-switch-text-width-large);
+    font-size: var(--cd-switch-text-font-size-large);
+  }
+
+  /* loading：复用 <Spin>（渐变弧 SVG），对齐 Semi 的 <Spin wrapperClassName>。
+     背景切浅灰/浅绿；Spin 根 .cd-switch-loading-spin 绝对定位到 knob 位置、
+     translateX 位移；SVG 恒白、尺寸对齐 Semi spin 宽度。 */
+  .cd-switch-loading {
+    background: var(--cd-switch-bg-spin-off);
+  }
+  .cd-switch-loading.cd-switch-checked {
+    background: var(--cd-switch-bg-spin-on);
   }
-  /* 视觉隐藏但对辅助技术可见（不可用 display:none / visibility:hidden）。 */
-  .cd-switch__sr-live {
+  /* :global —— Spin 根节点由子组件渲染，作用域选择器不覆盖，故用 :global 精确限定在 .cd-switch 内。
+     Spin 根盒子取消默认尺寸约束（收缩到内容），改由 SVG 尺寸决定；绝对定位到 knob 位置。 */
+  .cd-switch :global(.cd-switch-loading-spin) {
     position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    inline-size: auto;
+    block-size: auto;
+    transform: translate(var(--cd-switch-spin-tx-off), -50%);
+    transition: transform var(--cd-switch-transition-duration) var(--cd-switch-transition-easing);
+  }
+  /* spinner 恒白：覆盖 Spin wrapper 的默认 color（currentColor 继承源，对齐 Semi）。
+     wrapper 从 absolute 改回 static，让 Spin 根盒子随 SVG 内容收缩，避免相对 0 尺寸塌陷。 */
+  .cd-switch :global(.cd-switch-loading-spin .cd-spin-wrapper) {
+    position: static;
+    display: inline-flex;
+    align-items: center;
+    transform: none;
+    color: var(--cd-switch-spin-indicator);
+  }
+  .cd-switch.cd-switch-checked :global(.cd-switch-loading-spin) {
+    transform: translate(var(--cd-switch-spin-tx-on), -50%);
+  }
+  .cd-switch :global(.cd-switch-loading-spin svg) {
+    inline-size: var(--cd-switch-spin-size);
+    block-size: var(--cd-switch-spin-size);
+  }
+  .cd-switch-large :global(.cd-switch-loading-spin) {
+    transform: translate(var(--cd-switch-spin-tx-off-large), -50%);
   }
+  .cd-switch-large.cd-switch-checked :global(.cd-switch-loading-spin) {
+    transform: translate(var(--cd-switch-spin-tx-on-large), -50%);
+  }
+  .cd-switch-large :global(.cd-switch-loading-spin svg) {
+    inline-size: var(--cd-switch-spin-size-large);
+    block-size: var(--cd-switch-spin-size-large);
+  }
+  .cd-switch-small :global(.cd-switch-loading-spin) {
+    transform: translate(var(--cd-switch-spin-tx-off-small), -50%);
+  }
+  .cd-switch-small.cd-switch-checked :global(.cd-switch-loading-spin) {
+    transform: translate(var(--cd-switch-spin-tx-on-small), -50%);
+  }
+  .cd-switch-small :global(.cd-switch-loading-spin svg) {
+    inline-size: var(--cd-switch-spin-size-small);
+    block-size: var(--cd-switch-spin-size-small);
+  }
+
   @media (prefers-reduced-motion: reduce) {
     .cd-switch,
-    .cd-switch__knob {
+    .cd-switch-knob {
       transition: none;
     }
-    .cd-switch__spinner {
-      animation: none;
-    }
   }
 </style>

package/dist/switch/Switch.svelte.d.ts

@@ -1,55 +1,34 @@
 import type { Snippet } from 'svelte';
 type Size = 'small' | 'default' | 'large';
-type Status = 'default' | 'warning' | 'error';
-type NativeValue = string | number | boolean;
 interface Props {
-    value?: boolean;
-    defaultValue?: boolean;
-    /** 开态对应的实际值（onChange.nativeValue 与表单提交值）。 */
-    checkedValue?: NativeValue;
-    /** 关态对应的实际值。 */
-    uncheckedValue?: NativeValue;
+    /** 受控选中态；提供则为受控（对齐 Semi checked）。 */
+    checked?: boolean;
+    /** 非受控初始选中态（对齐 Semi defaultChecked）。 */
+    defaultChecked?: boolean;
     size?: Size;
-    status?: Status;
     disabled?: boolean;
     loading?: boolean;
-    checkedChildren?: string | Snippet;
-    uncheckedChildren?: string | Snippet;
-    name?: string;
-    /** 表单必填校验（须为开态）。 */
-    required?: boolean;
-    ariaLabel?: string;
-    /** 关联外部可见文本（如 Label 组件）的 id，体现可访问名（优先于 ariaLabel）。 */
-    ariaLabelledby?: string;
-    /** 切换后是否用 live region 播报新状态（文案经 locale）。 */
-    announceOnChange?: boolean;
-    /** 挂载后自动聚焦。 */
-    autofocus?: boolean;
-    onChange?: (v: boolean, detail?: {
-        value: boolean;
-        nativeValue: NativeValue;
-        event: Event;
-    }) => void;
-    /** 获得焦点。 */
-    onFocus?: (event: FocusEvent) => void;
-    /** 失去焦点。 */
-    onBlur?: (event: FocusEvent) => void;
-    /** 键盘按下（可用于自定义快捷键扩展）。 */
-    onKeydown?: (event: KeyboardEvent) => void;
-    /** checked 时显示的文字（checkedChildren 的字符串别名） */
-    checkedText?: string;
-    /** unchecked 时显示的文字 */
-    uncheckedText?: string;
-    /** checked 时的 Snippet（checkedChildren 的 Snippet 别名） */
-    checkedContent?: Snippet;
-    /** unchecked 时的 Snippet */
-    uncheckedContent?: Snippet;
-    /** 鼠标进入 */
+    /** 开态内嵌文字/图标（size=small 时不渲染）。 */
+    checkedText?: string | Snippet;
+    /** 关态内嵌文字/图标（size=small 时不渲染）。 */
+    uncheckedText?: string | Snippet;
+    /** 变更回调，对齐 Semi (checked, event)。 */
+    onChange?: (checked: boolean, event: Event) => void;
     onMouseEnter?: (e: MouseEvent) => void;
-    /** 鼠标离开 */
     onMouseLeave?: (e: MouseEvent) => void;
+    /** 透传根元素内联样式。 */
+    style?: string;
+    /** 透传根元素 class（本库惯例用 class，对齐 Semi className）。 */
+    class?: string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    'aria-errormessage'?: string;
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
 }
-declare const Switch: import("svelte").Component<Props, {}, "value">;
+declare const Switch: import("svelte").Component<Props, {}, "">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;
 //# sourceMappingURL=Switch.svelte.d.ts.map

package/dist/switch/Switch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAC9C,KAAK,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAE7C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,gBAAgB;IAChB,cAAc,CAAC,EAAE,WAAW,CAAC;IAC7B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACnC,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CACT,CAAC,EAAE,OAAO,EACV,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,WAAW,EAAE,WAAW,CAAC;QAAC,KAAK,EAAE,KAAK,CAAA;KAAE,KAChE,IAAI,CAAC;IACV,YAAY;IACZ,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,YAAY;IACZ,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,yBAAyB;IACzB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC3C,6CAA6C;IAC7C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uDAAuD;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,2BAA2B;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW;IACX,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,WAAW;IACX,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;CACxC;AAoIH,QAAA,MAAM,MAAM,gDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Switch.svelte.d.ts","sourceRoot":"","sources":["../../src/switch/Switch.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAIpC,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1C,UAAU,KAAK;IACb,qCAAqC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,wCAAwC;IACxC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC/B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACjC,qCAAqC;IACrC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACpD,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAwFH,QAAA,MAAM,MAAM,2CAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}