@xihan-ui/styles 1.0.0 → 2.0.0

package/css/pin-input.css

@@ -1,27 +1,34 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/* PinInput 独立皮肤传递引入字段视觉盒：每一格 input 自身就是 Field Chrome 的 chrome 节点；full bundle 递归去重。 */
+@import '../family/field-chrome.css';
+
 @layer xihan.components {
   /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
   [data-scope='pin-input'] {
     --xh-pin-input-skin: 1;
   }
 
-  /* 与文本框、数字框同一套堆叠：标签一行、格子一行 */
+  /* 与文本框、数字框同一套堆叠：标签一行、格子一行。
+     格子的描边、底、圆角、五态与悬停由 Field Chrome 家族按格子上的 data-variant 生成，皮肤不再声明形态三档 */
   [data-scope='pin-input'][data-part='root'] {
-    /* 尺寸档只换这四个私有槽，标题与格子都从 root 继承它们，换档不必给每个部件各写一条选择器 */
+    /* 尺寸档只换这三个私有槽，格子与分隔都从 root 继承它们，换档不必给每个部件各写一条选择器 */
     --xh-_pin-input-box-size: var(--xh-control-box-md);
     --xh-_pin-input-box-gap: var(--xh-control-gap-md);
     --xh-_pin-input-box-font-size: var(--xh-text-heading-3-size);
-    --xh-_pin-input-label-font-size: var(--xh-control-font-md);
-    /* 形态档只换这三个私有槽，缺省这一份就是描边式（描边 + 画布底） */
-    --xh-_pin-input-box-bg: var(--xh-bg-canvas);
-    --xh-_pin-input-box-border: var(--xh-border-control);
-    --xh-_pin-input-box-border-hover: var(--xh-border-control-hover);
-    /* 聚焦环与填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回原来的取值 */
-    --xh-_pin-input-ring: var(--xh-ring-focus);
+    /* 填满态的强调色随语气走。没写 data-tone 时 --xh-_tone 没被声明，退回品牌色 */
     --xh-_pin-input-accent: var(--xh-_tone, var(--xh-bg-brand));
 
     display: inline-flex;
     flex-direction: column;
     gap: var(--xh-pin-input-gap, var(--xh-space-1));
+    /* 每格都有定宽，一行格子的最小宽度就是这些定宽之和，收缩到边框盒之内不再有余地：
+       不封顶的话整块控件按这个和撑开，比容器宽多少就顶出多少。
+       封到容器那么宽，格子那条收缩才有得可收 */
+    max-inline-size: 100%;
   }
 
   /* 声明了 display 就盖掉了 UA 的 [hidden]{display:none}，收起态得自己还回去 */
@@ -29,35 +36,11 @@
     display: none;
   }
 
-  /* —— 形态 —— */
-  /* 形态只决定颜色怎么用；用哪族颜色由 data-tone 决定。
-     不做 solid：实心填充盖住了"这里能打字"这件事，输入框用不上它 */
-  [data-scope='pin-input'][data-part='root'][data-variant='outline'] {
-    --xh-_pin-input-box-bg: var(--xh-bg-canvas);
-    --xh-_pin-input-box-border: var(--xh-border-control);
-    --xh-_pin-input-box-border-hover: var(--xh-border-control-hover);
-  }
-
-  /* 填充式：底色说明这里是一格输入位，描边让位给底色 */
-  [data-scope='pin-input'][data-part='root'][data-variant='subtle'] {
-    --xh-_pin-input-box-bg: var(--xh-_tone-subtle, var(--xh-bg-subtle));
-    --xh-_pin-input-box-border: transparent;
-    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-  }
-
-  /* 无边框、透明底：静息时格子完全隐入背景，可见反馈全靠悬停描边与聚焦环 */
-  [data-scope='pin-input'][data-part='root'][data-variant='ghost'] {
-    --xh-_pin-input-box-bg: transparent;
-    --xh-_pin-input-box-border: transparent;
-    --xh-_pin-input-box-border-hover: var(--xh-_tone-border, var(--xh-border-control-hover));
-  }
-
   /* —— 尺寸 —— */
   [data-scope='pin-input'][data-part='root'][data-size='sm'] {
     --xh-_pin-input-box-size: var(--xh-control-box-sm);
     --xh-_pin-input-box-gap: var(--xh-control-gap-sm);
     --xh-_pin-input-box-font-size: var(--xh-control-font-lg);
-    --xh-_pin-input-label-font-size: var(--xh-control-font-sm);
   }
 
   /* 格子是正方形，缺省档已经占到控件高度表的顶档，lg 档由顶档加一格间距合成，不另立数值 */
