@xihan-ui/styles 2.0.0 → 2.1.0

package/css/slider.css

@@ -25,7 +25,7 @@
 
     display: flex;
     flex-direction: column;
-    /* 字段标签贴控件（§6.4 复合单字段） */
+    /* 字段标签贴控件（复合单字段） */
     gap: var(--xh-slider-gap, var(--xh-space-1));
   }
 
@@ -35,10 +35,10 @@
     align-items: center;
   }
 
-  /* 禁用不整体压暗（§7.2 第 9 条）：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
+  /* 禁用不整体压暗：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
      轨道、区间、拇指、刻度与标签就近消费，写在各自的规则里 */
 
-  /* 字段标签：14 / 500 / fg-default（§6.4），禁用换到 --xh-fg-subtle */
+  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle */
   [data-scope='slider'][data-part='label'] {
     color: var(--xh-slider-label-fg, var(--xh-fg-default));
     font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
@@ -144,7 +144,7 @@
   /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
      box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
      下面按半个直径回拉的负外边距就对不上圆心。
-     拇指是可拖起的 raised 面（§8）：描边取 --xh-border-default，raised 影只是加成、不作边界 */
+     拇指是可拖起的 raised 面：描边取 --xh-border-default，raised 影只是加成、不作边界 */
   [data-scope='slider'][data-part='thumb'] {
     position: absolute;
     box-sizing: border-box;
@@ -277,7 +277,7 @@
     pointer-events: none;
   }
 
-  /* 刻度点是正方盒，取 circle（§6.3 正方盒不得用 pill 冒充圆） */
+  /* 刻度点是正方盒，取 circle（正方盒不得用 pill 冒充圆） */
   [data-scope='slider'][data-part='tick'] {
     position: absolute;
     inset-block-start: 50%;

package/css/sortable.css

@@ -67,7 +67,7 @@
     opacity: var(--xh-sortable-item-opacity-dragging, 0.9);
   }
 
-  /* 把手是只有字形的离散动作钮（§9.1 定尺把手）：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
+  /* 把手是只有字形的离散动作钮（定尺把手）：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
      禁用面全由 Action Control 的 icon ghost 档给（连接层投 xs：24px 正方盒，与此前 --xh-control-action-size
      同尺寸），组件只映射既有使用者槽。静息透明，白底承载 hover 100 → pressed 200（此前悬停落 200 是错档）。
      手型不是 pointer：抓起来拖的东西给 grab，按住拖动中给 grabbing；家族的手型槽逐态映射 */

package/css/splitter.css

@@ -111,7 +111,7 @@
     cursor: row-resize;
   }
 
-  /* 分隔条是一根线不是一块面：悬停不走面阶梯（300 只留给 pressed，§7.2 第 3 条），
+  /* 分隔条是一根线不是一块面：悬停不走面阶梯（300 只留给 pressed），
      按线取——与字段描边 rest → hover 同向加深一档 */
   [data-scope='splitter'][data-part='resize-trigger']:hover {
     background: var(--xh-splitter-trigger-bg-hover, var(--xh-border-control));

package/css/steps.css

@@ -14,7 +14,7 @@
   }
 
   [data-scope='steps'][data-part='root'] {
-    /* 作者放进标题 / 说明里的图标按档取尺，缺省 sm（§6.5）。走过的步里皮肤画的兜底对号不读这支：
+    /* 作者放进标题 / 说明里的图标按档取尺，缺省 sm。走过的步里皮肤画的兜底对号不读这支：
        它是指示符，与序号圆点同走 --xh-control-indicator-* 一族——圆点在自己身上把 --xh-icon-size
        改接到 --xh-steps-indicator-mark-size，兜底对号与作者塞进圆点里的 XhIcon 读同一把尺 */
     --xh-icon-size: var(--xh-steps-icon-size, var(--xh-glyph-size-sm));
@@ -28,14 +28,14 @@
     /* 语气落在当前步的标记、走过那几步的对号与连接线上：强调色画描边与填充，
        accent-text 是普通底上的强调文字（走过与当前步的标题），on-accent 是实心底上的前景。
        没写 data-tone 时 --xh-_tone 一族没被声明，三个槽都退回原来的品牌配色。
-       走过的步不再用品牌淡底（§7.3 brand-subtle 退出 completed 语义），淡底那两支私有槽随之撤掉 */
+       走过的步不再用品牌淡底（brand-subtle 退出 completed 语义），淡底那两支私有槽随之撤掉 */
     --xh-_steps-accent: var(--xh-_tone, var(--xh-bg-brand));
     --xh-_steps-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
     /* 走过的步里那枚对号：中性淡底上的品牌色标记，不用标题那档更深的字色 */
     --xh-_steps-accent-mark: var(--xh-_tone-fg, var(--xh-fg-brand));
     --xh-_steps-on-accent: var(--xh-_tone-on, var(--xh-fg-on-brand));
     /* 触发器是序号圆点的承载面：圆点静息就坐在 --xh-bg-subtle（100）的淡底上，阶梯按淡底容器走
-       （hover 200 → pressed 300，§7.2 第 3 条）。两支私有槽是这一档的唯一来源——触发器拿它们给
+       （hover 200 → pressed 300）。两支私有槽是这一档的唯一来源——触发器拿它们给
        --xh-action-host-bg-* 赋值（桥接槽只写不读），圆点悬停 / 按下读同一支私有槽，即与宿主的 host 槽同源 */
     --xh-_steps-host-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_steps-host-bg-pressed: var(--xh-bg-subtle-active);
@@ -134,7 +134,7 @@
     align-items: flex-start;
   }
 
