@xihan-ui/styles 3.0.0 → 3.2.0

package/css/page-header.css

@@ -149,7 +149,7 @@
   }
 
   [data-scope='page-header'][data-part='root']:has(> [data-part='description'])
-    > :is([data-part='back-trigger'], [data-part='media'], [data-part='extra']) {
+    > :is([data-part='back-trigger'], [data-part='media'], [data-part='extra']):where([data-scope='page-header']) {
     grid-row: span 2;
   }
 
@@ -166,7 +166,7 @@
       grid-column: 2;
     }
 
-    [data-scope='page-header'][data-part='root'] > [data-part='extra'] {
+    [data-scope='page-header'][data-part='root'] > [data-part='extra']:where([data-scope='page-header']) {
       grid-column: 1 / -1;
       grid-row: auto;
       margin-inline-start: 0;

package/css/password-input.css

@@ -202,7 +202,7 @@
      分不出焦点在框里还是在钮上，所以钮上再画一圈自己的环（家族只对不占 Tab 位的内嵌钮关环）。
      环往内收，压在按钮自己的方框里，不与盒子外面那一圈叠在一起。
      指示焦点只能用环不能用底色：可用的几档底色压在盒底上都到不了 3:1，换了色也等于没画 */
-  [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:focus-visible {
+  [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:where([data-scope='password-input']):focus-visible {
     outline: var(--xh-ring-width) solid var(--xh-_password-input-ring);
     outline-offset: var(--xh-ring-offset);
   }
@@ -357,7 +357,7 @@
 
     /* 关掉强制换色后，上面那圈自留的 :focus-visible 环与家族普通态的焦点底/字都会按作者色落地；
        家族高对比块的特指度压不过它们，这里用同一选择器把环、底、字改回系统色 */
-    [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:focus-visible {
+    [data-scope='password-input'][data-part='control'] [data-part='visibility-trigger']:where([data-scope='password-input']):focus-visible {
       outline-color: Highlight;
       background-color: ButtonFace;
       color: ButtonText;

package/css/popconfirm.css

@@ -145,7 +145,7 @@
   }
 
   /* 箭头绝对定位挂在 content 上，不占格：吃到栅格位的话它的贴边就从格线起算，被内衬推进面里 */
-  [data-scope='popconfirm'][data-part='content'] > [data-part='arrow'] {
+  [data-scope='popconfirm'][data-part='content'] > [data-part='arrow']:where([data-scope='popconfirm']) {
     grid-column: auto;
   }
 
@@ -234,11 +234,11 @@
   }
 
   /* 并排落在最后一行的右侧两格；取消在左、确认在右 */
-  [data-scope='popconfirm'][data-part='content'] > [data-part='cancel-trigger'] {
+  [data-scope='popconfirm'][data-part='content'] > [data-part='cancel-trigger']:where([data-scope='popconfirm']) {
     grid-column: 2;
   }
 
-  [data-scope='popconfirm'][data-part='content'] > [data-part='confirm-trigger'] {
+  [data-scope='popconfirm'][data-part='content'] > [data-part='confirm-trigger']:where([data-scope='popconfirm']) {
     grid-column: 3;
   }
 

package/css/question-flow.css

@@ -41,7 +41,7 @@
   }
 
   /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='question-flow'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='root']:not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 
@@ -201,27 +201,27 @@
      位次就是到达顺序。落在首帧就在的列表条目里（历史消息）时直接呈现。
      backwards 不能省：等待期间起帧不生效的话，后面几条会先露一下再跳回去。
      第 6 条起并到同一拍上 */
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation: xh-rise-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(2):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(2):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 1);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(3):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(3):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 2);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(4):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(4):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 3);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(5):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(5):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 4);
   }
 
-  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:nth-child(n + 6):not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='question'][data-current] [data-part='item']:where([data-scope='question-flow']):nth-child(n + 6):not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation-delay: calc(var(--xh-motion-stagger-step) * 5);
   }
 
