@tangle-network/ui 11.51.18 → 11.51.20

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 11.51.20
+
+### Patch Changes
+
+- 9d50cbe: `FileTabs`: `onClose` is optional. Without it the tabs render no close buttons and Delete does nothing, for tab strips that only switch between files.
+
+## 11.51.19
+
+### Patch Changes
+
+- 76fef41: `DropdownMenuContent` returns focus to its trigger without the keyboard focus ring when the menu closed after a pointer choice. Radix restores focus with a plain `focus()`, which Chromium draws as `:focus-visible`. Every bordered trigger therefore kept a ring after a mouse selection until focus moved elsewhere. A keyboard choice still shows the ring.
+- 09487a5: Menu separators (`DropdownMenuSeparator`, `ContextMenuSeparator`, `SelectSeparator`) draw in `--border-strong` instead of `--border`. On the dark popover the old line measured 1.1:1 against its surface and disappeared, so a closing action such as Billing read as one more choice in the list above it. It now measures 1.8:1 in dark and 2.3:1 in light.
+
 ## 11.51.18
 
 ### Patch Changes

package/dist/files/file-tabs.d.ts

@@ -15,7 +15,7 @@ export interface FileTabsProps {
   tabs: FileTabData[];
   activeId?: string;
   onSelect: (id: string) => void;
-  onClose: (id: string) => void;
+  onClose?: (id: string) => void;
   /** Accessible name of the tab list. Defaults to "Open files". */
   label?: string;
   className?: string;

package/dist/files/file-tabs.js

@@ -64,14 +64,14 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 			Home: 0,
 			End: last
 		}[event.key];
-		if (at < 0 || next === void 0 && event.key !== "Delete") return;
+		if (at < 0 || next === void 0 && (event.key !== "Delete" || !onClose)) return;
 		event.preventDefault();
 		if (next !== void 0) {
 			tabButtons()[next]?.focus();
 			onSelect(tabs[next].id);
 			return;
 		}
-		onClose(tabs[at].id);
+		onClose?.(tabs[at].id);
 		requestAnimationFrame(() => (tabButtons().find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabButtons().at(-1))?.focus());
 	};
 	return /* @__PURE__ */ jsx("div", {
@@ -96,7 +96,7 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 					"aria-label": `${tab.name}${hint ? ` in ${hint}` : ""}${tab.dirty ? ", unsaved changes" : ""}`,
 					tabIndex: isActive || !activeId && tab === tabs[0] ? 0 : -1,
 					onClick: () => onSelect(tab.id),
-					className: cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset),
+					className: cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3", onClose ? "pr-1" : "pr-3", focusRingInset),
 					children: [
 						/* @__PURE__ */ jsx(Icon, {
 							"aria-hidden": true,
@@ -121,12 +121,12 @@ function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open files", cla
 							className: "size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]"
 						})
 					]
-				}), /* @__PURE__ */ jsx("button", {
+				}), onClose && /* @__PURE__ */ jsx("button", {
 					type: "button",
 					tabIndex: -1,
 					"aria-label": `Close ${tab.name}`,
 					onClick: () => onClose(tab.id),
-					className: cn("mr-1.5 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground", controlMotion, !isActive && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
+					className: cn("mr-1.5 grid size-5 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-[var(--ix-hover-bg)] hover:text-foreground", "[transition:color_var(--motion-control),background-color_var(--motion-control),border-color_var(--motion-control),box-shadow_var(--motion-control),transform_var(--motion-control),scale_var(--motion-control),opacity_var(--motion-control)] motion-reduce:transition-none", !isActive && "opacity-0 group-focus-within:opacity-100 group-hover:opacity-100"),
 					children: /* @__PURE__ */ jsx(X, {
 						"aria-hidden": true,
 						className: "size-3"

package/dist/primitives/context-menu.js

@@ -73,7 +73,7 @@ const ContextMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-border", className),
+	className: cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className),
 	...props
 }));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;

package/dist/primitives/dropdown-menu.js

@@ -11,6 +11,8 @@ const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+const menuRow = cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50");
+const menuSurface = cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2");
 const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
 	ref,
 	className: cn("flex cursor-default select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "data-[state=open]:bg-[var(--ix-sel-bg)]", ixRow, inset && "pl-8", className),
@@ -20,26 +22,37 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
 	ref,
-	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	className: cn(menuSurface, className),
 	...props
 }));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
