@xihan-ui/styles 3.1.0 → 4.0.0

package/css/switch.css

@@ -17,17 +17,18 @@
   }
 
   [data-scope='switch'][data-part='root'] {
-    /* 尺寸档只换轨道高度这一个私有槽，其余几何都从它算出来：
-       滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长 */
+    /* 尺寸档只换轨道高度与留白两个私有槽，其余几何都从它们算出来：
+       滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长。
+       md 留白 4px：24px 轨道配 16px 滑块、40px 宽；sm 留白收到 2px，滑块不至于小到点不准 */
     --xh-_switch-track-h: var(--xh-switch-track-h-md);
-    --xh-_switch-pad: var(--xh-space-0_5);
+    --xh-_switch-pad: var(--xh-space-1);
     --xh-_switch-thumb-size: calc(var(--xh-_switch-track-h) - var(--xh-_switch-pad) * 2);
     --xh-_switch-thumb-press-stretch: var(--xh-switch-thumb-press-stretch, var(--xh-motion-distance-sm));
 
     /* 选中态轨道色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
     --xh-_switch-accent: var(--xh-_tone, var(--xh-bg-brand));
-    /* 轨道边界以内描边表达，不吃掉滑块行程；checked / readonly / invalid / disabled 只换这一支色。 */
-    --xh-_switch-track-border: var(--xh-switch-border, var(--xh-border-control));
+    /* 轨道的面就是边界：静息内描边透明；readonly / invalid 才换成有色的一圈，不吃掉滑块行程 */
+    --xh-_switch-track-border: var(--xh-switch-border, transparent);
     /* 轨道的面：未选中是 --xh-bg-subtle-active（300）的实体字段控件面；checked / readonly / disabled 换这一支。
        静息已是 300，中性阶梯再无更深一档可换：按下的底缺省仍是轨道静息面（使用者可经 --xh-switch-bg-pressed
        另给），换面的通道由下面滑块的橡皮带拉伸与压平投影承担；选中轨道按下换到语气的 active 档 */
@@ -35,7 +36,7 @@
     --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 档（定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+    /* 轨道接 Action Control text 档（定尺轨道）：悬停 / 按下 / 禁用面、按压与换底、粗指针热区、
        焦点环与过渡由家族配方给，这里只把轨道的私有槽映射到桥接槽。轨道没有实描边（边界以内描边画，不吃行程），
        边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（阶梯只给按下） */
     --xh-action-visual-size: var(--xh-_switch-track-h);
@@ -132,6 +133,7 @@
   /* 缺省档写在上面的基础规则里 */
   [data-scope='switch'][data-part='root'][data-size='sm'] {
     --xh-_switch-track-h: var(--xh-switch-track-h-sm);
+    --xh-_switch-pad: var(--xh-space-0_5);
   }
 
   [data-scope='switch'][data-part='root'][data-size='lg'] {
@@ -158,7 +160,7 @@
   }
 
   /* 滑块是 raised 抬起面（可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
-     --xh-elevation-raised 影，无顶光；描边必须在，影只是加成 */
+     --xh-elevation-raised 影（缺省 none），无顶光；描边必须在，影只是加成 */
   [data-scope='switch'][data-part='thumb'] {
     position: relative;
     display: grid;

package/css/table.css

@@ -28,6 +28,10 @@
        --xh-control-indicator-* 一族——五颗把手在自己身上把 --xh-icon-size 改接到方盒的尺，排序钮那支叫 --xh-table-sort-size */
     --xh-icon-size: var(--xh-table-icon-size, var(--xh-glyph-size-md));
 
+    /* 表头底比行悬停的淡底浅一档：淡底在表体里是悬停与斑马纹的面，表头再取同一档就压得比数据还重。
+       取淡底的 55% 兑进承载面，与字段静息底同一档深浅；两端都是实色，吸顶时滚过去的行不会从它底下透出来 */
+    --xh-_table-header-bg: color-mix(in srgb, var(--xh-bg-subtle-opaque) 55%, var(--xh-bg-surface));
+
     /* 密度档只换这两个私有槽：单元格与列标题从 root 继承前者，字号靠 font-size 本身继承下去，
        换档不必给每个部件各写一条选择器，列宽那套算法也一点不碰 */
     --xh-_table-cell-py: var(--xh-table-cell-py-md);
@@ -186,7 +190,7 @@
 
     /* 表头与表体之间是内部分隔，与行间横线同一支：外边才取 default */
     border-block-end: var(--xh-stroke-thin) solid var(--xh-table-header-border, var(--xh-border-subtle));
-    background: var(--xh-table-header-bg, var(--xh-bg-subtle-opaque));
+    background: var(--xh-table-header-bg, var(--xh-_table-header-bg));
   }
 
   /* 吸顶：滚动容器是 root，表头钉在它的上沿。背景必须是实色——
@@ -289,7 +293,7 @@
     gap: var(--xh-table-cell-gap, var(--xh-control-gap-md));
     min-inline-size: var(--xh-table-cell-min-w, 3rem);
     padding-block: var(--xh-table-cell-py, var(--xh-_table-cell-py));
-    padding-inline: var(--xh-table-cell-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-table-cell-px, var(--xh-space-4));
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -300,9 +304,15 @@
     display: none;
   }
 
+  /* 格子里放的字段族控件（就地编辑的单元格）铺满这一格，与放进 Field 时一样；并排几个就平分，各自的压缩底线照旧 */
+  [data-scope='table'][data-part='cell'] {
+    --xh-control-w: 100%;
+  }
+
   [data-scope='table'][data-part='column-header'] {
-    color: var(--xh-table-column-fg, var(--xh-fg-muted));
-    font-weight: var(--xh-table-column-font-weight, var(--xh-text-label-weight));
+    /* 列头与正文同色、加一档字重：表头靠淡底与字重和表体分开，不再靠淡字 */
+    color: var(--xh-table-column-fg, var(--xh-fg-default));
+    font-weight: var(--xh-table-column-font-weight, var(--xh-font-weight-medium));
     text-align: start;
     user-select: none;
   }
@@ -393,7 +403,7 @@
   /* 表头行本身透明（露出表头底），吸附的列头继承到的就是透明——得自己带表头底，
      否则横向滚动时其它列头从它下面穿过去 */
   [data-scope='table'][data-part='column-header'][data-frozen] {
-    background: var(--xh-table-header-bg, var(--xh-bg-subtle-opaque));
+    background: var(--xh-table-header-bg, var(--xh-_table-header-bg));
   }
 
   /* 冻结列的边界：紧挨滚动区的那一列在朝向滚动区的一侧画一道描边，只在确有内容被压住时出现——
@@ -419,8 +429,8 @@
   }
 
   /* root 恒报两端（没有冻结列时两端都算贴着）；虚拟滚动的行隔着视口，按后代认 */
-  [data-scope='table'][data-part='root']:not([data-at-min-horizontal]) :is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='start']::after,
-  [data-scope='table'][data-part='root']:not([data-at-max-horizontal]) :is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='end']::after {
+  [data-scope='table'][data-part='root']:not([data-at-min-horizontal]) :is([data-part='column-header'], [data-part='cell']):where([data-scope='table'])[data-frozen-edge][data-frozen='start']::after,
+  [data-scope='table'][data-part='root']:not([data-at-max-horizontal]) :is([data-part='column-header'], [data-part='cell']):where([data-scope='table'])[data-frozen-edge][data-frozen='end']::after {
     opacity: 1;
   }
 
@@ -457,9 +467,11 @@
     background: var(--xh-table-bg, var(--xh-bg-subtle));
   }
 
