@xihan-ui/styles 1.0.0-alpha.0 → 1.0.0-alpha.2

package/css/drawer.css

@@ -1,4 +1,26 @@
 @layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
   /* 四条边各一对滑入/滑出。位移量用 translate 的百分比，参照的是面板自己的边框盒，
      所以不管 --xh-drawer-size 被改成多少，"正好推到视口外"这件事都成立。
 
@@ -85,15 +107,14 @@
       translate: 0 var(--xh-_drawer-shift-block, 100%);
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='drawer'][data-part] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }
 
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='drawer'] {
+    --xh-drawer-skin: 1;
+  }
+
   /* root 留在页面原地，只是 data-side / data-state 的落点，不该凭空多出一层盒子把
      trigger 从作者的 flex / grid 行里挤出去，故 display: contents。 */
   [data-scope='drawer'][data-part='root'] {
@@ -112,7 +133,7 @@
     gap: var(--xh-drawer-trigger-gap, var(--xh-control-gap-md));
     block-size: var(--xh-drawer-trigger-h, var(--xh-control-h-md));
     padding-inline: var(--xh-drawer-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-drawer-trigger-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-drawer-trigger-border, var(--xh-border-control));
     border-radius: var(--xh-drawer-trigger-radius, var(--xh-shape-control));
     background: var(--xh-drawer-trigger-bg, var(--xh-bg-canvas));
     color: var(--xh-drawer-trigger-fg, var(--xh-fg-default));
@@ -132,14 +153,14 @@
 
   [data-scope='drawer'][data-part='trigger']:hover:not(:disabled) {
     background: var(--xh-drawer-trigger-bg-hover, var(--xh-bg-subtle-hover));
-    border-color: var(--xh-drawer-trigger-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-drawer-trigger-border-hover, var(--xh-border-control-hover));
   }
 
   /* 抽屉展开期间触发按钮压住不弹起：面板贴在视口边上，它和按钮往往离得很远，
      按钮自己得说明"这一扇是我开的"。 */
   [data-scope='drawer'][data-part='trigger'][data-state='open'] {
     background: var(--xh-drawer-trigger-bg-open, var(--xh-bg-subtle-active));
-    border-color: var(--xh-drawer-trigger-border-open, var(--xh-border-strong));
+    border-color: var(--xh-drawer-trigger-border-open, var(--xh-border-control-hover));
   }
 
   [data-scope='drawer'][data-part='trigger']:focus-visible {
@@ -218,9 +239,9 @@
   /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 dialog 一致。
      收起态连接层会给 content 打 hidden，而上面这条 display: flex 正是要盖掉
      UA 的 [hidden]{display:none}——退场动画得先能播：
-     Vue 侧 presence 读的是 content 的 animationName，读到就申领租约、等 animationend
-     才卸载；一旦 display: none，动画根本不会启动，animationend 永不到达，
-     租约挂死，面板就永久留在 DOM 里（每开合一次多一份）。
+     presence 读的是 content 的 animationName，读到就申领租约、等 animationend 才卸载；
+     一旦 display: none，元素不生成盒子、动画根本不启动，退场探测器会直接放弃申领
+     （否则就要等一个永不到来的 animationend），面板不播动画就地卸载。
      真正的收起两个适配器各自兜住了：Vue 卸载整棵，WC 写内联 style.display。
      其余声明了 display 的角色节点仍补了 [hidden]，那几处没有退场动画，作者手写 hidden 要生效。 */
 

package/css/dynamic-input.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='dynamic-input'] {
+    --xh-dynamic-input-skin: 1;
+  }
+
   /* 一行一条，纵向堆叠；新增把手跟在最后一行下面 */
   [data-scope='dynamic-input'][data-part='root'] {
     display: flex;
@@ -117,7 +122,7 @@
     gap: var(--xh-dynamic-input-action-gap, var(--xh-space-1));
     block-size: var(--xh-dynamic-input-add-height, var(--xh-control-h-md));
     padding-inline: var(--xh-dynamic-input-add-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) dashed var(--xh-dynamic-input-add-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) dashed var(--xh-dynamic-input-add-border, var(--xh-border-control));
     border-radius: var(--xh-dynamic-input-add-radius, var(--xh-shape-control));
     background: var(--xh-dynamic-input-add-bg, transparent);
     color: var(--xh-dynamic-input-add-fg, var(--xh-fg-brand));
@@ -135,7 +140,7 @@
   }
 
   [data-scope='dynamic-input'][data-part='add-trigger']:hover:not([aria-disabled='true']) {
-    border-color: var(--xh-dynamic-input-add-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-dynamic-input-add-border-hover, var(--xh-border-control-hover));
     background: var(--xh-dynamic-input-add-bg-hover, var(--xh-bg-subtle-hover));
   }
 

package/css/editable.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='editable'] {
+    --xh-editable-skin: 1;
+  }
+
   /* 就地编辑是"一行文字里的一处可改内容"：标题、显示区与按钮天然同行，
      所以根是一条横向的行，而不是文本框那种"标题一行、控件一行"的竖排。
      要竖排的作者把 flex-direction 覆盖掉即可，其余尺寸都长在各自的角色节点上 */
@@ -103,7 +108,7 @@
     block-size: var(--xh-editable-input-h, var(--xh-control-h-md));
     padding-inline: var(--xh-editable-input-px, var(--xh-control-px-md));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-editable-input-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-editable-input-border, var(--xh-border-control));
     border-radius: var(--xh-editable-input-radius, var(--xh-shape-control));
     background: var(--xh-editable-input-bg, var(--xh-bg-canvas));
     color: var(--xh-editable-input-fg, var(--xh-fg-default));
@@ -131,7 +136,7 @@
 
   /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
   [data-scope='editable'][data-part='input']:hover:not(:disabled, [data-invalid]) {
-    border-color: var(--xh-editable-input-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-editable-input-border-hover, var(--xh-border-control-hover));
   }
 
   [data-scope='editable'][data-part='input']:focus-visible {
@@ -178,7 +183,7 @@
     block-size: var(--xh-editable-trigger-h, var(--xh-control-h-sm));
     padding-inline: var(--xh-editable-trigger-px, var(--xh-control-px-sm));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-editable-trigger-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-editable-trigger-border, var(--xh-border-control));
     border-radius: var(--xh-editable-trigger-radius, var(--xh-shape-control));
     background: var(--xh-editable-trigger-bg, var(--xh-bg-subtle));
     color: var(--xh-editable-trigger-fg, var(--xh-fg-default));
@@ -202,7 +207,7 @@
   [data-scope='editable'][data-part='edit-trigger']:hover:not(:disabled),
   [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled),
   [data-scope='editable'][data-part='cancel-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-editable-trigger-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-editable-trigger-border-hover, var(--xh-border-control-hover));
     background: var(--xh-editable-trigger-bg-hover, var(--xh-bg-subtle-hover));
   }
 
@@ -238,12 +243,12 @@
   }
 
   [data-scope='editable'][data-part='submit-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
+    border-color: var(--xh-editable-submit-border-hover, var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover)));
     background: var(--xh-editable-submit-bg-hover, var(--xh-bg-brand-hover));
   }
 
   [data-scope='editable'][data-part='submit-trigger']:active:not(:disabled) {
-    border-color: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
+    border-color: var(--xh-editable-submit-border-active, var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active)));
     background: var(--xh-editable-submit-bg-active, var(--xh-bg-brand-active));
   }
 }

package/css/ellipsis.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='ellipsis'] {
+    --xh-ellipsis-skin: 1;
+  }
+
   /* 单行：一行装不下就收成省略号。
      行数由连接层写进这个盒子的内联 style，样式表这一行只是它缺席时的落点 */
   [data-scope='ellipsis'][data-part='root'] {

package/css/empty-state.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='empty-state'] {
+    --xh-empty-state-skin: 1;
+  }
+
   [data-scope='empty-state'][data-part='root'] {
     /* 三个尺寸档只换这几个私有槽，图标与标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */

package/css/field.css

@@ -1,10 +1,39 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='field'] {
+    --xh-field-skin: 1;
+  }
+
   [data-scope='field'][data-part='root'] {
     display: flex;
     flex-direction: column;
     gap: var(--xh-field-gap, var(--xh-space-1));
   }
 
