@xihan-ui/styles 1.0.0 → 2.0.0

package/css/tag-group.css

@@ -0,0 +1,219 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tag group 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='tag-group'] {
+    --xh-tag-group-skin: 1;
+  }
+
+  [data-scope='tag-group'][data-part='root'] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--xh-tag-group-gap, var(--xh-space-2));
+  }
+
+  [data-scope='tag-group'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  [data-scope='tag-group'][data-part='label'] {
+    color: var(--xh-tag-group-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-tag-group-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-tag-group-label-font-weight, var(--xh-text-label-weight));
+    line-height: var(--xh-leading-none);
+  }
+
+  [data-scope='tag-group'][data-part='label'][data-disabled] {
+    color: var(--xh-fg-subtle);
+  }
+
+  /* 一排标签横着排、放不下就换行：标签宽度由文字决定，硬撑一行会把整块版面挤破 */
+  [data-scope='tag-group'][data-part='list'] {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--xh-tag-group-list-gap, var(--xh-space-1_5));
+  }
+
+  [data-scope='tag-group'][data-part='list'][hidden] {
+    display: none;
+  }
+
+  /* 竖排时一枚一行，标签各自贴左，不跟着行宽拉长 */
+  [data-scope='tag-group'][data-part='list'][data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: flex-start;
+    flex-wrap: nowrap;
+  }
+
+  /* 焦点在组外时容器自己进 Tab 序列兜底，落焦不画环：高亮永远长在标签上 */
+  [data-scope='tag-group'][data-part='list']:focus-visible {
+    outline: none;
+  }
+
+  /* 一枚标签就是 tag 的 root（data-scope="tag"）：形态、语气、尺寸、置灰、截断、摘除钮的样子全归 tag.css。
+     这里只管它在集合里的那几件事：可点、锚点、选中、只读。
+     标签这时是拿焦点的那个节点，按下与松手之间要有回应；选中与锚点的过渡也挂在这一层 */
+  [data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'] {
+    user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
+  }
+
+  /* 参与选中的标签才是点击目标，只是标记的那些不给手势暗示 */
+  [data-scope='tag-group'][data-part='list'] > [data-scope='tag'][data-part='root'][data-selectable] {
+    cursor: pointer;
+  }
+
+  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件（§9.1），整枚轻微下压并同时换底
+     （白底承载 hover 100 → pressed 200），松手即弹回。置灰的不压；
+     指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root'][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed]) {
+    scale: var(--xh-motion-scale-press);
+    background: var(--xh-tag-group-item-bg-pressed, var(--xh-bg-subtle-hover));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  /* 写了语气的淡底标签静息是 12% 语气淡底（tag.css），悬停 / 按下沿同一条语气曲线走 20% / 28%，
+     不跳回中性阶梯把语气丢掉；与 tag.css 同样带 [data-tone] 限定，语气槽沿继承流下来不算 */
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root'][data-selectable][data-tone]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed]) {
+    background: var(--xh-tag-group-item-bg-pressed, var(--xh-_tone-subtle-active, var(--xh-bg-subtle-hover)));
+  }
+
+  /* 实心档的面本身就是那族色，按下往同一族的 active 档走，字仍是实心底上配对的前景。
+     语气那条与 tag.css 同样带 [data-tone] 限定：语气槽沿继承流下来，没写语气的实心标签落在带
+     data-tone 的组里，静息面与字仍是品牌那族，按下若读祖先的 --xh-_tone-active 就会跳成另一族 */
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root'][data-selectable][data-variant='solid']:not([data-disabled]):is(:active, [data-pressed]) {
+    scale: var(--xh-motion-scale-press);
+    background: var(--xh-tag-group-item-bg-pressed-solid, var(--xh-bg-brand-active));
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
+  }
+
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root'][data-selectable][data-variant='solid'][data-tone]:not([data-disabled]):is(:active, [data-pressed]) {
+    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）：
+     data-highlighted 跟的是连接层记的焦点标签，与选中互相独立。
+     实心标签不进这里：它的字是实心底上配对的那支前景色，换成灰底就读不出来了；
+     实心档在这两档里面不换，回执落在按压缩放与聚焦环上 */
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root']:not([data-disabled]):not([data-variant='solid']):is(:hover, [data-highlighted]) {
+    background: var(--xh-tag-group-item-bg-hover, var(--xh-bg-subtle));
+  }
+
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root'][data-tone]:not([data-disabled]):not([data-variant='solid']):is(:hover, [data-highlighted]) {
+    background: var(--xh-tag-group-item-bg-hover, var(--xh-_tone-subtle-hover, var(--xh-bg-subtle)));
+  }
+
+  /* 只读整组都改不动，但不是禁用：颜色照常，只把「可点」这个暗示收回来。
+     排掉禁用项是因为这条选择器权重高过 pointer 层那条，不排就会把 not-allowed 覆盖回 default */
+  [data-scope='tag-group'][data-part='root'][data-readonly]
+    [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root']:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* —— 选中 —— */
+  /* 页内持久集合的选中（§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);
+  }
+
+  /* 标签里那一格：文字与摘除钮排在一条线上。它是 tag 根与 tag 的 label / close-trigger 之间的一层，
+     间距照抄所在标签的那一档，有它与没它标签长得一样 */
+  [data-scope='tag-group'][data-part='cell'] {
+    display: inline-flex;
+    align-items: center;
+    /* 弹性子项默认最小尺寸是内容尺寸，不归零则长文本把标签撑破、省略号轮不上 */
+    min-inline-size: 0;
+    gap: inherit;
+  }
+
+  [data-scope='tag-group'][data-part='cell'][hidden] {
+    display: none;
+  }
+
+  /* 选中标记：领在文字前面的一枚对号，与摘除钮的叉同一把随文尺（标签是纯行内文字组件）；
+     作者塞进来的图标读同一支 --xh-icon-size。连接层没选中时给 hidden，UA 的 display:none 被上面的 display 盖住，
+     这里压回去 */
+  [data-scope='tag-group'][data-part='item-indicator'] {
+    --xh-icon-size: var(--xh-tag-group-item-indicator-size, var(--xh-glyph-size-text));
+
+    display: inline-flex;
+    flex: none;
+    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);
+  }
+
+  [data-scope='tag-group'][data-part='item-indicator'][hidden] {
+    display: none;
+  }
+
+  /* 没写内容就由皮肤画兜底对号；作者往部件里塞了自己的图形，这条即不命中 */
+  [data-scope='tag-group'][data-part='item-indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-check) center / contain no-repeat;
+  }
+
+  @media (forced-colors: active) {
+    /* 选中靠淡底与配对前景表出，这一档里两者都被统一换掉；用系统高亮反色画回，前导对号是字形节点、自己活得下来 */
+    [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;
+    }
+
+    /* 按下：常态靠底色深一档表出，这一档里底色被统一换成 Canvas；按住那一下用系统高亮反色画回来 */
+    [data-scope='tag-group'][data-part='list']
+      > [data-scope='tag'][data-part='root'][data-selectable]:not([data-disabled]):not([data-variant='solid']):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/css/tag.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 tag 样式。 */
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='tag'] {
@@ -9,11 +16,12 @@
     /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-tag-icon-size, var(--xh-glyph-size-text));
 
