agentcss 0.0.0-stage → 0.11.2

package/03-patterns/tooltip/tooltip.js

@@ -0,0 +1,288 @@
+/**
+ * tooltip.js — 文字提示（B3 /
+ *
+ * ⭐ 三条硬要求：
+ *   ① **键盘可达**：focus 时也要出（触屏没有 hover）
+ *   ② **Esc 能关**（WCAG 1.4.13 Content on Hover or Focus）
+ *   ③ ⛔ **不承载必要信息** —— 触屏没有 hover，只放 tooltip 等于不存在
+ *
+ * 无依赖 · ES5 · 用法：
+ *   Tooltip.attach(el, '文字')            // 默认 bottom
+ *   Tooltip.attach(el, '文字', 'top')     // 指定方位
+ *   Tooltip.attach(el, '文字', 'start')   // 内联起点侧（RTL 下自动换到右边）
+ *   Tooltip.attach(el, '文字', 'left')    // 物理左（RTL 下**仍是物理左**）
+ *
+ * 🔴 0.4.2 修了两个实测出来的既有缺陷（都不报错，只是"看着不对"）：
+ *   ① `place='left'|'right'` 拼出的 `tooltip--left` / `--right` **CSS 里没有**
+ *      （只有 --inset-inline-start / -end）⇒ 这两个方位**没有小三角**。
+ *      ⇒ 现在按书写方向换算类名：物理左在 LTR 是内联起点、RTL 是内联终点。
+ *   ② 定位前**先入 DOM 再量**：游离元素 getBoundingClientRect() 全是 0
+ *      ⇒ top 方位与锚点完全重叠（实测 tip.top == anchor.top），左右上下偏半身。
+ */
+(function (global) {
+
+/* ==== BEHAVIOR INJECT BEGIN: focus-return ==== */
+var flFocusReturn = function (opts) {
+  var opt = opts || {};
+  var saved = null;
+
+  return {
+    save: function () {
+      var a = document.activeElement;
+      saved = (a && a !== document.body && a.focus) ? a : null;
+      return saved;
+    },
+
+    restore: function () {
+      var target = saved;
+      /* ⚠️ 见文档 ②：不判 contains 的话，元素被移除后 focus() 不报错
+         但焦点不动 ⇒ 用户以为还回去了，其实掉在 body 上。 */
+      if (!target || !document.contains(target)) target = opt.fallback || null;
+      if (!target) { saved = null; return false; }
+      try {
+        target.focus();
+      } catch (e) {
+        saved = null;
+        return false;
+      }
+      var ok = document.activeElement === target;
+      saved = null;   /* 见文档 ③ */
+      return ok;
+    },
+
+    target: function () { return saved; },
+    clear: function () { saved = null; },
+  };
+};
+/* ==== BEHAVIOR INJECT END: focus-return ==== */
+/* ==== BEHAVIOR INJECT BEGIN: dismissable ==== */
+var flDismissable = function (opts) {
+  var opt = opts || {};
+  var escOn = opt.escOn || [];
+  var inside = opt.inside || [];
+  var when = opt.when || function () { return true; };
+  var onDismiss = opt.onDismiss || function () {};
+
+  var shared = window.__flDismiss || (window.__flDismiss = { stack: [], bound: false });
+
+  function isInside(node) {
+    if (!node) return false;
+    for (var i = 0; i < inside.length; i++) {
+      var el = inside[i];
+      if (!el || !el.contains) continue;
+      if (el === node || el.contains(node)) return true;
+    }
+    return false;
+  }
+
+  function onKey(e) {
+    if (!when()) return;
+    var k = e.key;
+    if (k !== 'Escape' && k !== 'Esc' && e.keyCode !== 27) return;
+    /* 🔴 为什么 onDismiss 在前、preventDefault/stopPropagation 在后
+       （0.8.8 改）：**分级 Esc** 需要核让组件有机会说"这次我没关"。
+       combobox 的 Esc 是三级的：
+         ① 列表开着 → 关列表
+         ② 列表关了、输入有字 → 清空输入
+         ③ 都没了 → 什么都不做（此时**不该**阻止默认行为，
+            让 Esc 能继续传给外层浮层）
+       而原实现是「无条件 preventDefault + stopPropagation，再调 onDismiss」
+       ⇒ 组件根本无法表达"这次我没关"。
+       ⇒ 改成：先问onDismiss，它返回 false 就**不干预**默认行为。
+       ⚠️ 顺序安全性：stopPropagation 只需在**本次监听器执行期间**被调用即可
+          阻止冒泡到外层，放在 onDismiss 之后仍然有效。
+    */
+    var closed = onDismiss(e, 'esc');
+    if (closed === false) return;
+    if (e.preventDefault) e.preventDefault();
+    if (e.stopPropagation) e.stopPropagation();
+  }
+
+  function onDocClick(e) {
+    var top = null;
+    for (var i = shared.stack.length - 1; i >= 0; i--) {
+      if (shared.stack[i].when()) { top = shared.stack[i]; break; }
+    }
+    if (!top || top.isInside(e.target)) return;
+    top.onDismiss(e, 'outside');
+  }
+
+  var rec = { when: when, isInside: isInside, onDismiss: onDismiss };
+
+  for (var j = 0; j < escOn.length; j++) {
+    if (escOn[j]) escOn[j].addEventListener('keydown', onKey);
+  }
+  shared.stack.push(rec);
+  if (!shared.bound) {
+    shared.bound = true;
+    document.addEventListener('click', onDocClick, true);
+  }
+
+  return {
+    destroy: function () {
+      for (var j = 0; j < escOn.length; j++) {
+        if (escOn[j]) escOn[j].removeEventListener('keydown', onKey);
+      }
+      var k = shared.stack.indexOf(rec);
+      if (k >= 0) shared.stack.splice(k, 1);
+    },
+  };
+};
+/* ==== BEHAVIOR INJECT END: dismissable ==== */
+  'use strict';
+
+  var uid = 0;
+
+  function ensureStyle() {
+    if (document.getElementById('tooltip-css')) return;
+    /* 说明：样式由页面通过 <link> 引入；这里只做"有没有"的提示，
+       避免"以为引了其实没引"的静默失效。 */
+  }
+
+  function ensureLiveRegion() {
+    var id = 'tooltip-live';
+    var r = document.getElementById(id);
+    if (r) return r;
+    r = document.createElement('div');
+    r.id = id;
+    r.setAttribute('role', 'tooltip');
+    /* ⭐ aria-live：内容变化时读屏会念出来
+       （否则键盘用户看到的提示，盲用户听不到） */
+    r.setAttribute('aria-live', 'polite');
+    r.setAttribute('aria-atomic', 'true');
+    /* 🔴 aria-label（0.8.9 补）：`role="tooltip"` 的元素**必须有可访问名**
+       —— 实测 axe 报 serious：
+         `aria-tooltip-name: ARIA tooltip nodes must have an accessible name`
+       这个 live region 里的文字是**运行时塞进去的提示内容**，
+       而在读屏用户"到达"它之前它通常是空的
+       ⇒ 光靠内容拿不到名字 ⇒ 必须显式给 aria-label。
+       label 用通用措辞，具体内容由 aria-live 负责播报。 */
+    r.setAttribute('aria-label', '组件提示');
+    r.style.cssText =
+      'position:absolute;width:1px;height:1px;padding:0;margin:-1px;' +
+      'overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0';
+    document.body.appendChild(r);
+    return r;
+  }
+
+  /* 逻辑方位 ⇒ 类名后缀。CSS 里只有 --inset-inline-start / --inset-inline-end */
+  var CLS = {
+    top: 'top', bottom: 'bottom',
+    start: 'inset-inline-start', end: 'inset-inline-end',
+  };
+
+  /**
+   * 物理方位换算成逻辑方位。
+   * 物理「左」在 LTR 里是内联起点，在 RTL 里是内联终点 ——
+   * 不换算的话，RTL 下小三角会指向气泡外侧（见 tooltip.css 的注释）。
+   */
+  function resolve(el, place) {
+    var p = place || 'bottom';
+    if (p === 'top' || p === 'bottom' || p === 'start' || p === 'end') return p;
+    if (p !== 'left' && p !== 'right') return 'bottom';
+    var rtl = getComputedStyle(el).direction === 'rtl';
+    if (p === 'left') return rtl ? 'end' : 'start';
+    return rtl ? 'start' : 'end';
+  }
+
+  /**
+   * 给元素挂一个 tooltip
+   * @param {Element} el 触发元素
+   * @param {string} text 提示文字
+   * @param {string} [place] top / bottom / start / end（默认 bottom）；
+   *                 left / right 也接受（物理方位，RTL 下按方向换算类名）
+   */
+  function attach(el, text, place) {
+    /* 焦点归位核：在 show() 之前声明，避免读代码时误以为fr 还没定义。
+       声明写在 attach 开头 ⇒ show()/hide() 用到时它一定已赋值。 */
+    var fr = flFocusReturn({ fallback: el });
+    if (!el || !text) return;
+    ensureStyle();
+
+    var pos = resolve(el, place);
+    var id = 'tt' + (++uid);
+    var tip = document.createElement('div');
+    tip.id = id;
+    tip.className = 'tooltip tooltip--' + CLS[pos];
+    tip.setAttribute('role', 'tooltip');
+    tip.textContent = text;
+
+    var live = ensureLiveRegion();
+
+    function show() {
+      /* 🔴 打开的**这一刻**先记住焦点，关闭时才能还回去。
+         必须在任何可能改变焦点的操作**之前**做（否则记到的是新元素）。 */
+      fr.save();
+      /* 🔴 定位前**必须先入 DOM**：游离元素的 getBoundingClientRect() 全是 0
+         （实测：top 方位的气泡与锚点完全重叠，就是这么来的）。
+         先挂上去、藏起来量，量完再显示。 */
+      tip.style.visibility = 'hidden';
+      tip.style.display = 'block';
+      if (!tip.parentNode) document.body.appendChild(tip);
+
+      var b = el.getBoundingClientRect();
+      var t = tip.getBoundingClientRect();
+      if (pos === 'top') {
+        tip.style.top = (b.top - t.height) + window.pageYOffset + 'px';
+        tip.style.left = (b.left + b.width / 2 - t.width / 2) + window.pageXOffset + 'px';
+      } else if (pos === 'start' || pos === 'end') {
+        var rtl = getComputedStyle(el).direction === 'rtl';
+        /* start = 气泡在锚点的内联起点侧：LTR 靠左（右缘贴锚点左缘），
+           RTL 靠右（左缘贴锚点右缘） */
+        var x = (pos === 'start')
+          ? (rtl ? b.right : b.left - t.width)
+          : (rtl ? b.left - t.width : b.right);
+        tip.style.left = x + window.pageXOffset + 'px';
+        tip.style.top = (b.top + b.height / 2 - t.height / 2) + window.pageYOffset + 'px';
+      } else {
+        tip.style.top = (b.bottom + window.pageYOffset) + 'px';
+        tip.style.left = (b.left + b.width / 2 - t.width / 2) + window.pageXOffset + 'px';
+      }
+      tip.style.visibility = '';       /* 交还给 CSS（data-state 控制显隐） */
+      tip.setAttribute('data-state', 'open');
+      live.textContent = text;
+    }
+
+    function hide() {
+      tip.removeAttribute('data-state');
+      live.textContent = '';
+    }
+
+    /* ① 键盘可达：focus 也出 */
+    el.addEventListener('focus', show);
+    el.addEventListener('blur', hide);
+
+    /* 触屏：click 也出（没有 hover 的设备唯一入口）*/
+    el.addEventListener('click', function (e) {
+      e.stopPropagation();
+      if (tip.getAttribute('data-state') === 'open') hide(); else show();
+    });
+
+    /* ② Esc 能关（WCAG 1.4.13）+ 点击外部关闭
+      🔴 0.8.6 收编到 dismissable 核（原先是手写的）：
+      手写版是 `document.addEventListener('click', hide)` ——
+      **冒泡阶段**判定"是不是外部"，于是点在浮层**内部**也会关掉气泡
+      （点击应该能选中提示里的文字）。核把判定挂在 **document 捕获阶段**，
+      并且把触发元素算进 `inside`，解决"点触发器刚打开就被关"的老坑。
+      核同时负责"一次 Esc 只关最内层"（Esc 挂在元素上冒泡，不挂 document 捕获）。
+      ⚠️ Esc 关闭后的焦点归位走 focus-return 核，不再手写 `el.focus()`：
+         手写版在触发元素已被移除时会focus 一个不存在的元素。 */
+    var dismiss = flDismissable({
+      escOn: [el],
+      inside: [el, tip],
+      when: function () { return tip.getAttribute('data-state') === 'open'; },
+      onDismiss: function (ev, reason) {
+        hide();
+        if (reason === 'esc') fr.restore();
+      }
+    });
+
+    /* ③ 关联：aria-describedby（不是 aria-label ——
+       label 是名字，describedby 是补充说明，语义不同）*/
+    var cur = el.getAttribute('aria-describedby');
+    el.setAttribute('aria-describedby', cur ? (cur + ' ' + id) : id);
+    el.setAttribute('data-tooltip', text);
+  }
+
+  global.Tooltip = { attach: attach };
+})(window);

