@chenzy-design/svelte 0.3.1 → 0.4.1

package/dist/notification/NotificationItem.svelte

@@ -1,368 +1,314 @@
 <!--
-  NotificationItem — 单条通知卡片。
-  类型图标（可选）+ 主体（title + content）+ 可选关闭按钮（右上角绝对定位）+ 可选 footer 操作区。
-  pauseOnHover 经 mouseenter/leave + focusin/out 暂停/恢复定时器。
-  showProgress：底部倒计时进度条，随 duration 递减；hover/聚焦时暂停（与定时器同步）。
-    命令式 rAF 驱动（红线 #3）——effect 启动循环、cleanup 取消帧并清空 ref；duration<=0 时不渲染。
-  theme：light（默认，与卡片背景一致）/ dark（深色卡片）。
-  a11y：error/warning -> role=alert + aria-live=assertive；其余 -> role=status + aria-live=polite。
-  title/content 经 useId 关联 aria-labelledby / aria-describedby；关闭按钮 aria-label「关闭」，不抢焦点。
-  类型前缀（如「错误：」）以视觉隐藏文本注入卡片首部（spec §6），令屏幕阅读器先播报极性语义。
+  NotificationItem — 单条通知卡片（notice），严格对齐 Semi Design（semi-ui/notification/notice.tsx）。
+  DOM 结构镜像 Semi：
+    div.cd-notification-notice[.cd-notification-notice-{type}][.cd-notification-notice-light]
+       [.cd-notification-notice-rtl][.cd-notification-notice-icon-show]
+       role=alert aria-labelledby=titleID onmouseenter onmouseleave onclick
+      <div>{icon}</div>                                   ← 类型图标 / 自定义 icon
+        div.cd-notification-notice-icon.cd-notification-notice-{type}
+      div.cd-notification-notice-inner
+        div.cd-notification-notice-content-wrapper
+          div.cd-notification-notice-title  (id=titleID)  ← title
+          div.cd-notification-notice-content              ← content
+        IconButton.cd-notification-notice-icon-close      ← showClose（tertiary/borderless/small）
+  行为对齐 Semi foundation：
+    mouseenter → pause（clearCloseTimer）；mouseleave → resume（重新完整计时）。
+    关闭按钮点击：先 onCloseClick(id) 再通知容器移除（对齐 notice.close → onCloseClick + notifyWrapperToRemove）。
+  依赖组件均已对齐 Semi：IconButton、IconTickCircle/IconInfoCircle/IconAlertTriangle/IconAlertCircle/IconClose。
+  title/content/icon 支持 string 文本或 Snippet（对齐 Semi ReactNode）。
+  a11y：role=alert（对齐 Semi）；title 经 useId 关联 aria-labelledby；关闭按钮 IconButton 带 ariaLabel。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { useId } from '@chenzy-design/core';
   import type { NotificationItem, NotificationType } from '@chenzy-design/core';
+  import IconButton from '../iconbutton/IconButton.svelte';
+  import {
+    IconClose,
+    IconTickCircle,
+    IconInfoCircle,
+    IconAlertTriangle,
+    IconAlertCircle,
+  } from '@chenzy-design/icons';
   import { useLocale } from '../locale-provider/index.js';
 
   interface Props {
     item: NotificationItem;
+    /** 容器移除该通知（对齐 Semi close → notifyWrapperToRemove）。 */
     onClose: (id: string) => void;
-    /**
-     * 仅在用户点击关闭按钮时触发（与 onClose 区分：onClose 在任何关闭方式时触发）。
-     * 由 NotificationContainer 传入，从 onCloseClickMap 中查找并调用对应回调。
-     */
-    onCloseClick?: (id: string) => void;
     onPause: (id: string) => void;
     onResume: (id: string) => void;
   }
 
-  let { item, onClose, onCloseClick, onPause, onResume }: Props = $props();
+  let { item, onClose, onPause, onResume }: Props = $props();
   const loc = useLocale();
 
   const titleId = useId('cd-notification-title');