-  /* 触发器是「序号 + 标题 + 说明」的整块内容行（§9.2）：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、
+  /* 触发器是「序号 + 标题 + 说明」的整块内容行：接 Action Control row 档、ghost 形态，悬停 / 按下 / 禁用面、
      手型、过渡与焦点环由家族给，按下只换面不缩放（row 档专属按压块 scale: none）；这里只把使用者槽映射到桥接槽。
      触发器既是 Action Control 又是圆点的承载面：自己坐画布走 hover 100 → pressed 200，由 --xh-action-bg-* 钉住；
      --xh-action-host-bg-* 只对圆点生效（圆点自己是 100 的淡底，坐在触发器面上再上一档到 200 / 300）。
@@ -183,9 +183,9 @@
     color: var(--xh-fg-disabled);
   }
 
-  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号（§7.3）。 */
+  /* 序号圆点：未开始使用中性面，当前步骤实心强调，已完成步骤中性面上画品牌对号。 */
   [data-scope='steps'][data-part='indicator'] {
-    /* 圆点里的字形是指示符（§6.5）：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
+    /* 圆点里的字形是指示符：对号按指示符档取尺、随密度换档（comfortable 16 / compact 14），
        不读 root 上只管作者标题 / 说明图标的 --xh-steps-icon-size；作者塞进圆点的 XhIcon 与兜底对号同一把尺。
        圆点自己走 space / control-h 的尺（最小 28px），不随密度，两档字形在三档圆点里都留得出边距 */
     --xh-icon-size: var(--xh-steps-indicator-mark-size, var(--xh-control-indicator-size));
@@ -217,8 +217,8 @@
     display: none;
   }
 
-  /* 圆点是格状当前的标记（§4.1 / §7.3），但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
-     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放（§9.2）——
+  /* 圆点是格状当前的标记，但不是激活宿主：宿主是投影了 row 档的触发器；圆点在宿主的
+     :hover / :is(:active, [data-pressed]) 下读宿主 host 槽的同一来源换面，同一时间线，不缩放——
      圆点自己是 100 的淡底，坐在触发器的 hover 面（100）上，再上一档到 200 才与承载面分得开，按下到 300；
      当前步的实心面按下换语气 active 档 */
   [data-scope='steps'][data-part='trigger']:hover:not([data-disabled])
@@ -253,7 +253,7 @@
     box-shadow: var(--xh-steps-indicator-shadow, var(--xh-_steps-highlight));
   }
 
-  /* 走过的步：中性淡底（透明边位，§8.3）承一枚品牌色对号；标了语气的步对号跟语气的前景走 */
+  /* 走过的步：中性淡底（透明边位）承一枚品牌色对号；标了语气的步对号跟语气的前景走 */
   [data-scope='steps'][data-part='indicator'][data-state='completed'] {
     border-color: var(--xh-steps-indicator-border-completed, transparent);
     background: var(--xh-steps-indicator-bg-completed, var(--xh-bg-subtle));
@@ -307,7 +307,7 @@
     color: var(--xh-steps-title-fg-toned, var(--xh-_steps-accent-text));
   }
 
-  /* 说明走说明角色（§6.4）：13 / fg-muted / leading-normal，不随 size 档 */
+  /* 说明走说明角色：13 / fg-muted / leading-normal，不随 size 档 */
   [data-scope='steps'][data-part='description'] {
     grid-column: 2;
     color: var(--xh-steps-description-fg, var(--xh-fg-muted));

package/css/switch.css

@@ -41,9 +41,9 @@
     --xh-_switch-track-bg-pressed: var(--xh-switch-bg-pressed, var(--xh-_switch-track-bg));
     --xh-_switch-fg: var(--xh-switch-fg, var(--xh-fg-default));
 
-    /* 轨道接 Action Control text 档（§9.1 定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+    /* 轨道接 Action Control text 档（定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
        焦点环与过渡由家族配方给，这里只把轨道的私有槽映射到桥接槽。轨道没有实描边（边界以内描边画，不吃行程），
-       边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（§7.2 阶梯只给按下） */
+       边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（阶梯只给按下） */
     --xh-action-visual-size: var(--xh-_switch-track-h);
     --xh-action-min-inline-size: calc(var(--xh-_switch-track-h) * 2 - var(--xh-_switch-pad) * 2);
     --xh-action-padding-inline: var(--xh-_switch-pad);
@@ -89,7 +89,7 @@
 
   /* 只读：值仍要读得清、也仍会随表单提交，所以不压对比度、也不借禁用那档灰。
      变的是"动不动得了"：指针不摆手型、按下不缩放不换底（家族的按压块由这里的映射钉回静息面），
-     选中档的轨道退回未选中那一档的中性底（§7.2 交互态的底只从语义面派生），
+     选中档的轨道退回未选中那一档的中性底（交互态的底只从语义面派生），
      滑块收掉那层抬起的投影——投影是"这颗按得动"的信号。与文本框只读那一档同口径（压低底色而非置灰）。
      滑块停在哪一端不受影响，值本身仍由位置这条非颜色通道读出。 */
   [data-scope='switch'][data-part='root'][data-readonly]:not([data-disabled]) {
@@ -126,7 +126,7 @@
     box-shadow: var(--xh-switch-thumb-shadow-readonly, none);
   }
 
-  /* 禁用（§7.2）：不靠 opacity——轨道退回 --xh-bg-subtle 底 + --xh-border-default 内描边，滑块前景置灰；
+  /* 禁用：不靠 opacity——轨道退回 --xh-bg-subtle 底 + --xh-border-default 内描边，滑块前景置灰；
      选中的禁用轨道同样退回中性面，值由滑块位置读出。面与手型由家族的禁用块按映射给 */
   [data-scope='switch'][data-part='root'][data-disabled] {
     --xh-_switch-track-border: var(--xh-switch-border-disabled, var(--xh-border-default));
@@ -163,7 +163,7 @@
     }
   }
 
