@arcote.tech/arc-ds 0.7.7 → 0.7.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/arc-ds",
   "type": "module",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Design System for Arc framework — CVA-based components with display modes and variant overrides",
@@ -30,7 +30,7 @@
     "tailwind-merge": "^3.5.0"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.7.7",
+    "@arcote.tech/arc": "^0.7.8",
     "framer-motion": "^12.0.0",
     "lucide-react": ">=0.400.0",
     "radix-ui": "^1.0.0",

package/src/layout/layout.tsx

@@ -48,11 +48,11 @@ export function Layout({ children }: { children?: ReactNode }) {
 function SubNavSlot() {
   const content = useDynamicSlotContent("sub-nav");
   if (content.length === 0) return null;
-  // `relative z-30` creates an explicit stacking context at Z.BASE so any
-  // popovers inside the sub-nav (SearchSelect absolute dropdown, etc.) paint
-  // above the main content area that follows it in document flow.
+  // `relative z-20` creates an explicit stacking context below the toolbar
+  // (Z.BASE = 30) so the sub-nav doesn't paint over the fixed toolbar, but
+  // still sits above the main content area that follows in document flow.
   return (
-    <div className="relative z-30 flex justify-center py-2">
+    <div className="relative z-20 flex justify-center py-2">
       <Box layoutId="sub-nav" className="flex items-center gap-1 px-3 py-2">
         {content}
       </Box>
@@ -167,33 +167,36 @@ function DesktopToolbar() {
   return (
     <>
       <div
-        data-arc-toolbar="left"
         className="fixed left-4 top-4"
         style={{ zIndex: zIndex("workspace") }}
       >
         <Box layout={false} className="flex flex-col px-3 py-2">
-          {renderSlot("toolbar-left", { className: "flex items-center gap-2" })}
+          <div data-arc-toolbar="left">
+            {renderSlot("toolbar-left", { className: "flex items-center gap-2" })}
+          </div>
           <ExpandedSection targetId="workspace" />
         </Box>
       </div>
 
       <div
-        data-arc-toolbar="center"
         className="fixed left-1/2 top-4 max-w-[calc(100vw-26rem)] -translate-x-1/2"
         style={{ zIndex: zIndex("center") }}
       >
         <Box layout={false} className="flex min-w-0 items-center px-3 py-2">
-          {renderSlot("toolbar-center", { className: "flex min-w-0 flex-1 items-center gap-1" })}
+          <div data-arc-toolbar="center" className="flex min-w-0 flex-1">
+            {renderSlot("toolbar-center", { className: "flex min-w-0 flex-1 items-center gap-1" })}
+          </div>
         </Box>
       </div>
 
       <div
-        data-arc-toolbar="right"
         className="fixed right-4 top-4"
         style={{ zIndex: zIndex("settings") }}
       >
         <Box layout={false} className="flex flex-col px-3 py-2">
-          {renderSlot("toolbar-right", { className: "flex items-center gap-2" })}
+          <div data-arc-toolbar="right">
+            {renderSlot("toolbar-right", { className: "flex items-center gap-2" })}
+          </div>
           <ExpandedSection targetId="settings" />
         </Box>
       </div>