@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/checkbox/Checkbox.svelte

@@ -1,37 +1,53 @@
 <!--
-  Checkbox — see specs/components/input/Checkbox.spec.md
+  Checkbox — 严格对齐 Semi（checkbox.tsx / checkboxInner.tsx）。
   Works standalone (controlled / uncontrolled) or inside CheckboxGroup via context.
+  DOM class 镜像 Semi 连字符体系（cd-checkbox / -inner / -inner-display / -addon / -content）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { useId } from '@chenzy-design/core';
+  import { IconCheckboxTick, IconCheckboxIndeterminate } from '@chenzy-design/icons';
   import {
     getCheckboxGroupContext,
     type CheckboxValue,
-    type CheckboxSize,
     type CheckboxType,
-    type CheckboxStatus,
+    type CheckboxEvent,
   } from './context.js';
 
-  type Status = CheckboxStatus;
-
   interface Props {
     checked?: boolean;
     defaultChecked?: boolean;
     indeterminate?: boolean;
     value?: CheckboxValue;
     disabled?: boolean;
-    size?: CheckboxSize;
-    status?: Status;
-    /** Display form. card adds border+background and expands the hit area to the whole card; pureCard is borderless. */
+    /** Display form. card adds border+background and expands the hit area to the whole card; pureCard hides the box. */
     type?: CheckboxType;
     name?: string;
-    extra?: string | undefined;
+    /** 辅助说明，可传富内容（对齐 Semi ReactNode）。 */
+    extra?: Snippet | string;
     id?: string;
     addonId?: string;
     extraId?: string;
     preventScroll?: boolean;
-    onChange?: (checked: boolean) => void;
+    /** 无可见文本 label 时提供可访问名（如嵌在 Tree 行内、label 由外部承载时）。 */
+    ariaLabel?: string;
+    /** 关联外部 label 的 id（对齐 Semi withField aria-labelledby 注入）。 */
+    ariaLabelledby?: string;
+    /** 关联外部辅助说明的 id（对齐 Semi withField aria-describedby 注入）。 */
+    ariaDescribedby?: string;
+    /** 关联外部错误提示的 id（对齐 Semi withField aria-errormessage 注入）。 */
+    ariaErrormessage?: string;
+    /** 标记为必填（对齐 Semi withField aria-required 注入）。 */
+    ariaRequired?: boolean;
+    /** a11y: 标记为无效（校验失败时，对齐 Semi aria-invalid）。 */
+    ariaInvalid?: boolean;
+    /** a11y: wrapper role（Group 内为 listitem）。 */
+    role?: string;
+    /** 根容器内联样式（对齐 Semi style，可设 width 等）。 */
+    style?: string;
+    /** 根容器自定义类名（与内置 cd-checkbox 并存，对齐 Semi className）。 */
+    class?: string;
+    onChange?: (e: CheckboxEvent) => void;
     children?: Snippet;
   }
 
@@ -41,8 +57,6 @@
     indeterminate = false,
     value,
     disabled = false,
-    size = 'default',
-    status = 'default',
     type = 'default',
     name,
     extra,
@@ -50,6 +64,15 @@
     addonId,
     extraId: extraIdProp,
     preventScroll,
+    ariaLabel,
+    ariaLabelledby,
+    ariaDescribedby,
+    ariaErrormessage,
+    ariaRequired,
+    ariaInvalid,
+    role,
+    style,
+    class: className,
     onChange,
     children,
   }: Props = $props();
@@ -58,6 +81,8 @@
 
   const fieldId = resolveId();
   const extraId = $derived(extraIdProp ?? (extra ? `${fieldId}-extra` : undefined));
