@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/typography/TypographyBase.svelte

@@ -1,48 +1,68 @@
 <!--
-  TypographyBase — shared render core for Title / Text / Paragraph / Link.
-  See specs/components/basic/Typography.spec.md §3 (分层), §4, §6, §12.
+  TypographyBase — shared render core for Title / Text / Paragraph / Numeral.
+  严格对齐 Semi Design（semi-ui/typography/base.tsx + semi-foundation/typography/typography.scss）。
 
-  纯文本路径（无 ellipsis/copyable/editable）：零 hook、零 observer、零 timer，仅 class 拼接，
-  与旧行为完全一致（向后兼容，红线：不传三 prop 行为不变）。
+  DOM 结构对齐 Semi wrapperDecorations：内容按 mark→code→u→strong→del→a(link) 顺序用真实语义
+  标签嵌套包裹（非根元素 class）。根元素类名 cd-typography + 单横线修饰（对齐 Semi semi-typography-*）。
 
-  交互路径组合 @chenzy-design/core 三原语（createEllipsis/createCopyable/createEditable）。
-  - 受控编辑 value + onChange，组件内不回写（红线 #1）。
-  - 剪贴板 / 编辑 textarea / ellipsis 测量(ResizeObserver+rAF) 命令式 + cleanup（红线 #3）。
-  - 省略/复制态/编辑态派生纯函数，core 持纯逻辑（红线 #2）。
-  - 测量写 state 在 rAF/observer 回调里（异步首测），避免与渲染读形成同步 effect 自循环。
+  纯文本路径（无 ellipsis/copyable）：零 hook、零 observer、零 timer，仅 class 拼接 + 语义包裹。
+  交互路径组合 @chenzy-design/core 原语（createEllipsis / createCopyable）。
+    - ellipsis：CSS clamp 默认；expandable/suffix/showTooltip/pos≠end 走 ResizeObserver+rAF 测量。
+    - 测量写 state 在 rAF/observer 回调里（异步首测），避免与渲染读形成同步 effect 自循环。
+  size='inherit' 经 Svelte context 继承外层 Typography 的实际 size（对齐 Semi SizeContext）。
 -->
+<script lang="ts" module>
+  import { getContext, setContext } from 'svelte';
+
+  /** Semi 语义色类型（对齐 strings.TYPE）。 */
+  export type TypoType =
+    | 'primary'
+    | 'secondary'
+    | 'tertiary'
+    | 'quaternary'
+    | 'warning'
+    | 'danger'
+    | 'success';
+  /** Semi size（对齐 strings.SIZE）。 */
+  export type TypoSize = 'normal' | 'small' | 'inherit';
+
+  const SIZE_CTX = Symbol('cd-typography-size');
+  /** 供各子组件把自身实际 size 下传，size='inherit' 时读回。 */
+  export function setParentSize(size: 'normal' | 'small'): void {
+    setContext(SIZE_CTX, size);
+  }
+  export function getParentSize(): 'normal' | 'small' {
+    return getContext<'normal' | 'small'>(SIZE_CTX) ?? 'normal';
+  }
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { untrack, onMount } from 'svelte';
   import {
-    useId,
     createCopyable,
-    createEditable,
     createEllipsis,
-    computeAutosizeHeight,
+    fitTruncatedText,
     type EllipsisPos,
   } from '@chenzy-design/core';
+  import { IconCopy, IconTick } from '@chenzy-design/icons';
   import { useLocale } from '../locale-provider/index.js';
   import Tooltip from '../tooltip/Tooltip.svelte';
   import Popover from '../popover/Popover.svelte';
 
-  type TypoType = 'default' | 'secondary' | 'tertiary' | 'warning' | 'danger' | 'success';
-  type TypoWeight = number | 'regular' | 'medium' | 'semibold' | 'bold';
-  type TypoSize = 'small' | 'default' | 'large';
-
   /**
    * showTooltip 浮层透传选项（对齐 Semi opts）。content 指定浮层显示的自定义内容
    * （非原文）；theme/placement/maxWidth 透传 Tooltip；popover 额外接受 title。
    */
   export interface EllipsisTooltipOpts {
-    /** 浮层显示的内容；缺省用完整原文（fullText） */
     content?: string;
-    /** Popover 模式标题 */
     title?: string;
     theme?: 'dark' | 'light';
     placement?: string;
     position?: 'top' | 'bottom' | 'left' | 'right';
     maxWidth?: number | string;
+    className?: string;
+    style?: string;
   }
   /**
    * showTooltip 配置（对齐 Semi）：
@@ -50,8 +70,7 @@
    *  - `{ opts: { content } }`：浮层显示自定义内容。
    *  - `{ type: 'popover', opts }`：用 Popover 而非 Tooltip。
    *  - `{ renderTooltip }`：完全自定义浮层。Semi 的 `(content, children) => VNode`
-   *    在 Svelte 中表达为 snippet `(fullText, trigger) => 浮层`，其中 trigger 是
-   *    渲染好的截断文本（须作为浮层触发器渲染出来），fullText 为完整原文。
+   *    在 Svelte 中表达为 snippet `(fullText, trigger) => 浮层`。
    */
   export interface EllipsisShowTooltip {
     type?: 'tooltip' | 'popover';
@@ -69,96 +88,107 @@
     suffix?: string;
     pos?: EllipsisPos;
     showTooltip?: boolean | EllipsisShowTooltip;
-    onExpand?: (expanded: boolean) => void;
+    /** 展开/收起回调（对齐 Semi onExpand(expanded, event)）。 */
+    onExpand?: (expanded: boolean, e: MouseEvent) => void;
   }
