agentcss 0.11.16 → 0.12.0

package/README.zh-CN.md

@@ -83,9 +83,9 @@ npm install github:owain323/frontend-lib
 
 ## 组件一览
 
-共 **35** 个（stable 31 / beta 4）。每个组件目录下有 `README.md`（为什么这么做）和 `demo.html`（能直接抄的结构）。
+共 **37** 个（stable 33 / beta 4）。每个组件目录下有 `README.md`（为什么这么做）和 `demo.html`（能直接抄的结构）。
 
-### primitives · 基础件（13）
+### primitives · 基础件（15）
 
 | 组件 | 根类名 | 用途 |
 |---|---|---|
@@ -95,7 +95,9 @@ npm install github:owain323/frontend-lib
 | `choice` | `choice` | 单选/多选/原生 select 外观的统一控件 |
 | `combobox` | `combo` | 可搜索 + 可多选标签的输入控件 |
 | `date-range` | `drange` | 日期区间选择，含预设快捷范围 |
+| `delta` | `delta` | 变化量：涨跌方向 + 符号，**只描述方向不判断好坏** |
 | `input` | `field` | 文本输入及其标签/帮助/错误三件套 |
+| `metric` | `metric` | 指标块：一个标签 + 一个值 + 一句上下文，缺数是一等状态 |
 | `popover` | `popover` | 锚定到触发元素的浮层 |
 | `progress` | `progress` | 进度条与进度环 |
 | `select` | `select` | 自定义下拉选择（非原生） |
