@xihan-ui/styles 1.0.0 → 2.0.0

package/css/number-field.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* NumberField 独立皮肤同时传递引入字段视觉盒与字段内动作；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+@import '../family/action-control.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='number-field'] {
@@ -5,43 +14,33 @@
   }
 
   /* 与文本框同一套堆叠：标签一行、输入行一行。
-     输入框与加减钮放进 control 部件即得一体式：视觉盒画在 control 上，
-     减在左、加在右、输入框居中，前后缀图标/文字可直接流式插在框内。
-     不写 control 时退回旧式三件并排的观感（下方 input / 按钮的基础规则原样生效） */
+     control 是必需的唯一视觉盒，输入框、加减钮与前后缀都放在里面；
+     输入与前后缀在左，减、加两颗动作依次收在逻辑末端。
+     组件层只把既有公开槽映射到家族合同；形态三档由家族按 control 上的 data-variant 生成，皮肤不再声明。 */
   [data-scope='number-field'][data-part='root'] {
     /* 作者塞进来的图标跟着控件的尺寸档走；它自己写了 size 时仍以作者的为准 */
     --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这几个私有槽，标题、输入框与加减钮都从 root 继承它们，
+    /* 尺寸档只换这几个私有槽，输入框与加减钮都从 root 继承它们，
        换档不必给每个部件各写一条选择器 */
     --xh-_number-field-h: var(--xh-control-h-md);
     --xh-_number-field-px: var(--xh-control-px-md);
-    --xh-_number-field-gap: var(--xh-control-gap-md);
+    --xh-_number-field-gap: 0;
     --xh-_number-field-font-size: var(--xh-control-font-md);
-    --xh-_number-field-label-font-size: var(--xh-control-font-md);
     --xh-_number-field-trigger-font-size: var(--xh-control-font-md);
 
-    /* 盒子的圆角 */
-    --xh-_number-field-radius: var(--xh-number-field-input-radius, var(--xh-shape-control));
-
-    /* 形态档只换这几个私有槽：输入框的底与描边，加减钮的底与描边 */
-    --xh-_number-field-bg: var(--xh-bg-canvas);
-    --xh-_number-field-border: var(--xh-border-control);
-    --xh-_number-field-border-hover: var(--xh-border-control-hover);
-    --xh-_number-field-trigger-bg: var(--xh-bg-subtle);
-    --xh-_number-field-trigger-bg-hover: var(--xh-bg-subtle-hover);
-    --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
-    --xh-_number-field-trigger-border: var(--xh-border-control);
-    --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
-
-    /* 语气只落在聚焦这一处：环与聚焦态描边。框里的数字不归它管。
-       没写 data-tone 时 --xh-_tone 没被声明，退回原来的聚焦环色与常态描边 */
-    --xh-_number-field-ring: var(--xh-ring-focus);
-    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control-focus)));
+    /* 盒内那道分隔线的长度：取钮高的一半，线的上下各留一截空白，不与钮等高 */
+    --xh-_number-field-divider-h: 50%;
 
     display: inline-flex;
     flex-direction: column;
     gap: var(--xh-number-field-gap, var(--xh-space-1));
+
+    /* 不传尺寸时一律这么宽，宽度不随内容走；父容器给不出这么宽时整件跟着收，地板同步让步，不越出父容器。
+       地板不高过缺省宽：使用者把缺省宽钉到底线以下时不必再放开底线 */
+    inline-size: var(--xh-number-field-control-w, var(--xh-control-w));
+    min-inline-size: min(var(--xh-number-field-control-w, var(--xh-control-w)), var(--xh-number-field-control-min-w, var(--xh-control-min-w)), 100%);
+    max-inline-size: 100%;
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -55,9 +54,7 @@
     --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-sm));
     --xh-_number-field-h: var(--xh-control-h-sm);
     --xh-_number-field-px: var(--xh-control-px-sm);
-    --xh-_number-field-gap: var(--xh-control-gap-sm);
     --xh-_number-field-font-size: var(--xh-control-font-sm);
-    --xh-_number-field-label-font-size: var(--xh-control-font-sm);
     --xh-_number-field-trigger-font-size: var(--xh-control-font-sm);
   }
 
