agentcss 0.14.0 → 0.16.0

package/01-tokens/tokens.css

@@ -440,6 +440,35 @@
      ========================================================================== */
 }
 
+/* ============================================================================
+   容器查询的**槽位标记**（0.16.0）
+
+   `[data-cq]` 让一个元素成为"查询容器"：里面的组件按**自己所在的槽宽**
+   自适应，而不是按视口宽度。`card--row` 与 `analysis-report` 已用它切换布局。
+
+   🔴 为什么是显式属性，而不是给组件自动加 `container-type`
+     ① `container-type: inline-size` 会带上 `contain: layout style inline-size`
+        ⇒ 元素变成 fixed / absolute 后代的**包含块**。
+        若给 `.page` 或抽屉的宿主自动加上，抽屉（position: fixed）
+        会被关进那个盒子里 —— 静默的、只在特定嵌套下出现的破坏。
+     ② 库不知道"槽"在哪：同一张卡片既可能在 320px 侧栏，也可能在 900px 主列。
+        只有页面作者知道该把哪一层声明成容器。
+
+   ⇒ 契约：**加了 `data-cq` 的那一层，就是组件眼里的"窗口"**。
+     不加 ⇒ 整条容器查询不生效（实测：没有容器时 `@container` **不会**退回视口），
+     组件仍按视口断点工作 —— 与 0.15.0 完全一致。
+
+   ⚠️ 不要把它加在会承载抽屉 / 全屏浮层的祖先上（理由见 ①）。
+      它下面可以放 popover / dropdown（那些用 absolute，不受影响）。
+
+   ⚠️ 为什么在 tokens.css 而不是 page.css：tokens.css 是**唯一必须引入**的文件
+      （"只拿一个组件"的最小页面也带着它）。放在 page.css 里，
+      按需取用的页面会拿到一份永远不生效的 `@container`。
+   ========================================================================= */
+[data-cq] {
+  container-type: inline-size;
+}
+
 /* ============================================================================
    无障碍兜底 —— 这一段必须随 token 一起走，不许删
    ========================================================================= */

package/02-primitives/card/README.md

@@ -85,10 +85,30 @@ hover 只改 **`transform`** 和 **`box-shadow`**，这两个属性不触发回
 | `.card--linked` | 整卡可点 | 内部必须有真实 `<a>`/`<button>` |
 | `.card--selected` | 选中态 | inset shadow，不是改 border |
 | `.card--compact` | 紧凑 | 两档够了，第三档说明密度没规划 | —— demo 未演示，是留给复用者的钩子
-| `.card--row` | 横向 | 560px 以下自动回退纵向 |
+| `.card--row` | 横向 | 560px 以下回退纵向；槽位标了 `data-cq` 时按**槽宽**判断（见下） |
 
 ---
 
+## 横向卡片看槽宽，不看屏幕
+
+`.card--row` 有两套断点，按有没有容器祖先分流：
+
+```html
+<!-- 侧栏里：1440px 的屏幕上依然是竖排，因为槽只有 320px。
+     宽度由你的布局决定；这一层就是组件眼里的"槽"。 -->
+<aside data-cq>
+  <div class="card card--row">…</div>
+</aside>
+```
+
+- **没有 `data-cq`** ⇒ `@media (max-width: 560px)` 说了算，与本版之前完全一致。
+- **有 `data-cq`** ⇒ 以**槽宽**为准（35rem = 560px）：槽窄则竖排、槽宽则横排，
+  连"视口很窄但槽很宽"那种情况也以槽为准。
+- 为什么必须显式标记：`container-type` 会让元素成为 `position: fixed` 后代的包含块。
+  组件自己加会把抽屉/浮层关进卡片里 —— 这个决定只能由页面作者做。
+
+判据：`container-query-check.js`（含"剥掉 `@container` 布局不塌"的降级验证）。
+
 ## 🔴 整卡可点：正确做法 vs 错误做法
 
 **错误**：给 `<div>` 加 `onclick`。

package/02-primitives/card/card.css

@@ -209,6 +209,43 @@
   }
 }
 
+/* ---------------------------------------------------------------- 按槽宽（0.16.0）
+   🔴 上面那条是**视口**断点，它在一种真实布局里是错的：
+      1440px 的页面上，右侧 320px 栏里放一张 `.card--row` ——
+      视口很宽，于是 `@media` 不触发，卡片保持横排：
+      160px 的图 + 160px 的文字，标题换行三行。
+      症状不来自组件，来自"拿视口宽度替槽宽度做了决定"。
+
+   ⇒ 槽位被标成 `[data-cq]`（见 01-tokens/tokens.css 的「容器查询的槽位标记」）时，以**槽宽**为准。
+     两条都写，是因为"窄槽 + 宽视口"和"宽槽 + 窄视口"是两个方向：
+       槽窄 ⇒ 竖排；槽宽 ⇒ 横排（后者覆盖上面那条视口断点）。
+     ⚠️ 容器查询不匹配时**不会**撤销任何规则 —— 所以"退回去"必须显式写一条。
+        这也是为什么不能只写 `@container (max-width)` 一条。
+
+   ⚠️ 没有 `[data-cq]` 祖先时这两条整段不生效（实测：`@container` 不会退回视口），
+      行为与 0.15.0 完全一致 —— 这条改动对未标记的页面是**零影响**。
+   ---------------------------------------------------------------- */
+@container (max-width: 35rem) {
+  .card--row { flex-direction: column; }
+  .card--row .card__media {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;
+  }
+}
+@container (min-width: 35rem) {
+  .card--row {
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .card--row .card__media {
+    flex: none;
+    width: 160px;
+    aspect-ratio: auto;
+    border-radius: calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);
+  }
+}
+
 /* ---------------------------------------------------------------- 无障碍兜底
    card 的 hover 位移属于"小幅位移"，reduced-motion 下应当去掉抬起，
    只保留阴影变化 —— 阴影不属于前庭敏感类动效。

package/03-patterns/dropdown/README.md

@@ -10,6 +10,7 @@
 | `Esc` | 关闭，并把焦点**还给按钮** |
 | `Tab` | 关闭菜单（焦点移到下一个元素）|
 | `Enter` / `Space` | 激活当前项 |
+| 字母 / 数字（**可选**） | 跳到名字以该前缀开头的项（APG 标为 `(Optional)`；见下） |
 
 ## ⚠️ 另有两条容易漏的
 
@@ -66,12 +67,27 @@ menu.setAttribute('role', 'menu');
 `data-state` / `data-value`，**不用 class 切换** —— 这是全库 INVARIANT I-8
 （状态必须活在 DOM 属性上），也是门禁会查的东西。
 
-## 成熟度：beta（两条行为债，如实列出）
+## 成熟度：stable（行为零欠账）
 
-| 债 | 现在的后果 |
+两条历史债都收编了，记账在 `ai/behaviors.json`：
+
+| 曾经 | 现在 |
 |---|---|
-| `focus-return:manual` | 关闭后归位是手写的，不是统一机制 |
-| `typeahead:gap` | **没有类型搜索** —— APG 的 Menu Button 不硬性要求，但列表长时体验缺失 |
+| `focus-return:manual` | 0.8.6 收编：`open()` 里 `save()`、`close()` 里 `restore()`，替掉手写的 `btn.focus()` |
+| `typeahead:gap` | 0.15.0 收编：打字跳项走 typeahead 核（见下） |
+
+### 打字跳项（APG 的 `(Optional)` 项）
+
+打一个字母 ⇒ 跳到**下一个**以它开头的项；快速连打 ⇒ 前缀累积；连打同一个字母 ⇒
+在匹配项之间循环；不匹配 ⇒ **什么都不做**（APG 不要求"没找到"有反馈）。
+
+⚠️ **它天然只对拉丁字母标签有效**：中文标签靠输入法，而 IME 组字时 `keydown`
+给的是 `Process` / `Unidentified`，拿不到字符。所以判据用一张英文夹具测
+（`dropdown-check` ⑦），demo 的中文菜单不受影响、也不会因此变慢。
+
+⚠️ 匹配前会**剥掉开头的装饰符号**：带勾选的项文本是「✓ 按日期」，
+不剥的话打「按」永远匹配不到。这和 table 列头把 `↕` 念出来是同一类问题 ——
+装饰符号不该混进"名字"里。
 
 ## 反例
 

package/03-patterns/dropdown/dropdown.js

@@ -223,6 +223,72 @@
   };
   /* ==== BEHAVIOR INJECT END: dismissable ==== */
 