+  /** 复制配置（对齐 Semi CopyableConfig）。 */
   export interface CopyableConfig {
+    /** 复制到剪贴板的内容（默认取节点文本）。 */
     content?: string;
-    successText?: string;
+    /** 复制图标 tooltip 文案（默认 i18n copy）。 */
+    copyTip?: string;
+    /** 复制成功提示（默认 i18n copied）。 */
+    successTip?: string;
+    /** 自定义复制图标（对齐 Semi icon）。 */
     icon?: Snippet;
-    successIcon?: Snippet;
-  }
-  export interface EditableConfig {
-    editing?: boolean;
-    trigger?: 'click' | 'dblclick' | 'icon';
-    maxLength?: number;
-    autosize?: boolean;
+    /** 复制回调（对齐 Semi onCopy(e, content, res)）。 */
+    onCopy?: (e: MouseEvent, content: string, res: boolean) => void;
+    /**
+     * 完全接管复制控件渲染（对齐 Semi copyable.render）。
+     * 参数：copied 是否已复制、doCopy 触发复制、config 当前 CopyableConfig。
+     */
+    render?: Snippet<[boolean, (e: MouseEvent) => void, CopyableConfig]>;
   }
 
   interface Props {
     /** rendered tag */
     element: string;
-    baseClass: string;
+    /** 额外根类（cd-typography-text / -paragraph / -title cd-typography-h{n}） */
     extraClass?: string;
     type?: TypoType;
-    /** 字号档（Text/Paragraph）。Title 由 heading 决定，不传 size。spec §4.1 L60 */
+    /** 字号档（Text/Paragraph）。Title 由 heading 决定，不传 size。 */
     size?: TypoSize;
     strong?: boolean;
-    weight?: TypoWeight | undefined;
+    /** 字重：Title 传字符串枚举（走 class），Text/Paragraph 传 number（走 style）。 */
+    weight?: number | string | undefined;
+    /** Title heading（'h1'..'h6'），用于 class 与字重 class 拼接。 */
+    heading?: string | undefined;
     disabled?: boolean;
     mark?: boolean;
     underline?: boolean;
     delete?: boolean;
     code?: boolean;
+    /** 段落行距（Paragraph）：normal / extended（对齐 Semi spacing）。 */
+    spacing?: 'normal' | 'extended';
+    /** 前置图标（对齐 Semi icon）；渲染在内容前，带间距。 */
+    icon?: Snippet | undefined;
+    /** 链接（对齐 Semi link）：true 或透传给 <a> 的属性对象。 */
+    link?: boolean | Record<string, unknown>;
     class?: string;
-    /** ellipsis / copyable / editable */
+    /** 自定义内联样式（对齐 Semi base.tsx style）；合并在内部计算样式之后（用户样式优先）。 */
+    style?: string | undefined;
     ellipsis?: boolean | EllipsisConfig;
     copyable?: boolean | CopyableConfig;
-    editable?: boolean | EditableConfig;
-    /** controlled text value (editable). undefined → uncontrolled-ish: read from DOM/children */
-    value?: string | undefined;
-    onChange?: ((value: string) => void) | undefined;
-    onCopy?: ((content: string) => void) | undefined;
-    onEditStart?: (() => void) | undefined;
-    onEditCancel?: (() => void) | undefined;
-    onExpand?: ((expanded: boolean) => void) | undefined;
-    /** extra attributes spread onto the host element (href/target/rel for Link) */
+    onExpand?: ((expanded: boolean, e: MouseEvent) => void) | undefined;
+    /** extra attributes spread onto the host element */
     hostAttrs?: Record<string, unknown> | undefined;
+    /** 宿主元素挂载后回传（供 Numeral 遍历文本节点格式化）。 */
+    hostRef?: ((el: HTMLElement | undefined) => void) | undefined;
     children?: Snippet | undefined;
   }
 
   let {
     element,
-    baseClass,
     extraClass,
-    type = 'default',
-    size = 'default',
+    type = 'primary',
+    size = 'normal',
     strong = false,
     weight,
+    heading,
     disabled = false,
     mark = false,
     underline = false,
     delete: del = false,
     code = false,
+    spacing = 'normal',
+    icon,
+    link = false,
     class: className = '',
+    style: userStyle = '',
     ellipsis = false,
     copyable = false,
-    editable = false,
-    value,
-    onChange,
-    onCopy,
-    onEditStart,
-    onEditCancel,
     onExpand,
     hostAttrs,
+    hostRef,
     children,
   }: Props = $props();
 
   const loc = useLocale();
-  const baseId = useId('cd-typography');
-
-  const weightMap: Record<string, string> = {
-    regular: 'var(--cd-font-weight-regular)',
-    medium: 'var(--cd-font-weight-medium)',
-    semibold: 'var(--cd-font-weight-bold)',
-    bold: '700',
-  };
-  const resolvedWeight = $derived.by(() => {
-    if (weight === undefined) return undefined;
-    return typeof weight === 'number' ? String(weight) : weightMap[weight];
-  });
-  const inlineWeight = $derived(resolvedWeight ? `font-weight:${resolvedWeight};` : '');
 
-  // --- feature flags + normalized configs (纯派生, 红线 #2) ---
+  // --- size='inherit' 继承外层 Typography size（对齐 Semi SizeContext）---
+  // 读父级 size；本组件 size=inherit 时用父级，否则用自身。
+  // setContext 只能在组件初始化同步阶段调用一次（用初始 size 快照，size 运行时改变的嵌套继承为极少见场景）。
+  const parentSize = getParentSize();
+  const initSize = untrack(() => size);
+  const realSize = $derived<'normal' | 'small'>(size === 'inherit' ? parentSize : size);
+  setParentSize(initSize === 'inherit' ? parentSize : initSize);
+
+  // --- weight：Title 字符串枚举走 class；数字走 inline style（对齐 Semi）---
+  const isHeader = $derived(Boolean(heading));
+  const weightIsNumeric = $derived(weight !== undefined && !isNaN(Number(weight)));
+  const inlineWeight = $derived(weightIsNumeric ? `font-weight:${weight};` : '');
+
+  // --- feature flags + normalized configs（纯派生）---
   const ellipsisCfg = $derived.by<EllipsisConfig | null>(() => {
     if (!ellipsis) return null;
     return typeof ellipsis === 'object' ? ellipsis : {};
@@ -167,17 +197,12 @@
     if (!copyable) return null;
     return typeof copyable === 'object' ? copyable : {};
   });
-  const editableCfg = $derived.by<EditableConfig | null>(() => {
-    if (!editable) return null;
-    return typeof editable === 'object' ? editable : {};
-  });
 
   const rows = $derived(ellipsisCfg?.rows ?? 1);
   const expandable = $derived(ellipsisCfg?.expandable ?? false);
   const collapsible = $derived(ellipsisCfg?.collapsible ?? false);
   const pos = $derived(ellipsisCfg?.pos ?? 'end');
   const showTooltip = $derived(Boolean(ellipsisCfg?.showTooltip));
