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

package/css/composer.css

@@ -8,7 +8,7 @@
     align-items: flex-end;
     gap: var(--xh-composer-gap, var(--xh-control-gap-md));
     padding: var(--xh-composer-p, var(--xh-space-2));
-    border: var(--xh-stroke-thin) solid var(--xh-composer-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-composer-border, var(--xh-border-control));
     border-radius: var(--xh-composer-radius, var(--xh-shape-surface));
     background: var(--xh-composer-bg, var(--xh-bg-surface));
   }

package/css/context-menu.css

@@ -4,13 +4,16 @@
     /* 尺寸档只换这四个私有槽，条目与分组标题都从 root 继承它们，
        换档不必给每个部件各写一条选择器。浮层在 positioner 里、也是 root 的后代，一并继承
        （display:contents 不影响继承：自定义属性沿 DOM 树传） */
-    --xh-_context-menu-item-py: var(--xh-space-2);
-    --xh-_context-menu-item-px: var(--xh-control-px-sm);
+    --xh-_context-menu-item-py: var(--xh-space-1_5);
+    --xh-_context-menu-item-px: var(--xh-control-px-md);
     --xh-_context-menu-item-gap: var(--xh-control-gap-md);
     --xh-_context-menu-font-size: var(--xh-text-body-size);
 
-    /* 条目高亮底与标记位强调色随语气走。没写 data-tone 时这两个语气槽没被声明，各自退回原来的取值 */
-    --xh-_context-menu-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
+    /* 打开子菜单的触发条目走品牌淡底强档，随语气换色相；没写 data-tone 时退回品牌淡底。
+       悬停与键盘焦点恒中性灰轻档、不接语气槽——两档同色相的话打开路径就认不出来了 */
+    --xh-_context-menu-item-active-bg: var(--xh-_tone-subtle, var(--xh-bg-brand-subtle));
+
+    /* 标记位强调色随语气走，没写 data-tone 时退回原来的取值 */
     --xh-_context-menu-accent: var(--xh-_tone, var(--xh-fg-subtle));
 
     display: contents;
@@ -21,18 +24,18 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在上面的基础规则里。条目内外边距缺省档本就不在 control-h/px 那把尺上
-     （高度由 padding 撑出来、行内内缩取的是 sm 档），故按 space 档上下各挪一级 */
+  /* 缺省档写在上面的基础规则里。条目高度由 padding 撑出来：
+     纵向走 space 档、行内内缩走 control-px 档（随密度轴），换档各挪一级 */
   [data-scope='context-menu'][data-part='root'][data-size='sm'] {
     --xh-_context-menu-item-py: var(--xh-space-1);
-    --xh-_context-menu-item-px: var(--xh-space-1);
+    --xh-_context-menu-item-px: var(--xh-control-px-sm);
     --xh-_context-menu-item-gap: var(--xh-control-gap-sm);
     --xh-_context-menu-font-size: var(--xh-font-size-sm);
   }
 
   [data-scope='context-menu'][data-part='root'][data-size='lg'] {
-    --xh-_context-menu-item-py: var(--xh-space-3);
-    --xh-_context-menu-item-px: var(--xh-space-3);
+    --xh-_context-menu-item-py: var(--xh-space-2);
+    --xh-_context-menu-item-px: var(--xh-control-px-lg);
     --xh-_context-menu-item-gap: var(--xh-control-gap-lg);
     --xh-_context-menu-font-size: var(--xh-font-size-lg);
   }
@@ -82,8 +85,14 @@
     display: none;
   }
 
-  /* 容器只是焦点域兜底落点，落焦不画环：高亮永远长在条目上 */
-  [data-scope='context-menu'][data-part='content']:focus-visible {
+  /* 焦点落在容器上只有一种情形：指针打开、还没有任何条目当锚点。那一刻它认领着 Tab 位，
+     环画在浮层内沿，用户才看得出键盘此刻在哪儿；有锚点时环长在条目上，容器不再画 */
+  [data-scope='context-menu'][data-part='content'][tabindex='0']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='context-menu'][data-part='content']:not([tabindex='0']):focus-visible {
     outline: none;
   }
 
@@ -135,10 +144,13 @@
     border-radius: var(--xh-context-menu-item-radius, var(--xh-shape-control));
     color: var(--xh-context-menu-item-fg, var(--xh-fg-default));
     font-size: var(--xh-context-menu-item-font-size, var(--xh-_context-menu-font-size));
-    line-height: var(--xh-leading-none);
+    line-height: var(--xh-context-menu-item-leading, var(--xh-leading-normal));
     white-space: nowrap;
     cursor: pointer;
     user-select: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 条目可以按需收起（按上下文过滤掉的命令），有 display 就得补这条 */
@@ -146,14 +158,28 @@
     display: none;
   }
 
-  /* 键盘高亮与指针高亮共用一套底色：条目本身承载焦点，不另画描边。
+  /* 悬停与键盘焦点共用中性灰轻档：条目本身承载焦点，不另画描边。
      data-highlighted 跟的是连接层记的焦点条目，与 :focus 说的是同一件事，
      子部件够不着那个伪类，只能读这个标记 */
   [data-scope='context-menu'][data-part='item']:not([data-disabled]):is(:hover, :focus, [data-highlighted]) {
-    background: var(--xh-context-menu-item-bg-highlight, var(--xh-_context-menu-item-highlight-bg));
+    background: var(--xh-context-menu-item-bg-hover, var(--xh-bg-subtle));
+  }
+
+  /* 打开子菜单的触发条目是展开路径，走品牌淡底加粗强档。
+     必须排在轻档之后：悬停或焦点回到它身上时同特指度靠书写顺序压过轻档 */
+  [data-scope='context-menu'][data-part='item']:not([data-disabled])[data-state='open'] {
+    background: var(--xh-context-menu-item-bg-active, var(--xh-_context-menu-item-active-bg));
+    font-weight: var(--xh-context-menu-item-active-font-weight, var(--xh-font-weight-semibold));
   }
 
-  [data-scope='context-menu'][data-part='item']:focus {
+  /* 键盘走到条目上要画环：轻档底色只有 1.1:1，够不上焦点指示器的对比度要求。
+     指针悬停走的是程序化聚焦，鼠标模态下 :focus-visible 不匹配，不会误画 */
+  [data-scope='context-menu'][data-part='item']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: calc(-1 * var(--xh-ring-width));
+  }
+
+  [data-scope='context-menu'][data-part='item']:focus:not(:focus-visible) {
     outline: none;
   }
 
@@ -204,11 +230,15 @@
   }
 
   /* 箭头是旋转 45° 的方块，只保留朝向锚点那两条边的描边；
-     引擎不产出箭头偏移，因此沿交叉轴固定居中 */
+     交叉轴落点由定位引擎经内联自定义属性写进来，没给时退回居中 */
   [data-scope='context-menu'][data-part='arrow'] {
+    --xh-_context-menu-arrow-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
+    --xh-_context-menu-arrow-x: 50%;
+    --xh-_context-menu-arrow-y: 50%;
+
     position: absolute;
-    inline-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
-    block-size: var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size));
+    inline-size: var(--xh-_context-menu-arrow-size);
+    block-size: var(--xh-_context-menu-arrow-size);
     background: var(--xh-context-menu-bg, var(--xh-bg-surface));
     border: var(--xh-stroke-thin) solid var(--xh-context-menu-border, var(--xh-border-default));
     rotate: 45deg;
@@ -219,29 +249,29 @@
   }
 
   [data-scope='context-menu'][data-part='arrow'][data-placement^='bottom'] {
-    inset-block-start: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-start: calc(var(--xh-_context-menu-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_context-menu-arrow-x) - var(--xh-_context-menu-arrow-size) / 2);
     border-block-end: 0;
     border-inline-end: 0;
   }
 
   [data-scope='context-menu'][data-part='arrow'][data-placement^='top'] {
-    inset-block-end: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-inline-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-block-end: calc(var(--xh-_context-menu-arrow-size) / -2);
+    inset-inline-start: calc(var(--xh-_context-menu-arrow-x) - var(--xh-_context-menu-arrow-size) / 2);
     border-block-start: 0;
     border-inline-start: 0;
   }
 
   [data-scope='context-menu'][data-part='arrow'][data-placement^='right'] {
-    inset-inline-start: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-start: calc(var(--xh-_context-menu-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_context-menu-arrow-y) - var(--xh-_context-menu-arrow-size) / 2);
     border-block-start: 0;
     border-inline-end: 0;
   }
 
   [data-scope='context-menu'][data-part='arrow'][data-placement^='left'] {
-    inset-inline-end: calc(var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / -2);
-    inset-block-start: calc(50% - var(--xh-context-menu-arrow-size, var(--xh-overlay-arrow-size)) / 2);
+    inset-inline-end: calc(var(--xh-_context-menu-arrow-size) / -2);
+    inset-block-start: calc(var(--xh-_context-menu-arrow-y) - var(--xh-_context-menu-arrow-size) / 2);
     border-block-end: 0;
     border-inline-start: 0;
   }

package/css/date-field.css

@@ -8,8 +8,8 @@
     --xh-_date-field-label-font-size: var(--xh-text-label-size);
     /* 形态档只换这三个私有槽：底色与两档描边 */
     --xh-_date-field-control-bg: var(--xh-bg-canvas);
-    --xh-_date-field-control-border: var(--xh-border-default);
-    --xh-_date-field-control-border-hover: var(--xh-border-strong);
+    --xh-_date-field-control-border: var(--xh-border-control);
+    --xh-_date-field-control-border-hover: var(--xh-border-control-hover);
     /* 聚焦环与段位反白随语气走。没写 data-tone 时这几个 --xh-_tone* 没被声明，退回原来的焦点色与品牌色 */
     --xh-_date-field-ring: var(--xh-ring-focus);
     --xh-_date-field-segment-bg: var(--xh-_tone, var(--xh-bg-brand));