-  /* 滑块是 raised 抬起面（§5.3 可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
+  /* 滑块是 raised 抬起面（可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
      --xh-elevation-raised 影，无顶光；描边必须在，影只是加成 */
   [data-scope='switch'][data-part='thumb'] {
     position: relative;
@@ -233,13 +233,13 @@
     block-size: 60%;
     border: var(--xh-stroke-thin) solid transparent;
     border-block-start-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-    /* 加载环是等宽高的圆（§6.3 全部加载环取 circle） */
+    /* 加载环是等宽高的圆（全部加载环取 circle） */
     border-radius: var(--xh-shape-circle);
     animation: xh-switch-rotate var(--xh-switch-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox 的标签、checkbox-group 的条目同一副样子 ——
-     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（§6.4 控件字号随档）；
+     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（控件字号随档）；
      行高取正文档，长文字可以自然换行 */
   [data-scope='switch'][data-part='label'] {
     --xh-_switch-label-font-size: var(--xh-control-font-md);
@@ -261,7 +261,7 @@
     --xh-_switch-label-font-size: var(--xh-control-font-lg);
   }
 
-  /* 禁用标签色统一 --xh-fg-subtle（§6.4） */
+  /* 禁用标签色统一 --xh-fg-subtle */
   [data-scope='switch'][data-part='label'][data-disabled] {
     color: var(--xh-switch-label-fg-disabled, var(--xh-fg-subtle));
     cursor: not-allowed;

package/css/table.css

@@ -35,7 +35,7 @@
        既不让页面上的层号插进来，也不让它们漏出去压住别人 */
     isolation: isolate;
 
-    /* 作者放进单元格、列头与把手里的图标按档取尺，缺省 md（§6.5）；表体行上的由家族随 data-xh-collection-size 下发。
+    /* 作者放进单元格、列头与把手里的图标按档取尺，缺省 md；表体行上的由家族随 data-xh-collection-size 下发。
        表格自绘的状态字形（排序方向、勾、半选杠、展开方向）不读这支：它们是指示符，与所在的方盒同走
        --xh-control-indicator-* 一族——五颗把手在自己身上把 --xh-icon-size 改接到方盒的尺，排序钮那支叫 --xh-table-sort-size */
     --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-md));
@@ -179,7 +179,7 @@
     outline: none;
   }
 
-  /* 表头是淡底承载面：里头的触发器按淡底阶梯走（hover 200 → pressed 300），阶梯由 host 槽向内下发（§7.2）；
+  /* 表头是淡底承载面：里头的触发器按淡底阶梯走（hover 200 → pressed 300），阶梯由 host 槽向内下发；
      排序钮是 ghost 图标钮，悬停 / 按下面就从这两支 host 槽取 */
   [data-scope='table'][data-part='header'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
@@ -203,7 +203,7 @@
     font-weight: var(--xh-table-footer-font-weight, var(--xh-font-weight-medium));
   }
 
-  /* 表体行走 Collection Item 的 page 语境（页内持久集合，§7.3）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
+  /* 表体行走 Collection Item 的 page 语境（页内持久集合）：悬停 / 高亮 / 按下面（白底承载 hover 100 →
      pressed 200）与选中面（品牌淡底 + 淡底前景，selected+hover 20% / +pressed 28%）由家族按 aria-selected /
      aria-disabled 给出，标记由行首的勾选把手承担。这里只把公开槽映射到桥接槽，并逐项盖掉家族的行盒几何：
      行是 flex 容器（列宽由单元格的内联尺寸决定，不进家族网格）、不内衬、不圆角、字号与光标随表格本身
@@ -372,7 +372,7 @@
   }
 
   /* 五个把手共用一副方形盒子，两种行的文字起点才对得齐；列设置区那颗与表头里的选择框同款，一眼看得出是同一件事。
-     五颗都接 Action Control icon 档（§9.1 定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族
+     五颗都接 Action Control icon 档（定尺方框）：盒型、悬停 / 按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族
      配方给，这里只把使用者槽映射到桥接槽；边长仍按 --xh-control-indicator-size 走。三颗勾选框是 outline 形态
      （字段静息形态：透明底 + --xh-border-control 描边），展开箭头与排序钮是 ghost；空框与箭头坐在白底行上，
      按下落 200 档，已勾选的品牌实心面按下派生 active 面；排序钮坐在表头淡底上，阶梯另由 host 槽给（见下） */