+const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, onPointerDown, onCloseAutoFocus, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
 	ref,
 	sideOffset,
-	className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+	onPointerDown: (event) => {
+		event.currentTarget.dataset.pointer = "";
+		onPointerDown?.(event);
+	},
+	onCloseAutoFocus: (event) => {
+		const content = event.currentTarget;
+		onCloseAutoFocus?.(event);
+		if (content.dataset.pointer === void 0 || event.defaultPrevented || document.activeElement !== document.body) return;
+		event.preventDefault();
+		document.getElementById(content.getAttribute("aria-labelledby") ?? "")?.focus({ focusVisible: false });
+	},
+	className: cn(menuSurface, className),
 	...props
 }) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
+	className: cn(menuRow, "px-2", inset && "pl-8", className),
 	...props
 }));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn(menuRow, "pr-2 pl-8", className),
 	checked,
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
@@ -50,7 +63,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 const DropdownMenuRadioItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
 	ref,
-	className: cn("relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]", "focus:text-foreground", ixRow, "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+	className: cn(menuRow, "pr-2 pl-8", className),
 	...props,
 	children: [/* @__PURE__ */ jsx("span", {
 		className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
@@ -66,7 +79,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-border", className),
+	className: cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className),
 	...props
 }));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;

package/dist/primitives/select.js

@@ -67,7 +67,7 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Separator, {
 	ref,
-	className: cn("-mx-1 my-1 h-px bg-border", className),
+	className: cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className),
 	...props
 }));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.51.18",
+  "version": "11.51.20",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -216,7 +216,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.31.4",
+    "@tangle-network/brand": "^1.31.8",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/files/file-tabs.tsx

@@ -23,7 +23,7 @@ export interface FileTabsProps {
   tabs: FileTabData[];
   activeId?: string;
   onSelect: (id: string) => void;
-  onClose: (id: string) => void;
+  onClose?: (id: string) => void; // without it the tabs have no close buttons and Delete does nothing
   /** Accessible name of the tab list. Defaults to "Open files". */
   label?: string;
   className?: string;
@@ -84,14 +84,14 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
     const at = tabButtons().indexOf(event.target as HTMLButtonElement);
     const last = tabs.length - 1;
     const next = ({ ArrowRight: at === last ? 0 : at + 1, ArrowLeft: at === 0 ? last : at - 1, Home: 0, End: last } as Record<string, number>)[event.key];
-    if (at < 0 || (next === undefined && event.key !== "Delete")) return;
+    if (at < 0 || (next === undefined && (event.key !== "Delete" || !onClose))) return;
     event.preventDefault();
     if (next !== undefined) {
       tabButtons()[next]?.focus();
       onSelect(tabs[next]!.id);
       return;
     }
-    onClose(tabs[at]!.id);
+    onClose?.(tabs[at]!.id);
     // Once the host has re-rendered, keep focus on the tab it opened.
     requestAnimationFrame(() => (tabButtons().find((tab) => tab.getAttribute("aria-selected") === "true") ?? tabButtons().at(-1))?.focus());
   };
@@ -136,7 +136,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               aria-label={`${tab.name}${hint ? ` in ${hint}` : ""}${tab.dirty ? ", unsaved changes" : ""}`}
               tabIndex={isActive || (!activeId && tab === tabs[0]) ? 0 : -1}
               onClick={() => onSelect(tab.id)}
-              className={cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3 pr-1", focusRingInset)}
+              className={cn("flex h-full min-w-0 items-center gap-1.5 rounded-t-lg pl-3", onClose ? "pr-1" : "pr-3", focusRingInset)}
             >
               <Icon aria-hidden className="size-3.5 shrink-0 text-muted-foreground" />
               <span className="flex min-w-0">
@@ -146,7 +146,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               {hint && <span className="min-w-0 truncate text-muted-foreground">· {hint}</span>}
               {tab.dirty && <span aria-hidden className="size-1.5 shrink-0 rounded-full bg-[var(--accent-text)]" />}
             </button>
-            <button
+            {onClose && <button
               type="button"
               tabIndex={-1}
               aria-label={`Close ${tab.name}`}
@@ -158,7 +158,7 @@ export function FileTabs({ tabs, activeId, onSelect, onClose, label = "Open file
               )}
             >
               <X aria-hidden className="size-3" />
-            </button>
+            </button>}
           </div>
         );
       })}

package/src/primitives/context-menu.tsx

@@ -140,7 +140,7 @@ const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className)} {...props} />
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 

package/src/primitives/dropdown-menu.tsx

@@ -16,6 +16,22 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
+// One surface for a menu and its submenus, one row for its items.
+const menuRow = cn(
+  "relative flex cursor-pointer select-none items-center rounded-md py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]",
+  "focus:text-foreground",
+  ixRow,
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+);
+const menuSurface = cn(
+  "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
+  "data-[state=closed]:animate-out data-[state=open]:animate-in",
+  "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+  "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+  "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+  "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+);
+
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
@@ -46,15 +62,7 @@ const DropdownMenuSubContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
-      "data-[state=closed]:animate-out data-[state=open]:animate-in",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
+    className={cn(menuSurface, className)}
     {...props}
   />
 ));
@@ -64,20 +72,21 @@ DropdownMenuSubContent.displayName =
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+>(({ className, sideOffset = 4, onPointerDown, onCloseAutoFocus, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
       sideOffset={sideOffset}
-      className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[var(--edge-highlight),var(--shadow-card)]",
-        "data-[state=closed]:animate-out data-[state=open]:animate-in",
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-        "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-        "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
+      // A choice made with a pointer returns focus to the trigger without the keyboard ring.
+      onPointerDown={(event) => { event.currentTarget.dataset.pointer = ""; onPointerDown?.(event); }}
+      onCloseAutoFocus={(event) => {
+        const content = event.currentTarget as HTMLElement;
+        onCloseAutoFocus?.(event);
+        if (content.dataset.pointer === undefined || event.defaultPrevented || document.activeElement !== document.body) return;
+        event.preventDefault();
+        document.getElementById(content.getAttribute("aria-labelledby") ?? "")?.focus({ focusVisible: false });
+      }}
+      className={cn(menuSurface, className)}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
@@ -92,14 +101,7 @@ const DropdownMenuItem = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none transition-[color,background-color,box-shadow]",
-      "focus:text-foreground",
-      ixRow,
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
+    className={cn(menuRow, "px-2", inset && "pl-8", className)}
     {...props}
   />
 ));
@@ -111,13 +113,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 >(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]",
-      "focus:text-foreground",
-      ixRow,
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
+    className={cn(menuRow, "pr-2 pl-8", className)}
     checked={checked}
     {...props}
   >
@@ -138,13 +134,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
-    className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md py-1.5 pr-2 pl-8 text-sm outline-none transition-[color,background-color,box-shadow]",
-      "focus:text-foreground",
-      ixRow,
-      "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className,
-    )}
+    className={cn(menuRow, "pr-2 pl-8", className)}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
@@ -181,7 +171,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className)}
     {...props}
   />
 ));

package/src/primitives/select.tsx

@@ -156,7 +156,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-[var(--border-strong)]", className)}
     {...props}
   />
 ));