-  // 归一化 showTooltip 配置（对齐 Semi：true → 默认 tooltip）。
   const tooltipCfg = $derived.by<EllipsisShowTooltip | null>(() => {
     const st = ellipsisCfg?.showTooltip;
     if (!st) return null;
@@ -187,39 +212,32 @@
   const tooltipOpts = $derived(tooltipCfg?.opts ?? {});
   const renderTooltip = $derived(tooltipCfg?.renderTooltip);
 
-  // 纯文本快路径：三特性全关 → 不实例化任何 core hook / observer / timer。
-  const isInteractive = $derived(
-    ellipsisCfg !== null || copyableCfg !== null || editableCfg !== null,
-  );
+  // 纯文本快路径：ellipsis + copyable 全关 → 不实例化任何 core hook / observer。
+  const isInteractive = $derived(ellipsisCfg !== null || copyableCfg !== null);
 
-  // 构造期一次性快照（untrack：原语在 init 实例化一次，不随 config 重建；
-  // 渲染仍读 $derived 版本保持响应）。避免 state_referenced_locally 警告。
+  // 构造期一次性快照（原语 init 实例化一次，不随 config 重建）。
   const initEllipsis = untrack(() => ellipsisCfg);
   const initCopyable = untrack(() => copyableCfg);
-  const initEditable = untrack(() => editableCfg);
 
-  // --- core primitives (lazily constructed only when interactive) ---
-  // copyable
+  // --- copyable ---
   let copied = $state(false);
   const copyApi = initCopyable
     ? createCopyable({
         onChange: (c) => (copied = c),
-        onCopy: (content) => {
-          announce(loc().t('Typography.copied'));
-          onCopy?.(content);
-        },
-        onError: () => announce(loc().t('Typography.copyFailed')),
+        onCopy: () => announce(copyableCfg?.successTip ?? loc().t('Typography.copied')),
       })
     : null;
   $effect(() => () => copyApi?.destroy());
 
-  async function doCopy(): Promise<void> {
+  // 复制：core copy() 返回 Promise<boolean>（永不 throw），据其结果回调 onCopy(e, content, res)。
+  async function doCopy(e: MouseEvent): Promise<void> {
     if (!copyApi) return;
-    const content = copyableCfg?.content ?? value ?? textContent();
-    await copyApi.copy(content);
+    const content = copyableCfg?.content ?? textContent();
+    const res = await copyApi.copy(content);
+    copyableCfg?.onCopy?.(e, content, res);
   }
 
-  // ellipsis
+  // --- ellipsis ---
   let expanded = $state(false);
   let truncated = $state<boolean | null>(null);
   const ellipsisApi = initEllipsis
@@ -230,8 +248,6 @@
         pos: initEllipsis.pos ?? 'end',
         onExpand: (e) => {
           expanded = e;
-          ellipsisCfg?.onExpand?.(e);
-          onExpand?.(e);
         },
         onChange: (s) => {
           truncated = s.truncated;
@@ -239,46 +255,18 @@
       })
     : null;
 
-  // editable — controlled value + onChange (红线 #1: 不回写)
-  let editing = $state(false);
-  let draft = $state('');
-  const editApi = initEditable
-    ? createEditable({
-        get value() {
-          return value ?? textContent();
-        },
-        ...(initEditable.maxLength !== undefined ? { maxLength: initEditable.maxLength } : {}),
-        ...(initEditable.trigger !== undefined ? { trigger: initEditable.trigger } : {}),
-        onChange: (s) => {
-          editing = s.editing;
-          draft = s.draft;
-        },
-        onCommit: (v) => onChange?.(v),
-        onStart: () => onEditStart?.(),
-        onCancel: () => onEditCancel?.(),
-      })
-    : null;
-
-  // 受控 editing: 父传 editableCfg.editing 时与内部状态同步（命令式驱动 start/cancel）。
-  $effect(() => {
-    if (!editApi || editableCfg?.editing === undefined) return;
-    const want = editableCfg.editing;
-    untrack(() => {
-      if (want && !editApi.editing) editApi.start();
-      else if (!want && editApi.editing) editApi.cancel();
-    });
-  });
-
   // --- DOM refs ---
   let hostEl: HTMLElement | undefined = $state();
-  let textareaEl: HTMLTextAreaElement | undefined = $state();
-  let lastTrigger: HTMLElement | null = null;
+  // 宿主挂载/变更后回传（Numeral 用于遍历文本节点格式化）。
+  $effect(() => {
+    hostRef?.(hostEl);
+  });
 
   function textContent(): string {
     return hostEl?.textContent?.trim() ?? '';
   }
 
-  // --- single live region for copy/announce (命令式, cleanup) ---
+  // --- single live region for copy announce（命令式, cleanup）---
   let liveEl: HTMLDivElement | undefined;
   function ensureLive(): HTMLDivElement | null {
     if (typeof document === 'undefined') return null;
@@ -310,21 +298,58 @@
     liveEl = undefined;
   });
 
-  // --- ellipsis measurement (精确路径: expandable / suffix / showTooltip) ---
-  // CSS clamp 为默认；仅当需要 truncated 判定时才挂 ResizeObserver。
-  // needsMeasure 为构造期常量（基于 untrack 快照），保证测量 effect 只随 hostEl 建立/销毁一次，
-  // 不被 ellipsisCfg 等派生的重算反复 re-run（否则会反复 cancel rAF，测量永不落地）。
+  // --- ellipsis measurement（精确路径: expandable / suffix / showTooltip / pos≠end）---
   const measureRows = initEllipsis?.rows ?? 1;
+  const initPos: EllipsisPos = initEllipsis?.pos ?? 'end';
+  const needsPreciseTruncate = initEllipsis !== null && initPos !== 'end' && measureRows <= 1;
   const needsMeasure =
     initEllipsis !== null &&
     ((initEllipsis.expandable ?? false) ||
       Boolean(initEllipsis.showTooltip) ||
-      initEllipsis.suffix !== undefined);
+      initEllipsis.suffix !== undefined ||
+      needsPreciseTruncate);
+  let truncatedText = $state<string | null>(null);
+  let preciseFullText = '';
+
+  let probe: HTMLSpanElement | null = null;
+  function measurePreciseNow(): void {
+    const el = hostEl;
+    if (!el || typeof window === 'undefined') return;
+    if (untrack(() => expanded)) {
+      if (untrack(() => truncatedText) !== null) truncatedText = null;
+      return;
+    }
+    if (!preciseFullText) preciseFullText = el.textContent?.trim() ?? '';
+    const full = preciseFullText;
+    if (!full) return;
+    const parent = el.parentElement;
+    if (!parent) return;
+    if (!probe) {
+      probe = document.createElement('span');
+      const s = probe.style;
+      s.position = 'absolute';
+      s.visibility = 'hidden';
+      s.whiteSpace = 'nowrap';
+      s.pointerEvents = 'none';
+      s.top = '0';
+      s.left = '0';
+      probe.setAttribute('aria-hidden', 'true');
+      parent.appendChild(probe);
+    }
+    const cs = window.getComputedStyle(el);
+    probe.style.font = cs.font;
+    probe.style.letterSpacing = cs.letterSpacing;
+    probe.style.fontWeight = cs.fontWeight;
+    const containerWidth = el.clientWidth;
+    const p = probe;
+    const next = fitTruncatedText(full, initPos, (candidate) => {
+      p.textContent = candidate;
+      return p.scrollWidth <= containerWidth + 1;
+    });
+    const sliced = next === full ? null : next;
+    if (untrack(() => truncatedText) !== sliced) truncatedText = sliced;
+  }
 
-  // onMount 一次性建立 ResizeObserver + rAF 测量，卸载时清理。
-  // 用 onMount 而非 $effect(hostEl) —— 避免 host 因模板派生重渲染导致 effect 反复 teardown，
-  // 把 pending rAF cancel 掉（测量永不落地）的坑（svelte:element 不支持 use: 动作）。
-  // 命令式 + cleanup（红线 #3）；rAF 首测异步避免与渲染读写同栈（红线 #4）。
   onMount(() => {
     if (!needsMeasure || typeof window === 'undefined' || !ellipsisApi) return;
     const el = hostEl;
@@ -332,7 +357,10 @@
     let frame = 0;
     const measure = (): void => {
       frame = 0;
-      // 展开态 clamp 已撤除, scrollHeight==clientHeight, 不会误判
+      if (needsPreciseTruncate) {
+        measurePreciseNow();
+        return;
+      }
       ellipsisApi.measure({
         scrollHeight: el.scrollHeight,
         clientHeight: el.clientHeight,
@@ -341,7 +369,6 @@
         rows: measureRows,
       });
     };
-    // 首测：DOM 已布局，直接同步测一次落定 truncated（写 state 在 onMount 内，渲染读分离，无自循环）。
     measure();
     const schedule = (): void => {
       if (frame) return;
@@ -352,233 +379,172 @@
     return () => {
       if (frame) window.cancelAnimationFrame(frame);
       ro.disconnect();
+      probe?.remove();
+      probe = null;
     };
   });
 
-  // --- editable: 进入编辑聚焦 textarea；退出后焦点归还触发器（命令式, 红线 #3） ---
   $effect(() => {
-    if (!editApi) return;
-    if (editing) {
-      const ta = textareaEl;
-      if (ta) {
-        ta.focus();
-        ta.setSelectionRange(ta.value.length, ta.value.length);
-        applyAutosize();
-      }
-    } else if (lastTrigger) {
-      const t = lastTrigger;
-      lastTrigger = null;
-      t.focus?.();
-    }
+    if (!needsPreciseTruncate) return;
+    void expanded;
+    if (typeof window === 'undefined' || !hostEl) return;
+    const frame = window.requestAnimationFrame(measurePreciseNow);
+    return () => window.cancelAnimationFrame(frame);
   });
 
-  function applyAutosize(): void {
-    const ta = textareaEl;
-    if (!ta || editableCfg?.autosize === false) return;
-    ta.style.height = 'auto';
-    const cs = window.getComputedStyle(ta);
-    const lineHeight = parseFloat(cs.lineHeight) || 20;
-    const vPad = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
-    const vBorder = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);
-    const { height } = computeAutosizeHeight({
-      scrollHeight: ta.scrollHeight,
-      lineHeight,
-      verticalPadding: vPad,
-      verticalBorder: vBorder,
-      minRows: 1,
-      maxRows: 6,
-    });
-    ta.style.height = `${height}px`;
-  }
-
-  function startEdit(e: Event): void {
-    if (disabled || !editApi) return;
-    lastTrigger = (e.currentTarget as HTMLElement) ?? null;
-    editApi.start();
-  }
-  function onTriggerHost(e: Event): void {
-    if (!editApi) return;
-    const trig = editableCfg?.trigger ?? 'icon';
-    if (trig === 'click' && e.type === 'click') startEdit(e);
-    else if (trig === 'dblclick' && e.type === 'dblclick') startEdit(e);
-  }
-  // 合并 hostAttrs.onclick (如 Link 的 handleClick) 与编辑 click 触发
-  function hostClick(e: MouseEvent): void {
-    (hostAttrs?.onclick as ((ev: MouseEvent) => void) | undefined)?.(e);
-    onTriggerHost(e);
-  }
-  function onTextareaInput(e: Event): void {
-    editApi?.setDraft((e.target as HTMLTextAreaElement).value);
-    applyAutosize();
-  }
-  function onTextareaKeydown(e: KeyboardEvent): void {
-    if (!editApi) return;
-    const action = editApi.handleKey({ key: e.key, shiftKey: e.shiftKey });
-    if (action === 'confirm' || action === 'cancel') e.preventDefault();
-  }
+  // --- 展开/折叠切换（对齐 Semi toggleOverflow：onExpand(!expanded, e)）---
+  function toggleExpand(e: MouseEvent): void {
+    const next = !expanded;
+    ellipsisCfg?.onExpand?.(next, e);
+    onExpand?.(next, e);
+    ellipsisApi?.toggle();
+  }
+
+  // 能否走 CSS 截断（对齐 Semi canUseCSSEllipsis：无 expandable/suffix/copyable/pos≠end）
+  const canCssEllipsis = $derived(
+    ellipsisCfg !== null &&
+      !expandable &&
+      pos === 'end' &&
+      !copyableCfg &&
+      !(ellipsisCfg.suffix && ellipsisCfg.suffix.length),
+  );
 
-  // --- class (与旧实现一致 + 交互修饰) ---
+  // --- class（对齐 Semi base.tsx renderContent，单横线）---
+  // Semi：type class 仅 !link 时加；size class 用 realSize；link 时加 -link 不加 type。
   const cls = $derived(
     [
-      baseClass,
+      'cd-typography',
       extraClass,
-      type !== 'default' && `${baseClass}--${type}`,
-      // 字号档：Title (extraClass 含 --title) 由 heading 决定, 忽略 size (spec §4.1 L60)
-      size !== 'default' && !extraClass?.includes(`${baseClass}--title`) && `${baseClass}--size-${size}`,
-      strong && `${baseClass}--strong`,
-      disabled && `${baseClass}--disabled`,
-      mark && `${baseClass}--mark`,
-      underline && `${baseClass}--underline`,
-      del && `${baseClass}--delete`,
-      code && `${baseClass}--code`,
-      ellipsisCfg && !expanded && `${baseClass}--ellipsis`,
-      ellipsisCfg && rows > 1 && !expanded && `${baseClass}--ellipsis-multi`,
+      type && !link && `cd-typography-${type}`,
+      !isHeader && `cd-typography-${realSize}`,
+      link && 'cd-typography-link',
+      disabled && 'cd-typography-disabled',
+      spacing === 'extended' && 'cd-typography-extended',
+      // Title 字符串字重 → class（对齐 Semi -h{n}-weight-{w}）
+      isHeader && weight !== undefined && !weightIsNumeric && `cd-typography-${heading}-weight-${weight}`,
+      ellipsisCfg && `cd-typography-ellipsis`,
+      ellipsisCfg && rows === 1 && !expanded && `cd-typography-ellipsis-single-line`,
+      ellipsisCfg && rows > 1 && !expanded && `cd-typography-ellipsis-multiple-line`,
+      ellipsisCfg && rows > 1 && !expanded && element === 'span' && `cd-typography-ellipsis-multiple-line-text`,
+      ellipsisCfg && rows === 1 && !expanded && canCssEllipsis && `cd-typography-ellipsis-overflow-ellipsis`,
+      ellipsisCfg && rows === 1 && !expanded && canCssEllipsis && element === 'span' && `cd-typography-ellipsis-overflow-ellipsis-text`,
       className,
     ]
       .filter(Boolean)
       .join(' '),
   );
 
-  // ellipsis 行内样式: 多行用 line-clamp; 单行用 text-overflow.
+  // ellipsis 行内样式：多行 CSS clamp。
   const ellipsisStyle = $derived.by(() => {
     if (!ellipsisCfg || expanded) return '';
-    if (rows > 1) return `--cd-typo-clamp:${rows};`;
+    if (rows > 1 && canCssEllipsis) return `--cd-typo-clamp:${rows};`;
     return '';
   });
-  const hostStyle = $derived(`${inlineWeight}${ellipsisStyle}`);
+  const userStyleNormalized = $derived(
+    userStyle && !userStyle.trim().endsWith(';') ? `${userStyle};` : userStyle,
+  );
+  const hostStyle = $derived(`${inlineWeight}${ellipsisStyle}${userStyleNormalized}`);
 
-  // tooltip: 仅在确实溢出且 showTooltip 时启用
-  const tooltipEnabled = $derived(showTooltip && truncated === true && !expanded);
-  // textContent() 非响应式：用 truncated/expanded 变化作为重算触发器（measure 写 state 后重新取 DOM 全文）。
+  const isTruncated = $derived(
+    needsPreciseTruncate ? truncatedText !== null : truncated === true,
+  );
+  const tooltipEnabled = $derived(showTooltip && isTruncated && !expanded);
   const fullText = $derived.by(() => {
     void truncated;
+    void truncatedText;
     void expanded;
+    if (needsPreciseTruncate && truncatedText !== null && !expanded && preciseFullText) {
+      return preciseFullText;
+    }
     return textContent();
   });
-  // 浮层显示内容：opts.content 自定义优先，否则用完整原文。
   const tooltipContent = $derived(tooltipOpts.content ?? fullText);
 
-  const copyLabel = $derived(loc().t('Typography.copy'));
-  const editLabel = $derived(loc().t('Typography.edit'));
+  const copyLabel = $derived(copyableCfg?.copyTip ?? loc().t('Typography.copy'));
   const expandLabel = $derived(ellipsisCfg?.expandText ?? loc().t('Typography.expand'));
   const collapseLabel = $derived(ellipsisCfg?.collapseText ?? loc().t('Typography.collapse'));