-    /* 尺寸档只换这四个私有槽，下面的声明从它们取值 */
+    /* 尺寸档只换这五个私有槽，下面的声明从它们取值；行框是标签里那一行的高，取指示符档 */
     --xh-_tag-gap: var(--xh-space-1);
     --xh-_tag-px: var(--xh-space-2);
-    --xh-_tag-py: var(--xh-space-0_5);
-    --xh-_tag-font-size: var(--xh-text-caption-size);
+    --xh-_tag-py: var(--xh-space-1);
+    --xh-_tag-font-size: var(--xh-text-secondary-size);
+    --xh-_tag-line-h: var(--xh-control-indicator-md);
 
     display: inline-flex;
     align-items: center;
@@ -22,13 +30,17 @@
     gap: var(--xh-tag-gap, var(--xh-_tag-gap));
     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 transparent;
-    border-radius: var(--xh-tag-radius, var(--xh-shape-control));
-    background: var(--xh-tag-bg, var(--xh-bg-subtle));
-    color: var(--xh-tag-fg, var(--xh-fg-default));
+    border: var(--xh-stroke-thin) solid var(--xh-tag-border, var(--xh-material-soft-border));
+    /* 状态 chip 的身份是胶囊（§6.3 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));
+    color: var(--xh-tag-fg, var(--xh-material-soft-fg));
     font-size: var(--xh-tag-font-size, var(--xh-_tag-font-size));
     font-weight: var(--xh-tag-font-weight, var(--xh-font-weight-medium));
-    line-height: var(--xh-leading-none);
+    /* 行框不低于关闭钮，有没有关闭钮同档标签一样高；
+       作者把字调得比这一格还大时行框跟着字走，label 的截断不会剪掉字的上下沿 */
+    line-height: max(calc(var(--xh-leading-none) * 1em), var(--xh-_tag-line-h));
     /* 随文排时与正文基线对齐 */
     vertical-align: middle;
   }
@@ -51,13 +63,15 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    position: relative;
     flex: none;
