@xihan-ui/styles 1.0.0 → 2.0.0

package/css/reasoning.css

@@ -0,0 +1,336 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='reasoning'] {
+    --xh-reasoning-skin: 1;
+  }
+
+  /* 一张淡底面：--xh-bg-subtle 底 + 透明边位 + 无影（§8 subtle 无影），描边留给 outline 档打开。
+     缺省淡底承载开关：向它下发 hover 200 → pressed 300 的阶梯（§7.2），白底档在形态规则里改回 100 → 200 */
+  [data-scope='reasoning'][data-part='root'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle-hover);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-active);
+
+    /* 作者塞进两个图形位的图标与皮肤画的兜底字形同一把尺：按档取（§6.5），与开关的家族档同步——
+       不写 data-size 时字号是 sm 档，字形随之取 sm */
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-sm);
+    --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-3);
+    --xh-_reasoning-py: var(--xh-space-2);
+    --xh-_reasoning-font-size: var(--xh-control-font-sm);
+
+    display: block;
+    overflow: hidden;
+    border: var(--xh-stroke-thin) solid transparent;
+    border-radius: var(--xh-reasoning-radius, var(--xh-shape-surface));
+    background: var(--xh-reasoning-bg, var(--xh-bg-subtle));
+    box-shadow: var(--xh-reasoning-shadow, none);
+  }
+
+  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
+  [data-scope='reasoning'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* —— 形态 —— */
+  /* 缺省档即 subtle，写在上面那条基础规则里 */
+  /* 描边分区：--xh-border-default 描边 + surface 底（§5.3 静态内容面）；
+     白底承载面把开关的阶梯改回 hover 100 → pressed 200 */
+  [data-scope='reasoning'][data-part='root'][data-variant='outline'] {
+    --xh-action-host-bg-hover: var(--xh-bg-subtle);
+    --xh-action-host-bg-pressed: var(--xh-bg-subtle-hover);
+
+    border: var(--xh-stroke-thin) solid var(--xh-reasoning-border, var(--xh-border-default));
+    background: var(--xh-reasoning-bg, var(--xh-bg-surface));
+  }
+
+  /* 无壳内联：思考过程贴着正文走，不占一块面；开关落在正文的白底上，阶梯同 outline 档 */
+  [data-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 的铺满一行），自己带圆角，悬停时才浮出一块底 */
+  [data-scope='reasoning'][data-part='root'][data-variant='ghost'] [data-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 槽下发，按下只换面不缩放，§9.2）；这里只把使用者槽映射到桥接槽：
+     圆角归零贴住面边，内衬与字号沿用本组件的档位（不取 profile 的内衬，几何不变），字色三态都停在
+     弱一档的 muted（开关不是正文）；字形尺由根按同一档位给 */
+  [data-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;
+  }
+
+  [data-scope='reasoning'][data-part='trigger'][hidden] {
+    display: none;
+  }
+
+  /* 状态图形位：在想的时候实一档，想完退回弱一档 */
+  [data-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);
+  }
+
+  [data-scope='reasoning'][data-part='icon'][data-streaming] {
+    color: var(--xh-reasoning-icon-streaming-fg, var(--xh-fg-muted));
+  }
+
+  [data-scope='reasoning'][data-part='icon'][hidden] {
+    display: none;
+  }
+
+  /* 指示随开合转向，纯装饰。转向与正文展开取同一档时长，两件事一起收尾 */
+  [data-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));
+    transition: rotate var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  /* 没写内容就由皮肤画；作者往部件里塞了自己的图形，这条规则即不命中 */
+  [data-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;
+  }
+
+  [data-scope='reasoning'][data-part='indicator'][data-state='open'] {
+    rotate: 180deg;
+  }
+
+  [data-scope='reasoning'][data-part='indicator'][hidden] {
+    display: none;
+  }
+
+  /* 状态文案排成一行，长了截断：换行会把开关的高度顶开，时长位跟着跳 */
+  [data-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;
+  }
+
+  [data-scope='reasoning'][data-part='label'][hidden] {
+    display: none;
+  }
+
+  /* 还在想：一道亮带在文字上从右往左扫，字色由这层渐变裁出来 */
+  [data-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-reasoning-shimmer var(--xh-reasoning-shimmer-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
+  }
+
+  /*
+   * 减少动效：撤掉扫光那层，换成一档更实的静态字色。
+   * 这里不能只把时长压到接近零——光带会停在某一帧上，在文字上留下一道说不清的渐变；
+   * 而撤掉渐变又不还字色的话，被裁成透明的文字会整句消失。
+   * 两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion。
+   */
+  @media (prefers-reduced-motion: reduce) {
+    [data-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']) [data-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;
+  }
+
+  [data-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;
+  }
+
+  [data-scope='reasoning'][data-part='duration'][hidden] {
+    display: none;
+  }
+
+  /* 想完那一下两句文案整句换掉，淡入接住这次替换 */
+  [data-scope='reasoning'][data-part='label']:not([data-streaming]),
+  [data-scope='reasoning'][data-part='duration']:not([data-streaming]) {
+    animation: xh-reasoning-fade-in var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong) both;
+  }
+
+  /*
+   * 思考正文是散文：段落排版，不用等宽，行距比正文松一档。
+   * 左侧一条轨迹线把这一段与开关分开，起点对齐开关里的图形位。
+   *
+   * 这里刻意没有 [data-part='content'][hidden] { display: none }：补了动画一帧都播不出来。
+   * 收起由适配器在退场结束后写内联 display 落成，退场窗口内靠 connect 发的 inert 挡住焦点。
+   */
+  [data-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-state 一起消失，收起后不长期占着 */
+  [data-scope='reasoning'][data-part='content'][data-state='open'] {
+    will-change: grid-template-rows;
+    animation: xh-disclosure-expand var(--xh-motion-duration-enter) var(--xh-motion-ease-enter-strong);
+  }
+
+  [data-scope='reasoning'][data-part='content'][data-state='closed'] {
+    animation: xh-disclosure-collapse var(--xh-motion-duration-exit) var(--xh-motion-ease-exit) forwards;
+  }
+
+  /* 尺寸档改内衬、字号与图标档 */
+  [data-scope='reasoning'][data-part='root'][data-size='sm'] {
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-sm);
+    --xh-_reasoning-px: var(--xh-space-2);
+    --xh-_reasoning-py: var(--xh-space-1);
+    --xh-_reasoning-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='reasoning'][data-part='root'][data-size='md'] {
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-md);
+    --xh-_reasoning-px: var(--xh-space-3);
+    --xh-_reasoning-py: var(--xh-space-2);
+    --xh-_reasoning-font-size: var(--xh-control-font-md);
+  }
+
+  [data-scope='reasoning'][data-part='root'][data-size='lg'] {
+    --xh-_reasoning-icon-size: var(--xh-glyph-size-lg);
+    --xh-_reasoning-px: var(--xh-space-4);
+    --xh-_reasoning-py: var(--xh-space-3);
+    --xh-_reasoning-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 语气只染左侧那一条色条，海拔跟着一起落在同一条 box-shadow 上 */
+  [data-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);
+  }
+}
+
+@layer xihan.motion {
+  /* 文案整句换掉时接住这次替换 */
+  @keyframes xh-reasoning-fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  /* 亮带从右往左扫过文字。背景图比自身宽一倍，只移动背景位置，不动布局 */
+  @keyframes xh-reasoning-shimmer {
+    from {
+      background-position: 150% center;
+    }
+
+    to {
+      background-position: -50% center;
+    }
+  }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-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) {
+    [data-scope='reasoning'][data-part='label'][data-streaming] {
+      background-image: none;
+      -webkit-background-clip: border-box;
+      background-clip: border-box;
+      color: CanvasText;
+      animation: none;
+    }
+  }
+}

package/css/reset.css

@@ -1,13 +1,28 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
 /*
  * 库自己的基线，只作用于带 data-scope 的库节点，不碰宿主页面的任何元素。
  *
  * 层序上 xihan.reset 在 xihan.components 之前，所以组件皮肤里的任何显式声明都盖得住这里。
+ *
+ * 本层全部选择器（剥去伪元素）特指度为 (0,0,0)：一律以 :where() 包住。无层产物
+ * index.unlayered.css 里没有层序可依，只按特指度竞争，而 Family Recipe 的根规则
+ * （[data-xh-action-control] 一类，(0,1,0)）在产物里排在本文件之前——本层若同为 (0,1,0)，
+ * 靠源序就把配方的三档字号压掉。压到 (0,0,0) 后，无层产物里任何皮肤与配方规则都压得住它；
+ * 代价是无层模式下宿主的元素选择器 (0,0,1) 也压得过，写在文档站「皮肤与样式分层」。
  */
 @layer xihan.reset {
   /* 尺寸一律含边框：皮肤里的宽高都是照可见盒子写的。 */
-  [data-scope],
-  [data-scope]::before,
-  [data-scope]::after {
+  :where([data-scope]) {
+    box-sizing: border-box;
+  }
+
+  /* 伪元素自身带 (0,0,1)，无法再低；:where() 只压掉宿主那一截。 */
+  :where([data-scope])::before,
+  :where([data-scope])::after {
     box-sizing: border-box;
   }
 
@@ -15,7 +30,7 @@
    * UA 样式会把表单控件的字体锁成系统默认，不跟随页面。
    * 这几个元素是 UA 唯一强制字体的地方，标题一类不在其中，故不做全局 font: inherit。
    */
-  [data-scope]:where(button, input, optgroup, select, textarea) {
+  :where([data-scope]):where(button, input, optgroup, select, textarea) {
     font: inherit;
     letter-spacing: inherit;
   }
@@ -29,11 +44,74 @@
    * 用 visibility 而不是 display：display:none 会让浮层退出排版，引擎量不到它的尺寸。
    * 锚点被滚出可视区时引擎置 hidden，各皮肤另有一条 [data-hidden] 压回去。
    */
-  [data-scope][data-part='positioner'] {
+  :where([data-scope][data-part='positioner']) {
     visibility: hidden;
   }
 
-  [data-scope][data-part='positioner'][data-positioned] {
+  :where([data-scope][data-part='positioner'][data-positioned]) {
     visibility: visible;
   }
+
+  /*
+   * 库内原生滚动面与作者容器共用的细条。
+   *
+   * 两档滚动面里的「原生细条」档：页内结构容器（Table、Tree、Virtualizer viewport、
+   * Dialog / Drawer body、Log 视口一类）不接自绘条，靠这里把原生条统一成 thin + 令牌色阶。
+   * 三个入口：库节点（[data-scope][data-part]）、作者自建滚动容器与文档示例（[data-xh-scroll]）、
+   * Typography prose 里的 <pre>——它是库内唯一不带 data-part 的滚动面，作者只写 <pre> 不写角色。
+   * 皮肤不得再手写 scrollbar-width / scrollbar-color（stylelint 判红），要藏条写 none。
+   * 这里不写 scrollbar-gutter：auto 是初始值，stable 只给内容高度会变的容器由皮肤显式写。
+   * ::-webkit-scrollbar-thumb 的圆角取 pill：原生滑块与自绘 scrollbar:thumb 同为一维对象（真源 §6.3），
+   * 不再按厚度折半凑半圆，三档厚度都是同一身份。
+   *
+   * 令牌住在 xihan.tokens 层、排在本层之后，但自定义属性的求值不受层序影响：
+   * var() 在计算值阶段沿元素树取值，层序只裁决同一属性的两条声明谁赢。
+   * [data-xh-scrollbar] 的 scrollbar-width: none 是 (0,1,0)，有层与无层两种产物里都压得住本条；
+   * ::-webkit-scrollbar 伪元素自带 (0,0,1)，ScrollArea 那条 display: none 同样压得住。
+   */
+  :where([data-scope][data-part], [data-xh-scroll], [data-scope='typography'][data-part='prose'] pre) {
+    scrollbar-width: thin;
+    scrollbar-color: var(--xh-fg-scrollbar-thumb) var(--xh-bg-scrollbar-track);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], [data-scope='typography'][data-part='prose'] pre)::-webkit-scrollbar {
+    width: var(--xh-scrollbar-thickness-md);
+    height: var(--xh-scrollbar-thickness-md);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], [data-scope='typography'][data-part='prose'] pre)::-webkit-scrollbar-track {
+    background: var(--xh-bg-scrollbar-track);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], [data-scope='typography'][data-part='prose'] pre)::-webkit-scrollbar-thumb {
+    border-radius: var(--xh-shape-pill);
+    background: var(--xh-fg-scrollbar-thumb);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], [data-scope='typography'][data-part='prose'] pre)::-webkit-scrollbar-thumb:hover {
+    background: var(--xh-fg-scrollbar-thumb-hover);
+  }
+
+  :where([data-scope][data-part], [data-xh-scroll], [data-scope='typography'][data-part='prose'] pre)::-webkit-scrollbar-thumb:active {
+    background: var(--xh-fg-scrollbar-thumb-active);
+  }
+
+  /*
+   * 选区高亮的底与字。不写这条时用的是 UA 的系统高亮色（多数是系统蓝底白字）：
+   * 它不跟主题走，深色档下这块蓝会横在面板上，选中的文字反而比没选中时更难认。
+   *
+   * 后代那条不是冗余。高亮样式虽然会沿元素树往下继承，但「直接命中该元素的声明」
+   * 永远压过继承来的值：宿主页面自己写一条通配的 ::selection，它直接命中我们子树里
+   * 的每一个后代元素——只写第一条时，库节点自己的裸文本是我们的色，里面每个 <span>
+   * 却回退成宿主的色，一段文字选出两种底。两条一起写，整棵子树才是同一个色。
+   * 两条都以 [data-scope] 起手，着色止于库子树，宿主页面自己的选区不受影响。
+   *
+   * 只写这两个属性：高亮伪元素能吃的属性极窄，box-shadow / border 一类多数引擎
+   * 直接丢弃，不报错也不生效，写了只会让人以为已经处理过。
+   */
+  :where([data-scope])::selection,
+  :where([data-scope]) *::selection {
+    background: var(--xh-bg-brand-subtle);
+    color: var(--xh-fg-default);
+  }
 }

package/css/resizable.css

@@ -0,0 +1,237 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 resizable 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='resizable'] {
+    --xh-resizable-skin: 1;
+  }
+
+  /* 分工：**尺寸与位移**由连接层每帧写进内联样式（inline-size / block-size / left / top）。
+     这份皮肤一条都不碰那四个——内联优先级更高，写了不但是死声明，
+     还会在拖动的每一帧跟连接层抢位置。皮肤只管定位上下文、把手落位与状态表现。 */
+
+  /* 定位上下文，八向可调靠它才成立：
+     推西边与北边时容器的起点会动，那段位移写成 left / top。relative 的 left / top
+     是视觉位移、元素仍占原位，因此对边钉得住。改成 static 会让这两个方向只变尺寸不移位。 */
+  [data-scope='resizable'][data-part='root'] {
+    position: relative;
+    /* 把层序关在容器里：把手的 1 / 2 只跟彼此比，不跟外面的层号打架 */
+    isolation: isolate;
+    box-sizing: border-box;
+  }
+
+  /* 调整期间关掉选中：把手一按就会把容器里的文字刷成选中态 */
+  [data-scope='resizable'][data-part='root'][data-resizing] {
+    user-select: none;
+  }
+
+  /* 这里的 data-disabled 关掉的是「能不能调尺寸」，容器里作者的内容照常可用：
+     光标交回给作者，不摆共享层那个「不可用」的样子 */
+  [data-scope='resizable'][data-part='root'][data-disabled] {
+    cursor: inherit;
+  }
+
+  [data-scope='resizable'][data-part='root'][hidden] {
+    display: none;
+  }
+
+  /* 把手命中区留在容器内部并覆盖对应边；视觉指示条贴住容器边框，由伪元素绘制。 */
+  [data-scope='resizable'][data-part='handle'] {
+    --xh-_resizable-indicator-color: var(
+      --xh-resizable-handle-bg,
+      color-mix(in oklab, var(--xh-fg-default) 18%, transparent)
+    );
+
+    position: absolute;
+    z-index: 1;
+    display: block;
+    background: transparent;
+    touch-action: none;
+  }
+
+  [data-scope='resizable'][data-part='handle']::after {
+    content: '';
+    position: absolute;
+    border-radius: var(--xh-resizable-handle-radius, var(--xh-shape-pill));
+    background: var(--xh-_resizable-indicator-color);
+    pointer-events: none;
+    transition:
+      background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  [data-scope='resizable'][data-part='handle']:hover {
+    --xh-_resizable-indicator-color: var(
+      --xh-resizable-handle-bg-hover,
+      color-mix(in oklab, var(--xh-fg-default) 32%, transparent)
+    );
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-resizing] {
+    --xh-_resizable-indicator-color: var(--xh-resizable-handle-bg-active, var(--xh-bg-brand));
+  }
+
+  [data-scope='resizable'][data-part='handle']:focus-visible {
+    --xh-_resizable-indicator-color: var(--xh-ring-focus);
+
+    outline: none;
+  }
+
+  [data-scope='resizable'][data-part='handle'][hidden] {
+    display: none;
+  }
+
+  /* 四条边：各占一整条，厚度是可抓的余量 */
+  [data-scope='resizable'][data-part='handle'][data-edge='n'],
+  [data-scope='resizable'][data-part='handle'][data-edge='s'] {
+    inset-inline: var(--xh-resizable-grip, var(--xh-space-2));
+    block-size: var(--xh-resizable-grip, var(--xh-space-2));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='e'],
+  [data-scope='resizable'][data-part='handle'][data-edge='w'] {
+    inset-block: var(--xh-resizable-grip, var(--xh-space-2));
+    inline-size: var(--xh-resizable-grip, var(--xh-space-2));
+  }
+
+  /* 落位用逻辑属性：e 说的是行尾侧，从右往左排版时它就该落在屏幕左边——
+     机器那边也是把逻辑边翻成物理边再算几何的，两处同源 */
+  [data-scope='resizable'][data-part='handle'][data-edge='n'] {
+    inset-block-start: 0;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='s'] {
+    inset-block-end: 0;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='e'] {
+    inset-inline-end: 0;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='w'] {
+    inset-inline-start: 0;
+  }
+
+  [data-scope='resizable'][data-part='handle']:is([data-edge='n'], [data-edge='s'])::after {
+    inset-inline-start: 50%;
+    inline-size: var(--xh-resizable-indicator-length, var(--xh-space-8));
+    block-size: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    translate: -50% 0;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='n']::after {
+    inset-block-start: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='s']::after {
+    inset-block-end: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  [data-scope='resizable'][data-part='handle']:is([data-edge='e'], [data-edge='w'])::after {
+    inset-block-start: 50%;
+    inline-size: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    block-size: var(--xh-resizable-indicator-length, var(--xh-space-8));
+    translate: 0 -50%;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='e']::after {
+    inset-inline-end: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='w']::after {
+    inset-inline-start: var(--xh-resizable-indicator-inset, 0);
+  }
+
+  /* 四个角：压在两条边的交点上，盖过相邻两条边（它们同时动两轴） */
+  [data-scope='resizable'][data-part='handle'][data-edge='ne'],
+  [data-scope='resizable'][data-part='handle'][data-edge='nw'],
+  [data-scope='resizable'][data-part='handle'][data-edge='se'],
+  [data-scope='resizable'][data-part='handle'][data-edge='sw'] {
+    z-index: 2;
+    inline-size: var(--xh-resizable-corner, var(--xh-space-4));
+    block-size: var(--xh-resizable-corner, var(--xh-space-4));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='nw'] {
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    border-start-start-radius: inherit;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='ne'] {
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    border-start-end-radius: inherit;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='sw'] {
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    border-end-start-radius: inherit;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='se'] {
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    border-end-end-radius: inherit;
+  }
+
+  [data-scope='resizable'][data-part='handle']:is(
+    [data-edge='ne'],
+    [data-edge='nw'],
+    [data-edge='se'],
+    [data-edge='sw']
+  )::after {
+    inline-size: 50%;
+    block-size: 50%;
+    border: 0 solid var(--xh-_resizable-indicator-color);
+    border-radius: inherit;
+    background: transparent;
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='nw']::after {
+    inset-block-start: var(--xh-resizable-corner-inset, 0);
+    inset-inline-start: var(--xh-resizable-corner-inset, 0);
+    border-block-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='ne']::after {
+    inset-block-start: var(--xh-resizable-corner-inset, 0);
+    inset-inline-end: var(--xh-resizable-corner-inset, 0);
+    border-block-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='sw']::after {
+    inset-block-end: var(--xh-resizable-corner-inset, 0);
+    inset-inline-start: var(--xh-resizable-corner-inset, 0);
+    border-block-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-start-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  [data-scope='resizable'][data-part='handle'][data-edge='se']::after {
+    inset-block-end: var(--xh-resizable-corner-inset, 0);
+    inset-inline-end: var(--xh-resizable-corner-inset, 0);
+    border-block-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+    border-inline-end-width: var(--xh-resizable-indicator-thickness, var(--xh-stroke-strong));
+  }
+
+  /* 没开放的边不显示把手：留着一个抓不动的区域只会让人反复去试 */
+  [data-scope='resizable'][data-part='handle'][data-disabled] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 把手那两档全是底色画出来的，这一档里底色被统一换成系统底色，两档与静息塌成一个样子。
+       改由描边把正在拖的那一条画出来 */
+    [data-scope='resizable'][data-part='handle'][data-resizing] {
+      --xh-_resizable-indicator-color: Highlight;
+    }
+  }
+}