@xihan-ui/styles 3.1.0 → 3.2.0

package/dist/css/switch.css

@@ -0,0 +1,351 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* 定义 switch 样式。 */
+
+/* 共享关键帧由 family/motion.css 提供，本皮肤 @import 它，单独引入仍成立。 */
+@import '../family/motion.css';
+@import '../family/action-control.css';
+@import '../family/loading-ring.css';
+
+@layer xihan.components {
+  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
+  .xh-scope-switch {
+    --xh-switch-skin: 1;
+  }
+
+  .xh-scope-switch[data-part='root'] {
+    /* 尺寸档只换轨道高度这一个私有槽，其余几何都从它算出来：
+       滑块边长 = 轨道高 − 两条留白，轨道宽 = 两倍轨道高 − 两条留白，滑块行程因此正好等于自身边长 */
+    --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));
+
+    /* 轨道接 Action Control text 档（定尺轨道）：悬停 / 按下 / 禁用面、0.97 缩放与换底、粗指针热区、
+       焦点环与过渡由家族配方给，这里只把轨道的私有槽映射到桥接槽。轨道没有实描边（边界以内描边画，不吃行程），
+       边位映射 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);
+    --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);
+    padding: var(--xh-_switch-pad);
+    border-width: 0;
+  }
+
+  .xh-scope-switch[data-part='root'][data-state='checked'] {
+    --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)));
+  }
+
+  /* 只读：值仍要读得清、也仍会随表单提交，所以不压对比度、也不借禁用那档灰。
+     变的是"动不动得了"：指针不摆手型、按下不缩放不换底（家族的按压块由这里的映射钉回静息面），
+     选中档的轨道退回未选中那一档的中性底（交互态的底只从语义面派生），
+     滑块收掉那层抬起的投影——投影是"这颗按得动"的信号。与文本框只读那一档同口径（压低底色而非置灰）。
+     滑块停在哪一端不受影响，值本身仍由位置这条非颜色通道读出。 */
+  .xh-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;
+  }
+
+  .xh-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']) .xh-scope-switch[data-part='root'][data-state='unchecked'] {
+    --xh-_switch-track-border: var(--xh-switch-border, var(--xh-border-strong));
+  }
+
+  :where([data-contrast='more'])
+    .xh-scope-switch[data-part='root'][data-readonly][data-state='checked'] {
+    --xh-_switch-track-border: var(--xh-switch-border-checked-readonly, var(--xh-border-strong));
+  }
+
+  /* 校验失败排在状态与对比轴之后：只把轨道内描边换成警示色，不改轨道几何。 */
+  .xh-scope-switch[data-part='root'][data-invalid] {
+    --xh-_switch-track-border: var(--xh-switch-border-invalid, var(--xh-border-invalid));
+  }
+
+  .xh-scope-switch[data-part='root'][data-readonly] .xh-scope-switch[data-part='thumb'] {
+    box-shadow: var(--xh-switch-thumb-shadow-readonly, none);
+  }
+
+  /* 禁用：不靠 opacity——轨道退回 --xh-bg-subtle 底 + --xh-border-default 内描边，滑块前景置灰；
+     选中的禁用轨道同样退回中性面，值由滑块位置读出。面与手型由家族的禁用块按映射给 */
+  .xh-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));
+  }
+
+  /* —— 尺寸 —— */
+  /* 缺省档写在上面的基础规则里 */
+  .xh-scope-switch[data-part='root'][data-size='sm'] {
+    --xh-_switch-track-h: var(--xh-switch-track-h-sm);
+  }
+
+  .xh-scope-switch[data-part='root'][data-size='lg'] {
+    --xh-_switch-track-h: var(--xh-switch-track-h-lg);
+  }
+
+  /* 鼠标落点：轨道只有二十来个像素高，命中区靠一枚绝对定位的伪元素往外扩，
+     轨道本身一动不动——把轨道加高会改掉整条开关的比例。常态外扩 4px，最矮的 sm 档由 18px 到 26px。 */
+  .xh-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) {
+    .xh-scope-switch[data-part='root']::after {
+      inset-block: 50% auto;
+      inset-inline: 50% auto;
+      min-inline-size: 44px;
+    }
+  }
+
+  /* 滑块是 raised 抬起面（可拖起部件，逐部件登记）：--xh-bg-surface-raised 底 + --xh-border-default 描边 +
+     --xh-elevation-raised 影，无顶光；描边必须在，影只是加成 */
+  .xh-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: 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));
+    line-height: 0;
+    /* 状态切换只动位移与表面，按压拉伸另走 inline-size；不使用 transition-all。 */
+    transition:
+      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 走 */
+  .xh-scope-switch[data-part='thumb'][data-state='checked'] {
+    translate: calc(var(--xh-direction-sign) * var(--xh-_switch-thumb-size)) 0;
+  }
+
+  /* 拖动与松手落定期间位移由连接层逐帧写进内联 translate，位移不能再叠一层过渡；按住拉长与投影照常过渡 */
+  .xh-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 同类的橡皮带回执：按住时向行进方向拉长并压平投影，已选中端同步回退同一段，外缘不越出轨道。 */
+  .xh-scope-switch[data-part='root']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
+    .xh-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);
+  }
+
+  .xh-scope-switch[data-part='root'][data-state='checked']:not([data-disabled]):not([data-readonly]):not([data-loading]):is(:active, [data-pressed])
+    .xh-scope-switch[data-part='thumb'] {
+    translate: calc(var(--xh-direction-sign) * (var(--xh-_switch-thumb-size) - var(--xh-_switch-thumb-press-stretch))) 0;
+  }
+
+  /* 禁用滑块收掉抬起影、前景置灰；描边与底保持，滑块仍是一块读得出位置的实体 */
+  .xh-scope-switch[data-part='root'][data-disabled] .xh-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，这里只换各态手型 */
+  .xh-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;
+  }
+
+  /* 滑块里那枚环由加载环配方画在 ::before 上（连接层投影 data-xh-loading-ring），随 data-loading 淡入淡出、
+     转与停；起始边取强调色、转速认使用者槽。环叠在滑块正中那一格，不挤开作者放进滑块的图形 */
+  .xh-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));
+  }
+
+  .xh-scope-switch[data-part='thumb']::before {
+    content: '';
+    grid-area: 1 / 1;
+    inline-size: 60%;
+    block-size: 60%;
+  }
+
+  /* —— 带文字的整行：<label> 包住控件与文字，与 checkbox 的标签、checkbox-group 的条目同一副样子 ——
+     文字是控件自己的文字，字号随 size 档取 --xh-control-font-*（控件字号随档）；
+     行高取正文档，长文字可以自然换行 */
+  .xh-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-_switch-label-font-size));
+    line-height: var(--xh-switch-label-leading, var(--xh-leading-normal));
+    cursor: pointer;
+  }
+
+  .xh-scope-switch[data-part='label'][data-size='sm'] {
+    --xh-_switch-label-font-size: var(--xh-control-font-sm);
+  }
+
+  .xh-scope-switch[data-part='label'][data-size='lg'] {
+    --xh-_switch-label-font-size: var(--xh-control-font-lg);
+  }
+
+  /* 禁用标签色统一 --xh-fg-subtle */
+  .xh-scope-switch[data-part='label'][data-disabled] {
+    color: var(--xh-switch-label-fg-disabled, var(--xh-fg-subtle));
+    cursor: not-allowed;
+  }
+
+  /* label 没有独立的 readonly/loading 状态属性，现读里面真实的轨道状态，不复制一套业务状态。 */
+  .xh-scope-switch[data-part='label']:has(
+    .xh-scope-switch[data-part='root'][data-readonly]:not([data-disabled])
+  ) {
+    cursor: default;
+  }
+
+  .xh-scope-switch[data-part='label']:has(
+    .xh-scope-switch[data-part='root'][data-loading]:not([data-disabled])
+  ) {
+    cursor: progress;
+  }
+
+  .xh-scope-switch[data-part='text'] {
+    color: inherit;
+    user-select: none;
+  }
+
+  /* 减少动效：圆环停下并整圈换成虚线，静止的形状仍然读得出"还没好"。
+     两条规则是同一件事的两个触发条件：系统偏好与作者打的 data-motion */
+  @media (prefers-reduced-motion: reduce) {
+    .xh-scope-switch[data-part='root'] {
+      --xh-_switch-thumb-press-stretch: var(--xh-motion-distance-sm);
+    }
+  }
+
+  :where([data-motion='reduce']) .xh-scope-switch[data-part='root'] {
+    --xh-_switch-thumb-press-stretch: var(--xh-motion-distance-sm);
+  }
+
+
+  /* 声明过任何 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去。
+     写在文件末尾：兜底必须排在该部件所有 display 声明之后 */
+  .xh-scope-switch[data-part='root'][hidden],
+  .xh-scope-switch[data-part='thumb'][hidden],
+  .xh-scope-switch[data-part='label'][hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    /* 系统会丢弃 box-shadow：轨道改用内收 outline，滑块用真实边框保住两层几何。 */
+    .xh-scope-switch[data-part='root'] {
+      outline: var(--xh-stroke-thin) solid CanvasText;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+    }
+
+    .xh-scope-switch[data-part='root'][data-disabled] {
+      outline-color: GrayText;
+    }
+
+    /* 按下：家族的 forced-colors 按压块把轨道底换成 Highlight，这里不再另画 */
+    .xh-scope-switch[data-part='root'][data-readonly] {
+      outline-style: dashed;
+    }
+
+    .xh-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);
+    }
+
+    .xh-scope-switch[data-part='thumb'] {
+      border-color: CanvasText;
+      box-shadow: none;
+    }
+  }
+
+  @media print {
+    /* 打印默认丢底色与投影：轨道与滑块都只有一块底，落到纸上整条开关消失，开与关无从读起。
+       轨道补一圈实边把形状画出来，滑块补一圈实边把它停在哪一端画出来——
+       开与关本来就由滑块的位置读出，位置这条通道在纸上仍然成立。
+       轨道走 outline 而不是 border：这条盒子的内衬与滑块行程都从轨道高算出来，
+       加一条实边会把行程改掉。 */
+    .xh-scope-switch[data-part='root'] {
+      outline: var(--xh-stroke-thin) solid currentColor;
+      outline-offset: calc(-1 * var(--xh-stroke-thin));
+      box-shadow: none;
+    }
+
+    .xh-scope-switch[data-part='thumb'] {
+      border: var(--xh-stroke-thin) solid currentColor;
+      box-shadow: none;
+    }
+
+  }
+}