-  /* 竖分隔线：列与列之间一道细线，末列不画 */
+  /* 竖分隔线：列与列之间一道细线，末列不画。线占的那一截从末端内衬里让出来，格子里放字的宽度与不开竖线时一样：
+     否则 60px 的序号列开了竖线只剩 27.33px，「序号」两个字差不到一个像素就出省略号，关掉竖线又放得下 */
   [data-scope='table'][data-part='root'][data-split] [data-scope='table'][data-part='column-header']:not(:last-child),
   [data-scope='table'][data-part='root'][data-split] [data-scope='table'][data-part='cell']:not(:last-child) {
+    padding-inline-end: calc(var(--xh-table-cell-px, var(--xh-space-4)) - var(--xh-stroke-thin));
     border-inline-end: var(--xh-stroke-thin) solid var(--xh-table-row-border, var(--xh-border-subtle));
   }
 
@@ -562,7 +574,7 @@
   [data-scope='table'][data-part='row-select-trigger'],
   [data-scope='table'][data-part='column-visibility-trigger'] {
     --xh-_table-trigger-bg: transparent;
-    --xh-_table-trigger-border: var(--xh-table-trigger-border, var(--xh-border-control));
+    --xh-_table-trigger-border: var(--xh-table-trigger-border, var(--xh-border-strong));
     --xh-_table-trigger-fg: var(--xh-table-trigger-fg, var(--xh-fg-on-brand));
     --xh-action-fg-rest: var(--xh-_table-trigger-fg);
     --xh-action-fg-hover: var(--xh-_table-trigger-fg);
@@ -1063,7 +1075,7 @@
   /* 取下一页的按钮：铺满一行摆在表尾——铺满一行的独立动作条目，接 Action Control 的 row 档、
      ghost 形态：宽度由容器给、高度随内容、按下只换面不缩放；盒几何、悬停 / 按下 / 禁用面、
      焦点环与粗指针热区全由家族给，白底承载 hover 100 → pressed 200。
-     这里只把使用者槽映射到桥接槽并把文案居中：它是一行里唯一的东西，靠起始缘会像一条没对齐的行 */
+     这里只把使用者槽映射到桥接槽，文案居中写在下一条 */
   [data-scope='table'][data-part='load-more-trigger'] {
     --xh-action-gap: var(--xh-table-load-more-trigger-gap, var(--xh-space-2));
     --xh-action-padding-block: var(--xh-table-load-more-trigger-py, var(--xh-space-3));
@@ -1075,12 +1087,17 @@
     --xh-action-fg-pressed: var(--xh-table-load-more-trigger-fg, var(--xh-fg-brand-strong));
     --xh-action-font-size: var(--xh-table-load-more-trigger-font-size, var(--xh-_table-font-size));
 
-    justify-content: center;
-    text-align: center;
     /* row 档允许换行、高度随内容，折行的文案走正文行高 */
     line-height: var(--xh-leading-normal);
   }
 
+  /* 文案居中（单行整段居中，折行逐行居中），盖掉 row 档的靠起始缘排布：它是一行里唯一的东西，
+     靠起始缘会像一条没对齐的行。选择器点名 row 档，有层与无层两份产物里都压得住它 */
+  [data-scope='table'][data-part='load-more-trigger'][data-xh-action-profile='row'] {
+    justify-content: center;
+    text-align: center;
+  }
+
   [data-scope='table'][data-part='load-more-trigger'][hidden] {
     display: none;
   }

package/css/tabs.css

@@ -17,9 +17,11 @@
   }
 
   [data-scope='tabs'][data-part='root'] {
-    /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器 */
-    --xh-_tabs-trigger-h: var(--xh-control-h-md);
-    --xh-_tabs-trigger-px: var(--xh-control-px-md);
+    /* 尺寸档只换这三个私有槽，标签从 root 继承它们，换档不必给每个部件各写一条选择器。
+       缺省的 line 档是导航：标签带取导航行高（md 40px），标签之间不留缝、横内衬 16px，
+       相邻两段文字隔 32px、首个标签的文字离起始边 16px；card / segment 是控件，在各自的形态块里换回控件尺 */
+    --xh-_tabs-trigger-h: var(--xh-nav-row-h-md);
+    --xh-_tabs-trigger-px: var(--xh-space-4);
     --xh-_tabs-trigger-font-size: var(--xh-control-font-md);
 
     /* 缺省是 line 变体：透明标签带，选中项由文字与底部指示条表达。Web Components 升级前还没有
@@ -32,7 +34,7 @@
     --xh-_tabs-list-bg: transparent;
     --xh-_tabs-list-p: var(--xh-space-0);
     --xh-_tabs-list-radius: 0;
-    --xh-_tabs-list-border-width: 0;
+    --xh-_tabs-list-border-width: var(--xh-stroke-thin);
     --xh-_tabs-trigger-border-width: 0;
     --xh-_tabs-trigger-border: transparent;
     --xh-_tabs-trigger-radius: var(--xh-shape-control);
@@ -40,7 +42,7 @@
     /* 语气落在选中态：指示条与选中标签的文字。
        没写 data-tone 时 --xh-_tone 一族没被声明，两个槽都退回原来的取色 */
     --xh-_tabs-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
+    --xh-_tabs-accent-text: var(--xh-_tone-fg, var(--xh-fg-brand));
 
     /* 翻页钮的盖底：标签带放不下时它浮在两端，挪到它底下的那截标签要被盖住。line / card 档的标签带是透明的，
        盖底取 surface；坐在别的面上（画布、淡底面板）时由使用者槽换成所在的面。segment 档取轨道的淡底。
@@ -65,25 +67,41 @@
   /* —— 尺寸 —— */
   /* 缺省档写在上面的基础规则里 */
   [data-scope='tabs'][data-part='root'][data-size='sm'] {
-    --xh-_tabs-trigger-h: var(--xh-control-h-sm);
-    --xh-_tabs-trigger-px: var(--xh-control-px-sm);
+    --xh-_tabs-trigger-h: var(--xh-nav-row-h-sm);
+    --xh-_tabs-trigger-px: var(--xh-space-3);
     --xh-_tabs-trigger-font-size: var(--xh-control-font-sm);
   }
 
   [data-scope='tabs'][data-part='root'][data-size='lg'] {
+    --xh-_tabs-trigger-h: var(--xh-nav-row-h-lg);
+    --xh-_tabs-trigger-px: var(--xh-space-5);
+    --xh-_tabs-trigger-font-size: var(--xh-control-font-lg);
+  }
+
+  /* card / segment 的标签是控件：高度与横内衬回到控件尺，三档逐档对齐 */
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment']) {
+    --xh-_tabs-trigger-h: var(--xh-control-h-md);
+    --xh-_tabs-trigger-px: var(--xh-control-px-md);
+  }
+
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])[data-size='sm'] {
+    --xh-_tabs-trigger-h: var(--xh-control-h-sm);
+    --xh-_tabs-trigger-px: var(--xh-control-px-sm);
+  }
+
+  [data-scope='tabs'][data-part='root']:is([data-variant='card'], [data-variant='segment'])[data-size='lg'] {
     --xh-_tabs-trigger-h: var(--xh-control-h-lg);
     --xh-_tabs-trigger-px: var(--xh-control-px-lg);
-    --xh-_tabs-trigger-font-size: var(--xh-control-font-lg);
   }
 
   /* —— 变体 —— */