package/03-patterns/tree/README.md

@@ -0,0 +1,94 @@
+# tree · 树形视图
+
+依据 **APG（ARIA Authoring Practices）Tree View** 模式。
+
+## ⭐ 树是键盘契约最严的组件（APG 列了 12 条）
+
+| 键 | 行为 |
+|---|---|
+| `↑` `↓` | 移动焦点 |
+| `←` `→` | 收起 / 展开（并移动焦点）|
+| `Home` / `End` | 跳首 / 末 |
+| `*` | 展开当前层全部同级 |
+| `Enter` | 激活 |
+| `Space` | 选中 |
+| `a`–`z` | 首字母跳转 |
+
+## 🔴 roving tabindex —— 整棵树只占一个 Tab 位
+
+```css
+/* 只有"当前节点" tabindex="0"，其余 -1 */
+```
+
+**为什么**：若每个节点都 `tabindex="0"`，**Tab 30 次才能穿过一棵树**。
+
+⚠️ 那个 `"0"` **必须跟着焦点走**。只在初始化时设一次是最常见的 bug ——
+用户走到第 3 层后，按 Shift+Tab 回退会回到第 1 个节点。
+
+实现走共享微行为核 `01-tokens/behavior/roving.js`，首字母跳转接`typeahead` 核
+—— 不是各组件各写一遍游走逻辑。
+
+## 结构
+
+```html
+<ul class="tree" role="tree" aria-label="目录">
+  <li class="tree__item" role="treeitem" aria-expanded="true" tabindex="0">
+    <span class="tree__node">
+      <span class="tree__marker" aria-hidden="true"></span>
+      <span class="tree__label">…</span>
+      <span class="tree__count">12</span>
+    </span>
+    <ul role="group">
+      <li class="tree__item" role="treeitem" tabindex="-1">…</li>
+    </ul>
+  </li>
+</ul>
+```
+
+| 部件 | 说明 |
+|---|---|
+| `.tree` | 根，`role="tree"` |
+| `.tree__item` | 节点，`role="treeitem"` + `aria-expanded` |
+| `.tree__node` | 节点内层（marker + label + count）|
+| `.tree__marker` | 展开/收起标记位（**符号由 CSS `::before` 生成**，不是文本）|
+| `.tree__label` | 文字 |
+| `.tree__count` | 计数徽标 |
+| `<ul role="group">` | 子层 |
+
+### 标记符号跟着 `aria-expanded` 走
+
+```css
+.tree__item[aria-expanded="true"] > .tree__node .tree__marker::before {
+  content: "\25BC";       /* ▼ */
+}
+/* 收起是 ▸，叶子是 · （表示"这里没有子节点"）*/
+```
+
+符号是 **CSS 生成的，不是塞进 HTML 的文本** ⇒ 状态一变，符号自动跟着变，
+不需要 JS 去同步两处。`.tree__marker` 本身固定占 `1em` 宽并居中，
+切换时不会引起文字抖动。
+
+## 启用
+
+```js
+const t = Tree.create(元素, { label: '目录' });
+```
+
+`create()` 会自己补齐 `role="tree"` 与 `aria-label`（**只在没写时**补，
+不覆盖你已有的）。
+
+## 缩进用 padding，不是 margin
+
+```css
+.tree ul { padding: 0; }   /* 嵌套层级靠 padding 体现 */
+```
+
+用 margin 的话，嵌套结构在视觉上"飘"着，层级读不出来。
+
+## 成熟度：stable（无行为债）
+
+`ai/components.json` 里 `tree` 的 `behaviorDebt` 为空。
+
+## 门禁
+
+`05-audit/tree-check.js`

