@endfield-ui/react 0.2.0 → 0.3.0

package/dist/index.d.ts

@@ -578,6 +578,7 @@ type CornerBracketsProps = ComponentProps<"div"> & {
  * 用于矩阵里的单选（物品格、名册卡、图鉴）；列表行用左缘色条，页签用底色，都不用它。
  *
  * 括号画在盒子之外 4px：它所在的容器不能贴着盒子裁切。
+ * 出现时八段短线从角的顶点伸到满长（200ms），消失是直接消失。
  * 括号只是给眼睛看的，选中态另外要有 `aria-selected` / `aria-pressed`。
  */
 export declare function CornerBrackets({ visible, size, className, ...props }: CornerBracketsProps): import("react").JSX.Element;
@@ -1667,7 +1668,7 @@ type ItemOwnProps$2 = {
 };
 type NavMenuItemProps = ItemOwnProps$2 & Omit<ComponentProps<"li">, keyof ItemOwnProps$2>;
 /** 全屏菜单里的一个栏目。 */
-export declare function NavMenuItem({ icon, current, disabled, closeOnClick, href, target, rel, render, onClick, children, ...props }: NavMenuItemProps): import("react").JSX.Element;
+export declare function NavMenuItem({ icon, current, disabled, closeOnClick, href, target, rel, render, onClick, className, children, ...props }: NavMenuItemProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/navigator/Navigator.d.ts
 type NavigatorSize = "sm" | "md";
@@ -3212,6 +3213,12 @@ type ViewfinderProps = ComponentProps<"div"> & {
   size?: ViewfinderSize;
   /** 正中放一个小准星，标出焦点 */
   crosshair?: boolean;
+  /**
+   * 挂上的时候取景角落位：八段短线各自从角上伸出来，播一次。
+   * 默认不动——取景角平时是静态的装饰。要它晚一点再动（等外面那一层先淡入完），
+   * 在外层设 `--bracket-delay`
+   */
+  animate?: boolean;
   /**
    * 四个角上的读数：坐标、比例、版本、时间码。
    * 必须是真实的数据；没有就不放。
@@ -3224,7 +3231,7 @@ type ViewfinderProps = ComponentProps<"div"> & {
  *
  * 只用在展示性的画面上，一屏一处。取景角与准星是装饰，读数是真实信息、读屏读得到。
  */
-export declare function Viewfinder({ size, crosshair, readouts, className, children, ...props }: ViewfinderProps): import("react").JSX.Element;
+export declare function Viewfinder({ size, crosshair, animate, readouts, className, children, ...props }: ViewfinderProps): import("react").JSX.Element;
 //#endregion
 //#region src/hooks/useControllableState.d.ts
 type Options$1<T> = {

package/dist/index.js

@@ -76,7 +76,9 @@ const twMerge = extendTailwindMerge({ extend: { theme: {
 		"slide-in",
 		"turn-in",
 		"fade-in",
-		"indeterminate"
+		"indeterminate",
+		"bracket-in",
+		"shift-in"
 	]
 } } });
 function cn(...inputs) {
@@ -1524,8 +1526,11 @@ const choiceControl = "flex h-[1lh] shrink-0 items-center";
 const choiceBox = "peer size-5 shrink-0 appearance-none border-2 choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:checked:disabled:bg-ink-disabled border-line-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard group-hover:border-ink-secondary checked:border-surface-inverse checked:bg-surface-inverse aria-invalid:border-danger disabled:cursor-not-allowed disabled:border-ink-disabled disabled:bg-surface-sunken";
 /** 方格 / 圆的定位盒：菱形比它小一圈，所以居中 */
 const choiceFrame = "relative inline-flex size-5 items-center justify-center";
-/** 压在方格 / 圆正中的记号，默认透明，由 peer 的状态点亮 */
-const choiceMark = "pointer-events-none absolute inset-0 m-auto text-accent-ink-inverse opacity-0 peer-disabled:text-ink-disabled";
+/**
+* 压在方格 / 圆正中的记号，默认透明，由 peer 的状态点亮。
+* 淡入淡出，和方格换底色的那一下同时走——底色有过渡而记号硬切，看起来是两件事
+*/
+const choiceMark = "pointer-events-none absolute inset-0 m-auto text-accent-ink-inverse opacity-0 transition-opacity duration-(--duration-fast) ease-standard peer-disabled:text-ink-disabled";
 //#endregion
 //#region src/components/checkbox/Checkbox.tsx
 /**
@@ -1717,14 +1722,37 @@ function MenuCheck({ checked, disabled = false }) {
 	});
 }
 //#endregion
+//#region src/lib/motion.ts
+/**
+* 浮层从触发它的那一侧来：进场的起点往触发处偏 `--motion-shift`，走完归位。
+* 用在基元的浮层面板上——它们带着 `data-side`（面板在触发元素的哪一侧）。
+*
+* 位移只写在 `data-starting-style` 上：退场不走位移，只淡出。
+* 用的地方自己给 `translate` 加过渡。`inline-start` / `inline-end` 按从左往右的排版算。
+*/
+const enterFromSide = [
+	"data-starting-style:data-[side=bottom]:-translate-y-(--motion-shift)",
+	"data-starting-style:data-[side=top]:translate-y-(--motion-shift)",
+	"data-starting-style:data-[side=right]:-translate-x-(--motion-shift)",
+	"data-starting-style:data-[side=left]:translate-x-(--motion-shift)",
+	"data-starting-style:data-[side=inline-end]:-translate-x-(--motion-shift)",
+	"data-starting-style:data-[side=inline-start]:translate-x-(--motion-shift)"
+].join(" ");
+//#endregion
 //#region src/components/dropdown-menu/menu-style.ts
 /** 选项要知道自己在哪种面板里，才知道"当前项"怎么画 */
 const MenuVariantContext = createContext("plain");
-/** 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽 */
+/**
+* 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽。
+*
+* 进场：淡入（200ms），同时从触发处那一侧挪过来 4px（300ms，和细条同一拍）。
+* 退场只淡出——位移只写在起点上。两个时长、两条缓动按属性一一对应
+*/
 const menuPanel = [
 	"relative min-w-40 border border-line bg-surface-raised py-1 text-ink shadow-sm outline-none",
-	"origin-(--transform-origin) transition-opacity duration-(--duration-fast) ease-standard",
+	"origin-(--transform-origin) transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]",
 	"data-ending-style:opacity-0 data-starting-style:opacity-0",
+	enterFromSide,
 	"before:pointer-events-none before:absolute before:-top-px before:-left-px before:h-[3px] before:w-1/2 before:origin-left before:bg-action before:content-['']",
 	"before:transition-transform before:duration-(--duration-base) before:ease-exit data-starting-style:before:scale-x-0",
 	"forced-colors:before:hidden"
@@ -2205,13 +2233,14 @@ const sizeClass$7 = {
 * 用于矩阵里的单选（物品格、名册卡、图鉴）；列表行用左缘色条，页签用底色，都不用它。
 *
 * 括号画在盒子之外 4px：它所在的容器不能贴着盒子裁切。
+* 出现时八段短线从角的顶点伸到满长（200ms），消失是直接消失。
 * 括号只是给眼睛看的，选中态另外要有 `aria-selected` / `aria-pressed`。
 */
 function CornerBrackets({ visible = true, size = "sm", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-visible": visible ? "" : void 0,
-		className: cn("relative", visible && "corner-brackets", sizeClass$7[size], className)
+		className: cn("relative", visible && "corner-brackets after:animate-bracket-in", sizeClass$7[size], className)
 	});
 }
 //#endregion
@@ -2868,7 +2897,7 @@ function Dialog({ trigger, open, defaultOpen, onOpenChange, title, description,
 					initialFocus: initialFocus ?? firstFocusableIn(contentRef),
 					finalFocus,
 					"data-size": size,
-					className: cn(overlaySurface, "relative flex max-h-full min-h-0 w-full flex-col", "transition-[scale,opacity] duration-(--duration-base) ease-exit", "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", sizeClass$5[size], className),
+					className: cn(overlaySurface, "relative flex max-h-full min-h-0 w-full flex-col", "transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]", "data-ending-style:opacity-0 data-starting-style:translate-y-(--motion-shift-lg) data-starting-style:opacity-0", sizeClass$5[size], className),
 					children: [/* @__PURE__ */ jsxs("div", {
 						"data-theme": "dark",
 						className: cn(overlayHeader, "min-h-16 justify-center px-12"),
@@ -3620,7 +3649,7 @@ function FileUpload({ value, defaultValue, onValueChange, multiple = false, acce
 					dragging && /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						"data-brackets": "",
-						className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "corner-brackets absolute inset-1.5 [--bracket-offset:0px]")
+						className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "corner-brackets absolute inset-1.5 [--bracket-offset:0px] after:animate-bracket-in")
 					}),
 					/* @__PURE__ */ jsx("input", {
 						ref: mergeRefs(inputRef, ref),
@@ -3849,7 +3878,7 @@ const readoutPosition = {
 *
 * 只用在展示性的画面上，一屏一处。取景角与准星是装饰，读数是真实信息、读屏读得到。
 */
-function Viewfinder({ size = "sm", crosshair = false, readouts, className, children, ...props }) {
+function Viewfinder({ size = "sm", crosshair = false, animate = false, readouts, className, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
 		className: cn("relative text-ink", className),
@@ -3857,7 +3886,7 @@ function Viewfinder({ size = "sm", crosshair = false, readouts, className, child
 			children,
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: cn(decor, "corner-brackets absolute inset-3 [--bracket-color:currentColor] [--bracket-offset:0px] [--bracket-width:1.5px]", armClass[size])
+				className: cn(decor, "corner-brackets absolute inset-3 [--bracket-color:currentColor] [--bracket-offset:0px] [--bracket-width:1.5px]", armClass[size], animate && "after:animate-bracket-in after:[animation-delay:var(--bracket-delay,0s)]")
 			}),
 			crosshair && /* @__PURE__ */ jsx("svg", {
 				"aria-hidden": "true",
@@ -4016,22 +4045,17 @@ function Stage({ label, items, index, setIndex, loop, previousLabel, nextLabel,
 			}),
 			/* @__PURE__ */ jsx(Viewfinder, {
 				size: "md",
-				className: "min-h-0 flex-1",
+				animate: true,
+				className: "min-h-0 flex-1 [--bracket-delay:var(--duration-fast)]",
 				children: /* @__PURE__ */ jsx("div", {
 					ref: trackRef,
 					"data-image-viewer-track": "",
 					onScroll,
 					className: "absolute inset-0 flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none]",
-					children: items.map((item, position) => /* @__PURE__ */ jsx("div", {
-						role: "group",
-						"aria-roledescription": "幻灯片",
-						"aria-label": `第 ${position + 1} 张，共 ${count} 张`,
-						inert: position !== index,
-						"data-current": position === index ? "" : void 0,
-						onClick: (event) => {
-							if (event.target === event.currentTarget) onClose();
-						},
-						className: cn("flex size-full shrink-0 snap-start items-center justify-center p-6 sm:p-10", "*:max-h-full *:max-w-full [&>img]:object-contain [&>video]:object-contain"),
+					children: items.map((item, position) => /* @__PURE__ */ jsx(Slide, {
+						label: `第 ${position + 1} 张，共 ${count} 张`,
+						current: position === index,
+						onClose,
 						children: Math.abs(position - index) <= 1 ? item.props.children : null
 					}, position))
 				})
@@ -4077,6 +4101,30 @@ function Stage({ label, items, index, setIndex, loop, previousLabel, nextLabel,
 		]
 	});
 }
+/**
+* 轨道上的一张。图是使用方给的元素，这里不碰它，只在外面听它的 `load`：
+* 还没取到的图是透明的，取到了淡入——不是"啪"地一下出现。
+* 只管直接放进来的 `<img>`；视频、别的内容不等，和原来一样直接在
+*/
+function Slide({ label, current, onClose, children }) {
+	const [loaded, setLoaded] = useState(false);
+	const settle = () => setLoaded(true);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "幻灯片",
+		"aria-label": label,
+		inert: !current,
+		"data-current": current ? "" : void 0,
+		"data-loaded": loaded ? "" : void 0,
+		onLoadCapture: settle,
+		onErrorCapture: settle,
+		onClick: (event) => {
+			if (event.target === event.currentTarget) onClose();
+		},
+		className: cn("flex size-full shrink-0 snap-start items-center justify-center p-6 sm:p-10", "*:max-h-full *:max-w-full [&>img]:object-contain [&>video]:object-contain", "[&>img]:transition-opacity [&>img]:duration-(--duration-fast) [&>img]:ease-standard not-data-loaded:[&>img]:opacity-0"),
+		children
+	});
+}
 /** 图片查看里的一张。直接放在 `ImageViewer` 里。 */
 function ImageViewerItem({ title, description: _description, thumbnail, "aria-label": ariaLabel, className, children, ...props }) {
 	const item = useContext(ItemContext);
@@ -4397,7 +4445,7 @@ function ItemSlot({ name, label, count, rarity, ratio = "1/1", selected = false,
 		...props,
 		"data-selected": selected ? "" : void 0,
 		"data-rarity": rarity,
-		className: cn("relative", ratioClass$1[ratio], selected && "corner-brackets", className),
+		className: cn("relative", ratioClass$1[ratio], selected && "corner-brackets after:animate-bracket-in", className),
 		children: node
 	});
 }
@@ -4895,8 +4943,13 @@ function NavMenu({ trigger, open, defaultOpen = false, onOpenChange, title, bran
 		})]
 	});
 }
+const itemEnter = [
+	"animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]",
+	"[animation-delay:100ms] nth-2:[animation-delay:150ms] nth-3:[animation-delay:200ms]",
+	"nth-4:[animation-delay:250ms] nth-5:[animation-delay:300ms] nth-[n+6]:[animation-delay:350ms]"
+].join(" ");
 /** 全屏菜单里的一个栏目。 */
-function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = true, href, target, rel, render, onClick, children, ...props }) {
+function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = true, href, target, rel, render, onClick, className, children, ...props }) {
 	const close = useContext(NavMenuContext);
 	const isLink = href !== void 0 || render !== void 0;
 	const handleClick = (event) => {
@@ -4933,6 +4986,7 @@ function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = t
 	] });
 	return /* @__PURE__ */ jsx("li", {
 		...props,
+		className: cn(itemEnter, className),
 		children: isLink ? /* @__PURE__ */ jsx(LinkElement, {
 			render,
 			href: disabled ? void 0 : href,
@@ -5071,7 +5125,7 @@ function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete,
 	const labelId = useId();
 	const ownLabel = ariaLabelledBy ?? (ariaLabel ? labelId : void 0);
 	const groupLabel = ownLabel ?? fieldContext?.labelId;
-	const slotClass = cn("min-w-0 shrink text-center font-tech font-medium tabular-nums text-ink caret-ink", "transition-colors duration-(--duration-fast) ease-standard", focusRing, slotSize[size], slotFrame[variant], readOnly ? "border-transparent bg-transparent" : slotFill[variant], disabled ? "cursor-not-allowed border-line text-ink-disabled" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink");
+	const slotClass = cn("min-w-0 shrink text-center font-tech font-medium tabular-nums text-transparent caret-ink", "transition-colors duration-(--duration-fast) ease-standard", disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink", focusRing, slotSize[size], slotFrame[variant], readOnly ? "border-transparent bg-transparent" : slotFill[variant], disabled ? "cursor-not-allowed border-line" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink");
 	const group = groupSize !== void 0 && groupSize > 0 ? groupSize : 0;
 	return /* @__PURE__ */ jsxs(OTPField.Root, {
 		...props,
@@ -6685,8 +6739,9 @@ const THUMB_HALF = 6;
 const markLeft = (ratio) => `calc(${THUMB_HALF}px + (100% - 12px) * ${ratio})`;
 const thumb = [
 	"relative h-5 w-3 bg-surface-inverse shadow-[0_0_0_2px_var(--ef-surface)]",
+	"transition-[inset-inline-start] duration-(--duration-fast) ease-standard data-dragging:transition-none",
 	"before:absolute before:-inset-x-3.5 before:-inset-y-2.5 before:content-['']",
-	"after:absolute after:inset-y-1 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:bg-accent-ink-inverse after:opacity-0 after:content-[''] data-dragging:after:opacity-100",
+	"after:absolute after:inset-y-1 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:bg-accent-ink-inverse after:opacity-0 after:transition-opacity after:duration-(--duration-fast) after:ease-standard after:content-[''] data-dragging:after:opacity-100",
 	"choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:after:inset-1 choice-diamond:after:w-auto choice-diamond:after:translate-x-0",
 	"data-disabled:bg-ink-disabled",
 	focusRingWithin
@@ -6741,7 +6796,7 @@ function Slider(props) {
 				className: cn("flex touch-none items-center px-1.5 select-none data-disabled:cursor-not-allowed", controlSize[size]),
 				children: /* @__PURE__ */ jsxs(Slider$1.Track, {
 					className: "h-1 w-full bg-line",
-					children: [/* @__PURE__ */ jsx(Slider$1.Indicator, { className: "bg-ink data-disabled:bg-ink-disabled" }), (range ? [0, 1] : [0]).map((index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+					children: [/* @__PURE__ */ jsx(Slider$1.Indicator, { className: "bg-ink transition-[inset-inline-start,width] duration-(--duration-fast) ease-standard data-disabled:bg-ink-disabled data-dragging:transition-none" }), (range ? [0, 1] : [0]).map((index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 						index,
 						...range ? { "aria-label": thumbLabels[index] } : {
 							"aria-label": ariaLabel,
@@ -7108,9 +7163,9 @@ function Step({ title, description, invalid = false, href, target, rel, render,
 			"aria-hidden": "true",
 			className: cn("flex shrink-0 items-center", railLayout[orientation]),
 			children: [/* @__PURE__ */ jsx("span", {
-				className: cn("flex shrink-0 items-center justify-center font-tech leading-none tabular-nums", nodeSize[size], invalid ? "border border-danger text-danger" : nodeClass$1[status]),
+				className: cn("flex shrink-0 items-center justify-center font-tech leading-none tabular-nums", "transition-colors duration-(--duration-fast) ease-standard", nodeSize[size], invalid ? "border border-danger text-danger" : nodeClass$1[status]),
 				children: invalid ? /* @__PURE__ */ jsx(StatusDanger, {}) : status === "done" ? /* @__PURE__ */ jsx(Check, {}) : String(index + 1).padStart(2, "0")
-			}), /* @__PURE__ */ jsx("span", { className: cn("flex-1 group-last/step:hidden", lineLayout[orientation], status === "done" ? "bg-ink" : "bg-line-strong") })]
+			}), /* @__PURE__ */ jsx("span", { className: cn("relative flex-1 overflow-clip bg-line-strong group-last/step:hidden", "before:absolute before:top-0 before:-right-4 before:-bottom-4 before:left-0 before:origin-top-left before:bg-ink before:transition-[scale] before:duration-(--duration-base) before:ease-exit before:content-['']", lineLayout[orientation], status === "done" ? "before:scale-100" : "before:scale-0") })]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: cn("min-w-0 flex-1", bodyLayout[orientation]),
 			children: [/* @__PURE__ */ jsx("div", {
@@ -8101,11 +8156,11 @@ const toneText = {
 const placementClass = {
 	bottom: {
 		viewport: "bottom-6",
-		root: "bottom-0 translate-y-[var(--toast-swipe-movement-y,0px)]"
+		root: "bottom-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),var(--toast-swipe-movement-y,0px))] data-starting-style:translate-y-(--motion-shift-lg)"
 	},
 	center: {
 		viewport: "top-1/2",
-		root: "top-0 translate-y-[calc(-50%+var(--toast-swipe-movement-y,0px))]"
+		root: "top-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),calc(-50%+var(--toast-swipe-movement-y,0px)))]"
 	}
 };
 function isOptions(input) {
@@ -8152,7 +8207,7 @@ function ToastHost({ placement, label, closeLabel, children }) {
 				return /* @__PURE__ */ jsx(Toast.Root, {
 					toast,
 					"data-theme": "dark",
-					className: cn("pointer-events-auto absolute left-1/2 w-max max-w-full translate-x-[calc(-50%+var(--toast-swipe-movement-x,0px))]", "border border-line bg-black/80 text-base leading-[1.4] text-white", "transition-opacity duration-(--duration-fast) ease-standard data-ending-style:opacity-0 data-starting-style:opacity-0", focusRingInset, placementClass[placement].root),
+					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", "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]", "data-ending-style:opacity-0 data-starting-style:opacity-0", "data-swiping:select-none", focusRingInset, placementClass[placement].root),
 					children: /* @__PURE__ */ jsxs(Toast.Content, {
 						className: cn("flex items-center gap-3 py-2.5 pl-5", toast.data?.dismissible ? "pr-2" : "pr-5"),
 						children: [
@@ -8568,7 +8623,7 @@ function Tooltip({ content, children, side = "top", align = "center", delay, arr
 					sideOffset: arrow ? 8 : 2,
 					className: "z-(--z-overlay)",
 					children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
-						className: cn("relative max-w-64 border border-transparent bg-surface-raised px-2.5 py-1.5 text-sm wrap-anywhere text-ink", "origin-(--transform-origin) transition-opacity duration-(--duration-fast) ease-standard", "data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0", className),
+						className: cn("relative max-w-64 border border-transparent bg-surface-raised px-2.5 py-1.5 text-sm wrap-anywhere text-ink", "origin-(--transform-origin) transition-[opacity,translate] duration-(--duration-fast) ease-standard", "data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0", enterFromSide, className),
 						children: [arrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 							"aria-hidden": "true",
 							className: cn("size-2 rotate-45 bg-surface-raised forced-colors:hidden", "data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1")