delta · 变化量

delta 只回答一件事：这个数相对基准往哪边变了、变了多少。 它不判断好坏 —— 同一个“涨”，对营收是好消息，对费用是坏消息， 那是读者的判断，不是颜色的判断。

三个方向

最后一个是紧凑档（delta--sm），用于表格行内与密集列表。
符号是 CSS 生成的：HTML 里只写 3.21%， 渲染成 +3.21%；写 1.05% 配 delta--down， 渲染成 −1.05%（减号是 U+2212，不是连字符 —— 连字符窄一半，混排会歪）。 持平刻意不带符号：0 没有方向，给它一个 ± 是把“误差”的概念借了过来。

符号为什么由 CSS 生成

因为“手写符号”是一种不会报错的错误。数据侧照着习惯把 −1.05% 写进去，组件再补一个减号，渲染出来是 −−1.05% —— 页面不崩、控制台不响，只是报表看起来像坏了。 下面是两栏真实渲染（同一段数据，只差手写时带没带符号）：

口径：默认红涨绿跌，可整体切换

两栏的 HTML 逐字相同，区别只有右栏祖先上多了 data-market="intl"。组件 CSS 里没有任何 [data-market] 分支 —— 它只写 color: var(--dir-up)， 切换发生在令牌层（跟暗色同一手法：换底层值，语义名不动）。
也可以只切局部：这个属性加在任何容器上，就只影响那一块。

方向强化：箭头档

delta--arrow 把符号换成 ▲ / ▼。它与符号档互斥 （同一个 ::before），不要同时加。
⚠️ 箭头是字符伪元素，读屏可能念出字符本身。要严格可控就给它外层加 aria-label（如「同比上涨 3.21%」），或不用这一档 —— 默认的 +/− 已经满足「不能只靠颜色」。

在真语境里

看第二行：研发费用 +38.20% 是“涨”，但那是成本失控，不是好消息。 如果用 table 的 num--pos（会计约定：正 = 绿）来渲染， 它会是绿色的 —— 颜色说“好事”，语义说“坏消息”。这正是 delta 存在的理由： 它只描述方向，不替读者下结论。

三条边界

① 方向由你给，不由数值推断。本组件没有 JS，不读数值； 类名写错就颜色错，而且不报错。数据侧务必按值选类，值为 0 用 delta--flat。
② 这不是“好/坏”指示器。要表达“成功/失败/警告”用 badge 的语义变体；要表达会计正负用 table 的 num--pos/neg。三者不可互换。
③ 涨跌幅塞进表格时用它，不要用 num--pos/neg。 那两组是会计约定（正 = 绿），套在涨跌幅上会把“跌”渲染成红、把“涨”渲染成绿， 正好与 A 股习惯相反。这一条此前是 table README 里登记的未解问题， 现在有解了。