-  /* 主变体的显式写法，与缺省视觉一致：透明标签带与底部基线，选中项由文字和滑动指示条强调。 */
+  /* 主变体的显式写法，与缺省视觉一致：透明标签带与 1px 底部基线，选中项由文字和滑动指示条强调。 */
   [data-scope='tabs'][data-part='root'][data-variant='line'] {
     --xh-_tabs-list-gap: var(--xh-space-0);
     --xh-_tabs-list-bg: transparent;
     --xh-_tabs-list-p: var(--xh-space-0);
     --xh-_tabs-list-radius: 0;
-    --xh-_tabs-list-border-width: 0;
+    --xh-_tabs-list-border-width: var(--xh-stroke-thin);
     --xh-_tabs-trigger-border-width: 0;
     --xh-_tabs-trigger-border: transparent;
     --xh-_tabs-trigger-radius: var(--xh-shape-control);
@@ -115,7 +133,8 @@
   [data-scope='tabs'][data-part='root'][data-variant='segment'] {
     --xh-_tabs-list-gap: var(--xh-space-0_5);
     --xh-_tabs-list-bg: var(--xh-bg-subtle);
-    --xh-_tabs-list-p: var(--xh-space-1);
+    /* 轨道内衬 2px：滑块的 control 圆角不得大于轨道 surface 圆角减去内衬 */
+    --xh-_tabs-list-p: var(--xh-space-0_5);
     --xh-_tabs-list-radius: var(--xh-shape-surface);
     --xh-_tabs-list-border-width: 0;
     --xh-_tabs-trigger-border-width: var(--xh-stroke-thin);
@@ -476,7 +495,8 @@
     /* 摆在行首，落点交给 transform（只走合成），长度跟着标签宽走。标签带挪动时整条孩子
        共用的 translate 叠在它之上，两者互不覆盖，过渡也只挂在 transform 上 */
     position: absolute;
-    inset-block-end: 0;
+    /* line 档标签带底边有一道 1px 基线，指示条压在它上面而不是悬在它上方 */
+    inset-block-end: calc(-1 * var(--xh-_tabs-list-border-width));
     inset-inline-start: 0;
     inline-size: var(--xh-_tabs-indicator-w);
     block-size: var(--xh-tabs-indicator-thickness, var(--xh-stroke-thick));
@@ -736,6 +756,8 @@
     grid-column: 2;
     align-self: center;
     margin-inline-start: var(--xh-space-1);
+    /* line 档标签带底边多一道基线，这一行比标签高出它的厚度：钮让出同样一截，居中才落在标签的中线上 */
+    margin-block-end: var(--xh-_tabs-list-border-width);
   }
 
   /* 竖排：标签带与钮上下叠成左侧一列（钮在列尾），面板占右侧那一轨、跨两行 */
@@ -764,6 +786,7 @@
     align-self: auto;
     margin-inline-start: 0;
     margin-block-start: var(--xh-space-1);
+    margin-block-end: 0;
   }
 
   /* 钮本身：接 Action Control icon 档 ghost 面（连接层投影 profile / variant / size），盒取标签同高的正方形，

package/css/tag-group.css

@@ -40,7 +40,7 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--xh-tag-group-list-gap, var(--xh-space-1_5));
+    gap: var(--xh-tag-group-list-gap, var(--xh-space-2));
   }
 
   [data-scope='tag-group'][data-part='list'][hidden] {
@@ -88,13 +88,13 @@
     cursor: pointer;
   }
 
-  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件，整枚轻微下压并同时换底
-     （白底承载 hover 100 → pressed 200），松手即弹回。置灰的不压；
-     指针 :active 与 Headless 投影的 data-pressed 看见同一副按压面 */
+  /* 按下去要有回应：可选的芯片是一颗定尺的离散控件，按下换底并取按压缩放，松手即弹回。
+     标签静息就是淡底，按淡底阶梯走 hover 200 → pressed 300；无壳档静息透明，走白底阶梯（见下）。
+     置灰的不压；指针 :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));
+    background: var(--xh-tag-group-item-bg-pressed, var(--xh-bg-subtle-active));
     transition-duration: var(--xh-motion-duration-press);
     transition-timing-function: var(--xh-motion-ease-press);
   }
@@ -122,15 +122,26 @@
     background: var(--xh-tag-group-item-bg-pressed-solid, var(--xh-_tone-active, var(--xh-bg-brand-active)));
   }
 
-  /* 悬停与键盘锚点共用白底承载的 hover 档（hover 100 → pressed 200）：
+  /* 悬停与键盘锚点共用一档：标签静息淡底，hover 升到 200（与静息同为 100 就看不出悬停）。
      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-hover));
+  }
+
+  /* 无壳档静息透明，坐在白底上：hover 100 → pressed 200 */
+  [data-scope='tag-group'][data-part='list']
+    > [data-scope='tag'][data-part='root'][data-variant='ghost']:not([data-tone]):not([data-disabled]):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-variant='ghost'][data-selectable]:not([data-tone]):not([data-disabled]):is(:active, [data-pressed]) {
+    background: var(--xh-tag-group-item-bg-pressed, var(--xh-bg-subtle-hover));
+  }
+
   [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)));

