@xihan-ui/styles 3.1.0 → 4.0.0

package/css/float-button.css

@@ -24,11 +24,11 @@
      所以别往覆盖钩子里加这几个属性。 */
   [data-scope='float-button'][data-part='root'] {
     --xh-_float-button-offset: var(--xh-space-6);
-    /* 展开列表里原生动作项的身量与字形尺：触发器自己走 Action Control floating 档
-       （sm = box-md / md = box-lg / lg = box-lg + space-2，字形 md / lg / xl），
-       原生动作项不是 Headless 部件、配方打不到它，这两支私有槽按同一张表镜像，换档只改这里 */
-    --xh-_float-button-size: var(--xh-control-box-lg);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+    /* 触发器与展开列表里原生动作项的身量与字形尺，同一张表：md 取独立浮钮的直径（40px），
+       sm / lg 取方格档；字形比控件内图标低一档（sm / md 16px、lg 20px）。
+       原生动作项不是 Headless 部件、配方打不到它，触发器也读这两支私有槽，换档只改这里 */
+    --xh-_float-button-size: var(--xh-control-float-md);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-sm);
     /* 作者塞进指示符槽的图标跟着尺寸档走，与皮肤画的兜底字形同一把尺 */
     --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
 
@@ -166,18 +166,16 @@
 
   /* —— 尺寸：原生动作项与触发器的 floating 档逐档同表 —— */
   [data-scope='float-button'][data-part='root'][data-size='sm'] {
-    --xh-_float-button-size: var(--xh-control-box-md);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
+    --xh-_float-button-size: var(--xh-control-box-sm);
   }
 
   [data-scope='float-button'][data-part='root'][data-size='md'] {
-    --xh-_float-button-size: var(--xh-control-box-lg);
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-lg);
+    --xh-_float-button-size: var(--xh-control-float-md);
   }
 
   [data-scope='float-button'][data-part='root'][data-size='lg'] {
-    --xh-_float-button-size: calc(var(--xh-control-box-lg) + var(--xh-space-2));
-    --xh-_float-button-glyph-size: var(--xh-glyph-size-xl);
+    --xh-_float-button-size: var(--xh-control-box-lg);
+    --xh-_float-button-glyph-size: var(--xh-glyph-size-md);
   }
 
   /* —— 形态：给展开列表里原生动作项用的面 ——
@@ -201,7 +199,8 @@
     --xh-_float-button-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle-opaque));
     --xh-_float-button-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover-opaque));
     --xh-_float-button-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active-opaque));
-    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-default));
+    /* 与形态矩阵 subtle 档的中性字同一支（次要字色），触发器与动作项一致 */
+    --xh-_float-button-fg: var(--xh-_tone-fg, var(--xh-fg-muted));
     --xh-_float-button-border: transparent;
     --xh-_float-button-border-hover: transparent;
     --xh-_float-button-shadow: none;
@@ -228,8 +227,8 @@
   }
 
   /* —— 触发器 ——
-     浮在内容之上的单图标圆钮，接 Action Control floating 档：盒型（md = box-lg 48px，圆形）、
-     四态面、0.97 按压与 44px 命中区由家族配方按 data-xh-action-variant / -size 给出。
+     浮在内容之上的单图标圆钮，接 Action Control floating 档：圆形、四态面、按压与 44px 命中区
+     由家族配方按 data-xh-action-variant / -size 给出；视觉盒与字形取根上按档给的尺（与动作项同一张表）。
      这里只把公开槽桥接到矩阵之前（使用者槽 → 形态矩阵 → 家族缺省）与几何槽映射 */
   [data-scope='float-button'][data-part='trigger'] {
     --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_action-variant-bg-rest));
@@ -253,9 +252,20 @@
     --xh-action-shadow-focus-visible: var(--xh-float-button-shadow, none);
     --xh-action-shadow-disabled: var(--xh-float-button-shadow, none);
     --xh-action-radius: var(--xh-float-button-radius, var(--xh-_action-profile-radius));