+  /* 表单横排（标签左置）：字段转两列网格，标签列宽由表单的 --xh-form-label-w 统一给，
+     整表据此对齐；描述与错误文案跟着控件走第二列 */
+  [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='root'] {
+    display: grid;
+    grid-template-columns: var(--xh-form-label-w) minmax(0, 1fr);
+    column-gap: var(--xh-field-label-gap, var(--xh-space-3));
+    align-items: start;
+  }
+
+  [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='label'] {
+    grid-column: 1;
+    justify-self: end;
+    /* 与控件的首行文字对齐：按控件高度撑一行再居中 */
+    line-height: var(--xh-control-h-md);
+  }
+
+  [data-scope='form'][data-part='root'][data-layout='horizontal'][data-label-align='start'] [data-scope='field'][data-part='label'] {
+    justify-self: start;
+  }
+
+  [data-scope='form'][data-part='root'][data-layout='horizontal'] [data-scope='field'][data-part='root'] > :not([data-part='label']) {
+    grid-column: 2;
+  }
+
   [data-scope='field'][data-part='label'] {
     color: var(--xh-field-label-fg, var(--xh-fg-default));
     font-size: var(--xh-field-label-font-size, var(--xh-text-label-size));
@@ -16,12 +45,19 @@
     color: var(--xh-field-label-fg-disabled, var(--xh-fg-subtle));
   }
 
+  /* 必填星号：跟着根上的 data-required 亮，选填不标 */
+  [data-scope='field'][data-part='root'][data-required] [data-part='label']::after {
+    content: '*';
+    margin-inline-start: var(--xh-space-1);
+    color: var(--xh-field-label-star, var(--xh-fg-danger));
+  }
+
   /* control 是作者自己的输入控件，这里只给一套可被覆盖的基础皮肤 */
   [data-scope='field'][data-part='control'] {
     inline-size: 100%;
     block-size: var(--xh-field-control-h, var(--xh-control-h-md));
     padding-inline: var(--xh-field-control-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-field-control-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-field-control-border, var(--xh-border-control));
     border-radius: var(--xh-field-control-radius, var(--xh-shape-control));
     background: var(--xh-field-control-bg, var(--xh-bg-canvas));
     color: var(--xh-field-control-fg, var(--xh-fg-default));

package/css/file-upload.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='file-upload'] {
+    --xh-file-upload-skin: 1;
+  }
+
   [data-scope='file-upload'][data-part='root'] {
     display: flex;
     flex-direction: column;
@@ -32,7 +37,7 @@
     min-block-size: var(--xh-file-upload-dropzone-min-h, 8rem);
     padding-block: var(--xh-file-upload-dropzone-py, var(--xh-space-5));
     padding-inline: var(--xh-file-upload-dropzone-px, var(--xh-space-4));
-    border: var(--xh-stroke-thick) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-default));
+    border: var(--xh-stroke-thick) dashed var(--xh-file-upload-dropzone-border, var(--xh-border-control));
     border-radius: var(--xh-file-upload-dropzone-radius, var(--xh-shape-surface));
     background: var(--xh-file-upload-dropzone-bg, var(--xh-bg-canvas));
     color: var(--xh-file-upload-dropzone-fg, var(--xh-fg-muted));
@@ -51,7 +56,7 @@
 
   /* hover 只在中性态换描边：invalid 与 dragging 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
   [data-scope='file-upload'][data-part='dropzone']:hover:not([data-disabled], [data-invalid], [data-dragging]) {
-    border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-file-upload-dropzone-border-hover, var(--xh-border-control-hover));
   }
 
   /* 投放区自己承载焦点（它就是那个大按钮），所以画环而不是 outline:none */
@@ -86,7 +91,7 @@
     gap: var(--xh-file-upload-trigger-gap, var(--xh-control-gap-md));
     block-size: var(--xh-file-upload-trigger-h, var(--xh-control-h-md));
     padding-inline: var(--xh-file-upload-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-file-upload-trigger-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-file-upload-trigger-border, var(--xh-border-control));
     border-radius: var(--xh-file-upload-trigger-radius, var(--xh-shape-control));
     background: var(--xh-file-upload-trigger-bg, var(--xh-bg-surface));
     color: var(--xh-file-upload-trigger-fg, var(--xh-fg-default));

package/css/flex.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='flex'] {
+    --xh-flex-skin: 1;
+  }
+
   [data-scope='flex'][data-part='root'] {
     display: flex;
     flex-wrap: nowrap;

package/css/float-button.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='float-button'] {
+    --xh-float-button-skin: 1;
+  }
+
   /* 定位壳：钉在视口一角。贴边距离由连接层写进这个盒子的内联 style，
      样式表这一行只是它缺席时的落点；贴的是哪两条边看 data-placement。
      另一件必须提防的事：fixed 认的是视口，祖先上一旦出现
@@ -56,7 +61,7 @@
     inline-size: var(--xh-_float-button-size);
     block-size: var(--xh-_float-button-size);
     padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-float-button-border, var(--xh-border-control));
     border-radius: var(--xh-_float-button-radius);
     /* 使用者令牌排在缺省之前：写了覆盖钩子就以它为准，没写才退到中性缺省 */
     background: var(--xh-float-button-bg, var(--xh-bg-surface-raised));
@@ -72,7 +77,7 @@
   /* 悬停只在能用指针的设备上生效，触摸端不留一个按不掉的悬停态 */
   @media (hover: hover) {
     [data-scope='float-button'][data-part='trigger']:not([data-disabled]):hover {
-      border-color: var(--xh-float-button-border-hover, var(--xh-border-strong));
+      border-color: var(--xh-float-button-border-hover, var(--xh-border-control-hover));
       background: var(--xh-float-button-bg-hover, var(--xh-bg-subtle-hover));
     }
   }

package/css/form.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='form'] {
+    --xh-form-skin: 1;
+  }
+
   /* 表单是一列字段：竖排、字段之间留一档间距。root 就是那个原生 <form> */
   [data-scope='form'][data-part='root'] {
     display: flex;
@@ -12,6 +17,18 @@
     display: none;
   }
 
+  /* 标签左置：标签列宽的缺省档在这儿，labelWidth 会以行内样式盖过它 */
+  [data-scope='form'][data-part='root'][data-layout='horizontal'] {
+    --xh-form-label-w: 30%;
+  }
+
+  /* 横排一行流：字段并肩排，放不下自动折行 */
+  [data-scope='form'][data-part='root'][data-layout='inline'] {
+    flex-flow: row wrap;
+    align-items: start;
+    column-gap: var(--xh-form-inline-gap, var(--xh-space-4));
+  }
+
   /* 字段容器只管排版与状态标记：标题、控件、描述、错误文案都是里面那个 Field 的活儿 */
   [data-scope='form'][data-part='field-group'] {
     display: flex;
@@ -104,7 +121,7 @@
     block-size: var(--xh-form-trigger-h, var(--xh-control-h-md));
     padding-block: 0;
     padding-inline: var(--xh-form-trigger-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-form-trigger-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-form-trigger-border, var(--xh-border-control));
     border-radius: var(--xh-form-trigger-radius, var(--xh-shape-control));
     background: var(--xh-form-trigger-bg, var(--xh-bg-subtle));
     color: var(--xh-form-trigger-fg, var(--xh-fg-default));
@@ -125,7 +142,7 @@
 
   [data-scope='form'][data-part='submit-trigger']:hover:not(:disabled),
   [data-scope='form'][data-part='reset-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-form-trigger-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-form-trigger-border-hover, var(--xh-border-control-hover));
     background: var(--xh-form-trigger-bg-hover, var(--xh-bg-subtle-hover));
   }
 
@@ -152,18 +169,18 @@
 
   /* 提交是这一组里的主操作，给它一层实心底色区分开 */
   [data-scope='form'][data-part='submit-trigger']:not(:disabled) {
-    border-color: var(--xh-form-submit-bg, var(--xh-bg-brand));
+    border-color: var(--xh-form-submit-border, var(--xh-form-submit-bg, var(--xh-bg-brand)));
     background: var(--xh-form-submit-bg, var(--xh-bg-brand));
     color: var(--xh-form-submit-fg, var(--xh-fg-on-brand));
   }
 
   [data-scope='form'][data-part='submit-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover));
+    border-color: var(--xh-form-submit-border-hover, var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover)));
     background: var(--xh-form-submit-bg-hover, var(--xh-bg-brand-hover));
   }
 
   [data-scope='form'][data-part='submit-trigger']:active:not(:disabled) {
-    border-color: var(--xh-form-submit-bg-active, var(--xh-bg-brand-active));
+    border-color: var(--xh-form-submit-border-active, var(--xh-form-submit-bg-active, var(--xh-bg-brand-active)));
     background: var(--xh-form-submit-bg-active, var(--xh-bg-brand-active));
   }
 }