package/css/tag.css

@@ -19,11 +19,13 @@
     /* 作者塞进指示符槽的图标跟着字号走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-tag-icon-size, var(--xh-glyph-size-text));
 
-    /* 尺寸档只换这五个私有槽，下面的声明从它们取值；行框是标签里那一行的高，取指示符档 */
+    /* 尺寸档只换这几个私有槽，下面的声明从它们取值。块尺寸按状态 chip 的档取（sm / md / lg = 20 / 24 / 28），
+       竖向内衬为 0、字在盒里居中；行框是标签里那一行的高，取指示符档，关闭钮按它对齐 */
     --xh-_tag-gap: var(--xh-space-1);
     --xh-_tag-px: var(--xh-space-2);
-    --xh-_tag-py: var(--xh-space-1);
-    --xh-_tag-font-size: var(--xh-text-secondary-size);
+    --xh-_tag-py: 0;
+    --xh-_tag-h: var(--xh-chip-h-md);
+    --xh-_tag-font-size: var(--xh-text-caption-size);
     --xh-_tag-line-h: var(--xh-control-indicator-md);
 
     display: inline-flex;
@@ -33,12 +35,14 @@
     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 var(--xh-tag-border, var(--xh-material-soft-border));
-    /* 状态 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));
-    color: var(--xh-tag-fg, var(--xh-material-soft-fg));
+    min-block-size: var(--xh-tag-h, var(--xh-_tag-h));
+    box-sizing: border-box;
+    /* 缺省是一块淡底的小方签：无边、无影，圆角与控件同档 */
+    border: var(--xh-stroke-thin) solid var(--xh-tag-border, transparent);
+    border-radius: var(--xh-tag-radius, var(--xh-shape-control));
+    background: var(--xh-tag-bg, var(--xh-bg-subtle));
+    box-shadow: var(--xh-tag-shadow, none);
+    color: var(--xh-tag-fg, var(--xh-fg-default));
     font-size: var(--xh-tag-font-size, var(--xh-_tag-font-size));
     font-weight: var(--xh-tag-font-weight, var(--xh-font-weight-medium));
     /* 行框不低于关闭钮，有没有关闭钮同档标签一样高；
@@ -138,15 +142,12 @@
      再是写了语气时的覆盖。语气槽会沿继承流下来，覆盖那条必须带 [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));
+    box-shadow: var(--xh-tag-shadow, none);
   }
 
   /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
@@ -164,41 +165,42 @@
   }
 
   [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-xh-ink-surface）：面内的图标与作者内容按这块底取墨色。
-     底色随语气与禁用换，这里跟着换 */
-  [data-scope='tag'][data-part='root'][data-xh-ink-surface] {
+     底色随语气与禁用换，这里跟着换。连接层只在实心档投影这个标记，选择器与形态写在一起，
+     别的形态（淡底、描边）的面不会被当成这块底去选墨 */
+  [data-scope='tag'][data-part='root'][data-variant='solid'][data-xh-ink-surface] {
     --xh-ink-surface: var(--xh-tag-bg, var(--xh-bg-brand));
   }
 
-  [data-scope='tag'][data-part='root'][data-xh-ink-surface][data-tone] {
+  [data-scope='tag'][data-part='root'][data-variant='solid'][data-xh-ink-surface][data-tone] {
     --xh-ink-surface: var(--xh-tag-bg, var(--xh-_tone, var(--xh-bg-brand)));
   }
 
-  [data-scope='tag'][data-part='root'][data-xh-ink-surface][data-disabled] {
+  [data-scope='tag'][data-part='root'][data-variant='solid'][data-xh-ink-surface][data-disabled] {
     /* 置灰面是墨色淡底：选墨只看分量、不看透明度，取它的不透明档 */
     --xh-ink-surface: var(--xh-tag-bg-disabled, var(--xh-bg-muted-opaque));
   }
 
   [data-scope='tag'][data-part='root'][data-variant='subtle'] {
-    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));
+    border-color: var(--xh-tag-border, transparent);
+    background: var(--xh-tag-bg, var(--xh-bg-subtle));
+    color: var(--xh-tag-fg, var(--xh-fg-default));
   }
 
-  [data-scope='tag'][data-part='root'][data-variant='subtle'][data-tone] {
+  /* 没写形态与 subtle 同一副：写了语气就换语气淡底与语气字 */
+  [data-scope='tag'][data-part='root']:is(:not([data-variant]), [data-variant='subtle'])[data-tone] {
     background: var(--xh-tag-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle)));
     color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
   }
 
+  /* 描边档在淡底上再加一道边：边是这一档唯一多出来的东西 */
   [data-scope='tag'][data-part='root'][data-variant='outline'] {
     border-color: var(--xh-tag-border, var(--xh-border-default));
-    background: transparent;
+    background: var(--xh-tag-bg, var(--xh-bg-subtle));
     box-shadow: none;
     color: var(--xh-tag-fg, var(--xh-fg-default));
   }
@@ -207,6 +209,7 @@
      兑了底色的 --xh-_tone-border 六族都在 1.44-2.18，当轮廓看不清 */
   [data-scope='tag'][data-part='root'][data-variant='outline'][data-tone] {
     border-color: var(--xh-tag-border, var(--xh-_tone-border-control, var(--xh-border-default)));
+    background: var(--xh-tag-bg, var(--xh-_tone-subtle, var(--xh-bg-subtle)));
     color: var(--xh-tag-fg, var(--xh-_tone-fg, var(--xh-fg-default)));
   }
 
@@ -226,18 +229,40 @@
   [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_5);
-    --xh-_tag-font-size: var(--xh-text-caption-size);
+    --xh-_tag-h: var(--xh-chip-h-sm);
   }
 
-  /* 行框上到指示符的大档，竖向内衬沿用中档；关闭钮不换档 */
+  /* 大档换正文字号、行框上到指示符的大档；关闭钮不换档 */
   [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-h: var(--xh-chip-h-lg);
     --xh-_tag-font-size: var(--xh-text-body-size);
     --xh-_tag-line-h: var(--xh-control-indicator-lg);
   }
 