@@ -422,7 +422,7 @@
     }
   }
 
-  /* 盒里的字形是指示符（§6.5）：这四颗把手各自把 --xh-icon-size 改接到方盒的尺上，兜底字形与作者塞进盒里的
+  /* 盒里的字形是指示符：这四颗把手各自把 --xh-icon-size 改接到方盒的尺上，兜底字形与作者塞进盒里的
      XhIcon 读同一把尺，root 那支只管作者放进单元格与把手里图标的 --xh-table-icon-size 不流进来。
      三颗勾选框的勾与半选杠按方盒边长 × 0.75，与 Checkbox 的 --xh-_checkbox-glyph、Tree 勾选把手同一比例；
      展开箭头的 chevron 与方盒同边长，同 Tree 的 branch-trigger */
@@ -525,7 +525,7 @@
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
-  /* 禁用（§7.2 第 9 条）：--xh-border-default 描边 + --xh-bg-subtle 底，勾藏起来；家族的禁用块按映射给 */
+  /* 禁用：--xh-border-default 描边 + --xh-bg-subtle 底，勾藏起来；家族的禁用块按映射给 */
   [data-scope='table'][data-part='select-all-trigger'][data-disabled],
   [data-scope='table'][data-part='column-visibility-trigger'][data-disabled],
   [data-scope='table'][data-part='row-select-trigger'][data-disabled] {
@@ -576,7 +576,7 @@
     outline: none;
   }
 
-  /* 排序钮是列头里独立的定尺图标钮（§9.1）：不包列名，列名留在列头上、它排在列名之后，auto 外边距把它
+  /* 排序钮是列头里独立的定尺图标钮：不包列名，列名留在列头上、它排在列名之后，auto 外边距把它
      推到行尾侧与列宽把手并排。盒型与 0.97 按压由家族 icon 档给（见五颗把手共用块）；坐在表头淡底上，
      悬停 / 按下面按 header 的 host 槽下发的阶梯走（hover 200 → pressed 300），不取白底行那档。
      箭头静息取 subtle 前景，参与排序的列换成默认前景（见字形块） */
@@ -846,7 +846,7 @@
      悬停恒真，而悬停那条是 0-6-0、选中那条是 0-3-0，少写一层祖先这块淡底就会被那两档盖掉。
      禁用的行不接换父落点，:not([data-disabled]) 不会漏画任何一处高亮 */
   [data-scope='table'][data-part='root'] [data-scope='table'][data-part='body'] > [data-scope='table'][data-part='row'][data-drop='inside']:not([data-disabled]) {
-    /* 落点不是选中：品牌淡底专属选中（§7.1），落点面取悬停之上一档的中性面 */
+    /* 落点不是选中：品牌淡底专属选中，落点面取悬停之上一档的中性面 */
     background: var(--xh-table-drop-inside-bg, var(--xh-bg-subtle-hover));
   }
 
@@ -880,7 +880,7 @@
   }
 
   /* 排序方向用箭头字形表出来：aria-sort 只报给读屏，视觉侧也得有对应的东西。
-     箭头是指示符（§6.5）：尺寸读钮自己改接过的 --xh-icon-size（--xh-table-sort-size，缺省与方盒同边长），
+     箭头是指示符：尺寸读钮自己改接过的 --xh-icon-size（--xh-table-sort-size，缺省与方盒同边长），
      与同一表头里的勾选框方盒、列拖拽把手同走 --xh-control-indicator-size，按图标档取的 20px 会比
      16px 的方盒与列头文字都大一圈。:empty 守卫同展开箭头：作者塞了自己的图标就整个顶掉兜底；
      flex: none 是因为 ghost 那圈透明描边仍占位，不钉住的话与盒同边长的箭头会被挤窄一个描边。
@@ -988,7 +988,7 @@
   }
 
   /* 取下一页的按钮：铺满一行摆在表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
-     ghost 形态（§9.2）：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
+     ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
      这里只把使用者槽映射到桥接槽并把文案居中：它是一行里唯一的东西，靠起始缘会像一条没对齐的行 */
   [data-scope='table'][data-part='load-more-trigger'] {
@@ -1004,7 +1004,7 @@
 
     justify-content: center;
     text-align: center;
-    /* row 档允许换行、高度随内容，折行的文案走正文行高（§6.4） */
+    /* row 档允许换行、高度随内容，折行的文案走正文行高 */
     line-height: var(--xh-leading-normal);
   }
 

package/css/tabs.css

