@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/rating.css

@@ -0,0 +1,294 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 rating 样式。 */
+
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-rating {
+    --xh-rating-skin: 1;
+  }
+
+  /* position 是给表单影子做定位基准的：那份输入被连接层内联写成绝对定位，
+     根上不留基准它就会贴到更外层的定位祖先上，原生校验提示跟着飘到页面别处。 */
+  .xh-scope-rating[data-part='root'] {
+    /* 尺寸档只换这三个私有槽，星星与分值都从 root 继承它们，换档不必给每个部件各写一条选择器。
+       星是控件内的字形，按档取 --xh-glyph-size-sm / md / lg；标签字号不随档 */
+    --xh-_rating-item-gap: var(--xh-control-gap-md);
+    --xh-_rating-item-size: var(--xh-glyph-size-md);
+    --xh-_rating-item-box-size: var(--xh-control-action-size);
+    --xh-_rating-font-size: var(--xh-control-font-md);
+    --xh-icon-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
+    /* 点亮色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的警示色 */
+    --xh-_rating-accent: var(--xh-_tone, var(--xh-color-warning-500));
+
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    /* 字段标签贴控件（复合单字段） */
+    gap: var(--xh-rating-gap, var(--xh-space-1));
+  }
+
+  /* —— 尺寸 —— */
+  .xh-scope-rating[data-part='root'][data-size='sm'] {
+    --xh-_rating-item-gap: var(--xh-control-gap-sm);
+    --xh-_rating-item-size: var(--xh-glyph-size-sm);
+    --xh-_rating-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-rating[data-part='root'][data-size='lg'] {
+    --xh-_rating-item-gap: var(--xh-control-gap-lg);
+    --xh-_rating-item-size: var(--xh-glyph-size-lg);
+    --xh-_rating-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle；文字部件不叠 opacity */
+  .xh-scope-rating[data-part='label'] {
+    color: var(--xh-rating-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-rating-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-rating-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  .xh-scope-rating[data-part='label'][data-disabled] {
+    color: var(--xh-rating-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  .xh-scope-rating[data-part='control'] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--xh-rating-item-gap, var(--xh-_rating-item-gap));
+  }
+
+  /* 禁用：星带是纯图形，整体压暗只做一次、落在星带上（星星逐颗再叠 opacity 会越叠越黑）；
+     标签与分值是文字，各自换到禁用前景，不落在这层 opacity 之下 */
+  .xh-scope-rating[data-part='control'][data-disabled] {
+    opacity: var(--xh-state-disabled-opacity);
+  }
+
+  /* 分值文本在场时根改成两列栅格：星星带与分值并排，标题仍独占一整行。
+     没写这个部件的评分不命中这条，还是原来的竖排 */
+  .xh-scope-rating[data-part='root']:has(> [data-part='value-text']) {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    align-items: center;
+    justify-content: start;
+  }
+
+  .xh-scope-rating[data-part='root']:has(> [data-part='value-text']) > [data-part='label']:where(.xh-scope-rating) {
+    grid-column: 1 / -1;
+  }
+
+  /* 数字等宽：指针从一颗星划到另一颗时分值在原地变，不带着星星左右挪 */
+  .xh-scope-rating[data-part='value-text'] {
+    color: var(--xh-rating-value-text-fg, var(--xh-fg-muted));
+    font-size: var(--xh-rating-value-text-font-size, var(--xh-_rating-font-size));
+    font-variant-numeric: tabular-nums;
+    line-height: var(--xh-leading-none);
+  }
+
+  .xh-scope-rating[data-part='value-text'][data-disabled] {
+    color: var(--xh-rating-value-text-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 容器只是焦点域的兜底落点（焦点从带外进来先落在它身上，随即被转投给某颗星），
+     落焦不画环：高亮永远长在星星上，容器再画一圈只是重影。 */
+  .xh-scope-rating[data-part='control']:focus-visible {
+    outline: none;
+  }
+
+  .xh-scope-rating[data-part='control'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 条目固定成一枚方形图标盒：连接层用 clientWidth 判定指针落在左半还是右半，
+     固定盒能让半档分界与图形中心严格重合。
+     星接 Action Control icon 档（定尺的星）：盒型、按下 / 禁用面、0.97 缩放与换底、焦点环与过渡由家族配方给，
+     这里只把使用者槽映射到桥接槽。静息透明（ghost 形态）；悬停不换底——悬停预览由点亮的星形（data-highlighted）
+     表达，再给盒换面是重复的通道；按下换到 200 档中性面（白底承载）。前景五态映射同一个值：点亮时五态一起换到
+     点亮色，家族的悬停 / 按下块才不会把点亮色换回静息色；禁用不换前景，星带整体的压暗落在 control 的 opacity 上 */
+  .xh-scope-rating[data-part='item'] {
+    --xh-_rating-item-bg-pressed: var(--xh-rating-item-bg-pressed, var(--xh-bg-subtle-hover));
+
+    --xh-action-visual-size: var(--xh-_rating-item-box-size);
+    --xh-action-min-inline-size: var(--xh-_rating-item-box-size);
+    --xh-action-radius: var(--xh-rating-item-radius, var(--xh-shape-control));
+    --xh-action-font-size: var(--xh-rating-item-font-size, var(--xh-_rating-item-size));
+    --xh-action-bg-hover: transparent;
+    --xh-action-bg-pressed: var(--xh-_rating-item-bg-pressed);
+    --xh-action-fg-rest: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-fg-hover: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-fg-pressed: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-fg-focus-visible: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-fg-disabled: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    --xh-action-border-rest: transparent;
+    --xh-action-border-hover: transparent;
+    --xh-action-border-pressed: transparent;
+    --xh-action-border-focus-visible: transparent;
+    --xh-action-border-disabled: transparent;
+  }
+
+  /* 家族 icon 档在粗指针下用 ::after 扩热区到 44px：五颗星密排，44px 热区会压住相邻的星，
+     连接层又按 currentTarget 的宽度判半颗，热区串到邻星上半档就判错；星本身仍是 24px 盒，热区不外扩。
+     空条目的 ::after 是点亮那层星形，下限归零才不会被撑成 44px */
+  @media (pointer: coarse) {
+    .xh-scope-rating[data-part='item']::after {
+      min-inline-size: 0;
+      min-block-size: 0;
+    }
+  }
+
+  /* 空条目使用两层同源星形：底层保持中性轮廓，上层按完整或半档裁出强调色。
+     两层都铺满格子、四边外边距 auto 回中：定宽定高的定位盒在四边 inset 为 0 时由自动外边距平分余量，
+     与书写方向无关，不用物理平移回拉（粗指针下家族在同一个 ::after 上铺的热区平移一并钉回）。
+     裁切只认物理左右：行首那一侧留着、从行尾那一侧裁，--xh-_rating-end / -start 是行尾 / 行首
+     落在物理右侧的份数（ltr 为 1 / 0，rtl 为 0 / 1），整幅与半档都乘它换边 */
+  .xh-scope-rating[data-part='item']:empty::before,
+  .xh-scope-rating[data-part='item']:empty::after {
+    --xh-_rating-end: calc((1 + var(--xh-direction-sign)) / 2);
+    --xh-_rating-start: calc((1 - var(--xh-direction-sign)) / 2);
+
+    content: '';
+    position: absolute;
+    inset: 0;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-text));
+    margin: auto;
+    translate: none;
+    background-color: var(--xh-rating-item-fg, var(--xh-fg-subtle));
+    -webkit-mask: var(--xh-glyph-mark-star) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-star) center / contain no-repeat;
+    pointer-events: none;
+  }
+
+  .xh-scope-rating[data-part='item']:empty::after {
+    background-color: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    clip-path: inset(0 calc(100% * var(--xh-_rating-end)) 0 calc(100% * var(--xh-_rating-start)));
+    transition: clip-path var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
+  }
+
+  /* 点亮的判据是 data-highlighted，不是 aria-checked：
+     aria-checked 只认落定的值，而悬停预览要求手划过去当场就亮。
+     两者共用同一档颜色，预览与选中因此看不出差别——这正是"预览"该有的样子。 */
+  .xh-scope-rating[data-part='item'][data-highlighted] {
+    --xh-action-fg-rest: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-hover: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-pressed: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-focus-visible: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    --xh-action-fg-disabled: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+  }
+
+  .xh-scope-rating[data-part='item'][data-highlighted]:empty::after {
+    clip-path: inset(0);
+  }
+
+  /* 半颗：一道 50% 硬边渐变裁到字形上，行首那半亮、行尾那半灰。
+     rtl 下"半颗"落在星的右半边（连接层按 1 - offsetX/width 判），亮的那半跟着掉头：渐变方向没有逻辑
+     关键字可用，角度乘书写方向的符号换向（90deg 朝右、-90deg 朝左）。
+     必须排在 data-highlighted 之后：半颗那颗星同时带着 data-highlighted，两条选择器特异度相同，
+     顺序一反 color 就把 transparent 覆盖回实色，渐变整个看不见。 */
+  .xh-scope-rating[data-part='item'][data-half]:not(:empty) {
+    background-image: linear-gradient(
+      calc(90deg * var(--xh-direction-sign)),
+      var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent)) 50%,
+      var(--xh-rating-item-fg, var(--xh-fg-subtle)) 50%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .xh-scope-rating[data-part='item'][data-half]:empty::after {
+    clip-path: inset(0 calc(50% * var(--xh-_rating-end)) 0 calc(50% * var(--xh-_rating-start)));
+  }
+
+  /* 只读仍进得了 Tab 序列、读屏也念得出，只是改不动：收掉手型，别暗示"点这儿能改"；
+     家族的按压块由这里的映射钉回静息面——按下不缩放、不换底 */
+  .xh-scope-rating[data-part='item'][data-readonly]:not([data-disabled]) {
+    --xh-_rating-item-bg-pressed: transparent;
+    --xh-action-scale-pressed: none;
+    --xh-action-cursor-rest: default;
+    --xh-action-cursor-hover: default;
+    --xh-action-cursor-pressed: default;
+    --xh-action-cursor-focus-visible: default;
+  }
+
+  /* 表单影子的视觉隐藏（绝对定位 + 1px + clip-path）连接层内联给全了，这里不重复也不覆盖，
+     只掐掉指针命中：那个 1px 的框压在星带上会截走本该落到星星上的点击。 */
+  .xh-scope-rating[data-part='hidden-input'] {
+    pointer-events: none;
+  }
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
+  .xh-scope-rating[data-part='root'][hidden],
+  .xh-scope-rating[data-part='control'][hidden],
+  .xh-scope-rating[data-part='item'][hidden] {
+    display: none;
+  }
+
+  /*
+   * 高对比档：点亮与没点亮只差一档字色，这一档里两档一起被换成同一个系统前景色，
+   * 整条星带看上去全是亮的。改用系统自己的两个角色分开：亮的取高亮色、没亮的取不可用色。
+   * 半颗那道裁到字形上的渐变在这一档里被丢弃，留着透明填充整颗星会消失，
+   * 把填充还回去并按点亮那一档画。
+   */
+  @media (forced-colors: active) {
+    .xh-scope-rating[data-part='item'] {
+      color: GrayText;
+    }
+
+    /* 两层星形都是 mask 挖出来的底色：退出强制换色、直接写系统色，空星 GrayText、点亮的那层 Highlight */
+    .xh-scope-rating[data-part='item']:empty::before {
+      forced-color-adjust: none;
+      background-color: GrayText;
+    }
+
+    .xh-scope-rating[data-part='item']:empty::after {
+      forced-color-adjust: none;
+      background-color: Highlight;
+    }
+
+    .xh-scope-rating[data-part='item'][data-highlighted],
+    .xh-scope-rating[data-part='item'][data-half]:not(:empty) {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: Highlight;
+      /* 亮档已经由字色表出，公共层那圈锚点虚线在这里只是重影 */
+      outline: none;
+    }
+
+    /* 家族在这一档把悬停 / 按下的盒填成 Highlight、字换 HighlightText：点亮的那层星形也是 Highlight，
+       填了盒就把它吞掉。盒保持 Canvas 底，字色仍按点亮与否取 GrayText / Highlight；
+       按住那一下给盒画一圈系统高亮环表出按下 */
+    .xh-scope-rating[data-part='item']:not([data-disabled]):not([data-loading]):hover,
+    .xh-scope-rating[data-part='item']:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+      background-color: Canvas;
+      color: GrayText;
+    }
+
+    .xh-scope-rating[data-part='item'][data-highlighted]:not([data-disabled]):not([data-loading]):hover,
+    .xh-scope-rating[data-part='item'][data-highlighted]:not([data-disabled]):not([data-loading]):is(:active, [data-pressed]) {
+      color: Highlight;
+    }
+
+    .xh-scope-rating[data-part='item']:not([data-disabled]):not([data-readonly]):is(:active, [data-pressed]) {
+      outline: var(--xh-stroke-thick) solid Highlight;
+      outline-offset: calc(-1 * var(--xh-stroke-thick));
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底图：半颗那道裁到字形上的渐变整个消失，星上只剩 color: transparent，
+       那颗星在纸上什么都不剩。把填充还回去并按点亮那一档画整颗。 */
+    .xh-scope-rating[data-part='item'][data-half]:not(:empty) {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: var(--xh-rating-item-fg-highlighted, var(--xh-_rating-accent));
+    }
+  }
+}

package/dist/css/reasoning.css

@@ -0,0 +1,343 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 reasoning 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立；
+   独立皮肤同时传递引入开关的动作控件配方，full bundle 递归去重。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-reasoning {
+    --xh-reasoning-skin: 1;
+  }
+
+  /* 一张描边面：--xh-border-default 描边 + surface 底 + 无影（静态内容面），与同族的 ToolCall 等一致。
+     白底承载开关：向它下发 hover 100 → pressed 200 的阶梯，淡底档在形态规则里改成 200 → 300 */
+  .xh-scope-reasoning[data-part='root'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
+
+    /* 作者塞进两个图形位的图标与皮肤画的兜底字形同一把尺：按档取，与开关的家族档同步 */
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-md);
+    --xh-icon-size: var(--xh-reasoning-icon-size, var(--xh-_reasoning-icon-size));
+
+    /* 影另落一份进私有槽给语气档：它要把影与左侧色条叠成一条 box-shadow，缺省无影写成零影占位 */
+    --xh-_reasoning-shadow: var(--xh-reasoning-shadow, 0 0 0 transparent);
+
+    /* 尺寸缺省档：不写 data-size 时的取值。三档都只写这三个私有槽，
+       公开槽留在读处当首选，作者在祖先上设的覆盖才赢得过档位声明 */
+    --xh-_reasoning-px: var(--xh-space-4);
+    --xh-_reasoning-py: var(--xh-space-4);
+    --xh-_reasoning-font-size: var(--xh-control-font-md);
+
+    display: block;
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid var(--xh-reasoning-border, var(--xh-border-default));
+    border-radius: var(--xh-reasoning-radius, var(--xh-shape-surface));
+    background: var(--xh-reasoning-bg, var(--xh-bg-surface));
+    box-shadow: var(--xh-reasoning-shadow, none);
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  .xh-scope-reasoning[data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 形态 —— */
+  /* 缺省档即 outline；显式写 outline 时与缺省同形 */
+  .xh-scope-reasoning[data-part='root'][data-variant='outline'] {
+    border: var(--xh-stroke-thin) solid var(--xh-reasoning-border, var(--xh-border-default));
+    background: var(--xh-reasoning-bg, var(--xh-bg-surface));
+  }
+
+  /* 底色分区：--xh-bg-subtle 底 + 透明边位 + 无影；淡底承载面向开关下发 hover 200 → pressed 300 */
+  .xh-scope-reasoning[data-part='root'][data-variant='subtle'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    border-color: transparent;
+    background: var(--xh-reasoning-bg, var(--xh-bg-subtle));
+  }
+
+  /* 无壳内联：思考过程贴着正文走，不占一块面；开关落在正文的白底上，阶梯同 outline 档 */
+  .xh-scope-reasoning[data-part='root'][data-variant='ghost'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
+
+    overflow: visible;
+    background: none;
+    box-shadow: none;
+  }
+
+  /* 无壳档的开关只占文字宽度（盖掉 profile 的铺满一行），自己带圆角，悬停时才浮出一块底 */
+  .xh-scope-reasoning[data-part='root'][data-variant='ghost'] .xh-scope-reasoning[data-part='trigger'] {
+    --xh-action-radius: var(--xh-reasoning-trigger-radius, var(--xh-shape-control));
+
+    inline-size: auto;
+  }
+
+  /* 开关铺满一行，盒型、悬停 / 按下 / 禁用面由 Action Control 的 disclosure-trigger 档给（ghost 形态，
+     阶梯由根按承载面经 host 槽下发，按下只换面不缩放）；这里只把使用者槽映射到桥接槽：
+     圆角归零贴住面边，内衬与字号沿用本组件的档位（不取 profile 的内衬，几何不变），字色三态都停在
+     弱一档的 muted（开关不是正文）；字形尺由根按同一档位给 */
+  .xh-scope-reasoning[data-part='trigger'] {
+    --xh-action-radius: 0;
+    --xh-action-gap: var(--xh-reasoning-trigger-gap, var(--xh-space-2));
+    --xh-action-padding-inline: var(--xh-reasoning-px, var(--xh-_reasoning-px));
+    --xh-action-padding-block: var(--xh-reasoning-py, var(--xh-_reasoning-py));
+    --xh-action-font-size: var(--xh-reasoning-font-size, var(--xh-_reasoning-font-size));
+    --xh-action-fg-rest: var(--xh-reasoning-trigger-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-reasoning-trigger-fg, var(--xh-fg-muted));
+    --xh-action-fg-pressed: var(--xh-reasoning-trigger-fg, var(--xh-fg-muted));
+    --xh-action-bg-hover: var(--xh-reasoning-trigger-bg-hover, var(--xh-_action-variant-bg-hover));
+
+    border-width: 0;
+  }
+
+  .xh-scope-reasoning[data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 状态图形位：在想的时候实一档，想完退回弱一档 */
+  .xh-scope-reasoning[data-part='icon'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--xh-reasoning-icon-fg, var(--xh-fg-subtle));
+    transition: color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  .xh-scope-reasoning[data-part='icon'][data-streaming] {
+    color: var(--xh-reasoning-icon-streaming-fg, var(--xh-fg-muted));
+  }
+
+  .xh-scope-reasoning[data-part='icon'][hidden] {
+    display: none;
+  }
+
+  /* 指示随开合转向，纯装饰。转向与正文开合取同一档时长，两件事一起收尾：收起取 collapse 档，展开取 expand 档 */
+  .xh-scope-reasoning[data-part='indicator'] {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--xh-reasoning-indicator-fg, var(--xh-fg-subtle));
+  }
+
+  /* 首帧就在的朝向直接呈现（data-instant），第一次开合起才转 */
+  .xh-scope-reasoning[data-part='indicator']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-collapse) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  .xh-scope-reasoning[data-part='indicator']:empty::before {
+    content: '';
+    display: inline-block;
+    inline-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    block-size: var(--xh-icon-size, var(--xh-glyph-size-md));
+    vertical-align: var(--xh-glyph-baseline-shift);
+    background-color: currentColor;
+    -webkit-mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+    mask: var(--xh-glyph-mark-chevron-down) center / contain no-repeat;
+  }
+
+  .xh-scope-reasoning[data-part='indicator'][data-state='open'] {
+    rotate: 180deg;
+  }
+
+  .xh-scope-reasoning[data-part='indicator'][data-state='open']:not([data-instant]) {
+    transition: rotate var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-reasoning[data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 状态文案排成一行，长了截断：换行会把开关的高度顶开，时长位跟着跳 */
+  .xh-scope-reasoning[data-part='label'] {
+    display: block;
+    flex: 1 1 auto;
+    overflow: hidden;
+    font-weight: var(--xh-reasoning-label-font-weight, var(--xh-text-label-weight));
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  .xh-scope-reasoning[data-part='label'][hidden] {
+    display: none;
+  }
+
+  /* 还在想：一道亮带在文字上从右往左扫，字色由这层渐变裁出来 */
+  .xh-scope-reasoning[data-part='label'][data-streaming] {
+    background-image: linear-gradient(
+      90deg,
+      var(--xh-reasoning-shimmer-from, var(--xh-fg-subtle)) 35%,
+      var(--xh-reasoning-shimmer-to, var(--xh-fg-default)) 50%,
+      var(--xh-reasoning-shimmer-from, var(--xh-fg-subtle)) 65%
+    );
+    background-size: 200% 100%;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    animation: xh-shimmer var(--xh-reasoning-shimmer-duration, var(--xh-motion-loop-shimmer)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /*
+   * 减少动效：撤掉扫光那层，换成一档更实的静态字色。
+   * 这里不能只把时长压到接近零——光带会停在某一帧上，在文字上留下一道说不清的渐变；
+   * 而撤掉渐变又不还字色的话，被裁成透明的文字会整句消失。
+   * 两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion。
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-reasoning[data-part='label'][data-streaming] {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: var(--xh-reasoning-label-streaming-fg, var(--xh-fg-default));
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-reasoning[data-part='label'][data-streaming] {
+    background-image: none;
+    -webkit-background-clip: border-box;
+    background-clip: border-box;
+    color: var(--xh-reasoning-label-streaming-fg, var(--xh-fg-default));
+    animation: none;
+  }
+
+  .xh-scope-reasoning[data-part='duration'] {
+    display: block;
+    flex: none;
+    color: var(--xh-reasoning-duration-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-reasoning-duration-font-size, var(--xh-text-caption-size));
+    font-variant-numeric: tabular-nums;
+  }
+
+  .xh-scope-reasoning[data-part='duration'][hidden] {
+    display: none;
+  }
+
+  /* 想完那一下两句文案整句换掉，淡入接住这次替换；首帧就已想完的直接呈现（data-instant） */
+  .xh-scope-reasoning[data-part='label']:not([data-streaming], [data-instant]),
+  .xh-scope-reasoning[data-part='duration']:not([data-streaming], [data-instant]) {
+    animation: xh-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /*
+   * 思考正文是散文：段落排版，不用等宽，行距比正文松一档。
+   * 左侧一条轨迹线把这一段与开关分开，起点对齐开关里的图形位。
+   *
+   * 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
+   * 收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点。
+   */
+  .xh-scope-reasoning[data-part='content'] {
+    /* 行高与内缩同帧动的共享关键帧读这条槽：只有末端有内缩，起端不写、按 0 动 */
+    --xh-_disclosure-pb: var(--xh-reasoning-py, var(--xh-_reasoning-py));
+
+    display: grid;
+    grid-template-rows: 1fr;
+    overflow: clip;
+    margin-inline-start: var(--xh-reasoning-rail-inset, var(--xh-reasoning-px, var(--xh-_reasoning-px)));
+    border-inline-start: var(--xh-reasoning-rail-width, var(--xh-stroke-thin)) solid var(--xh-reasoning-rail, var(--xh-border-subtle));
+    padding-inline-start: var(--xh-reasoning-content-ps, var(--xh-space-3));
+    padding-inline-end: var(--xh-reasoning-content-pe, var(--xh-reasoning-px, var(--xh-_reasoning-px)));
+    padding-block-end: var(--xh-reasoning-py, var(--xh-_reasoning-py));
+    color: var(--xh-reasoning-content-fg, var(--xh-fg-muted));
+    font-size: var(--xh-reasoning-content-font-size, var(--xh-text-secondary-size));
+    line-height: var(--xh-reasoning-content-leading, var(--xh-text-prose-leading));
+  }
+
+  /* 展开与收起只在开合时播：首帧就在的展开 / 收起直接呈现（data-instant） */
+  .xh-scope-reasoning[data-part='content'][data-state='open']:not([data-instant]) {
+    animation: xh-disclosure-expand var(--xh-motion-duration-expand) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-reasoning[data-part='content'][data-state='closed']:not([data-instant]) {
+    animation: xh-disclosure-collapse var(--xh-motion-duration-collapse) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 尺寸档改内衬、字号与图标档 */
+  .xh-scope-reasoning[data-part='root'][data-size='sm'] {
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-sm);
+    --xh-_reasoning-px: var(--xh-space-3);
+    --xh-_reasoning-py: var(--xh-space-3);
+    --xh-_reasoning-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-reasoning[data-part='root'][data-size='md'] {
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-md);
+    --xh-_reasoning-px: var(--xh-space-4);
+    --xh-_reasoning-py: var(--xh-space-4);
+    --xh-_reasoning-font-size: var(--xh-control-font-md);
+  }
+
+  .xh-scope-reasoning[data-part='root'][data-size='lg'] {
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-lg);
+    --xh-_reasoning-px: var(--xh-space-5);
+    --xh-_reasoning-py: var(--xh-space-5);
+    --xh-_reasoning-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 语气只染左侧那一条色条，海拔跟着一起落在同一条 box-shadow 上 */
+  .xh-scope-reasoning[data-part='root'][data-tone] {
+    box-shadow:
+      inset var(--xh-reasoning-tone-bar, var(--xh-stroke-thick)) 0 0 0 var(--xh-reasoning-tone-fg, var(--xh-_tone-soft, var(--xh-bg-brand))),
+      var(--xh-_reasoning-shadow);
+  }
+
+  @media (forced-colors: active) {
+    /* 兜底字形是 mask 挖出来的一块底色，这一档里底色被系统换成 Canvas，字形跟着消失。
+       字形退出强制换色、直接写系统色（不能取 currentColor：退出强制换色的伪元素读到的是被系统换掉之前的作者色）：
+       按钮面上取 ButtonText，悬停与按下时家族把按钮涂成 Highlight、字形换 HighlightText；
+       禁用取 GrayText */
+    .xh-scope-reasoning[data-part='indicator']:empty::before {
+      forced-color-adjust: none;
+      background-color: ButtonText;
+    }
+
+    .xh-scope-reasoning[data-part='trigger']:not([data-disabled]):not([data-loading]):is(:hover, :active, [data-pressed]) .xh-scope-reasoning[data-part='indicator']:empty::before {
+      background-color: HighlightText;
+    }
+
+    .xh-scope-reasoning[data-part='trigger'][data-disabled] .xh-scope-reasoning[data-part='indicator']:empty::before {
+      background-color: GrayText;
+    }
+  }
+}
+
+@layer xihan.motion {
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    .xh-scope-reasoning[data-part='label'][data-streaming] {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: var(--xh-reasoning-label-streaming-fg, var(--xh-fg-default));
+      animation: none;
+    }
+  }
+
+  /*
+   * 高对比档：扫光那层渐变被丢弃，只剩被裁成透明的文字，整行标题消失。
+   * 把填充还回去，在想这件事仍由标题文字本身与展开钮的状态表出。
+   */
+  @media (forced-colors: active) {
+    .xh-scope-reasoning[data-part='label'][data-streaming] {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: CanvasText;
+      animation: none;
+    }
+  }
+}