+  /* ==== BEHAVIOR INJECT BEGIN: typeahead ==== */
+  var flTypeahead = function (opts) {
+    var opt = opts || {};
+    var items = opt.items || function () { return []; };
+    var textOf = opt.textOf || function (x) { return String((x && x.textContent) || ''); };
+    var usable = opt.usable || function () { return true; };
+    var timeout = opt.timeout || 500;
+    var onHit = opt.onHit || function () {};
+    var buf = '';
+    var timer = null;
+    var last = -1;
+
+    function stop() {
+      if (timer) { clearTimeout(timer); timer = null; }
+    }
+
+    /* 连打同一字符 ⇒ 只按首字符匹配（理由见文件头 ③④）*/
+    function repeated(s) {
+      if (s.length < 2) return false;
+      for (var i = 1; i < s.length; i++) {
+        if (s.charAt(i) !== s.charAt(0)) return false;
+      }
+      return true;
+    }
+
+    function find(needle) {
+      var l = items() || [];
+      var n = l.length;
+      if (!n) return -1;
+      for (var k = 0; k < n; k++) {
+        var i = (last + 1 + k) % n;      /* ① 从当前项之后开始 ⇒ 会绕回 */
+        if (!usable(l[i])) continue;     /* ⑤ */
+        if (textOf(l[i]).toLowerCase().indexOf(needle) === 0) return i;
+      }
+      return -1;                          /* ⑥ */
+    }
+
+    function type(ch) {
+      if (!ch) return -1;
+      buf += String(ch).toLowerCase();    /* ② */
+      stop();
+      timer = setTimeout(clear, timeout); /* ④ */
+      var needle = repeated(buf) ? buf.charAt(0) : buf;   /* ③ */
+      var i = find(needle);
+      if (i >= 0) {
+        last = i;
+        onHit(i, (items() || [])[i], buf);
+      }
+      return i;
+    }
+
+    /* 只清缓冲，不清 last（理由见文件头）*/
+    function clear() {
+      buf = '';
+      stop();
+    }
+
+    return {
+      type: type,
+      clear: clear,
+      buffer: function () { return buf; },
+      destroy: function () { stop(); },
+    };
+  };
+  /* ==== BEHAVIOR INJECT END: typeahead ==== */
+
   /* ---- 旧环境兼容：Element.closest 在老 WebView 上不存在 ----
      直接调用会在真机上抛 `is not a function`（本地完全正常，
      只在老环境炸 —— 属静默失效）。这里做模块内兜底，
@@ -315,6 +381,8 @@
          焦点留在按钮上，菜单项永远进不去（真机用 NVDA + Edge 实测过）。
          APG 的菜单按钮也是这样：打开即把焦点交给第一项。 */
       focusAt(0);
+      /* 每次打开都从空缓冲开始：上次关菜单前打了一半的前缀不该留到这次 */
+      typeahead.clear();
       flEmit(root, 'fl-open', null);
       if (opt.onOpen) opt.onOpen();
     }
@@ -324,6 +392,7 @@
       menu.hidden = true;
       btn.setAttribute('aria-expanded', 'false');
       active = -1;
+      typeahead.clear();
       if (restoreFocus !== false) fr.restore();
       flEmit(root, 'fl-close', null);
       if (opt.onClose) opt.onClose();
@@ -359,6 +428,22 @@
       onMove: function (i) { focusAt(i); },
     });
 
+    /* ⑥ 打字跳项 —— APG Menu 的 `(Optional)` 项，走 typeahead 核。
+       匹配**可见文本**，但先剥掉开头的装饰符号：带勾选的项文本是
+       "✓ 按日期"，不剥的话打"按"永远匹配不到（同 table 列头 ↕ 那一类问题）。
+       ⚠️ 中文标签实际上打不出来：IME 走 keydown 时 key 是 Process / Unidentified。
+          这条是给拉丁字母标签的菜单用的 —— APG 的 typeahead 本来就是这个前提，
+          所以判据用一张英文夹具页测（见 dropdown-check ⑥）。 */
+    var typeahead = flTypeahead({
+      items: function () { return itemsOf(menu); },
+      textOf: function (el) {
+        var s = String((el && el.textContent) || '').replace(/\s+/g, ' ').trim();
+        return s.replace(/^[^0-9A-Za-z\u4e00-\u9fa5]+/, '');
+      },
+      usable: function (el) { return el.getAttribute('aria-disabled') !== 'true'; },
+      onHit: function (i) { focusAt(i); },
+    });
+
     /* ---------- 按钮 ---------- */
     /* 🔴 修：原来先 `setAttribute('aria-controls', menu.id || '')`
        **再**给 menu.id ⇒ aria-controls 永远拿到空串。
@@ -416,6 +501,17 @@
          留在原地会**关两次**（同一元素上的两个监听器，stopPropagation 挡不住
          同级的另一个监听器，那是 stopImmediatePropagation 的活）⇒ onClose 被调两遍。 */
 
+      /* ③b 可打印字符 ⇒ 跳到名字以它开头的项（APG 的 (Optional) 项）
+         · 空格排除：它的语义是"激活当前项"（下面 ④）
+         · 带 Ctrl / Meta / Alt 排除：那是浏览器快捷键
+         · isComposing 时排除：中文输入法正在组字，不能抢 */
+      if (k.length === 1 && k !== ' ' &&
+          !e.ctrlKey && !e.metaKey && !e.altKey && !e.isComposing) {
+        e.preventDefault();
+        typeahead.type(k);
+        return;
+      }
+
       /* ③ Tab 关闭（不拦截，让焦点自然走到下一个）*/
       if (k === 'Tab') { close(false); return; }
 
@@ -440,7 +536,10 @@
     return {
       open: open,
       close: close,
-      destroy: function () { roving.destroy(); dismiss.destroy(); menu.hidden = true; },
+      destroy: function () {
+        roving.destroy(); dismiss.destroy(); typeahead.destroy();
+        menu.hidden = true;
+      },
     };
   }
 

package/04-recipes/analysis-report/README.md

@@ -60,6 +60,24 @@ analysis-report.css          ← 本示例的局部样式
 3. 辅助栏 `position: sticky` 必须配 `align-self: start`，
    否则 sticky 在 Grid 里不生效（默认 stretch 会撑满整列高度）。
 
+### 分屏 / 嵌入：断点看槽宽
+
+上面那条断点对**分屏**是错的：1440px 的屏幕上把报告放进 700px 的阅读栏，
+视口 ≥1024 ⇒ 硬排 `1fr + 15rem`，正文每行只剩七八个字。
+
+```html
+<!-- 700px 的阅读栏；宽度由你的布局决定，这一层就是"槽" -->
+<div data-cq>
+  <div class="report">…</div>
+</div>
+```
+
+槽位标了 `[data-cq]` ⇒ 以槽宽为准：槽 < 64rem 时回到单栏（`aside` 同时退回
+`position: static`，否则空侧栏会跟着滚）。没有标记 ⇒ 行为与本版之前一致。
+
+⚠️ `data-cq` 不要加在承载抽屉/全屏浮层的祖先上（`container-type` 会成为
+`position: fixed` 的包含块）。
+
 ## 已知限制
 
 - 断点写不了 `var()` —— 媒体查询里的 `64rem` 与令牌 `--bp-lg`

package/04-recipes/analysis-report/analysis-report.css

@@ -58,6 +58,45 @@
   }
 }
 
+/* ---------------------------------------------------------------- 按槽宽（0.16.0）
+   🔴 上面那条断点对"分屏 / 嵌入"是错的：
+      1440px 的屏幕上，报告被放进右侧 700px 的阅读栏（列表在左）——
+      视口 ≥1024，于是硬排成 `1fr + 15rem`：正文 460px、侧栏 240px，
+      正文每行只剩七八个字，而侧栏空空荡荡。
+
+   ⇒ 槽位标了 `[data-cq]`（见 tokens.css 的「容器查询的槽位标记」）时，以**槽宽**为准。两条方向都写：
+       窄槽 ⇒ 回到单栏（撤销上面的并排）
+       宽槽 ⇒ 并排（覆盖"窄视口"那条）
+     ⚠️ 容器查询不匹配**不会**撤销规则，所以"退回去"必须显式写 ——
+        只写 `@container (min-width)` 一条，窄槽在宽视口上仍然是并排的。
+
+   ⚠️ 没有 `[data-cq]` 祖先时整段不生效，未标记的页面行为不变。
+   ---------------------------------------------------------------- */
+@container (max-width: 63.99rem) {
+  .report__body {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sp-6);
+  }
+  .report__aside {
+    position: static;
+    max-height: none;
+    overflow: visible;
+  }
+}
+@container (min-width: 64rem) {
+  .report__body {
+    grid-template-columns: minmax(0, 1fr) 15rem;
+    gap: var(--sp-7);
+  }
+  .report__aside {
+    position: sticky;
+    top: var(--sp-4);
+    align-self: start;
+    max-height: calc(100vh - var(--sp-8));
+    overflow: auto;
+  }
+}
+
 /* ---------- 正文节奏 ---------- */
 .report__main > section + section { margin-top: var(--sp-6); }
 .report__main h2 { margin-top: 0; }

package/CHANGELOG.md

@@ -16,7 +16,129 @@
 
 （无）
 
-## [0.14.0] - 2026-10-30
+## [0.16.0] - 2026-10-31
+
+### 布局 · 断点看**槽宽**，不看视口（`[data-cq]` + `@container`）
+
+全库 44 个 CSS 文件里 `@container` 曾经是 **0 处**，所有断点都是 `@media`。
+有一类布局因此是错的，而且**在库自己的 demo 里永远测不出来**：
+
+- 1440px 页面上，右侧 320px 栏里放 `.card--row` ⇒ 视口断点不触发 ⇒
+  卡片保持横排：160px 图 + 160px 文字，标题折三行；
+- 同一个页面上，报告被放进 700px 阅读栏 ⇒ 视口 ≥1024 ⇒ 硬排 `1fr + 15rem`，
+  正文每行七八个字。
+
+这是**参考系错了**：视口宽度不等于组件所在槽位的宽度。
+
+做法是显式标记 + 两个方向都写：
+
+```html
+<aside class="rail" data-cq>          <!-- 这一层就是组件眼里的"窗口" -->
+  <div class="card card--row">…</div>
+</aside>
+```
+
+- `[data-cq] { container-type: inline-size }` 放在 **`tokens.css`**（唯一必须引入的文件），
+  不是 `page.css` —— 否则"只拿一个组件"的页面会拿到一份永不生效的 `@container`；
+- **不自动给组件加 `container-type`**：它会带上 `contain: layout`，
+  让元素成为 `position: fixed` 后代的包含块 ⇒ 抽屉/全屏浮层会被关进那个盒子；
+- **没有 `data-cq` 时整条不生效**（实测：没有容器祖先时 `@container` **不会**退回视口），
+  未标记页面的渲染与 0.15.0 完全一致；
+- **两个方向都写**：`@container (max-width)` 只能"变窄"，撤销不了一条已生效的
+  `@media`（不匹配不会撤销任何规则），所以"标记过的槽以槽为准"还得写 `min-width` 那条。
+
+判据 `container-query-check.js` 10 条，覆盖 card 与 report 的
+「槽窄 / 槽宽 / 未标记 / 视口回退 / 容器盖过视口」五种情形，外加一条
+**降级证明**：把 `@container` 整块从 CSS 文本里剥掉再跑 —— 布局必须不再按槽切换、
+且不塌（`cardH>0`、图片仍 160px）。老引擎（Chromium 97）看到的就是剥掉后的那一份。
+
+### 判据 · 文档事实漏了两种写法，英文 README 因此落后两个版本
+
+`doc-facts` 只认中文句式「共 N 个（stable A / beta B）」与「N 个组件」，
+而英文 README 写的是 `**35** components (31 stable / 4 beta)`：
+
+| | 文档 | 实际 |
+|---|---|---|
+| 组件数 | 35（31 stable / 4 beta） | **37（37 stable / 0 beta）** |
+| primitives 条数 | 13 | **15** |
+| 表里缺的行 | — | `metric`、`delta` |
+
+两个版本（0.14.0、0.15.0）里它每轮都通过，因为门禁**读不到那种写法**。
+现在补两条判据：英文的 `N components (X stable / Y beta)`（两种语序都认）、
+分档标题 `### primitives (N)`；自检各加一条反向用例，另加一条正向基线
+（写对了必须绿）。**"清单里少了什么"比"数字错"更难发现** —— 所以分档条数也进了门禁。
+
+### 更正 · 上一轮盘点里把 `@layer` 排成 P1，是错的
+
+`docs/CONVENTIONS.md` 第七节与 `docs/LAYER-BASELINE.md` 早有结论：7 行真机实测里
+Android 14 · 百度浏览器（Chromium 97）**缺 `@layer`**，而 `@layer { … }` 不支持时是
+**整块丢弃** ⇒ 那一层样式直接消失。切层在这个库里不是改进，是会让部分浏览器变白屏。
+记进 `internal/ERRORS.md` E167：**"0 处"只说明现状，不说明原因；有门禁守着的"没有"，
+几乎都是决定。**
+
+### 体积
+
+分两个口径写，因为这两个数差 **16 倍**，只看一个会得出相反结论：
+
+| 口径 | 变化 |
+|---|---|
+| **发布载荷**（`dist/*.css` gzip） | card **+35 B** · report **+51 B** · tokens **+36 B**（合计 **+122 B**） |
+| **源码**（含注释，`size-baseline` 量的就是这个） | 全库 gzip 259.7 → 261.5 KB（**+0.71%**）；card +16.9%、report +17.4% |
+
+差异全在注释：`dist/` 剥注释，源码保留 —— 而"为什么两个方向都要写"这件事
+必须留在源码里，否则下一个人会删掉一半。基线按显式重录记下（`--record`）。
+
+## [0.15.0] - 2026-10-31
+
+### 行为 · dropdown 的「打字跳项」收编 typeahead 核（**最后一个 beta 升 stable**）
+
+`ai/behaviors.json` 里最后一条真缺口是 `dropdown` 的 `typeahead:gap`：
+APG Menu 把"按字符跳到名字以它开头的项"列为 `(Optional)`，本库确实没做。
+这一轮补上，走 `typeahead` 核（不新写一份）。
+
+接线时补了两件核不管的事：
+
+- **打开/关闭都清缓冲**：上次关菜单前打了一半的前缀不该留到下次；
+- **匹配前剥掉开头的装饰符号**：带勾选的项文本是「✓ 按日期」，
+  不剥的话打「按」永远匹配不到。这和 table 列头把 `↕` 念出来是同一类问题 ——
+  装饰符号混进了"名字"里。
+
+⚠️ 一个必须写明的限制：**中文标签打不出来**。IME 组字时 `keydown` 给的是
+`Process` / `Unidentified`，拿不到字符。所以这条能力天然只对拉丁字母标签有效 ——
+这也是 APG 把它标成 Optional 的现实原因。判据因此用一张**英文夹具**测
+（只换标签、跑的是同一份 `Dropdown.create`），demo 的中文菜单不受影响。
+
+判据 6 条，每条各有独立突变体（删分支 / 去掉同字母特判 / 不累积前缀 /
+不剥装饰符号 / 没找到就跳首项 —— 每次只有对应的那条红）：
+
+| 判据 | 断言 | 只被哪个突变体打红 |
+|---|---|---|
+| ⑦ 首字母 | 打 `p` ⇒ Paste | 删掉打字分支 |
+| ⑦b 同字母循环 | `c` `c` ⇒ Copy → Cut | 去掉 `repeated()` 特判 |
+| ⑦c 前缀累积 | `s` `e` ⇒ Select all | 把 `buf +=` 改成 `buf =` |
+| ⑦d 不匹配不动 | 打 `z` 焦点不变 | `return -1` 改成 `return 0` |
+| ⑦e 关闭态 | 关着打字不开菜单 | 删掉打字分支 |
+| ⑦f 装饰符号 | 打 `c` 命中「✓ Copy」 | 去掉剥符号那一步 |
+
+### 判据 · 全库 stable 之后，ladder 怎么才算没瞎
+
+37 个组件全 stable，`maturity-gate` ③（"不得全落同一档"）按时报红。
+门禁自己写了两条路：加严判据，或显式声明台阶退役。这轮走了**第三条**，
+因为前两条都不诚实：为了"留几个 beta"而加严是拿数据凑判据，直接删掉 ③ 又是放走量具。
+
+⇒ ③ 改成：全库 stable 时先做**正向控制** —— 给一个真实组件临时塞一条合成债务，
+重算必须降成 beta；撤掉必须回到 stable。通过了才放行，并在输出里说明
+"阶梯退而不休"。**分支里唯一的证据就是"判据仍然会红"**，不是一个允许全绿的开关。
+
+反向控制也跟着换了：原来的突变体是"把矩阵洗白"（全改成 core）——
+全库达标后这已经是**合法状态**，突变消失了。改成"**把判据改松**"
+（让 `recompute` 忽略债务、一律返回 stable）⇒ 正向控制抓得到 ⇒ ③ 红，且只红这一条。
+
+### 体积
+
+`dropdown.js` 多背一份 typeahead 核（gzip **6.4 → 7.6 KB / +18.9%**）。
+全库 gzip 258.5 → 259.7 KB（**+0.46%**）。基线按显式重录记下（`size-baseline.py --record`）。
+
 
 ### 行为 · drawer / overlay 的「关得掉」收编进核（beta → stable）
 

package/CONTRIBUTING.md

@@ -8,7 +8,7 @@ npm run gate           # 全量：含浏览器类
 npm run gate:fast      # 只跑静态层，不用装浏览器
 ```
 
-全量是 **214 道门禁**（4 路并发实测约 9 分钟 / 退出码 0；单道耗时累加 1691 秒，
+全量是 **215 道门禁**（4 路并发实测约 9 分钟 / 退出码 0；单道耗时累加 1691 秒，
 组件层要起浏览器，还要逐张比 96 张视觉截图。0.11.15 起默认 4 路并发）。
 只想确认没改坏静态契约的话用 `gate:fast`，几秒到几分钟。
 

package/README.md

@@ -171,9 +171,9 @@ Three mistakes the template above already avoids:
 
 ## Components
 
-**35** components (31 stable / 4 beta). Each directory holds a `README.md` (why it is built this way) and a `demo.html` (markup you can copy).
+**37** components (stable 37 / beta 0). Each directory holds a `README.md` (why it is built this way) and a `demo.html` (markup you can copy).
 
-### primitives (13)
+### primitives (15)
 
 | Component | Root class | Purpose |
 |---|---|---|
@@ -183,7 +183,9 @@ Three mistakes the template above already avoids:
 | `choice` | `choice` | One control for radio, checkbox and native-select appearance |
 | `combobox` | `combo` | Searchable input that can hold multiple tags |
 | `date-range` | `drange` | Start/end date range with preset shortcuts |
+| `delta` | `delta` | Change value: direction and sign, **describes direction only, never judges good or bad** |
 | `input` | `field` | Text field plus its label, hint and error |
+| `metric` | `metric` | Metric block: one label, one value, one line of context; missing data is a first-class state |
 | `popover` | `popover` | Floating panel anchored to its trigger |
 | `progress` | `progress` | Progress bar and ring |
 | `select` | `select` | Custom dropdown (not the native element) |

package/README.zh-CN.md

@@ -83,7 +83,7 @@ npm install github:owain323/frontend-lib
 
 ## 组件一览
 
-共 **37** 个（stable 36 / beta 1）。每个组件目录下有 `README.md`（为什么这么做）和 `demo.html`（能直接抄的结构）。
+共 **37** 个（stable 37 · 全部通过四条判据）。每个组件目录下有 `README.md`（为什么这么做）和 `demo.html`（能直接抄的结构）。
 
 ### primitives · 基础件（15）
 

package/START-HERE.md

@@ -37,7 +37,7 @@
 | 按钮 | `02-primitives/button/button.css` | 357 | — | 几乎总要 |
 | 输入框 | `02-primitives/input/input.css` | 239 | — | 有表单就要 |
 | 标签 / 徽章 | `02-primitives/badge/badge.css` | 141 | — | 有状态标记就要（"已披露""停牌"） |
-| 卡片 | `02-primitives/card/card.css` | 246 | — | 有分组内容就要 |
+| 卡片 | `02-primitives/card/card.css` | 283 | — | 有分组内容就要 |
 | 单选 / 多选 | `02-primitives/choice/choice.css` | 395 | — | 单选 / 多选就要 |
 | 下拉选择 | `02-primitives/select/select.css` | 151 | **必需 541** (`select.js`) | 原生 select 的外观或交互不够用就要 |
 | 可搜索选择 | `02-primitives/combobox/combobox.css` | 223 | **必需 477** (`combobox.js`) | 选项多到要搜索，或要选多个并留成标签就要 |
@@ -49,7 +49,7 @@
 | 日期区间 | `02-primitives/date-range/date-range.css` | 206 | **必需 301** (`date-range.js`) | 要选起止日期就要 |
 | 标签页 | `03-patterns/tabs/tabs.css` | 172 | **必需 316** (`tabs.js`) | 同层级内容切换就要 |
 | 折叠面板 | `03-patterns/accordion/accordion.css` | 453 | **必需 389** (`accordion.js`) | 长表单分段就要 |
-| 动作菜单（beta） | `03-patterns/dropdown/dropdown.css` | 135 | **必需 448** (`dropdown.js`) | 要一组动作（新建 / 导出 / 删除）就要 |
+| 动作菜单 | `03-patterns/dropdown/dropdown.css` | 135 | **必需 547** (`dropdown.js`) | 要一组动作（新建 / 导出 / 删除）就要 |
 | 文字提示 | `03-patterns/tooltip/tooltip.css` | 89 | **必需 280** (`tooltip.js`) | 图标按钮或缩写需要一句话解释就要 |
 | 分页 | `03-patterns/pagination/pagination.css` | 195 | **必需 401** (`pagination.js`) | 数据多到要翻页就要 |
 | 树形 | `03-patterns/tree/tree.css` | 122 | **必需 464** (`tree.js`) | 层级数据（文件 / 组织 / 分类）要展开就要 |
@@ -63,7 +63,7 @@
 | 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 | — |  |
+| analysis-report | `04-recipes/analysis-report/analysis-report.css` | 226 | — |  |
 | detail-page | `04-recipes/detail-page/detail-page.css` | 190 | — |  |
 | report | `04-recipes/report/report.css` | 364 | — |  |
 | table | `04-recipes/table/table.css` | 387 | — |  |

package/SUPPORT.md

@@ -94,6 +94,10 @@ grep 一条都数不到），还有 `skip "…"`（这台机器跑不了的门
 3. **`conic-gradient`**（环形进度）—— Safari 15.4+ 才支持
 4. **滚动条样式** —— `::-webkit-scrollbar` 与 Firefox 的 `scrollbar-width` 是两套语法，组件里都写了
 5. **iOS 输入框的 `font-size < 16px` 会触发缩放** —— 输入类组件已避免
+6. **`@container`**（0.16.0 起使用，`[data-cq]` 标记的槽位）—— 与 `@layer` 同类：
+   不支持时**整块丢弃**。区别在于**基础样式不在块里**，所以降级后与标记前完全一致；
+   `container-query-check.js` 每次运行都会把 `@container` 剥掉再跑一遍，证明布局不塌。
+   Chromium 97 不会白屏，只会"按视口断点"（即旧行为）。
 
 ## 已知限制（已验证存在，不是"待验证"）
 
@@ -114,3 +118,6 @@ grep 一条都数不到），还有 `skip "…"`（这台机器跑不了的门
 3. popover 的碰撞翻转（上面"已知限制"第 1 条）
 
 ⚠️ 在补齐之前，请勿把「移动 WebView 支持」当作已验证的能力对外承诺。
+
+> 2026-10-31 记：前两项**卡在设备上** —— 手上没有可用的安卓机，也没有 iOS 设备，
+> 云真机需要账号。这条不是"忘了做"，是"缺外部条件"，所以不写进版本承诺。

package/ai/START-HERE.md

@@ -30,7 +30,7 @@
 > 它的值直接从 `ai/components.json` 与目录实际内容读出来 —— **不信上面的说法，信这个**。
 
 <!-- ==== AI-INVENTORY-BEGIN ==== -->
-- 组件 **37** 个（`beta` 1 · `stable` 36）
+- 组件 **37** 个（`stable` 37）
 - `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/behaviors.json

@@ -29,7 +29,7 @@
   },
   "budget": {
     "manual": 0,
-    "gap": 1
+    "gap": 0
   },
   "matrix": {
     "dismissable": {
@@ -316,8 +316,8 @@
         "没有候选项集合"
       ],
       "dropdown": [
-        "gap",
-        "APG 菜单支持'按首字母跳到菜单项'（可选增强），本库未实现；要做就走 typeahead 核"
+        "core",
+        "0.15.0 收编：APG Menu 的 `(Optional)` 项「按字符跳项」走 typeahead 核。删掉自写的匹配逻辑（本来也没有），接线时补了两件事：① 匹配前剥掉开头的装饰符号（带勾选的项文本是「✓ 按日期」，不剥就永远匹配不到，同 table 列头 ↕ 那类问题）；② open/close 都清缓冲。判据 dropdown-check ⑦（首字母）/ ⑦b（同字母循环）/ ⑦c（前缀累积）/ ⑦d（不匹配不动）/ ⑦e（关着时打字不开菜单）/ ⑦f（装饰符号不进匹配文本），五条各有独立突变体。"
       ],
       "flip": [
         "n/a",

package/ai/components.json

@@ -1,21 +1,20 @@
 {
   "schemaVersion": "1.0.0",
   "generatedBy": "05-audit/gen-ai-contract.py",
-  "libraryVersion": "0.14.0",
+  "libraryVersion": "0.16.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 36 / beta 1**（本行由生成器算出，不要手改）。",
-    "$strictImpact": "⚠️ strict 档位只放行 stable ⇒ 1 个组件在 strict 下不可用：dropdown。放宽 strict 会让「未收编的手写行为」进入生产路径。（本行由生成器算出，不要手改）"
+    "$whyFourth": "🔴 为什么第四条判据不能省：用前三条时多数组件会**全是 stable** ⇒ ladder 没有任何鉴别力（对标 Primer 六档阶梯，每档都有硬判据）。补上「行为欠账」这一条后：**stable 37 / beta 0**（本行由生成器算出，不要手改）。全库达标时 ladder 靠**正向控制**证明还有鉴别力（maturity-gate ③：塞一条合成债务必须降 beta），不是靠\"总得留几个 beta\"。",
+    "$strictImpact": "✅ strict 档位放行全部 37 个组件 —— 没有任何组件带着未收编的手写行为或未做的行为（本行由生成器算出，不要手改）"
   },
   "summary": {
     "total": 37,
     "byMaturity": {
-      "stable": 36,
-      "beta": 1
+      "stable": 37
     },
     "byTier": {
       "primitive": 15,
@@ -399,14 +398,12 @@
       "tier": "pattern",
       "purpose": "下拉菜单",
       "rootClass": "dd",
-      "maturity": "beta",
+      "maturity": "stable",
       "maturityReasons": {
         "hasDemo": true,
         "hasDedicatedGate": true,
         "statesOnDomAttributes": true,
-        "behaviorDebt": [
-          "typeahead:gap"
-        ]
+        "behaviorDebt": []
       },
       "gates": [
         "dropdown-check.js"

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-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;}}
+: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;}[data-cq] {container-type:inline-size;}@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/card/card.css

@@ -1 +1 @@
-.card {position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-md);transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}.card__media {aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;background:var(--surface-sunken);}.card__media img {width:100%;height:100%;object-fit:cover;display:block;}.card__media + .card__body {border-radius:0;}.card__body {padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);}.card__title {margin:0;font-size:var(--fs-md);font-weight:500;line-height:var(--lh-tight);color:var(--text-primary);}.card__desc {margin:0;font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-base);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.card__footer {padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border-decor);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--text-tertiary);}.card--flat {border-color:transparent;background:var(--surface);}.card--elevated {border-color:transparent;box-shadow:var(--shadow-1);}.card--interactive {cursor:pointer;}@media (hover:hover) and (pointer:fine) {.card--interactive:hover {transform:translateY(calc(-1 * var(--lift-md)));box-shadow:var(--shadow-2);}}.card--interactive:active {transform:translateY(0);box-shadow:var(--shadow-1);}.card--linked {position:relative;}.card__link {color:inherit;text-decoration:none;}.card__link::after {content:"";position:absolute;inset:0;border-radius:var(--r-md);z-index:var(--z-base);}.card__body :is(button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="switch"], [tabindex]):not(.card__link) {position:relative;z-index:var(--z-raised);}.card--linked:focus-within {outline:2px solid var(--accent);outline-offset:2px;}.card__link:focus-visible {outline:none;}.card--selected {box-shadow:inset 0 0 0 2px var(--accent);}.card--compact .card__body {padding:var(--sp-4);gap:var(--sp-1);}.card--compact .card__title {font-size:var(--fs-base);}.card--row {flex-direction:row;align-items:stretch;}.card--row .card__media {flex:none;width:160px;aspect-ratio:auto;border-radius:calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);}@media (max-width:560px) {.card--row {flex-direction:column;}.card--row .card__media {width:100%;aspect-ratio:16 / 9;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;}}@media (prefers-reduced-motion:reduce) {@media (hover:hover) and (pointer:fine) {.card--interactive:hover, .card--interactive:active {transform:none;}}}
+.card {position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-md);transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}.card__media {aspect-ratio:16 / 9;overflow:hidden;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;background:var(--surface-sunken);}.card__media img {width:100%;height:100%;object-fit:cover;display:block;}.card__media + .card__body {border-radius:0;}.card__body {padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);}.card__title {margin:0;font-size:var(--fs-md);font-weight:500;line-height:var(--lh-tight);color:var(--text-primary);}.card__desc {margin:0;font-size:var(--fs-sm);color:var(--text-secondary);line-height:var(--lh-base);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}.card__footer {padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--border-decor);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--text-tertiary);}.card--flat {border-color:transparent;background:var(--surface);}.card--elevated {border-color:transparent;box-shadow:var(--shadow-1);}.card--interactive {cursor:pointer;}@media (hover:hover) and (pointer:fine) {.card--interactive:hover {transform:translateY(calc(-1 * var(--lift-md)));box-shadow:var(--shadow-2);}}.card--interactive:active {transform:translateY(0);box-shadow:var(--shadow-1);}.card--linked {position:relative;}.card__link {color:inherit;text-decoration:none;}.card__link::after {content:"";position:absolute;inset:0;border-radius:var(--r-md);z-index:var(--z-base);}.card__body :is(button, a, input, select, textarea, [role="button"], [role="checkbox"], [role="switch"], [tabindex]):not(.card__link) {position:relative;z-index:var(--z-raised);}.card--linked:focus-within {outline:2px solid var(--accent);outline-offset:2px;}.card__link:focus-visible {outline:none;}.card--selected {box-shadow:inset 0 0 0 2px var(--accent);}.card--compact .card__body {padding:var(--sp-4);gap:var(--sp-1);}.card--compact .card__title {font-size:var(--fs-base);}.card--row {flex-direction:row;align-items:stretch;}.card--row .card__media {flex:none;width:160px;aspect-ratio:auto;border-radius:calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);}@media (max-width:560px) {.card--row {flex-direction:column;}.card--row .card__media {width:100%;aspect-ratio:16 / 9;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;}}@container (max-width:35rem) {.card--row {flex-direction:column;}.card--row .card__media {width:100%;aspect-ratio:16 / 9;border-radius:calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0;}}@container (min-width:35rem) {.card--row {flex-direction:row;align-items:stretch;}.card--row .card__media {flex:none;width:160px;aspect-ratio:auto;border-radius:calc(var(--r-md) - 1px) 0 0 calc(var(--r-md) - 1px);}}@media (prefers-reduced-motion:reduce) {@media (hover:hover) and (pointer:fine) {.card--interactive:hover, .card--interactive:active {transform:none;}}}

package/dist/03-patterns/dropdown/dropdown.js

@@ -196,6 +196,68 @@ if (k >= 0) shared.stack.splice(k, 1);
 };
 };
 
+var flTypeahead = function (opts) {
+var opt = opts || {};
+var items = opt.items || function () { return []; };
+var textOf = opt.textOf || function (x) { return String((x && x.textContent) || ''); };
+var usable = opt.usable || function () { return true; };
+var timeout = opt.timeout || 500;
+var onHit = opt.onHit || function () {};
+var buf = '';
+var timer = null;
+var last = -1;
+
+function stop() {
+if (timer) { clearTimeout(timer); timer = null; }
+}
+
+function repeated(s) {
+if (s.length < 2) return false;
+for (var i = 1; i < s.length; i++) {
+if (s.charAt(i) !== s.charAt(0)) return false;
+}
+return true;
+}
+
+function find(needle) {
+var l = items() || [];
+var n = l.length;
+if (!n) return -1;
+for (var k = 0; k < n; k++) {
+var i = (last + 1 + k) % n;
+if (!usable(l[i])) continue;
+if (textOf(l[i]).toLowerCase().indexOf(needle) === 0) return i;
+}
+return -1;
+}
+
+function type(ch) {
+if (!ch) return -1;
+buf += String(ch).toLowerCase();
+stop();
+timer = setTimeout(clear, timeout);
+var needle = repeated(buf) ? buf.charAt(0) : buf;
+var i = find(needle);
+if (i >= 0) {
+last = i;
+onHit(i, (items() || [])[i], buf);
+}
+return i;
+}
+
+function clear() {
+buf = '';
+stop();
+}
+
+return {
+type: type,
+clear: clear,
+buffer: function () { return buf; },
+destroy: function () { stop(); },
+};
+};
+
 function closest(el, sel) {
 if (!el) return null;
 if (el.closest) return el.closest(sel);
@@ -269,6 +331,8 @@ btn.setAttribute('aria-expanded', 'true');
 active = -1;
 
 focusAt(0);
+
+typeahead.clear();
 flEmit(root, 'fl-open', null);
 if (opt.onOpen) opt.onOpen();
 }
@@ -278,6 +342,7 @@ function close(restoreFocus) {
 menu.hidden = true;
 btn.setAttribute('aria-expanded', 'false');
 active = -1;
+typeahead.clear();
 if (restoreFocus !== false) fr.restore();
 flEmit(root, 'fl-close', null);
 if (opt.onClose) opt.onClose();
@@ -307,6 +372,16 @@ tabindex: false,
 onMove: function (i) { focusAt(i); },
 });
 
+var typeahead = flTypeahead({
+items: function () { return itemsOf(menu); },
+textOf: function (el) {
+var s = String((el && el.textContent) || '').replace(/\s+/g, ' ').trim();
+return s.replace(/^[^0-9A-Za-z\u4e00-\u9fa5]+/, '');
+},
+usable: function (el) { return el.getAttribute('aria-disabled') !== 'true'; },
+onHit: function (i) { focusAt(i); },
+});
+
 if (!menu.id) menu.id = 'dd-menu-' + (new Date()).getTime();
 btn.setAttribute('aria-haspopup', 'true');
 btn.setAttribute('aria-expanded', 'false');
@@ -341,6 +416,13 @@ return;
 
 if (closest(e.target, '[data-dd-menu]') !== menu) return;
 
+if (k.length === 1 && k !== ' ' &&
+!e.ctrlKey && !e.metaKey && !e.altKey && !e.isComposing) {
+e.preventDefault();
+typeahead.type(k);
+return;
+}
+
 if (k === 'Tab') { close(false); return; }
 
 if (k === 'Enter' || k === ' ' || k === 'Spacebar') {
@@ -360,7 +442,10 @@ onDismiss: function (e, reason) { close(reason === 'esc'); },
 return {
 open: open,
 close: close,
-destroy: function () { roving.destroy(); dismiss.destroy(); menu.hidden = true; },
+destroy: function () {
+roving.destroy(); dismiss.destroy(); typeahead.destroy();
+menu.hidden = true;
+},
 };
 }
 

package/dist/04-recipes/analysis-report/analysis-report.css

