react-dockable-desktop 5.1.4 → 5.2.0

package/dist/styles.css

@@ -34,6 +34,11 @@
   --rdd-modal-header-bg: rgba(0, 0, 0, 0.15);
   --rdd-modal-header-border: rgba(255, 255, 255, 0.06);
   --rdd-modal-close-hover-color: #ffffff;
+  --rdd-side-panel-bg: rgba(20, 23, 34, 0.88);
+  --rdd-side-panel-border: rgba(255, 255, 255, 0.08);
+  --rdd-side-panel-header-bg: rgba(0, 0, 0, 0.15);
+  --rdd-side-panel-header-border: rgba(255, 255, 255, 0.06);
+  --rdd-side-panel-close-hover-color: #ffffff;
   /* Grid/Docked panel theme variables */
   --rdd-border-panel: rgba(255, 255, 255, 0.08);
   --rdd-bg-tab-inactive: #0c0d12;
@@ -1089,6 +1094,12 @@ body.rdd-dragging-active {
   --rdd-modal-header-bg: rgba(0, 0, 0, 0.04);
   --rdd-modal-header-border: rgba(0, 0, 0, 0.08);
   --rdd-modal-close-hover-color: #212529;
+  /* Light skin side panel overrides */
+  --rdd-side-panel-bg: rgba(255, 255, 255, 0.97);
+  --rdd-side-panel-border: rgba(0, 0, 0, 0.1);
+  --rdd-side-panel-header-bg: rgba(0, 0, 0, 0.04);
+  --rdd-side-panel-header-border: rgba(0, 0, 0, 0.08);
+  --rdd-side-panel-close-hover-color: #212529;
   /* Light skin grid/docked panel overrides */
   --rdd-border-panel: rgba(0, 0, 0, 0.08);
   --rdd-bg-tab-inactive: #e9ecef;
@@ -1868,13 +1879,38 @@ body.rdd-dragging-active {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 38px; /* Perfectly aligned to match the 38px height of the drawer header bar */
+  padding-top: 38px; /* Perfectly aligned to match the 38px height of the drawer header bar — only
+                         relevant when a tab is the first item; see the modifier rule below. */
   padding-bottom: 12px;
-  gap: 8px;
   flex-shrink: 0;
   z-index: 5;
 }
 
+/* When a headerAction is present, it owns its own top/bottom spacing (see
+   .rdd-sidebar-header-area below) — the strip's own alignment padding no longer applies. */
+.rdd-sidebar-tabs-strip.rdd-sidebar-tabs-strip--has-header-action {
+  padding-top: 0;
+}
+
+/* Wraps `headerAction` — independent of .rdd-sidebar-tabs-list's own gap, so a consumer can
+   tune spacing/effective height around their button (default or fully custom-rendered) without
+   touching inter-tab spacing. Layout-only values, so no light/dark variant is needed. */
+.rdd-sidebar-header-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: var(--rdd-sidebar-header-area-padding-top, 8px);
+  padding-bottom: var(--rdd-sidebar-header-area-padding-bottom, 8px);
+}
+
+/* Wraps the tabs only — owns the gap that used to live on .rdd-sidebar-tabs-strip itself. */
+.rdd-sidebar-tabs-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
 /* Position-specific tab strip border alignment */
 .rdd-sidebar-tabs-strip.rdd-left {
   border-right: 1px solid var(--sidebar-border) !important;
@@ -2143,10 +2179,10 @@ html.rdd-no-animations [class*="rdd-"]::after {
   top: 0;
   bottom: 0;
   width: 400px;
-  background: rgba(20, 23, 34, 0.88);
+  background: var(--rdd-side-panel-bg);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  border-right: 1px solid var(--rdd-side-panel-border);
   z-index: calc(var(--rdd-z-base, 1000) + 8000);
   box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
   transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
@@ -2157,7 +2193,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 .rdd-side-panel-right {
   right: 0;
   border-right: none;
-  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 1px solid var(--rdd-side-panel-border);
   box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
 }
 
@@ -2176,8 +2212,8 @@ html.rdd-no-animations [class*="rdd-"]::after {
   display: flex;
   align-items: center;
   padding: 12px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  background-color: rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid var(--rdd-side-panel-header-border);
+  background-color: var(--rdd-side-panel-header-bg);
   min-height: 44px;
 }
 
@@ -2211,7 +2247,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 
 .rdd-side-panel-close-button:hover {
   background-color: rgba(255, 255, 255, 0.08);
-  color: #fff;
+  color: var(--rdd-side-panel-close-hover-color);
 }
 
 .rdd-side-panel-body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dockable-desktop",
-  "version": "5.1.4",
+  "version": "5.2.0",
   "description": "A premium, state-of-the-art window manager and dockable layout engine for React. Supports fluid grid splits, tabbed groups, floating resizable windows, zero-unmount state preservation, context menus, and internationalization.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",