-    --xh-action-visual-size: var(--xh-float-button-size, var(--xh-_action-profile-visual-size));
-    /* 作者塞进来的图标跟着 floating 档走（md 24px），与皮肤画的兜底字形同一把尺 */
-    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_action-profile-glyph-size));
+    --xh-action-visual-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    --xh-action-min-inline-size: var(--xh-float-button-size, var(--xh-_float-button-size));
+    /* 作者塞进来的图标与皮肤画的兜底字形同一把尺 */
+    --xh-icon-size: var(--xh-float-button-icon-size, var(--xh-_float-button-glyph-size));
+  }
+
+  /* subtle 档：形态矩阵的淡底是半透明的墨色，钮钉在内容之上盖不住底下的字；触发器改读上面
+     不透明的那组淡底（与展开组里的原生动作项同一块面），写了语气仍是语气淡底 */
+  [data-scope='float-button'][data-part='root'][data-variant='subtle']
+    [data-scope='float-button'][data-part='trigger'] {
+    --xh-action-bg-rest: var(--xh-float-button-bg, var(--xh-_float-button-bg));
+    --xh-action-bg-hover: var(--xh-float-button-bg-hover, var(--xh-_float-button-bg-hover));
+    --xh-action-bg-pressed: var(--xh-float-button-bg-active, var(--xh-_float-button-bg-active));
+    --xh-action-bg-focus-visible: var(--xh-float-button-bg, var(--xh-_float-button-bg));
   }
 
   /* 缺省 outline 是 frosted 材质面：连接层只在这一档投影 data-xh-material，面由材质家族配方给——
@@ -402,10 +412,12 @@
   }
 
   /* 逐条依次冒出来，离触发器最近的那条先到。backwards 让每条在自己那份延迟里保持起始帧。
-     挂载时就展开着的那一段（data-instant）属于首帧，直接呈现。守卫包在 :where 里不加特异性：
-     后面的交错延迟、液态分离块与收起那几条要照旧压得过这一条 */
-  [data-scope='float-button'][data-part='list']:where(:not([data-instant])) > * {
-    animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
+     挂载时就展开着的那一段（data-instant）属于首帧，直接呈现。
+     动作项是作者放进来的任意节点，规则主体没有可认的特征：冒出、缩回与交错写成 list 自己的私有槽，
+     动作项只读槽。主体无特征的规则挂在 data-instant / data-state 后面，页面上任何元素翻转这两个属性
+     都会让它整棵子树重算 */
+  [data-scope='float-button'][data-part='list']:where(:not([data-instant])) {
+    --xh-_float-button-item-enter: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
   /* 原生按钮直接作为动作项时，沿用触发器的视觉面（同一组公开槽、同一张形态表）；XhButton 保留自己的皮肤。 */
@@ -462,42 +474,55 @@
   /* 交错的间隔：第二条起逐级往后推，第五条起统一钉在第四级——与收起、与列表动效同一个封顶，
      动作再多也不会拖出一条越来越慢的尾巴 */
   [data-scope='float-button'][data-part='list'] > *:nth-child(2) {
-    animation-delay: var(--xh-motion-stagger-step);
+    --xh-_float-button-item-rank: 1;
   }
 
   [data-scope='float-button'][data-part='list'] > *:nth-child(3) {
-    animation-delay: calc(2 * var(--xh-motion-stagger-step));
+    --xh-_float-button-item-rank: 2;
   }
 
   [data-scope='float-button'][data-part='list'] > *:nth-child(4) {
-    animation-delay: calc(3 * var(--xh-motion-stagger-step));
+    --xh-_float-button-item-rank: 3;
   }
 
   [data-scope='float-button'][data-part='list'] > *:nth-child(n + 5) {
-    animation-delay: calc(4 * var(--xh-motion-stagger-step));
+    --xh-_float-button-item-rank: 4;
   }
 
   /* 收起：逆着冒出的次序逐条缩回，离触发器最远的先走、最近的最后收，连接层等它们播完才藏起展开组。
      液态档里从触发器拆出来的那几块由液态组融回，不挂这段 */
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]) {
+  [data-scope='float-button'][data-part='list'][data-state='closed'] {
+    --xh-_float-button-item-exit: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+    --xh-_float-button-item-exiting: 1;
     pointer-events: none;
-    animation: xh-pop-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(2) {
-    animation-delay: var(--xh-motion-stagger-step);
+  /* 动作项只读槽：收起档压过进场档；延迟展开按正序名次、收起按倒序名次（收起标记为 1 时取后者） */
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]) {
+    animation: var(--xh-_float-button-item-exit, var(--xh-_float-button-item-enter, none));
+    animation-delay: calc(
+      var(--xh-motion-stagger-step) *
+        (
+          var(--xh-_float-button-item-rank, 0) * (1 - var(--xh-_float-button-item-exiting, 0)) +
+            var(--xh-_float-button-item-rank-back, 0) * var(--xh-_float-button-item-exiting, 0)
+        )
+    );
+  }
+
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(2) {
+    --xh-_float-button-item-rank-back: 1;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(3) {
-    animation-delay: calc(2 * var(--xh-motion-stagger-step));
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(3) {
+    --xh-_float-button-item-rank-back: 2;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(4) {
-    animation-delay: calc(3 * var(--xh-motion-stagger-step));
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(4) {
+    --xh-_float-button-item-rank-back: 3;
   }
 
-  [data-scope='float-button'][data-part='list'][data-state='closed'] > :not([data-xh-liquid-goo-split]):nth-last-child(n + 5) {
-    animation-delay: calc(4 * var(--xh-motion-stagger-step));
+  [data-scope='float-button'][data-part='list'] > :not([data-xh-liquid-goo-split]):nth-last-child(n + 5) {
+    --xh-_float-button-item-rank-back: 4;
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中。

package/css/floating-panel.css

@@ -178,7 +178,7 @@
     flex: 1 1 auto;
     overflow: hidden;
     font-size: var(--xh-floating-panel-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-floating-panel-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-floating-panel-title-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-tight);
     white-space: nowrap;
     text-overflow: ellipsis;

package/css/form.css

@@ -17,19 +17,38 @@
     --xh-form-skin: 1;
   }
 
-  /* 表单是一列字段：竖排、字段之间留一档间距。root 就是那个原生 <form> */
+  /* 表单是一列字段，root 就是那个原生 <form>。项距不走 gap：字段带辅助行（说明，或给错误文案留的那一行）时
+     那一行就是项距，没有辅助行的项才在下方补一段项距（见下面两条）。一行流档的项距另取一档 */
   [data-scope='form'][data-part='root'] {
+    --xh-_form-item-gap: var(--xh-form-gap, var(--xh-space-5));
+
     display: flex;
     flex-direction: column;
-    gap: var(--xh-form-gap, var(--xh-stack-gap-md));
+    row-gap: 0;
     margin: 0;
   }
 
+  /* 每一项在下方留一段项距，最后一项不留。:where() 不计特指度，作者给自己的节点写外边距照样压得过 */
+  :where([data-scope='form'][data-part='root']) > :where(:not(:last-child)) {
+    margin-block-end: var(--xh-_form-item-gap);
+  }
+
+  /* 字段带辅助行：辅助行（最小高 --xh-space-5）紧贴控件、自己就是项距，这一项不再另留；
+     说明收起、只留错误文案占位的那一行同样算。字段无效时它的直接子说明被收起（见 description.css），
+     不占那一行，不算辅助行：没渲染错误文案的无效字段照常留项距 */
+  [data-scope='form'][data-part='field-group']:has(
+    [data-scope='field'][data-part='error-text'],
+    [data-scope='field'][data-part='description']:not([hidden], [data-scope='field'][data-part='root'][data-invalid] > *)
+  ) {
+    margin-block-end: 0;
+  }
+
   /* 网格：字段排进等宽列，各列下限写 0，一段长文本不会把自己那列撑宽。
      列数由 data-columns 逐档给，换档只改 --xh-_form-cols 这一个槽 */
   [data-scope='form'][data-part='root'][data-layout='grid'] {
     display: grid;
     grid-template-columns: repeat(var(--xh-_form-cols), minmax(0, 1fr));
+    column-gap: var(--xh-form-gap, var(--xh-space-5));
 
     --xh-_form-cols: 1;
   }
@@ -41,9 +60,11 @@
 
   /* 横排一行流：字段并肩排，放不下自动折行 */
   [data-scope='form'][data-part='root'][data-layout='inline'] {
+    --xh-_form-item-gap: var(--xh-form-inline-row-gap, var(--xh-space-2));
+
     flex-flow: row wrap;
     align-items: start;
-    column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+    column-gap: var(--xh-form-inline-gap, var(--xh-space-6));
     /* 一行流里字段按内容收，没有列宽可铺：在表单根上取下此处的字段缺省宽，交给下面的字段还原 */
     --xh-_form-inline-control-w: var(--xh-control-w);
   }
@@ -178,13 +199,6 @@
     --xh-_form-span: 1 / -1;
   }
 
-  /* 出错的字段在起始缘竖一条色带：读屏之外还得有一眼看得见的定位标记。
-     用逻辑属性，RTL 下自动换到右侧 */
-  [data-scope='form'][data-part='field-group'][data-invalid] {
-    padding-inline-start: var(--xh-form-field-invalid-px, var(--xh-space-2));
-    border-inline-start: var(--xh-stroke-thick) solid var(--xh-form-field-invalid-border, var(--xh-border-invalid));
-  }
-
   /* 提交失败后的错误汇总。role=alert 常挂，靠 hidden 显隐 */
   [data-scope='form'][data-part='error-summary'] {
     display: flex;
@@ -247,7 +261,7 @@
 
   /* 摘要显出时条目逐条入场，越靠后起步越晚。
      backwards 让还没轮到的条目停在首帧，不是先显出再重播 */
-  [data-scope='form'][data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item'] {
+  [data-scope='form'][data-part='error-summary'][data-state='invalid'] [data-part='error-summary-item']:where([data-scope='form']) {
     animation: xh-drop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
@@ -256,14 +270,14 @@
      每多一节 ~ 就多要求前面多一条露面的条目，链越长的规则排得越后、赢过短链 */
   [data-scope='form'][data-part='error-summary'][data-state='invalid']
     [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: var(--xh-motion-stagger-step);
   }
 
   [data-scope='form'][data-part='error-summary'][data-state='invalid']
     [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 2);
   }
 
@@ -271,7 +285,7 @@
     [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 3);
   }
 
@@ -280,7 +294,7 @@
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 4);
   }
 
@@ -292,7 +306,7 @@
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
     ~ [data-part='error-summary-item']:not([hidden])
-    ~ [data-part='error-summary-item']:not([hidden]) {
+    ~ [data-part='error-summary-item']:where([data-scope='form']):not([hidden]) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 5);
   }
 

package/css/graph-chart.css

@@ -162,7 +162,7 @@
 
   /* —— 直接操纵：能拖的节点给抓手，拖着时整张图是抓紧的手；放大后空白处也能拖着平移。
      触屏在节点上的拖动归图，其余地方照常滚动页面 —— */
-  [data-scope='graph-chart'][data-part='plot'][data-draggable] [data-part='node'] {
+  [data-scope='graph-chart'][data-part='plot'][data-draggable] [data-part='node']:where([data-scope='graph-chart']) {
     cursor: grab;
     touch-action: none;
   }
@@ -173,7 +173,7 @@
   }
 
   [data-scope='graph-chart'][data-part='plot'][data-dragging],
-  [data-scope='graph-chart'][data-part='plot'][data-dragging] [data-part='node'] {
+  [data-scope='graph-chart'][data-part='plot'][data-dragging] [data-part='node']:where([data-scope='graph-chart']) {
     cursor: grabbing;
   }
 

package/css/grid-list.css

@@ -74,7 +74,7 @@
     padding-inline: var(--xh-grid-list-label-px, var(--xh-control-px-md));
     color: var(--xh-grid-list-label-fg, var(--xh-fg-default));
     font-size: var(--xh-grid-list-label-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-grid-list-label-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-grid-list-label-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-normal);
   }
 

package/css/highlight.css

@@ -18,13 +18,13 @@
   }
 
   /* 浏览器给 mark 的默认底色是一个固定的亮黄，暗色主题下压在深底上刺眼、
-     配的黑字也不随主题走；这里整份换成随主题走的品牌淡底。
-     槽名带 mark 段与部件对上 */
+     配的黑字也不随主题走；这里换成随主题走的标记底（亮色浅黄、暗色深黄），字仍取正文色。
+     不用品牌淡底：那一支专属选中 / 当前。槽名带 mark 段与部件对上 */
   [data-scope='highlight'][data-part='mark'] {
     padding-inline: var(--xh-highlight-mark-px, var(--xh-space-0_5));
     border-radius: var(--xh-highlight-mark-radius, var(--xh-shape-inset));
-    background: var(--xh-highlight-mark-bg, var(--xh-bg-brand-subtle));
-    color: var(--xh-highlight-mark-fg, var(--xh-fg-brand-strong));
+    background: var(--xh-highlight-mark-bg, var(--xh-bg-mark));
+    color: var(--xh-highlight-mark-fg, var(--xh-fg-default));
     font-weight: var(--xh-highlight-mark-font-weight, var(--xh-font-weight-medium));
     /* 命中片段跨行时两半各自收边，否则圆角与内边距只画在整段的首尾。
        两条都写：WebKit 只认带前缀那条 */
@@ -34,7 +34,7 @@
 
   /* 语气落在根上而不是每个 mark 上：命中片段有好几个，用哪族颜色是整段的属性。
      使用者槽排在语气之前：写死了 mark 的底与字色，六族语气一并让位 */
-  [data-scope='highlight'][data-part='root'][data-tone] [data-part='mark'] {
+  [data-scope='highlight'][data-part='root'][data-tone] [data-part='mark']:where([data-scope='highlight']) {
     background: var(--xh-highlight-mark-bg, var(--xh-_tone-subtle));
     color: var(--xh-highlight-mark-fg, var(--xh-_tone-fg));
   }

package/css/hover-card.css

@@ -124,15 +124,18 @@
     --xh-frosted-shadow: var(--xh-hover-card-shadow, var(--xh-_material-shadow));
     --xh-frosted-backdrop: var(--xh-hover-card-backdrop, var(--xh-_material-backdrop));
 
-    /* 尺寸档只换这两个私有槽。size 落在 content 上而非 root：root 是可选部件，
-       面板几何也长在 content 上。语气不接：卡片是内容容器，语气该由里面的内容表达 */
-    --xh-_hover-card-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽。size 落在 content 上而非 root：root 是可选部件，
+       面板几何也长在 content 上。横向内衬比纵向高一档（缺省纵 12 横 16），与 popover 同一套。
+       语气不接：卡片是内容容器，语气该由里面的内容表达 */
+    --xh-_hover-card-py: var(--xh-surface-pad-md);
+    --xh-_hover-card-px: var(--xh-surface-pad-lg);
     --xh-_hover-card-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--xh-hover-card-gap, var(--xh-space-2));
+    /* 标题与正文贴着排：两行之间只留 4px */
+    gap: var(--xh-hover-card-gap, var(--xh-space-1));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
     max-inline-size: min(var(--xh-hover-card-max-w, var(--xh-_hover-card-max-w)), var(--xh-_hover-card-available-w));
@@ -141,8 +144,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-pad));
-    padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-pad));
+    padding-block: var(--xh-hover-card-py, var(--xh-_hover-card-py));
+    padding-inline: var(--xh-hover-card-px, var(--xh-_hover-card-px));
     border-radius: var(--xh-hover-card-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -172,28 +175,32 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   [data-scope='hover-card'][data-part='content'][data-size='sm'] {
-    --xh-_hover-card-pad: var(--xh-surface-pad-sm);
+    --xh-_hover-card-py: var(--xh-surface-pad-sm);
+    --xh-_hover-card-px: var(--xh-surface-pad-md);
     --xh-_hover-card-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='hover-card'][data-part='content'][data-size='lg'] {
-    --xh-_hover-card-pad: var(--xh-surface-pad-lg);
+    --xh-_hover-card-py: var(--xh-surface-pad-lg);
+    --xh-_hover-card-px: var(--xh-surface-pad-xl);
     --xh-_hover-card-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   [data-scope='hover-card'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-hover-card-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-hover-card-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-hover-card-title-font-weight, var(--xh-font-weight-medium));
     color: var(--xh-hover-card-title-fg, var(--xh-fg-default));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是卡片的正文：14px 正文字号 + fg-muted 次级色 */
   [data-scope='hover-card'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-hover-card-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-hover-card-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-hover-card-description-fg, var(--xh-fg-muted));
   }