+  // 有可见标签内容时自动生成 addonId 关联 aria-labelledby（对齐 Semi setAddonId）。
+  const resolvedAddonId = $derived(addonId ?? (children ? `${fieldId}-addon` : undefined));
 
   function resolveId(): string {
     return id ?? useId('cd-checkbox');
@@ -65,11 +90,22 @@
 
   const isControlled = $derived(checked !== undefined);
   let inner = $state(getInitialChecked());
+  let inputEl = $state<HTMLInputElement | null>(null);
 
   function getInitialChecked(): boolean {
     return defaultChecked;
   }
 
+  /** Imperatively focus the native checkbox input (honors `preventScroll`). */
+  export function focus(): void {
+    inputEl?.focus(preventScroll !== undefined ? { preventScroll } : undefined);
+  }
+
+  /** Imperatively blur the native checkbox input. */
+  export function blur(): void {
+    inputEl?.blur();
+  }
+
   const isChecked = $derived(
     group && value !== undefined
       ? group.isChecked(value)
@@ -78,26 +114,66 @@
         : inner,
   );
 
-  const resolvedSize = $derived(group ? group.getSize() : size);
   const resolvedDisabled = $derived(disabled || (group ? group.getDisabled() : false));
   const resolvedName = $derived(name ?? group?.getName());
   // Group transparently provides `type`; a per-item non-default `type` overrides it.
   const resolvedType = $derived(type !== 'default' ? type : (group?.getType() ?? 'default'));
-  // Group transparently provides `status`; a per-item non-default `status` overrides it.
-  const resolvedStatus = $derived(status !== 'default' ? status : (group?.getStatus() ?? 'default'));
+  const isCardType = $derived(resolvedType === 'card' || resolvedType === 'pureCard');
+  const isPureCardType = $derived(resolvedType === 'pureCard');
+
+  /** 构造对齐 Semi 的 CheckboxEvent（checkbox.tsx:104-126）。 */
+  function makeEvent(next: boolean, e: Event): CheckboxEvent {
+    return {
+      target: { checked: next, value },
+      stopPropagation: () => e.stopPropagation(),
+      preventDefault: () => e.preventDefault(),
+      nativeEvent: {
+        stopImmediatePropagation: () => e.stopImmediatePropagation(),
+      },
+    };
+  }
 
-  function handleChange(e: Event & { currentTarget: HTMLInputElement }) {
-    const next = e.currentTarget.checked;
+  // 对齐 Semi：点击整个 checkbox（含 addon 文本 / extra / card）都切换（checkbox.tsx:299
+  // onClick={handleChange}）。点击与键盘走互斥两条路径，避免双触发：
+  //   · 指针点击 → 根 wrapper 的 onclick（input pointer-events:none，故 target 恒非 input，
+  //     无原生 checkbox toggle 干扰）；
+  //   · 键盘 Space / 聚焦态 → 原生 input 自身产生 change，走 input 的 onchange。
+  function commit(next: boolean, e: Event) {
+    const evt = makeEvent(next, e);
     if (group && value !== undefined) {
-      group.toggle(value);
-      onChange?.(next);
+      group.toggle(value, evt);
+      onChange?.(evt);
       return;
     }
     // Controlled (`checked=` / `bind:checked`): parent owns `checked`; propagate
     // only via `onChange`. Writing the prop AND firing `onChange` loops.
     // Uncontrolled: keep our own state in sync.
     if (!isControlled) inner = next;
-    onChange?.(next);
+    onChange?.(evt);
+  }
+
+  /** 指针点击 wrapper（含文本/额外区）触发切换（对齐 Semi onClick）。input 已 pointer-events:none，
+   *  指针命中恒不落在 input 上；键盘 Space 会在 input 上派发 click（target===input）并冒泡到此，
+   *  那条路径交给 input 的 onchange 处理，此处按 target 跳过，避免与 change 双触发。 */
+  function handleWrapperClick(e: MouseEvent) {
+    if (resolvedDisabled) return;
+    if (e.target === inputEl) return; // 键盘 Space 派发的 click：让 onchange 处理
+    inputEl?.focus(preventScroll !== undefined ? { preventScroll } : undefined);
+    commit(indeterminate && !isChecked ? true : !isChecked, e);
+  }
+
+  /** 原生 input 的 change（键盘 Space / 聚焦态切换的唯一入口）。 */
+  function handleInputChange(e: Event & { currentTarget: HTMLInputElement }) {
+    commit(e.currentTarget.checked, e);
+  }
+
+  /** Enter 切换（对齐 Semi handleEnterPress）。原生 checkbox 只认 Space，Enter 是 Semi 额外行为。 */
+  function handleKeydown(e: KeyboardEvent) {
+    if (resolvedDisabled) return;
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commit(indeterminate && !isChecked ? true : !isChecked, e);
+    }
   }
 
   /** Set the indeterminate DOM property (not a reflected attribute). */
@@ -108,187 +184,302 @@
   const cls = $derived(
     [
       'cd-checkbox',
-      `cd-checkbox--${resolvedSize}`,
-      `cd-checkbox--${resolvedStatus}`,
-      resolvedType !== 'default' && `cd-checkbox--${resolvedType}`,
-      isChecked && 'cd-checkbox--checked',
-      indeterminate && !isChecked && 'cd-checkbox--indeterminate',
-      resolvedDisabled && 'cd-checkbox--disabled',
+      isChecked ? 'cd-checkbox-checked' : 'cd-checkbox-unChecked',
+      indeterminate && !isChecked && 'cd-checkbox-indeterminate',
+      resolvedDisabled && 'cd-checkbox-disabled',
+      isCardType && 'cd-checkbox-cardType',
+      isCardType && resolvedDisabled && 'cd-checkbox-cardType_disabled',
+      isCardType && !resolvedDisabled && 'cd-checkbox-cardType_enable',
+      isCardType && isChecked && !resolvedDisabled && 'cd-checkbox-cardType_checked',
+      isCardType && isChecked && resolvedDisabled && 'cd-checkbox-cardType_checked_disabled',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' '),
+  );
+
+  const innerCls = $derived(
+    [
+      'cd-checkbox-inner',
+      isChecked && 'cd-checkbox-inner-checked',
+      isPureCardType && 'cd-checkbox-inner-pureCardType',
     ]
       .filter(Boolean)
       .join(' '),
   );
+
+  const extraIsString = $derived(typeof extra === 'string');
+
+  // 合并内部生成的关联 id 与外部（withField）注入的 aria id：
+  // labelledby = 内部 addonId（有可见 children 时）拼外部 ariaLabelledby；
+  // describedby = 内部 extraId（有 extra 时）拼外部 ariaDescribedby。
+  const resolvedLabelledby = $derived(
+    [children ? resolvedAddonId : undefined, ariaLabelledby].filter(Boolean).join(' ') || undefined,
+  );
+  const resolvedDescribedby = $derived(
+    [extraId, ariaDescribedby].filter(Boolean).join(' ') || undefined,
+  );
 </script>
 
-<label class={cls} for={fieldId}>
-  <input
-    {@attach indeterminateAttach}
-    id={fieldId}
-    class="cd-checkbox__input"
-    type="checkbox"
-    name={resolvedName}
-    value={value !== undefined ? String(value) : undefined}
-    checked={isChecked}
-    disabled={resolvedDisabled}
-    aria-invalid={resolvedStatus === 'error' || undefined}
-    aria-labelledby={addonId}
-    aria-describedby={extraId}
-    onchange={handleChange}
-  />
-  <span class="cd-checkbox__box" aria-hidden="true">
-    {#if indeterminate && !isChecked}
-      <span class="cd-checkbox__dash"></span>
-    {:else if isChecked}
-      <svg class="cd-checkbox__check" viewBox="0 0 16 16" focusable="false">
-        <path
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          d="M3.5 8.5 6.5 11.5 12.5 4.5"
-        />
-      </svg>
-    {/if}
+<!-- Semi 注释：label 更好，但用 span 是为规避 gitlab #364（对齐 Semi 根用 span 非 label）。
+     切换挂在根 span 的 click 上（对齐 Semi onClick={handleChange}），点击整个 checkbox（含
+     addon 文本 / extra / card）都切换；原生 input 只承载焦点 / a11y，其 change 被 preventDefault
+     旁路，状态由受控 checked 驱动。 -->
+<span
+  class={cls}
+  {style}
+  id={id}
+  {role}
+  aria-labelledby={resolvedLabelledby}
+  onclick={handleWrapperClick}
+  onkeydown={handleKeydown}
+>
+  <span class={innerCls}>
+    <input
+      bind:this={inputEl}
+      {@attach indeterminateAttach}
+      id={fieldId}
+      class="cd-checkbox-input"
+      type="checkbox"
+      name={resolvedName}
+      value={value !== undefined ? String(value) : undefined}
+      checked={isChecked}
+      disabled={resolvedDisabled}
+      aria-label={!children ? ariaLabel : undefined}
+      aria-labelledby={resolvedLabelledby}
+      aria-describedby={resolvedDescribedby}
+      aria-errormessage={ariaErrormessage}
+      aria-required={ariaRequired || undefined}
+      aria-invalid={ariaInvalid || undefined}
+      onchange={handleInputChange}
+    />
+    <span class="cd-checkbox-inner-display" aria-hidden="true">
+      {#if indeterminate && !isChecked}
+        <IconCheckboxIndeterminate size="inherit" />
+      {:else if isChecked}
+        <IconCheckboxTick size="inherit" />
+      {/if}
+    </span>
   </span>
   {#if children || extra}
-    <span class="cd-checkbox__content" id={addonId}>
-      {#if children}<span class="cd-checkbox__label">{@render children()}</span>{/if}
-      {#if extra}<span class="cd-checkbox__extra" id={extraId}>{extra}</span>{/if}
-    </span>
+    <div class="cd-checkbox-content">
+      {#if children}<span class="cd-checkbox-addon" id={resolvedAddonId}>{@render children()}</span>{/if}
+      {#if extra}
+        <div
+          class="cd-checkbox-extra"
+          class:cd-checkbox-cardType_extra_noChildren={isCardType && !children}
+          id={extraId}
+        >
+          {#if extraIsString}{extra}{:else}{@render (extra as Snippet)()}{/if}
+        </div>
+      {/if}
+    </div>
   {/if}
-</label>
+</span>
 
 <style>
   .cd-checkbox {
+    box-sizing: border-box;
+    position: relative;
     display: inline-flex;
     align-items: flex-start;
-    gap: var(--cd-checkbox-label-gap);
-    color: var(--cd-color-text-0);
+    column-gap: var(--cd-spacing-checkbox-label-paddingleft);
+    color: var(--cd-color-checkbox-label-text-default);
     cursor: pointer;
     line-height: 1.4;
+    transition:
+      background-color var(--cd-transition-duration-checkbox-bg) var(--cd-transition-function-checkbox-bg)
+        var(--cd-transition-delay-checkbox-bg),
+      border-color var(--cd-transition-duration-checkbox-border) var(--cd-transition-function-checkbox-border)
+        var(--cd-transition-delay-checkbox-border);
   }
-  .cd-checkbox--disabled {
+  .cd-checkbox-disabled {
     cursor: not-allowed;
-    opacity: 0.5;
   }
-  .cd-checkbox__input {
+
+  /* —— inner：三层 span.inner > input + span.inner-display —— */
+  .cd-checkbox-inner {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    inline-size: var(--cd-checkbox-size-default);
+    block-size: var(--cd-checkbox-inner-height);
+    user-select: none;
+    cursor: pointer;
+  }
+  /* 原生 input 铺满 inner，opacity:0 承载键盘焦点与 a11y（对齐 Semi checkbox.scss:22-30）。
+     pointer-events:none：切换由根 wrapper 的 click 承载（对齐 Semi onClick），若 input 仍接收指针
+     则点框时浏览器会先原生 toggle input.checked，再与受控 checked 绑定打架 —— 表现为根 class 已
+     checked 但 input.checked 停在旧值（受控值未变时 Svelte 跳过 DOM 纠正），真机点框失灵。
+     焦点改由 handleToggle 内 inputEl.focus() 显式承载（对齐 Semi focusCheckboxEntity）。 */
+  .cd-checkbox-input {
     position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
     margin: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: inherit;
+    pointer-events: none;
   }
-  .cd-checkbox__box {
+  .cd-checkbox-inner-display {
+    box-sizing: border-box;
     position: relative;
-    flex: 0 0 auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     inline-size: var(--cd-checkbox-size-default);
     block-size: var(--cd-checkbox-size-default);
-    background: var(--cd-checkbox-bg);
-    border: 1px solid var(--cd-checkbox-border);
-    border-radius: var(--cd-checkbox-radius);
-    color: var(--cd-checkbox-mark-color);
+    /* Semi 图标经字号驱动填满整盒（图标 viewBox 自带视觉内边距）。 */
+    font-size: var(--cd-checkbox-size-default);
+    background: var(--cd-color-checkbox-default-bg-default);
+    border-radius: var(--cd-radius-checkbox-inner);
+    /* Semi 用 inset box-shadow 画描边（checkbox.scss:110）。 */
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-default-border-default);
+    color: var(--cd-color-checkbox-checked-icon-default);
     transition:
-      background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
-      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+      background-color var(--cd-transition-duration-checkbox-bg) var(--cd-transition-function-checkbox-bg)
+        var(--cd-transition-delay-checkbox-bg),
+      box-shadow var(--cd-transition-duration-checkbox-border) var(--cd-transition-function-checkbox-border)
+        var(--cd-transition-delay-checkbox-border);
   }
-  .cd-checkbox--small .cd-checkbox__box {
-    inline-size: var(--cd-checkbox-size-small);
-    block-size: var(--cd-checkbox-size-small);
+
+  /* 未选中态悬浮（对齐 Semi：描边 focus-border、背景 fill-0） */
+  .cd-checkbox:hover:not(.cd-checkbox-disabled):not(.cd-checkbox-checked):not(.cd-checkbox-indeterminate)
+    .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-default-bg-hover);
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-default-border-hover);
   }
-  .cd-checkbox--large .cd-checkbox__box {
-    inline-size: var(--cd-checkbox-size-large);
-    block-size: var(--cd-checkbox-size-large);
+  /* 未选中态按下 */
+  .cd-checkbox:active:not(.cd-checkbox-disabled):not(.cd-checkbox-checked):not(.cd-checkbox-indeterminate)
+    .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-default-bg-active);
   }
-  /* 未选中态悬浮：对齐 Semi（描边 focus-border、背景 fill-0） */
-  .cd-checkbox:hover:not(.cd-checkbox--disabled):not(.cd-checkbox--checked):not(.cd-checkbox--indeterminate)
-    .cd-checkbox__box {
-    background: var(--cd-checkbox-bg-hover);
-    border-color: var(--cd-checkbox-border-hover);
+
+  /* 选中 / 半选态 */
+  .cd-checkbox-checked .cd-checkbox-inner-display,
+  .cd-checkbox-indeterminate .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-checked-bg-default);
+    color: var(--cd-color-checkbox-checked-icon-default);
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-checked-border-default);
   }
-  .cd-checkbox--checked .cd-checkbox__box,
-  .cd-checkbox--indeterminate .cd-checkbox__box {
-    background: var(--cd-checkbox-bg-checked);
-    border-color: var(--cd-checkbox-border-checked);
+  .cd-checkbox-checked:hover:not(.cd-checkbox-disabled) .cd-checkbox-inner-display,
+  .cd-checkbox-indeterminate:hover:not(.cd-checkbox-disabled) .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-checked-bg-hover);
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-checked-border-hover);
   }
-  .cd-checkbox--warning .cd-checkbox__box {
-    border-color: var(--cd-color-warning);
+  .cd-checkbox-checked:active:not(.cd-checkbox-disabled) .cd-checkbox-inner-display,
+  .cd-checkbox-indeterminate:active:not(.cd-checkbox-disabled) .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-checked-bg-active);
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-checked-border-active);
   }
-  .cd-checkbox--error .cd-checkbox__box {
-    border-color: var(--cd-color-danger);
+
+  /* 禁用态 */
+  .cd-checkbox-disabled .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-disabled-bg-default);
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-disabled-border-default);
+    color: var(--cd-color-checkbox-checked-icon-disabled);
   }