@@ -65,31 +48,79 @@
     --xh-_pin-input-box-size: var(--xh-control-box-lg);
     --xh-_pin-input-box-gap: var(--xh-control-gap-lg);
     --xh-_pin-input-box-font-size: var(--xh-text-heading-2-size);
-    --xh-_pin-input-label-font-size: var(--xh-control-font-lg);
   }
 
   [data-scope='pin-input'][data-part='label'] {
     color: var(--xh-pin-input-label-fg, var(--xh-fg-default));
-    font-size: var(--xh-pin-input-label-font-size, var(--xh-_pin-input-label-font-size));
+    font-size: var(--xh-pin-input-label-font-size, var(--xh-text-label-size));
     font-weight: var(--xh-pin-input-label-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
   }
 
   [data-scope='pin-input'][data-part='label'][data-disabled] {
     color: var(--xh-pin-input-label-fg-disabled, var(--xh-fg-subtle));
   }
 
-  /* 每格是等宽方框：宽高同取一个尺寸，内边距归零。
-     留了内边距，单字符居中后可用宽度不足，中文与全角字符会被挤出框外 */
-  [data-scope='pin-input'][data-part='input'] {
+  /* 分段：连着的几格圈成一段。它只排版，格间距仍由格子自己的相邻兄弟规则给 */
+  [data-scope='pin-input'][data-part='group'] {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  [data-scope='pin-input'][data-part='group'][hidden] {
+    display: none;
+  }
+
+  /* 段间分隔：两段之间的一道短横或圆点，两侧各留一格间距 */
+  [data-scope='pin-input'][data-part='separator'] {
+    display: inline-flex;
     flex: none;
+    align-items: center;
+    justify-content: center;
+    margin-inline: var(--xh-pin-input-separator-gap, var(--xh-_pin-input-box-gap));
+    color: var(--xh-pin-input-separator-fg, var(--xh-fg-muted));
+    font-size: var(--xh-pin-input-separator-font-size, var(--xh-_pin-input-box-font-size));
+    line-height: var(--xh-leading-none);
+    user-select: none;
+  }
+
+  [data-scope='pin-input'][data-part='separator'][hidden] {
+    display: none;
+  }
+
+  [data-scope='pin-input'][data-part='separator'][data-disabled] {
+    color: var(--xh-pin-input-separator-fg-disabled, var(--xh-fg-disabled));
+  }
+
+  /* 每格是等宽方框：它自身就是 Field Chrome 的 chrome 节点，宽高同取一个尺寸，内边距归零。
+     留了内边距，单字符居中后可用宽度不足，中文与全角字符会被挤出框外。
+     组件层只把既有公开槽映射到家族合同；不投影 data-xh-field-input，否则家族会把格子的边框重置掉 */
+  [data-scope='pin-input'][data-part='input'] {
+    --xh-field-control-height: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
+    --xh-field-control-padding-inline: 0;
+    --xh-field-control-gap: 0;
+    --xh-field-control-min-inline-size: 0;
+    --xh-field-control-radius: var(--xh-pin-input-box-radius, var(--xh-shape-control));
+    --xh-field-bg-rest: var(--xh-pin-input-box-bg, var(--xh-_field-variant-bg-rest));
+    --xh-field-bg-hover: var(--xh-pin-input-box-bg-hover, var(--xh-_field-variant-bg-hover));
+    --xh-field-bg-read-only: var(--xh-pin-input-box-bg-readonly, var(--xh-_field-variant-bg-read-only));
+    --xh-field-bg-disabled: var(--xh-pin-input-box-bg-disabled, var(--xh-_field-variant-bg-disabled));
+    --xh-field-fg-rest: var(--xh-pin-input-box-fg, var(--xh-fg-default));
+    --xh-field-border-rest: var(--xh-pin-input-box-border, var(--xh-_field-variant-border-rest));
+    --xh-field-border-hover: var(--xh-pin-input-box-border-hover, var(--xh-_field-variant-border-hover));
+    --xh-field-border-focus: var(--xh-pin-input-box-border-focus, var(--xh-_field-variant-border-focus));
+    --xh-field-border-invalid: var(--xh-pin-input-box-border-invalid, var(--xh-_field-variant-border-invalid));
+    --xh-field-ring-focus: var(--xh-ring-focus);
+    --xh-field-ring-invalid: var(--xh-ring-invalid);
+    --xh-field-shadow-rest: var(--xh-pin-input-box-shadow, none);
+
+    /* 一行放不下时逐格收窄，收不动就整行顶出屏幕。
+       min-inline-size 归零解开表单控件那份按字符数算出来的自动最小宽度。
+       高度不跟着收：它取自控件高度尺，与同一行里别的控件对齐靠的就是这个数。
+       宽度放得下时收窄量为零，格子仍是尺寸档给的那个正方形。 */
+    flex: 0 1 auto;
+    min-inline-size: 0;
     inline-size: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
-    block-size: var(--xh-pin-input-box-size, var(--xh-_pin-input-box-size));
     padding: 0;
-    border: var(--xh-stroke-thin) solid var(--xh-pin-input-box-border, var(--xh-_pin-input-box-border));
-    border-radius: var(--xh-pin-input-box-radius, var(--xh-shape-control));
-    background: var(--xh-pin-input-box-bg, var(--xh-_pin-input-box-bg));
-    color: var(--xh-pin-input-box-fg, var(--xh-fg-default));
     /* 表单控件不继承页面字体，只给字号会让格子用 UA 默认字族 */
     font-family: inherit;
     font-size: var(--xh-pin-input-box-font-size, var(--xh-_pin-input-box-font-size));
@@ -97,7 +128,6 @@
     font-variant-numeric: tabular-nums;
     line-height: var(--xh-leading-none);
     text-align: center;
-    transition: border-color var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
   }
 
   /* 格间距只能长在格子自己身上：包住这一行的容器是作者写的，不在角色表里，
@@ -111,33 +141,19 @@
     color: var(--xh-pin-input-placeholder-fg, var(--xh-fg-subtle));
   }
 
-  /* hover 只在中性态换描边：invalid 正拿边框颜色说事，被 hover 盖掉那条信息就没了 */
-  [data-scope='pin-input'][data-part='input']:hover:not(:disabled, [data-invalid]) {
-    border-color: var(--xh-pin-input-box-border-hover, var(--xh-_pin-input-box-border-hover));
-  }
-
   /* 一行格子长得一模一样，光标那道竖线太细，看不出正在填哪一格：
      当前格必须有明显的环。data-focus 由机器给（它知道谁是当前格），
-     :focus-visible 兜住机器状态还没回流的那一帧，两条同时写不冲突 */
-  [data-scope='pin-input'][data-part='input'][data-focus],
-  [data-scope='pin-input'][data-part='input']:focus-visible {
-    border-color: var(--xh-pin-input-box-border-focus, var(--xh-_tone, var(--xh-border-control-focus)));
-    outline: var(--xh-ring-width) solid var(--xh-_pin-input-ring);
+     家族的 :focus-within 兜住机器状态还没回流的那一帧，两条同时写不冲突。
+     焦点边一律家族的 --xh-border-control-focus，不随 tone */
+  [data-scope='pin-input'][data-part='input'][data-focus] {
+    border-color: var(--xh-pin-input-box-border-focus, var(--xh-_field-variant-border-focus));
+    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
     outline-offset: var(--xh-ring-offset);
   }
 
-  [data-scope='pin-input'][data-part='input'][data-invalid] {
-    border-color: var(--xh-pin-input-box-border-invalid, var(--xh-border-invalid));
-
-    /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
-    --xh-_pin-input-ring: var(--xh-ring-invalid);
-  }
-
-  /* 每格都是原生 disabled 的单体控件（禁用的格子不该能聚焦），所以用 :disabled */
-  [data-scope='pin-input'][data-part='input']:disabled {
-    background: var(--xh-pin-input-box-bg-disabled, var(--xh-bg-subtle));
-    color: var(--xh-fg-disabled);
-    cursor: not-allowed;
+  /* 校验失败时环也跟着变红：两圈等宽相邻却一红一蓝，读的人不知道哪个才是当前状态 */
+  [data-scope='pin-input'][data-part='input'][data-invalid][data-focus] {
+    outline-color: var(--xh-ring-invalid);
   }
 
   /* 填满只代表"格子都有字"，不代表"验证码对"，所以用品牌色而不是成功色收个尾。
@@ -147,6 +163,24 @@
     border-color: var(--xh-pin-input-box-border-complete, var(--xh-_pin-input-accent));
   }
 
+  /* 自动填充：一次性验证码由平台直接灌进这一行格子，引擎顺手给每格强加一套系统色
+     （多数是黄底黑字），盖得过 background 与 color，深色档下就剩一行不跟主题走的黄方块。
+     格子没投影 data-xh-field-input，家族那两条 autofill 命不中，这里自写一份：
+     底改用 inset 阴影铺回来，扩散量 100vmax 填满内容盒；字改用 -webkit-text-fill-color
+     接回来，那是这个态下唯一还听样式表的前景通道。
+     不去拉长 transition 把系统底推迟显现：那只是把它藏起来，减弱动效通道一关过渡就当场露出。
+     两个选择器名分写两条：一条选择器列表里只要有一个名字不被认识，整条规则就被丢弃。
+     底取一支不透明的面令牌而不是家族的形态底：后者在 ghost 档下是透明的，铺一层透明等于没铺。 */
+  [data-scope='pin-input'][data-part='input']:autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-pin-input-box-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-pin-input-box-autofill-fg, var(--xh-fg-default));
+  }
+
+  [data-scope='pin-input'][data-part='input']:-webkit-autofill {
+    box-shadow: inset 0 0 0 100vmax var(--xh-pin-input-box-autofill-bg, var(--xh-bg-canvas));
+    -webkit-text-fill-color: var(--xh-pin-input-box-autofill-fg, var(--xh-fg-default));
+  }
+
   /* 连接层把它写成 type=hidden，UA 自己就不渲染；这里的视觉隐藏是给元素升级前那一瞬兜底
      （作者手写的是一个普通 input，升级完成前它是可见的文本框）。
      刻意不写 display：写了反而会盖掉 UA 对 type=hidden 的收起，把它显出来 */

package/css/pointer.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2021-Present XiHanFun and contributors.
+ * Licensed under the MIT License. See LICENSE in the project root for license information.
+ */
+
+/*
+ * 指针反馈的公共层：全库共用一份。
+ *
+ * 两件事写在这里。
+ *
+ * 一、触摸点按时浏览器画的那层高亮方块。它是继承属性，一条规则打在 [data-scope] 上就覆盖
+ * 库里的每一个节点与它们的后代，不必逐个组件登记。
+ *
+ * 二、禁用态的光标。「这个控件不可用」在库里有三种条件拼写：解剖打出来的 data-disabled、
+ * 原生表单控件的 :disabled、集合条目用的 aria-disabled——三者说的是同一件事，光标也是同一个。
+ * 选择器停在两个属性加一个条件（0,3,0）：与组件皮肤里
+ * [data-scope='x'][data-part='y'][data-disabled] 同级，本份排在全部组件皮肤之前，
+ * 要另画的组件照写即可压过。
+ *
+ * 「在途」不在这里：它是另一件事，光标是 progress，挂在哪个部件上逐个组件不同，
+ * 写成通配会盖到作者自己的内容上（列表外壳、快捷键展示、可调容器都带 data-loading / data-disabled，
+ * 而它们身上的这两个标记说的是「这项行为关掉了」，不是「这个控件不可用」）。
+ *
+ * 排在全部组件皮肤之前：组件不必为了换一个光标把整条规则重写一遍。
+ */
+@layer xihan.components {
+  [data-scope] {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  [data-scope][data-part][data-disabled],
+  [data-scope][data-part]:disabled,
+  [data-scope][data-part][aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}