-    /* 命中区取标签内移除钮的指示符尺寸，不随标签档位缩小 */
+    /* 命中区：作者槽 → 不分档的指示符，三档同一个数，与库里其它标签内的移除钮同一把尺；行框比它高的档里钮居中 */
     block-size: var(--xh-tag-close-size, var(--xh-control-indicator-size));
     inline-size: var(--xh-tag-close-size, var(--xh-control-indicator-size));
     /* 命中区比字形大一圈，往内收一格才不会在标签右缘留出一块空白 */
     margin-inline-end: calc(-1 * var(--xh-space-1));
     border: 0;
+    /* 随文标记档的叉：16px 正方盒取 inset 4px，与 checkbox 系方框同档，嵌在胶囊里内层圆角不越过外层 */
     border-radius: var(--xh-tag-close-radius, var(--xh-shape-inset));
     background: transparent;
     /* 叉取标签自己的文字色：实心底上是浅字、淡底上是深字，不必逐形态各写一遍 */
@@ -68,7 +82,16 @@
     cursor: pointer;
     transition:
       background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+      scale var(--xh-motion-duration-release) var(--xh-motion-ease-release);
+  }
+
+  /* 视觉盒保持 16px，透明命中层扩到随文动作的 24px，不把整枚标签撑高。 */
+  [data-scope='tag'][data-part='close-trigger']::after {
+    position: absolute;
+    inset: calc(
+      (var(--xh-control-action-size) - var(--xh-tag-close-size, var(--xh-control-indicator-size))) / -2
+    );
+    content: '';
   }
 
   /* closable=false 时连接层同时给了 hidden 与 disabled，这条是它真正收起的那一半 */
@@ -81,42 +104,67 @@
     background: var(--xh-tag-close-bg-hover, color-mix(in oklab, currentColor 14%, transparent));
   }
 