package/03-patterns/tree/demo.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" href="data:,">
+<title>tree · 树形视图 · frontend-lib</title>
+<link rel="stylesheet" href="../../01-tokens/tokens.css">
+<link rel="stylesheet" href="../../01-tokens/typography.css">
+<link rel="stylesheet" href="../../01-tokens/focus-ring.css">
+<link rel="stylesheet" href="../../01-tokens/page.css">
+<link rel="stylesheet" href="tree.css">
+<style>
+.kbd {
+    display: inline-block; padding: 1px 6px; margin: 0 2px;
+    background: var(--surface); border: 1px solid var(--border-decor);
+    border-radius: var(--r-xs); font-family: var(--font-mono, monospace);
+    font-size: .9em;
+  }
+.log {
+    margin-top: var(--sp-4); padding: var(--sp-3);
+    background: var(--surface-sunken); border-radius: var(--r-sm);
+    font-family: var(--font-mono, monospace); font-size: var(--fs-xs);
+    color: var(--text-secondary); min-height: 3em;
+  }
+.frame { padding: var(--sp-3); border: 1px solid var(--border-decor); border-radius: var(--r-md); }
+</style>
+</head>
+<body class="page page">
+<main class="wrap">
+
+<h1>tree · 树形视图</h1>
+<p class="note">
+  依据 <strong>APG Tree View</strong>。两条最关键的设计：
+  <br>① <strong>Roving tabindex</strong>：整棵树只占一个 Tab 位（当前节点 tabindex=0，其余 -1）
+  <br>② <span class="kbd">←</span><span class="kbd">→</span>
+  <strong>展开/收起并带着焦点走</strong>（已收起时按 ← 回到父节点）
+  <br>其余：<span class="kbd">↑</span><span class="kbd">↓</span> 移动 ·
+  <span class="kbd">Home</span><span class="kbd">End</span> 首末 ·
+  <span class="kbd">*</span> 展开本层同级 · <span class="kbd">空格</span> 选中 ·
+  <span class="kbd">a-z</span> 首字母跳转
+</p>
+
+<h2>1 · 文件树（试试键盘）</h2>
+<div class="frame">
+  <div id="t1"></div>
+</div>
+<div class="log" id="log">（焦点位置与选中项会显示在这里）</div>
+
+<h2>2 · 默认全部收起</h2>
+<div class="frame">
+  <div id="t2"></div>
+</div>
+
+</main>
+
+<script src="tree.js"></script>
+<script>
+(function () {
+  var log = document.getElementById('log');
+  function label(it) {
+    var n = it.node;
+    return (n.textContent || '').replace(/·/g, '').trim();
+  }
+
+  function mk(id, collapsed) {
+    document.getElementById(id).innerHTML =
+      '<ul role="group">' +
+        '<li class="tree__item">' +
+          '<div class="tree__node"><span class="tree__label">src</span>' +
+            '<span class="tree__count">12</span></div>' +
+          '<ul role="group">' +
+            '<li class="tree__item">' +
+              '<div class="tree__node"><span class="tree__label">components</span>' +
+                '<span class="tree__count">6</span></div>' +
+              '<ul role="group">' +
+                '<li class="tree__item"><div class="tree__node">' +
+                  '<span class="tree__label">Button.js</span></div></li>' +
+                '<li class="tree__item"><div class="tree__node">' +
+                  '<span class="tree__label">Card.js</span></div></li>' +
+              '</ul>' +
+            '</li>' +
+            '<li class="tree__item">' +
+              '<div class="tree__node"><span class="tree__label">styles</span>' +
+                '<span class="tree__count">5</span></div>' +
+              '<ul role="group">' +
+                '<li class="tree__item"><div class="tree__node">' +
+                  '<span class="tree__label">tokens.css</span></div></li>' +
+                '<li class="tree__item"><div class="tree__node">' +
+                  '<span class="tree__label">base.css</span></div></li>' +
+              '</ul>' +
+            '</li>' +
+            '<li class="tree__item"><div class="tree__node">' +
+              '<span class="tree__label">index.js</span></div></li>' +
+          '</ul>' +
+        '</li>' +
+        '<li class="tree__item">' +
+          '<div class="tree__node"><span class="tree__label">docs</span>' +
+            '<span class="tree__count">3</span></div>' +
+          '<ul role="group">' +
+            '<li class="tree__item"><div class="tree__node">' +
+              '<span class="tree__label">changelog.md</span></div></li>' +
+          '</ul>' +
+        '</li>' +
+        '<li class="tree__item"><div class="tree__node">' +
+          '<span class="tree__label">package.json</span></div></li>' +
+      '</ul>';
+
+    if (collapsed) {
+      document.querySelectorAll('#' + id + ' [role="group"]').forEach(function (g) {
+        if (g.parentElement.getAttribute && g.parentElement.getAttribute('role') === 'treeitem') {
+          g.hidden = true;
+          g.parentElement.setAttribute('aria-expanded', 'false');
+        }
+      });
+    }
+
+    return Tree.create(document.getElementById(id), {
+      label: '文件树',
+      onSelect: function (it) { log.textContent = '选中：' + label(it); },
+      onActivate: function (it) { log.textContent = '激活：' + label(it); },
+    });
+  }
+
+  var t1 = mk('t1', false);
+  mk('t2', true);
+
+  /* 焦点变化时也记一笔（演示 roving tabindex）*/
+  document.addEventListener('focusin', function (e) {
+    if (e.target.classList && e.target.classList.contains('tree__node')) {
+      var t = e.target.closest('.tree__node').textContent.replace(/·/g, '').trim();
+      log.textContent = '焦点：' + t;
+    }
+  });
+})();
+</script>
+</body>
+</html>

