@endfield-ui/react 1.1.0 → 1.2.0

package/src/components/tag-input/TagInput.tsx

@@ -1,6 +1,7 @@
 import {
   useEffect,
   useId,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -203,9 +204,11 @@ export function TagInput({
     return () => clearTimeout(timer);
   }, [flash]);
 
-  // 删掉一个之后焦点落到哪：等这一次渲染完，旁边那个小块才是"旁边那个"
+  // 删掉一个之后焦点落到哪：等这一次渲染落到页面上，旁边那个小块才是"旁边那个"，当场交出去。
+  // 不用 useEffect：它晚一拍，上一次渲染留下的那一份可能在这次删除之后才补跑——
+  // 看到的还是删之前的那一排，焦点留在马上要走的那一块上，随后掉到 body
   const pendingFocus = useRef<number | "input" | null>(null);
-  useEffect(() => {
+  useLayoutEffect(() => {
     const target = pendingFocus.current;
     if (target === null) return;
     pendingFocus.current = null;

package/src/components/toast/Toast.tsx

@@ -178,9 +178,10 @@ function ToastHost({ placement, label, closeLabel, children }: ToastHostProps) {
                 data-theme="dark"
                 className={cn(
                   "pointer-events-auto absolute left-1/2 w-max max-w-full",
-                  // 边线是给暗色页面的：那里黑底和页面几乎一样深，要靠它把提示勾出来。
-                  // 亮色页面上它和提示的底几乎同色，看不出来
-                  "border border-line bg-black/80 text-base leading-[1.4] text-white",
+                  // 暗色页面上黑底和页面只差一档，靠环境阴影分开
+                  "bg-black/80 shadow-sm text-base leading-[1.4] text-white",
+                  // 高对比模式下系统把阴影关掉、底色换成页面色，提示就没有边界了：补一圈线
+                  "forced-colors:border forced-colors:border-[CanvasText]",
                   // 三样各走各的：淡入淡出 200ms；进场的位移 300ms；没划够就松手，滑回原位 200ms。
                   // 拖动中基元把过渡整个关掉，位置贴着手指
                   "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]",

package/src/index.ts

@@ -63,6 +63,7 @@ export * from "./components/skeleton";
 export * from "./components/slider";
 export * from "./components/sparkline";
 export * from "./components/spinner";
+export * from "./components/splash-screen";
 export * from "./components/stat";
 export * from "./components/stepper";
 export * from "./components/steps";

package/src/styles/README.md

@@ -67,7 +67,10 @@ Game 实机风格的样式不在这个目录里，也不在主样式里：源码
 
 这些类只画形状。什么东西可以切角、哪里能放斜纹，见 [docs/design/elements](../../../../docs/design/elements/corner-and-wedge.md) 各篇的"什么时候用"。预编译的 `styles.css` 里只有组件自己用到的那几个；不用 Tailwind 的项目用对应的装饰组件。
 
-文件末尾还有一个自定义变体 `choice-diamond:`，在祖先带 `data-choice="diamond"` 时生效，复选与单选靠它整体换成菱形符号。
+文件末尾还有两个自定义变体：
+
+- `choice-diamond:`，在祖先带 `data-choice="diamond"` 时生效，复选与单选靠它整体换成菱形符号。
+- `cq-portrait:`，在最近的尺寸容器（`container-type: size`）高大于宽时生效。开屏页靠它换成竖排——看的是它所在的那一块，不是视口。
 
 ## 注意
 

package/src/styles/theme.css

@@ -374,6 +374,7 @@
   --animate-turn-in: ef-turn-in 300ms ease-out both;
   --animate-fade-in: ef-fade-in 300ms ease-out both;
   --animate-indeterminate: ef-indeterminate 1.2s linear infinite alternate;
+  --animate-indeterminate-y: ef-indeterminate-y 1.2s linear infinite alternate;
   --animate-pulse: ef-pulse 2s ease-in-out infinite;
   --animate-bracket-in: ef-bracket-in 200ms ease-out both;
   --animate-shift-in: ef-shift-in 300ms ease-out both;
@@ -507,6 +508,16 @@
     }
   }
 
+  /* 同上，竖着的轨道：开屏页贴左缘的那根条 */
+  @keyframes ef-indeterminate-y {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(150%);
+    }
+  }
+
   /* 骨架：很轻的明度往返，不是扫光 */
   @keyframes ef-pulse {
     0%,
@@ -610,6 +621,28 @@
   --color-info: var(--ef-info);
 }
 
+/* ------------------------------------------------------------------ */
+/* 开屏页的进度                                                         */
+/* ------------------------------------------------------------------ */
+
+/*
+ * SplashScreen 把进度写成根上的这两个变量，注册成数值之后才能过渡：条长、读数的位置、
+ * 底图的模糊都由第一个算，读数的数字是第二个（整数，经计数器显示）。两个一起过渡，
+ * 所以这四样天然同拍，半路改值也是从当前的位置折过去。
+ * 不认 @property 的浏览器里它们只是普通变量：值照样对，只是不补间、直接到位。
+ */
+@property --ef-splash-progress {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0;
+}
+
+@property --ef-splash-percent {
+  syntax: "<integer>";
+  inherits: true;
+  initial-value: 0;
+}
+
 /* ------------------------------------------------------------------ */
 /* 主题切换                                                             */
 /* ------------------------------------------------------------------ */

package/src/styles/utilities.css

@@ -240,3 +240,11 @@
 /* ------------------------------------------------------------------ */
 
 @custom-variant choice-diamond (&:where([data-choice="diamond"], [data-choice="diamond"] *));
+
+/* ------------------------------------------------------------------ */
+/* 所在的容器是竖着的（高大于宽）：开屏页据此换成竖排。                  */
+/* 看的是最近的尺寸容器（container-type: size），不是视口——             */
+/* 放进一个框里的开屏页，横竖由那个框说了算                              */
+/* ------------------------------------------------------------------ */
+
+@custom-variant cq-portrait (@container (orientation: portrait));