@xihan-ui/styles 3.0.0 → 3.2.0

package/dist/css/slider.css

@@ -0,0 +1,374 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 slider 样式。 */
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-slider {
+    --xh-slider-skin: 1;
+  }
+
+  /* 定位分工：已选区间与拇指在**主轴**上的起点与长度，由连接层每帧写进内联样式——
+     水平是 inset-inline-start / inline-size，竖直是 inset-block-end / block-size。
+     这份皮肤一个都不碰：内联优先级高于样式表，写了不但是死声明，
+     切换 orientation 的那一帧还会跟连接层清空另一轴的动作抢位置，把拇指钉在两轴都被约束的地方。
+     皮肤只管另一条轴（交叉轴）的尺寸、颜色、圆角与状态表现。 */
+
+  /* 私有槽位：组件令牌 → 中档字面量两级回退。轨道厚度与拇指直径同时被 control / track / thumb
+     三个角色节点用到，收成两个槽位挂在 root 上，尺寸档只改这两处，靠继承发到子部件。 */
+  .xh-scope-slider[data-part='root'] {
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-track-thumb-size));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-track-thickness));
+
+    display: flex;
+    flex-direction: column;
+    /* 字段标签贴控件（复合单字段） */
+    gap: var(--xh-slider-gap, var(--xh-space-1));
+  }
+
+  /* 竖排时整条控件收成一块，不再撑满一行：宽度由拇指直径决定 */
+  .xh-scope-slider[data-part='root'][data-orientation='vertical'] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  /* 禁用不整体压暗：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
+     轨道、区间、拇指、刻度与标签就近消费，写在各自的规则里 */
+
+  /* 字段标签：14 / 500 / fg-default，禁用换到 --xh-fg-subtle */
+  .xh-scope-slider[data-part='label'] {
+    color: var(--xh-slider-label-fg, var(--xh-fg-default));
+    font-size: var(--xh-slider-label-font-size, var(--xh-text-label-size));
+    font-weight: var(--xh-slider-label-font-weight, var(--xh-text-label-weight));
+  }
+
+  .xh-scope-slider[data-part='label'][data-disabled] {
+    color: var(--xh-slider-label-fg-disabled, var(--xh-fg-subtle));
+  }
+
+  /* 拇指以它为定位上下文（拇指常常浮出轨道，挂在 track 上会被轨道的盒子束住）。
+     厚度取拇指直径：轨道只有几个像素，控件若按轨道高，浮出来的拇指会顶到上下相邻的元素。
+     touch-action 由连接层内联给（拖动要接管手势），这里不写。 */
+  .xh-scope-slider[data-part='control'] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    block-size: var(--xh-_thumb-size);
+    cursor: pointer;
+  }
+
+  /* 刻度文案以刻度为圆心横向摊开，首末两档各有一半落在轨道之外，页面因此恒多出半个文案的宽度。
+     排了刻度文案的横轨两侧各让出一段，那半个文案落进让出来的这一段里。
+     让在控件上而不是根上：轨道、刻度、拇指的坐标都以控件为基准，一起让开才不会彼此错位。 */
+  .xh-scope-slider[data-part='root']:has([data-part='tick-label'])
+    [data-part='control'][data-orientation='horizontal']:where(.xh-scope-slider) {
+    margin-inline: var(--xh-slider-control-gutter, var(--xh-space-6));
+  }
+
+  .xh-scope-slider[data-part='control'][data-orientation='vertical'] {
+    flex-direction: column;
+    justify-content: center;
+    inline-size: var(--xh-_thumb-size);
+    block-size: var(--xh-slider-vertical-length, 10rem);
+  }
+
+  /* 按下轨道即跳，拖动中光标换成"抓着"的样子，手感与拇指一致 */
+  .xh-scope-slider[data-part='control'][data-dragging] {
+    cursor: grabbing;
+  }
+
+  .xh-scope-slider[data-part='control'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  .xh-scope-slider[data-part='control'][data-disabled] {
+    cursor: not-allowed;
+  }
+
+  /* 已选区间以它为定位上下文。不写 overflow: hidden：作者把拇指写进轨道里也是合法结构，
+     一裁就把拇指切掉半个；区间的圆角由它自己那条 border-radius 兜住，本就不靠轨道来裁。 */
+  .xh-scope-slider[data-part='track'] {
+    position: relative;
+    border-radius: var(--xh-slider-track-radius, var(--xh-shape-pill));
+    background: var(--xh-slider-track-bg, var(--xh-bg-subtle-active));
+  }
+
+  .xh-scope-slider[data-part='track'][data-orientation='horizontal'] {
+    inline-size: 100%;
+    block-size: var(--xh-_track-thickness);
+  }
+
+  .xh-scope-slider[data-part='track'][data-orientation='vertical'] {
+    block-size: 100%;
+    inline-size: var(--xh-_track-thickness);
+  }
+
+  /* 禁用：底槽退到 100 档淡底，已选区间换成禁用前景——两者仍分得开，值还读得出，只是没了品牌色 */
+  .xh-scope-slider[data-part='track'][data-disabled] {
+    background: var(--xh-slider-track-bg-disabled, var(--xh-bg-subtle));
+  }
+
+  /* 主轴（起点 + 长度）来自内联样式，这里只给定位模式与配色。
+     绝不给 inset / size 加过渡：拖拽时这两个值每帧都在变，一加过渡区间就永远追在指针后面。
+     语气槽由 root 上的 data-tone 声明、经继承发下来；没写 data-tone 时退回原来的品牌色。
+     轨道不跟着换族：区间与拇指换色即可读出语气，底槽保持中性才不会盖掉"已选/未选"的对比。 */
+  .xh-scope-slider[data-part='range'] {
+    position: absolute;
+    border-radius: var(--xh-slider-range-radius, var(--xh-shape-pill));
+    background: var(--xh-slider-range-bg, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  /* 交叉轴铺满轨道。这一侧的 inset 连接层每帧写成空串（即不设），样式表接手才有确定值；
+     不写的话绝对定位会退回"静态位置"，作者一给轨道加内边距就对不齐了。 */
+  .xh-scope-slider[data-part='range'][data-orientation='horizontal'] {
+    inset-block-start: 0;
+    block-size: 100%;
+  }
+
+  .xh-scope-slider[data-part='range'][data-orientation='vertical'] {
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+
+  /* 两端拇指之间可以整段拖动：区间给出「抓得住」的光标，拖动中换成「抓着」 */
+  .xh-scope-slider[data-part='range'][data-draggable] {
+    cursor: grab;
+  }
+
+  .xh-scope-slider[data-part='range'][data-draggable][data-dragging] {
+    cursor: grabbing;
+  }
+
+  .xh-scope-slider[data-part='range'][data-invalid] {
+    background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
+  }
+
+  .xh-scope-slider[data-part='range'][data-disabled] {
+    background: var(--xh-slider-range-bg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 圆点浮在轨道之上：轨道是流内的，拇指是绝对定位的，天然后来居上，不必再堆 z-index。
+     box-sizing 必须显式写：描边要吃进直径里，否则实际盒子比 --xh-_thumb-size 宽两条边，
+     下面按半个直径回拉的负外边距就对不上圆心。
+     拇指是可拖起的 raised 面：描边取装饰边（不透明档），raised 影只是加成、不作边界 */
+  .xh-scope-slider[data-part='thumb'] {
+    position: absolute;
+    box-sizing: border-box;
+    inline-size: var(--xh-_thumb-size);
+    block-size: var(--xh-_thumb-size);
+    /* 描边取装饰边的不透明档：墨色描边半透明，压在圆点自己的底上只会是底色的深一档，框不住圆点，
+       拇指就与同色的已选区间糊成一片 */
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default-opaque));
+    border-radius: var(--xh-slider-thumb-radius, var(--xh-shape-circle));
+    background: var(--xh-slider-thumb-bg, var(--xh-_tone, var(--xh-bg-brand)));
+    /* 圆点上没有字，这一支是给环用的：环灌 currentColor 时取到的是与这块底配对的前景色，
+       不写就取到从页面继承下来的正文色 */
+    color: var(--xh-_tone-on, var(--xh-fg-on-brand));
+    box-shadow: var(--xh-slider-thumb-shadow, var(--xh-elevation-raised));
+    cursor: grab;
+    transition:
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     禁用的拇指退成白面，不在这一档里，吃库环 */
+  .xh-scope-slider[data-part='thumb']:not([data-disabled]):focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
+  /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
+     用负的逻辑外边距回拉半个直径，圆心才落在比例点上。
+     这里刻意不用 translate(-50%)：rtl 下 inset-inline-start 映射到 right，
+     位移量是物理方向的，会把拇指推向错误的一侧；负的逻辑外边距自己就跟着换向。
+     交叉轴同理：inset-block-start 是连接层不写的那条轴，样式表接管即可。 */
+  .xh-scope-slider[data-part='thumb'][data-orientation='horizontal'] {
+    inset-block-start: 50%;
+    margin-block-start: calc(var(--xh-_thumb-size) / -2);
+    margin-inline-start: calc(var(--xh-_thumb-size) / -2);
+  }
+
+  /* 竖排的主轴是 inset-block-end（值向上增大），回拉也就换到 block-end 那侧 */
+  .xh-scope-slider[data-part='thumb'][data-orientation='vertical'] {
+    inset-inline-start: 50%;
+    margin-inline-start: calc(var(--xh-_thumb-size) / -2);
+    margin-block-end: calc(var(--xh-_thumb-size) / -2);
+  }
+
+  /* 多拇指时只有手真正推着的那一个带 data-dragging，放大与光标因此不会全组一起变。
+     放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。
+     海拔从静态的 raised 换到 lifted：跟着手走的东西比贴在页面上的抬得高一档，
+     又不到锚定浮层那一层——用 floating 会让拇指和下拉面板一样重。 */
+  .xh-scope-slider[data-part='thumb'][data-dragging] {
+    /* 放大比例落进私有槽：挂在拇指里的值气泡读同一支反向缩回原尺寸 */
+    --xh-_slider-thumb-scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
+
+    scale: var(--xh-_slider-thumb-scale);
+    cursor: grabbing;
+    box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-lifted));
+  }
+
+  .xh-scope-slider[data-part='thumb'][data-invalid] {
+    background: var(--xh-slider-thumb-bg-invalid, var(--xh-border-invalid));
+  }
+
+  .xh-scope-slider[data-part='thumb'][data-readonly]:not([data-disabled]) {
+    cursor: default;
+  }
+
+  /* 禁用：面退到实体白面、描边留着、影收掉——拖不起来的东西不该看着像浮在轨道上。
+     不写 color：圆点上没有字，禁用拇指不进 Tab 序列也不会聚焦，环的前景在这里没有消费者 */
+  .xh-scope-slider[data-part='thumb'][data-disabled] {
+    background: var(--xh-slider-thumb-bg-disabled, var(--xh-bg-surface));
+    box-shadow: var(--xh-slider-thumb-shadow-disabled, none);
+    cursor: not-allowed;
+  }
+
+  /* 值气泡：挂在拇指里，跟着拇指一起走位。
+     气泡宽度由文字撑出，只能靠平移回中。不能两侧 inset 都钉在 50% 再靠自动外边距回中：
+     那样可用宽度是 0，气泡比它宽，自动外边距按规范取 0，气泡从拇指中线起排、偏出半个自身宽。
+     起点是逻辑属性、平移是物理通道：平移乘书写方向的符号，rtl 下行内分量掉头，气泡才落回拇指正上方。
+     拖动时拇指放大，气泡按同一比例反向缩回、与拇指同一段过渡：文字不跟着放大，缩放原点在贴着拇指那一边。
+     默认只在推动那一刻露面，静止时留在 DOM 里但不占视线 */
+  .xh-scope-slider[data-part='value-text'] {
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    inline-size: max-content;
+    margin-block-end: var(--xh-slider-value-text-offset, var(--xh-space-2));
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
+    transform-origin: 50% 100%;
+    padding-block: var(--xh-slider-value-text-py, var(--xh-space-0_5));
+    padding-inline: var(--xh-slider-value-text-px, var(--xh-space-2));
+    border-radius: var(--xh-slider-value-text-radius, var(--xh-shape-control));
+    background: var(--xh-slider-value-text-bg, var(--xh-_tone, var(--xh-bg-brand)));
+    color: var(--xh-slider-value-text-fg, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+    font-size: var(--xh-slider-value-text-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-normal);
+    white-space: nowrap;
+    /* 气泡贴在拇指上方，指针要落到拇指上，不能被它挡住 */
+    pointer-events: none;
+    opacity: 0;
+    transition:
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-nudge) var(--xh-motion-ease-enter-strong);
+  }
+
+  .xh-scope-slider[data-part='value-text'][hidden] {
+    display: none;
+  }
+
+  /* 只有手真正推着的那一个拇指带 data-dragging，多拇指时气泡不会全组一起冒出来 */
+  .xh-scope-slider[data-part='value-text'][data-dragging] {
+    opacity: 1;
+    scale: calc(1 / var(--xh-_slider-thumb-scale, 1));
+  }
+
+  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值；反向缩放的原点换到贴着拇指的行首那一侧 */
+  .xh-scope-slider[data-part='value-text'][data-orientation='vertical'] {
+    inset-block: 50%;
+    inset-inline: 100% auto;
+    block-size: max-content;
+    margin-block: auto;
+    margin-inline: var(--xh-slider-value-text-offset, var(--xh-space-2)) 0;
+    transform-origin: calc(50% - 50% * var(--xh-direction-sign)) 50%;
+  }
+
+  /* —— 尺寸 —— */
+  /* 尺寸只改 root 上那两个槽位，control / track / thumb 跟着一起走；中间档不写规则，缺省即中档。
+     两档都保持"拇指是轨道的三倍厚"这个比例，换档时圆点与底槽的关系看着不变。 */
+  .xh-scope-slider[data-part='root'][data-size='sm'] {
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-3));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-1));
+  }
+
+  .xh-scope-slider[data-part='root'][data-size='lg'] {
+    --xh-_thumb-size: var(--xh-slider-thumb-size, var(--xh-space-6));
+    --xh-_track-thickness: var(--xh-slider-track-thickness, var(--xh-space-2));
+  }
+
+  /* —— 刻度：圆点钉在轨道上、文案排在轨道外侧，坐标由连接层按百分比内联给出 —— */
+  .xh-scope-slider[data-part='tick-group'] {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  /* 刻度点是正方盒，取 circle（正方盒不得用 pill 冒充圆） */
+  .xh-scope-slider[data-part='tick'] {
+    position: absolute;
+    inset-block-start: 50%;
+    inline-size: var(--xh-slider-tick-size, var(--xh-space-1));
+    block-size: var(--xh-slider-tick-size, var(--xh-space-1));
+    border-radius: var(--xh-slider-tick-radius, var(--xh-shape-circle));
+    background: var(--xh-slider-tick-bg, var(--xh-border-strong));
+    /* 连接层把比例点写在 inset-inline-start 上：平移的行内分量乘书写方向的符号，rtl 下掉头，刻度点才以比例点为中心 */
+    translate: calc(-50% * var(--xh-direction-sign)) -50%;
+  }
+
+  /* 落进已选区间的刻度点跟 range 同色 */
+  .xh-scope-slider[data-part='tick'][data-passed] {
+    background: var(--xh-slider-tick-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
+  }
+
+  .xh-scope-slider[data-part='tick-label'] {
+    position: absolute;
+    inset-block-start: 100%;
+    margin-block-start: var(--xh-slider-tick-label-gap, var(--xh-space-1));
+    color: var(--xh-slider-tick-label-fg, var(--xh-fg-subtle));
+    font-size: var(--xh-slider-tick-label-font-size, var(--xh-text-caption-size));
+    line-height: var(--xh-leading-none);
+    white-space: nowrap;
+    translate: calc(-50% * var(--xh-direction-sign)) 0;
+    cursor: pointer;
+    pointer-events: auto;
+    user-select: none;
+  }
+
+  .xh-scope-slider[data-part='tick-label'][data-passed] {
+    color: var(--xh-slider-tick-label-fg-active, var(--xh-fg-default));
+  }
+
+  /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
+     已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
+  .xh-scope-slider[data-part='tick-group'][data-disabled] [data-part='tick']:where(.xh-scope-slider) {
+    background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
+  }
+
+  .xh-scope-slider[data-part='tick-group'][data-disabled] [data-part='tick'][data-passed]:where(.xh-scope-slider) {
+    background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
+  }
+
+  .xh-scope-slider[data-part='tick-group'][data-disabled] [data-part='tick-label']:where(.xh-scope-slider) {
+    color: var(--xh-slider-tick-label-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
+  }
+
+  /* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
+  .xh-scope-slider[data-part='root'][data-orientation='vertical'] [data-part='tick']:where(.xh-scope-slider) {
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    translate: calc(-50% * var(--xh-direction-sign)) 50%;
+  }
+
+  .xh-scope-slider[data-part='root'][data-orientation='vertical'] [data-part='tick-label']:where(.xh-scope-slider) {
+    inset-block-start: auto;
+    inset-inline-start: 100%;
+    margin-block-start: 0;
+    margin-inline-start: var(--xh-slider-tick-label-gap, var(--xh-space-1));
+    translate: 0 50%;
+  }
+
+  /* display 会盖掉 UA 的 [hidden]{display:none}，凡是被赋了 display 的角色节点都要显式让位 */
+  .xh-scope-slider[data-part='root'][hidden],
+  .xh-scope-slider[data-part='control'][hidden] {
+    display: none;
+  }
+
+  /* hidden-input 是 type=hidden 的原生输入，浏览器本就不渲染它，
+     这里一条声明都不给：给了 display / 尺寸反而会把它拽回布局里，在拇指内部撑出一块空白。 */
+}

package/dist/css/sortable.css

@@ -0,0 +1,228 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 sortable 样式。 */
+
+/* Sortable 独立皮肤同时传递引入把手的动作控件配方；full bundle 递归去重。 */
+@import '../family/action-control.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-sortable {
+    --xh-sortable-skin: 1;
+  }
+
+  /* 分工：**每一项的位移**由连接层每帧写进内联 translate（让位与跟手都在那儿算）。
+     这份皮肤一条都不碰 translate——内联优先级更高，写了不但是死声明，
+     还会在拖动的每一帧跟连接层抢位置。皮肤只管排布方向、间距、光标与状态表现。 */
+
+  .xh-scope-sortable[data-part='root'] {
+    display: flex;
+    gap: var(--xh-sortable-gap, var(--xh-space-2));
+  }
+
+  /* 拖动期间关掉选中：整项可拖时按下不 preventDefault，不关这条会一路刷蓝 */
+  .xh-scope-sortable[data-part='root'][data-dragging] {
+    user-select: none;
+  }
+
+  .xh-scope-sortable[data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  .xh-scope-sortable[data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  /* 换行网格：主轴横排、允许折行，落点按最近中心判，与单轴那两档是不同的判据 */
+  .xh-scope-sortable[data-part='root'][data-orientation='both'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* 项里面放什么、怎么排全是使用者的事：这里不给 display 也不给间距。
+     给了会盖掉使用者自己的单元格布局——网格里的一格被压成 flex 行之后就不再撑满，
+     看起来像是尺寸算错了。皮肤只管拖起来那一项的视觉反馈。 */
+
+  /* 让位期间关掉过渡，跟手的那一项才不会慢半拍粘在指针后面。
+     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。
+     键盘拖动时被拖那一项不跟手、逐格挪，与让位的邻项同一段一起滑；抓起时的抬升照常淡变。
+     同组别的列表的一项悬在这里（data-drop='inside'）时，插入点及其后的项同样是被让开的 */
+  .xh-scope-sortable[data-part='root']:is([data-dragging], [data-drop='inside']) [data-part='item']:where(.xh-scope-sortable):not([data-dragging]) {
+    transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
+  }
+
+  /* 让位把末项挪出了原来的末端：容器末尾垫出落进来那一格的大小（连接层写进 --xh-_sortable-incoming-size），
+     容器随之长出一格，末项不会掉出容器的面。垫块是一个 flex 子项，沿主轴取那一格的尺寸、与各项之间同样隔一个 gap；
+     列表为空时它是唯一的子项，不带 gap，正好是那一格 */
+  .xh-scope-sortable[data-part='root'][data-drop='inside']::after {
+    content: '';
+    flex: 0 0 var(--xh-_sortable-incoming-size);
+  }
+
+  .xh-scope-sortable[data-part='root'][data-drag-mode='keyboard'] [data-part='item'][data-dragging]:where(.xh-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),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 抓起与放下时的抬升、压深都淡变。位移不进这条：它由连接层每帧写内联 translate */
+  .xh-scope-sortable[data-part='item'] {
+    transition:
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter),
+      opacity var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+  }
+
+  /* 放下后那一项由弹簧带着松手速度逐帧收进新位置：只在这一档备好合成层，落定即撤 */
+  .xh-scope-sortable[data-part='item'][data-animating] {
+    will-change: translate;
+  }
+
+  .xh-scope-sortable[data-part='item'][data-dragging] {
+    /* 拖起来的那一项浮在上面。层级由连接层写内联，这里只管观感。
+       海拔取 lifted：被指针拎起、正跟着手走的东西比贴在页面上的 raised 高一档，又不到锚定浮层那一层。
+       拖起的面是作者自己的内容，皮肤不给它强加描边——描边归作者的项目布局 */
+    box-shadow: var(--xh-sortable-item-shadow-dragging, var(--xh-elevation-lifted));
+    opacity: var(--xh-sortable-item-opacity-dragging, 0.9);
+  }
+
+  /* 把手是只有字形的离散动作钮（定尺把手）：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
+     禁用面全由 Action Control 的 icon ghost 档给（连接层投 xs：24px 正方盒，与此前 --xh-control-action-size
+     同尺寸），组件只映射既有使用者槽。静息透明，白底承载 hover 100 → pressed 200（此前悬停落 200 是错档）。
+     手型不是 pointer：抓起来拖的东西给 grab，按住拖动中给 grabbing；家族的手型槽逐态映射 */
+  .xh-scope-sortable[data-part='item-drag-trigger'] {
+    --xh-action-visual-size: var(--xh-sortable-drag-size, var(--xh-_action-profile-visual-size));
+    --xh-action-min-inline-size: var(--xh-sortable-drag-size, var(--xh-_action-profile-visual-size));
+    --xh-action-radius: var(--xh-sortable-drag-radius, var(--xh-shape-control));
+    --xh-action-bg-hover: var(--xh-sortable-drag-bg-hover, var(--xh-_action-variant-bg-hover));
+    --xh-action-bg-pressed: var(--xh-sortable-drag-bg-active, var(--xh-_action-variant-bg-pressed));
+    --xh-action-fg-rest: var(--xh-sortable-drag-fg, var(--xh-fg-muted));
+    --xh-action-fg-hover: var(--xh-sortable-drag-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-pressed: var(--xh-sortable-drag-fg-hover, var(--xh-fg-default));
+    --xh-action-fg-disabled: var(--xh-sortable-drag-fg-disabled, var(--xh-fg-disabled));
+    --xh-action-border-rest: transparent;
+    --xh-action-highlight-rest: transparent;
+    --xh-action-shadow-rest: none;
+    --xh-action-shadow-hover: none;
+    --xh-action-shadow-pressed: none;
+    --xh-action-cursor-rest: grab;
+    --xh-action-cursor-hover: grab;
+    --xh-action-cursor-focus-visible: grab;
+    --xh-action-cursor-pressed: grabbing;
+    /* 作者塞进把手的图标按档取字形尺（xs → 16px）；皮肤画的兜底抓手是两条描边线，不走这把尺 */
+    --xh-icon-size: var(--xh-sortable-drag-icon-size, var(--xh-_action-profile-glyph-size));
+
+    border-width: 0;
+  }
+
+  /* 抓手是两条竖线：盒子取边框盒，两侧描边就是那两条线，宽高与线宽都走令牌。
+     :empty 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起。
+     不画这条的话按钮里空无一物，只剩一块摸不着边的透明命中区 */
+  .xh-scope-sortable[data-part='item-drag-trigger']:empty::after {
+    content: '';
+    display: block;
+    inline-size: var(--xh-sortable-drag-grip-w, var(--xh-space-1));
+    block-size: var(--xh-sortable-drag-grip-h, var(--xh-space-3));
+    border-inline: var(--xh-stroke-thin) solid currentColor;
+  }
+
+  /* 手指落点：家族 icon 档用 ::after 把命中区扩到 44×44；没塞图标的把手 ::after 已被抓手占着，
+     抓手那条只写了宽高与描边，家族的定位、44px 下限与 -50% 平移会从同一个 ::after 漏进来，
+     两条竖线被撑成 44px 高、跨出把手——这里逐项钉回，热区改由空着的 ::before 扩；
+     作者塞了图标时 :empty 不成立，家族的 ::after 照常落下 */
+  @media (pointer: coarse) {
+    .xh-scope-sortable[data-part='item-drag-trigger']:empty::after {
+      position: static;
+      min-inline-size: 0;
+      min-block-size: 0;
+      translate: none;
+    }
+
+    .xh-scope-sortable[data-part='item-drag-trigger']:empty::before {
+      content: '';
+      position: absolute;
+      inset-block-start: 50%;
+      inset-inline-start: 50%;
+      min-inline-size: 44px;
+      min-block-size: 44px;
+      inline-size: 100%;
+      block-size: 100%;
+      translate: -50% -50%;
+    }
+
+    /* 与家族同一笔：起点是逻辑属性、平移是物理通道，rtl 下行内分量掉头，热区才落回把手中心 */
+    .xh-scope-sortable[data-part='item-drag-trigger']:empty:dir(rtl)::before {
+      translate: 50% -50%;
+    }
+  }
+
+  /* 拖动中（指针按住或键盘拾起）：光标换成"抓着"的样子，各态的手型槽一并换掉——
+     家族的悬停 / 按下块比这条特指度高，直接写 cursor 会被盖回去 */
+  .xh-scope-sortable[data-part='item-drag-trigger'][data-dragging] {
+    --xh-action-cursor-rest: grabbing;
+    --xh-action-cursor-hover: grabbing;
+    --xh-action-cursor-focus-visible: grabbing;
+    --xh-action-cursor-pressed: grabbing;
+  }
+
+  /* 落点线：容器的绝对定位子节点，起点与长度由连接层每帧写内联，这里只给粗细与颜色。
+     容器要自建定位上下文，线才落在它自己的坐标系里 */
+  .xh-scope-sortable[data-part='root']:has([data-part='drop-indicator']) {
+    position: relative;
+  }
+
+  /* 不写层号：它是定位子节点，写在末项之后就画在各项之上，组件内不另立层序 */
+  .xh-scope-sortable[data-part='drop-indicator'] {
+    position: absolute;
+    display: block;
+    /* 线不接指针：它盖在项上面，接了就挡住落点那一格 */
+    pointer-events: none;
+    border-radius: var(--xh-sortable-drop-indicator-radius, var(--xh-shape-pill));
+    background: var(--xh-sortable-drop-indicator-bg, var(--xh-bg-brand));
+    /* 落点一格一格地跳，线跟着滑过去 */
+    transition: translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous);
+  }
+
+  /* 竖排时是一条横线铺满容器，横排与换行网格时是一条竖线 */
+  .xh-scope-sortable[data-part='drop-indicator'][data-orientation='vertical'] {
+    inline-size: 100%;
+    block-size: var(--xh-sortable-drop-indicator-size, var(--xh-stroke-thick));
+  }
+
+  .xh-scope-sortable[data-part='drop-indicator'][data-orientation='horizontal'],
+  .xh-scope-sortable[data-part='drop-indicator'][data-orientation='both'] {
+    inline-size: var(--xh-sortable-drop-indicator-size, var(--xh-stroke-thick));
+    block-size: 100%;
+  }
+
+  /* 落点线是一块纯底色，高对比档里底色被统一换成 Canvas，整根消失：换成系统高亮色画回来。
+     跨列表时落在哪个列表只靠这条线与让出的那一格表出，这一档里同样要看得见 */
+  @media (forced-colors: active) {
+    .xh-scope-sortable[data-part='drop-indicator'] {
+      background: Highlight;
+    }
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  .xh-scope-sortable[data-part='live-region'] {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+  /* 给了 display 的角色节点必须补这条：display 声明会盖掉 UA 的 [hidden]{display:none}，
+     不补的话作者给节点加 hidden 后它照样显示 */
+  .xh-scope-sortable[data-part='root'][hidden],
+  .xh-scope-sortable[data-part='item-drag-trigger'][hidden],
+  .xh-scope-sortable[data-part='drop-indicator'][hidden] {
+    display: none;
+  }
+}