+  /* —— 字段里的已选标签 —— */
+  /* 坐在字段盒里的标签（Select / Combobox / Cascader / TreeSelect / 各类 Picker 的标签行与 TagsInput）是已选值的摘要：
+     大档字段里字号也钉在说明档，换成正文字号会与输入的文字抢层级。排在尺寸档之后，同特指度下压得住 */
+  :where([data-xh-field-chrome]) [data-scope='tag'][data-part='root'][data-size='lg'] {
+    --xh-_tag-font-size: var(--xh-text-caption-size);
+  }
+
+  /* 盒没聚焦时铺着字段淡底，淡底标签几乎化进底里：换成白底 + 缺省描边一枚枚立出来，叉的悬停 / 按下随之
+     走白底阶梯 100 → 200；聚焦后盒换成白色承载面，标签回到自己的淡底。禁用的盒不换（标签照禁用档置灰），
+     写了语气的、实心与无壳的标签保留自己的面；--xh-tag-* 覆盖槽照旧优先 */
+  :where([data-xh-field-chrome]:not(:focus-within):not([data-disabled])) [data-scope='tag'][data-part='root']:is(:not([data-variant]), [data-variant='subtle'], [data-variant='outline']):not([data-tone], [data-disabled]) {
+    border-color: var(--xh-tag-border, var(--xh-border-default));
+    background: var(--xh-tag-bg, var(--xh-bg-surface));
+  }
+
+  :where([data-xh-field-chrome]:not(:focus-within):not([data-disabled])) [data-scope='tag'][data-part='root']:is(:not([data-variant]), [data-variant='subtle'], [data-variant='outline']):not([data-tone], [data-disabled]) [data-scope='tag'][data-part='close-trigger']:hover:not(:disabled) {
+    background: var(--xh-tag-close-bg-hover, var(--xh-bg-subtle));
+  }
+
+  :where([data-xh-field-chrome]:not(:focus-within):not([data-disabled])) [data-scope='tag'][data-part='root']:is(:not([data-variant]), [data-variant='subtle'], [data-variant='outline']):not([data-tone], [data-disabled]) [data-scope='tag'][data-part='close-trigger']:not(:disabled):is(:active, [data-pressed]) {
+    background: var(--xh-tag-close-bg-active, var(--xh-bg-subtle-hover));
+  }
+
   /* —— 禁用 —— */
   /* 排在形态之后，靠源序压过形态给的配色。第二条选择器专为写了语气的标签而设：
      语气覆盖那几条比第一条多一个属性，不把 [data-tone] 一起写上，

package/css/tags-input.css

@@ -22,15 +22,17 @@
     /* 作者塞进来的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
     --xh-icon-size: var(--xh-tags-input-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这九个私有槽，标题、框、输入框与就地编辑框都从 root 继承它们，
+    /* 尺寸档只换这几个私有槽，标题、框、输入框与就地编辑框都从 root 继承它们，
        换档不必给每个部件各写一条选择器。标签本身是 tag，档位由 data-size 传下去，不走这些槽；
-       就地编辑框的四个槽照 tag 那一档的行框、内衬与字号写，换进换出时与标签一样高 */
+       就地编辑框的块尺寸、行框、内衬与字号照 tag 那一档写（块尺寸取状态 chip 档、竖向内衬为 0），
+       换进换出时与标签一样高 */
     --xh-_tags-input-control-h: var(--xh-control-h-md);
     --xh-_tags-input-control-px: var(--xh-control-px-md);