@@ -25,7 +25,7 @@
     /* 缺省是 line 变体：透明标签带，选中项由文字与底部指示条表达。Web Components 升级前还没有
        data-variant，这组几何基础值也必须画成相同结果，避免定义完成时闪换样式；line 档的面与字色由家族
        按升级后写入的家族角色给，升级前那一帧只有几何没有面色（与 side-nav / menu 同）。
-       悬停与按下的面按承载面分档（§7.2）：line 档经家族走白底承载 hover 100 → pressed 200；card 坐在
+       悬停与按下的面按承载面分档：line 档经家族走白底承载 hover 100 → pressed 200；card 坐在
        画布上 hover 100 → pressed 200；segment 坐在淡底轨道里 hover 200 → pressed 300。card / segment 的
        六支面槽只在各自形态块里赋值，line 档不消费它们 */
     --xh-_tabs-list-gap: var(--xh-space-0);
@@ -87,7 +87,7 @@
   }
 
   /* 卡片式：基线收掉，选中的那张标签自己成为一张有描边有底的卡片，顶边一条指示条。
-     标签坐在画布上，悬停 100 → 按下 200（§7.2 白底承载） */
+     标签坐在画布上，悬停 100 → 按下 200（白底承载） */
   [data-scope='tabs'][data-part='root'][data-variant='card'] {
     --xh-_tabs-list-gap: var(--xh-control-gap-md);
     --xh-_tabs-list-bg: transparent;
@@ -106,7 +106,7 @@
     --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-default));
   }
 
-  /* 分段式（§7.3 有滑块开关）：淡底轨道承载一块白色抬起的选中面，选中文字保持默认字色。
+  /* 分段式（有滑块开关）：淡底轨道承载一块白色抬起的选中面，选中文字保持默认字色。
      未选中标签坐在淡底轨道里，悬停 200 → 按下 300；选中面自己不再叠悬停 / 按下态。
      选中面的三件（surface-raised 底、border-default 描边、raised 影）写在下面标签自己的规则里 */
   [data-scope='tabs'][data-part='root'][data-variant='segment'] {
@@ -171,8 +171,8 @@
     translate: 0 var(--xh-_tabs-scroll);
   }
 
-  /* segment 档的标签带是一块淡底面：--xh-bg-subtle 底 + 一圈透明占位边 + 无影（§8.3 三选一）。
-     它同时是标签的淡底承载面，向内下发 hover 200 → pressed 300 的承载阶梯（§7.2）；
+  /* segment 档的标签带是一块淡底面：--xh-bg-subtle 底 + 一圈透明占位边 + 无影（三选一）。
+     它同时是标签的淡底承载面，向内下发 hover 200 → pressed 300 的承载阶梯；
      只写在标签带上不写在 root 上：内容面板里的按钮坐在画布上，不该跟着抬一档 */
   [data-scope='tabs'][data-part='root'][data-variant='segment'] [data-scope='tabs'][data-part='list'] {
     --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
@@ -202,9 +202,9 @@
     min-inline-size: auto;
   }
 
-  /* line 档（§7.3 导航当前页）：把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular，
+  /* line 档（导航当前页）：把公开槽映射到 Collection Item 的 nav 语境桥接槽。静息 muted / regular，
      悬停 100 + default 字，按下 200 只换面；当前页透明面 + 品牌深字（随语气的 --xh-_tabs-accent-text）+
-     medium，叠悬停 100（§9.3）。2px 指示线不由家族按条目画：放了 indicator 部件是 list 上的滑动部件，
+     medium，叠悬停 100。2px 指示线不由家族按条目画：放了 indicator 部件是 list 上的滑动部件，
      没放则由下面的静态线规则画在选中标签自己身上。高度由 block-size 定，块向内边距归零 */
   [data-scope='tabs'][data-part='root'][data-variant='line'] [data-scope='tabs'][data-part='trigger'] {
     --xh-collection-block-padding: var(--xh-space-0);
@@ -228,7 +228,7 @@
     color: var(--xh-tabs-trigger-fg, var(--xh-fg-muted));
     font-weight: var(--xh-tabs-trigger-font-weight, var(--xh-text-label-weight));
     cursor: pointer;
-    /* 标签是铺开的一段（§9.2 Tabs trigger 归行级），按下只换面不缩放：transition 里没有 scale */
+    /* 标签是铺开的一段（Tabs trigger 归行级），按下只换面不缩放：transition 里没有 scale */
     transition:
       color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
       background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
@@ -257,7 +257,7 @@
   }
 
   /* 按下去要有回应：card / segment 档的未选中标签换到按下面（card 200、segment 300），几何不动。
-     选中标签不叠按下面：card 的卡片面与 segment 的抬起面本身就是选中身份（§7.3 有滑块开关无叠加态） */
+     选中标签不叠按下面：card 的卡片面与 segment 的抬起面本身就是选中身份（有滑块开关无叠加态） */
   [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])
     [data-scope='tabs'][data-part='trigger']:not([data-disabled]):not([data-state='active']):is(:active, [data-pressed]) {
     background: var(--xh-tabs-trigger-bg-pressed, var(--xh-_tabs-trigger-bg-pressed));
@@ -276,7 +276,7 @@
     font-weight: var(--xh-tabs-trigger-font-weight-active, var(--xh-font-weight-medium));
   }
 