-  [data-scope='tag'][data-part='close-trigger']:not(:disabled):active {
+  /* 指针 :active 与 Headless 投影的 data-pressed（Space / Enter 与触屏按住）看见同一副按压面 */
+  [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
     background: var(--xh-tag-close-bg-active, color-mix(in oklab, currentColor 22%, transparent));
     scale: var(--xh-motion-scale-press);
+    transition-duration: var(--xh-motion-duration-press);
+    transition-timing-function: var(--xh-motion-ease-press);
   }
 
-  [data-scope='tag'][data-part='close-trigger']:disabled {
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 按住的叉落着焦点（§9.3 focus-visible + pressed 保留焦点环）：按压面是从字色兑出的 22% 底，
+     压在淡底 / 选中面上把面往字色那头带了一档，默认环与这块混色面在浅色档上只剩 2.2–2.9。
+     环改取叉自己的字色：按压面正是从这支色兑出来的，字色压在它上面的对比与字压在标签面上同源，
+     六族语气与深浅两态都过 3:1；实心档本来就取字色，这条与它同一口径 */
+  [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]):focus-visible {
+    --xh-_ring-color: currentColor;
   }
 
-  [data-scope='tag'][data-part='close-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    /* 环往内收：命中区贴着标签内缘，往外画会被相邻标签压住 */
-    outline-offset: calc(-1 * var(--xh-ring-offset));
+  [data-scope='tag'][data-part='close-trigger']:disabled {
+    color: var(--xh-fg-disabled);
   }
 
   /* —— 形态 —— */
   /* 形态只决定颜色怎么用。每个形态拆成两条：先是没写语气时的基线配色，
      再是写了语气时的覆盖。语气槽会沿继承流下来，覆盖那条必须带 [data-tone] 限定，
      否则一枚没写语气的标签只要落在带 data-tone 的容器里（警告提示、吐司、按钮内）
-     就会跟着染色 */
+     就会跟着染色。
+     实心档还在顶边画一条极浅的内高光，把整块底衬出厚度；语气那条同样从实心底上的前景色兑，
+     换语气时高光跟着换 */
   [data-scope='tag'][data-part='root'][data-variant='solid'] {
+    --xh-_tag-highlight: var(--xh-_highlight-brand);
+
     border-color: transparent;
     background: var(--xh-tag-bg, var(--xh-bg-brand));
     color: var(--xh-tag-fg, var(--xh-fg-on-brand));
+    box-shadow: var(--xh-tag-shadow, var(--xh-_tag-highlight));
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     置灰那档的底已换成静默色、字换成置灰色，不在其列：环退回默认那一支 */
+  [data-scope='tag'][data-part='root'][data-variant='solid']:not([data-disabled]):focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
+  /* 关闭钮自己的面是透空的，环压着的是标签那块实心底；它的字色就是那块底上的前景色，
+     环跟着取过来 */
+  [data-scope='tag'][data-part='root'][data-variant='solid']:not([data-disabled])
+    [data-scope='tag'][data-part='close-trigger']:focus-visible {
+    --xh-_ring-color: currentColor;
   }
 
   [data-scope='tag'][data-part='root'][data-variant='solid'][data-tone] {
+    --xh-_tag-highlight: var(--xh-_highlight-tone);
+
     background: var(--xh-tag-bg, var(--xh-_tone, var(--xh-bg-brand)));
     color: var(--xh-tag-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
   }
 
   [data-scope='tag'][data-part='root'][data-variant='subtle'] {
-    border-color: transparent;
-    background: var(--xh-tag-bg, var(--xh-bg-subtle));
-    color: var(--xh-tag-fg, var(--xh-fg-default));
+    border-color: var(--xh-tag-border, var(--xh-material-soft-border));
+    background: var(--xh-tag-bg, var(--xh-material-soft-bg));
+    color: var(--xh-tag-fg, var(--xh-material-soft-fg));
   }
 
   [data-scope='tag'][data-part='root'][data-variant='subtle'][data-tone] {
@@ -127,6 +175,7 @@
   [data-scope='tag'][data-part='root'][data-variant='outline'] {
     border-color: var(--xh-tag-border, var(--xh-border-default));
     background: transparent;
+    box-shadow: none;
     color: var(--xh-tag-fg, var(--xh-fg-default));
   }
 
@@ -137,19 +186,32 @@
     color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
   }
 
+  [data-scope='tag'][data-part='root'][data-variant='ghost'] {
+    border-color: transparent;
+    background: transparent;
+    box-shadow: none;
+    color: var(--xh-tag-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='tag'][data-part='root'][data-variant='ghost'][data-tone] {
+    color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
+  }
+
   /* —— 尺寸 —— */
-  /* 标签是随文排的标记，不占控件行高，档位走间距与字号而不是 control-h */
+  /* 标签是随文排的标记，不占控件行高，档位走间距、字号与行框而不是 control-h */
   [data-scope='tag'][data-part='root'][data-size='sm'] {
     --xh-_tag-gap: var(--xh-space-0_5);
     --xh-_tag-px: var(--xh-space-1_5);
-    --xh-_tag-py: var(--xh-space-0);
+    --xh-_tag-py: var(--xh-space-0_5);
+    --xh-_tag-font-size: var(--xh-text-caption-size);
   }
 
+  /* 行框上到指示符的大档，竖向内衬沿用中档；关闭钮不换档 */
   [data-scope='tag'][data-part='root'][data-size='lg'] {
     --xh-_tag-gap: var(--xh-space-1_5);
     --xh-_tag-px: var(--xh-space-3);
-    --xh-_tag-py: var(--xh-space-1);
-    --xh-_tag-font-size: var(--xh-text-secondary-size);
+    --xh-_tag-font-size: var(--xh-text-body-size);
+    --xh-_tag-line-h: var(--xh-control-indicator-lg);
   }
 
   /* —— 禁用 —— */
@@ -159,10 +221,38 @@
      用了 fg-disabled 就不再叠 opacity */
   [data-scope='tag'][data-part='root'][data-disabled],
   [data-scope='tag'][data-part='root'][data-tone][data-disabled] {
-    border-color: var(--xh-tag-border-disabled, var(--xh-border-subtle));
+    border-color: var(--xh-tag-border-disabled, var(--xh-border-default));
     background: var(--xh-tag-bg-disabled, var(--xh-bg-muted));
     color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    /* 底已经退成置灰色，实心档那条内高光跟着收掉 */
+    box-shadow: none;
+  }
+
+  /*
+   * 打印：底色被丢掉，实心与淡底两档的底一起没了。实心档配的是实心底上的前景色，
+   * 底一没那行字就落在白纸上——白字印在白纸上，整枚标签只剩一块空白。
+   * 两档在纸上都退成描边档：字色回到正文色，轮廓由边框接手，内高光跟着收掉。
+   * 两条选择器分别压过形态与语气这两层覆盖点；禁用档摘掉，它自己就是灰的。
+   */
+  @media print {
+    [data-scope='tag'][data-part='root']:not([data-disabled]),
+    [data-scope='tag'][data-part='root'][data-variant][data-tone]:not([data-disabled]) {
+      border-color: currentColor;
+      background: none;
+      color: var(--xh-fg-default);
+      box-shadow: none;
+    }
+  }
+
+  /*
+   * 高对比档：关闭钮的按压面常态靠从 currentColor 兑出来的底色表出，这一档里底色被统一换成 Canvas，
+   * 按住那一下与静息塌成同一个样子；用系统高亮反色画回来，兜底字形读 currentColor、自己跟着换
+   */
+  @media (forced-colors: active) {
+    [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
+      background: Highlight;
+      color: HighlightText;
+    }
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */