@xihan-ui/styles 1.0.0 → 2.0.0

package/css/skeleton.css

@@ -1,3 +1,10 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 skeleton 样式。 */
+
 @layer xihan.motion {
   /* 一条比底色略亮的窄带从头扫到尾。背景图比自身宽一倍，靠移动背景位置扫过去，
      不动 transform 也不动布局，整段动画只在合成层上跑 */
@@ -10,6 +17,13 @@
       background-position: -200% 0;
     }
   }
+
+  /* 呼吸档：整根条子在原色与禁用档之间来回淡。往返由 alternate 给，帧里只写一端 */
+  @keyframes xh-skeleton-pulse {
+    to {
+      opacity: var(--xh-state-disabled-opacity);
+    }
+  }
 }
 
 @layer xihan.components {
@@ -22,7 +36,7 @@
   [data-scope='skeleton'][data-part='root'] {
     display: flex;
     flex-direction: column;
-    gap: var(--xh-skeleton-gap, var(--xh-space-2));
+    gap: var(--xh-skeleton-gap, var(--xh-space-3));
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，补这条兜住加载结束后的收起态 */
@@ -33,42 +47,79 @@
   /*
    * 单根骨架条。底色与微光两层叠在一起：
    * background-color 是静止时看到的那层，background-image 是扫过去的那道光。
+   * 微光取比底亮一档的那支面色：浅色下比 bg-subtle 亮、深色下同样比它亮，
+   * 两个主题里扫过去的都是一道亮带，而不是浅色下反倒扫出一道暗带。
    */
-  [data-scope='skeleton'][data-part='bone'] {
+  [data-scope='skeleton'][data-part='item'] {
     inline-size: 100%;
+    pointer-events: none;
     border-radius: var(--xh-skeleton-radius, var(--xh-shape-control));
     background-color: var(--xh-skeleton-bg, var(--xh-bg-subtle));
     background-image: linear-gradient(
       90deg,
       transparent 20%,
-      var(--xh-skeleton-sheen, var(--xh-bg-subtle-hover)) 50%,
+      var(--xh-skeleton-sheen, var(--xh-bg-surface-raised)) 50%,
       transparent 80%
     );
     background-repeat: no-repeat;
     background-size: 200% 100%;
-    animation: xh-skeleton-shimmer var(--xh-skeleton-duration, var(--xh-shimmer-duration)) var(--xh-ease-standard) infinite;
+    animation: xh-skeleton-shimmer var(--xh-skeleton-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* 一行文字的高度取正文字号，圆角拉满，看起来就是一行还没排出来的字 */
-  [data-scope='skeleton'][data-part='bone'][data-variant='text'] {
-    block-size: var(--xh-skeleton-text-block-size, var(--xh-text-body-size));
+  [data-scope='skeleton'][data-part='item'][data-shape='text'] {
+    block-size: var(--xh-skeleton-text-block-size, var(--xh-text-caption-size));
     border-radius: var(--xh-skeleton-text-radius, var(--xh-shape-pill));
   }
 
   /* 头像位：正方形加满圆角。宽度定死不跟着容器拉长，高度也不许被主轴压扁 */
-  [data-scope='skeleton'][data-part='bone'][data-variant='circle'] {
+  [data-scope='skeleton'][data-part='item'][data-shape='circle'] {
     flex: none;
     inline-size: var(--xh-skeleton-circle-size, var(--xh-control-h-lg));
     aspect-ratio: 1;
-    border-radius: var(--xh-skeleton-circle-radius, var(--xh-shape-pill));
+    border-radius: var(--xh-skeleton-circle-radius, var(--xh-shape-circle));
   }
 
   /* 图片、卡片这类成块的占位：给个最小高度，撑开由作者决定 */
-  [data-scope='skeleton'][data-part='bone'][data-variant='rect'] {
+  [data-scope='skeleton'][data-part='item'][data-shape='rect'] {
     min-block-size: var(--xh-skeleton-rect-block-size, var(--xh-control-h-lg));
     border-radius: var(--xh-skeleton-rect-radius, var(--xh-shape-surface));
   }
 
+  /*
+   * 呼吸档：撤掉微光那层，整根条子在原色与禁用档之间来回淡。
+   * 微光扫的是一道亮带，呼吸改的是整根的浓淡——两者都表达"还在等"，
+   * 换哪一档由作者定，缺省仍是微光。
+   */
+  [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    background-image: none;
+    animation: xh-skeleton-pulse var(--xh-skeleton-pulse-duration, var(--xh-shimmer-duration)) var(--xh-motion-ease-sweep) infinite alternate;
+  }
+
+  /* 静止档：底色留着，两层动效都撤掉 */
+  [data-scope='skeleton'][data-part='root'][data-animation='none'] [data-part='item'] {
+    background-image: none;
+    animation: none;
+  }
+
+  /* 呼吸档自带一条动画，压不住下面基础降级里的 animation: none，这一档各自再写一份。
+     两组规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+      animation: none;
+    }
+  }
+
+  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+    animation: none;
+  }
+
+  @media print {
+    [data-scope='skeleton'][data-part='root'][data-animation='pulse'] [data-part='item'] {
+      animation: none;
+    }
+  }
+
   /*
    * 减少动效：撤掉微光那层，只留静态底色。
    * 骨架屏是自己冒出来、会一直循环到数据回来为止的动效，正是最容易引发不适的那一类；
@@ -76,14 +127,36 @@
    * 两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion。
    */
   @media (prefers-reduced-motion: reduce) {
-    [data-scope='skeleton'][data-part='bone'] {
+    [data-scope='skeleton'][data-part='item'] {
       background-image: none;
       animation: none;
     }
   }
 
-  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='bone'] {
+  :where([data-motion='reduce']) [data-scope='skeleton'][data-part='item'] {
     background-image: none;
     animation: none;
   }
+
+  @media print {
+    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
+       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
+       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
+       并成一条之后这层配对关系在文本上就断了。 */
+    [data-scope='skeleton'][data-part='item'] {
+      background-image: none;
+      animation: none;
+    }
+  }
+
+  /*
+   * 高对比档：骨架条整根靠底色画出来，这一档里底色与微光一起被系统换掉，
+   * 一块什么都没有的空白——正在加载这件事没有了任何表达。改成描一圈边把条子勾出来。
+   */
+  @media (forced-colors: active) {
+    [data-scope='skeleton'][data-part='item'] {
+      border: var(--xh-stroke-thin) solid GrayText;
+      background-image: none;
+    }
+  }
 }

package/css/slider.css

@@ -1,3 +1,10 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='slider'] {
@@ -18,7 +25,8 @@
 
     display: flex;
     flex-direction: column;
-    gap: var(--xh-slider-gap, var(--xh-stack-gap-md));
+    /* 字段标签贴控件（§6.4 复合单字段） */
+    gap: var(--xh-slider-gap, var(--xh-space-1));
   }
 
   /* 竖排时整条控件收成一块，不再撑满一行：宽度由拇指直径决定 */
@@ -27,21 +35,18 @@
     align-items: center;
   }
 
-  /* 禁用的整体压暗只做一次，落在最外层：track / range / thumb 各自再叠一层 opacity 会越叠越黑 */
-  [data-scope='slider'][data-part='root'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
-  }
+  /* 禁用不整体压暗（§7.2 第 9 条）：前景与表面各自降级——连接层把 data-disabled 发到每个角色节点上，
+     轨道、区间、拇指、刻度与标签就近消费，写在各自的规则里 */
 
+  /* 字段标签：14 / 500 / fg-default（§6.4），禁用换到 --xh-fg-subtle */
   [data-scope='slider'][data-part='label'] {
-    color: var(--xh-slider-label-fg, var(--xh-fg-muted));
+    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));
-    line-height: var(--xh-leading-none);
   }
 
   [data-scope='slider'][data-part='label'][data-disabled] {
-    color: var(--xh-fg-subtle);
+    color: var(--xh-slider-label-fg-disabled, var(--xh-fg-subtle));
   }
 
   /* 拇指以它为定位上下文（拇指常常浮出轨道，挂在 track 上会被轨道的盒子束住）。
@@ -55,6 +60,14 @@
     cursor: pointer;
   }
 
+  /* 刻度文案以刻度为圆心横向摊开，首末两档各有一半落在轨道之外，页面因此恒多出半个文案的宽度。
+     排了刻度文案的横轨两侧各让出一段，那半个文案落进让出来的这一段里。
+     让在控件上而不是根上：轨道、刻度、拇指的坐标都以控件为基准，一起让开才不会彼此错位。 */
+  [data-scope='slider'][data-part='root']:has([data-part='tick-label'])
+    [data-part='control'][data-orientation='horizontal'] {
+    margin-inline: var(--xh-slider-control-gutter, var(--xh-space-6));
+  }
+
   [data-scope='slider'][data-part='control'][data-orientation='vertical'] {
     flex-direction: column;
     justify-content: center;
@@ -67,7 +80,7 @@
     cursor: grabbing;
   }
 
-  [data-scope='slider'][data-part='control'][data-readonly] {
+  [data-scope='slider'][data-part='control'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
@@ -93,6 +106,11 @@
     inline-size: var(--xh-_track-thickness);
   }
 
+  /* 禁用：底槽退到 100 档淡底，已选区间换成禁用前景——两者仍分得开，值还读得出，只是没了品牌色 */
+  [data-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 时退回原来的品牌色。
@@ -119,24 +137,39 @@
     background: var(--xh-slider-range-bg-invalid, var(--xh-border-invalid));
   }
 
+  [data-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 面（§8）：描边取 --xh-border-default，raised 影只是加成、不作边界 */
   [data-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-bg-surface));
-    border-radius: var(--xh-slider-thumb-radius, var(--xh-shape-pill));
+    border: var(--xh-stroke-thick) solid var(--xh-slider-thumb-border, var(--xh-border-default));
+    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-micro) var(--xh-motion-ease-enter),
+      scale var(--xh-motion-duration-micro) var(--xh-motion-ease-enter-strong),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* 面是实心的，环色与面同族，画在面里就看不出来；环改取面自己的前景色——
+     那一族色本来就要在这块面上把字读清楚，与面的对比是按可读性定的。
+     禁用的拇指退成白面，不在这一档里，吃库环 */
+  [data-scope='slider'][data-part='thumb']:not([data-disabled]):focus-visible {
+    --xh-_ring-color: currentColor;
+  }
+
   /* 内联样式把 inset-inline-start 定在值所在的比例上，那是拇指的**起始边**不是圆心；
      用负的逻辑外边距回拉半个直径，圆心才落在比例点上。
      这里刻意不用 translate(-50%)：rtl 下 inset-inline-start 映射到 right，
@@ -155,31 +188,75 @@
     margin-block-end: calc(var(--xh-_thumb-size) / -2);
   }
 
-  [data-scope='slider'][data-part='thumb']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
   /* 多拇指时只有手真正推着的那一个带 data-dragging，放大与光标因此不会全组一起变。
-     放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。 */
+     放大用 scale 而不是改尺寸：变换绕自身中心发生，圆心不动，负外边距的算式也不用跟着改。
+     海拔从静态的 raised 换到 lifted：跟着手走的东西比贴在页面上的抬得高一档，
+     又不到锚定浮层那一层——用 floating 会让拇指和下拉面板一样重。 */
   [data-scope='slider'][data-part='thumb'][data-dragging] {
     scale: var(--xh-slider-thumb-scale-dragging, var(--xh-motion-scale-drag));
     cursor: grabbing;
-    box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-floating));
+    box-shadow: var(--xh-slider-thumb-shadow-dragging, var(--xh-elevation-lifted));
   }
 
   [data-scope='slider'][data-part='thumb'][data-invalid] {
     background: var(--xh-slider-thumb-bg-invalid, var(--xh-border-invalid));
   }
 
-  [data-scope='slider'][data-part='thumb'][data-readonly] {
+  [data-scope='slider'][data-part='thumb'][data-readonly]:not([data-disabled]) {
     cursor: default;
   }
 
+  /* 禁用：面退到实体白面、描边留着、影收掉——拖不起来的东西不该看着像浮在轨道上。
+     不写 color：圆点上没有字，禁用拇指不进 Tab 序列也不会聚焦，环的前景在这里没有消费者 */
   [data-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% 再靠自动外边距回中：气泡宽度由文字撑出，用 translate 回中的话
+     rtl 下 inset-inline-start 映射到 right，位移是物理方向的，会把气泡推向错误的一侧。
+     默认只在推动那一刻露面，静止时留在 DOM 里但不占视线 */
+  [data-scope='slider'][data-part='value-text'] {
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline: 50%;
+    inline-size: max-content;
+    margin-block-end: var(--xh-slider-value-text-offset, var(--xh-space-2));
+    margin-inline: auto;
+    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);
+  }
+
+  [data-scope='slider'][data-part='value-text'][hidden] {
+    display: none;
+  }
+
+  /* 只有手真正推着的那一个拇指带 data-dragging，多拇指时气泡不会全组一起冒出来 */
+  [data-scope='slider'][data-part='value-text'][data-dragging] {
+    opacity: 1;
+  }
+
+  /* 竖排轨道的气泡挪到行侧：压在拇指上方会挡住上一档的值 */
+  [data-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;
+  }
+
   /* —— 尺寸 —— */
   /* 尺寸只改 root 上那两个槽位，control / track / thumb 跟着一起走；中间档不写规则，缺省即中档。
      两档都保持"拇指是轨道的三倍厚"这个比例，换档时圆点与底槽的关系看着不变。 */
@@ -194,33 +271,34 @@
   }
 
   /* —— 刻度：圆点钉在轨道上、文案排在轨道外侧，坐标由连接层按百分比内联给出 —— */
-  [data-scope='slider'][data-part='marks'] {
+  [data-scope='slider'][data-part='tick-group'] {
     position: absolute;
     inset: 0;
     pointer-events: none;
   }
 
-  [data-scope='slider'][data-part='mark'] {
+  /* 刻度点是正方盒，取 circle（§6.3 正方盒不得用 pill 冒充圆） */
+  [data-scope='slider'][data-part='tick'] {
     position: absolute;
     inset-block-start: 50%;
-    inline-size: var(--xh-slider-mark-size, var(--xh-space-1));
-    block-size: var(--xh-slider-mark-size, var(--xh-space-1));
-    border-radius: var(--xh-slider-mark-radius, var(--xh-shape-pill));
-    background: var(--xh-slider-mark-bg, var(--xh-border-strong));
+    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));
     translate: -50% -50%;
   }
 
   /* 落进已选区间的刻度点跟 range 同色 */
-  [data-scope='slider'][data-part='mark'][data-passed] {
-    background: var(--xh-slider-mark-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
+  [data-scope='slider'][data-part='tick'][data-passed] {
+    background: var(--xh-slider-tick-bg-active, var(--xh-_tone, var(--xh-bg-brand)));
   }
 
-  [data-scope='slider'][data-part='mark-label'] {
+  [data-scope='slider'][data-part='tick-label'] {
     position: absolute;
     inset-block-start: 100%;
-    margin-block-start: var(--xh-slider-mark-label-gap, var(--xh-space-1));
-    color: var(--xh-slider-mark-label-fg, var(--xh-fg-subtle));
-    font-size: var(--xh-slider-mark-label-font-size, var(--xh-text-caption-size));
+    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: -50% 0;
@@ -229,22 +307,37 @@
     user-select: none;
   }
 
-  [data-scope='slider'][data-part='mark-label'][data-passed] {
-    color: var(--xh-slider-mark-label-fg-active, var(--xh-fg-default));
+  [data-scope='slider'][data-part='tick-label'][data-passed] {
+    color: var(--xh-slider-tick-label-fg-active, var(--xh-fg-default));
+  }
+
+  /* 禁用：刻度点与文案由 tick-group 上的 data-disabled 下发（连接层不给每个刻度单发），
+     已过的刻度点与区间同色，文案换禁用前景，点它跳档的手型收掉 */
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'] {
+    background: var(--xh-slider-tick-bg-disabled, var(--xh-border-default));
+  }
+
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick'][data-passed] {
+    background: var(--xh-slider-tick-bg-active-disabled, var(--xh-fg-disabled));
+  }
+
+  [data-scope='slider'][data-part='tick-group'][data-disabled] [data-part='tick-label'] {
+    color: var(--xh-slider-tick-label-fg-disabled, var(--xh-fg-disabled));
+    cursor: not-allowed;
   }
 
   /* 竖直轨道：点与文案换轴，坐标由连接层写在 block 轴上 */
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='mark'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick'] {
     inset-block-start: auto;
     inset-inline-start: 50%;
     translate: -50% 50%;
   }
 
-  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='mark-label'] {
+  [data-scope='slider'][data-part='root'][data-orientation='vertical'] [data-part='tick-label'] {
     inset-block-start: auto;
     inset-inline-start: 100%;
     margin-block-start: 0;
-    margin-inline-start: var(--xh-slider-mark-label-gap, var(--xh-space-1));
+    margin-inline-start: var(--xh-slider-tick-label-gap, var(--xh-space-1));
     translate: 0 50%;
   }
 

package/css/sortable.css

@@ -0,0 +1,198 @@
+/*
+ * 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 探一次，取不到就说明这份皮肤没被引入。 */
+  [data-scope='sortable'] {
+    --xh-sortable-skin: 1;
+  }
+
+  /* 分工：**每一项的位移**由连接层每帧写进内联 transform（让位与跟手都在那儿算）。
+     这份皮肤一条都不碰 transform——内联优先级更高，写了不但是死声明，
+     还会在拖动的每一帧跟连接层抢位置。皮肤只管排布方向、间距、光标与状态表现。 */
+
+  [data-scope='sortable'][data-part='root'] {
+    display: flex;
+    gap: var(--xh-sortable-gap, var(--xh-space-2));
+  }
+
+  /* 拖动期间关掉选中：整项可拖时按下不 preventDefault，不关这条会一路刷蓝 */
+  [data-scope='sortable'][data-part='root'][data-dragging] {
+    user-select: none;
+  }
+
+  [data-scope='sortable'][data-part='root'][data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  [data-scope='sortable'][data-part='root'][data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  /* 换行网格：主轴横排、允许折行，落点按最近中心判，与单轴那两档是不同的判据 */
+  [data-scope='sortable'][data-part='root'][data-orientation='both'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  /* 项里面放什么、怎么排全是使用者的事：这里不给 display 也不给间距。
+     给了会盖掉使用者自己的单元格布局——网格里的一格被压成 flex 行之后就不再撑满，
+     看起来像是尺寸算错了。皮肤只管拖起来那一项的视觉反馈。 */
+
+  /* 让位期间关掉过渡，跟手的那一项才不会慢半拍粘在指针后面。
+     其余项反过来要过渡：它们是被让开的，瞬移会看不出发生了什么。 */
+  [data-scope='sortable'][data-part='root'][data-dragging] [data-part='item']:not([data-dragging]) {
+    transition: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+  }
+
+  /* 抓起与放下时的抬升、压深都淡变。位移不进这条：它由连接层每帧写内联 transform */
+  [data-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);
+  }
+
+  [data-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);
+  }
+
+  /* 把手是只有字形的离散动作钮（§9.1 定尺把手）：盒几何、悬停 / 按下与 0.97 按压、粗指针热区、焦点环、
+     禁用面全由 Action Control 的 icon ghost 档给（连接层投 xs：24px 正方盒，与此前 --xh-control-action-size
+     同尺寸），组件只映射既有使用者槽。静息透明，白底承载 hover 100 → pressed 200（此前悬停落 200 是错档）。
+     手型不是 pointer：抓起来拖的东西给 grab，按住拖动中给 grabbing；家族的手型槽逐态映射 */
+  [data-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 守卫让作者塞进来的图标整个顶掉它，而不是两份叠在一起。
+     不画这条的话按钮里空无一物，只剩一块摸不着边的透明命中区 */
+  [data-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) {
+    [data-scope='sortable'][data-part='item-drag-trigger']:empty::after {
+      position: static;
+      min-inline-size: 0;
+      min-block-size: 0;
+      translate: none;
+    }
+
+    [data-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 下行内分量掉头，热区才落回把手中心 */
+    [data-scope='sortable'][data-part='item-drag-trigger']:empty:dir(rtl)::before {
+      translate: 50% -50%;
+    }
+  }
+
+  /* 拖动中（指针按住或键盘拾起）：光标换成"抓着"的样子，各态的手型槽一并换掉——
+     家族的悬停 / 按下块比这条特指度高，直接写 cursor 会被盖回去 */
+  [data-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;
+  }
+
+  /* 落点线：容器的绝对定位子节点，起点与长度由连接层每帧写内联，这里只给粗细与颜色。
+     容器要自建定位上下文，线才落在它自己的坐标系里 */
+  [data-scope='sortable'][data-part='root']:has([data-part='drop-indicator']) {
+    position: relative;
+  }
+
+  /* 不写层号：它是定位子节点，写在末项之后就画在各项之上，组件内不另立层序 */
+  [data-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: transform var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous);
+  }
+
+  /* 竖排时是一条横线铺满容器，横排与换行网格时是一条竖线 */
+  [data-scope='sortable'][data-part='drop-indicator'][data-orientation='vertical'] {
+    inline-size: 100%;
+    block-size: var(--xh-sortable-drop-indicator-size, var(--xh-stroke-thick));
+  }
+
+  [data-scope='sortable'][data-part='drop-indicator'][data-orientation='horizontal'],
+  [data-scope='sortable'][data-part='drop-indicator'][data-orientation='both'] {
+    inline-size: var(--xh-sortable-drop-indicator-size, var(--xh-stroke-thick));
+    block-size: 100%;
+  }
+
+  /* 活动区域只说给读屏听，不占版面。声明与 shared/visually-hidden.ts 逐条同值。 */
+  [data-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 后它照样显示 */
+  [data-scope='sortable'][data-part='root'][hidden],
+  [data-scope='sortable'][data-part='item-drag-trigger'][hidden],
+  [data-scope='sortable'][data-part='drop-indicator'][hidden] {
+    display: none;
+  }
+}