@@ -504,7 +504,7 @@
   }
 
   /* 落定结果弹出；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='question-flow'][data-part='result']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='question-flow'][data-part='result']:not([data-scope][data-part='item'][data-instant] :where([data-scope='question-flow'])) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
   }
 

package/css/radar-chart.css

@@ -167,12 +167,12 @@
 
   /* —— 纹理：颜色不可用或不可靠时（强制色、打印、祖先写了 data-xh-chart-patterns），面积改用本系列在 defs 里的
      纹理填充、描出轮廓，轮廓换线型。色标的纹理在配方里 —— */
-  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='radar-chart']) {
     fill: var(--xh-_chart-pattern);
     fill-opacity: 1;
   }
 
-  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+  :where([data-xh-chart-patterns]) [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='radar-chart']) {
     stroke-dasharray: var(--xh-_chart-dash);
   }
 
@@ -204,13 +204,13 @@
       stroke: Canvas;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='radar-chart']) {
       forced-color-adjust: none;
       fill: var(--xh-_chart-pattern);
       fill-opacity: 1;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='radar-chart']) {
       stroke-dasharray: var(--xh-_chart-dash);
     }
   }
@@ -221,12 +221,12 @@
       display: none;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='area-fill']:where([data-scope='radar-chart']) {
       fill: var(--xh-_chart-pattern);
       fill-opacity: 1;
     }
 
-    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line'] {
+    [data-scope='radar-chart'][data-xh-chart-pattern] > [data-part='line']:where([data-scope='radar-chart']) {
       stroke-dasharray: var(--xh-_chart-dash);
     }
   }

package/css/rating.css

@@ -78,7 +78,7 @@
     justify-content: start;
   }
 
-  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label'] {
+  [data-scope='rating'][data-part='root']:has(> [data-part='value-text']) > [data-part='label']:where([data-scope='rating']) {
     grid-column: 1 / -1;
   }
 

package/css/select.css

@@ -224,7 +224,7 @@
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
      value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中项文本 */
-  [data-scope='select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+  [data-scope='select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text']:where([data-scope='select']) {
     display: none;
   }
 
@@ -256,7 +256,7 @@
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
-  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'] {
+  [data-scope='select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator']:where([data-scope='select']) {
     display: none;
   }
 

package/css/separator.css

@@ -109,8 +109,8 @@
   }
 
   /* 文字靠边：靠哪边就把那一侧的线收成一小截，另一侧照旧等分 */
-  [data-scope='separator'][data-part='root'][data-align='start'] > [data-part='line']:first-child,
-  [data-scope='separator'][data-part='root'][data-align='end'] > [data-part='line']:last-child {
+  [data-scope='separator'][data-part='root'][data-align='start'] > [data-part='line']:where([data-scope='separator']):first-child,
+  [data-scope='separator'][data-part='root'][data-align='end'] > [data-part='line']:where([data-scope='separator']):last-child {
     flex: 0 0 var(--xh-separator-align-length, var(--xh-space-6));
   }
 

package/css/side-nav.css

@@ -112,11 +112,11 @@
 
   /* 折叠一开始搜索框就与行文字一起淡出，展开等整栏宽度落定才淡入；落成图标栏之后让位：
      留着高度、不可见也不可聚焦（过滤此时暂停），下面的行不上下跳 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input'] {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='input']:where([data-scope='side-nav']) {
     opacity: 0;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input'] {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='input']:where([data-scope='side-nav']) {
     visibility: hidden;
   }
 
@@ -171,13 +171,13 @@
 
   /* 图标栏里分组标题没有落点：字淡成透明、仍参与播报，标题留着自己的高度，下面的行不上下跳；
      折叠一开始就淡出，展开等整栏宽度落定才淡入。落成图标栏之后在这一格里画一道细分隔，分组仍看得出来 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label'] {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='group-label']:where([data-scope='side-nav']) {
     overflow: hidden;
     color: transparent;
     white-space: nowrap;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where([data-scope='side-nav'])::after {
     content: '';
     position: absolute;
     inset-inline: var(--xh-_side-nav-row-px);
@@ -275,9 +275,9 @@
 
   /* 行文字与展开箭头的淡变：折叠一开始就淡出，此时仍在行里、由收窄的行宽裁着；展开时等整栏宽度落定才淡入。
      弹出面板里的行不在此列 */
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='link-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root']:is([data-collapsed], [data-animating]) [data-part='branch-indicator']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     opacity: 0;
   }
 
@@ -286,8 +286,8 @@
      藏成 display:none 它们就一个名字都没有了。
      white-space: nowrap 防止 1px 宽把文本挤成竖排。
      弹出面板里的行不在此列——面板是正常宽度的浮层，文字照常显示 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link-text']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     position: absolute;
     inline-size: 1px;
     block-size: 1px;
@@ -300,12 +300,12 @@
   }
 
   /* 展开指示是纯装饰（aria-hidden），落成图标栏之后整个不占位 */
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-indicator']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     display: none;
   }
 
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:not([data-popout] *),
-  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:not([data-popout] *) {
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='branch-trigger']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])),
+  [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='link']:where([data-scope='side-nav']):not([data-popout] :where([data-scope='side-nav'])) {
     --xh-collection-inline-padding: 0;
 
     justify-content: center;
@@ -441,7 +441,7 @@
 
   @media (forced-colors: active) {
     /* 图标栏里分组之间那道细分隔画的是一块底色，这一档里底色被统一换成 Canvas、整道消失；换成 GrayText 画回来 */
-    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']::after {
+    [data-scope='side-nav'][data-part='root'][data-collapsed]:not([data-animating]) [data-part='group-label']:where([data-scope='side-nav'])::after {
       background: GrayText;
     }
   }

package/css/skeleton.css

@@ -90,13 +90,13 @@
    * 微光扫的是一道亮带，呼吸改的是整根的浓淡——两者都表达"还在等"，
    * 换哪一档由作者定，缺省仍是微光。
    */
-  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
     background-image: none;
     animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-sweep) infinite alternate;
   }
 
   /* 静止档：底色留着，两层动效都撤掉 */
-  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item'] {
+  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item']:where([data-scope='skeleton']) {
     background-image: none;
     animation: none;
   }
@@ -104,17 +104,17 @@
   /* 呼吸档自带一条动画，压不住下面基础降级里的 animation: none，这一档各自再写一份。
      两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
     animation: none;
   }
 
   @media print {
-    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item']:where([data-scope='skeleton']) {
       animation: none;
     }
   }

package/css/slider.css

@@ -64,7 +64,7 @@
      排了刻度文案的横轨两侧各让出一段，那半个文案落进让出来的这一段里。
      让在控件上而不是根上：轨道、刻度、拇指的坐标都以控件为基准，一起让开才不会彼此错位。 */
   [data-scope='slider'][data-part='root']:has([data-part='tick-label'])
-    [data-part='control'][data-orientation='horizontal'] {
+    [data-part='control'][data-orientation='horizontal']:where([data-scope='slider']) {
     margin-inline: var(--xh-slider-control-gutter, var(--xh-space-6));
   }
 
@@ -335,27 +335,27 @@
 
   /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
      已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick']:where([data-scope='slider']) {
     background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
   }
 
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed]:where([data-scope='slider']) {
     background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
   }
 
-  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label'] {
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label']:where([data-scope='slider']) {
     color: var(--xh-slider-tick-label-fg-disabled, var(--xh-fg-disabled));
     cursor: not-allowed;
   }
 
   /* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick']:where([data-scope='slider']) {
     inset-block-start: auto;
     inset-inline-start: 50%;
     translate: calc(-50% * var(--xh-direction-sign)) 50%;
   }
 
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label']:where([data-scope='slider']) {
     inset-block-start: auto;
     inset-inline-start: 100%;
     margin-block-start: 0;

package/css/sortable.css

@@ -50,7 +50,7 @@
      其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。
      键盘拖动时被拖那一项不跟手、逐格挪，与让位的邻项同一段一起滑；抓起时的抬升照常淡变。
      同组别的列表的一项悬在这里（data-drop='inside'）时，插入点及其后的项同样是被让开的 */
-  [data-scope='sortable'][data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:not([data-dragging]) {
+  [data-scope='sortable'][data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:where([data-scope='sortable']):not([data-dragging]) {
     transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
   }
 
@@ -62,7 +62,7 @@
     flex: 0 0 var(--xh-_sortable-incoming-size);
   }
 
-  [data-scope='sortable'][data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging] {
+  [data-scope='sortable'][data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging]:where([data-scope='sortable']) {
     transition:
       translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),

package/css/table.css

@@ -307,6 +307,23 @@
     user-select: none;
   }
 
+  /* 列对齐：data-align 控制列头与数据格的文本与内容对齐方向；
+     显式写出三档以便 start 能重置自定义皮肤里可能存在的非默认对齐 */
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='start'] {
+    text-align: start;
+    justify-content: start;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='center'] {
+    text-align: center;
+    justify-content: center;
+  }
+
+  [data-scope='table']:is([data-part='column-header'], [data-part='cell'])[data-align='end'] {
+    text-align: end;
+    justify-content: end;
+  }
+
   /* 列名是列头里唯一可收窄的一格：flex: 1 吃掉余量、把排序钮 / 列宽把手推到行尾，min-inline-size: 0 让它在
      窄列上收得下去并出省略号。列名不能裸写成文本节点：flex 行里的裸文本是匿名 flex item，min-inline-size 取 auto
      （nowrap 文本的 min-content）缩不下去，96px 的列配一串长列名时定尺的把手连同 auto 外边距一起被挤出列头盒、
@@ -402,8 +419,8 @@
   }
 
   /* root 恒报两端（没有冻结列时两端都算贴着）；虚拟滚动的行隔着视口，按后代认 */
-  [data-scope='table'][data-part='root']:not([data-at-min-horizontal]) :is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='start']::after,
-  [data-scope='table'][data-part='root']:not([data-at-max-horizontal]) :is([data-part='column-header'], [data-part='cell'])[data-frozen-edge][data-frozen='end']::after {
+  [data-scope='table'][data-part='root']:not([data-at-min-horizontal]) :is([data-part='column-header'], [data-part='cell']):where([data-scope='table'])[data-frozen-edge][data-frozen='start']::after,
+  [data-scope='table'][data-part='root']:not([data-at-max-horizontal]) :is([data-part='column-header'], [data-part='cell']):where([data-scope='table'])[data-frozen-edge][data-frozen='end']::after {
     opacity: 1;
   }
 

package/css/tags-input.css

@@ -161,7 +161,7 @@
 
   /* 新落下的标签原地弹出，同一批按到达顺序错开；首帧就在的直接呈现（自己或 control 带 data-instant）。
      横排胶囊不用竖向上浮：与来源方向不符，还会探出字段外壳的底边 */
-  [data-scope='tags-input'][data-part='item']:not([data-instant], [data-instant] > *) {
+  [data-scope='tags-input'][data-part='item']:not([data-instant], [data-instant] > :where([data-scope='tags-input'])) {
     animation: xh-pop-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) backwards;
     animation-delay: calc(var(--xh-_stagger-index, 0) * var(--xh-motion-stagger-step));
   }

package/css/time-picker.css

@@ -12,6 +12,7 @@
 
 /* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
 @import '../family/motion.css';
+@import '../family/tag-list.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -176,6 +177,27 @@
     display: none;
   }
 
+  /* 多选的标签行：段位让位，选中的时刻在盒里排成标签，超过 maxTagCount 的折进 +N。
+     行里每一枚都是 tag（data-scope="tag"），样子归 tag.css；行怎么排、标签怎么进出归标签行家族配方。
+     基准取 0：只吃两颗钮剩下的宽度、在自己里面折行；按内容宽算基准的话，盒子会先在钮前面折行，把钮挤到最后一行 */
+  [data-scope='time-picker'][data-part='tag-list'] {
+    --xh-tag-list-gap: var(--xh-time-picker-tag-list-gap, var(--xh-space-1));
+
+    flex: 1 1 0;
+    flex-wrap: wrap;
+  }
+
+  /* 时刻标签是定长文字，截短了就读不出是几点：不收缩，排不下就折到下一行（与标签输入同一种排法），
+     盒随行数长高（字段家族的 multi-tag 布局给），到上限后在盒内滚动 */
+  [data-scope='time-picker'][data-part='tag-list'] > [data-scope='tag'][data-part='root'] {
+    flex: none;
+  }
+
+  [data-scope='time-picker'][data-part='control'][data-xh-field-layout='multi-tag'] {
+    max-block-size: var(--xh-time-picker-control-max-h, var(--xh-viewport-h-sm));
+    overflow-y: auto;
+  }
+
   [data-scope='time-picker'][data-part='segment-group'] > :not([data-scope]) {
     color: var(--xh-time-picker-literal-fg, var(--xh-fg-subtle));
   }
@@ -281,10 +303,11 @@
     --xh-action-fg-rest: var(--xh-time-picker-action-fg-hover, var(--xh-fg-default));
   }
 