-  const contentId = useId('cd-notification-content');
 
-  const isAlert = $derived(item.type === 'error' || item.type === 'warning');
-  const role = $derived(isAlert ? 'alert' : 'status');
-  const ariaLive = $derived(isAlert ? 'assertive' : 'polite');
-  const hasIcon = $derived(item.type !== 'default');
-
-  // 视觉隐藏类型前缀（如「错误：」）：default 无前缀；其余走 i18n（colon 跟随 locale）。
-  // 注入卡片首部，令屏幕阅读器先读极性语义再读 title/content。
-  const typePrefix = $derived(
-    item.type === 'default'
-      ? ''
-      : `${loc().t(`Notification.${item.type}`)}${loc().t('Form.colon')}`,
+  // 有默认图标的类型（对齐 Semi types.includes(type) → icon-show）。default 无内置图标。
+  const withDefaultIcon = $derived(
+    item.type === 'success' ||
+      item.type === 'info' ||
+      item.type === 'warning' ||
+      item.type === 'error',
+  );
+  // 自定义 icon（Snippet）优先；否则类型内置图标。两者皆无（default 且无自定义）→ 不渲染图标区。
+  const customIcon = $derived(item.icon as Snippet | undefined);
+  const hasIcon = $derived(Boolean(customIcon) || withDefaultIcon);
+  // Semi wrapper 的 icon-show class：仅当 type 属于内置类型集合（含 default）时加。
+  const iconShow = $derived(
+    item.type === 'success' ||
+      item.type === 'info' ||
+      item.type === 'warning' ||
+      item.type === 'error' ||
+      item.type === 'default',
   );
 
-  // footer 是渲染层 Snippet（core 用 unknown 透传，无框架依赖）。
-  const footer = $derived(item.footer as Snippet | undefined);
-
-  // showProgress 仅在有限 duration 下有意义；duration<=0（常驻）无倒计时可显示。
-  const hasProgress = $derived(item.showProgress && item.duration > 0);
+  const isRtl = $derived(item.direction === 'rtl');
 
-  // 本地暂停态：与 store 定时器的暂停/恢复严格同源（同一组 hover/focus 处理器）。
-  // 用普通变量（非 $state）让 rAF 循环直接读取，避免 effect 重订阅/重启而丢失进度。
-  let paused = false;
-  // 进度条 DOM 引用；命令式驱动 scaleX，避免每帧触发 Svelte 响应式。
-  let progressEl = $state<HTMLDivElement | null>(null);
+  // title/content 双形态：Snippet（函数）走 {@render}，否则按 string 文本渲染。
+  const titleIsSnippet = $derived(typeof item.title === 'function');
+  const contentIsSnippet = $derived(typeof item.content === 'function');
+  const titleSnippet = $derived(item.title as Snippet | undefined);
+  const contentSnippet = $derived(item.content as Snippet | undefined);
+  const titleText = $derived(titleIsSnippet ? '' : String(item.title ?? ''));
+  const contentText = $derived(contentIsSnippet ? '' : String(item.content ?? ''));
+  const hasTitle = $derived(titleIsSnippet || titleText !== '');
+  const hasContent = $derived(contentIsSnippet || contentText !== '');
 
   function handlePause() {
-    if (item.pauseOnHover) {
-      paused = true;
-      onPause(item.id);
-    }
+    onPause(item.id);
   }
   function handleResume() {
-    if (item.pauseOnHover) {
-      paused = false;
-      onResume(item.id);
-    }
+    onResume(item.id);
+  }
+  function handleClick(e: MouseEvent) {
+    item.onClick?.(e);
+  }
+  function handleCloseClick() {
+    item.onCloseClick?.(item.id);
+    onClose(item.id);
   }
-
-  // 命令式 rAF 倒计时进度（红线 #3）：effect 仅依赖 duration/progressEl 启动单条循环，
-  // 循环内直接读 paused（普通变量）冻结/推进剩余时间，直接写 DOM scaleX；cleanup 取消帧。
-  $effect(() => {
-    if (!hasProgress || !progressEl) return;
-    const totalMs = item.duration * 1000;
-    const el = progressEl;
-    let raf = 0;
-    let remaining = totalMs;
-    let last = performance.now();
-
-    function tick(t: number): void {
-      if (!paused) remaining = Math.max(0, remaining - (t - last));
-      last = t;
-      el.style.transform = `scaleX(${remaining / totalMs})`;
-      if (remaining > 0) raf = requestAnimationFrame(tick);
-    }
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  });
 </script>
 
-{#snippet typeIcon(type: NotificationType)}
+{#snippet defaultTypeIcon(type: NotificationType)}
   {#if type === 'success'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.6"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M5 8.2l2 2 4-4.4"
-      />
-    </svg>
+    <IconTickCircle size="large" />
   {:else if type === 'info'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M8 7.2v4" />
-      <circle cx="8" cy="4.7" r="0.85" fill="currentColor" />
-    </svg>
+    <IconInfoCircle size="large" />
   {:else if type === 'warning'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <path
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.4"
-        stroke-linejoin="round"
-        d="M8 1.5l6.5 12h-13z"
-      />
-      <path stroke="currentColor" stroke-width="1.4" stroke-linecap="round" d="M8 6.5v3.2" />
-      <circle cx="8" cy="11.6" r="0.85" fill="currentColor" />
-    </svg>
+    <IconAlertTriangle size="large" />
   {:else if type === 'error'}
-    <svg class="cd-notification-item__icon-svg" viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-      <circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.4" />
-      <path
-        stroke="currentColor"
-        stroke-width="1.6"
-        stroke-linecap="round"
-        d="M5.5 5.5l5 5M10.5 5.5l-5 5"
-      />
-    </svg>
+    <IconAlertCircle size="large" />
   {/if}
 {/snippet}
 
+<!--
+  对齐 Semi：notice 根 div 承载 onClick（通知点击回调）+ mouseenter/leave（hover 暂停定时器）。
+  这是 Semi notice.tsx 的既有契约（div + onClick + onMouseEnter/Leave），非交互增强，
+  故显式忽略「非交互元素挂事件」与「click 需键盘处理」两条 a11y 规则（关闭动作已由可聚焦的
+  IconButton 承载，键盘用户可 Tab 到关闭按钮操作）。
+-->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
-  class="cd-notification-item cd-notification-item--{item.type} cd-notification-item--{item.theme}"
-  {role}
-  aria-live={ariaLive}
-  aria-labelledby={item.title ? titleId : undefined}
-  aria-describedby={item.content ? contentId : undefined}
+  class="cd-notification-notice cd-notification-notice-{item.type}"
+  class:cd-notification-notice-light={item.theme === 'light'}
+  class:cd-notification-notice-rtl={isRtl}
+  class:cd-notification-notice-icon-show={iconShow}
+  role="alert"
+  aria-labelledby={hasTitle ? titleId : undefined}
   onmouseenter={handlePause}
   onmouseleave={handleResume}
-  onfocusin={handlePause}
-  onfocusout={handleResume}
+  onclick={handleClick}
 >
-  {#if typePrefix}
-    <span class="cd-sr-only">{typePrefix}</span>
-  {/if}
-  {#if hasIcon}
-    <span class="cd-notification-item__icon">
-      {@render typeIcon(item.type)}
-    </span>
-  {/if}
-  <div class="cd-notification-item__body">
-    {#if item.title}
-      <div class="cd-notification-item__title" id={titleId}>{item.title}</div>
-    {/if}
-    {#if item.content}
-      <div class="cd-notification-item__content" id={contentId}>{item.content}</div>
-    {/if}
-    {#if footer}
-      <div class="cd-notification-item__footer">
-        {@render footer()}
+  <div>
+    {#if hasIcon}
+      <div class="cd-notification-notice-icon cd-notification-notice-{item.type}">
+        {#if customIcon}
+          {@render customIcon()}
+        {:else}
+          {@render defaultTypeIcon(item.type)}
+        {/if}
       </div>
     {/if}
   </div>
-  {#if item.closable}
-    <button
-      type="button"
-      class="cd-notification-item__close"
-      aria-label={loc().t('Notification.closeText')}
-      onclick={() => { onCloseClick?.(item.id); onClose(item.id); }}
-    >
-      <svg viewBox="0 0 16 16" aria-hidden="true" focusable="false">
-        <path
-          stroke="currentColor"
-          stroke-width="1.4"
-          stroke-linecap="round"
-          d="M4 4l8 8M12 4l-8 8"
-        />
-      </svg>
-    </button>
-  {/if}
-  {#if hasProgress}
-    <div class="cd-notification-item__progress" aria-hidden="true">
-      <div class="cd-notification-item__progress-bar" bind:this={progressEl}></div>
+  <div class="cd-notification-notice-inner">
+    <div class="cd-notification-notice-content-wrapper">
+      {#if hasTitle}
+        <div class="cd-notification-notice-title" id={titleId}>
+          {#if titleIsSnippet && titleSnippet}{@render titleSnippet()}{:else}{titleText}{/if}
+        </div>
+      {/if}
+      {#if hasContent}
+        <div class="cd-notification-notice-content">
+          {#if contentIsSnippet && contentSnippet}{@render contentSnippet()}{:else}{contentText}{/if}
+        </div>
+      {/if}
     </div>
-  {/if}
+    {#if item.showClose}
+      <IconButton
+        class="cd-notification-notice-icon-close"
+        type="tertiary"
+        theme="borderless"
+        size="small"
+        ariaLabel={loc().t('Notification.closeText')}
+        icon={closeIcon}
+        onclick={handleCloseClick}
+      />
+    {/if}
+  </div>
 </div>
 
+{#snippet closeIcon()}
+  <IconClose />
+{/snippet}
+
 <style>
-  .cd-notification-item {
+  /* —— 卡片容器（对齐 Semi .semi-notification-notice）—— */
+  .cd-notification-notice {
+    box-shadow: var(--cd-shadow-elevated);
+    border-radius: var(--cd-radius-notification-notice);
+    padding-top: var(--cd-spacing-notification-notice-paddingtop);
+    padding-right: var(--cd-spacing-notification-notice-paddingright);
+    padding-bottom: var(--cd-spacing-notification-notice-paddingbottom);
+    padding-left: var(--cd-spacing-notification-notice-paddingleft);
+    margin: var(--cd-spacing-notification-notice-margin);
+    width: var(--cd-width-notification-notice);
+    min-width: var(--cd-width-notification-notice-minwidth);
+    background-color: var(--cd-color-notification-bg-default);
     position: relative;
     display: flex;
-    gap: var(--cd-notification-gap);
-    align-items: flex-start;
-    box-sizing: border-box;
-    inline-size: var(--cd-notification-width);
-    max-inline-size: 100%;
-    padding: var(--cd-notification-padding);
-    background: var(--cd-notification-bg);
-    border: 1px solid var(--cd-notification-border);
-    border-radius: var(--cd-notification-radius);
-    box-shadow: var(--cd-notification-shadow);
     pointer-events: auto;
+    box-sizing: border-box;
   }
 
-  /* 视觉隐藏类型前缀复用 tokens.css 全局 .cd-sr-only：仅供屏幕阅读器读取极性语义。 */
-
-  .cd-notification-item__icon {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.25em;
-    block-size: 1.25em;
-    margin-block-start: 0.0625em;
-  }
-
-  .cd-notification-item__icon-svg {
-    inline-size: 100%;
-    block-size: 100%;
+  /* —— 类型图标（对齐 Semi .semi-notification-notice-icon）—— */
+  .cd-notification-notice-icon {
+    width: var(--cd-width-notification-notice-icon);
+    font-size: var(--cd-font-size-header-6);
+    line-height: 22px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: 100%;
+    margin-right: var(--cd-spacing-notification-notice-icon-marginright);
   }
 
-  .cd-notification-item--success .cd-notification-item__icon {
-    color: var(--cd-notification-icon-success);
+  .cd-notification-notice-info .cd-notification-notice-icon {
+    color: var(--cd-color-notification-info-icon);
   }
-  .cd-notification-item--info .cd-notification-item__icon {
-    color: var(--cd-notification-icon-info);
+  .cd-notification-notice-warning .cd-notification-notice-icon {
+    color: var(--cd-color-notification-warning-icon);
   }
-  .cd-notification-item--warning .cd-notification-item__icon {
-    color: var(--cd-notification-icon-warning);
+  .cd-notification-notice-error .cd-notification-notice-icon {
+    color: var(--cd-color-notification-danger-icon);
   }
-  .cd-notification-item--error .cd-notification-item__icon {
-    color: var(--cd-notification-icon-error);
+  .cd-notification-notice-success .cd-notification-notice-icon {
+    color: var(--cd-color-notification-success-icon);
   }
 
-  .cd-notification-item__body {
-    flex: 1 1 auto;
-    min-inline-size: 0;
-    /* 为右上角关闭按钮预留空间 */
-    padding-inline-end: 1.5em;
+  /* —— 多色填充样式 light（对齐 Semi .semi-notification-notice-light）——
+     叠加层 = ambient-bg（bg-0）打底 + light-bg 线性渐变覆盖 + 类型描边。 */
+  .cd-notification-notice-light.cd-notification-notice-warning {
+    background-image: linear-gradient(
+      0deg,
+      var(--cd-color-notification-warning-light-bg),
+      var(--cd-color-notification-warning-light-bg)
+    );
+    background-color: var(--cd-color-notification-ambient-bg);
+    border: var(--cd-width-notification-notice-border) solid
+      var(--cd-color-notification-warning-light-border);
   }
-
-  .cd-notification-item__title {
-    font-size: var(--cd-notification-title-size);
-    font-weight: var(--cd-notification-title-weight);
-    line-height: 1.4;
-    color: var(--cd-notification-color-title);
-    overflow-wrap: anywhere;
-  }
-
-  .cd-notification-item__content {
-    margin-block-start: var(--cd-spacing-extra-tight);
-    font-size: var(--cd-notification-content-size);
-    line-height: 1.5;
-    color: var(--cd-notification-color-content);
-    overflow-wrap: anywhere;
+  .cd-notification-notice-light.cd-notification-notice-success {
+    background-image: linear-gradient(
+      0deg,
+      var(--cd-color-notification-success-light-bg),
+      var(--cd-color-notification-success-light-bg)
+    );
+    background-color: var(--cd-color-notification-ambient-bg);
+    border: var(--cd-width-notification-notice-border) solid
+      var(--cd-color-notification-success-light-border);
   }
-
-  .cd-notification-item__footer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--cd-spacing-tight);
-    align-items: center;
-    margin-block-start: var(--cd-spacing-base-tight);
+  .cd-notification-notice-light.cd-notification-notice-info,
+  .cd-notification-notice-light.cd-notification-notice-default {
+    background-image: linear-gradient(
+      0deg,
+      var(--cd-color-notification-info-light-bg),
+      var(--cd-color-notification-info-light-bg)
+    );
+    background-color: var(--cd-color-notification-ambient-bg);
+    border: var(--cd-width-notification-notice-border) solid
+      var(--cd-color-notification-info-light-border);
   }
-
-  .cd-notification-item__progress {
-    position: absolute;
-    inset-inline: 0;
-    inset-block-end: 0;
-    block-size: var(--cd-notification-progress-height);
-    overflow: hidden;
-    border-end-start-radius: var(--cd-notification-radius);
-    border-end-end-radius: var(--cd-notification-radius);
-    pointer-events: none;
+  .cd-notification-notice-light.cd-notification-notice-error {
+    background-image: linear-gradient(
+      0deg,
+      var(--cd-color-notification-danger-light-bg),
+      var(--cd-color-notification-danger-light-bg)
+    );
+    background-color: var(--cd-color-notification-ambient-bg);
+    border: var(--cd-width-notification-notice-border) solid
+      var(--cd-color-notification-danger-light-border);
   }
 
-  .cd-notification-item__progress-bar {
-    block-size: 100%;
-    inline-size: 100%;
-    background: var(--cd-notification-progress-color);
-    /* 倒计时从起始边收缩：LTR 自左、RTL 自右（随 dir 翻转 transform-origin）。 */
-    transform-origin: left center;
-    /* 初始满格；命令式 rAF 写 scaleX 递减 */
-    transform: scaleX(1);
+  /* —— 标题（对齐 Semi .semi-notification-notice-title）—— */
+  .cd-notification-notice-title {
+    font-size: var(--cd-font-size-header-6);
+    line-height: 22px;
+    font-weight: var(--cd-font-notification-notice-title-fontweight);
+    color: var(--cd-color-notification-title-text);
+    margin-bottom: var(--cd-spacing-notification-notice-title-marginbottom);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
-  :global([dir='rtl']) .cd-notification-item__progress-bar {
-    transform-origin: right center;
+  /* —— 内层（对齐 Semi .semi-notification-notice-inner）—— */
+  .cd-notification-notice-inner {
+    display: flex;
+    width: 100%;
+    min-width: 0;
   }
 
-  .cd-notification-item--success .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-success);
-  }
-  .cd-notification-item--info .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-info);
-  }
-  .cd-notification-item--warning .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-warning);
-  }
-  .cd-notification-item--error .cd-notification-item__progress-bar {
-    background: var(--cd-notification-icon-error);
+  /* —— 内容包裹（对齐 Semi .semi-notification-notice-content-wrapper）—— */
+  .cd-notification-notice-content-wrapper {
+    flex: 1 1 auto;
+    margin-right: var(--cd-spacing-notification-notice-content-wrapper-marginright);
+    min-width: 0;
   }
 
-  /* dark 主题：深色卡片，文案/边框/关闭色覆盖为 token */
-  .cd-notification-item--dark {
-    background: var(--cd-notification-bg-dark);
-    border-color: var(--cd-notification-border-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__title {
-    color: var(--cd-notification-color-title-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__content {
-    color: var(--cd-notification-color-content-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__close {
-    color: var(--cd-notification-close-color-dark);
-  }
-  .cd-notification-item--dark .cd-notification-item__close:hover {
-    color: var(--cd-notification-close-color-hover-dark);
+  /* —— 内容（对齐 Semi .semi-notification-notice-content）—— */
+  .cd-notification-notice-content {
+    font-size: var(--cd-font-size-regular);
+    line-height: 20px;
+    font-weight: var(--cd-font-notification-notice-content-fontweight);
+    color: var(--cd-color-notification-content-text);
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
-  .cd-notification-item__close {
-    position: absolute;
-    inset-block-start: var(--cd-notification-padding);
-    inset-inline-end: var(--cd-notification-padding);
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: 1.25em;
-    block-size: 1.25em;
-    padding: 0;
-    margin: 0;
-    border: none;
-    background: transparent;
-    color: var(--cd-notification-close-color);
-    cursor: pointer;
-    border-radius: var(--cd-border-radius-small);
-    transition: color var(--cd-notification-motion-duration) ease;
+  /* —— 关闭按钮（对齐 Semi .semi-notification-notice-icon-close）—— */
+  .cd-notification-notice :global(.cd-notification-notice-icon-close) {
+    height: var(--cd-width-icon-extra-large);
   }
-
-  .cd-notification-item__close:hover {
-    color: var(--cd-notification-close-color-hover);
+  .cd-notification-notice :global(.cd-notification-notice-icon-close .cd-icon-close),
+  .cd-notification-notice :global(.cd-notification-notice-icon-close) {
+    color: var(--cd-color-notification-closebtn-icon);
   }
 
-  .cd-notification-item__close:focus-visible {
-    outline: 2px solid var(--cd-color-primary);
-    outline-offset: 1px;
+  /* —— RTL（对齐 Semi rtl.scss）——
+     Semi 主 scss padding 已用非对称，rtl 下 padding-right/left 互换。 */
+  .cd-notification-notice-rtl {
+    direction: rtl;
+    padding-right: var(--cd-spacing-notification-notice-paddingleft);
+    padding-left: var(--cd-spacing-notification-notice-paddingright);
   }
-
-  .cd-notification-item__close svg {
-    inline-size: 100%;
-    block-size: 100%;
+  .cd-notification-notice-rtl .cd-notification-notice-icon {
+    margin-right: 0;
+    margin-left: var(--cd-spacing-notification-notice-icon-marginright);
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cd-notification-item__close {
-      transition: none;
-    }
+  .cd-notification-notice-rtl .cd-notification-notice-content-wrapper {
+    margin-right: 0;
+    margin-left: var(--cd-spacing-notification-notice-content-wrapper-marginright);
   }
 </style>

package/dist/notification/NotificationItem.svelte.d.ts

@@ -1,12 +1,8 @@
 import type { NotificationItem } from '@chenzy-design/core';
 interface Props {
     item: NotificationItem;
+    /** 容器移除该通知（对齐 Semi close → notifyWrapperToRemove）。 */
     onClose: (id: string) => void;
-    /**
-     * 仅在用户点击关闭按钮时触发（与 onClose 区分：onClose 在任何关闭方式时触发）。
-     * 由 NotificationContainer 传入，从 onCloseClickMap 中查找并调用对应回调。
-     */
-    onCloseClick?: (id: string) => void;
     onPause: (id: string) => void;
     onResume: (id: string) => void;
 }

package/dist/notification/NotificationItem.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationItem.svelte.d.ts","sourceRoot":"","sources":["../../src/notification/NotificationItem.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,qBAAqB,CAAC;AAI5E,UAAU,KAAK;IACb,IAAI,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AA4IH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NotificationItem.svelte.d.ts","sourceRoot":"","sources":["../../src/notification/NotificationItem.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAoB,MAAM,qBAAqB,CAAC;AAY5E,UAAU,KAAK;IACb,IAAI,EAAE,gBAAgB,CAAC;IACvB,sDAAsD;IACtD,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAoHH,QAAA,MAAM,gBAAgB,2CAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/notification/index.d.ts

@@ -1,4 +1,5 @@
-export { notification, type NotificationConfig, type SvelteNotificationOptions } from './store.js';
+export { notification, useNotification, getPositionOffsets, type NotificationConfig, type SvelteNotificationOptions, type NotificationHookApi, } from './store.js';
+export { default as NotificationHolder } from './NotificationHolder.svelte';
 export { meta as notificationMeta } from './meta.js';
-export type { NotificationType, NotificationOptions, NotificationItem, NotificationPlacement, NotificationDirection, } from '@chenzy-design/core';
+export type { NotificationType, NotificationOptions, NotificationItem, NotificationPosition, NotificationTheme, NotificationDirection, } from '@chenzy-design/core';
 //# sourceMappingURL=index.d.ts.map

package/dist/notification/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,kBAAkB,EAAE,KAAK,yBAAyB,EAAE,MAAM,YAAY,CAAC;AACnG,OAAO,EAAE,IAAI,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/notification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,eAAe,EACf,kBAAkB,EAClB,KAAK,kBAAkB,EACvB,KAAK,yBAAyB,EAC9B,KAAK,mBAAmB,GACzB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,IAAI,IAAI,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACrD,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,gBAAgB,EAChB,oBAAoB,EACpB,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,qBAAqB,CAAC"}

package/dist/notification/index.js

@@ -1,2 +1,3 @@
-export { notification } from './store.js';
+export { notification, useNotification, getPositionOffsets, } from './store.js';
+export { default as NotificationHolder } from './NotificationHolder.svelte';
 export { meta as notificationMeta } from './meta.js';