@@ -65,59 +62,14 @@
     --xh-icon-size: var(--xh-number-field-icon-size, var(--xh-glyph-size-lg));
     --xh-_number-field-h: var(--xh-control-h-lg);
     --xh-_number-field-px: var(--xh-control-px-lg);
-    --xh-_number-field-gap: var(--xh-control-gap-lg);
     --xh-_number-field-font-size: var(--xh-control-font-lg);
-    --xh-_number-field-label-font-size: var(--xh-control-font-lg);
     --xh-_number-field-trigger-font-size: var(--xh-control-font-lg);
   }
 
-  /* —— 形态 —— */
-  /* 形态只决定底与描边怎么画；用哪族颜色由 data-tone 决定。
-     输入框没有实心档：填满一个要往里打字的框，字与底就没法同时读 */
-  [data-scope='number-field'][data-part='root'][data-variant='outline'] {
-    --xh-_number-field-bg: var(--xh-bg-canvas);
-    --xh-_number-field-border: var(--xh-border-control);
-    --xh-_number-field-border-hover: var(--xh-border-control-hover);
-    --xh-_number-field-trigger-bg: var(--xh-bg-subtle);
-    --xh-_number-field-trigger-bg-hover: var(--xh-bg-subtle-hover);
-    --xh-_number-field-trigger-bg-active: var(--xh-bg-subtle-active);
-    --xh-_number-field-trigger-border: var(--xh-border-control);
-    --xh-_number-field-trigger-border-hover: var(--xh-border-control-hover);
-    --xh-_number-field-border-focus: var(--xh-number-field-input-border, var(--xh-_tone, var(--xh-border-control-focus)));
-  }
-
-  /* 填充式：底色顶替描边表达边界。描边只退成透明而不去掉，1px 的位置留着，
-     与 outline 档并排时基线对得上、聚焦画描边也不引起跳动 */
-  [data-scope='number-field'][data-part='root'][data-variant='subtle'] {
-    --xh-_number-field-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_number-field-border: transparent;
-    --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-    --xh-_number-field-trigger-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_number-field-trigger-bg-hover: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
-    --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_number-field-trigger-border: transparent;
-    --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control-focus));
-  }
-
-  /* 无框：底与常态描边透明，悬停与聚焦浮出描边 */
-  [data-scope='number-field'][data-part='root'][data-variant='ghost'] {
-    --xh-_number-field-bg: transparent;
-    --xh-_number-field-border: transparent;
-    --xh-_number-field-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-    --xh-_number-field-trigger-bg: transparent;
-    --xh-_number-field-trigger-bg-hover: var(--xh-_tone-subtle, var(--xh-bg-subtle-hover));
-    --xh-_number-field-trigger-bg-active: var(--xh-_tone-subtle-active, var(--xh-bg-subtle-active));
-    --xh-_number-field-trigger-border: transparent;
-    --xh-_number-field-trigger-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-    --xh-_number-field-border-focus: var(--xh-_tone, var(--xh-border-control-focus));
-  }
-
   [data-scope='number-field'][data-part='label'] {
     color: var(--xh-number-field-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-number-field-label-font-size, var(--xh-_number-field-label-font-size));
+    font-size: var(--xh-number-field-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-number-field-label-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
   }
 
   [data-scope='number-field'][data-part='label'][data-disabled] {
@@ -125,239 +77,122 @@
   }
 
   /* —— 一体式 control：输入框与加减钮同框 —— */
-  /* control 是唯一的视觉盒：描边、底色、圆角、聚焦环全画在它身上，盒内三件都退成透明分段，
-     整枚控件从头到尾只有这一道描边。减钮在前、input 居中、加钮在后（作者在模板里的顺序决定），
-     前后缀内容直接流式插在框里。
-     focus-within 而不是 :focus 上的聚焦态：按钮也能触发聚焦环 */
+  /* control 是唯一的视觉盒：描边、底色、圆角、聚焦环、五态与悬停由 Field Chrome 家族画，
+     盒内三件都退成透明分段，整枚控件从头到尾只有这一道描边。
+     外观槽按所在部件取名 --xh-number-field-control-*；--xh-number-field-input-* 只管
+     input 自己的字色与内衬。控件不给内衬：内衬走 input 与钮各自的盒。 */
   [data-scope='number-field'][data-part='control'] {
-    position: relative;
-    display: inline-flex;
-    /* 居中而不是拉伸：作者插在框里的前后缀是一行文字，被拉满整框高度后字会贴着框顶 */
-    align-items: center;
-    gap: var(--xh-number-field-control-gap, var(--xh-_number-field-gap));
-    min-inline-size: var(--xh-number-field-control-min-w, var(--xh-control-min-w));
-    block-size: var(--xh-number-field-control-h, var(--xh-_number-field-h));
-    padding-inline: var(--xh-number-field-control-px, var(--xh-_number-field-px));
-    border: var(--xh-stroke-thin) solid var(--xh-number-field-input-border, var(--xh-_number-field-border));
-    border-radius: var(--xh-_number-field-radius);
-    background: var(--xh-number-field-input-bg, var(--xh-_number-field-bg));
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='number-field'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
-    border-color: var(--xh-number-field-input-border-hover, var(--xh-_number-field-border-hover));
-  }
+    --xh-field-control-height: var(--xh-number-field-control-h, var(--xh-_number-field-h));
+    --xh-field-control-padding-inline: var(--xh-number-field-control-px, 0);
+    --xh-field-control-gap: var(--xh-number-field-control-gap, var(--xh-_number-field-gap));
+    --xh-field-control-min-inline-size: var(--xh-number-field-control-min-w, var(--xh-control-min-w));
+    --xh-field-control-radius: var(--xh-number-field-control-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-number-field-control-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-number-field-control-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-number-field-control-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-number-field-control-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-number-field-control-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-number-field-control-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-number-field-control-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-number-field-control-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-number-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-number-field-control-shadow, none);
+    /* 家族 chrome 会重写 --xh-icon-size，使用者图标槽必须经桥接槽下发才能在盒内生效 */
+    --xh-field-glyph-size: var(--xh-number-field-icon-size, var(--xh-_field-size-glyph-size));
 
-  [data-scope='number-field'][data-part='control']:focus-within:not([data-disabled]) {
-    border-color: var(--xh-number-field-input-border-focus, var(--xh-_number-field-border-focus));
-    outline: var(--xh-ring-width) solid var(--xh-_number-field-ring);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='number-field'][data-part='control'][data-invalid] {
-    border-color: var(--xh-number-field-input-border-invalid, var(--xh-border-invalid));
-
-    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
-    --xh-_number-field-ring: var(--xh-ring-invalid);
+    position: relative;
   }
 
-  [data-scope='number-field'][data-part='control'][data-readonly] {
-    background: var(--xh-number-field-input-bg-readonly, var(--xh-bg-subtle));
+  /* 装饰段：货币符、单位、图标。与输入框同框，不参与分宽，弱一档前景把它与数字分开 */
+  [data-scope='number-field'][data-part='prefix'],
+  [data-scope='number-field'][data-part='suffix'] {
+    --xh-field-affix-fg: var(--xh-number-field-affix-fg, var(--xh-fg-muted));
+    --xh-field-affix-fg-disabled: var(--xh-number-field-affix-fg-disabled, var(--xh-fg-disabled));
+    --xh-field-affix-font-size: var(--xh-number-field-affix-font-size, var(--xh-_number-field-font-size));
   }
 
-  [data-scope='number-field'][data-part='control'][data-disabled] {
-    background: var(--xh-number-field-input-bg-disabled, var(--xh-bg-subtle));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  [data-scope='number-field'][data-part='prefix'][hidden],
+  [data-scope='number-field'][data-part='suffix'][hidden] {
+    display: none;
   }
 
-  /* 盒内 input：无边框无底无圆角，观感全归 control；行内内衬也归 control，
-     这里再留一份就是框内套了一圈空白。数字居中排在两个按钮之间；
+  /* 盒内 input：无边框无底无圆角无落影由家族重置，观感全归 control。
+     数字居中排在两个按钮之间，行内内衬留给它自己（control 不给内衬）；
      前后缀图标/文字直接流式排在 input 两侧，不用再绝对定位 */
   [data-scope='number-field'][data-part='control'] [data-part='input'] {
-    flex: 1 1 auto;
+    --xh-field-input-fg: var(--xh-number-field-input-fg, var(--xh-fg-default));
+    --xh-field-input-font-size: var(--xh-number-field-input-font-size, var(--xh-_number-field-font-size));
+    --xh-field-placeholder-fg: var(--xh-number-field-placeholder-fg, var(--xh-fg-subtle));
+    --xh-field-autofill-bg: var(--xh-number-field-input-autofill-bg, var(--xh-bg-canvas));
+    --xh-field-autofill-fg: var(--xh-number-field-input-autofill-fg, var(--xh-fg-default));
+
     inline-size: var(--xh-number-field-input-w, 5em);
-    min-inline-size: 0;
-    block-size: 100%;
-    padding-inline: 0;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
+    padding-inline: var(--xh-number-field-input-px, var(--xh-_number-field-px));
+    font-variant-numeric: tabular-nums;
     text-align: var(--xh-number-field-input-align, center);
   }
 
-  /* 盒内 input 不再自己画各态，全部交还 control。hover 这条带上与基础规则同样的
-     :not 条件：基础 hover 的特异度里有它们，不带就打不过 */
-  [data-scope='number-field'][data-part='control'] [data-part='input']:hover:not(:disabled, [data-invalid]) {
-    border-color: transparent;
-  }
-
-  [data-scope='number-field'][data-part='control'] [data-part='input']:focus-visible {
-    border-color: transparent;
-    outline: none;
-  }
-
-  [data-scope='number-field'][data-part='control'] [data-part='input'][data-invalid] {
-    border-color: transparent;
-  }
-
-  [data-scope='number-field'][data-part='control'] [data-part='input']:disabled,
-  [data-scope='number-field'][data-part='control'] [data-part='input'][readonly] {
-    background: transparent;
-  }
-
-  /* 盒内按钮：尺寸与圆角走基础规则那枚行内动作方钮，这里只把底与描边交还 control——
-     按钮自带一块底色就会把一个盒子读成三块拼起来的；
-     常态只剩符号，符号取次级前景，悬停与按下才浮出底色 */
+  /* 盒内按钮：正方视觉盒、inset 圆角、悬停 100 / 按下 200 与 0.97 按压、粗指针热区与
+     :focus-visible 关环全由 Action Control 的 field-inset ghost 档给，组件只映射既有覆盖槽。
+     常态只剩符号，符号取默认前景，悬停与按下才浮出底色 */
   [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'],
   [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'] {
-    margin: 0;
-    border: 0;
-    background: transparent;
-    color: var(--xh-number-field-trigger-fg, var(--xh-fg-muted));
-  }
-
-  /* 悬停只在分段自己身上浮出一块底色与更实的符号，盒子的描边纹丝不动 */
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:hover:not(:disabled),
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:hover:not(:disabled) {
-    background: var(--xh-number-field-trigger-bg-hover, var(--xh-_number-field-trigger-bg-hover));
-    color: var(--xh-number-field-trigger-fg-hover, var(--xh-fg-default));
-  }
-
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:active:not(:disabled),
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:active:not(:disabled) {
-    background: var(--xh-number-field-trigger-bg-active, var(--xh-_number-field-trigger-bg-active));
-  }
-
-  /* 焦点落到盒内按钮时 control 已经 focus-within 起了环，按钮自己再画一圈就是框里套框 */
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:focus-visible,
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:focus-visible {
-    outline: none;
-  }
-
-  /* 贴住 min / max 的那一侧只把符号压灰，不铺一块灰底：铺了底就又成了框上贴着的一个方块 */
-  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:disabled,
-  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:disabled {
-    background: transparent;
-    color: var(--xh-fg-disabled);
-  }
-
-  [data-scope='number-field'][data-part='input'] {
-    block-size: var(--xh-number-field-input-h, var(--xh-_number-field-h));
-    padding-inline: var(--xh-number-field-input-px, var(--xh-_number-field-px));
-    padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-number-field-input-border, var(--xh-_number-field-border));
-    border-radius: var(--xh-_number-field-radius);
-    background: var(--xh-number-field-input-bg, var(--xh-_number-field-bg));
-    color: var(--xh-number-field-input-fg, var(--xh-fg-default));
-    /* 表单控件不继承页面字体，只给字号会让输入框用 UA 默认字族 */
-    font-family: inherit;
-    font-size: var(--xh-number-field-input-font-size, var(--xh-_number-field-font-size));
-    /* 等宽数字：按住加减钮连发时字宽一变，框里的数字就会左右抖 */
-    font-variant-numeric: tabular-nums;
-    line-height: var(--xh-leading-normal);
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  [data-scope='number-field'][data-part='input']::placeholder {
-    color: var(--xh-number-field-placeholder-fg, var(--xh-fg-subtle));
-  }
-
-  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
-  [data-scope='number-field'][data-part='input']:hover:not(:disabled, [data-invalid]) {
-    border-color: var(--xh-number-field-input-border-hover, var(--xh-_number-field-border-hover));
-  }
-
-  /* 聚焦态描边与环共用一族语气色。这条特异度低于上面的 hover、也低于下面的 invalid，
-     两者仍按原来的次序赢过它 */
-  [data-scope='number-field'][data-part='input']:focus-visible {
-    border-color: var(--xh-number-field-input-border-focus, var(--xh-_number-field-border-focus));
-    outline: var(--xh-ring-width) solid var(--xh-_number-field-ring);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  [data-scope='number-field'][data-part='input'][data-invalid] {
-    border-color: var(--xh-number-field-input-border-invalid, var(--xh-border-invalid));
-
-    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
-    --xh-_number-field-ring: var(--xh-ring-invalid);
-  }
-
-  /* 只读仍可聚焦、可复制，不置灰，只把底色压下去表示"改不动" */
-  [data-scope='number-field'][data-part='input'][readonly] {
-    background: var(--xh-number-field-input-bg-readonly, var(--xh-bg-subtle));
-  }
-
-  /* input 是单体表单控件，禁用走原生 disabled */
-  [data-scope='number-field'][data-part='input']:disabled {
-    background: var(--xh-number-field-input-bg-disabled, var(--xh-bg-subtle));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+    --xh-action-visual-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-number-field-trigger-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-number-field-trigger-radius, var(--xh-shape-inset));
+    /* 底色阶梯由 ghost 档给（透明 → 100 → 200），使用者槽只作覆盖入口 */
+    --xh-action-bg-pressed: var(--xh-number-field-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-number-field-trigger-fg, var(--xh-fg-default));
+    --xh-action-fg-hover: var(--xh-number-field-trigger-fg-hover, var(--xh-fg-default));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-font-size: var(--xh-number-field-trigger-font-size, var(--xh-_number-field-trigger-font-size));
+    /* 配方尚未把 profile 字形档灌进 --xh-icon-size，钮内字形先按 field-inset 档逐钮取值 */
+    --xh-icon-size: var(--xh-_action-profile-glyph-size);
+
+    border-width: 0;
+  }
+
+  /* DOM 顺序不承担视觉位置：既有用法即使把减钮写在 input 前面，默认仍统一收进右侧动作组。 */
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'] {
+    order: 1;
   }
 
-  /* 两个方向共用一份皮肤：加减钮是同一种东西，只是朝向不同，
-     分开写迟早会一边改了另一边忘了 */
-  [data-scope='number-field'][data-part='increment-trigger'],
-  [data-scope='number-field'][data-part='decrement-trigger'] {
-    display: inline-flex;
-    flex: none;
-    align-items: center;
-    justify-content: center;
-    inline-size: var(--xh-number-field-trigger-size, var(--xh-control-action-size));
-    block-size: var(--xh-number-field-trigger-size, var(--xh-control-action-size));
-    padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-number-field-trigger-border, var(--xh-_number-field-trigger-border));
-    border-radius: var(--xh-number-field-trigger-radius, var(--xh-shape-control));
-    background: var(--xh-number-field-trigger-bg, var(--xh-_number-field-trigger-bg));
-    color: var(--xh-number-field-trigger-fg, var(--xh-fg-default));
-    font-family: inherit;
-    font-size: var(--xh-number-field-trigger-font-size, var(--xh-_number-field-trigger-font-size));
-    line-height: var(--xh-leading-none);
-    cursor: pointer;
-    /* 按住不放会连发，长按期间浏览器默认会去选中按钮里的符号、
-       触屏上还会当成双击缩放，两条都得先掐掉 */
-    user-select: none;
-    touch-action: manipulation;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'] {
+    order: 2;
   }
 
-  /* 上面给了 display，UA 的 [hidden]{display:none} 已被盖掉，这里补回来 */
-  [data-scope='number-field'][data-part='increment-trigger'][hidden],
-  [data-scope='number-field'][data-part='decrement-trigger'][hidden] {
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger'][hidden],
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger'][hidden] {
     display: none;
   }
 
-  [data-scope='number-field'][data-part='increment-trigger']:hover:not(:disabled),
-  [data-scope='number-field'][data-part='decrement-trigger']:hover:not(:disabled) {
-    border-color: var(--xh-number-field-trigger-border-hover, var(--xh-_number-field-trigger-border-hover));
-    background: var(--xh-number-field-trigger-bg-hover, var(--xh-_number-field-trigger-bg-hover));
-  }
-
-  /* 连发期间按钮一直是按下态：:active 在指针没松开时始终成立，正好对上 */
-  [data-scope='number-field'][data-part='increment-trigger']:active:not(:disabled),
-  [data-scope='number-field'][data-part='decrement-trigger']:active:not(:disabled) {
-    background: var(--xh-number-field-trigger-bg-active, var(--xh-_number-field-trigger-bg-active));
+  /* 右侧动作组与输入之间的细线：把「按的」与「填的」分成两块。
+     线不画在钮的边框上：边框会跟着钮的圆角与悬停底走，而这道线要独立于钮的各态，长度也短于钮自己。
+     ::before 已被兜底字形占着，::after 在粗指针下是家族给的 44px 热区，几何只能落在
+     background-image 上：一条 1px × 半高的渐变贴在逻辑起始侧，底色换态时它仍叠在上层。
+     线只画在动作组第一颗减钮的逻辑起始侧；background-position 是物理轴，RTL 另给一条换边。 */
+  [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
+    background-image: linear-gradient(
+      var(--xh-number-field-trigger-divider, var(--xh-material-soft-separator)),
+      var(--xh-number-field-trigger-divider, var(--xh-material-soft-separator))
+    );
+    background-repeat: no-repeat;
+    background-position: 0 50%;
+    background-size: var(--xh-stroke-thin) var(--xh-number-field-trigger-divider-h, var(--xh-_number-field-divider-h));
   }
 
-  /* 按钮不占 Tab 位（tabindex=-1），留这条是给程序化聚焦兜底 */
-  [data-scope='number-field'][data-part='increment-trigger']:focus-visible,
-  [data-scope='number-field'][data-part='decrement-trigger']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-_number-field-ring);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 贴到 min / max 时连接层给对应那一侧落原生 disabled：单体控件用 :disabled，
-     不是集合条目那套 aria-disabled */
-  [data-scope='number-field'][data-part='increment-trigger']:disabled,
-  [data-scope='number-field'][data-part='decrement-trigger']:disabled {
-    border-color: var(--xh-number-field-trigger-border-disabled, var(--xh-border-subtle));
-    background: var(--xh-number-field-trigger-bg-disabled, var(--xh-bg-muted));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  [dir='rtl'] [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
+    background-position: 100% 50%;
   }
 
   /* 没写内容就由皮肤画兜底字形；作者往部件里塞了自己的图形，这几条即不命中 */
-  [data-scope='number-field'][data-part='increment-trigger']:empty::before {
+  [data-scope='number-field'][data-part='control'] [data-part='increment-trigger']:empty::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -368,7 +203,7 @@
     mask: var(--xh-glyph-mark-plus) center / contain no-repeat;
   }
 
-  [data-scope='number-field'][data-part='decrement-trigger']:empty::before {
+  [data-scope='number-field'][data-part='control'] [data-part='decrement-trigger']:empty::before {
     content: '';
     display: inline-block;
     inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
@@ -379,6 +214,14 @@
     mask: var(--xh-glyph-mark-minus) center / contain no-repeat;
   }
 
+  /* 高对比档整层丢弃 background-image，分隔线改用系统色重画，并关掉这一颗钮的强制换色 */
+  @media (forced-colors: active) {
+    [data-scope='number-field'][data-part='control']:has([data-part='input']) [data-part='decrement-trigger'] {
+      background-image: linear-gradient(ButtonText, ButtonText);
+      forced-color-adjust: none;
+    }
+  }
+
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='number-field'][data-part='control'][hidden] {

package/css/overlay-arrow.css

@@ -1,14 +1,19 @@
 /*
- * 浮层箭头的几何，六份浮层皮肤共用一份，按 [data-part='arrow'] 匹配。
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 浮层箭头的几何，八类浮层共用一份，只匹配这些组件自身的 arrow 部件。
  *
  * 箭头是正方形转 45°，构成尖角的是哪两条物理边，所以贴边与摘边框都写物理属性。
  * 行内轴上的中心点仍写逻辑属性：定位引擎在 RTL 下已把 arrow-x 镜像成逻辑量。
  *
  * 底色与描边色留在各组件皮肤，它们同时把自己的内联落点槽接到这里的统一名字上。
- * 引入顺序排在六份浮层皮肤之后：摘边框那几条要压过各皮肤的 border 简写。
+ * 引入顺序排在消费方皮肤之后；作用域使用 :where，维持原有特异性和摘边优先级。
  */
 @layer xihan.components {
-  [data-part='arrow'] {
+  :where([data-scope='context-menu'], [data-scope='hover-card'], [data-scope='menu'], [data-scope='menubar'], [data-scope='popconfirm'], [data-scope='popover'], [data-scope='tour'], [data-scope='tooltip'])[data-part='arrow'] {
     position: absolute;
     inline-size: var(--xh-_overlay-arrow-size);
     block-size: var(--xh-_overlay-arrow-size);
@@ -16,7 +21,7 @@
   }
 
   /* 浮层落在锚点下方：箭头贴 content 上缘，摘掉埋进 content 的下、右两条边 */
-  [data-part='arrow'][data-placement^='bottom'] {
+  :where([data-scope='context-menu'], [data-scope='hover-card'], [data-scope='menu'], [data-scope='menubar'], [data-scope='popconfirm'], [data-scope='popover'], [data-scope='tour'], [data-scope='tooltip'])[data-part='arrow'][data-placement^='bottom'] {
     top: calc(var(--xh-_overlay-arrow-size) / -2);
     inset-inline-start: calc(var(--xh-_overlay-arrow-x) - var(--xh-_overlay-arrow-size) / 2);
     border-right: 0;
@@ -24,7 +29,7 @@
   }
 
   /* 浮层落在锚点上方：箭头贴 content 下缘，摘掉上、左两条边 */
-  [data-part='arrow'][data-placement^='top'] {
+  :where([data-scope='context-menu'], [data-scope='hover-card'], [data-scope='menu'], [data-scope='menubar'], [data-scope='popconfirm'], [data-scope='popover'], [data-scope='tour'], [data-scope='tooltip'])[data-part='arrow'][data-placement^='top'] {
     bottom: calc(var(--xh-_overlay-arrow-size) / -2);
     inset-inline-start: calc(var(--xh-_overlay-arrow-x) - var(--xh-_overlay-arrow-size) / 2);
     border-top: 0;
@@ -32,7 +37,7 @@
   }
 
   /* 浮层落在锚点右侧：箭头贴 content 左缘，摘掉上、右两条边 */
-  [data-part='arrow'][data-placement^='right'] {
+  :where([data-scope='context-menu'], [data-scope='hover-card'], [data-scope='menu'], [data-scope='menubar'], [data-scope='popconfirm'], [data-scope='popover'], [data-scope='tour'], [data-scope='tooltip'])[data-part='arrow'][data-placement^='right'] {
     top: calc(var(--xh-_overlay-arrow-y) - var(--xh-_overlay-arrow-size) / 2);
     /* stylelint-disable-next-line property-disallowed-list -- 旋转是物理的，贴边跟着物理走 */
     left: calc(var(--xh-_overlay-arrow-size) / -2);
@@ -41,7 +46,7 @@
   }
 
   /* 浮层落在锚点左侧：箭头贴 content 右缘，摘掉下、左两条边 */
-  [data-part='arrow'][data-placement^='left'] {
+  :where([data-scope='context-menu'], [data-scope='hover-card'], [data-scope='menu'], [data-scope='menubar'], [data-scope='popconfirm'], [data-scope='popover'], [data-scope='tour'], [data-scope='tooltip'])[data-part='arrow'][data-placement^='left'] {
     top: calc(var(--xh-_overlay-arrow-y) - var(--xh-_overlay-arrow-size) / 2);
     /* stylelint-disable-next-line property-disallowed-list -- 旋转是物理的，贴边跟着物理走 */
     right: calc(var(--xh-_overlay-arrow-size) / -2);