-  /* segment 档的选中标签就是那块白色抬起的滑块面（§7.3 有滑块开关）：surface-raised 底 +
+  /* segment 档的选中标签就是那块白色抬起的滑块面（有滑块开关）：surface-raised 底 +
      border-default 描边 + raised 影三件写在标签自己身上。标签带里放了 indicator 部件时，
      这块面搬到部件上跟着滑（见下面的 indicator 规则），标签自己透空、只留字 */
   [data-scope='tabs'][data-part='root'][data-variant='segment']
@@ -477,7 +477,7 @@
     display: none;
   }
 
-  /* segment 档（§7.3 有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
+  /* segment 档（有滑块开关）：部件就是那块白色抬起的滑块面，四个几何量都取、整块跟着滑——
      surface-raised 底 + border-default 描边 + raised 影三件与 Segmented 的滑块同一套；
      描边吃进盒里（border-box），面与标签仍是同一块矩形。标签压在它上面，点击一律交给标签。
      用连续档而不是进场那条：滑块是被推过去的，起步就该有速度；四个几何量同时走，标签宽不等时才不会先变形再挪位 */
@@ -501,7 +501,7 @@
       block-size var(--xh-motion-duration-enter) var(--xh-motion-ease-continuous);
   }
 
-  /* line 档没放 indicator 部件时，选中标签自画一条静态指示线（§7.3 导航当前页）：
+  /* line 档没放 indicator 部件时，选中标签自画一条静态指示线（导航当前页）：
      横向缺省也要像纵向示例那样有一条选中线，作者不必为了这条线多放一个部件。
      线画在选中标签的 ::after 上，以标签盒为定位参照（基础规则里已是 position: relative），
      厚度 / 颜色 / 圆角与 indicator 部件读同一组槽与缺省——作者改一处，部件与静态线一起改。

package/css/tag-group.css

@@ -72,7 +72,7 @@
     cursor: pointer;
   }
 
-  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件（§9.1），整枚轻微下压并同时换底
+  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件，整枚轻微下压并同时换底
      （白底承载 hover 100 → pressed 200），松手即弹回。置灰的不压；
      指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
   [data-scope='tag-group'][data-part='list']
@@ -106,7 +106,7 @@
     background: var(--xh-tag-group-item-bg-pressed-solid, var(--xh-_tone-active, var(--xh-bg-brand-active)));
   }
 
-  /* 悬停与键盘锚点共用白底承载的 hover 档（§7.2：hover 100 → pressed 200）：
+  /* 悬停与键盘锚点共用白底承载的 hover 档（hover 100 → pressed 200）：
      data-highlighted 跟的是连接层记的焦点标签，与选中互相独立。
      实心标签不进这里：它的字是实心底上配对的那支前景色，换成灰底就读不出来了；
      实心档在这两档里面不换，回执落在按压缩放与聚焦环上 */
@@ -129,32 +129,8 @@
   }
 
   /* —— 选中 —— */
-  /* 页内持久集合的选中（§7.3）：品牌淡底行面 + 配对前景 + 前导对号（item-indicator），描边退到透明边位；
-     悬停与按下在淡底上派生 20% / 28%，键盘锚点同悬停档。
-     标了语气的组从语气层取同一条曲线。置灰的标签不进这里：它的边与字都已退成置灰色。
-     实心档另有一条：它的面本身就是那族色，淡底与配对前景压在上面都读不出来 */
-  [data-scope='tag-group'][data-part='list']
-    > [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']) {
-    border-color: var(--xh-tag-group-item-border-selected, transparent);
-    background: var(--xh-tag-group-item-bg-selected, var(--xh-_tone-subtle, var(--xh-bg-brand-subtle)));
-    color: var(--xh-tag-group-item-fg-selected, var(--xh-_tone-fg, var(--xh-fg-on-brand-subtle)));
-  }
-
-  [data-scope='tag-group'][data-part='list']
-    > [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']):is(:hover, [data-highlighted]) {
-    background: var(--xh-tag-group-item-bg-selected-hover, var(--xh-_tone-subtle-hover, var(--xh-bg-brand-subtle-hover)));
-  }
-
-  [data-scope='tag-group'][data-part='list']
-    > [data-scope='tag'][data-part='root'][data-selected][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed]) {
-    background: var(--xh-tag-group-item-bg-selected-pressed, var(--xh-_tone-subtle-active, var(--xh-bg-brand-subtle-active)));
-  }
-
-  /* 实心标签选中：字不换（仍是 tag.css 给的面配对前景色，作者的 --xh-tag-fg 照旧生效），
-     描边取字色，在实心底上描出一圈；环由 tag.css 取 currentColor，跟着字走 */
-  [data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'][data-variant='solid'][data-selected]:not([data-disabled]) {
-    border-color: var(--xh-tag-group-item-border-selected, currentColor);
-  }
+  /* 与树选择同一种读法：选中的标签面、字与描边都不换，悬停 / 锚点 / 按下沿用未选中的那条阶梯，
+     只在文字后亮一枚对号（见下面 item-indicator 那几块） */
 
   /* 标签里那一格：文字与摘除钮排在一条线上。它是 tag 根与 tag 的 label / close-trigger 之间的一层，
      间距照抄所在标签的那一档，有它与没它标签长得一样 */
