@xihan-ui/styles 2.0.0 → 3.0.0

package/css/switch.css

@@ -5,16 +5,10 @@
 
 /* 定义 switch 样式。 */
 
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
 @import '../family/action-control.css';
-
-@layer xihan.motion {
-  /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
-  @keyframes xh-switch-rotate {
-    to {
-      transform: rotate(1turn);
-    }
-  }
-}
+@import '../family/loading-ring.css';
 
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
@@ -41,9 +35,9 @@
     --xh-_switch-track-bg-pressed: var(--xh-switch-bg-pressed, var(--xh-_switch-track-bg));
     --xh-_switch-fg: var(--xh-switch-fg, var(--xh-fg-default));
 
-    /* 轨道接 Action Control text 档（§9.1 定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+    /* 轨道接 Action Control text 档（定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
        焦点环与过渡由家族配方给，这里只把轨道的私有槽映射到桥接槽。轨道没有实描边（边界以内描边画，不吃行程），
-       边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（§7.2 阶梯只给按下） */
+       边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（阶梯只给按下） */
     --xh-action-visual-size: var(--xh-_switch-track-h);
     --xh-action-min-inline-size: calc(var(--xh-_switch-track-h) * 2 - var(--xh-_switch-pad) * 2);
     --xh-action-padding-inline: var(--xh-_switch-pad);
@@ -89,7 +83,7 @@
 
   /* 只读：值仍要读得清、也仍会随表单提交，所以不压对比度、也不借禁用那档灰。
      变的是"动不动得了"：指针不摆手型、按下不缩放不换底（家族的按压块由这里的映射钉回静息面），
-     选中档的轨道退回未选中那一档的中性底（§7.2 交互态的底只从语义面派生），
+     选中档的轨道退回未选中那一档的中性底（交互态的底只从语义面派生），
      滑块收掉那层抬起的投影——投影是"这颗按得动"的信号。与文本框只读那一档同口径（压低底色而非置灰）。
      滑块停在哪一端不受影响，值本身仍由位置这条非颜色通道读出。 */
   [data-scope='switch'][data-part='root'][data-readonly]:not([data-disabled]) {
@@ -126,7 +120,7 @@
     box-shadow: var(--xh-switch-thumb-shadow-readonly, none);
   }
 
-  /* 禁用（§7.2）：不靠 opacity——轨道退回 --xh-bg-subtle 底 + --xh-border-default 内描边，滑块前景置灰；
+  /* 禁用：不靠 opacity——轨道退回 --xh-bg-subtle 底 + --xh-border-default 内描边，滑块前景置灰；
      选中的禁用轨道同样退回中性面，值由滑块位置读出。面与手型由家族的禁用块按映射给 */
   [data-scope='switch'][data-part='root'][data-disabled] {
     --xh-_switch-track-border: var(--xh-switch-border-disabled, var(--xh-border-default));
@@ -163,7 +157,7 @@
     }
   }
 
-  /* 滑块是 raised 抬起面（§5.3 可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
+  /* 滑块是 raised 抬起面（可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
      --xh-elevation-raised 影，无顶光；描边必须在，影只是加成 */
   [data-scope='switch'][data-part='thumb'] {
     position: relative;
@@ -180,18 +174,22 @@
     line-height: 0;
     /* 状态切换只动位移与表面，按压拉伸另走 inline-size；不使用 transition-all。 */
     transition:
-      translate var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous),
-      inline-size var(--xh-motion-duration-micro) var(--xh-motion-ease-continuous),
+      translate var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      inline-size var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
       box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
+  /* flex 的 inline-start 随书写方向翻转，物理 translate 乘方向符号跟着反向，checked 才始终走到 inline-end；
+     符号按就近的 dir 继承，rtl 页面里局部写回 ltr 的开关照 ltr 走 */
   [data-scope='switch'][data-part='thumb'][data-state='checked'] {
-    translate: var(--xh-_switch-thumb-size) 0;
+    translate: calc(var(--xh-direction-sign) * var(--xh-_switch-thumb-size)) 0;
   }
 
-  /* flex 的 inline-start 会随 dir 翻转，物理 translate 也要反向，checked 才始终走到 inline-end。 */
-  [dir='rtl'] [data-scope='switch'][data-part='thumb'][data-state='checked'] {
-    translate: calc(-1 * var(--xh-_switch-thumb-size)) 0;
+  /* 拖动与松手落定期间位移由连接层逐帧写进内联 translate，位移不能再叠一层过渡；按住拉长与投影照常过渡 */
+  [data-scope='switch'][data-part='thumb']:is([data-dragging], [data-animating]) {
+    transition:
+      inline-size var(--xh-motion-duration-nudge) var(--xh-motion-ease-continuous),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* Naive 同类的橡皮带回执：按住时向行进方向拉长并压平投影，已选中端同步回退同一段，外缘不越出轨道。 */
@@ -203,13 +201,7 @@
 
   [data-scope='switch'][data-part='root'][data-state='checked']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
     [data-scope='switch'][data-part='thumb'] {
-    translate: calc(var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch)) 0;
-  }
-
-  [dir='rtl']
-    [data-scope='switch'][data-part='root'][data-state='checked']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
-    [data-scope='switch'][data-part='thumb'] {
-    translate: calc(-1 * (var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch))) 0;
+    translate: calc(var(--xh-direction-sign) * (var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch))) 0;
   }
 
   /* 禁用滑块收掉抬起影、前景置灰；描边与底保持，滑块仍是一块读得出位置的实体 */
@@ -227,19 +219,22 @@
     --xh-action-cursor-focus-visible: progress;
   }
 
-  [data-scope='switch'][data-part='thumb'][data-loading]::after {
+  /* 滑块里那枚环由加载环配方画在 ::before 上（连接层投影 data-xh-loading-ring），随 data-loading 淡入淡出、
+     转与停；起始边取强调色、转速认使用者槽。环叠在滑块正中那一格，不挤开作者放进滑块的图形 */
+  [data-scope='switch'][data-part='thumb'] {
+    --xh-_loading-ring-fg: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
+    --xh-_loading-ring-duration: var(--xh-switch-loading-duration, var(--xh-motion-loop-spin));
+  }
+
+  [data-scope='switch'][data-part='thumb']::before {
     content: '';
+    grid-area: 1 / 1;
     inline-size: 60%;
     block-size: 60%;
-    border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-    /* 加载环是等宽高的圆（§6.3 全部加载环取 circle） */
-    border-radius: var(--xh-shape-circle);
-    animation: xh-switch-rotate var(--xh-switch-loading-duration, var(--xh-spin-duration)) var(--xh-motion-ease-loop) infinite;
   }
 
   /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox 的标签、checkbox-group 的条目同一副样子 ——
-     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（§6.4 控件字号随档）；
+     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（控件字号随档）；
      行高取正文档，长文字可以自然换行 */
   [data-scope='switch'][data-part='label'] {
     --xh-_switch-label-font-size: var(--xh-control-font-md);
@@ -261,7 +256,7 @@
     --xh-_switch-label-font-size: var(--xh-control-font-lg);
   }
 
-  /* 禁用标签色统一 --xh-fg-subtle（§6.4） */
+  /* 禁用标签色统一 --xh-fg-subtle */
   [data-scope='switch'][data-part='label'][data-disabled] {
     color: var(--xh-switch-label-fg-disabled, var(--xh-fg-subtle));
     cursor: not-allowed;
@@ -291,23 +286,12 @@
     [data-scope='switch'][data-part='root'] {
       --xh-_switch-thumb-press-stretch: var(--xh-motion-distance-sm);
     }
-
-    [data-scope='switch'][data-part='thumb'][data-loading]::after {
-      border-style: dotted;
-      border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-      animation: none;
-    }
   }
 
   :where([data-motion='reduce']) [data-scope='switch'][data-part='root'] {
     --xh-_switch-thumb-press-stretch: var(--xh-motion-distance-sm);
   }
 
-  :where([data-motion='reduce']) [data-scope='switch'][data-part='thumb'][data-loading]::after {
-    border-style: dotted;
-    border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-    animation: none;
-  }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
@@ -363,14 +347,5 @@
       box-shadow: none;
     }
 
-    /* 打印：动画会被定格在任意一帧——转了一半的圈、扫到一半的微光。这里换成静止的表达，
-       取值与减弱动效那一档相同。两档各写一块、不并进一条媒体查询列表：减弱动效另有一份
-       :where([data-motion='reduce']) 的钩子版本与它成对，打印没有对应的钩子可配，
-       并成一条之后这层配对关系在文本上就断了。 */
-    [data-scope='switch'][data-part='thumb'][data-loading]::after {
-      border-style: dotted;
-      border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
-      animation: none;
-    }
   }
 }