-    --xh-_tags-input-control-gap: var(--xh-control-gap-md);
+    --xh-_tags-input-control-gap: var(--xh-space-1);
     --xh-_tags-input-input-font-size: var(--xh-control-font-md);
     --xh-_tags-input-item-font-size: var(--xh-control-caption-md);
-    --xh-_tags-input-item-py: var(--xh-space-1);
+    --xh-_tags-input-item-h: var(--xh-chip-h-md);
+    --xh-_tags-input-item-py: 0;
     --xh-_tags-input-item-px: var(--xh-space-2);
     --xh-_tags-input-item-line-h: var(--xh-control-indicator-md);
     /* 光标走到的那颗标签是「当前项」，不是选中：淡底 + 淡底前景，随语气走。
@@ -58,10 +60,9 @@
     --xh-icon-size: var(--xh-tags-input-icon-size, var(--xh-glyph-size-sm));
     --xh-_tags-input-control-h: var(--xh-control-h-sm);
     --xh-_tags-input-control-px: var(--xh-control-px-sm);
-    --xh-_tags-input-control-gap: var(--xh-control-gap-sm);
     --xh-_tags-input-input-font-size: var(--xh-control-font-sm);
     --xh-_tags-input-item-font-size: var(--xh-control-caption-sm);
-    --xh-_tags-input-item-py: var(--xh-space-0_5);
+    --xh-_tags-input-item-h: var(--xh-chip-h-sm);
     --xh-_tags-input-item-px: var(--xh-space-1_5);
   }
 
@@ -69,21 +70,23 @@
     --xh-icon-size: var(--xh-tags-input-icon-size, var(--xh-glyph-size-lg));
     --xh-_tags-input-control-h: var(--xh-control-h-lg);
     --xh-_tags-input-control-px: var(--xh-control-px-lg);
-    --xh-_tags-input-control-gap: var(--xh-control-gap-lg);
     --xh-_tags-input-input-font-size: var(--xh-control-font-lg);
     --xh-_tags-input-item-font-size: var(--xh-control-caption-lg);
+    --xh-_tags-input-item-h: var(--xh-chip-h-lg);
     --xh-_tags-input-item-px: var(--xh-space-3);
     --xh-_tags-input-item-line-h: var(--xh-control-indicator-lg);
   }
 
   [data-scope='tags-input'][data-part='label'] {
-    color: var(--xh-tags-input-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-tags-input-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-tags-input-label-gap, var(--xh-space-2)) - var(--xh-tags-input-gap, var(--xh-space-1)));
+    color: var(--xh-tags-input-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-tags-input-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-tags-input-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='tags-input'][data-part='label'][data-disabled] {
-    color: var(--xh-tags-input-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-tags-input-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 标签换行排，输入框跟在最后一个标签后面：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome
@@ -104,8 +107,6 @@
     --xh-field-border-hover: var(--xh-tags-input-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-tags-input-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-tags-input-control-border-invalid, var(--xh-_field-variant-border-invalid));
-    --xh-field-ring-focus: var(--xh-ring-focus);
-    --xh-field-ring-invalid: var(--xh-ring-invalid);
     --xh-field-shadow-rest: var(--xh-tags-input-control-shadow, none);
     --xh-field-cursor-read-only: default;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
@@ -123,6 +124,12 @@
     display: none;
   }
 
+  /* 盒里有标签时起始内衬收到 --xh-space-1，标签之间、标签与输入框之间隔 --xh-space-1（盒的 gap 缺省就是它）：
+     标签自带内距，行首再留一整段控件内衬就显得空。标签自己的面（没聚焦时白底 + 描边）写在 tag.css 的字段宿主档 */
+  [data-scope='tags-input'][data-part='control']:has(> [data-scope='tags-input'][data-part='item']) {
+    padding-inline-start: var(--xh-tags-input-control-ps, var(--xh-space-1));
+  }
+
   /* 顶到上限是 TagsInput 独有状态：再加进不去，边框先给个提示；invalid 同时出现时由 Field Chrome 的
      错误态优先——真出错比"装满了"要紧 */
   [data-scope='tags-input'][data-part='control'][data-at-max]:not([data-invalid]) {
@@ -161,7 +168,7 @@
 
   /* 新落下的标签原地弹出，同一批按到达顺序错开；首帧就在的直接呈现（自己或 control 带 data-instant）。
      横排胶囊不用竖向上浮：与来源方向不符，还会探出字段外壳的底边 */
-  [data-scope='tags-input'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='tags-input'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='tags-input'])) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }
@@ -207,11 +214,13 @@
     inline-size: auto;
     min-inline-size: 3ch;
     max-inline-size: 100%;