@@ -170,7 +146,8 @@
     display: none;
   }
 
-  /* 选中标记：领在文字前面的一枚对号，与摘除钮的叉同一把随文尺（标签是纯行内文字组件）；
+  /* 选中标记：跟在文字后面的一枚对号，与摘除钮的叉同一把随文尺（标签是纯行内文字组件）；
+     作者写在格里哪儿都排到文字与作者内容之后、摘除钮之前。
      作者塞进来的图标读同一支 --xh-icon-size。连接层没选中时给 hidden，UA 的 display:none 被上面的 display 盖住，
      这里压回去 */
   [data-scope='tag-group'][data-part='item-indicator'] {
@@ -178,17 +155,34 @@
 
     display: inline-flex;
     flex: none;
+    order: 1;
     align-items: center;
     justify-content: center;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
     block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
-    color: var(--xh-tag-group-item-indicator-fg, currentColor);
+    /* 与树选择的行尾对号同色：标了语气的组取语气字色，没写语气取品牌前景 */
+    color: var(--xh-tag-group-item-indicator-fg, var(--xh-_tone-fg, var(--xh-fg-brand)));
   }
 
   [data-scope='tag-group'][data-part='item-indicator'][hidden] {
     display: none;
   }
 
+  /* 实心标签的面本身就是那族色，品牌 / 语气字色压在上面读不出来：对号取面配对的那支前景色 */
+  [data-scope='tag'][data-part='root'][data-variant='solid'] [data-scope='tag-group'][data-part='item-indicator'] {
+    color: var(--xh-tag-group-item-indicator-fg, currentColor);
+  }
+
+  /* 置灰的标签里对号跟着字一起退成置灰色 */
+  [data-scope='tag-group'][data-part='item-indicator'][data-disabled] {
+    color: inherit;
+  }
+
+  /* 摘除钮是操作，排在对号之后、格的最末 */
+  [data-scope='tag-group'][data-part='cell'] > [data-scope='tag'][data-part='close-trigger'] {
+    order: 2;
+  }
+
   /* 没写内容就由皮肤画兜底对号；作者往部件里塞了自己的图形，这条即不命中 */
   [data-scope='tag-group'][data-part='item-indicator']:empty::before {
     content: '';
@@ -201,12 +195,15 @@
   }
 
   @media (forced-colors: active) {
-    /* 选中靠淡底与配对前景表出，这一档里两者都被统一换掉；用系统高亮反色画回，前导对号是字形节点、自己活得下来 */
+    /* 选中只由对号表达：遮罩出来的那块底色用系统高亮色画，按下时标签整枚反成 Highlight，对号换成反白 */
+    [data-scope='tag-group'][data-part='item-indicator']:empty::before {
+      background-color: Highlight;
+    }
+
     [data-scope='tag-group'][data-part='list']
-      > [data-scope='tag'][data-part='root'][data-selected]:not([data-disabled]):not([data-variant='solid']) {
-      border-color: Highlight;
-      background: Highlight;
-      color: HighlightText;
+      > [data-scope='tag'][data-part='root'][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed])
+      [data-scope='tag-group'][data-part='item-indicator']:empty::before {
+      background-color: HighlightText;
     }
 
     /* 按下：常态靠底色深一档表出，这一档里底色被统一换成 Canvas；按住那一下用系统高亮反色画回来 */
@@ -216,4 +213,11 @@
       color: HighlightText;
     }
   }
+
+  @media print {
+    /* 打印默认丢底色，而对号是遮罩出来的一块底色：标签本就不换面，丢了它选中在纸上就没了踪影 */
+    [data-scope='tag-group'][data-part='item-indicator'] {
+      print-color-adjust: exact;
+    }
+  }
 }

package/css/tag.css

@@ -31,7 +31,7 @@
     padding-inline: var(--xh-tag-px, var(--xh-_tag-px));
     padding-block: var(--xh-tag-py, var(--xh-_tag-py));
     border: var(--xh-stroke-thin) solid var(--xh-tag-border, var(--xh-material-soft-border));
-    /* 状态 chip 的身份是胶囊（§6.3 pill 只给状态 chip 与一维对象） */
+    /* 状态 chip 的身份是胶囊（pill 只给状态 chip 与一维对象） */
     border-radius: var(--xh-tag-radius, var(--xh-shape-pill));
     background: var(--xh-tag-bg, var(--xh-material-soft-bg));
     box-shadow: var(--xh-tag-shadow, var(--xh-material-soft-shadow));
@@ -112,7 +112,7 @@
     transition-timing-function: var(--xh-motion-ease-press);
   }
 
-  /* 按住的叉落着焦点（§9.3 focus-visible + pressed 保留焦点环）：按压面是从字色兑出的 22% 底，
+  /* 按住的叉落着焦点（focus-visible + pressed 保留焦点环）：按压面是从字色兑出的 22% 底，
      压在淡底 / 选中面上把面往字色那头带了一档，默认环与这块混色面在浅色档上只剩 2.2–2.9。
      环改取叉自己的字色：按压面正是从这支色兑出来的，字色压在它上面的对比与字压在标签面上同源，
      六族语气与深浅两态都过 3:1；实心档本来就取字色，这条与它同一口径 */

package/css/time-picker.css

@@ -321,8 +321,6 @@
   }
 
   [data-scope='time-picker'][data-part='content'][data-state='open'] {
-    /* 只在展开态挂着：随状态属性一起消失，不长期占着合成层 */
-    will-change: opacity, translate;
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 

package/css/time-range-picker.css

@@ -360,8 +360,6 @@
   }
 
   [data-scope='time-range-picker'][data-part='content'][data-state='open'] {
-    /* 只在展开态挂着：随状态属性一起消失，不长期占着合成层 */
-    will-change: opacity, translate;
     animation: xh-overlay-slide-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 

package/css/toast.css

@@ -107,9 +107,9 @@
   }
 
   /* 中性浮层承载整条反馈，语气只落到状态字形和标题。
-     面走 sheet 三件套（§8.4：--xh-material-elevated-bg / -border / -shadow，亮暗两档同有 1px 描边）。 */
+     面走 sheet 三件套（--xh-material-elevated-bg / -border / -shadow，亮暗两档同有 1px 描边）。 */
   [data-scope='toast'][data-part='root'] {
-    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档（§6.5） */
+    /* 作者塞进指示符槽的图标与皮肤画的兜底字形同一把尺：Feedback 指示符统一 md 档 */
     --xh-icon-size: var(--xh-toast-icon-size, var(--xh-glyph-size-md));
 
     --xh-toast-y: var(--xh-toast-offset-collapsed, 0px);
@@ -356,7 +356,7 @@
   }
 
   /* 操作钮是带文案的离散动作钮：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、禁用面全由 Action Control
-     的 text outline 档给（连接层投 sm；非 Button 的触发器缺省中性描边、透明底，§7.2.2），组件只映射既有使用者槽。
+     的 text outline 档给（连接层投 sm；非 Button 的触发器缺省中性描边、透明底），组件只映射既有使用者槽。
      语气只落到状态字形和标题：这颗钮坐在带 data-tone 的条子里，底 / 边 / 字钉在中性语义面上，不随语气；
      条子是 sheet 白面承载：hover --xh-bg-subtle（100）→ pressed --xh-bg-subtle-hover（200）。
      条子是单行 flex，按钮不参与伸缩：文案长了该换行的是文字 */

package/css/toggle-group.css

@@ -30,8 +30,8 @@
     /* 形态的落点：没写 data-variant 时这十支保持缺省档的取值，段的规则读的是
        「使用者令牌 → 这十支 → 语义令牌」三级，使用者令牌永远排在形态之前。
        未选中那五支管段的壳，选中那五支管当前值那一段。
-       缺省档（subtle）的段坐在自己的淡底面上，悬停 200 → 按下 300（§7.2 淡底承载）；
-       选中段是无滑块开关（§7.3）：品牌淡底 + 淡底前景，悬停 20% → 按下 28% */
+       缺省档（subtle）的段坐在自己的淡底面上，悬停 200 → 按下 300（淡底承载）；
+       选中段是无滑块开关：品牌淡底 + 淡底前景，悬停 20% → 按下 28% */
     --xh-_toggle-group-item-bg: var(--xh-bg-subtle);
     --xh-_toggle-group-item-bg-hover: var(--xh-bg-subtle-hover);
     --xh-_toggle-group-item-bg-active: var(--xh-bg-subtle-active);
@@ -96,7 +96,7 @@
     --xh-_toggle-group-item-highlight-on: none;
   }
 
-  /* outline 与 ghost 的段坐在画布上：悬停 100 → 按下 200（§7.2 白底承载） */
+  /* outline 与 ghost 的段坐在画布上：悬停 100 → 按下 200（白底承载） */
   [data-scope='toggle-group'][data-part='root'][data-variant='outline'] {
     --xh-_toggle-group-item-bg: transparent;
     --xh-_toggle-group-item-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle));
@@ -258,7 +258,7 @@
 
   /* 选中态：单选是 role=radio + aria-checked，多选是原生按钮 + aria-pressed，
      两套 ARIA 各出一半，样式一条都对不上——只有 data-state 是两种模式共同的出口。
-     无滑块开关（§7.3）：品牌淡底 + 淡底前景，悬停 20% → 按下 28%，三态都经桥接槽交给家族画；
+     无滑块开关：品牌淡底 + 淡底前景，悬停 20% → 按下 28%，三态都经桥接槽交给家族画；
      用哪族颜色由 data-tone 决定：语气槽沿继承流下来，root 自己写了 tone 算、
      整组落在语气容器里也算；没有语气就退回品牌配色，与不接语气时逐值相同。
      使用者令牌排在语气之前：写了组件槽就以它为准。