@xihan-ui/styles 3.2.0 → 4.0.0

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]) {
@@ -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);
+    }
   }
 }

package/css/text-field.css

@@ -56,13 +56,15 @@
   }
 
   [data-scope='text-field'][data-part='label'] {
-    color: var(--xh-text-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-text-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-text-field-label-gap, var(--xh-space-2)) - var(--xh-text-field-gap, var(--xh-space-1)));
+    color: var(--xh-text-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-text-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-text-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='text-field'][data-part='label'][data-disabled] {
-    color: var(--xh-text-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-text-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   [data-scope='text-field'][data-part='control'] {
@@ -80,8 +82,6 @@
     --xh-field-border-hover: var(--xh-text-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-text-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-text-field-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-text-field-control-shadow, none);
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
     --xh-field-glyph-size: var(--xh-text-field-icon-size, var(--xh-_field-size-glyph-size));
@@ -100,7 +100,7 @@
     --xh-field-placeholder-fg: var(--xh-text-field-placeholder-fg, var(--xh-fg-subtle));
     --xh-field-autofill-bg: var(--xh-text-field-input-autofill-bg, var(--xh-bg-canvas));
     --xh-field-autofill-fg: var(--xh-text-field-input-autofill-fg, var(--xh-fg-default));
-    --xh-field-textarea-padding-block: var(--xh-text-field-textarea-py, var(--xh-space-2));
+    --xh-field-textarea-padding-block: var(--xh-text-field-textarea-py, var(--xh-space-1));
   }
 
   [data-scope='text-field'][data-part='control'][hidden] {

package/css/time-field.css

@@ -63,13 +63,15 @@
   }
 
   [data-scope='time-field'][data-part='label'] {
-    color: var(--xh-time-field-label-fg, var(--xh-fg-default));
+    /* 竖排时标签与控件之间的距离：根的 gap 之上补一段差值，--xh-time-field-label-gap 给多少最终就是多少 */
+    margin-block-end: calc(var(--xh-time-field-label-gap, var(--xh-space-2)) - var(--xh-time-field-gap, var(--xh-space-1)));
+    color: var(--xh-time-field-label-fg, var(--xh-fg-muted));
     font-size: var(--xh-time-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-time-field-label-font-weight, var(--xh-text-label-weight));
   }
 
   [data-scope='time-field'][data-part='label'][data-disabled] {
-    color: var(--xh-time-field-label-fg-disabled, var(--xh-fg-subtle));
+    color: var(--xh-time-field-label-fg-disabled, var(--xh-fg-muted));
   }
 
   /* 几段合起来看着像一个输入框：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画在
@@ -89,8 +91,6 @@
     --xh-field-border-hover: var(--xh-time-field-control-border-hover, var(--xh-_field-variant-border-hover));
     --xh-field-border-focus: var(--xh-time-field-control-border-focus, var(--xh-_field-variant-border-focus));
     --xh-field-border-invalid: var(--xh-time-field-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-time-field-control-shadow, none);
     --xh-field-cursor-rest: default;
     /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */