@xihan-ui/styles 3.1.0 → 4.0.0

package/css/popconfirm.css

@@ -115,15 +115,19 @@
 
     /* 作者塞进面板里的图标按控件档取；两颗动作钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popconfirm-icon-size, var(--xh-glyph-size-md));
-    /* 尺寸档只换这两个私有槽 */
-    --xh-_popconfirm-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽：横向内衬比纵向高一档（缺省纵 12 横 16），与 popover 同一套 */
+    --xh-_popconfirm-py: var(--xh-surface-pad-md);
+    --xh-_popconfirm-px: var(--xh-surface-pad-lg);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: grid;
     grid-template-columns: 1fr auto auto;
     align-items: center;
-    gap: var(--xh-popconfirm-gap, var(--xh-space-2));
+    /* 行距与气泡族同一档：标题与说明之间只留 4px；两颗钮之间的列距另由 column-gap 放宽。
+       column-gap 写在 gap 之后，先回落到 gap 槽再取缺省：作者只写 --xh-popconfirm-gap 时行列一起跟着它走 */
+    gap: var(--xh-popconfirm-gap, var(--xh-space-1));
+    column-gap: var(--xh-popconfirm-column-gap, var(--xh-popconfirm-gap, var(--xh-space-2)));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的两颗钮就点不到了 */
     max-inline-size: min(var(--xh-popconfirm-max-w, var(--xh-_popconfirm-max-w)), var(--xh-_popconfirm-available-w));
@@ -132,8 +136,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-pad));
-    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-pad));
+    padding-block: var(--xh-popconfirm-py, var(--xh-_popconfirm-py));
+    padding-inline: var(--xh-popconfirm-px, var(--xh-_popconfirm-px));
     border-radius: var(--xh-popconfirm-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -145,7 +149,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;
   }
 
@@ -171,32 +175,35 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   [data-scope='popconfirm'][data-part='content'][data-size='sm'] {
-    --xh-_popconfirm-pad: var(--xh-surface-pad-sm);
+    --xh-_popconfirm-py: var(--xh-surface-pad-sm);
+    --xh-_popconfirm-px: var(--xh-surface-pad-md);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='popconfirm'][data-part='content'][data-size='lg'] {
-    --xh-_popconfirm-pad: var(--xh-surface-pad-lg);
+    --xh-_popconfirm-py: var(--xh-surface-pad-lg);
+    --xh-_popconfirm-px: var(--xh-surface-pad-xl);
     --xh-_popconfirm-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   [data-scope='popconfirm'][data-part='title'] {
     margin: 0;
     min-inline-size: 0;
     font-size: var(--xh-popconfirm-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-popconfirm-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-popconfirm-title-font-weight, var(--xh-font-weight-medium));
     line-height: var(--xh-leading-tight);
     overflow-wrap: anywhere;
     color: var(--xh-popconfirm-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是气泡的正文：14px 正文字号 + fg-muted 次级色 */
   [data-scope='popconfirm'][data-part='description'] {
     margin: 0;
     min-inline-size: 0;
-    font-size: var(--xh-popconfirm-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-popconfirm-description-font-size, var(--xh-text-body-size));
     line-height: var(--xh-leading-normal);
     overflow-wrap: anywhere;
     color: var(--xh-popconfirm-description-fg, var(--xh-fg-muted));
@@ -231,14 +238,16 @@
 
     /* 动作钮的文字与 Button 同一字重（家族配方不管字重） */
     font-weight: var(--xh-popconfirm-action-font-weight, var(--xh-text-label-weight));
+    /* 末行与上面的文字隔开：栅格行距只有标题与说明之间那 4px，钮再往下让 12px，文字与钮之间共 16px */
+    margin-block-start: var(--xh-popconfirm-action-mt, var(--xh-space-3));
   }
 
   /* 并排落在最后一行的右侧两格；取消在左、确认在右 */
-  [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/popover.css

@@ -108,15 +108,17 @@
     /* 作者塞进面板里的图标按控件档取；关闭钮另由家族配方按 sm 档下发字形尺 */
     --xh-icon-size: var(--xh-popover-icon-size, var(--xh-glyph-size-md));
 
-    /* 尺寸档只换这两个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
-       语气不接：面板是内容容器，语气该由里面的内容表达 */
-    --xh-_popover-pad: var(--xh-surface-pad-md);
+    /* 尺寸档只换这三个私有槽。popover 没有 root 部件，size 落在浮层树最外层的 content 上。
+       横向内衬比纵向高一档（缺省纵 12 横 16）。语气不接：面板是内容容器，语气该由里面的内容表达 */
+    --xh-_popover-py: var(--xh-surface-pad-md);
+    --xh-_popover-px: var(--xh-surface-pad-lg);
     --xh-_popover-max-w: var(--xh-overlay-max-w);
 
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--xh-popover-gap, var(--xh-space-2));
+    /* 标题与正文贴着排：两行之间只留 4px */
+    gap: var(--xh-popover-gap, var(--xh-space-1));
     inline-size: max-content;
     /* 静态档与落位后的可用宽度取小：窄视口下面板伸出去，最右侧的内容就点不到了 */
     max-inline-size: min(var(--xh-popover-max-w, var(--xh-_popover-max-w)), var(--xh-_popover-available-w));
@@ -125,8 +127,8 @@
     overflow-y: auto;
     /* 浮在页面之上的 Overlay 滚动面：滚到头不把页面一起带走 */
     overscroll-behavior: contain;
-    padding-block: var(--xh-popover-py, var(--xh-_popover-pad));
-    padding-inline: var(--xh-popover-px, var(--xh-_popover-pad));
+    padding-block: var(--xh-popover-py, var(--xh-_popover-py));
+    padding-inline: var(--xh-popover-px, var(--xh-_popover-px));
     border-radius: var(--xh-popover-radius, var(--xh-shape-overlay));
     pointer-events: auto;
     /* 进退场的缩放锚在贴着锚点的那条边上；两个分量由 positioner 按 placement 写进私有槽 */
@@ -155,28 +157,32 @@
   }
 
   /* —— 尺寸 —— */
-  /* 缺省档写在 content 的基础规则里；四边等宽的面板内衬三档取 surface-pad 那把尺 */
+  /* 缺省档写在 content 的基础规则里；内衬三档取 surface-pad 那把尺，横向始终比纵向高一档 */
   [data-scope='popover'][data-part='content'][data-size='sm'] {
-    --xh-_popover-pad: var(--xh-surface-pad-sm);
+    --xh-_popover-py: var(--xh-surface-pad-sm);
+    --xh-_popover-px: var(--xh-surface-pad-md);
     --xh-_popover-max-w: var(--xh-overlay-max-w-sm);
   }
 
   [data-scope='popover'][data-part='content'][data-size='lg'] {
-    --xh-_popover-pad: var(--xh-surface-pad-lg);
+    --xh-_popover-py: var(--xh-surface-pad-lg);
+    --xh-_popover-px: var(--xh-surface-pad-xl);
     --xh-_popover-max-w: var(--xh-overlay-max-w-lg);
   }
 
+  /* 气泡标题：14px / medium / 正文色 */
   [data-scope='popover'][data-part='title'] {
     margin: 0;
     font-size: var(--xh-popover-title-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-semibold));
+    font-weight: var(--xh-popover-title-font-weight, var(--xh-font-weight-medium));
     color: var(--xh-popover-title-fg, var(--xh-material-frosted-fg));
   }
 
-  /* 说明文字走说明档：13px + fg-muted */
+  /* 说明就是气泡的正文：14px 正文字号 + fg-muted 次级色 */
   [data-scope='popover'][data-part='description'] {
     margin: 0;
-    font-size: var(--xh-popover-description-font-size, var(--xh-text-secondary-size));
+    font-size: var(--xh-popover-description-font-size, var(--xh-text-body-size));
+    line-height: var(--xh-leading-normal);
     color: var(--xh-popover-description-fg, var(--xh-fg-muted));
   }
 

package/css/progress.css

@@ -38,10 +38,10 @@
     --xh-progress-skin: 1;
   }
 
-  /* 私有槽位：组件令牌 → 中档字面量两级回退。厚度写在 root 上而不是 track 上，
-     尺寸档才改得动一处就够，track 靠继承拿到值。 */
+  /* 私有槽位：组件令牌 → 中档两级回退。厚度写在 root 上而不是 track 上，
+     尺寸档才改得动一处就够，track 靠继承拿到值。线形是一条细轨，按轨道厚度三档取 sm / md / lg = 3 / 4 / 8px */
   [data-scope='progress'][data-part='root'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-md));
 
     /* 目标刻度与环形的刻度值按根落位 */
     position: relative;
@@ -58,7 +58,8 @@
     inline-size: 100%;
     block-size: var(--xh-_progress-thickness);
     border-radius: var(--xh-progress-track-radius, var(--xh-shape-pill));