@@ -181,8 +183,8 @@ dist/01-tokens/tokens.css          ← 拷这个
 01-tokens/tokens.css              ← 源码（带 31.6 KB 注释），用于阅读
 ```
 
-- **别拷源码目录**除非你要读它：全库 CSS 有 66% 是注释（字节口径；字符口径会低报 12 个百分点），`page.css` 一个文件
-  12.4 KB 里 10.8 KB 是注释。
+- **别拷源码目录**除非你要读它：全库 CSS 有 67% 是注释（字节口径；字符口径会低报 12 个百分点），`page.css` 一个文件
+  17.5 KB 里 15.1 KB 是注释。
 - **JS 也拷 `dist/`**：那一份去了注释但没压缩（理由见「体积」一节）。
 
 ---
@@ -249,10 +251,10 @@ dist/01-tokens/tokens.css          ← 拷这个
 ## 体积：默认给你的已经是干净产物
 
 源码目录（`01-tokens/` `02-primitives/` …）里的 CSS **带着全部注释** —— 实测全库 CSS
-有 **66% 是注释**（354.7 KB 原始里 235.2 KB），`page.css` 单个就有 87%。
+有 **67% 是注释**（399.3 KB 原始里 267.8 KB），`page.css` 单个就有 86%。
 
 那些注释是写给你看的取舍理由（为什么这么定、踩过什么坑），不是写给你浏览器看的。
-**注释让你看代码时处处撞墙，构建工具还会把 66% 的字节原样传下去。**
+**注释让你看代码时处处撞墙，构建工具还会把 67% 的字节原样传下去。**
 
 ⇒ 所以 `import 'agentcss/tokens.css'` **默认给你去注释后的产物**，
 源码版放在 `agentcss/src/*`：

package/START-HERE.md

@@ -60,6 +60,8 @@
 | 列表增删 | `03-patterns/list/list.css` | 162 | 可选 201 (`flip.js`，FLIP 增删动画，纯增强) | 列表会动态增删就要 |
 | 导航 / 目录 | `03-patterns/nav/nav.css` | 314 | **必需 433** (`nav.js`) · 可选 111 (`toc.js`，自动生成目录，纯增强) | 顶部要导航，或长文要目录就要 |
 | 长文排版 | `03-patterns/content/content.css` | 286 | — | 写文档 / 长文就要 |
+| delta | `02-primitives/delta/delta.css` | 113 | — |  |
+| metric | `02-primitives/metric/metric.css` | 157 | — |  |
 | reveal | `03-patterns/reveal/reveal.css` | 93 | 可选 175 (`reveal.js`，入场动效，纯增强；没有它内容直接可见) |  |
 | analysis-report | `04-recipes/analysis-report/analysis-report.css` | 187 | — |  |
 | detail-page | `04-recipes/detail-page/detail-page.css` | 190 | — |  |

package/ai/START-HERE.md

@@ -30,7 +30,7 @@
 > 它的值直接从 `ai/components.json` 与目录实际内容读出来 —— **不信上面的说法，信这个**。
 
 <!-- ==== AI-INVENTORY-BEGIN ==== -->
-- 组件 **35** 个（`beta` 4 · `stable` 31）
+- 组件 **37** 个（`beta` 4 · `stable` 33）
 - `04-recipes/`（页面级示例）：`analysis-report`（组合型研究报告：正文 + 辅助栏并排，窄屏退回单栏） · `data-showcase`（四种数据表达方式对照：我到底该用哪个） · `detail-page`（实体详情页骨架：字段齐全 / 部分缺失 / 无数据，三态同构（DOM 不变）） · `longform`（单栏长文排版与阅读节奏） · `report`（报告版式系统 v1：共享基础 + 三种版式取舍（杂志 / 科研技术 / 金融研究）） · `table`（专业数据表格：列级格式与单位，三种用途预设）
 - `09-assets/`（图表与可视化）：`bar`（柱状图，含图表规范的裁剪铁律） · `echarts-adapter`（把令牌喂给 ECharts，按需引入；本库不含 ECharts） · `model-viewer`（惰性加载的 3D 模型查看器） · `scientific-plot`（二维科学绘图：坐标轴 / 误差棒 / 置信区间带 / 对数轴） · `sparkline`（迷你趋势线，没有坐标轴的走势提示）
 <!-- ==== AI-INVENTORY-END ==== -->

package/ai/components.json

@@ -1,24 +1,24 @@
 {
   "schemaVersion": "1.0.0",
   "generatedBy": "05-audit/gen-ai-contract.py",
-  "libraryVersion": "0.11.16",
+  "libraryVersion": "0.12.0",
   "$comment": "机器可读的组件契约。slots = BEM 元素名（在本库里元素名就是插槽名），states.enum = 组件会在 DOM 上写出的 data-* 取值，states.legacyClass = 仍未收敛到 data 属性的历史状态类（INVARIANT I-8 未达标）。",
   "maturityCriteria": {
     "alpha": "缺 demo.html 或缺 05-audit 下的专属门禁 ⇒ 还没被机器验证过，不要用",
     "beta": "有 demo + 专属门禁，但**下面至少有一条没过**：① 状态仍用 .is-* class 表达（违反 INVARIANT I-8）；② 该收编到微行为核的行为还是**手写副本**（manual）或**根本没做**（gap） ⇒ 改一处不会全库跟着变（I-14 的病）",
     "stable": "以上四条全过：有 demo + 专属门禁 + 状态全在 data-* 属性上 + 行为零欠账",
     "$note": "成熟度是【计算出来的】，不是拍的。手写把某个组件改成 stable 而它还有 manual / gap ⇒ 门禁会红。",
-    "$whyFourth": "🔴 为什么第四条判据不能省：用前三条时多数组件会**全是 stable** ⇒ ladder 没有任何鉴别力（对标 Primer 六档阶梯，每档都有硬判据）。补上「行为欠账」这一条后：**stable 31 / beta 4**（本行由生成器算出，不要手改）。",
+    "$whyFourth": "🔴 为什么第四条判据不能省：用前三条时多数组件会**全是 stable** ⇒ ladder 没有任何鉴别力（对标 Primer 六档阶梯，每档都有硬判据）。补上「行为欠账」这一条后：**stable 33 / beta 4**（本行由生成器算出，不要手改）。",
     "$strictImpact": "⚠️ strict 档位只放行 stable ⇒ 4 个组件在 strict 下不可用：accordion / drawer / dropdown / overlay。放宽 strict 会让「未收编的手写行为」进入生产路径。（本行由生成器算出，不要手改）"
   },
   "summary": {
-    "total": 35,
+    "total": 37,
     "byMaturity": {
-      "stable": 31,
+      "stable": 33,
       "beta": 4
     },
     "byTier": {
-      "primitive": 13,
+      "primitive": 15,
       "pattern": 14,
       "recipe": 4,
       "asset": 4
@@ -1353,6 +1353,49 @@
       "globalAlso": [],
       "behaviorRef": "API.md#date-range"
     },
+    {
+      "id": "delta",
+      "tier": "primitive",
+      "purpose": "变化量：涨跌方向 + 符号 + 颜色。只描述往哪边变，不判断好坏（等于好恶是 badge 的事，会计正负是 table 的事）",
+      "rootClass": "delta",
+      "maturity": "stable",
+      "maturityReasons": {
+        "hasDemo": true,
+        "hasDedicatedGate": true,
+        "statesOnDomAttributes": true,
+        "behaviorDebt": []
+      },
+      "gates": [
+        "delta-check.js"
+      ],
+      "files": {
+        "css": "02-primitives/delta/delta.css",
+        "js": null,
+        "jsAlso": [],
+        "demo": "02-primitives/delta/demo.html"
+      },
+      "slots": [],
+      "variants": [
+        "delta--arrow",
+        "delta--down",
+        "delta--flat",
+        "delta--sm",
+        "delta--up"
+      ],
+      "states": {
+        "enum": {},
+        "boolean": [],
+        "legacyClass": []
+      },
+      "aria": {
+        "roles": [],
+        "attrs": []
+      },
+      "usesOtherNamespaces": [],
+      "global": null,
+      "globalAlso": [],
+      "behaviorRef": "API.md#delta"
+    },
     {
       "id": "input",
       "tier": "primitive",
@@ -1410,6 +1453,54 @@
       "globalAlso": [],
       "behaviorRef": "API.md#input"
     },
+    {
+      "id": "metric",
+      "tier": "primitive",
+      "purpose": "指标块：一个标签 + 一个值 + 一句上下文。数字等宽、单位分离、缺数是一等状态",
+      "rootClass": "metric",
+      "maturity": "stable",
+      "maturityReasons": {
+        "hasDemo": true,
+        "hasDedicatedGate": true,
+        "statesOnDomAttributes": true,
+        "behaviorDebt": []
+      },
+      "gates": [
+        "metric-check.js"
+      ],
+      "files": {
+        "css": "02-primitives/metric/metric.css",
+        "js": null,
+        "jsAlso": [],
+        "demo": "02-primitives/metric/demo.html"
+      },
+      "slots": [
+        "metric__foot",
+        "metric__label",
+        "metric__note",
+        "metric__spark",
+        "metric__unit",
+        "metric__value"
+      ],
+      "variants": [
+        "metric--lg",
+        "metric--null",
+        "metric--sm"
+      ],
+      "states": {
+        "enum": {},
+        "boolean": [],
+        "legacyClass": []
+      },
+      "aria": {
+        "roles": [],
+        "attrs": []
+      },
+      "usesOtherNamespaces": [],
+      "global": null,
+      "globalAlso": [],
+      "behaviorRef": "API.md#metric"
+    },
     {
       "id": "popover",
       "tier": "primitive",

package/ai/components.meta.json

@@ -58,6 +58,10 @@
       "rootClass": "drange",
       "purpose": "日期区间选择，含预设快捷范围"
     },
+    "delta": {
+      "rootClass": "delta",
+      "purpose": "变化量：涨跌方向 + 符号 + 颜色。只描述往哪边变，不判断好坏（等于好恶是 badge 的事，会计正负是 table 的事）"
+    },
     "drawer": {
       "rootClass": "drawer",
       "purpose": "侧边抽屉，含遮罩"
@@ -83,6 +87,10 @@
       "tier": "asset",
       "purpose": "3D 模型查看器：令牌驱动样式，不含渲染库本体"
     },
+    "metric": {
+      "rootClass": "metric",
+      "purpose": "指标块：一个标签 + 一个值 + 一句上下文。数字等宽、单位分离、缺数是一等状态"
+    },
     "nav": {
       "rootClass": "nav",
       "purpose": "顶部导航与目录"

package/ai/tokens.audience.json

@@ -14,6 +14,7 @@
     "--border":   { "audience": "public",    "why": "描边三档：控件 / 装饰 / 强装饰" },
     "--bp-":      { "audience": "reference", "why": "断点：CSS media query 条件里用不了 var()，只能当锚点给流体计算和脚本查询" },
     "--danger":   { "audience": "public",    "why": "危险色（--danger / -hover / -bg）" },
+    "--dir-":     { "audience": "public",    "why": "涨跌方向色（--dir-up / -down）。**方向 ≠ 好恶**：--danger/--success 是评价（错了/成了），方向是事实（涨了/跌了）。同一件事会同时成立而结论相反 —— 「研发费用同比 +38%」是涨，但那是坏消息。默认 A 股口径红涨绿跌，`[data-market=\"intl\"]` 整体对调" },
     "--dur-":     { "audience": "public",    "why": "时长阶梯：快 / 基准 / 慢" },
     "--ease-":    { "audience": "public",    "why": "缓动阶梯：默认 / 进出 / 滑入" },
     "--fs-":      { "audience": "public",    "why": "字号阶梯：阶梯允许有暂未使用的档位（那是阶梯，不是死代码）" },
@@ -49,7 +50,7 @@
   "tokens": {},
 
   "budget": {
-    "orphan": 4,
-    "$comment": "棘轮：孤儿令牌总数只能降。降了就把这个数字一起改小，不许偷偷升。2026-10-10：--lh-loose / --fs-xl 被新增 recipe 引用，7→5；同日 04-recipes/report 改在自身层内重定义边注宽 ⇒ --measure-aside 由『被引用』回到『无引用』，5→5→再核为 4。"
+    "orphan": 3,
+    "$comment": "棘轮：孤儿令牌总数只能降。降了就把这个数字一起改小，不许偷偷升。2026-10-10：--lh-loose / --fs-xl 被新增 recipe 引用，7→5；同日 04-recipes/report 改在自身层内重定义边注宽 ⇒ --measure-aside 由『被引用』回到『无引用』，5→5→再核为 4。2026-10-29：metric 引用 --tracking-normal ⇒ 4→3。"
   }
 }

package/ai/tokens.json

@@ -224,6 +224,16 @@
         "$value": "#e8f1f8",
         "$type": "color"
       },
+      "--dir-up": {
+        "$value": "#c0392b",
+        "$type": "color",
+        "$description": "---------------------------------------------------------------- 方向色"
+      },
+      "--dir-down": {
+        "$value": "#2f6b3a",
+        "$type": "color",
+        "$description": "涨：默认红"
+      },
       "--accent": {
         "$value": "#1b4d8f",
         "$type": "color",
@@ -621,6 +631,15 @@
         "$value": "#16241A",
         "$type": "color"
       },
+      "--dir-up": {
+        "$value": "#E07A6E",
+        "$type": "color",
+        "$description": "方向色（暗色）：与 success / danger 同值，理由见浅色段。"
+      },
+      "--dir-down": {
+        "$value": "#6FAA7A",
+        "$type": "color"
+      },
       "--warning": {
         "$value": "#C99A3F",
         "$type": "color"
@@ -676,8 +695,8 @@
     }
   },
   "coverage": {
-    "lightCount": 110,
-    "darkCount": 33,
+    "lightCount": 112,
+    "darkCount": 35,
     "onlyInDark": [],
     "onlyInLight": [
       "--bp-lg",

package/ai/tokens.tree.json

@@ -42,6 +42,14 @@
           "value": "#8f1e17",
           "type": "color"
         },
+        "dir-down": {
+          "value": "#2f6b3a",
+          "type": "color"
+        },
+        "dir-up": {
+          "value": "#c0392b",
+          "type": "color"
+        },
         "info": {
           "value": "#1d5f8a",
           "type": "color"
@@ -516,6 +524,14 @@
           "value": "#F09A90",
           "type": "color"
         },
+        "dir-down": {
+          "value": "#6FAA7A",
+          "type": "color"
+        },
+        "dir-up": {
+          "value": "#E07A6E",
+          "type": "color"
+        },
         "info": {
           "value": "#5B9BC4",
           "type": "color"
@@ -629,6 +645,8 @@
     "--danger": "color/danger",
     "--danger-bg": "color/danger-bg",
     "--danger-hover": "color/danger-hover",
+    "--dir-down": "color/dir-down",
+    "--dir-up": "color/dir-up",
     "--dur-base": "duration/base",
     "--dur-fast": "duration/fast",
     "--dur-slow": "duration/slow",
@@ -728,8 +746,8 @@
     "--z-toast": "zIndex/toast"
   },
   "meta": {
-    "lightCount": 110,
-    "darkCount": 33,
+    "lightCount": 112,
+    "darkCount": 35,
     "categories": [
       "breakpoint",
       "color",

package/dist/01-tokens/market.css

@@ -0,0 +1 @@
+:root[data-market="intl"], [data-market="intl"] {--dir-up:var(--raw-dir-down);--dir-down:var(--raw-dir-up);}

package/dist/01-tokens/tokens.css

@@ -1 +1 @@
-:root {--raw-paper:#f6f7f8;--raw-surface:#ffffff;--raw-surface-sunken:#f1f3f5;--raw-surface-raised:#ffffff;--raw-scrollbar-thumb:#7A808A;--raw-scrollbar-thumb-hov:#6E747E;--raw-text-primary:#15181c;--raw-text-secondary:#4f555e;--raw-text-tertiary:#606770;--raw-text-on-accent:#ffffff;--raw-text-on-solid:#ffffff;--raw-skeleton-bg:#e9ecef;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.72);--raw-border-control:#868b94;--raw-border-decor:#e2e5e9;--raw-border-decor-str:#c8cdd4;--raw-danger:#c0392b;--raw-danger-hover:#8f1e17;--raw-scrim:rgba(21, 24, 28, 0.4);--raw-success:#2f6b3a;--raw-warning:#8a5a00;--raw-info:#1d5f8a;--raw-danger-bg:#fdeeec;--raw-success-bg:#eaf2e6;--raw-warning-bg:#fbf1dd;--raw-info-bg:#e8f1f8;--raw-accent:#1b4d8f;--raw-switch-on:#1b4d8f;--raw-accent-hover:#163a6d;--raw-accent-soft:#e6eef7;--raw-tooltip-bg:#15181c;--raw-tooltip-fg:#f6f7f8;--raw-tooltip-border:#15181c;--paper:var(--raw-paper);--surface:var(--raw-surface);--surface-sunken:var(--raw-surface-sunken);--surface-raised:var(--raw-surface-raised);--scrollbar-size:10px;--scrollbar-size-thin:6px;--scrollbar-thumb:var(--raw-scrollbar-thumb);--scrollbar-thumb-hov:var(--raw-scrollbar-thumb-hov);--scrollbar-radius:5px;--text-primary:var(--raw-text-primary);--text-secondary:var(--raw-text-secondary);--text-tertiary:var(--raw-text-tertiary);--text-on-accent:var(--raw-text-on-accent);--text-on-solid:var(--raw-text-on-solid);--skeleton-bg:var(--raw-skeleton-bg);--skeleton-shimmer:var(--raw-skeleton-shimmer);--skeleton-h:1em;--skeleton-size:40px;--skeleton-duration:1.4s;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--progress-h:6px;--progress-dur:240ms;--r-full:999px;--ring-size:64px;--ring-thickness:8px;--progress:0%;--progress-num:0;--z-popover:60;--popover-min-w:200px;--popover-max-w:320px;--popover-p:var(--sp-3);--popover-gap:8px;--popover-dur:140ms;--border-control:var(--raw-border-control);--border-decor:var(--raw-border-decor);--border-decor-str:var(--raw-border-decor-str);--danger:var(--raw-danger);--danger-hover:var(--raw-danger-hover);--scrim:var(--raw-scrim);--success:var(--raw-success);--warning:var(--raw-warning);--info:var(--raw-info);--danger-bg:var(--raw-danger-bg);--success-bg:var(--raw-success-bg);--warning-bg:var(--raw-warning-bg);--info-bg:var(--raw-info-bg);--accent:var(--raw-accent);--switch-on:var(--raw-switch-on);--accent-hover:var(--raw-accent-hover);--accent-soft:var(--raw-accent-soft);--tooltip-bg:var(--raw-tooltip-bg);--tooltip-fg:var(--raw-tooltip-fg);--tooltip-border:var(--raw-tooltip-border);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:clamp(1rem, 0.95rem + 0.3vw, 1.25rem);--sp-5:clamp(1.25rem, 1.15rem + 0.7vw, 1.75rem);--sp-6:clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);--sp-7:clamp(2rem, 1.7rem + 1.8vw, 3.5rem);--sp-8:clamp(2.5rem, 2.1rem + 2.4vw, 4.5rem);--bp-sm:30rem;--bp-md:48rem;--bp-lg:64rem;--bp-xl:80rem;--fs-xs:0.75rem;--fs-sm:0.875rem;--fs-base:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);--fs-md:clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem);--fs-lg:clamp(1.3125rem, 1.2rem + 0.7vw, 1.5rem);--fs-xl:clamp(1.5rem, 1.3rem + 1.2vw, 1.875rem);--fs-2xl:clamp(1.75rem, 1.45rem + 1.8vw, 2.5rem);--lh-tight:1.25;--lh-base:1.7;--lh-loose:1.85;--measure-page:52rem;--tracking-title:-0.02em;--r-sm:6px;--r-xs:3px;--r-md:10px;--r-lg:14px;--r-pill:999px;--shadow-1:0 1px 2px rgba(31, 29, 25, 0.05), 0 1px 3px rgba(31, 29, 25, 0.06);--shadow-2:0 2px 4px rgba(31, 29, 25, 0.05), 0 6px 16px rgba(31, 29, 25, 0.08);--dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);--ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);--lift-sm:1px;--lift-md:2px;--lift-lg:8px;--z-base:0;--z-sticky:10;--z-header:20;--z-raised:5;--z-overlay:30;--z-modal:40;--z-toast:50;--sz-touch:44px;--sz-touch-sm:32px;}@media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}:focus-visible {outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);}:root {--measure-prose:34em;--measure-title:20em;--measure-lede:32em;--measure-pull:30em;--measure-aside:32em;}:root:lang(en), :root:lang(en-US), :root:lang(en-GB), :root:lang(fr), :root:lang(de), :root:lang(es), :root:lang(pt), :root:lang(ru), :root:lang(el), :root:lang(tr), :root:lang(vi) {--measure-prose:68ch;--measure-title:34ch;--measure-lede:62ch;--measure-pull:58ch;--measure-aside:56ch;}:root:lang(ar) {--measure-prose:60ch;--measure-title:30ch;--measure-lede:56ch;--measure-pull:52ch;--measure-aside:50ch;}:root:lang(hi), :root:lang(th), :root:lang(km), :root:lang(my) {--measure-prose:56ch;--measure-title:28ch;--measure-lede:52ch;--measure-pull:48ch;--measure-aside:46ch;}:root:lang(zh), :root:lang(zh-CN), :root:lang(zh-TW), :root:lang(ja), :root:lang(ko) {--measure-prose:34em;--measure-title:20em;--measure-lede:32em;--measure-pull:30em;--measure-aside:32em;}@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) {--raw-paper:#14171A;--raw-surface:#1C2024;--raw-surface-raised:#232830;--raw-surface-sunken:#1A1D21;--raw-scrollbar-thumb:#6E747E;--raw-scrollbar-thumb-hov:#7D828A;--raw-border-decor:#2A3038;--raw-border-decor-str:#3A424C;--raw-border-control:#8A9099;--raw-text-primary:#E4E7EA;--raw-text-secondary:#AEB6C0;--raw-text-tertiary:#9BA3AD;--raw-text-on-accent:#0D1114;--raw-text-on-solid:#0D1114;--raw-skeleton-bg:#2E343C;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.06);--raw-danger:#E07A6E;--raw-danger-hover:#F09A90;--raw-danger-bg:#341D1A;--raw-success:#6FAA7A;--raw-success-bg:#16241A;--raw-warning:#C99A3F;--raw-warning-bg:#242A31;--raw-info:#5B9BC4;--raw-info-bg:#13242F;--raw-accent:#7AA9DE;--raw-switch-on:#3E6EA8;--raw-accent-hover:#8FB8E6;--raw-accent-soft:#1C2C3D;--raw-tooltip-bg:#232830;--raw-tooltip-fg:#E4E7EA;--raw-tooltip-border:#2A3038;--raw-scrim:rgba(0, 0, 0, 0.62);}}[data-theme="light"] {--raw-accent:#1b4d8f;--raw-accent-hover:#163a6d;--raw-accent-soft:#e6eef7;--raw-border-control:#868b94;--raw-border-decor:#e2e5e9;--raw-border-decor-str:#c8cdd4;--raw-danger:#c0392b;--raw-danger-bg:#fdeeec;--raw-danger-hover:#8f1e17;--raw-info:#1d5f8a;--raw-info-bg:#e8f1f8;--raw-paper:#f6f7f8;--raw-scrim:rgba(21, 24, 28, 0.4);--raw-scrollbar-thumb:#7A808A;--raw-scrollbar-thumb-hov:#6E747E;--raw-skeleton-bg:#e9ecef;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.72);--raw-success:#2f6b3a;--raw-success-bg:#eaf2e6;--raw-surface:#ffffff;--raw-surface-raised:#ffffff;--raw-surface-sunken:#f1f3f5;--raw-switch-on:#1b4d8f;--raw-text-on-accent:#ffffff;--raw-text-on-solid:#ffffff;--raw-text-primary:#15181c;--raw-text-secondary:#4f555e;--raw-text-tertiary:#606770;--raw-tooltip-bg:#15181c;--raw-tooltip-border:#15181c;--raw-tooltip-fg:#f6f7f8;--raw-warning:#8a5a00;--raw-warning-bg:#fbf1dd;--accent:var(--raw-accent);--accent-hover:var(--raw-accent-hover);--accent-soft:var(--raw-accent-soft);--border-control:var(--raw-border-control);--border-decor:var(--raw-border-decor);--border-decor-str:var(--raw-border-decor-str);--danger:var(--raw-danger);--danger-bg:var(--raw-danger-bg);--danger-hover:var(--raw-danger-hover);--info:var(--raw-info);--info-bg:var(--raw-info-bg);--paper:var(--raw-paper);--scrim:var(--raw-scrim);--scrollbar-thumb:var(--raw-scrollbar-thumb);--scrollbar-thumb-hov:var(--raw-scrollbar-thumb-hov);--skeleton-bg:var(--raw-skeleton-bg);--skeleton-shimmer:var(--raw-skeleton-shimmer);--success:var(--raw-success);--success-bg:var(--raw-success-bg);--surface:var(--raw-surface);--surface-raised:var(--raw-surface-raised);--surface-sunken:var(--raw-surface-sunken);--switch-on:var(--raw-switch-on);--text-on-accent:var(--raw-text-on-accent);--text-on-solid:var(--raw-text-on-solid);--text-primary:var(--raw-text-primary);--text-secondary:var(--raw-text-secondary);--text-tertiary:var(--raw-text-tertiary);--tooltip-bg:var(--raw-tooltip-bg);--tooltip-border:var(--raw-tooltip-border);--tooltip-fg:var(--raw-tooltip-fg);--warning:var(--raw-warning);--warning-bg:var(--raw-warning-bg);}:root[data-theme="dark"], [data-theme="dark"] {--raw-accent:#7AA9DE;--raw-accent-hover:#8FB8E6;--raw-accent-soft:#1C2C3D;--raw-border-control:#8A9099;--raw-border-decor:#2A3038;--raw-border-decor-str:#3A424C;--raw-danger:#E07A6E;--raw-danger-bg:#341D1A;--raw-danger-hover:#F09A90;--raw-info:#5B9BC4;--raw-info-bg:#13242F;--raw-paper:#14171A;--raw-scrim:rgba(0, 0, 0, 0.62);--raw-scrollbar-thumb:#6E747E;--raw-scrollbar-thumb-hov:#7D828A;--raw-skeleton-bg:#2E343C;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.06);--raw-success:#6FAA7A;--raw-success-bg:#16241A;--raw-surface:#1C2024;--raw-surface-raised:#232830;--raw-surface-sunken:#1A1D21;--raw-switch-on:#3E6EA8;--raw-text-on-accent:#0D1114;--raw-text-on-solid:#0D1114;--raw-text-primary:#E4E7EA;--raw-text-secondary:#AEB6C0;--raw-text-tertiary:#9BA3AD;--raw-tooltip-bg:#232830;--raw-tooltip-border:#2A3038;--raw-tooltip-fg:#E4E7EA;--raw-warning:#C99A3F;--raw-warning-bg:#242A31;--accent:var(--raw-accent);--accent-hover:var(--raw-accent-hover);--accent-soft:var(--raw-accent-soft);--border-control:var(--raw-border-control);--border-decor:var(--raw-border-decor);--border-decor-str:var(--raw-border-decor-str);--danger:var(--raw-danger);--danger-bg:var(--raw-danger-bg);--danger-hover:var(--raw-danger-hover);--info:var(--raw-info);--info-bg:var(--raw-info-bg);--paper:var(--raw-paper);--scrim:var(--raw-scrim);--scrollbar-thumb:var(--raw-scrollbar-thumb);--scrollbar-thumb-hov:var(--raw-scrollbar-thumb-hov);--skeleton-bg:var(--raw-skeleton-bg);--skeleton-shimmer:var(--raw-skeleton-shimmer);--success:var(--raw-success);--success-bg:var(--raw-success-bg);--surface:var(--raw-surface);--surface-raised:var(--raw-surface-raised);--surface-sunken:var(--raw-surface-sunken);--switch-on:var(--raw-switch-on);--text-on-accent:var(--raw-text-on-accent);--text-on-solid:var(--raw-text-on-solid);--text-primary:var(--raw-text-primary);--text-secondary:var(--raw-text-secondary);--text-tertiary:var(--raw-text-tertiary);--tooltip-bg:var(--raw-tooltip-bg);--tooltip-border:var(--raw-tooltip-border);--tooltip-fg:var(--raw-tooltip-fg);--warning:var(--raw-warning);--warning-bg:var(--raw-warning-bg);}:root {--sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Geeza Pro', 'Segoe UI Historic', sans-serif;--mono:ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, 'Sarasa Mono SC', 'Microsoft YaHei Mono', monospace;--serif:'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Songti SC', 'SimSun', 'Noto Serif CJK SC', 'Source Han Serif SC', serif;--tracking-normal:0;}:root:lang(ar), :root:lang(fa), :root:lang(he), :root:lang(ur) {--tracking-normal:0.01em;}a, button, label, summary, input[type="checkbox"], input[type="radio"], input[type="button"], input[type="submit"], [role="button"], [role="switch"], [role="tab"], [role="option"], .choice, .switch, .btn, .accordion__trigger, .tabs__tab, .card, .list__row {-webkit-tap-highlight-color:transparent;}.choice:active, .switch:active, .btn:active, .list__row:active, .card:active {opacity:0.82;}@media (hover:hover) and (pointer:fine) {.choice:active, .switch:active, .btn:active, .list__row:active, .card:active {opacity:1;}}
+:root {--raw-paper:#f6f7f8;--raw-surface:#ffffff;--raw-surface-sunken:#f1f3f5;--raw-surface-raised:#ffffff;--raw-scrollbar-thumb:#7A808A;--raw-scrollbar-thumb-hov:#6E747E;--raw-text-primary:#15181c;--raw-text-secondary:#4f555e;--raw-text-tertiary:#606770;--raw-text-on-accent:#ffffff;--raw-text-on-solid:#ffffff;--raw-skeleton-bg:#e9ecef;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.72);--raw-border-control:#868b94;--raw-border-decor:#e2e5e9;--raw-border-decor-str:#c8cdd4;--raw-danger:#c0392b;--raw-danger-hover:#8f1e17;--raw-scrim:rgba(21, 24, 28, 0.4);--raw-success:#2f6b3a;--raw-warning:#8a5a00;--raw-info:#1d5f8a;--raw-danger-bg:#fdeeec;--raw-success-bg:#eaf2e6;--raw-warning-bg:#fbf1dd;--raw-info-bg:#e8f1f8;--raw-dir-up:#c0392b;--raw-dir-down:#2f6b3a;--raw-accent:#1b4d8f;--raw-switch-on:#1b4d8f;--raw-accent-hover:#163a6d;--raw-accent-soft:#e6eef7;--raw-tooltip-bg:#15181c;--raw-tooltip-fg:#f6f7f8;--raw-tooltip-border:#15181c;--paper:var(--raw-paper);--surface:var(--raw-surface);--surface-sunken:var(--raw-surface-sunken);--surface-raised:var(--raw-surface-raised);--scrollbar-size:10px;--scrollbar-size-thin:6px;--scrollbar-thumb:var(--raw-scrollbar-thumb);--scrollbar-thumb-hov:var(--raw-scrollbar-thumb-hov);--scrollbar-radius:5px;--text-primary:var(--raw-text-primary);--text-secondary:var(--raw-text-secondary);--text-tertiary:var(--raw-text-tertiary);--text-on-accent:var(--raw-text-on-accent);--text-on-solid:var(--raw-text-on-solid);--skeleton-bg:var(--raw-skeleton-bg);--skeleton-shimmer:var(--raw-skeleton-shimmer);--skeleton-h:1em;--skeleton-size:40px;--skeleton-duration:1.4s;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--progress-h:6px;--progress-dur:240ms;--r-full:999px;--ring-size:64px;--ring-thickness:8px;--progress:0%;--progress-num:0;--z-popover:60;--popover-min-w:200px;--popover-max-w:320px;--popover-p:var(--sp-3);--popover-gap:8px;--popover-dur:140ms;--border-control:var(--raw-border-control);--border-decor:var(--raw-border-decor);--border-decor-str:var(--raw-border-decor-str);--danger:var(--raw-danger);--danger-hover:var(--raw-danger-hover);--scrim:var(--raw-scrim);--success:var(--raw-success);--warning:var(--raw-warning);--info:var(--raw-info);--danger-bg:var(--raw-danger-bg);--success-bg:var(--raw-success-bg);--warning-bg:var(--raw-warning-bg);--info-bg:var(--raw-info-bg);--dir-up:var(--raw-dir-up);--dir-down:var(--raw-dir-down);--accent:var(--raw-accent);--switch-on:var(--raw-switch-on);--accent-hover:var(--raw-accent-hover);--accent-soft:var(--raw-accent-soft);--tooltip-bg:var(--raw-tooltip-bg);--tooltip-fg:var(--raw-tooltip-fg);--tooltip-border:var(--raw-tooltip-border);--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:clamp(1rem, 0.95rem + 0.3vw, 1.25rem);--sp-5:clamp(1.25rem, 1.15rem + 0.7vw, 1.75rem);--sp-6:clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);--sp-7:clamp(2rem, 1.7rem + 1.8vw, 3.5rem);--sp-8:clamp(2.5rem, 2.1rem + 2.4vw, 4.5rem);--bp-sm:30rem;--bp-md:48rem;--bp-lg:64rem;--bp-xl:80rem;--fs-xs:0.75rem;--fs-sm:0.875rem;--fs-base:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);--fs-md:clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem);--fs-lg:clamp(1.3125rem, 1.2rem + 0.7vw, 1.5rem);--fs-xl:clamp(1.5rem, 1.3rem + 1.2vw, 1.875rem);--fs-2xl:clamp(1.75rem, 1.45rem + 1.8vw, 2.5rem);--lh-tight:1.25;--lh-base:1.7;--lh-loose:1.85;--measure-page:52rem;--tracking-title:-0.02em;--r-sm:6px;--r-xs:3px;--r-md:10px;--r-lg:14px;--r-pill:999px;--shadow-1:0 1px 2px rgba(31, 29, 25, 0.05), 0 1px 3px rgba(31, 29, 25, 0.06);--shadow-2:0 2px 4px rgba(31, 29, 25, 0.05), 0 6px 16px rgba(31, 29, 25, 0.08);--dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);--ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);--lift-sm:1px;--lift-md:2px;--lift-lg:8px;--z-base:0;--z-sticky:10;--z-header:20;--z-raised:5;--z-overlay:30;--z-modal:40;--z-toast:50;--sz-touch:44px;--sz-touch-sm:32px;}@media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}}:focus-visible {outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm);}:root {--measure-prose:34em;--measure-title:20em;--measure-lede:32em;--measure-pull:30em;--measure-aside:32em;}:root:lang(en), :root:lang(en-US), :root:lang(en-GB), :root:lang(fr), :root:lang(de), :root:lang(es), :root:lang(pt), :root:lang(ru), :root:lang(el), :root:lang(tr), :root:lang(vi) {--measure-prose:68ch;--measure-title:34ch;--measure-lede:62ch;--measure-pull:58ch;--measure-aside:56ch;}:root:lang(ar) {--measure-prose:60ch;--measure-title:30ch;--measure-lede:56ch;--measure-pull:52ch;--measure-aside:50ch;}:root:lang(hi), :root:lang(th), :root:lang(km), :root:lang(my) {--measure-prose:56ch;--measure-title:28ch;--measure-lede:52ch;--measure-pull:48ch;--measure-aside:46ch;}:root:lang(zh), :root:lang(zh-CN), :root:lang(zh-TW), :root:lang(ja), :root:lang(ko) {--measure-prose:34em;--measure-title:20em;--measure-lede:32em;--measure-pull:30em;--measure-aside:32em;}@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) {--raw-paper:#14171A;--raw-surface:#1C2024;--raw-surface-raised:#232830;--raw-surface-sunken:#1A1D21;--raw-scrollbar-thumb:#6E747E;--raw-scrollbar-thumb-hov:#7D828A;--raw-border-decor:#2A3038;--raw-border-decor-str:#3A424C;--raw-border-control:#8A9099;--raw-text-primary:#E4E7EA;--raw-text-secondary:#AEB6C0;--raw-text-tertiary:#9BA3AD;--raw-text-on-accent:#0D1114;--raw-text-on-solid:#0D1114;--raw-skeleton-bg:#2E343C;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.06);--raw-danger:#E07A6E;--raw-danger-hover:#F09A90;--raw-danger-bg:#341D1A;--raw-success:#6FAA7A;--raw-success-bg:#16241A;--raw-dir-up:#E07A6E;--raw-dir-down:#6FAA7A;--raw-warning:#C99A3F;--raw-warning-bg:#242A31;--raw-info:#5B9BC4;--raw-info-bg:#13242F;--raw-accent:#7AA9DE;--raw-switch-on:#3E6EA8;--raw-accent-hover:#8FB8E6;--raw-accent-soft:#1C2C3D;--raw-tooltip-bg:#232830;--raw-tooltip-fg:#E4E7EA;--raw-tooltip-border:#2A3038;--raw-scrim:rgba(0, 0, 0, 0.62);}}[data-theme="light"] {--raw-accent:#1b4d8f;--raw-accent-hover:#163a6d;--raw-accent-soft:#e6eef7;--raw-border-control:#868b94;--raw-border-decor:#e2e5e9;--raw-border-decor-str:#c8cdd4;--raw-danger:#c0392b;--raw-danger-bg:#fdeeec;--raw-danger-hover:#8f1e17;--raw-dir-down:#2f6b3a;--raw-dir-up:#c0392b;--raw-info:#1d5f8a;--raw-info-bg:#e8f1f8;--raw-paper:#f6f7f8;--raw-scrim:rgba(21, 24, 28, 0.4);--raw-scrollbar-thumb:#7A808A;--raw-scrollbar-thumb-hov:#6E747E;--raw-skeleton-bg:#e9ecef;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.72);--raw-success:#2f6b3a;--raw-success-bg:#eaf2e6;--raw-surface:#ffffff;--raw-surface-raised:#ffffff;--raw-surface-sunken:#f1f3f5;--raw-switch-on:#1b4d8f;--raw-text-on-accent:#ffffff;--raw-text-on-solid:#ffffff;--raw-text-primary:#15181c;--raw-text-secondary:#4f555e;--raw-text-tertiary:#606770;--raw-tooltip-bg:#15181c;--raw-tooltip-border:#15181c;--raw-tooltip-fg:#f6f7f8;--raw-warning:#8a5a00;--raw-warning-bg:#fbf1dd;--accent:var(--raw-accent);--accent-hover:var(--raw-accent-hover);--accent-soft:var(--raw-accent-soft);--border-control:var(--raw-border-control);--border-decor:var(--raw-border-decor);--border-decor-str:var(--raw-border-decor-str);--danger:var(--raw-danger);--danger-bg:var(--raw-danger-bg);--danger-hover:var(--raw-danger-hover);--dir-down:var(--raw-dir-down);--dir-up:var(--raw-dir-up);--info:var(--raw-info);--info-bg:var(--raw-info-bg);--paper:var(--raw-paper);--scrim:var(--raw-scrim);--scrollbar-thumb:var(--raw-scrollbar-thumb);--scrollbar-thumb-hov:var(--raw-scrollbar-thumb-hov);--skeleton-bg:var(--raw-skeleton-bg);--skeleton-shimmer:var(--raw-skeleton-shimmer);--success:var(--raw-success);--success-bg:var(--raw-success-bg);--surface:var(--raw-surface);--surface-raised:var(--raw-surface-raised);--surface-sunken:var(--raw-surface-sunken);--switch-on:var(--raw-switch-on);--text-on-accent:var(--raw-text-on-accent);--text-on-solid:var(--raw-text-on-solid);--text-primary:var(--raw-text-primary);--text-secondary:var(--raw-text-secondary);--text-tertiary:var(--raw-text-tertiary);--tooltip-bg:var(--raw-tooltip-bg);--tooltip-border:var(--raw-tooltip-border);--tooltip-fg:var(--raw-tooltip-fg);--warning:var(--raw-warning);--warning-bg:var(--raw-warning-bg);}:root[data-theme="dark"], [data-theme="dark"] {--raw-accent:#7AA9DE;--raw-accent-hover:#8FB8E6;--raw-accent-soft:#1C2C3D;--raw-border-control:#8A9099;--raw-border-decor:#2A3038;--raw-border-decor-str:#3A424C;--raw-danger:#E07A6E;--raw-danger-bg:#341D1A;--raw-danger-hover:#F09A90;--raw-dir-down:#6FAA7A;--raw-dir-up:#E07A6E;--raw-info:#5B9BC4;--raw-info-bg:#13242F;--raw-paper:#14171A;--raw-scrim:rgba(0, 0, 0, 0.62);--raw-scrollbar-thumb:#6E747E;--raw-scrollbar-thumb-hov:#7D828A;--raw-skeleton-bg:#2E343C;--raw-skeleton-shimmer:rgba(255, 255, 255, 0.06);--raw-success:#6FAA7A;--raw-success-bg:#16241A;--raw-surface:#1C2024;--raw-surface-raised:#232830;--raw-surface-sunken:#1A1D21;--raw-switch-on:#3E6EA8;--raw-text-on-accent:#0D1114;--raw-text-on-solid:#0D1114;--raw-text-primary:#E4E7EA;--raw-text-secondary:#AEB6C0;--raw-text-tertiary:#9BA3AD;--raw-tooltip-bg:#232830;--raw-tooltip-border:#2A3038;--raw-tooltip-fg:#E4E7EA;--raw-warning:#C99A3F;--raw-warning-bg:#242A31;--accent:var(--raw-accent);--accent-hover:var(--raw-accent-hover);--accent-soft:var(--raw-accent-soft);--border-control:var(--raw-border-control);--border-decor:var(--raw-border-decor);--border-decor-str:var(--raw-border-decor-str);--danger:var(--raw-danger);--danger-bg:var(--raw-danger-bg);--danger-hover:var(--raw-danger-hover);--dir-down:var(--raw-dir-down);--dir-up:var(--raw-dir-up);--info:var(--raw-info);--info-bg:var(--raw-info-bg);--paper:var(--raw-paper);--scrim:var(--raw-scrim);--scrollbar-thumb:var(--raw-scrollbar-thumb);--scrollbar-thumb-hov:var(--raw-scrollbar-thumb-hov);--skeleton-bg:var(--raw-skeleton-bg);--skeleton-shimmer:var(--raw-skeleton-shimmer);--success:var(--raw-success);--success-bg:var(--raw-success-bg);--surface:var(--raw-surface);--surface-raised:var(--raw-surface-raised);--surface-sunken:var(--raw-surface-sunken);--switch-on:var(--raw-switch-on);--text-on-accent:var(--raw-text-on-accent);--text-on-solid:var(--raw-text-on-solid);--text-primary:var(--raw-text-primary);--text-secondary:var(--raw-text-secondary);--text-tertiary:var(--raw-text-tertiary);--tooltip-bg:var(--raw-tooltip-bg);--tooltip-border:var(--raw-tooltip-border);--tooltip-fg:var(--raw-tooltip-fg);--warning:var(--raw-warning);--warning-bg:var(--raw-warning-bg);}:root {--sans:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Source Han Sans SC', 'Noto Sans CJK SC', 'Geeza Pro', 'Segoe UI Historic', sans-serif;--mono:ui-monospace, 'SF Mono', 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', Menlo, Consolas, 'Sarasa Mono SC', 'Microsoft YaHei Mono', monospace;--serif:'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Songti SC', 'SimSun', 'Noto Serif CJK SC', 'Source Han Serif SC', serif;--tracking-normal:0;}:root:lang(ar), :root:lang(fa), :root:lang(he), :root:lang(ur) {--tracking-normal:0.01em;}a, button, label, summary, input[type="checkbox"], input[type="radio"], input[type="button"], input[type="submit"], [role="button"], [role="switch"], [role="tab"], [role="option"], .choice, .switch, .btn, .accordion__trigger, .tabs__tab, .card, .list__row {-webkit-tap-highlight-color:transparent;}.choice:active, .switch:active, .btn:active, .list__row:active, .card:active {opacity:0.82;}@media (hover:hover) and (pointer:fine) {.choice:active, .switch:active, .btn:active, .list__row:active, .card:active {opacity:1;}}

package/dist/02-primitives/delta/delta.css

@@ -0,0 +1 @@
+.delta {display:inline-flex;align-items:baseline;gap:0.15em;font-family:var(--mono);white-space:nowrap;font-weight:500;line-height:1.4;}.delta::before {font-weight:400;font-size:0.95em;}.delta--up {color:var(--dir-up);}.delta--up::before {content:"+";}.delta--down {color:var(--dir-down);}.delta--down::before {content:"\2212";}.delta--flat {color:var(--text-secondary);}.delta--flat::before {content:none;}.delta--arrow.delta--up::before {content:"\25B2";font-size:0.8em;}.delta--arrow.delta--down::before {content:"\25BC";font-size:0.8em;}.delta--sm {font-size:var(--fs-xs);font-weight:400;}

package/dist/02-primitives/metric/metric.css

@@ -0,0 +1 @@
+.metric {display:flex;flex-direction:column;gap:var(--sp-1);margin:0;min-width:0;}.metric > dd {margin-inline-start:0;}.metric__label {margin:0;font-size:var(--fs-xs);font-weight:500;line-height:1.5;color:var(--text-secondary);letter-spacing:var(--tracking-normal);}.metric__value {margin:0;font-family:var(--mono);font-size:var(--fs-xl);font-weight:600;line-height:var(--lh-tight);color:var(--text-primary);white-space:normal;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;align-items:baseline;}.metric__unit {margin-inline-start:0.3em;font-size:var(--fs-sm);font-weight:400;color:var(--text-secondary);white-space:normal;overflow-wrap:anywhere;min-width:0;}.metric__foot {margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2);font-size:var(--fs-xs);line-height:1.5;color:var(--text-tertiary);}.metric__note {color:var(--text-tertiary);}.metric__spark {margin-block-start:var(--sp-1);color:var(--text-tertiary);}.metric--null .metric__value {color:var(--text-tertiary);font-weight:400;}.metric--lg .metric__value {font-size:var(--fs-2xl);}.metric--sm .metric__value {font-size:var(--fs-md);font-weight:500;}.metric-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 12rem), 1fr));gap:var(--sp-5) var(--sp-5);margin:0;padding:0;list-style:none;}

package/dist/04-recipes/tierA-tokens.css

@@ -1 +1 @@
-:root {--paper:#f6f7f8;--surface:#ffffff;--surface-sunken:#f1f3f5;--surface-raised:#ffffff;--scrollbar-size:10px;--scrollbar-size-thin:6px;--scrollbar-thumb:#7A808A;--scrollbar-thumb-hov:#6E747E;--scrollbar-radius:5px;--text-primary:#15181c;--text-secondary:#4f555e;--text-tertiary:#606770;--text-on-accent:#ffffff;--text-on-solid:#ffffff;--skeleton-bg:#e9ecef;--skeleton-shimmer:rgba(255, 255, 255, 0.72);--skeleton-h:1em;--skeleton-size:40px;--skeleton-duration:1.4s;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--progress-h:6px;--progress-dur:240ms;--r-full:999px;--ring-size:64px;--ring-thickness:8px;--progress:0%;--progress-num:0;--z-popover:60;--popover-min-w:200px;--popover-max-w:320px;--popover-p:12px;--popover-gap:8px;--popover-dur:140ms;--border-control:#868b94;--border-decor:#e2e5e9;--border-decor-str:#c8cdd4;--danger:#c0392b;--danger-hover:#8f1e17;--scrim:rgba(21, 24, 28, 0.4);--success:#2f6b3a;--warning:#8a5a00;--info:#1d5f8a;--danger-bg:#fdeeec;--success-bg:#eaf2e6;--warning-bg:#fbf1dd;--info-bg:#e8f1f8;--accent:#1b4d8f;--switch-on:#1b4d8f;--accent-hover:#163a6d;--accent-soft:#e6eef7;--tooltip-bg:#15181c;--tooltip-fg:#f6f7f8;--tooltip-border:#15181c;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:clamp(1rem, 0.95rem + 0.3vw, 1.25rem);--sp-5:clamp(1.25rem, 1.15rem + 0.7vw, 1.75rem);--sp-6:clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);--sp-7:clamp(2rem, 1.7rem + 1.8vw, 3.5rem);--sp-8:clamp(2.5rem, 2.1rem + 2.4vw, 4.5rem);--bp-sm:30rem;--bp-md:48rem;--bp-lg:64rem;--bp-xl:80rem;--fs-xs:0.75rem;--fs-sm:0.875rem;--fs-base:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);--fs-md:clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem);--fs-lg:clamp(1.3125rem, 1.2rem + 0.7vw, 1.5rem);--fs-xl:clamp(1.5rem, 1.3rem + 1.2vw, 1.875rem);--fs-2xl:clamp(1.75rem, 1.45rem + 1.8vw, 2.5rem);--lh-tight:1.25;--lh-base:1.7;--lh-loose:1.85;--measure-page:52rem;--tracking-title:-0.02em;--r-sm:6px;--r-xs:3px;--r-md:10px;--r-lg:14px;--r-pill:999px;--shadow-1:0 1px 2px rgba(31, 29, 25, 0.05), 0 1px 3px rgba(31, 29, 25, 0.06);--shadow-2:0 2px 4px rgba(31, 29, 25, 0.05), 0 6px 16px rgba(31, 29, 25, 0.08);--dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);--ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);--lift-sm:1px;--lift-md:2px;--lift-lg:8px;--z-base:0;--z-sticky:10;--z-header:20;--z-raised:5;--z-overlay:30;--z-modal:40;--z-toast:50;--sz-touch:44px;--sz-touch-sm:32px;}@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) {--paper:#14171A;--surface:#1C2024;--surface-raised:#232830;--surface-sunken:#1A1D21;--scrollbar-thumb:#6E747E;--scrollbar-thumb-hov:#7D828A;--border-decor:#2A3038;--border-decor-str:#3A424C;--border-control:#8A9099;--text-primary:#E4E7EA;--text-secondary:#AEB6C0;--text-tertiary:#9BA3AD;--text-on-accent:#0D1114;--text-on-solid:#0D1114;--skeleton-bg:#2E343C;--skeleton-shimmer:rgba(255, 255, 255, 0.06);--danger:#E07A6E;--danger-hover:#F09A90;--danger-bg:#341D1A;--success:#6FAA7A;--success-bg:#16241A;--warning:#C99A3F;--warning-bg:#242A31;--info:#5B9BC4;--info-bg:#13242F;--accent:#7AA9DE;--switch-on:#3E6EA8;--accent-hover:#8FB8E6;--accent-soft:#1C2C3D;--tooltip-bg:#232830;--tooltip-fg:#E4E7EA;--tooltip-border:#2A3038;--scrim:rgba(0, 0, 0, 0.62);}}
+:root {--paper:#f6f7f8;--surface:#ffffff;--surface-sunken:#f1f3f5;--surface-raised:#ffffff;--scrollbar-size:10px;--scrollbar-size-thin:6px;--scrollbar-thumb:#7A808A;--scrollbar-thumb-hov:#6E747E;--scrollbar-radius:5px;--text-primary:#15181c;--text-secondary:#4f555e;--text-tertiary:#606770;--text-on-accent:#ffffff;--text-on-solid:#ffffff;--skeleton-bg:#e9ecef;--skeleton-shimmer:rgba(255, 255, 255, 0.72);--skeleton-h:1em;--skeleton-size:40px;--skeleton-duration:1.4s;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--progress-h:6px;--progress-dur:240ms;--r-full:999px;--ring-size:64px;--ring-thickness:8px;--progress:0%;--progress-num:0;--z-popover:60;--popover-min-w:200px;--popover-max-w:320px;--popover-p:12px;--popover-gap:8px;--popover-dur:140ms;--border-control:#868b94;--border-decor:#e2e5e9;--border-decor-str:#c8cdd4;--danger:#c0392b;--danger-hover:#8f1e17;--scrim:rgba(21, 24, 28, 0.4);--success:#2f6b3a;--warning:#8a5a00;--info:#1d5f8a;--danger-bg:#fdeeec;--success-bg:#eaf2e6;--warning-bg:#fbf1dd;--info-bg:#e8f1f8;--dir-up:#c0392b;--dir-down:#2f6b3a;--accent:#1b4d8f;--switch-on:#1b4d8f;--accent-hover:#163a6d;--accent-soft:#e6eef7;--tooltip-bg:#15181c;--tooltip-fg:#f6f7f8;--tooltip-border:#15181c;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:clamp(1rem, 0.95rem + 0.3vw, 1.25rem);--sp-5:clamp(1.25rem, 1.15rem + 0.7vw, 1.75rem);--sp-6:clamp(1.5rem, 1.3rem + 1.2vw, 2.25rem);--sp-7:clamp(2rem, 1.7rem + 1.8vw, 3.5rem);--sp-8:clamp(2.5rem, 2.1rem + 2.4vw, 4.5rem);--bp-sm:30rem;--bp-md:48rem;--bp-lg:64rem;--bp-xl:80rem;--fs-xs:0.75rem;--fs-sm:0.875rem;--fs-base:clamp(1rem, 0.95rem + 0.3vw, 1.125rem);--fs-md:clamp(1.125rem, 1.05rem + 0.5vw, 1.3125rem);--fs-lg:clamp(1.3125rem, 1.2rem + 0.7vw, 1.5rem);--fs-xl:clamp(1.5rem, 1.3rem + 1.2vw, 1.875rem);--fs-2xl:clamp(1.75rem, 1.45rem + 1.8vw, 2.5rem);--lh-tight:1.25;--lh-base:1.7;--lh-loose:1.85;--measure-page:52rem;--tracking-title:-0.02em;--r-sm:6px;--r-xs:3px;--r-md:10px;--r-lg:14px;--r-pill:999px;--shadow-1:0 1px 2px rgba(31, 29, 25, 0.05), 0 1px 3px rgba(31, 29, 25, 0.06);--shadow-2:0 2px 4px rgba(31, 29, 25, 0.05), 0 6px 16px rgba(31, 29, 25, 0.08);--dur-fast:120ms;--dur-base:180ms;--dur-slow:280ms;--ease-out:cubic-bezier(0.23, 1, 0.32, 1);--ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);--ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);--lift-sm:1px;--lift-md:2px;--lift-lg:8px;--z-base:0;--z-sticky:10;--z-header:20;--z-raised:5;--z-overlay:30;--z-modal:40;--z-toast:50;--sz-touch:44px;--sz-touch-sm:32px;}@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) {--paper:#14171A;--surface:#1C2024;--surface-raised:#232830;--surface-sunken:#1A1D21;--scrollbar-thumb:#6E747E;--scrollbar-thumb-hov:#7D828A;--border-decor:#2A3038;--border-decor-str:#3A424C;--border-control:#8A9099;--text-primary:#E4E7EA;--text-secondary:#AEB6C0;--text-tertiary:#9BA3AD;--text-on-accent:#0D1114;--text-on-solid:#0D1114;--skeleton-bg:#2E343C;--skeleton-shimmer:rgba(255, 255, 255, 0.06);--danger:#E07A6E;--danger-hover:#F09A90;--danger-bg:#341D1A;--success:#6FAA7A;--success-bg:#16241A;--dir-up:#E07A6E;--dir-down:#6FAA7A;--warning:#C99A3F;--warning-bg:#242A31;--info:#5B9BC4;--info-bg:#13242F;--accent:#7AA9DE;--switch-on:#3E6EA8;--accent-hover:#8FB8E6;--accent-soft:#1C2C3D;--tooltip-bg:#232830;--tooltip-fg:#E4E7EA;--tooltip-border:#2A3038;--scrim:rgba(0, 0, 0, 0.62);}}

package/dist/COSTS.md

@@ -9,48 +9,50 @@
 
 实测两笔账，一笔不省：
 
-- `tokens` 源码版 gzip **18.1 KB** → min 版 **2.6 KB**（省 85%）——
-  源码多的那部分**全是注释**（全库 CSS 有 66% 是注释，字节口径），而注释是给维护者的，不是给浏览器的。
-- tokens 的 min 版 2.6 KB **比任何一个组件自己都贵** ⇒
+- `tokens` 源码版 gzip **19.6 KB** → min 版 **2.7 KB**（省 86%）——
+  源码多的那部分**全是注释**（全库 CSS 有 67% 是注释，字节口径），而注释是给维护者的，不是给浏览器的。
+- tokens 的 min 版 2.7 KB **比任何一个组件自己都贵** ⇒
   "只用一个组件"的真实起步价就是它。不公开这张表，等于让人盲买。
 
 ## 二、明码标价
 
 | 档 | 组件 | tokens（必付） | CSS | JS | **合计** | 源码版合计 | 差 |
 |---|---|---:|---:|---:|---:|---:|---:|
-| primitive | `badge` | 2.6 KB | 0.5 KB | — | **3.1 KB** | 20.8 KB | −17.7 KB |
-| primitive | `button` | 2.6 KB | 1.0 KB | — | **3.6 KB** | 24.4 KB | −20.8 KB |
-| primitive | `card` | 2.6 KB | 0.9 KB | — | **3.6 KB** | 21.6 KB | −18.0 KB |
-| primitive | `choice` | 2.6 KB | 1.1 KB | — | **3.7 KB** | 23.4 KB | −19.7 KB |
-| primitive | `combobox` | 2.6 KB | 1.0 KB | 5.4 KB | **9.0 KB** | 27.7 KB | −18.8 KB |
-| primitive | `date-range` | 2.6 KB | 0.8 KB | 2.5 KB | **6.0 KB** | 24.5 KB | −18.5 KB |
-| primitive | `input` | 2.6 KB | 1.0 KB | — | **3.6 KB** | 21.7 KB | −18.0 KB |
-| primitive | `popover` | 2.6 KB | 0.8 KB | 2.2 KB | **5.6 KB** | 25.6 KB | −20.0 KB |
-| primitive | `progress` | 2.6 KB | 0.7 KB | — | **3.3 KB** | 20.9 KB | −17.6 KB |
-| primitive | `select` | 2.6 KB | 0.8 KB | 3.5 KB | **7.0 KB** | 27.9 KB | −20.9 KB |
-| primitive | `separator` | 2.6 KB | 0.2 KB | — | **2.9 KB** | 19.3 KB | −16.5 KB |
-| primitive | `skeleton` | 2.6 KB | 0.5 KB | — | **3.1 KB** | 19.5 KB | −16.4 KB |
-| primitive | `switch` | 2.6 KB | 0.8 KB | — | **3.4 KB** | 25.2 KB | −21.8 KB |
-| pattern | `accordion` | 2.6 KB | 1.3 KB | 1.8 KB | **5.7 KB** | 32.5 KB | −26.8 KB |
-| pattern | `content` | 2.6 KB | 1.0 KB | — | **3.6 KB** | 22.6 KB | −19.0 KB |
-| pattern | `drawer` | 2.6 KB | 0.8 KB | 2.0 KB | **5.4 KB** | 23.4 KB | −18.1 KB |
-| pattern | `dropdown` | 2.6 KB | 0.8 KB | 2.9 KB | **6.3 KB** | 26.3 KB | −20.0 KB |
-| pattern | `form-validation` | 2.6 KB | 0.8 KB | — | **3.4 KB** | 22.6 KB | −19.1 KB |
-| pattern | `list` | 2.6 KB | 0.6 KB | — | **3.2 KB** | 20.4 KB | −17.2 KB |
-| pattern | `nav` | 2.6 KB | 1.2 KB | 2.6 KB | **6.5 KB** | 29.3 KB | −22.9 KB |
-| pattern | `overlay` | 2.6 KB | 1.1 KB | 2.8 KB | **6.6 KB** | 32.0 KB | −25.4 KB |
-| pattern | `pagination` | 2.6 KB | 0.8 KB | 2.6 KB | **6.0 KB** | 28.6 KB | −22.6 KB |
-| pattern | `reveal` | 2.6 KB | 0.3 KB | 1.2 KB | **4.1 KB** | 22.6 KB | −18.5 KB |
-| pattern | `states` | 2.6 KB | 0.8 KB | — | **3.5 KB** | 22.1 KB | −18.6 KB |
-| pattern | `tabs` | 2.6 KB | 0.7 KB | 2.0 KB | **5.3 KB** | 25.3 KB | −19.9 KB |
-| pattern | `tooltip` | 2.6 KB | 0.5 KB | 1.9 KB | **5.0 KB** | 24.7 KB | −19.7 KB |
-| pattern | `tree` | 2.6 KB | 0.6 KB | 2.9 KB | **6.2 KB** | 26.2 KB | −20.0 KB |
+| primitive | `badge` | 2.7 KB | 0.5 KB | — | **3.2 KB** | 22.4 KB | −19.2 KB |
+| primitive | `button` | 2.7 KB | 1.0 KB | — | **3.7 KB** | 26.0 KB | −22.4 KB |
+| primitive | `card` | 2.7 KB | 0.9 KB | — | **3.6 KB** | 23.1 KB | −19.5 KB |
+| primitive | `choice` | 2.7 KB | 1.1 KB | — | **3.8 KB** | 25.0 KB | −21.2 KB |
+| primitive | `combobox` | 2.7 KB | 1.0 KB | 5.4 KB | **9.0 KB** | 29.3 KB | −20.3 KB |
+| primitive | `date-range` | 2.7 KB | 0.8 KB | 2.5 KB | **6.1 KB** | 26.1 KB | −20.1 KB |
+| primitive | `delta` | 2.7 KB | 0.3 KB | — | **3.0 KB** | 22.4 KB | −19.4 KB |
+| primitive | `input` | 2.7 KB | 1.0 KB | — | **3.7 KB** | 23.2 KB | −19.5 KB |
+| primitive | `metric` | 2.7 KB | 0.5 KB | — | **3.2 KB** | 22.8 KB | −19.7 KB |
+| primitive | `popover` | 2.7 KB | 0.8 KB | 2.2 KB | **5.7 KB** | 27.2 KB | −21.5 KB |
+| primitive | `progress` | 2.7 KB | 0.7 KB | — | **3.4 KB** | 22.5 KB | −19.1 KB |
+| primitive | `select` | 2.7 KB | 0.8 KB | 3.5 KB | **7.0 KB** | 29.4 KB | −22.4 KB |
+| primitive | `separator` | 2.7 KB | 0.2 KB | — | **2.9 KB** | 20.9 KB | −18.0 KB |
+| primitive | `skeleton` | 2.7 KB | 0.5 KB | — | **3.2 KB** | 21.1 KB | −17.9 KB |
+| primitive | `switch` | 2.7 KB | 0.8 KB | — | **3.4 KB** | 26.8 KB | −23.3 KB |
+| pattern | `accordion` | 2.7 KB | 1.3 KB | 1.8 KB | **5.8 KB** | 34.1 KB | −28.3 KB |
+| pattern | `content` | 2.7 KB | 1.0 KB | — | **3.7 KB** | 24.2 KB | −20.5 KB |
+| pattern | `drawer` | 2.7 KB | 0.8 KB | 2.0 KB | **5.4 KB** | 25.0 KB | −19.6 KB |
+| pattern | `dropdown` | 2.7 KB | 0.8 KB | 2.9 KB | **6.4 KB** | 27.9 KB | −21.5 KB |
+| pattern | `form-validation` | 2.7 KB | 0.8 KB | — | **3.5 KB** | 24.1 KB | −20.7 KB |
+| pattern | `list` | 2.7 KB | 0.6 KB | — | **3.3 KB** | 22.0 KB | −18.7 KB |
+| pattern | `nav` | 2.7 KB | 1.2 KB | 2.6 KB | **6.5 KB** | 30.9 KB | −24.4 KB |
+| pattern | `overlay` | 2.7 KB | 1.1 KB | 2.8 KB | **6.7 KB** | 33.6 KB | −26.9 KB |
+| pattern | `pagination` | 2.7 KB | 0.8 KB | 2.6 KB | **6.0 KB** | 30.1 KB | −24.1 KB |
+| pattern | `reveal` | 2.7 KB | 0.3 KB | 1.2 KB | **4.2 KB** | 24.2 KB | −20.0 KB |
+| pattern | `states` | 2.7 KB | 0.8 KB | — | **3.5 KB** | 23.6 KB | −20.1 KB |
+| pattern | `tabs` | 2.7 KB | 0.7 KB | 2.0 KB | **5.4 KB** | 26.8 KB | −21.4 KB |
+| pattern | `tooltip` | 2.7 KB | 0.5 KB | 1.9 KB | **5.1 KB** | 26.3 KB | −21.2 KB |
+| pattern | `tree` | 2.7 KB | 0.6 KB | 2.9 KB | **6.2 KB** | 27.8 KB | −21.6 KB |
 
 ## 三、全库
 
-- 全部组件都用上（min，含 tokens 一份）：**60.4 KB**
-- 源码版（带注释）全库 gzip：292.9 KB
+- 全部组件都用上（min，含 tokens 一份）：**61.2 KB**
+- 源码版（带注释）全库 gzip：302.0 KB
 
-> ⚠️ 源码版那个数字**不是**要付的钱：它包含我们的注释（全库 CSS 有 66% 是注释，字节口径）。
+> ⚠️ 源码版那个数字**不是**要付的钱：它包含我们的注释（全库 CSS 有 67% 是注释，字节口径）。
 > 它的用途只有一个 —— 让人看清"dist 到底省了多少"。
 

package/docs/CONVENTIONS.md

@@ -5,7 +5,7 @@
 本文是它们的**唯一说明书** —— 规则写在这里，判据在仓库里，两边一一对应。
 
 读法：如果你只想知道「我该写哪个变量」，看第一节和第二节；
-如果你想改这套东西，看第十节，那里列了每条规则由什么挡住。
+如果你想改这套东西，看第十一节，那里列了每条规则由什么挡住。
 
 ## 一 · 令牌分三层，你只用中间层
 
@@ -172,7 +172,30 @@
 - 不要用更深的选择器去压（`.page .btn.btn--primary`）—— 那是把特异性当版本管理，
   下次改版必然打架。
 
-## 十 · 每条规则由什么挡住
+## 十 · 涨跌：语义在令牌层，口径是全局的
+
+红绿有两个完全不同的来处，**不许共用一个名字**：
+
+| 令牌 | 语义 | 例子 |
+|---|---|---|
+| `--danger` / `--success` | **评价**：错了 / 成了 | 审计失败、已停牌 |
+| `--dir-up` / `--dir-down` | **事实**：涨了 / 跌了 | 同比 +12.4% |
+
+「研发费用同比 +38%」是涨，但那是坏消息 —— 用 `--danger` 渲染它，
+颜色说"错了"、语义说"涨了"，读者收到矛盾信号。
+
+三条规则：
+
+- **组件只写 `color: var(--dir-up)`**，不许出现 `[data-market]` 分支。
+  口径切换改的是**令牌指向**，跟暗色同构（换底层值，语义名不动）。
+- **口径是全局约定**：`data-market="intl"` 加在任意祖先上，整块对调。
+  交换规则在选配文件 `01-tokens/market.css`，**不在 `tokens.css`** ——
+  条件规则进核心令牌会让六个靠词法读 CSS 的工具静默读错。
+- **方向必须有非颜色的载体**：`delta` 用 `+` / `−`（U+2212）符号，
+  且符号必须真的进可访问性树（CSS `::before` 生成的字符不在元素 name 里，
+  但会作为独立 StaticText 出现 —— 换空串/背景图/`visibility:hidden` 就会没）。
+
+## 十一 · 每条规则由什么挡住
 
 规则只有落到判据上才会被遵守。对应关系如下（文件都在 `05-audit/`）：
 
@@ -189,6 +212,9 @@
 | `@layer` 计数与 `!important` 分类 | `cascade-layer-gate.py` |
 | 触控目标 44px | `a11y.py`（静态） + 行为脚本（运行时） |
 | 页面骨架只有一份（改令牌能牵动全部页面） | `skeleton-lever-check.js` |
+| 涨跌方向色对、口径可切、符号进可访问性树 | `delta-check.js` |
+| 指标缺数是显式状态、数字等宽对齐 | `metric-check.js` |
+| 文档里的数字与实际一致（组件数/门禁数/精简档令牌数） | `doc-facts-gate.py` |
 
 想加一条新规则？先在门禁里加判据、确认它会红，再写进本文 ——
 **顺序反了就会得到一条"写在文档里、没人执行"的规则。**

package/index.html

@@ -26,7 +26,7 @@ li a:active { background: var(--surface-sunken); }
 <main id="main" class="wrap">
   <h1>agentcss · 演示</h1>
   <p class="lede">
-    35 个组件，每一页都能直接打开看。
+    37 个组件，每一页都能直接打开看。
     <strong>手机上也一样</strong> —— 布局、触控尺寸、暗色都是按移动端调的。
   </p>
 
@@ -39,7 +39,9 @@ li a:active { background: var(--surface-sunken); }
 <li><a href="02-primitives/choice/demo.html">checkbox / radio / select</a><span class="r__p">单选/多选/原生 select 外观的统一控件</span></li>
 <li><a href="02-primitives/combobox/demo.html">combobox · 组合框 / 标签输入</a><span class="r__p">可搜索 + 可多选标签的输入控件</span></li>
 <li><a href="02-primitives/date-range/demo.html">date-range · 日期区间</a><span class="r__p">日期区间选择，含预设快捷范围</span></li>
+<li><a href="02-primitives/delta/demo.html">delta · 变化量</a><span class="r__p">变化量：涨跌方向 + 符号 + 颜色。只描述往哪边变，不判断好坏（等于好恶是 badge 的事，会计正负是 ta</span></li>
 <li><a href="02-primitives/input/demo.html">input / field</a><span class="r__p">文本输入及其标签/帮助/错误三件套</span></li>
+<li><a href="02-primitives/metric/demo.html">metric · 指标块</a><span class="r__p">指标块：一个标签 + 一个值 + 一句上下文。数字等宽、单位分离、缺数是一等状态</span></li>
 <li><a href="02-primitives/popover/demo.html">popover · 气泡卡片</a><span class="r__p">锚定到触发元素的浮层</span></li>
 <li><a href="02-primitives/progress/demo.html">progress · 进度条</a><span class="r__p">进度条与进度环</span></li>
 <li><a href="02-primitives/select/demo.html">select · 自建下拉选择</a><span class="r__p">自定义下拉选择（非原生）</span></li>
@@ -92,7 +94,7 @@ li a:active { background: var(--surface-sunken); }
   </p>
 </main>
 <footer class="wrap">
-  <p class="note">0.11.16 · 零第三方运行时依赖</p>
+  <p class="note">0.12.0 · 零第三方运行时依赖</p>
 </footer>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agentcss",
-  "version": "0.11.16",
+  "version": "0.12.0",
   "description": "移动 Web 组件库：CSS + 可选行为脚本，零第三方运行时依赖。样式用 bundler 引入，交互行为用 script 标签引入。",
   "keywords": [
     "css",