@xihan-ui/styles 1.0.0 → 2.0.0

package/css/switch.css

@@ -1,3 +1,12 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 switch 样式。 */
+
+@import '../family/action-control.css';
+
 @layer xihan.motion {
   /* 转圈的关键帧定义在本文件里：引用别处文件的动画名时那份文件不一定在场，动画会静默不跑 */
   @keyframes xh-switch-rotate {
@@ -19,40 +28,110 @@
     --xh-_switch-track-h: var(--xh-switch-track-h-md);
     --xh-_switch-pad: var(--xh-space-0_5);
     --xh-_switch-thumb-size: calc(var(--xh-_switch-track-h) - var(--xh-_switch-pad) * 2);
+    --xh-_switch-thumb-press-stretch: var(--xh-switch-thumb-press-stretch, var(--xh-motion-distance-sm));
 
     /* 选中态轨道色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的品牌色 */
     --xh-_switch-accent: var(--xh-_tone, var(--xh-bg-brand));
+    /* 轨道边界以内描边表达，不吃掉滑块行程；checked / readonly / invalid / disabled 只换这一支色。 */
+    --xh-_switch-track-border: var(--xh-switch-border, var(--xh-border-control));
+    /* 轨道的面：未选中是 --xh-bg-subtle-active（300）的实体字段控件面；checked / readonly / disabled 换这一支。
+       静息已是 300，中性阶梯再无更深一档可换：按下的底缺省仍是轨道静息面（使用者可经 --xh-switch-bg-pressed
+       另给），换面的通道由下面滑块的橡皮带拉伸与压平投影承担；选中轨道按下换到语气的 active 档 */
+    --xh-_switch-track-bg: var(--xh-switch-bg, var(--xh-bg-subtle-active));
+    --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));
 
-    position: relative;
-    display: inline-flex;
-    align-items: center;
+    /* 轨道接 Action Control text 档（§9.1 定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+       焦点环与过渡由家族配方给，这里只把轨道的私有槽映射到桥接槽。轨道没有实描边（边界以内描边画，不吃行程），
+       边位映射 transparent 并把 border 宽度归零；内描边经 shadow 通道各态同一支。悬停不换面（§7.2 阶梯只给按下） */
+    --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);
+    --xh-action-gap: 0;
+    --xh-action-radius: var(--xh-switch-radius, var(--xh-shape-pill));
+    --xh-action-bg-rest: var(--xh-_switch-track-bg);
+    --xh-action-bg-hover: var(--xh-_switch-track-bg);
+    --xh-action-bg-pressed: var(--xh-_switch-track-bg-pressed);
+    --xh-action-bg-focus-visible: var(--xh-_switch-track-bg);
+    --xh-action-bg-disabled: var(--xh-_switch-track-bg);
+    --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;
+    --xh-action-fg-rest: var(--xh-_switch-fg);
+    --xh-action-fg-hover: var(--xh-_switch-fg);
+    --xh-action-fg-pressed: var(--xh-_switch-fg);
+    --xh-action-fg-focus-visible: var(--xh-_switch-fg);
+    --xh-action-fg-disabled: var(--xh-_switch-fg);
+    --xh-action-shadow-rest: inset 0 0 0 var(--xh-stroke-thin) var(--xh-_switch-track-border);
+    --xh-action-shadow-hover: inset 0 0 0 var(--xh-stroke-thin) var(--xh-_switch-track-border);
+    --xh-action-shadow-pressed: inset 0 0 0 var(--xh-stroke-thin) var(--xh-_switch-track-border);
+    --xh-action-shadow-focus-visible: inset 0 0 0 var(--xh-stroke-thin) var(--xh-_switch-track-border);
+    --xh-action-shadow-disabled: inset 0 0 0 var(--xh-stroke-thin) var(--xh-_switch-track-border);
+    /* 内收环压在实体轨道上，直接取轨道的配对前景：未选中与只读 checked 的中性轨道配 fg-default，
+       选中的语气轨道配它的 on 色 */
+    --xh-action-ring-color-focus-visible: currentColor;
+
+    /* 滑块贴 inline-start 起步，checked 才位移到另一端；家族的居中排布在轨道上不成立 */
+    justify-content: start;
     inline-size: calc(var(--xh-_switch-track-h) * 2 - var(--xh-_switch-pad) * 2);
-    block-size: var(--xh-_switch-track-h);
     padding: var(--xh-_switch-pad);
-    border: 0;
-    border-radius: var(--xh-switch-radius, var(--xh-shape-pill));
-    background: var(--xh-switch-bg, var(--xh-bg-subtle-active));
-    cursor: pointer;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    border-width: 0;
   }
 
   [data-scope='switch'][data-part='root'][data-state='checked'] {
-    background: var(--xh-switch-bg-checked, var(--xh-_switch-accent));
+    --xh-_switch-track-border: var(--xh-switch-border-checked, var(--xh-_switch-accent));
+    --xh-_switch-track-bg: var(--xh-switch-bg-checked, var(--xh-_switch-accent));
+    --xh-_switch-track-bg-pressed: var(--xh-switch-bg-checked-pressed, var(--xh-_tone-active, var(--xh-bg-brand-active)));
+    --xh-_switch-fg: var(--xh-switch-fg-checked, var(--xh-_tone-on, var(--xh-fg-on-brand)));
+  }
+
+  /* 只读：值仍要读得清、也仍会随表单提交，所以不压对比度、也不借禁用那档灰。
+     变的是"动不动得了"：指针不摆手型、按下不缩放不换底（家族的按压块由这里的映射钉回静息面），
+     选中档的轨道退回未选中那一档的中性底（§7.2 交互态的底只从语义面派生），
+     滑块收掉那层抬起的投影——投影是"这颗按得动"的信号。与文本框只读那一档同口径（压低底色而非置灰）。
+     滑块停在哪一端不受影响，值本身仍由位置这条非颜色通道读出。 */
+  [data-scope='switch'][data-part='root'][data-readonly]:not([data-disabled]) {
+    --xh-_switch-track-bg-pressed: var(--xh-_switch-track-bg);
+    --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;
+  }
+
+  [data-scope='switch'][data-part='root'][data-readonly][data-state='checked'] {
+    --xh-_switch-track-border: var(--xh-switch-border-checked-readonly, var(--xh-border-control));
+    --xh-_switch-track-bg: var(--xh-switch-bg-checked-readonly, var(--xh-bg-subtle-active));
+    --xh-_switch-fg: var(--xh-switch-fg-checked-readonly, var(--xh-fg-default));
+  }
+
+  /* 高对比轴把中性状态的边界提到 strong；实心语气色 checked 仍由自己的色相边界表达。 */
+  :where([data-contrast='more']) [data-scope='switch'][data-part='root'][data-state='unchecked'] {
+    --xh-_switch-track-border: var(--xh-switch-border, var(--xh-border-strong));
   }
 
-  /* 校验失败：轨道描一圈警示色。轨道本身没有边框，这里补出来 */
+  :where([data-contrast='more'])
+    [data-scope='switch'][data-part='root'][data-readonly][data-state='checked'] {
+    --xh-_switch-track-border: var(--xh-switch-border-checked-readonly, var(--xh-border-strong));
+  }
+
+  /* 校验失败排在状态与对比轴之后：只把轨道内描边换成警示色，不改轨道几何。 */
   [data-scope='switch'][data-part='root'][data-invalid] {
-    box-shadow: inset 0 0 0 var(--xh-stroke-thin) var(--xh-switch-border-invalid, var(--xh-border-invalid));
+    --xh-_switch-track-border: var(--xh-switch-border-invalid, var(--xh-border-invalid));
   }
 
-  [data-scope='switch'][data-part='root'][data-disabled] {
-    cursor: not-allowed;
-    opacity: var(--xh-state-disabled-opacity);
+  [data-scope='switch'][data-part='root'][data-readonly] [data-scope='switch'][data-part='thumb'] {
+    box-shadow: var(--xh-switch-thumb-shadow-readonly, none);
   }
 
-  [data-scope='switch'][data-part='root']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
+  /* 禁用（§7.2）：不靠 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));
+    --xh-_switch-track-bg: var(--xh-switch-bg-disabled, var(--xh-bg-subtle));
+    --xh-_switch-fg: var(--xh-switch-fg-disabled, var(--xh-fg-disabled));
   }
 
   /* —— 尺寸 —— */
@@ -65,27 +144,87 @@
     --xh-_switch-track-h: var(--xh-switch-track-h-lg);
   }
 
+  /* 鼠标落点：轨道只有二十来个像素高，命中区靠一枚绝对定位的伪元素往外扩，
+     轨道本身一动不动——把轨道加高会改掉整条开关的比例。常态外扩 4px，最矮的 sm 档由 18px 到 26px。 */
+  [data-scope='switch'][data-part='root']::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--xh-space-1));
+  }
+
+  /* 粗指针：家族 text 档的 ::after 把块轴补到 44px、铺满轨道宽并以 -50% 平移居中，行内轴（md 40px）
+     这里再补到 44px。起点必须交还家族的 50%：上面那条 inset 负值特指度更高，留着的话盒的左上角
+     被钉在 -4px、再被家族的平移拉走半个盒，热区的中心落到轨道左上角外面，右半条开关摸不着 */
+  @media (pointer: coarse) {
+    [data-scope='switch'][data-part='root']::after {
+      inset-block: 50% auto;
+      inset-inline: 50% auto;
+      min-inline-size: 44px;
+    }
+  }
+
+  /* 滑块是 raised 抬起面（§5.3 可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
+     --xh-elevation-raised 影，无顶光；描边必须在，影只是加成 */
   [data-scope='switch'][data-part='thumb'] {
+    position: relative;
+    display: grid;
+    flex: none;
+    place-items: center;
     inline-size: var(--xh-_switch-thumb-size);
     block-size: var(--xh-_switch-thumb-size);
-    border-radius: var(--xh-switch-thumb-radius, var(--xh-shape-pill));
-    background: var(--xh-switch-thumb, var(--xh-bg-canvas));
+    border: var(--xh-stroke-thin) solid var(--xh-switch-thumb-border, var(--xh-border-default));
+    border-radius: var(--xh-switch-thumb-radius, var(--xh-shape-circle));
+    background: var(--xh-switch-thumb, var(--xh-bg-surface-raised));
+    color: var(--xh-switch-thumb-fg, var(--xh-fg-default));
     box-shadow: var(--xh-switch-thumb-shadow, var(--xh-elevation-raised));
-    transition: translate var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
+    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),
+      box-shadow var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   [data-scope='switch'][data-part='thumb'][data-state='checked'] {
     translate: var(--xh-_switch-thumb-size) 0;
   }
 