-  /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个 */
+  /* 有值时清空钮顶上来，展开钮让位：两颗并排堆着用户分不清点哪个。
+     多选不让位：段位收起后展开钮是唯一的键盘入口（退格摘标签也在它身上），藏了键盘就进不来 */
   [data-scope='time-picker'][data-part='control']:has(
       > [data-scope='time-picker'][data-part='clear-trigger']:not([hidden])
-    )
+    ):not(:has(> [data-scope='time-picker'][data-part='tag-list']:not([hidden])))
     > [data-scope='time-picker'][data-part='trigger'] {
     display: none;
   }
@@ -334,6 +357,40 @@
     animation: xh-overlay-slide-out var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
   }
 
+  /* 「添加」沉到各列的右下角：它是多选时整块面板的出口，不跟列顶对齐 */
+  [data-scope='time-picker'][data-part='content'] > [data-scope='time-picker'][data-part='confirm-trigger'] {
+    flex: none;
+    align-self: flex-end;
+    margin-inline-start: var(--xh-time-picker-confirm-trigger-gap, var(--xh-space-1));
+  }
+
+  /* 「添加」是面板里唯一的主要动作：品牌实心、悬停 / 按下与 0.97 按压、焦点环全由 Action Control 的
+     text solid 档给；槽名统一按部件取 --xh-time-picker-confirm-trigger-*，只映射到家族桥接槽 */
+  [data-scope='time-picker'][data-part='confirm-trigger'] {
+    --xh-action-visual-size: var(--xh-time-picker-confirm-trigger-h, var(--xh-_action-profile-visual-size));
+    --xh-action-padding-inline: var(--xh-time-picker-confirm-trigger-px, var(--xh-_action-profile-padding-inline));
+    --xh-action-radius: var(--xh-time-picker-confirm-trigger-radius, var(--xh-shape-control));
+    --xh-action-bg-rest: var(--xh-time-picker-confirm-trigger-bg, var(--xh-_action-variant-bg-rest));
+    --xh-action-bg-hover: var(--xh-time-picker-confirm-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-time-picker-confirm-trigger-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-rest));
+    --xh-action-fg-hover: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-hover));
+    --xh-action-fg-pressed: var(--xh-time-picker-confirm-trigger-fg, var(--xh-_action-variant-fg-pressed));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-hover: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-shadow-pressed: var(--xh-time-picker-confirm-trigger-shadow, none);
+    --xh-action-font-size: var(--xh-text-secondary-size);
+
+    border-width: 0;
+  }
+
+  /* 单选时连接层给的是 hidden 属性；家族那条 display 会把 UA 规则盖掉 */
+  [data-scope='time-picker'][data-part='confirm-trigger'][hidden] {
+    display: none;
+  }
+
   /* 快捷选项也是一列，与时分秒那几列并排，排在行内起始一侧 */
   [data-scope='time-picker'][data-part='preset-group'] {
     display: flex;

package/css/tool-call.css

@@ -41,7 +41,7 @@
   }
 
   /* 卡片出现时滑入；落在首帧就在的列表条目里（历史消息）时直接呈现，不跟着整屏一起入场 */