@@ -174,7 +191,7 @@
   @keyframes xh-form-summary-enter {
     from {
       opacity: 0;
-      translate: 0 calc(-1 * var(--xh-space-1));
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
     }
 
     to {

package/css/gradient-text.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='gradient-text'] {
+    --xh-gradient-text-skin: 1;
+  }
+
   /* 渐变画在背景上，再用 background-clip 把背景裁进字形里；前景必须透明才透得出底下的渐变。
      两条 background-clip 都写：WebKit 只认带前缀那条。
      -webkit-text-fill-color 在 WebKit 里决定字形填充色并盖过 color，也要一并透明。 */

package/css/grid.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='grid'] {
+    --xh-grid-skin: 1;
+  }
+
   [data-scope='grid'][data-part='root'] {
     display: grid;
     /* 各列等宽；下限写 0 而不是 auto，一段长文本才不会把自己那列撑宽 */

package/css/highlight.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='highlight'] {
+    --xh-highlight-skin: 1;
+  }
+
   /* 文本按原样显示：命中位置是按原串逐字符算的，折叠掉连续空格与换行会让看到的
      与算出来的对不上。pre-wrap 保留空白但仍在容器边界换行 */
   [data-scope='highlight'][data-part='root'] {

package/css/hover-card.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='hover-card'] {
+    --xh-hover-card-skin: 1;
+  }
+
   /* 根节点只把 trigger 与浮层收在一处，不参与定位（坐标系仍由祖先的定位上下文决定） */
   [data-scope='hover-card'][data-part='root'] {
     display: inline-block;
@@ -100,47 +119,45 @@
   }
 
   /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='hover-card'][data-part='arrow'] {
+    --xh-_hover-card-arrow-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_hover-card-arrow-x: 50%;
+    --xh-_hover-card-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_hover-card-arrow-size);
+    block-size: var(--xh-_hover-card-arrow-size);
     border: var(--xh-stroke-thin) solid var(--xh-hover-card-border, var(--xh-border-default));
     background: var(--xh-hover-card-bg, var(--xh-bg-surface));
     rotate: 45deg;
   }
 
   [data-scope='hover-card'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-start: calc(var(--xh-_hover-card-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_hover-card-arrow-x) - var(--xh-_hover-card-arrow-size) / 2);
     border-block-end: 0;
     border-inline-end: 0;
   }
 
   [data-scope='hover-card'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-end: calc(var(--xh-_hover-card-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_hover-card-arrow-x) - var(--xh-_hover-card-arrow-size) / 2);
     border-block-start: 0;
     border-inline-start: 0;
   }
 
   [data-scope='hover-card'][data-part='arrow'][data-placement^='right'] {
-    inset-inline-start: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-_hover-card-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_hover-card-arrow-y) - var(--xh-_hover-card-arrow-size) / 2);
     border-block-start: 0;
     border-inline-end: 0;
   }
 
   [data-scope='hover-card'][data-part='arrow'][data-placement^='left'] {
-    inset-inline-end: calc(var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-hover-card-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-_hover-card-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_hover-card-arrow-y) - var(--xh-_hover-card-arrow-size) / 2);
     border-block-end: 0;
     border-inline-start: 0;
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='hover-card'][data-part='content'] {
-      animation-duration: 0.01ms !important;
-    }
-  }
 }

package/css/icon-wrapper.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='icon-wrapper'] {
+    --xh-icon-wrapper-skin: 1;
+  }
+
   /* 定直径的图标底座：图元在正中，底色、描边与形状由三轴决定。
      直径与图元直径分两个槽位，底座换档时里面的图元跟着一起换 */
   [data-scope='icon-wrapper'][data-part='root'] {

package/css/icon.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='icon'] {
+    --xh-icon-skin: 1;
+  }
+
   /*
    * 根 <svg>。直径、描边粗细、行内位置都由这里给，记录只带几何。
    * 不写 fill / stroke：记录里那两条呈现属性取 currentColor，改这里会把