-    background: var(--xh-progress-track, var(--xh-bg-subtle-active));
+    /* 底槽取淡底阶梯的 200 档（--xh-bg-subtle-hover），环形的底槽同一支 */
+    background: var(--xh-progress-track, var(--xh-bg-subtle-hover));
   }
 
   /* 语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
@@ -136,11 +137,11 @@
   /* —— 尺寸 —— */
   /* 线形只有厚度分档；中间档不写规则，缺省即中档 */
   [data-scope='progress'][data-part='root'][data-size='sm'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-1));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-sm));
   }
 
   [data-scope='progress'][data-part='root'][data-size='lg'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-thickness-lg));
   }
 
   /* —— 环形 —— */
@@ -176,10 +177,10 @@
     block-size: 100%;
   }
 
-  /* 环心文字：占位不撑格子，长内容自己换行由作者定 */
+  /* 环心文字：12px 次级色，占位不撑格子，长内容自己换行由作者定 */
   [data-scope='progress'][data-part='label'] {
-    color: var(--xh-progress-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-progress-label-font-size, var(--xh-text-body-size));
+    color: var(--xh-progress-label-fg, var(--xh-fg-muted));
+    font-size: var(--xh-progress-label-font-size, var(--xh-text-caption-size));
     line-height: var(--xh-leading-none);
     text-align: center;
   }
@@ -188,7 +189,7 @@
      底槽不跟着语气换族：只有已完成的那段换色，才读得出"完成了多少" */
   [data-scope='progress'][data-part='track'][data-variant='circle'],
   [data-scope='progress'][data-part='track'][data-variant='dashboard'] {
-    stroke: var(--xh-progress-track, var(--xh-bg-subtle-active));
+    stroke: var(--xh-progress-track, var(--xh-bg-subtle-hover));
   }
 
   [data-scope='progress'][data-part='range'][data-variant='circle'],
@@ -204,16 +205,16 @@
   /* 子弹图：有分段时轨道加厚一档，填充收窄成中间一条压在色带上，色带在填充两侧照样读得出。
      三档厚度各比普通线形高一档，阶梯次序不变 */
   [data-scope='progress'][data-part='root'][data-variant='line'][data-banded] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-3));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-md));
     --xh-_progress-range-size: 50%;
   }
 
   [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='sm'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-2));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-sm));
   }
 
   [data-scope='progress'][data-part='root'][data-variant='line'][data-banded][data-size='lg'] {
-    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-space-4));
+    --xh-_progress-thickness: var(--xh-progress-thickness, var(--xh-track-band-thickness-lg));
   }
 
   /* 色带取本段语气的淡色：同一族颜色里填充是实色、色带浅一档，读得出填充落在哪一段 */

package/css/prompt-input.css

@@ -15,12 +15,12 @@
     --xh-prompt-input-skin: 1;
   }
 
-  /* root 就是视觉盒：描边、底色、圆角、聚焦环、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
-     canvas 底 + --xh-border-control 描边 + 无影，不用 soft，登记的例外只在 8px surface 圆角），内部 textarea
+  /* root 就是视觉盒：描边、底色、圆角、聚焦面、悬停与禁用面由 Field Chrome 家族画在它身上（静息描边式：
+     字段淡底 + --xh-border-control 描边 + 无影，聚焦换承载面底 + 品牌描边、不画环；登记的例外只在 surface 圆角），内部 textarea
      无边框；align-items: flex-end 让按钮随输入框长高贴着底边。
      三个视觉轴都落在 root 上：形态三档由家族按 data-variant 生成，语气管用哪族颜色，尺寸管高度与字号 */
   [data-scope='prompt-input'][data-part='root'] {
-    /* 圆角可由使用者槽切换，家族只过渡底、描边、影与环 */
+    /* 圆角可由使用者槽切换，家族只过渡底、描边与影 */
     transition: border-radius var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
     /* 尺寸缺省档：不写 data-size 时按中档走 */
     --xh-_prompt-input-h: var(--xh-control-h-md);

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);
   }
 
@@ -243,7 +243,7 @@
     flex: none;
     align-items: center;
     justify-content: center;
-    border: var(--xh-stroke-thin) solid var(--xh-question-flow-indicator-border, var(--xh-border-control));
+    border: var(--xh-stroke-thin) solid var(--xh-question-flow-indicator-border, var(--xh-border-strong));
     border-radius: var(--xh-question-flow-indicator-radius, var(--xh-shape-inset));
     background: var(--xh-question-flow-indicator-bg, transparent);
     color: var(--xh-question-flow-indicator-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
@@ -335,7 +335,7 @@
     display: none;
   }
 
-  /* 自由文本：与选项同等算数的一条答案，占满整行 */
+  /* 自由文本：与选项同等算数的一条答案，占满整行。框照字段外壳：字段淡底 + 控件描边，悬停描边升一档 */
   [data-scope='question-flow'][data-part='note'] {
     display: block;
     inline-size: 100%;
@@ -343,11 +343,13 @@
     padding-block: var(--xh-question-flow-note-py, var(--xh-space-1_5));
     border: var(--xh-stroke-thin) solid var(--xh-question-flow-note-border, var(--xh-border-control));
     border-radius: var(--xh-question-flow-note-radius, var(--xh-shape-control));
-    background: var(--xh-question-flow-note-bg, var(--xh-bg-surface));
+    background: var(--xh-question-flow-note-bg, var(--xh-bg-field));
     color: var(--xh-question-flow-note-fg, var(--xh-fg-default));
     font-family: inherit;
     font-size: var(--xh-question-flow-note-font-size, var(--xh-_question-flow-font-size));
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    transition:
+      background-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='question-flow'][data-part='note'][hidden] {
@@ -358,7 +360,23 @@
     color: var(--xh-question-flow-placeholder-fg, var(--xh-fg-subtle));
   }
 
+  [data-scope='question-flow'][data-part='note']:hover:not(:disabled, :focus, [data-invalid]) {
+    border-color: var(--xh-question-flow-note-border-hover, var(--xh-border-strong));
+  }
+
+  /* 聚焦换承载面底 + 品牌描边，不画环：焦点由描边换色与底色差标出，强制色档补一圈 Highlight 环 */
+  [data-scope='question-flow'][data-part='note']:focus-within {
+    border-color: var(--xh-question-flow-note-border-focus, var(--xh-border-control-focus));
+    background: var(--xh-question-flow-note-bg-focus, var(--xh-bg-surface));
+  }
+
+  [data-scope='question-flow'][data-part='note']:focus-visible {
+    outline: none;
+  }
+
   [data-scope='question-flow'][data-part='note']:disabled {
+    border-color: var(--xh-question-flow-note-border-disabled, var(--xh-border-default));
+    background: var(--xh-question-flow-note-bg-disabled, var(--xh-bg-subtle));
     color: var(--xh-fg-disabled);
   }
 
@@ -486,16 +504,18 @@
     --xh-action-ring-color-focus-visible: currentColor;
   }
 
-  /* 交卷之后才露出的那一格 */
+  /* 交卷之后才露出的那一格：与 Tag 的 sm 档同一副方签——control 圆角、块尺寸取 chip 档、竖向内衬为 0 */
   [data-scope='question-flow'][data-part='result'] {
     display: inline-flex;
     align-self: flex-start;
     align-items: center;
+    box-sizing: border-box;
     gap: var(--xh-question-flow-result-gap, var(--xh-space-1));
+    min-block-size: var(--xh-question-flow-result-h, var(--xh-chip-h-sm));
     padding-inline: var(--xh-question-flow-result-px, var(--xh-space-1_5));
-    padding-block: var(--xh-question-flow-result-py, var(--xh-space-0_5));
+    padding-block: var(--xh-question-flow-result-py, 0);
     border: var(--xh-stroke-thin) solid transparent;
-    border-radius: var(--xh-question-flow-result-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-question-flow-result-radius, var(--xh-shape-control));
     background: var(--xh-question-flow-result-bg, var(--xh-_tone-subtle));
     color: var(--xh-question-flow-result-fg, var(--xh-_tone-fg));
     font-size: var(--xh-question-flow-result-font-size, var(--xh-text-caption-size));
@@ -504,7 +524,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);
   }
 
@@ -536,6 +556,12 @@
       background-color: CanvasText;
     }
 
+    /* 备注框聚焦不画环、描边又被换成系统色，补一圈 Highlight 环 */
+    [data-scope='question-flow'][data-part='note']:focus {
+      outline: var(--xh-ring-width) solid Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
     [data-scope='question-flow']:is([data-part='prev-trigger'], [data-part='next-trigger']):empty::before {
       forced-color-adjust: none;
       background-color: ButtonText;

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);
     }
   }