-  .cd-checkbox__input:focus-visible + .cd-checkbox__box {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
+  .cd-checkbox-disabled.cd-checkbox-checked .cd-checkbox-inner-display,
+  .cd-checkbox-disabled.cd-checkbox-indeterminate .cd-checkbox-inner-display {
+    opacity: 0.75;
+    background: var(--cd-color-checkbox-checked-bg-disabled);
+    box-shadow: inset 0 0 0 var(--cd-size-checkbox-inner-shadow) var(--cd-color-checkbox-checked-bg-disabled);
+    color: var(--cd-color-checkbox-checked-icon-disabled);
   }
-  .cd-checkbox__check {
-    inline-size: 80%;
-    block-size: 80%;
+  .cd-checkbox-disabled .cd-checkbox-addon,
+  .cd-checkbox-disabled .cd-checkbox-extra {
+    color: var(--cd-color-checkbox-label-text-disabled);
   }
-  .cd-checkbox__dash {
-    inline-size: 60%;
-    block-size: 2px;
-    background: currentColor;
-    border-radius: var(--cd-border-radius-full);
+
+  /* 焦点环：input focus-visible 时给 inner-display 描 focus ring */
+  .cd-checkbox-input:focus-visible + .cd-checkbox-inner-display {
+    outline: var(--cd-width-checkbox-outline) solid var(--cd-color-checkbox-primary-outline-focus);
+    outline-offset: 0;
   }
-  .cd-checkbox__content {
-    display: inline-flex;
+
+  /* —— 内容区 —— */
+  .cd-checkbox-content {
+    flex: 1;
+    display: flex;
     flex-direction: column;
-    gap: var(--cd-spacing-extra-tight);
+    row-gap: var(--cd-spacing-checkbox-extra-margintop);
   }
-  .cd-checkbox__extra {
-    color: var(--cd-color-text-2);
+  .cd-checkbox-addon {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    color: var(--cd-color-checkbox-label-text-default);
+    line-height: var(--cd-font-checkbox-label-lineheight);
+    user-select: none;
+  }
+  .cd-checkbox-extra {
+    box-sizing: border-box;
+    color: var(--cd-color-checkbox-extra-text-default);
     font-size: var(--cd-font-size-small);
   }
 
-  /* card / pureCard 形态：整张卡片即命中区，hover 抬升背景，选中描边 primary。 */
-  .cd-checkbox--card,
-  .cd-checkbox--pureCard {
-    padding: var(--cd-checkbox-card-padding);
-    border-radius: var(--cd-checkbox-card-radius);
-    background: var(--cd-checkbox-card-bg);
-    transition:
-      background-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard),
-      border-color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
+  /* —— card / pureCard 形态 —— */
+  .cd-checkbox-cardType {
+    flex-wrap: nowrap;
+    align-items: flex-start;
+    border-radius: var(--cd-radius-checkbox-cardtype);
+    padding: var(--cd-spacing-checkbox-cardtype-paddingy) var(--cd-spacing-checkbox-cardtype-paddingx);
+    background: transparent;
+    border: var(--cd-width-checkbox-cardtype-border) solid var(--cd-color-checkbox-cardtype-border-default);
+  }
+  .cd-checkbox-cardType .cd-checkbox-inner-display {
+    background: var(--cd-color-checkbox-cardtype-inner-bg-default);
+  }
+  /* pureCard：隐藏勾选框但保留 input 承载 a11y 焦点（对齐 Semi checkbox.scss:204-210） */
+  .cd-checkbox-inner-pureCardType {
+    opacity: 0;
+    width: 0;
+  }
+  .cd-checkbox-cardType .cd-checkbox-addon {
+    font-weight: var(--cd-font-checkbox-cardtype-addon-fontweight);
+    font-size: var(--cd-font-checkbox-cardtype-addon-size);
+    line-height: var(--cd-font-checkbox-cardtype-addon-lineheight);
+    color: var(--cd-color-checkbox-cardtype-addon-text-default);
+  }
+  .cd-checkbox-cardType .cd-checkbox-extra {
+    font-size: var(--cd-font-checkbox-cardtype-extra-size);
+    line-height: var(--cd-font-checkbox-cardtype-extra-lineheight);
+    color: var(--cd-color-checkbox-cardtype-extra-text-default);
+  }
+  .cd-checkbox-cardType_extra_noChildren {
+    margin-top: 0;
+  }
+  .cd-checkbox-cardType_enable:hover {
+    background: var(--cd-color-checkbox-cardtype-bg-hover);
   }
-  .cd-checkbox--card {
-    border: 1px solid var(--cd-checkbox-card-border);
+  .cd-checkbox-cardType_enable:active {
+    background: var(--cd-color-checkbox-cardtype-bg-active);
   }
-  .cd-checkbox--pureCard {
-    border: 1px solid transparent;
+  .cd-checkbox-cardType_checked {
+    background: var(--cd-color-checkbox-cardtype-checked-bg);
+    border-color: var(--cd-color-checkbox-cardtype-checked-border-default);
   }
-  .cd-checkbox--card:hover:not(.cd-checkbox--disabled),
-  .cd-checkbox--pureCard:hover:not(.cd-checkbox--disabled) {
-    background: var(--cd-checkbox-card-bg-hover);
+  .cd-checkbox-cardType_checked:hover {
+    border-color: var(--cd-color-checkbox-cardtype-checked-border-hover);
   }
-  .cd-checkbox--card.cd-checkbox--checked,
-  .cd-checkbox--card.cd-checkbox--indeterminate,
-  .cd-checkbox--pureCard.cd-checkbox--checked,
-  .cd-checkbox--pureCard.cd-checkbox--indeterminate {
-    border-color: var(--cd-checkbox-card-border-checked);
-    background: var(--cd-checkbox-card-bg-checked); /* 对齐 Semi 卡片选中 primary-light-default */
+  .cd-checkbox-cardType_checked:active {
+    border-color: var(--cd-color-checkbox-cardtype-checked-border-active);
   }
-  .cd-checkbox--card .cd-checkbox__input:focus-visible ~ .cd-checkbox__box,
-  .cd-checkbox--pureCard .cd-checkbox__input:focus-visible ~ .cd-checkbox__box {
-    box-shadow: none;
+  .cd-checkbox-cardType_checked_disabled {
+    background: var(--cd-color-checkbox-cardtype-checked-disabled-bg);
+    border-color: var(--cd-color-checkbox-cardtype-checked-disabled-border-default);
   }
-  .cd-checkbox--card:has(.cd-checkbox__input:focus-visible),
-  .cd-checkbox--pureCard:has(.cd-checkbox__input:focus-visible) {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
+  .cd-checkbox-cardType_disabled:hover,
+  .cd-checkbox-cardType_disabled:active {
+    background: transparent;
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .cd-checkbox__box,
-    .cd-checkbox--card,
-    .cd-checkbox--pureCard {
+    .cd-checkbox,
+    .cd-checkbox-inner-display {
       transition: none;
     }
   }