-  /* 提交中：指针挂起、滑块里转圈；不是禁用，焦点与对比度都保持 */
-  [data-scope='switch'][data-part='root'][data-loading] {
-    cursor: wait;
+  /* 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;
   }
 
-  [data-scope='switch'][data-part='thumb'][data-loading] {
-    display: grid;
-    place-items: center;
+  /* Naive 同类的橡皮带回执：按住时向行进方向拉长并压平投影，已选中端同步回退同一段，外缘不越出轨道。 */
+  [data-scope='switch'][data-part='root']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
+    [data-scope='switch'][data-part='thumb'] {
+    inline-size: calc(var(--xh-_switch-thumb-size) + var(--xh-_switch-thumb-press-stretch));
+    box-shadow: var(--xh-switch-thumb-shadow-pressed, none);
+  }
+
+  [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;
+  }
+
+  /* 禁用滑块收掉抬起影、前景置灰；描边与底保持，滑块仍是一块读得出位置的实体 */
+  [data-scope='switch'][data-part='root'][data-disabled] [data-scope='switch'][data-part='thumb'] {
+    color: var(--xh-switch-thumb-fg-disabled, var(--xh-fg-disabled));
+    box-shadow: var(--xh-switch-thumb-shadow-disabled, none);
+  }
+
+  /* 提交中：指针摆「在途」、滑块里转圈；不是禁用，焦点与对比度都保持。
+     家族按压块已排除 data-loading，这里只换各态手型 */
+  [data-scope='switch'][data-part='root'][data-loading]:not([data-disabled]) {
+    --xh-action-cursor-rest: progress;
+    --xh-action-cursor-hover: progress;
+    --xh-action-cursor-pressed: progress;
+    --xh-action-cursor-focus-visible: progress;
   }
 
   [data-scope='switch'][data-part='thumb'][data-loading]::after {
@@ -93,27 +232,54 @@
     inline-size: 60%;
     block-size: 60%;
     border: var(--xh-stroke-thin) solid transparent;
-    border-block-start-color: var(--xh-switch-loading-fg, var(--xh-bg-brand));
-    border-radius: var(--xh-shape-pill);
-    animation: xh-switch-rotate var(--xh-switch-loading-duration, var(--xh-spin-duration)) linear infinite;
+    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-group 的条目同一副样子 —— */
+  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox 的标签、checkbox-group 的条目同一副样子 ——
+     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（§6.4 控件字号随档）；
+     行高取正文档，长文字可以自然换行 */
   [data-scope='switch'][data-part='label'] {
+    --xh-_switch-label-font-size: var(--xh-control-font-md);
+
     display: inline-flex;
     align-items: center;
     gap: var(--xh-switch-label-gap, var(--xh-control-gap-md));
     color: var(--xh-switch-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-switch-label-font-size, var(--xh-text-label-size));
-    line-height: var(--xh-leading-none);
+    font-size: var(--xh-switch-label-font-size, var(--xh-_switch-label-font-size));
+    line-height: var(--xh-switch-label-leading, var(--xh-leading-normal));
     cursor: pointer;
   }
 
+  [data-scope='switch'][data-part='label'][data-size='sm'] {
+    --xh-_switch-label-font-size: var(--xh-control-font-sm);
+  }
+
+  [data-scope='switch'][data-part='label'][data-size='lg'] {
+    --xh-_switch-label-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 禁用标签色统一 --xh-fg-subtle（§6.4） */
   [data-scope='switch'][data-part='label'][data-disabled] {
-    color: var(--xh-switch-label-fg-disabled, var(--xh-fg-disabled));
+    color: var(--xh-switch-label-fg-disabled, var(--xh-fg-subtle));
     cursor: not-allowed;
   }
 
+  /* label 没有独立的 readonly/loading 状态属性，现读里面真实的轨道状态，不复制一套业务状态。 */
+  [data-scope='switch'][data-part='label']:has(
+    [data-scope='switch'][data-part='root'][data-readonly]:not([data-disabled])
+  ) {
+    cursor: default;
+  }
+
+  [data-scope='switch'][data-part='label']:has(
+    [data-scope='switch'][data-part='root'][data-loading]:not([data-disabled])
+  ) {
+    cursor: progress;
+  }
+
   [data-scope='switch'][data-part='text'] {
     color: inherit;
     user-select: none;
@@ -122,23 +288,89 @@
   /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
      两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
   @media (prefers-reduced-motion: reduce) {
+    [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-bg-brand));
+      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-bg-brand));
+    border-color: var(--xh-switch-loading-fg, var(--xh-_switch-accent));
     animation: none;
   }
 
   /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
      写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
   [data-scope='switch'][data-part='root'][hidden],
+  [data-scope='switch'][data-part='thumb'][hidden],
   [data-scope='switch'][data-part='label'][hidden] {
     display: none;
   }
+
+  @media (forced-colors: active) {
+    /* 系统会丢弃 box-shadow：轨道改用内收 outline，滑块用真实边框保住两层几何。 */
+    [data-scope='switch'][data-part='root'] {
+      outline: var(--xh-stroke-thin) solid CanvasText;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+
+    [data-scope='switch'][data-part='root'][data-disabled] {
+      outline-color: GrayText;
+    }
+
+    /* 按下：家族的 forced-colors 按压块把轨道底换成 Highlight，这里不再另画 */
+    [data-scope='switch'][data-part='root'][data-readonly] {
+      outline-style: dashed;
+    }
+
+    [data-scope='switch'][data-part='root'][data-readonly]:focus-visible {
+      outline-width: var(--xh-ring-width);
+      outline-style: solid;
+      outline-color: Highlight;
+      outline-offset: var(--xh-ring-offset);
+    }
+
+    [data-scope='switch'][data-part='thumb'] {
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色与投影：轨道与滑块都只有一块底，落到纸上整条开关消失，开与关无从读起。
+       轨道补一圈实边把形状画出来，滑块补一圈实边把它停在哪一端画出来——
+       开与关本来就由滑块的位置读出，位置这条通道在纸上仍然成立。
+       轨道走 outline 而不是 border：这条盒子的内衬与滑块行程都从轨道高算出来，
+       加一条实边会把行程改掉。 */
+    [data-scope='switch'][data-part='root'] {
+      outline: var(--xh-stroke-thin) solid currentColor;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+      box-shadow: none;
+    }
+
+    [data-scope='switch'][data-part='thumb'] {
+      border: var(--xh-stroke-thin) solid currentColor;
+      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;
+    }
+  }
 }