+    box-sizing: border-box;
+    min-block-size: var(--xh-tags-input-item-h, var(--xh-_tags-input-item-h));
     padding-block: var(--xh-tags-input-item-py, var(--xh-_tags-input-item-py));
     padding-inline: var(--xh-tags-input-item-px, var(--xh-_tags-input-item-px));
     border: var(--xh-stroke-thin) solid var(--xh-tags-input-item-input-border, var(--xh-border-control));
     border-radius: var(--xh-tags-input-item-radius, var(--xh-shape-control));
-    background: var(--xh-tags-input-item-input-bg, var(--xh-bg-canvas));
+    background: var(--xh-tags-input-item-input-bg, var(--xh-bg-field));
     color: var(--xh-tags-input-item-input-fg, var(--xh-fg-default));
     font-family: inherit;
     font-size: var(--xh-tags-input-item-font-size, var(--xh-_tags-input-item-font-size));
@@ -219,16 +228,20 @@
     line-height: max(calc(var(--xh-leading-none) * 1em), var(--xh-_tags-input-item-line-h));
   }
 
-  /* 它是真正持有焦点的那个节点，环画在自己身上；
-     外层 control 的 :focus-within 环同时亮着也合理——焦点确实在框内 */
+  /* 它是真正持有焦点的那个节点，照字段外壳标出焦点：换承载面底 + 品牌描边，不画环；
+     外层 control 同时按 :focus-within 换成聚焦面，两层一起说明焦点在框内 */
+  [data-scope='tags-input'][data-part='item-input']:focus-within {
+    border-color: var(--xh-tags-input-item-input-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-tags-input-item-input-bg-focus, var(--xh-bg-surface));
+  }
+
   [data-scope='tags-input'][data-part='item-input']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+    outline: none;
   }
 
-  /* 校验失败时环也跟着变红：与外框上家族画的那圈同色，两圈相邻不至于一红一蓝 */
-  [data-scope='tags-input'][data-part='control'][data-invalid] [data-scope='tags-input'][data-part='item-input']:focus-visible {
-    outline-color: var(--xh-ring-invalid);
+  /* 校验失败时描边跟着外框换无效色，两层相邻不至于一红一蓝 */
+  [data-scope='tags-input'][data-part='control'][data-invalid] [data-scope='tags-input'][data-part='item-input'] {
+    border-color: var(--xh-tags-input-item-input-border-invalid, var(--xh-border-invalid));
   }
 
   [data-scope='tags-input'][data-part='item-input']:disabled {
@@ -318,5 +331,11 @@
     [data-scope='tags-input'][data-part='clear-trigger'][data-disabled]:empty::before {
       background-color: GrayText;
     }
+
+    /* 就地编辑框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
+    [data-scope='tags-input'][data-part='item-input']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
   }
 }