@@ -1 +1 @@
-.report {max-width:calc(var(--measure-page) + 16rem);}.report__kicker {margin:0 0 var(--sp-2);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);}.report__meta {display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--border-decor);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__meta b {font-weight:500;color:var(--text-secondary);}.report__body {display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-6);margin-top:var(--sp-6);}@media (min-width:64rem) {.report__body {grid-template-columns:minmax(0, 1fr) 15rem;gap:var(--sp-7);}.report__aside {position:sticky;top:var(--sp-4);align-self:start;max-height:calc(100vh - var(--sp-8));overflow:auto;}}.report__main > section + section {margin-top:var(--sp-6);}.report__main h2 {margin-top:0;}.report__main p {margin:var(--sp-3) 0;}.report__main ul, .report__main ol {margin:var(--sp-3) 0;padding-inline-start:var(--sp-5);}.report__main li + li {margin-top:var(--sp-1);}.kf {margin:var(--sp-4) 0;padding:var(--sp-4);background:var(--info-bg);border-radius:var(--r-md);}.kf__title {margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);}.kf ol {margin:0;padding-inline-start:var(--sp-5);}.kf li {margin-top:var(--sp-2);}.kf strong {color:var(--text-primary);}.report__quote {margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-inline-start:3px solid var(--border-decor);color:var(--text-secondary);font-style:italic;}.report__quote cite {display:block;margin-top:var(--sp-2);font-size:var(--fs-xs);font-style:normal;color:var(--text-tertiary);}.report__code {margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);background:var(--surface-sunken);border:1px solid var(--border-decor);border-radius:var(--r-md);overflow-x:auto;font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-loose);color:var(--text-secondary);white-space:pre;}.report__aside .card + .card {margin-top:var(--sp-3);}.report__aside .card__title {font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);}.report__aside dl {margin:var(--sp-2) 0 0;font-size:var(--fs-sm);}.report__aside dt {margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__aside dd {margin:0;color:var(--text-primary);}.report__aside p {margin:0;font-size:var(--fs-sm);color:var(--text-secondary);}.report__fig {margin:var(--sp-5) 0;padding:var(--sp-3);background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-md);overflow-x:auto;}.report__fig figcaption {margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__foot {margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid var(--border-decor);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__foot ol {padding-inline-start:var(--sp-5);}.report__foot li + li {margin-top:var(--sp-1);}@media print {.report__aside {position:static;max-height:none;overflow:visible;}.report__body {grid-template-columns:1fr;}}
+.report {max-width:calc(var(--measure-page) + 16rem);}.report__kicker {margin:0 0 var(--sp-2);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);}.report__meta {display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:var(--sp-4) 0 0;padding-top:var(--sp-3);border-top:1px solid var(--border-decor);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__meta b {font-weight:500;color:var(--text-secondary);}.report__body {display:grid;grid-template-columns:minmax(0, 1fr);gap:var(--sp-6);margin-top:var(--sp-6);}@media (min-width:64rem) {.report__body {grid-template-columns:minmax(0, 1fr) 15rem;gap:var(--sp-7);}.report__aside {position:sticky;top:var(--sp-4);align-self:start;max-height:calc(100vh - var(--sp-8));overflow:auto;}}@container (max-width:63.99rem) {.report__body {grid-template-columns:minmax(0, 1fr);gap:var(--sp-6);}.report__aside {position:static;max-height:none;overflow:visible;}}@container (min-width:64rem) {.report__body {grid-template-columns:minmax(0, 1fr) 15rem;gap:var(--sp-7);}.report__aside {position:sticky;top:var(--sp-4);align-self:start;max-height:calc(100vh - var(--sp-8));overflow:auto;}}.report__main > section + section {margin-top:var(--sp-6);}.report__main h2 {margin-top:0;}.report__main p {margin:var(--sp-3) 0;}.report__main ul, .report__main ol {margin:var(--sp-3) 0;padding-inline-start:var(--sp-5);}.report__main li + li {margin-top:var(--sp-1);}.kf {margin:var(--sp-4) 0;padding:var(--sp-4);background:var(--info-bg);border-radius:var(--r-md);}.kf__title {margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);}.kf ol {margin:0;padding-inline-start:var(--sp-5);}.kf li {margin-top:var(--sp-2);}.kf strong {color:var(--text-primary);}.report__quote {margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);border-inline-start:3px solid var(--border-decor);color:var(--text-secondary);font-style:italic;}.report__quote cite {display:block;margin-top:var(--sp-2);font-size:var(--fs-xs);font-style:normal;color:var(--text-tertiary);}.report__code {margin:var(--sp-4) 0;padding:var(--sp-3) var(--sp-4);background:var(--surface-sunken);border:1px solid var(--border-decor);border-radius:var(--r-md);overflow-x:auto;font-family:var(--mono);font-size:var(--fs-xs);line-height:var(--lh-loose);color:var(--text-secondary);white-space:pre;}.report__aside .card + .card {margin-top:var(--sp-3);}.report__aside .card__title {font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;color:var(--text-tertiary);}.report__aside dl {margin:var(--sp-2) 0 0;font-size:var(--fs-sm);}.report__aside dt {margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__aside dd {margin:0;color:var(--text-primary);}.report__aside p {margin:0;font-size:var(--fs-sm);color:var(--text-secondary);}.report__fig {margin:var(--sp-5) 0;padding:var(--sp-3);background:var(--surface);border:1px solid var(--border-decor);border-radius:var(--r-md);overflow-x:auto;}.report__fig figcaption {margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__foot {margin-top:var(--sp-8);padding-top:var(--sp-4);border-top:1px solid var(--border-decor);font-size:var(--fs-xs);color:var(--text-tertiary);}.report__foot ol {padding-inline-start:var(--sp-5);}.report__foot li + li {margin-top:var(--sp-1);}@media print {.report__aside {position:static;max-height:none;overflow:visible;}.report__body {grid-template-columns:1fr;}}

package/dist/COSTS.md

@@ -9,7 +9,7 @@
 
 实测两笔账，一笔不省：
 
-- `tokens` 源码版 gzip **19.6 KB** → min 版 **2.7 KB**（省 86%）——
+- `tokens` 源码版 gzip **20.4 KB** → min 版 **2.7 KB**（省 87%）——
   源码多的那部分**全是注释**（全库 CSS 有 67% 是注释，字节口径），而注释是给维护者的，不是给浏览器的。
 - tokens 的 min 版 2.7 KB **比任何一个组件自己都贵** ⇒
   "只用一个组件"的真实起步价就是它。不公开这张表，等于让人盲买。
@@ -18,40 +18,40 @@
 
 | 档 | 组件 | tokens（必付） | CSS | JS | **合计** | 源码版合计 | 差 |
 |---|---|---:|---:|---:|---:|---:|---:|
-| 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.2 KB | −20.1 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** | 26.9 KB | −21.2 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.2 KB | −22.2 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.4 KB | **5.9 KB** | 26.1 KB | −20.2 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.6 KB** | 30.7 KB | −24.1 KB |
-| pattern | `overlay` | 2.7 KB | 1.1 KB | 3.3 KB | **7.1 KB** | 34.5 KB | −27.4 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.0 KB | −20.9 KB |
-| pattern | `tree` | 2.7 KB | 0.6 KB | 2.9 KB | **6.2 KB** | 27.8 KB | −21.6 KB |
+| primitive | `badge` | 2.7 KB | 0.5 KB | — | **3.2 KB** | 23.1 KB | −19.9 KB |
+| primitive | `button` | 2.7 KB | 1.0 KB | — | **3.7 KB** | 26.8 KB | −23.1 KB |
+| primitive | `card` | 2.7 KB | 0.9 KB | — | **3.7 KB** | 24.5 KB | −20.8 KB |
+| primitive | `choice` | 2.7 KB | 1.1 KB | — | **3.8 KB** | 25.8 KB | −22.0 KB |
+| primitive | `combobox` | 2.7 KB | 1.0 KB | 5.4 KB | **9.1 KB** | 29.9 KB | −20.9 KB |
+| primitive | `date-range` | 2.7 KB | 0.8 KB | 2.5 KB | **6.1 KB** | 26.9 KB | −20.8 KB |
+| primitive | `delta` | 2.7 KB | 0.3 KB | — | **3.0 KB** | 23.1 KB | −20.2 KB |
+| primitive | `input` | 2.7 KB | 1.0 KB | — | **3.7 KB** | 24.0 KB | −20.3 KB |
+| primitive | `metric` | 2.7 KB | 0.5 KB | — | **3.2 KB** | 23.6 KB | −20.4 KB |
+| primitive | `popover` | 2.7 KB | 0.8 KB | 2.2 KB | **5.7 KB** | 27.7 KB | −22.0 KB |
+| primitive | `progress` | 2.7 KB | 0.7 KB | — | **3.4 KB** | 23.3 KB | −19.9 KB |
+| primitive | `select` | 2.7 KB | 0.8 KB | 3.5 KB | **7.1 KB** | 30.0 KB | −22.9 KB |
+| primitive | `separator` | 2.7 KB | 0.2 KB | — | **3.0 KB** | 21.7 KB | −18.7 KB |
+| primitive | `skeleton` | 2.7 KB | 0.5 KB | — | **3.2 KB** | 21.8 KB | −18.6 KB |
+| primitive | `switch` | 2.7 KB | 0.8 KB | — | **3.5 KB** | 27.5 KB | −24.1 KB |
+| pattern | `accordion` | 2.7 KB | 1.3 KB | 1.8 KB | **5.8 KB** | 34.9 KB | −29.1 KB |
+| pattern | `content` | 2.7 KB | 1.0 KB | — | **3.7 KB** | 25.0 KB | −21.2 KB |
+| pattern | `drawer` | 2.7 KB | 0.8 KB | 2.4 KB | **5.9 KB** | 26.9 KB | −21.0 KB |
+| pattern | `dropdown` | 2.7 KB | 0.8 KB | 3.4 KB | **6.9 KB** | 29.8 KB | −22.9 KB |
+| pattern | `form-validation` | 2.7 KB | 0.8 KB | — | **3.5 KB** | 24.9 KB | −21.4 KB |
+| pattern | `list` | 2.7 KB | 0.6 KB | — | **3.3 KB** | 22.8 KB | −19.5 KB |
+| pattern | `nav` | 2.7 KB | 1.2 KB | 2.6 KB | **6.6 KB** | 31.5 KB | −24.9 KB |
+| pattern | `overlay` | 2.7 KB | 1.1 KB | 3.3 KB | **7.1 KB** | 35.3 KB | −28.1 KB |
+| pattern | `pagination` | 2.7 KB | 0.8 KB | 2.6 KB | **6.1 KB** | 30.9 KB | −24.9 KB |
+| pattern | `reveal` | 2.7 KB | 0.3 KB | 1.2 KB | **4.2 KB** | 24.9 KB | −20.7 KB |
+| pattern | `states` | 2.7 KB | 0.8 KB | — | **3.6 KB** | 24.4 KB | −20.9 KB |
+| pattern | `tabs` | 2.7 KB | 0.7 KB | 2.0 KB | **5.4 KB** | 27.6 KB | −22.2 KB |
+| pattern | `tooltip` | 2.7 KB | 0.5 KB | 1.9 KB | **5.1 KB** | 26.8 KB | −21.7 KB |
+| pattern | `tree` | 2.7 KB | 0.6 KB | 2.9 KB | **6.3 KB** | 28.6 KB | −22.3 KB |
 
 ## 三、全库
 
-- 全部组件都用上（min，含 tokens 一份）：**62.1 KB**
-- 源码版（带注释）全库 gzip：304.3 KB
+- 全部组件都用上（min，含 tokens 一份）：**62.7 KB**
+- 源码版（带注释）全库 gzip：307.3 KB
 
 > ⚠️ 源码版那个数字**不是**要付的钱：它包含我们的注释（全库 CSS 有 67% 是注释，字节口径）。
 > 它的用途只有一个 —— 让人看清"dist 到底省了多少"。

package/docs/A11Y-MANUAL-PROTOCOL.md

@@ -82,10 +82,10 @@ python3 -m http.server 8000 --bind 127.0.0.1
 
 > **为什么后三行是补的**：`accordion` / `drawer` / `dropdown` 当时都是 beta 组件，
 > 而它们升 stable 的判据之一就是「行为零欠账」——人工读屏是这件事**唯一的用户侧证据**。
-> （0.14.0 把 drawer / overlay 的 dismissable 收编进核之后，两者已升 stable；
-> accordion 的 `roving:gap` 经核对 APG 原文后判定为**判据写错**（APG Accordion 没有
-> 方向键），已改为 `n/a`。`ai/components.json` 当前记 **1 个 beta**：dropdown
-> —— 它的 `typeahead:gap` 是真的：APG Menu 把"按字符跳项"列为 Optional，本库没做。）
+> （0.14.0 把 drawer / overlay 的 dismissable 收编进核；accordion 的 `roving:gap`
+> 经核对 APG 原文后判定为**判据写错**（APG Accordion 没有方向键），改为 `n/a`；
+> 0.15.0 补上 dropdown 的 typeahead。`ai/components.json` 当前 **37 个全 stable**，
+> 阶梯靠正向控制证明仍能区分有债的组件。）
 > 只覆盖 `overlay` 一个浮层，等于对其他浮层的真实表现没有任何记录。
 
 **本轮跑出来并已修掉的一条真缺陷**：`table` 的列头按钮被念成「公司 · `↕` · 按钮」——

package/docs/ACCESSIBILITY.md

@@ -5,7 +5,7 @@
 
 | 项目 | 值 |
 |---|---|
-| 声明适用版本 | agentcss `0.14.0` |
+| 声明适用版本 | agentcss `0.16.0` |
 | 声明日期 | 2026-10-30 |
 | 复核节奏 | 每次发版前重跑（`npm run gate` 内含全部证据） |
 | 范围 | 本库交付的 CSS / JS、全部 `demo.html`（组件页 + 图表页 + 组合页）、以及文档站生成的页面 |

package/docs/CONVENTIONS.md

@@ -207,7 +207,34 @@
   `0` 与「四舍五入到 0」（如精度 1 下的 `0.0004`）都不加 `+` / `−`
   —— 「+0.0%」等于把持平念成上涨。会计列与市场列是同一条规则。
 
-## 十一 · 每条规则由什么挡住
+## 十一 · 断点看槽宽，不看视口
+
+`@media` 回答的是"**屏幕**多宽"，而组件关心的是"**我**多宽"。这两件事在
+侧栏、分屏、嵌入卡片里不等，而且 demo 页永远暴露不出来。
+
+```html
+<div class="rail" data-cq>      <!-- 这一层就是组件眼里的"窗口" -->
+  <div class="card card--row">…</div>
+</div>
+```
+
+- **`data-cq` 是显式选择**：加了它，里面的组件按槽宽切换；不加，行为与本版之前**完全一致**
+  （实测：没有容器祖先时 `@container` 不会退回视口，整条不生效）。
+- **不自动给组件加 `container-type`**：它会带上 `contain: layout`，
+  让元素变成 `position: fixed` 后代的包含块 —— 抽屉、全屏浮层会被关进那个盒子。
+  所以 `data-cq` 不许加在承载抽屉/全屏浮层的祖先上。
+- **两个方向都要写**：`@container (max-width)` 只能"变窄"，
+  无法撤销一条已经生效的 `@media`（不匹配不会撤销任何规则）。
+  要表达"标记过的槽以槽为准"，`min-width` 那一条也得写。
+- **基础样式不许住进 `@container`**：老引擎（Chromium 97）丢弃整块，
+  写进去等于那些浏览器上组件直接没有样式。判据会把 `@container` 剥掉再跑一遍，
+  布局必须不塌。
+- 不需要 `@supports at-rule(@container)`：不支持时整块被丢弃，检测只会带来双写。
+
+挡住它的：`container-query-check.js`（10 条：两组件 × 槽窄/槽宽/未标记 ×
+两个方向 + 剥块降级）。
+
+## 十二 · 每条规则由什么挡住
 
 规则只有落到判据上才会被遵守。对应关系如下（文件都在 `05-audit/`）：
 
@@ -225,6 +252,7 @@
 | 键盘可达（Tab 顺序、Esc 关闭） | `keyboard-nav.js` |
 | 减少动效策略双向一致 | `motion.py --reduced-audit` |
 | 逻辑属性全覆盖 | `rtl-check.js` |
+| 断点看槽宽（`data-cq`）、未标记页面不变、剥掉 `@container` 不塌 | `container-query-check.js` |
 | `@layer` 计数与 `!important` 分类 | `cascade-layer-gate.py` |
 | 触控目标 44px | `a11y.py`（静态） + 行为脚本（运行时） |
 | 页面骨架只有一份（改令牌能牵动全部页面） | `skeleton-lever-check.js` |

package/index.html

@@ -94,7 +94,7 @@ li a:active { background: var(--surface-sunken); }
   </p>
 </main>
 <footer class="wrap">
-  <p class="note">0.14.0 · 零第三方运行时依赖</p>
+  <p class="note">0.16.0 · 零第三方运行时依赖</p>
 </footer>
 </body>
 </html>

package/package.json

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