@@ -39,15 +39,15 @@
   /* 描边式：与缺省等价，写出来是为了三档形态在皮肤里都看得见 */
   [data-scope='date-field'][data-part='root'][data-variant='outline'] {
     --xh-_date-field-control-bg: var(--xh-bg-canvas);
-    --xh-_date-field-control-border: var(--xh-border-default);
-    --xh-_date-field-control-border-hover: var(--xh-border-strong);
+    --xh-_date-field-control-border: var(--xh-border-control);
+    --xh-_date-field-control-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='date-field'][data-part='root'][data-variant='subtle'] {
     --xh-_date-field-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_date-field-control-border: transparent;
-    --xh-_date-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_date-field-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   /* 无框式：底与边都让开，可见反馈只剩聚焦那一档 */

package/css/date-picker.css

@@ -39,7 +39,7 @@
     block-size: var(--xh-date-picker-control-h, var(--xh-control-h-md));
     padding-inline: var(--xh-date-picker-control-px, var(--xh-control-px-md));
     padding-block: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-date-picker-control-border, var(--xh-border-default));
+    border: var(--xh-stroke-thin) solid var(--xh-date-picker-control-border, var(--xh-border-control));
     border-radius: var(--xh-date-picker-control-radius, var(--xh-shape-control));
     background: var(--xh-date-picker-control-bg, var(--xh-bg-canvas));
     color: var(--xh-date-picker-control-fg, var(--xh-fg-default));
@@ -52,7 +52,7 @@
 
   /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
   [data-scope='date-picker'][data-part='control']:hover:not([data-disabled], [data-invalid]) {
-    border-color: var(--xh-date-picker-control-border-hover, var(--xh-border-strong));
+    border-color: var(--xh-date-picker-control-border-hover, var(--xh-border-control-hover));
   }
 
   /* 焦点落在某一段或某个按钮上，而边框长在 control 上：焦点环得由内向外借一层。
@@ -213,6 +213,70 @@
   [data-scope='date-picker'][data-part='calendar'][hidden] {
     display: none;
   }
+
+  /* —— showTime：时间列贴在日历右侧、逐列滚动，确认按钮收口 ——
+     content 是 block，作者把日历与时间列包进一行排布；列自身只管滚与选项画法 */
+  [data-scope='date-picker'][data-part='time-column'] {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    max-block-size: var(--xh-date-picker-time-column-h, 14rem);
+    padding: var(--xh-space-1);
+    overflow-y: auto;
+    border-inline-start: var(--xh-stroke-thin) solid var(--xh-date-picker-content-border, var(--xh-border-default));
+  }
+
+  [data-scope='date-picker'][data-part='time-column'][hidden] {
+    display: none;
+  }
+
+  [data-scope='date-picker'][data-part='time-item'] {
+    padding-block: var(--xh-space-1);
+    padding-inline: var(--xh-space-3);
+    border-radius: var(--xh-shape-control);
+    font-size: var(--xh-font-size-sm);
+    line-height: var(--xh-leading-normal);
+    text-align: center;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  [data-scope='date-picker'][data-part='time-item']:hover {
+    background: var(--xh-date-picker-time-item-bg-hover, var(--xh-bg-subtle));
+  }
+
+  [data-scope='date-picker'][data-part='time-item'][data-selected] {
+    background: var(--xh-date-picker-time-item-bg-selected, var(--xh-bg-brand-subtle));
+    color: var(--xh-date-picker-time-item-fg-selected, var(--xh-fg-brand));
+    font-weight: var(--xh-font-weight-medium);
+  }
+
+  [data-scope='date-picker'][data-part='confirm-trigger'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    block-size: var(--xh-control-h-sm);
+    padding-inline: var(--xh-control-px-sm);
+    border: none;
+    border-radius: var(--xh-shape-control);
+    background: var(--xh-date-picker-confirm-bg, var(--xh-bg-brand));
+    color: var(--xh-date-picker-confirm-fg, var(--xh-fg-on-brand));
+    font-size: var(--xh-font-size-sm);
+    cursor: pointer;
+  }
+
+  [data-scope='date-picker'][data-part='confirm-trigger']:hover {
+    background: var(--xh-date-picker-confirm-bg-hover, var(--xh-bg-brand-hover));
+  }
+
+  [data-scope='date-picker'][data-part='confirm-trigger']:focus-visible {
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
+    outline-offset: var(--xh-ring-offset);
+  }
+
+  [data-scope='date-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
 }
 
 @layer xihan.motion {

package/css/drawer.css

@@ -112,7 +112,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 +132,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 {

package/css/dynamic-input.css

@@ -117,7 +117,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 +135,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

@@ -103,7 +103,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 +131,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 +178,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 +202,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 +238,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/field.css

@@ -5,6 +5,30 @@
     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 +40,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

@@ -32,7 +32,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 +51,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 +86,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/float-button.css

@@ -56,7 +56,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 +72,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

@@ -12,6 +12,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 +116,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 +137,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 +164,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));
   }
 }

package/css/hover-card.css

@@ -100,40 +100,44 @@
   }
 
   /* 箭头是旋转 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;
   }