@chenzy-design/svelte 0.1.0 → 0.2.0

package/src/popconfirm/Popconfirm.svelte

@@ -1,724 +0,0 @@
-<!--
-  Popconfirm — 气泡确认（feedback）。
-  锚定触发元素的就地二次确认：title/content + 危险分级 type，确认/取消双按钮，
-  12 方位 + autoAdjustOverflow flip 碰撞避让，role=dialog non-modal。
-  定位：portal 到 getPopupContainer()（缺省 body）+ position:fixed（脱离 overflow:hidden 裁剪）。
-  触发：triggerType='click'（默认，点击 toggle）| 'hover'（悬停 enter/leave delay 开关，
-  指针移入浮层维持 open，复用 Dropdown 的 hover 定时器模式）。
-  异步确认：onConfirm 返回 Promise 时确认按钮进入 loading 态，resolve 后关闭、reject 保持打开
-  （对齐 ConfirmModal 的异步编排）。
-  复用 core 原语：useId、useDismiss（外部点击/Esc 关闭，popup 列入 extraTargets）、
-  useFocusTrap（焦点捕获+归还）、computePosition/useFloating（container 选项接 getPopupContainer）。
-  浮层惰性挂载（首开才挂）；destroyOnClose 默认 true 关闭即卸载，false 时保留 DOM（--hidden 隐藏）。
-  motion 默认开（淡入+轻缩放），reduced-motion 退化为无动效。arrowPointAtCenter 透传 floating。
-  okButtonProps/cancelButtonProps 透传额外按钮属性（onclick/loading/disabled 由组件托管，不被覆盖）。
-  关闭回调 reason 来源细分：'confirm'（确认按钮）| 'cancel'（取消按钮）| 'trigger'（点击/键盘/hover toggle）
-  | 'esc'（Esc 键）| 'outsideClick'（外部点击）；esc/outsideClick 由 useDismiss 的 DismissReason 透传。
--->
-<script lang="ts">
-  import type { Snippet } from 'svelte';
-  import { untrack } from 'svelte';
-  import {
-    useId,
-    useDismiss,
-    useFocusTrap,
-    useLiveAnnouncer,
-    parsePlacement,
-    type Placement,
-    type Side,
-  } from '@chenzy-design/core';
-  import { Button } from '../button/index.js';
-  import { useLocale } from '../locale-provider/index.js';
-  import { floating } from '../_floating/use-floating.js';
-
-  type PopType = 'default' | 'danger' | 'warning';
-  type OkType = 'primary' | 'danger';
-  type TriggerType = 'click' | 'hover';
-  type DismissReason = 'trigger' | 'confirm' | 'cancel' | 'esc' | 'outsideClick';
-
-  /** 透传给确认/取消 Button 的额外属性（type/theme/size/block/disabled/ariaLabel 等，不含 onclick/loading：由组件托管） */
-  type ExtraButtonProps = {
-    type?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-    theme?: 'solid' | 'borderless' | 'light' | 'outline';
-    size?: 'small' | 'default' | 'large';
-    block?: boolean;
-    disabled?: boolean;
-    htmlType?: 'button' | 'submit' | 'reset';
-    ariaLabel?: string;
-  };
-
-  /** motion 配置：传 number 覆盖时长（ms），传 false 关闭过渡 */
-  interface MotionConfig {
-    /** 过渡时长（ms），缺省走 token --cd-popconfirm-motion-duration */
-    duration?: number;
-  }
-
-  interface Props {
-    open?: boolean;
-    /** open 别名（Semi 原始拼写） */
-    visible?: boolean;
-    defaultOpen?: boolean;
-    /** 非受控初始显隐（defaultOpen 别名，优先级低于 open） */
-    defaultVisible?: boolean;
-    title?: string;
-    titleSnippet?: Snippet;
-    content?: string;
-    contentSnippet?: Snippet;
-    type?: PopType;
-    icon?: Snippet | false;
-    okText?: string;
-    cancelText?: string;
-    okType?: OkType;
-    /** 取消按钮类型（对应 okType 的取消侧），透传给取消 Button 的 type；优先级高于 cancelButtonProps.type */
-    cancelType?: 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-    /** 透传确认按钮额外属性（onclick/loading 由组件托管，传入会被忽略） */
-    okButtonProps?: ExtraButtonProps;
-    /** 透传取消按钮额外属性（onclick/disabled 由组件托管，传入会被忽略） */
-    cancelButtonProps?: ExtraButtonProps;
-    showCancel?: boolean;
-    placement?: Placement;
-    /** placement 别名（Semi 原始拼写） */
-    position?: Placement;
-    disabled?: boolean;
-    closeOnEsc?: boolean;
-    closeOnOutsideClick?: boolean;
-    /** 关闭时销毁浮层 DOM，默认 true（卸载释放内存）；false 时首开后保留（--hidden 隐藏） */
-    destroyOnClose?: boolean;
-    /** 箭头是否指向触发元素中心，默认 false */
-    arrowPointAtCenter?: boolean;
-    /** 是否显示箭头三角，默认 false（浮层与触发器间无连接箭头） */
-    showArrow?: boolean;
-    /** 入场动效开关/配置，默认 true（受 prefers-reduced-motion 覆盖） */
-    motion?: boolean | MotionConfig;
-    /** 触发方式：'click' 点击 toggle（默认）| 'hover' 悬停开关 */
-    triggerType?: TriggerType;
-    /** hover 触发：指针进入到打开的延迟（ms） */
-    mouseEnterDelay?: number;
-    /** hover 触发：指针离开到关闭的延迟（ms） */
-    mouseLeaveDelay?: number;
-    /** 浮层 portal 容器，缺省 document.body */
-    getPopupContainer?: () => HTMLElement | null;
-    /** 浮层 z-index，默认 1030 */
-    zIndex?: number;
-    /** Tab 键是否在浮层内循环（焦点陷阱），默认 true */
-    guardFocus?: boolean;
-    /** Esc 关闭时是否将焦点归还给触发元素，默认 true */
-    returnFocusOnClose?: boolean;
-    /** 点击浮层内事件是否阻止冒泡到文档，默认 true */
-    stopPropagation?: boolean;
-    trigger?: Snippet;
-    onOpenChange?: (info: { open: boolean; reason: DismissReason }) => void;
-    /** 确认回调；返回 Promise 时确认按钮 loading，resolve 关闭 / reject 保持打开 */
-    onConfirm?: () => void | Promise<unknown>;
-    onCancel?: () => void;
-    /**
-     * 点击浮层外部，在关闭逻辑前触发（区别于 onOpenChange 的 outsideClick reason）。
-     * 调用 `event.preventDefault()` 可阻止默认关闭。
-     */
-    onClickOutside?: (event: MouseEvent) => void;
-    /** onClickOutside 别名（Semi 原始大写 S 拼写） */
-    onClickOutSide?: (event: MouseEvent) => void;
-    /** Esc 键按下时触发（在 closeOnEsc 关闭之前） */
-    onEscKeyDown?: (e: KeyboardEvent) => void;
-    /** 入场动效结束、浮层完全可见 */
-    onAfterOpen?: () => void;
-    /** 出场动效结束、DOM 卸载后 */
-    onAfterClose?: () => void;
-    class?: string;
-  }
-
-  let {
-    open,
-    visible,
-    defaultOpen = false,
-    defaultVisible,
-    title,
-    titleSnippet,
-    content,
-    contentSnippet,
-    type = 'default',
-    icon,
-    okText,
-    cancelText,
-    okType,
-    cancelType,
-    okButtonProps,
-    cancelButtonProps,
-    showCancel = true,
-    placement,
-    position,
-    disabled = false,
-    closeOnEsc = true,
-    closeOnOutsideClick = true,
-    destroyOnClose = true,
-    arrowPointAtCenter = false,
-    showArrow = false,
-    motion = true,
-    triggerType = 'click',
-    mouseEnterDelay = 150,
-    mouseLeaveDelay = 150,
-    getPopupContainer,
-    zIndex,
-    guardFocus = true,
-    returnFocusOnClose = true,
-    stopPropagation = true,
-    trigger,
-    onOpenChange,
-    onConfirm,
-    onCancel,
-    onClickOutside,
-    onClickOutSide,
-    onEscKeyDown,
-    onAfterOpen,
-    onAfterClose,
-    class: className,
-  }: Props = $props();
-
-  const loc = useLocale();
-  // 单例 live region（polite）：异步确认进入 loading 时播报「处理中」给屏幕阅读器。
-  // 命令式写入在事件回调里（confirm()，非 render 期），符合红线 #3。
-  const announcer = useLiveAnnouncer();
-
-  const popupId = useId('cd-popconfirm-popup');
-  const titleId = useId('cd-popconfirm-title');
-  const contentId = useId('cd-popconfirm-content');
-
-  // visible 为 open 别名；open 优先。
-  const resolvedOpen = $derived(open ?? visible);
-  // position 为 placement 别名；placement 优先，缺省 'top'。
-  const resolvedPlacementProp = $derived<Placement>(placement ?? position ?? 'top');
-
-  // --- 受控 open (红线 #1)：不无条件回写 open，仅 onOpenChange ---
-  const isControlled = $derived(resolvedOpen !== undefined);
-  let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(isControlled ? !!resolvedOpen : innerOpen);
-
-  function getInitialOpen(): boolean {
-    // defaultVisible 为 defaultOpen 的别名，优先于 defaultOpen
-    return defaultVisible ?? defaultOpen;
-  }
-
-  // 确认按钮 type 优先级：显式 okType > okButtonProps.type > 由 type 推导默认（兜底必为非空值）。
-  type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
-  const resolvedOkType = $derived<ButtonType>(
-    okType ?? okButtonProps?.type ?? (type === 'danger' ? 'danger' : 'primary'),
-  );
-  // 取消按钮 type 优先级：显式 cancelType > cancelButtonProps.type > 'secondary'（默认）。
-  const resolvedCancelType = $derived<ButtonType>(
-    cancelType ?? cancelButtonProps?.type ?? 'secondary',
-  );
-
-  const hasContent = $derived(Boolean(contentSnippet) || Boolean(content));
-
-  // motion：false（或 {duration:0}）关闭过渡；number/object.duration 覆盖 token 时长。
-  const motionEnabled = $derived(motion !== false);
-  const motionDuration = $derived(
-    typeof motion === 'object' && typeof motion.duration === 'number'
-      ? motion.duration
-      : undefined,
-  );
-
-  // --- destroyOnClose / 惰性挂载（红线 #2 纯派生）：首开才挂；关闭后 destroyOnClose=false 保留 DOM（--hidden），true 卸载。 ---
-  let hasBeenOpened = $state(false);
-  $effect(() => {
-    if (isOpen) hasBeenOpened = true;
-  });
-  const shouldRender = $derived(isOpen || (hasBeenOpened && !destroyOnClose));
-
-  // 浮层根内联样式：motion duration 覆盖 token 时长；zIndex 覆盖 CSS 变量。
-  const popupStyle = $derived.by(() => {
-    const parts: string[] = [];
-    if (motionDuration !== undefined) parts.push(`--cd-popconfirm-motion-duration:${motionDuration}ms`);
-    if (zIndex !== undefined) parts.push(`z-index:${zIndex}`);
-    return parts.length > 0 ? parts.join(';') : undefined;
-  });
-
-  // flip 后的实际方位（驱动箭头朝向）+ 箭头交叉轴偏移
-  let resolvedPlacement = $state<Placement>(untrack(() => resolvedPlacementProp));
-  const resolvedSide = $derived<Side>(parsePlacement(resolvedPlacement).side);
-  let arrowOffset = $state(0);
-
-  const popupCls = $derived(
-    [
-      'cd-popconfirm__popup',
-      `cd-popconfirm__popup--${resolvedSide}`,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' '),
-  );
-
-  const arrowStyle = $derived(
-    resolvedSide === 'top' || resolvedSide === 'bottom'
-      ? `inset-inline-start:${arrowOffset}px`
-      : `inset-block-start:${arrowOffset}px`,
-  );
-
-  function setOpen(next: boolean, reason: DismissReason) {
-    if (!isControlled) innerOpen = next;
-    onOpenChange?.({ open: next, reason });
-  }
-
-  function onTriggerClick() {
-    if (disabled || triggerType !== 'click') return;
-    setOpen(!isOpen, 'trigger');
-  }
-
-  function onTriggerKeydown(e: KeyboardEvent) {
-    if (disabled) return;
-    // 键盘可达性：无论 click/hover，Enter/Space 都能展开（hover 模式键盘等价）。
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      setOpen(!isOpen, 'trigger');
-    }
-  }
-
-  // --- hover 延迟开关 (红线 #3)：setTimeout 存普通变量，cleanup 清除。
-  //     参考 Dropdown：enter 延迟开、leave 延迟关，指针移入浮层维持 open。 ---
-  let enterTimer: ReturnType<typeof setTimeout> | undefined;
-  let leaveTimer: ReturnType<typeof setTimeout> | undefined;
-
-  function clearTimers() {
-    if (enterTimer !== undefined) {
-      clearTimeout(enterTimer);
-      enterTimer = undefined;
-    }
-    if (leaveTimer !== undefined) {
-      clearTimeout(leaveTimer);
-      leaveTimer = undefined;
-    }
-  }
-
-  function onTriggerPointerEnter() {
-    if (disabled || triggerType !== 'hover') return;
-    clearTimers();
-    enterTimer = setTimeout(() => setOpen(true, 'trigger'), mouseEnterDelay);
-  }
-
-  function onTriggerPointerLeave() {
-    if (disabled || triggerType !== 'hover') return;
-    clearTimers();
-    leaveTimer = setTimeout(() => setOpen(false, 'trigger'), mouseLeaveDelay);
-  }
-
-  // popup portal 到容器后不在 rootEl 子树内：指针移入浮层需取消关闭，移出再延迟关。
-  function onPopupPointerEnter() {
-    if (triggerType !== 'hover') return;
-    clearTimers();
-  }
-
-  function onPopupPointerLeave() {
-    if (triggerType !== 'hover') return;
-    clearTimers();
-    leaveTimer = setTimeout(() => setOpen(false, 'trigger'), mouseLeaveDelay);
-  }
-
-  $effect(() => clearTimers);
-
-  // --- 异步确认 (红线 #3)：onConfirm 返回 Promise 时确认按钮 loading，
-  //     resolve 后关闭、reject 保持打开（对齐 ConfirmModal）。 ---
-  let confirmLoading = $state(false);
-
-  async function confirm() {
-    if (confirmLoading) return;
-    const result = onConfirm?.();
-    if (result instanceof Promise) {
-      confirmLoading = true;
-      announcer.announce(loc().t('Popconfirm.confirming'));
-      try {
-        await result;
-        confirmLoading = false;
-        setOpen(false, 'confirm');
-      } catch {
-        confirmLoading = false; // reject：复位，保持打开
-      }
-    } else {
-      setOpen(false, 'confirm');
-    }
-  }
-
-  function cancel() {
-    if (confirmLoading) return;
-    onCancel?.();
-    setOpen(false, 'cancel');
-  }
-
-  // 外部点击/Esc 统一按取消处理，reason 由 useDismiss 细分（'esc' | 'outsideClick'）
-  function dismiss(reason: DismissReason) {
-    if (confirmLoading) return; // 异步确认进行中不被外部点击/Esc 打断
-    onCancel?.();
-    setOpen(false, reason);
-  }
-
-  // --- 浮层命令式编排 (红线 #3)：open 且浮层就绪时，
-  //     activate focus-trap（焦点移入浮层）、绑 dismiss(Esc/外部点击)；
-  //     cleanup 里 undismiss、deactivate(归还焦点) ---
-  let popupEl = $state<HTMLElement | null>(null);
-  let rootEl = $state<HTMLElement | null>(null);
-
-  // 浮层定位由 use:floating action 接管（避免 effect cleanup 与 {#if} 卸载竞态）。
-  function onPlacement(info: { placement: Placement; arrowOffset: number }) {
-    resolvedPlacement = info.placement;
-    arrowOffset = info.arrowOffset;
-  }
-
-  // --- focus-trap + dismiss (红线 #3)：open 且浮层就绪时绑定，cleanup 解绑/归还焦点 ---
-  $effect(() => {
-    if (!isOpen || !popupEl) return;
-    // guardFocus=true（默认）激活 Tab 循环焦点陷阱；false 时跳过（允许 Tab 离开浮层）。
-    const trap = guardFocus ? useFocusTrap(popupEl) : null;
-    trap?.activate();
-    let undismiss = () => {};
-    // popup portal 到 body 后不在 rootEl 子树内：把 popupEl 列为 extraTargets，
-    // 否则点击浮层内部会被误判为 outsideClick。点触发器在 rootEl 内由 onclick toggle。
-    if (closeOnEsc || closeOnOutsideClick) {
-      undismiss = useDismiss(rootEl ?? popupEl, {
-        onDismiss: (reason) => {
-          // onEscKeyDown：Esc 按下时先触发回调（在 dismiss 关闭前）。
-          if (reason === 'esc' && onEscKeyDown) {
-            // useDismiss 的 onDismiss 不直接传 KeyboardEvent，
-            // 以合成空事件触发回调（符合接口契约）。
-            const syntheticEv = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
-            onEscKeyDown(syntheticEv);
-          }
-          dismiss(reason);
-        },
-        escape: closeOnEsc,
-        outsideClick: closeOnOutsideClick,
-        extraTargets: [popupEl],
-        // 外部点击：在 useDismiss 关闭判定之前触发 onClickOutside / onClickOutSide（关闭逻辑前）。
-        // 调用方 preventDefault() 即阻止默认关闭（返回 false 跳过 onDismiss）。
-        onOutsidePointer: (e) => {
-          const handler = onClickOutside ?? onClickOutSide;
-          if (!handler) return;
-          handler(e);
-          if (e.defaultPrevented) return false;
-        },
-      });
-    }
-    return () => {
-      undismiss();
-      // returnFocusOnClose=true（默认）时归还焦点给触发元素；false 时不归还。
-      if (trap) {
-        if (returnFocusOnClose) {
-          trap.deactivate();
-        } else {
-          trap.deactivate({ returnFocus: false });
-        }
-      }
-      // 浮层关闭即复位 loading（覆盖受控 open 在 loading 中被外部关闭的边界）。
-      confirmLoading = false;
-    };
-  });
-
-  // --- onAfterOpen / onAfterClose (红线 #3)：入场/出场动效结束钩子 ---
-  // onAfterOpen：浮层挂载 + 入场动画 animationend；motion 关闭时下一帧即触发。
-  $effect(() => {
-    if (!isOpen || !popupEl) return;
-    if (!onAfterOpen) return;
-    const node = popupEl;
-    let raf = 0;
-    // 是否真正有入场动画：motion 开启、非 reduced-motion、且实际解析出非零时长。
-    const reduced =
-      typeof window !== 'undefined' &&
-      window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
-    // token 未注入或时长为 0 时 animationend 不会触发，退回下一帧判定（避免钩子丢失）。
-    const dur =
-      typeof window !== 'undefined'
-        ? parseFloat(getComputedStyle(node).animationDuration || '0')
-        : 0;
-    const hasAnim = motionEnabled && !reduced && dur > 0;
-    if (hasAnim) {
-      const onEnd = (e: AnimationEvent) => {
-        if (e.target !== node || e.animationName !== 'cd-popconfirm-in') return;
-        onAfterOpen?.();
-      };
-      node.addEventListener('animationend', onEnd, { once: true });
-      return () => node.removeEventListener('animationend', onEnd);
-    }
-    // 无动画：下一帧（确保已绘制）即视为完全可见。后台标签页 rAF 会被挂起，
-    // 补一个 setTimeout 兜底确保钩子最终触发（取先到者，避免重复）。
-    let done = false;
-    const fire = () => {
-      if (done) return;
-      done = true;
-      onAfterOpen?.();
-    };
-    raf = requestAnimationFrame(fire);
-    const t = setTimeout(fire, 32);
-    return () => {
-      cancelAnimationFrame(raf);
-      clearTimeout(t);
-    };
-  });
-
-  // onAfterClose：open 由 true→false 后触发（当前无出场动画，关闭即卸载/隐藏）。
-  // 簿记用普通变量避免 $state 自循环（按记忆教训）。
-  let wasOpen = false;
-  $effect(() => {
-    const openNow = isOpen;
-    if (wasOpen && !openNow) onAfterClose?.();
-    wasOpen = openNow;
-  });
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-  class="cd-popconfirm"
-  bind:this={rootEl}
-  onpointerenter={onTriggerPointerEnter}
-  onpointerleave={onTriggerPointerLeave}
->
-  <div
-    class="cd-popconfirm__trigger"
-    role="button"
-    tabindex={disabled ? -1 : 0}
-    aria-haspopup="dialog"
-    aria-expanded={isOpen}
-    aria-controls={isOpen ? popupId : undefined}
-    aria-disabled={disabled || undefined}
-    onclick={onTriggerClick}
-    onkeydown={onTriggerKeydown}
-  >
-    {@render trigger?.()}
-  </div>
-
-  {#if shouldRender}
-    <!-- destroyOnClose=false 时关闭仍保留 DOM（--hidden 隐藏），true 时 !isOpen 即被 {#if} 卸载。 -->
-    <div
-      class={popupCls}
-      class:cd-popconfirm__popup--hidden={!isOpen}
-      class:cd-popconfirm__popup--motion={motionEnabled}
-      id={popupId}
-      style={popupStyle}
-      bind:this={popupEl}
-      use:floating={{ trigger: rootEl, placement: resolvedPlacementProp, autoAdjust: true, offset: 8, arrowPointAtCenter, getContainer: getPopupContainer, onPlacement, open: isOpen }}
-      role="dialog"
-      tabindex="-1"
-      aria-labelledby={titleId}
-      aria-describedby={hasContent ? contentId : undefined}
-      aria-hidden={!isOpen || undefined}
-      onpointerenter={onPopupPointerEnter}
-      onpointerleave={onPopupPointerLeave}
-      onclick={stopPropagation ? (e) => e.stopPropagation() : undefined}
-    >
-      {#if showArrow}
-        <div class="cd-popconfirm__arrow" style={arrowStyle} aria-hidden="true"></div>
-      {/if}
-      <div class="cd-popconfirm__body">
-        {#if icon !== false}
-          <span
-            class="cd-popconfirm__icon cd-popconfirm__icon--{type}"
-            aria-hidden="true"
-          >
-            {#if typeof icon === 'function'}
-              {@render icon()}
-            {:else if type === 'danger'}
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-                <path
-                  d="M8 4.5v4.2"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle cx="8" cy="11.3" r="0.9" fill="currentColor" />
-              </svg>
-            {:else if type === 'warning'}
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <path
-                  d="M8 2 1.5 13.5h13L8 2Z"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linejoin="round"
-                />
-                <path
-                  d="M8 6.3v3"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle cx="8" cy="11.4" r="0.85" fill="currentColor" />
-              </svg>
-            {:else}
-              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-                <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5" />
-                <path
-                  d="M8 7.2v4"
-                  stroke="currentColor"
-                  stroke-width="1.5"
-                  stroke-linecap="round"
-                />
-                <circle cx="8" cy="4.7" r="0.9" fill="currentColor" />
-              </svg>
-            {/if}
-          </span>
-        {/if}
-        <div class="cd-popconfirm__content-wrap">
-          <div id={titleId} class="cd-popconfirm__title">
-            {#if titleSnippet}
-              {@render titleSnippet()}
-            {:else}
-              {title}
-            {/if}
-          </div>
-          {#if hasContent}
-            <div id={contentId} class="cd-popconfirm__content">
-              {#if contentSnippet}
-                {@render contentSnippet()}
-              {:else}
-                {content}
-              {/if}
-            </div>
-          {/if}
-        </div>
-      </div>
-      <div class="cd-popconfirm__footer">
-        {#if showCancel}
-          <Button size="small" {...cancelButtonProps} type={resolvedCancelType} disabled={confirmLoading} onclick={cancel}>
-            {cancelText ?? loc().t('Popconfirm.cancel')}
-          </Button>
-        {/if}
-        <Button
-          size="small"
-          {...okButtonProps}
-          type={resolvedOkType}
-          loading={confirmLoading}
-          onclick={confirm}
-        >
-          {okText ?? loc().t('Popconfirm.confirm')}
-        </Button>
-      </div>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .cd-popconfirm {
-    position: relative;
-    display: inline-block;
-  }
-  .cd-popconfirm__trigger {
-    display: inline-flex;
-    align-items: center;
-    cursor: pointer;
-  }
-  .cd-popconfirm__trigger:focus-visible {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: var(--cd-radius-1);
-  }
-  .cd-popconfirm__trigger[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  /* 浮层 portal 到 body，由 JS 写 position:fixed + transform 定位 */
-  .cd-popconfirm__popup {
-    z-index: var(--cd-popconfirm-z);
-    inline-size: max-content;
-    max-inline-size: var(--cd-popconfirm-max-width);
-    padding: var(--cd-popconfirm-padding);
-    background: var(--cd-popconfirm-bg);
-    border-radius: var(--cd-popconfirm-radius);
-    box-shadow: var(--cd-popconfirm-shadow);
-  }
-  /* destroyOnClose=false 关闭后保留 DOM 但不可见、不可交互、不占位 */
-  .cd-popconfirm__popup--hidden {
-    display: none;
-  }
-  /* motion：进场淡入 + 轻微缩放，token 时长/缓动；reduced-motion 退化 */
-  .cd-popconfirm__popup--motion {
-    animation: cd-popconfirm-in var(--cd-popconfirm-motion-duration)
-      var(--cd-popconfirm-motion-easing, ease) both;
-  }
-  @keyframes cd-popconfirm-in {
-    from {
-      opacity: 0;
-      transform: scale(0.96);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
-  /* arrow：旋转 45° 的纯色方块，交叉轴偏移由内联 style 控制 */
-  .cd-popconfirm__arrow {
-    position: absolute;
-    inline-size: var(--cd-popconfirm-arrow-size);
-    block-size: var(--cd-popconfirm-arrow-size);
-    background: var(--cd-popconfirm-bg);
-    transform: rotate(45deg);
-  }
-  /* 交叉轴居中补偿：仅在交叉轴方向回退半个箭头尺寸 */
-  .cd-popconfirm__popup--top .cd-popconfirm__arrow,
-  .cd-popconfirm__popup--bottom .cd-popconfirm__arrow {
-    margin-inline-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--left .cd-popconfirm__arrow,
-  .cd-popconfirm__popup--right .cd-popconfirm__arrow {
-    margin-block-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  /* 箭头吸附到浮层贴近触发器的那条边（按解析后的 side） */
-  .cd-popconfirm__popup--top .cd-popconfirm__arrow {
-    inset-block-end: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--bottom .cd-popconfirm__arrow {
-    inset-block-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--left .cd-popconfirm__arrow {
-    inset-inline-end: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-  .cd-popconfirm__popup--right .cd-popconfirm__arrow {
-    inset-inline-start: calc(var(--cd-popconfirm-arrow-size) / -2);
-  }
-
-  .cd-popconfirm__body {
-    display: flex;
-    gap: var(--cd-spacing-2);
-  }
-  .cd-popconfirm__icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    line-height: 1;
-  }
-  .cd-popconfirm__icon--danger {
-    color: var(--cd-popconfirm-icon-color-danger);
-  }
-  .cd-popconfirm__icon--warning {
-    color: var(--cd-popconfirm-icon-color-warning);
-  }
-  .cd-popconfirm__icon--default {
-    color: var(--cd-popconfirm-icon-color-info);
-  }
-
-  .cd-popconfirm__content-wrap {
-    min-inline-size: 0;
-  }
-  .cd-popconfirm__title {
-    color: var(--cd-popconfirm-title-color);
-    font-size: var(--cd-popconfirm-title-size);
-    font-weight: 600;
-    line-height: 1.4;
-  }
-  .cd-popconfirm__content {
-    margin-block-start: var(--cd-spacing-1);
-    color: var(--cd-popconfirm-color-text-secondary);
-    font-size: var(--cd-popconfirm-content-size);
-    line-height: 1.5;
-  }
-
-  .cd-popconfirm__footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--cd-popconfirm-gap-footer);
-    margin-block-start: var(--cd-spacing-3);
-  }
-
-  /* reduced-motion：禁用进场动画 */
-  @media (prefers-reduced-motion: reduce) {
-    .cd-popconfirm__popup--motion {
-      animation: none;
-    }
-  }
-</style>