-  [data-scope='tool-call'][data-part='root']:not([data-scope][data-part='item'][data-instant] *) {
+  [data-scope='tool-call'][data-part='root']:not([data-scope][data-part='item'][data-instant] :where([data-scope='tool-call'])) {
     animation: xh-item-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
   }
 
@@ -174,7 +174,7 @@
   }
 
   /* 有摘要时把剩余宽度让给它：工具名只要放得下自己，摘要才是这一行里最想读到的东西 */
-  [data-scope='tool-call'][data-part='trigger']:has([data-part='summary']) [data-part='label'] {
+  [data-scope='tool-call'][data-part='trigger']:has([data-part='summary']) [data-part='label']:where([data-scope='tool-call']) {
     flex: 0 1 auto;
   }
 
@@ -241,7 +241,7 @@
   /* 在跑的时候状态文字自己扫一道光：data-loading 此前在皮肤里没有任何表达，
      参数在传与参数齐了两档在屏幕上一模一样。
      渐变画在背景上再裁进字形，前景与 WebKit 的字形填充色都要透明才透得出底下那道光 */
-  [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+  [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status']:where([data-scope='tool-call']) {
     background-image: linear-gradient(
       90deg,
       var(--xh-tool-call-status-shimmer-base, var(--xh-fg-subtle)) 35%,
@@ -259,7 +259,7 @@
   /* 减少动效：整道光撤掉换回平色，"在跑"仍由状态文字本身表达——只停动画的话，
      字形里会留着一段冻住的渐变。两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status']:where([data-scope='tool-call']) {
       background-image: none;
       color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
       -webkit-text-fill-color: currentColor;
@@ -267,7 +267,7 @@
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+  :where([data-motion='reduce']) [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status']:where([data-scope='tool-call']) {
     background-image: none;
     color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
     -webkit-text-fill-color: currentColor;
@@ -404,7 +404,7 @@
        取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
        :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
        并成一条之后这层配对关系在文本上就断了。 */
-    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status']:where([data-scope='tool-call']) {
       background-image: none;
       color: var(--xh-tool-call-status-fg, var(--xh-fg-muted));
       -webkit-text-fill-color: currentColor;
@@ -417,7 +417,7 @@
    * 把两处填充都还回去，在跑这件事仍由状态文字本身表出。
    */
   @media (forced-colors: active) {
-    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status'] {
+    [data-scope='tool-call'][data-part='root'][data-loading] [data-part='status']:where([data-scope='tool-call']) {
       background-image: none;
       -webkit-background-clip: border-box;
       background-clip: border-box;

package/css/tooltip.css

@@ -181,7 +181,7 @@
   }
 
   /* 高对比仍保持反白语义：compact 配方已把 tint / blur / shadow 换成实体档，此处只加强同色边界。 */
-  :is([data-contrast='more'] *, [data-contrast='more'])[data-scope='tooltip'][data-part='content'] {
+  :is([data-contrast='more'] :where([data-scope='tooltip']), [data-contrast='more'])[data-scope='tooltip'][data-part='content'] {
     --xh-_tooltip-border: var(--xh-_tooltip-on);
   }
 

package/css/tree-select.css

@@ -227,14 +227,14 @@
 
   /* 标签行露面时 value-text 让位：两者是触发器里的同一格，占位文字与标签不同屏。
      value-text 留在 DOM 里，trigger 的可及名仍从它取到完整的选中项文本 */
-  [data-scope='tree-select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text'] {
+  [data-scope='tree-select'][data-part='trigger']:has([data-part='tag-list']:not([hidden])) [data-part='value-text']:where([data-scope='tree-select']) {
     display: none;
   }
 
   /* 有值时清空钮顶上来，箭头让位：两个图标并排堆着，用户分不清点哪个。
      判据查的是盒里此刻真有一颗没收起的清空钮，不是「有没有值」——
      作者没摆清空钮时箭头照常留着，不然让了位没人接，指示符整个消失 */
-  [data-scope='tree-select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator'] {
+  [data-scope='tree-select'][data-part='control']:has([data-part='clear-trigger']:not([hidden])) [data-part='indicator']:where([data-scope='tree-select']) {
     display: none;
   }