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

package/css/combobox.css

@@ -1,4 +1,23 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='combobox'] {
+    --xh-combobox-skin: 1;
+  }
+
   [data-scope='combobox'][data-part='root'] {
     /* 尺寸档只换这五个私有槽，输入行、标题与候选都从 root 继承它们，
        换档不必给每个部件各写一条选择器。浮层在 positioner 里、也是 root 的后代，一并继承 */
@@ -10,14 +29,13 @@
 
     /* 形态档只换这三个槽：缺省即 outline（描边 + 画布底） */
     --xh-_combobox-control-bg: var(--xh-bg-canvas);
-    --xh-_combobox-control-border: var(--xh-border-default);
-    --xh-_combobox-control-border-hover: var(--xh-border-strong);
+    --xh-_combobox-control-border: var(--xh-border-control);
+    --xh-_combobox-control-border-hover: var(--xh-border-control-hover);
 
-    /* 强调色随语气走，只落在聚焦与选中上，正文文字色不动。
-       没写 data-tone 时 --xh-_tone 没被声明，三处都退回原来的取值 */
+    /* 聚焦环恒用固定环色；强调色随语气走，只落在勾选标记与选中文字上，正文文字色不动。
+       没写 data-tone 时 --xh-_tone 没被声明，两处都退回原来的取值 */
     --xh-_combobox-ring: var(--xh-ring-focus);
     --xh-_combobox-accent: var(--xh-_tone, var(--xh-bg-brand));
-    --xh-_combobox-item-highlight-bg: var(--xh-_tone-subtle-hover, var(--xh-bg-subtle-hover));
     --xh-_combobox-item-selected-fg: var(--xh-_tone-fg, var(--xh-fg-brand-strong));
 
     display: inline-flex;
@@ -53,21 +71,21 @@
      形态只决定描边与底色怎么用，用哪族颜色由 data-tone 决定 */
   [data-scope='combobox'][data-part='root'][data-variant='outline'] {
     --xh-_combobox-control-bg: var(--xh-bg-canvas);
-    --xh-_combobox-control-border: var(--xh-border-default);
-    --xh-_combobox-control-border-hover: var(--xh-border-strong);
+    --xh-_combobox-control-border: var(--xh-border-control);
+    --xh-_combobox-control-border-hover: var(--xh-border-control-hover);
   }
 
   /* 填充式：底色顶替描边，悬停时才浮出一道淡边 */
   [data-scope='combobox'][data-part='root'][data-variant='subtle'] {
     --xh-_combobox-control-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
     --xh-_combobox-control-border: transparent;
-    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='combobox'][data-part='root'][data-variant='ghost'] {
     --xh-_combobox-control-bg: transparent;
     --xh-_combobox-control-border: transparent;
-    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-default));
+    --xh-_combobox-control-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
   }
 
   [data-scope='combobox'][data-part='label'] {
@@ -205,11 +223,11 @@
     display: none;
   }
 
-  /* 展开时箭头翻个面，指向与列表的去向一致；transition 要重写全份，只补一条会覆盖掉上面那条 */
-  [data-scope='combobox'][data-part='trigger'] {
-    transition:
-      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
-      rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  /* 展开时箭头翻个面，指向与列表的去向一致。转的是字形或作者塞的图形，不转按钮本体：
+     按钮自带悬停底色，整个按钮转会带着底色一起转 */
+  [data-scope='combobox'][data-part='trigger']:empty::before,
+  [data-scope='combobox'][data-part='trigger'] > * {
+    transition: rotate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 没写内容就由皮肤画箭头；作者往部件里塞了自己的图形，这条规则即不命中 */
@@ -222,7 +240,8 @@
     content: '✕';
   }
 
-  [data-scope='combobox'][data-part='trigger'][data-state='open'] {
+  [data-scope='combobox'][data-part='trigger'][data-state='open']:empty::before,
+  [data-scope='combobox'][data-part='trigger'][data-state='open'] > * {
     rotate: 180deg;
   }
 
@@ -315,7 +334,7 @@
   [data-scope='combobox'][data-part='item-group-label'] {
     display: block;
     padding-block: var(--xh-combobox-group-label-py, var(--xh-space-1));
-    padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-sm));
+    padding-inline: var(--xh-combobox-group-label-px, var(--xh-control-px-md));
     color: var(--xh-combobox-group-label-fg, var(--xh-fg-subtle));
     font-size: var(--xh-combobox-group-label-font-size, var(--xh-font-size-xs));
     font-weight: var(--xh-combobox-group-label-font-weight, var(--xh-font-weight-medium));
@@ -331,8 +350,8 @@
     display: flex;
     align-items: center;
     gap: var(--xh-combobox-item-gap, var(--xh-_combobox-gap));
-    padding-block: var(--xh-combobox-item-py, var(--xh-space-1));
-    padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-sm));
+    padding-block: var(--xh-combobox-item-py, var(--xh-space-1_5));
+    padding-inline: var(--xh-combobox-item-px, var(--xh-control-px-md));
     border-radius: var(--xh-combobox-item-radius, var(--xh-shape-control));
     color: var(--xh-combobox-item-fg, var(--xh-fg-default));
     font-size: var(--xh-combobox-item-font-size, var(--xh-_combobox-font-size));
@@ -341,6 +360,9 @@
     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 就得补这条 */
@@ -348,10 +370,10 @@
     display: none;
   }
 
-  /* 只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
+  /* 键盘锚点走中性灰轻档。只认 data-highlighted，不写 :hover：指针划过时连接层已经把高亮搬过来了，
      两套底色各画各的会出现"鼠标停在 A 上、回车提交的却是 B" */
   [data-scope='combobox'][data-part='item'][data-highlighted]:not([data-disabled]) {
-    background: var(--xh-combobox-item-bg-highlight, var(--xh-_combobox-item-highlight-bg));
+    background: var(--xh-combobox-item-bg-hover, var(--xh-bg-subtle));
   }
 
   /* 选中只换文字色与字重，配合行尾的 ✓ 标记；底色整条通道留给高亮，

package/css/composer.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='composer'] {
+    --xh-composer-skin: 1;
+  }
+
   /* 边框画在 root 上，内部 textarea 无边框；align-items: flex-end 让按钮随输入框长高贴着底边 */
   [data-scope='composer'][data-part='root'] {
     /* 输入与发送按钮共用的控件高度 */
@@ -8,7 +13,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

@@ -1,16 +1,24 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='context-menu'] {
+    --xh-context-menu-skin: 1;
+  }
+
   /* 根只是把触发区与浮层圈在一起做作用域，不该在作者布局里多插一层盒子 */
   [data-scope='context-menu'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，条目与分组标题都从 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 +29,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 +90,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;
   }
 
@@ -93,13 +107,6 @@
     animation: xh-context-menu-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
-  /* 关掉动效的用户不该被涨开动画晃一下；这里只管本组件，公共那份不动 */
-  @media (prefers-reduced-motion: reduce) {
-    [data-scope='context-menu'][data-part='content'][data-state='open'] {
-      animation-duration: 0.01ms;
-    }
-  }
-
   [data-scope='context-menu'][data-part='group'] {
     display: flex;
     flex-direction: column;
@@ -135,10 +142,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 +156,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 +228,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 +247,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;
   }
@@ -252,7 +280,7 @@
   @keyframes xh-context-menu-in {
     from {
       opacity: 0;
-      scale: 0.96;
+      scale: var(--xh-motion-scale-enter);
     }
 
     to {

package/css/countdown.css

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

package/css/date-field.css

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='date-field'] {
+    --xh-date-field-skin: 1;
+  }
+
   /* 与文本框、数字框同一套堆叠：标签一行、分段框一行 */
   [data-scope='date-field'][data-part='root'] {
     /* 尺寸档只换这四个私有槽，标题与分段框都从 root 继承它们，换档不必给每个部件各写一条选择器 */
@@ -8,8 +13,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 +44,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

@@ -1,4 +1,9 @@
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='date-picker'] {
+    --xh-date-picker-skin: 1;
+  }
+
   /* 与文本框、分段日期同一套堆叠：标签一行、输入行一行 */
   [data-scope='date-picker'][data-part='root'] {
     display: inline-flex;
@@ -39,7 +44,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 +57,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 +218,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 {
@@ -220,7 +289,7 @@
   @keyframes xh-date-picker-in {
     from {
       opacity: 0;
-      translate: 0 -4px;
+      translate: 0 calc(-1 * var(--xh-motion-distance-sm));
     }
 
     to {

package/css/descriptions.css

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

package/css/dialog.css

@@ -1,4 +1,63 @@
+@layer xihan.motion {
+  /* 动画名的查找只认「文档里有没有这个名字」：引用别处文件里的名字，那份文件不一定在场，
+     动画会静默地整个不跑。每份皮肤都能单独引入，所以它用到的关键帧都写在自己身上。 */
+  @keyframes xh-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes xh-fade-out {
+    from {
+      opacity: 1;
+    }
+
+    to {
+      opacity: 0;
+    }
+  }
+
+  /* 幅度走令牌，减弱动效时由令牌层归零；位移与缩放用独立属性而非 transform 简写，
+     两者互不覆盖，手势期间写 translate 也不会把 scale 抹掉 */
+  @keyframes xh-dialog-in {
+    from {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+
+    to {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+  }
+
+  @keyframes xh-dialog-out {
+    from {
+      opacity: 1;
+      translate: 0 0;
+      scale: 1;
+    }
+
+    to {
+      opacity: 0;
+      translate: 0 var(--xh-motion-distance-md);
+      scale: var(--xh-motion-scale-enter);
+    }
+  }
+}
+
 @layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='dialog'] {
+    --xh-dialog-skin: 1;
+  }
+
   [data-scope='dialog'][data-part='backdrop'] {
     position: fixed;
     inset: 0;
@@ -10,8 +69,9 @@
     animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
+  /* 退场补 forwards：动画播完到宿主真正卸载之间还有一帧，不定住终态遮罩会闪回全黑 */
   [data-scope='dialog'][data-part='backdrop'][data-state='closed'] {
-    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+    animation: xh-fade-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='dialog'][data-part='positioner'] {
@@ -48,12 +108,13 @@
     box-shadow: var(--xh-dialog-shadow, var(--xh-elevation-3));
   }
 
-  /* 收起态：connect 会给 content 打 hidden，但上面那条 display 会盖掉 UA 的
-     [hidden]{display:none}。meta 里 positioner 并非必需部件，按最小合规结构
-     （只有 trigger + content）写时，没有这一条收起的对话框就一直摊在页面上。 */
-  [data-scope='dialog'][data-part='content'][hidden] {
-    display: none;
-  }
+  /* 这里刻意没有 [data-part='content'][hidden] { display: none }，与 drawer 一致：
+     收起态连接层会给 content 打 hidden，而上面那条 display: flex 正是要盖掉 UA 的
+     [hidden]{display:none}——退场动画得先能播。presence 读的是 content 的 animationName，
+     读到才申领租约、等 animationend 才卸载；一旦 display: none，元素不生成盒子、
+     动画根本不启动，探测器直接放弃租约，退场动画一帧都播不出来。
+     真正的收起由适配器兜住：Vue 卸载整棵，WC 写内联 style.display。
+     其余声明了 display 的角色节点仍补 [hidden]，那几处没有退场动画。 */
 
   /* —— 尺寸 —— */
   /* 只有最大宽度分档；中间档不写规则，缺省即中档。
@@ -70,13 +131,12 @@
     outline: none;
   }
 
-  /* 入场用 @starting-style 只驱动动画名切换；退场由 presence 保留 DOM 后播放 */
   [data-scope='dialog'][data-part='content'][data-state='open'] {
     animation: xh-dialog-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter);
   }
 
   [data-scope='dialog'][data-part='content'][data-state='closed'] {
-    animation: xh-dialog-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit);
+    animation: xh-dialog-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
   [data-scope='dialog'][data-part='title'] {