+
+  // link 时透传给 <a> 的属性对象（object 形态）
+  const linkAttrs = $derived(typeof link === 'object' ? link : {});
 </script>
 
 {#snippet copyIconDefault()}
-  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-    <rect x="9" y="9" width="11" height="11" rx="2" />
-    <path d="M5 15V5a2 2 0 0 1 2-2h10" stroke-linecap="round" />
-  </svg>
+  <IconCopy size="inherit" aria-hidden="true" />
 {/snippet}
 {#snippet copiedIconDefault()}
-  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-    <path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round" />
-  </svg>
-{/snippet}
-{#snippet editIconDefault()}
-  <svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-    <path d="M4 20h4l10-10-4-4L4 16v4z" stroke-linejoin="round" />
-    <path d="M13.5 6.5l4 4" stroke-linecap="round" />
-  </svg>
+  <IconTick size="inherit" aria-hidden="true" />
 {/snippet}
 
 {#snippet actions()}
   {#if copyableCfg}
-    <button
-      type="button"
-      class="{baseClass}__action {baseClass}__action--copy"
-      class:is-copied={copied}
-      aria-label={copyLabel}
-      title={copyLabel}
-      onclick={doCopy}
-    >
-      {#if copied}
-        {#if copyableCfg.successIcon}{@render copyableCfg.successIcon()}{:else}{@render copiedIconDefault()}{/if}
-      {:else if copyableCfg.icon}{@render copyableCfg.icon()}{:else}{@render copyIconDefault()}{/if}
-    </button>
-  {/if}
-  {#if editableCfg && (editableCfg.trigger ?? 'icon') === 'icon'}
-    <button
-      type="button"
-      class="{baseClass}__action {baseClass}__action--edit"
-      aria-label={editLabel}
-      title={editLabel}
-      onclick={startEdit}
-    >
-      {@render editIconDefault()}
-    </button>
-  {/if}
-{/snippet}
-
-{#if editApi && editing}
-  <!-- inline edit mode: textarea 替换文本 -->
-  <span class="{baseClass}__edit-wrap">
-    <textarea
-      bind:this={textareaEl}
-      class="{baseClass}__edit-input"
-      value={draft}
-      maxlength={editableCfg?.maxLength}
-      aria-label={editLabel}
-      rows="1"
-      oninput={onTextareaInput}
-      onkeydown={onTextareaKeydown}
-      onblur={() => editApi?.confirm()}
-    ></textarea>
-  </span>
-{:else if !isInteractive}
-  <!-- 纯文本快路径: 与旧实现完全一致 (向后兼容) -->
-  <svelte:element this={element} class={cls} style={hostStyle || undefined} aria-disabled={disabled || undefined} {...hostAttrs}>
-    {@render children?.()}
-  </svelte:element>
-{:else}
-  <!-- showTooltip: 把截断后的文本宿主（hostNode，触发器）用 Tooltip/Popover 包裹，
-       浮层 content = 完整原文 / 自定义内容（Semi renderTipWrapper 模式）。
-       注意：以 showTooltip（静态配置）而非 tooltipEnabled（随 truncated 变化）决定是否包裹，
-       使 hostNode 在浮层内位置稳定，避免 truncated 翻转时 host 被 {#if} 销毁重建、
-       导致 onMount 建立的 ResizeObserver 观察到失效节点（测量永不再落地）。
-       未溢出/展开时用浮层 disabled / 空内容关闭浮层，不渲染浮层。 -->
-  {#if showTooltip}
-    {#if renderTooltip}
-      {@render renderTooltip(fullText, hostNode)}
-    {:else if tooltipType === 'popover'}
-      <Popover
-        content={tooltipEnabled ? tooltipContent : ''}
-        title={tooltipOpts.title ?? ''}
-        position={tooltipOpts.position ?? 'top'}
-        trigger="hover"
-        disabled={!tooltipEnabled}
-      >
-        {@render hostNode()}
-      </Popover>
+    {#if copyableCfg.render}
+      {@render copyableCfg.render(copied, doCopy, copyableCfg)}
+    {:else if copied}
+      <span class="cd-typography-action-copied">
+        {#if copyableCfg.successTip}{copyableCfg.successTip}{:else}{@render copiedIconDefault()}{loc().t('Typography.copied')}{/if}
+      </span>
     {:else}
-      <Tooltip
-        content={tooltipEnabled ? tooltipContent : ''}
-        placement={(tooltipOpts.placement ?? 'top') as never}
-        theme={tooltipOpts.theme ?? 'dark'}
-        maxWidth={tooltipOpts.maxWidth ?? 300}
-        disabled={!tooltipEnabled}
-      >
-        {@render hostNode()}
-      </Tooltip>
+      <span class="cd-typography-action-copy">
+        <button
+          type="button"
+          class="cd-typography-action-copy-icon"
+          aria-label={copyLabel}
+          title={copyLabel}
+          onclick={doCopy}
+        >
+          {#if copyableCfg.icon}{@render copyableCfg.icon()}{:else}{@render copyIconDefault()}{/if}
+        </button>
+      </span>
     {/if}
-  {:else}
-    {@render hostNode()}
   {/if}
+{/snippet}
 
-  {#if (expandable && !expanded && truncated === true) || (collapsible && expanded)}
-    <button
-      type="button"
-      class="{baseClass}__expand"
-      aria-expanded={expanded}
-      onclick={() => ellipsisApi?.toggle()}
-    >
-      {expanded ? collapseLabel : expandLabel}
-    </button>
-  {/if}
+<!-- 展开/收起按钮（对齐 Semi renderExpandable，类名 ellipsis-expand；
+     Semi 原为 a[role=button] 且自带 TODO 换 span，此处直接用 span 更合 a11y、视觉一致）。 -->
+{#snippet expandBtn()}
+  {#if (expandable && !expanded && isTruncated) || (collapsible && expanded)}<!--
+ --><span
+      role="button"
+      tabindex="0"
+      class="cd-typography-ellipsis-expand"
+      aria-label={expanded ? collapseLabel : expandLabel}
+      onclick={toggleExpand}
+      onkeydown={(e) => {
+        if (e.key === 'Enter') toggleExpand(e as unknown as MouseEvent);
+      }}
+    >{expanded ? collapseLabel : expandLabel}</span>{/if}
+{/snippet}
 
-  {@render actions()}
-{/if}
+<!-- 内容 + 装饰包裹（对齐 Semi wrapperDecorations：mark→code→u→strong→del→a）。
+     link 时内层套 cd-typography-link-text span，underline&&link 时加 -link-underline。 -->
+{#snippet inner()}
+  {#if icon}<span class="cd-typography-icon">{@render icon()}</span>{/if}{#if needsPreciseTruncate && truncatedText !== null && !expanded}{truncatedText}{:else}{@render children?.()}{/if}{#if ellipsisCfg?.suffix && isTruncated && !expanded}{ellipsisCfg.suffix}{/if}
+{/snippet}
+
+{#snippet linkWrapped()}
+  {#if link}<span class="cd-typography-link-text {underline ? 'cd-typography-link-underline' : ''}">{@render inner()}</span>{:else}{@render inner()}{/if}
+{/snippet}
 
+{#snippet decorated()}
+  {#if mark}<mark>{@render codeWrap()}</mark>{:else}{@render codeWrap()}{/if}
+{/snippet}
+{#snippet codeWrap()}
+  {#if code}<code>{@render uWrap()}</code>{:else}{@render uWrap()}{/if}
+{/snippet}
+{#snippet uWrap()}
+  {#if underline && !link}<u>{@render strongWrap()}</u>{:else}{@render strongWrap()}{/if}
+{/snippet}
+{#snippet strongWrap()}
+  {#if strong}<strong>{@render delWrap()}</strong>{:else}{@render delWrap()}{/if}
+{/snippet}
+{#snippet delWrap()}
+  {#if del}<del>{@render linkTag()}</del>{:else}{@render linkTag()}{/if}
+{/snippet}
+{#snippet linkTag()}
+  {#if link && disabled}<span>{@render linkWrapped()}</span>{:else if link}<a {...linkAttrs}>{@render linkWrapped()}</a>{:else}{@render linkWrapped()}{/if}
+{/snippet}
+
+<!-- 宿主元素（对齐 Semi Typography 容器 = element(component)）。 -->
 {#snippet hostNode()}
   <svelte:element
     this={element}
@@ -587,230 +553,319 @@
     style={hostStyle || undefined}
     aria-disabled={disabled || undefined}
     {...hostAttrs}
-    onclick={hostClick}
-    ondblclick={onTriggerHost}
-  >
-    {@render children?.()}{#if ellipsisCfg?.suffix && truncated === true && !expanded}<!--
- -->{ellipsisCfg.suffix}{/if}
-  </svelte:element>
+  >{@render decorated()}{@render expandBtn()}{@render actions()}</svelte:element>
 {/snippet}
 
+{#if !isInteractive}
+  {@render hostNode()}
+{:else if showTooltip}
+  {#if renderTooltip}
+    {@render renderTooltip(fullText, hostNode)}
+  {:else if tooltipType === 'popover'}
+    <Popover
+      content={tooltipEnabled ? tooltipContent : ''}
+      title={tooltipOpts.title ?? ''}
+      position={tooltipOpts.position ?? 'top'}
+      trigger="hover"
+      disabled={!tooltipEnabled}
+    >
+      {@render hostNode()}
+    </Popover>
+  {:else}
+    <Tooltip
+      content={tooltipEnabled ? tooltipContent : ''}
+      position={(tooltipOpts.position ?? tooltipOpts.placement ?? 'top') as never}
+      class={tooltipOpts.className ?? ''}
+      style={[
+        typeof tooltipOpts.maxWidth === 'number'
+          ? `max-inline-size:${tooltipOpts.maxWidth}px`
+          : tooltipOpts.maxWidth
+            ? `max-inline-size:${tooltipOpts.maxWidth}`
+            : '',
+        tooltipOpts.style ?? '',
+      ]
+        .filter(Boolean)
+        .join(';')}
+      disabled={!tooltipEnabled}
+    >
+      {@render hostNode()}
+    </Tooltip>
+  {/if}
+{:else}
+  {@render hostNode()}
+{/if}
+
 <style>
-  /* ── 基础排版样式 (统一源, 因实际元素由本组件渲染, 子组件 scoped 不生效) ── */
+  /* ══ 基础排版（对齐 semi-foundation/typography/typography.scss）══
+     元素由本组件渲染，子组件 scoped 不生效，统一用 :global。 */
   :global(.cd-typography) {
-    color: var(--cd-typography-color);
+    color: var(--cd-color-typography-default-text-default);
+    font-size: var(--cd-font-size-regular);
+    line-height: 20px;
   }
-  :global(.cd-typography--paragraph),
-  :global(.cd-typography--title) {
-    margin: 0;
+
+  /* 语义色（对齐 .semi-typography-{type}）。primary 用默认色，不额外覆盖。 */
+  :global(.cd-typography-secondary) {
+    color: var(--cd-color-typography-secondary-text-default);
   }
-  :global(.cd-typography--paragraph) {
-    margin-block-end: var(--cd-spacing-base);
+  :global(.cd-typography-tertiary) {
+    color: var(--cd-color-typography-tertiary-text-default);
   }
-  :global(.cd-typography--title) {
-    font-weight: var(--cd-font-weight-bold);
+  :global(.cd-typography-quaternary) {
+    color: var(--cd-color-typography-quaternary-text-default);
   }
-  :global(.cd-typography--h1) {
-    font-size: var(--cd-font-size-header-1);
+  :global(.cd-typography-warning) {
+    color: var(--cd-color-typography-warning-text-default);
   }
-  :global(.cd-typography--h2) {
-    font-size: var(--cd-font-size-header-3);
+  :global(.cd-typography-success) {
+    color: var(--cd-color-typography-success-text-default);
   }
-  :global(.cd-typography--h3) {
-    font-size: var(--cd-font-size-header-4);
+  :global(.cd-typography-danger) {
+    color: var(--cd-color-typography-danger-text-default);
   }
-  :global(.cd-typography--h4) {
-    font-size: var(--cd-font-size-header-6);
+
+  /* 链接（对齐 .semi-typography-link + a）。 */
+  :global(.cd-typography-link) {
+    color: var(--cd-color-typography-link-text-default);
+    font-weight: var(--cd-font-typography-link-fontweight);
   }
-  :global(.cd-typography--h5) {
-    font-size: var(--cd-font-size-regular);
+  :global(.cd-typography-disabled) {
+    color: var(--cd-color-typography-disabled-text-default);
+    cursor: not-allowed;
+    user-select: none;
   }
-  :global(.cd-typography--h6) {
-    font-size: var(--cd-font-size-small);
+  :global(.cd-typography-disabled.cd-typography-link) {
+    color: var(--cd-color-typography-link-text-disabled);
   }
-  :global(.cd-typography--link) {
-    color: var(--cd-typography-color-link);
-    text-decoration: none;
+  :global(.cd-typography a) {
+    display: inline;
+    color: var(--cd-color-typography-link-text-default);
     cursor: pointer;
-    transition: color var(--cd-motion-duration-fast) var(--cd-motion-ease-standard);
-  }
-  :global(.cd-typography--link:hover) {
-    color: var(--cd-typography-color-link-hover);
-  }
-  :global(.cd-typography--link:focus-visible) {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-    border-radius: 2px;
-  }
-  :global(.cd-typography--link.cd-typography--disabled) {
-    pointer-events: none;
+    text-decoration: none;
   }
-  :global(.cd-typography--secondary) {
-    color: var(--cd-typography-color-secondary);
+  :global(.cd-typography a:visited) {
+    color: var(--cd-color-typography-link-text-visited);
   }
-  :global(.cd-typography--tertiary) {
-    color: var(--cd-typography-color-tertiary);
+  :global(.cd-typography a:hover) {
+    color: var(--cd-color-typography-link-text-hover);
   }
-  :global(.cd-typography--warning) {
-    color: var(--cd-color-warning);
+  :global(.cd-typography a:active) {
+    color: var(--cd-color-typography-link-text-active);
   }
-  :global(.cd-typography--danger) {
-    color: var(--cd-color-danger);
+  :global(.cd-typography a .cd-typography-link-underline:hover) {
+    border-bottom: var(--cd-width-typography-link-border) solid var(--cd-color-typography-link-text-hover);
+    margin-bottom: calc(-1 * var(--cd-width-typography-link-border));
   }
-  :global(.cd-typography--success) {
-    color: var(--cd-color-success);
+  :global(.cd-typography a .cd-typography-link-underline:active) {
+    border-bottom: var(--cd-width-typography-link-border) solid var(--cd-color-typography-link-text-active);
+    margin-bottom: calc(-1 * var(--cd-width-typography-link-border));
   }
-  :global(.cd-typography--strong) {
-    font-weight: var(--cd-font-weight-bold);
+
+  /* 前置图标（对齐 .semi-typography-icon）。 */
+  :global(.cd-typography-icon) {
+    margin-right: var(--cd-spacing-typography-iconprefix-marginright);
+    vertical-align: middle;
+    color: inherit;
   }
-  /* 字号档 (Text/Paragraph) — spec §4.1 size + §5 token 表; default 沿用继承字号保持向后兼容 */
-  :global(.cd-typography--size-small) {
-    font-size: var(--cd-typography-font-size-small, var(--cd-font-size-small));
+
+  /* 小号文本（对齐 .semi-typography-small）。 */
+  :global(.cd-typography-small) {
+    font-size: var(--cd-font-size-small);
+    line-height: 16px;
+    font-weight: var(--cd-font-typography-smalltext-regular-fontweight);
   }
-  :global(.cd-typography--size-large) {
-    font-size: var(--cd-typography-font-size-large, var(--cd-font-size-header-6));
+  :global(.cd-typography-small.cd-typography-paragraph) {
+    font-weight: var(--cd-font-typography-smallparagraph-regular-fontweight);
   }
-  :global(.cd-typography--disabled) {
-    opacity: 0.5;
-    cursor: not-allowed;
+
+  /* 语义标签（对齐 typography.scss code/mark/u/del/strong）。 */
+  :global(.cd-typography code) {
+    border: var(--cd-width-typography-code-border) solid var(--cd-color-typography-code-border-default);
+    border-radius: var(--cd-radius-typography-code);
+    color: var(--cd-color-typography-code-text-default);
+    background-color: var(--cd-color-typography-code-bg-default);
+    padding: 2px 4px;
+    font-family: var(--cd-font-family-code);
   }
-  :global(.cd-typography--mark) {
-    background-color: var(--cd-typography-mark-bg);
+  :global(.cd-typography mark) {
+    background-color: var(--cd-color-typography-mark-bg-default);
   }
-  :global(.cd-typography--underline) {
-    text-decoration-line: underline;
+  :global(.cd-typography u) {
+    text-decoration: underline;
+    text-decoration-skip-ink: auto;
   }
-  /* 链接 + underline 变体：平时无下划线，hover 才出（对齐 Semi，仅作用于 link）。
-     非链接的 underline 文本仍常显下划线。 */
-  :global(.cd-typography--link.cd-typography--underline) {
-    text-decoration-line: none;
+  :global(.cd-typography del) {
+    text-decoration: line-through;
   }
-  :global(.cd-typography--link.cd-typography--underline:hover) {
-    text-decoration-line: underline;
+  :global(.cd-typography strong) {
+    font-weight: var(--cd-font-typography-strong-fontweight);
   }
-  :global(.cd-typography--delete) {
-    text-decoration-line: line-through;
+
+  /* ══ Title（对齐 typography.scss h1..h6 + 字重档）══ */
+  :global(.cd-typography-h1) {
+    font-size: var(--cd-font-size-header-1);
+    line-height: 44px;
+    font-weight: var(--cd-font-typography-title1-fontweight);
+    margin: var(--cd-spacing-typography-title-h1-margin);
+  }
+  :global(.cd-typography-h1.cd-typography-h1-weight-light) { font-weight: var(--cd-font-typography-title1-light-fontweight); }
+  :global(.cd-typography-h1.cd-typography-h1-weight-regular) { font-weight: var(--cd-font-typography-title1-regular-fontweight); }
+  :global(.cd-typography-h1.cd-typography-h1-weight-medium) { font-weight: var(--cd-font-typography-title1-medium-fontweight); }
+  :global(.cd-typography-h1.cd-typography-h1-weight-semibold) { font-weight: var(--cd-font-typography-title1-semibold-fontweight); }
+  :global(.cd-typography-h1.cd-typography-h1-weight-bold) { font-weight: var(--cd-font-typography-title1-bold-fontweight); }
+
+  :global(.cd-typography-h2) {
+    font-size: var(--cd-font-size-header-2);
+    line-height: 40px;
+    font-weight: var(--cd-font-typography-title2-fontweight);
+    margin: var(--cd-spacing-typography-title-h2-margin);
+  }
+  :global(.cd-typography-h2.cd-typography-h2-weight-light) { font-weight: var(--cd-font-typography-title2-light-fontweight); }
+  :global(.cd-typography-h2.cd-typography-h2-weight-regular) { font-weight: var(--cd-font-typography-title2-regular-fontweight); }
+  :global(.cd-typography-h2.cd-typography-h2-weight-medium) { font-weight: var(--cd-font-typography-title2-medium-fontweight); }
+  :global(.cd-typography-h2.cd-typography-h2-weight-semibold) { font-weight: var(--cd-font-typography-title2-semibold-fontweight); }
+  :global(.cd-typography-h2.cd-typography-h2-weight-bold) { font-weight: var(--cd-font-typography-title2-bold-fontweight); }
+
+  :global(.cd-typography-h3) {
+    font-size: var(--cd-font-size-header-3);
+    line-height: 32px;
+    font-weight: var(--cd-font-typography-title3-fontweight);
+    margin: var(--cd-spacing-typography-title-h3-margin);
   }
-  :global(.cd-typography--underline.cd-typography--delete) {
-    text-decoration-line: underline line-through;
+  :global(.cd-typography-h3.cd-typography-h3-weight-light) { font-weight: var(--cd-font-typography-title3-light-fontweight); }
+  :global(.cd-typography-h3.cd-typography-h3-weight-regular) { font-weight: var(--cd-font-typography-title3-regular-fontweight); }
+  :global(.cd-typography-h3.cd-typography-h3-weight-medium) { font-weight: var(--cd-font-typography-title3-medium-fontweight); }
+  :global(.cd-typography-h3.cd-typography-h3-weight-semibold) { font-weight: var(--cd-font-typography-title3-semibold-fontweight); }
+  :global(.cd-typography-h3.cd-typography-h3-weight-bold) { font-weight: var(--cd-font-typography-title3-bold-fontweight); }
+
+  :global(.cd-typography-h4) {
+    font-size: var(--cd-font-size-header-4);
+    line-height: 28px;
+    font-weight: var(--cd-font-typography-title4-fontweight);
+    margin: var(--cd-spacing-typography-title-h4-margin);
+  }
+  :global(.cd-typography-h4.cd-typography-h4-weight-light) { font-weight: var(--cd-font-typography-title4-light-fontweight); }
+  :global(.cd-typography-h4.cd-typography-h4-weight-regular) { font-weight: var(--cd-font-typography-title4-regular-fontweight); }
+  :global(.cd-typography-h4.cd-typography-h4-weight-medium) { font-weight: var(--cd-font-typography-title4-medium-fontweight); }
+  :global(.cd-typography-h4.cd-typography-h4-weight-semibold) { font-weight: var(--cd-font-typography-title4-semibold-fontweight); }
+  :global(.cd-typography-h4.cd-typography-h4-weight-bold) { font-weight: var(--cd-font-typography-title4-bold-fontweight); }
+
+  :global(.cd-typography-h5) {
+    font-size: var(--cd-font-size-header-5);
+    line-height: 24px;
+    font-weight: var(--cd-font-typography-title5-fontweight);
+    margin: var(--cd-spacing-typography-title-h5-margin);
+  }
+  :global(.cd-typography-h5.cd-typography-h5-weight-light) { font-weight: var(--cd-font-typography-title5-light-fontweight); }
+  :global(.cd-typography-h5.cd-typography-h5-weight-regular) { font-weight: var(--cd-font-typography-title5-regular-fontweight); }
+  :global(.cd-typography-h5.cd-typography-h5-weight-medium) { font-weight: var(--cd-font-typography-title5-medium-fontweight); }
+  :global(.cd-typography-h5.cd-typography-h5-weight-semibold) { font-weight: var(--cd-font-typography-title5-semibold-fontweight); }
+  :global(.cd-typography-h5.cd-typography-h5-weight-bold) { font-weight: var(--cd-font-typography-title5-bold-fontweight); }
+
+  :global(.cd-typography-h6) {
+    font-size: var(--cd-font-size-header-6);
+    line-height: 22px;
+    font-weight: var(--cd-font-typography-title6-fontweight);
+    margin: var(--cd-spacing-typography-title-h6-margin);
   }
-  :global(.cd-typography--code) {
-    font-family: var(--cd-font-family-mono, monospace);
-    font-size: var(--cd-typography-code-font-size);
-    background-color: var(--cd-typography-code-bg);
-    color: var(--cd-typography-code-color); /* 对齐 Semi code 文字 text-2 */
-    padding-inline: 0.4em;
-    padding-block: 0.1em;
-    border-radius: 3px;
+  :global(.cd-typography-h6.cd-typography-h6-weight-light) { font-weight: var(--cd-font-typography-title6-light-fontweight); }
+  :global(.cd-typography-h6.cd-typography-h6-weight-regular) { font-weight: var(--cd-font-typography-title6-regular-fontweight); }
+  :global(.cd-typography-h6.cd-typography-h6-weight-medium) { font-weight: var(--cd-font-typography-title6-medium-fontweight); }
+  :global(.cd-typography-h6.cd-typography-h6-weight-semibold) { font-weight: var(--cd-font-typography-title6-semibold-fontweight); }
+  :global(.cd-typography-h6.cd-typography-h6-weight-bold) { font-weight: var(--cd-font-typography-title6-bold-fontweight); }
+
+  /* ══ Paragraph（对齐 typography.scss .semi-typography-paragraph + extended）══ */
+  :global(.cd-typography-paragraph) {
+    margin: var(--cd-spacing-typography-title-paragraph-margin);
   }
-  @media (prefers-reduced-motion: reduce) {
-    :global(.cd-typography--link) {
-      transition: none;
-    }
+  :global(.cd-typography-paragraph.cd-typography-extended) {
+    line-height: var(--cd-font-typography-paragraph-extended-lineheight);
+    font-weight: var(--cd-font-typography-normalparagraph-regular-fontweight);
   }
 
-  /* ── 交互态样式 ── */
-  :global(.cd-typography--ellipsis) {
-    /* Text 渲染为 <span>（display:inline）；text-overflow/overflow 在 inline 上不生效，
-       需 inline-block 才能截断。max-inline-size 令其受父容器宽度约束，
-       vertical-align 避免 inline-block 基线下沉。 */
-    display: inline-block;
-    max-inline-size: 100%;
-    vertical-align: bottom;
+  /* ══ Ellipsis（对齐 typography.scss ellipsis 段）══ */
+  :global(.cd-typography-ellipsis-single-line) {
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
-  :global(.cd-typography--ellipsis-multi) {
+  :global(.cd-typography-ellipsis-multiple-line) {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: var(--cd-typo-clamp, 1);
     line-clamp: var(--cd-typo-clamp, 1);
-    white-space: normal;
     overflow: hidden;
   }
-  /* showTooltip：Tooltip/Popover 触发包裹默认 inline-block 收缩到内容宽，
-     会让被包裹宿主的 max-inline-size:100% 退化为内容宽（永不溢出、tooltip 永不触发）。
-     当包裹的是省略宿主时，让包裹层撑满父容器宽度，使宽度约束正确传递到宿主。 */
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis)),
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis-multi)),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis)),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis-multi)) {
+  :global(.cd-typography-ellipsis-multiple-line.cd-typography-ellipsis-multiple-line-text) {
+    display: -webkit-inline-box;
+  }
+  :global(.cd-typography-ellipsis-overflow-ellipsis) {
+    display: block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  :global(.cd-typography-ellipsis-overflow-ellipsis.cd-typography-ellipsis-overflow-ellipsis-text) {
+    display: inline-block;
+    max-width: 100%;
+    vertical-align: top;
+  }
+  :global(.cd-typography-ellipsis-expand) {
+    display: inline;
+    margin-left: var(--cd-spacing-typography-expandtext-marginleft);
+    color: var(--cd-color-typography-link-text-default);
+    cursor: pointer;
+  }
+  :global(.cd-typography-ellipsis-expand:hover) {
+    color: var(--cd-color-typography-link-text-hover);
+  }
+
+  /* showTooltip 包裹撑满父宽，使宽度约束正确传递到宿主省略节点。 */
+  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography-ellipsis-single-line)),
+  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography-ellipsis-multiple-line)) {
     display: block;
     max-inline-size: 100%;
   }
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis) > .cd-tooltip__trigger),
-  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography--ellipsis-multi) > .cd-tooltip__trigger),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis) > .cd-popover__trigger),
-  :global(.cd-popover:has(> .cd-popover__trigger > .cd-typography--ellipsis-multi) > .cd-popover__trigger) {
+  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography-ellipsis-single-line) > .cd-tooltip__trigger),
+  :global(.cd-tooltip:has(> .cd-tooltip__trigger > .cd-typography-ellipsis-multiple-line) > .cd-tooltip__trigger) {
     display: block;
     max-inline-size: 100%;
   }
-  :global(.cd-typography__action) {
+
+  /* ══ Copyable（对齐 typography.scss action-copy / action-copied）══ */
+  :global(.cd-typography-action-copy) {
     display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-inline-start: 4px;
-    padding: 2px;
-    border: 0;
-    background: transparent;
-    color: var(--cd-typography-action-color, var(--cd-color-text-2));
-    cursor: pointer;
-    border-radius: 3px;
     vertical-align: middle;
-    transition: color var(--cd-motion-duration-fast, 120ms) ease;
-  }
-  :global(.cd-typography__action:hover) {
-    color: var(--cd-typography-action-color-hover, var(--cd-color-primary));
+    padding: var(--cd-spacing-typography-copyicon-padding);
+    margin-left: var(--cd-spacing-typography-copyicon-marginleft);
   }
-  :global(.cd-typography__action:focus-visible) {
-    outline: none;
-    box-shadow: var(--cd-focus-ring);
-  }
-  :global(.cd-typography__action--copy.is-copied) {
-    color: var(--cd-color-success);
-  }
-  :global(.cd-typography__expand) {
-    margin-inline-start: 4px;
+  :global(.cd-typography-action-copy-icon) {
+    display: inline-flex;
+    align-items: center;
     padding: 0;
     border: 0;
     background: transparent;
-    color: var(--cd-color-link, var(--cd-color-primary));
+    color: inherit;
     cursor: pointer;
-    font: inherit;
   }
-  :global(.cd-typography__expand:hover) {
-    color: var(--cd-color-link-hover, var(--cd-color-primary));
+  :global(.cd-typography-action-copy-icon svg) {
+    inline-size: 1em;
+    block-size: 1em;
   }
-  :global(.cd-typography__expand:focus-visible) {
+  :global(.cd-typography-action-copy-icon:focus-visible) {
     outline: none;
     box-shadow: var(--cd-focus-ring);
     border-radius: 2px;
   }
-  :global(.cd-typography__edit-wrap) {
-    display: inline-block;
-    width: 100%;
-  }
-  :global(.cd-typography__edit-input) {
-    width: 100%;
-    box-sizing: border-box;
-    font: inherit;
-    color: inherit;
-    padding: 2px 6px;
-    border: 1px solid var(--cd-color-border, #d9d9d9);
-    border-radius: var(--cd-border-radius, 4px);
-    background: var(--cd-color-bg-1, #fff);
-    resize: none;
-    overflow: hidden;
-  }
-  :global(.cd-typography__edit-input:focus-visible) {
-    outline: none;
-    border-color: var(--cd-color-primary);
-    box-shadow: var(--cd-focus-ring);
+  :global(.cd-typography-action-copied) {
+    display: inline-flex;
+    align-items: center;
+    padding: var(--cd-spacing-typography-copyicon-padding);
+    margin-left: var(--cd-spacing-typography-copyicon-marginleft);
+    vertical-align: middle;
+    color: var(--cd-color-typography-copied-text-success);
   }
-  @media (prefers-reduced-motion: reduce) {
-    :global(.cd-typography__action) {
-      transition: none;
-    }
+  :global(.cd-typography-action-copied svg) {
+    inline-size: 1em;
+    block-size: 1em;
+    vertical-align: middle;
+    color: var(--cd-color-typography-copied-icon-success);
   }
 </style>