package/03-patterns/tree/tree.css

@@ -0,0 +1,113 @@
+/* ============================================================================
+   tree.css — 树形视图（D1 /
+   ============================================================================
+   依据：APG（ARIA Authoring Practices）Tree View 模式
+
+   ⭐ 树是**键盘契约最严**的组件（APG 列了 12 条）：
+     ↑ ↓  移动焦点        ← →  收起/展开（并移动焦点）
+     Home End  跳首/末
+     `*`       展开当前层全部同级
+     Enter     激活 / Space 选中
+     a-z 首字母跳转
+     焦点**始终只有一个**，且用 **roving tabindex**（整棵树只占一个 Tab 位）
+
+   ⚠️ roving tabindex 的意义：
+     若每个节点都 tabindex=0，Tab 30 次才能穿过一棵树。
+     正确做法：只有"当前节点" tabindex=0，其余 -1。
+   ============================================================================ */
+
+.tree {
+  font-size: var(--fs-sm);
+  color: var(--text-primary);
+  /* 容器不抢焦点（焦点在节点上） */
+  outline: none;
+}
+
+.tree ul {
+  margin: 0;
+  padding: 0;
+  /* 缩进用 padding，不用 margin（嵌套层级才看得出层次）*/
+  list-style: none;
+}
+
+.tree__item { position: relative; }
+
+/* ---------- 节点 ---------- */
+.tree__node {
+  display: flex;
+  align-items: center;
+  gap: var(--sp-2);
+  /* 🔴 命中区：树节点密集，但 WCAG 2.5.8 AA 只要 24px
+     （这里给 32px，介于"手指好点"与"树不被撑太散"之间）*/
+  min-height: 32px;
+  padding: 0 var(--sp-2);
+  border-radius: var(--r-xs);
+  cursor: pointer;
+  user-select: none;
+}
+
+.tree__node:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
+  outline-offset: calc(-1 * var(--focus-ring-width));
+}
+
+/* 焦点态与悬停态视觉一致（键盘/鼠标看到同一个高亮）*/
+@media (hover: hover) and (pointer: fine) {
+  .tree__node:hover { background: var(--surface-sunken); }
+}
+
+.tree__node[aria-selected="true"] {
+  background: var(--accent-soft);
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+/* ---------- 展开箭头 ----------
+   ⭐ 展开/收起**必须有三态形状线索**，不能只靠旋转一个箭头：
+     · 收起：▶（右三角）
+     · 展开：▼（下三角）
+     · 叶子：·（点，表示"这里没有子节点"） */
+.tree__marker {
+  flex: 0 0 auto;
+  width: 1em;
+  font-size: .8em;
+  color: var(--text-tertiary);
+  text-align: center;
+}
+
+.tree__item[aria-expanded="true"] > .tree__node .tree__marker::before {
+  content: "\25BC";                  /* ▼ */
+}
+
+.tree__item[aria-expanded="false"] > .tree__node .tree__marker::before {
+  content: "\25B6";                  /* ▶ */
+}
+
+.tree__item:not([aria-expanded]) > .tree__node .tree__marker::before {
+  content: "\00B7";                  /* · 叶子节点 */
+}
+
+/* ---------- 层级缩进（用左边框引导线）---------- */
+.tree ul ul {
+  padding-inline-start: var(--sp-5);
+  border-inline-start: 1px solid var(--border-decor);
+  margin-inline-start: var(--sp-4);          /* 缩进线的位置 */
+}
+
+/* ---------- 标签 ---------- */
+.tree__label { flex: 1 1 auto; }
+
+.tree__count {
+  flex: 0 0 auto;
+  padding: 0 var(--sp-1);
+  font-size: var(--fs-xs);
+  font-family: var(--mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-tertiary);
+  background: var(--surface-sunken);
+  border-radius: var(--r-pill);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .tree__marker { transition: none; }
+}