@gooddata/sdk-ui-dashboard 11.60.0-alpha.2 → 11.60.0-alpha.4

package/styles/css/sidebar.css

@@ -18,21 +18,29 @@
   transition: width var(--sidebar-slide-duration);
 }
 .gd-sidebar-container--resizable {
-  min-width: 230px;
   width: 100%;
 }
 .gd-sidebar-container--collapsed {
-  min-width: 48px;
-  width: 48px;
+  min-width: 0;
+  width: 0;
 }
 .gd-sidebar-container--resizable.gd-sidebar-container--collapsed {
   width: 100%;
 }
 
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar,
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar__expand-trigger {
+  --resizable-sidebar-slide-duration: 0.5s;
+  z-index: 6001;
+}
+
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar--dragging {
+  z-index: 9999;
+}
+
 .gd-creation-panel-header {
   display: flex;
   align-items: center;
-  justify-content: space-between;
 }
 
 .gd-sidebar-collapse-toggle {
@@ -40,6 +48,10 @@
   margin: 0 10px;
 }
 
+.dash-header-inner .gd-sidebar-collapse-toggle {
+  margin: 0;
+}
+
 .gd-sidebar-panel {
   height: 100%;
 }
@@ -50,20 +62,14 @@
   box-sizing: border-box;
   height: 32px;
   white-space: nowrap;
-  transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
 }
 .gd-sidebar-panel--collapsible .add-item-placeholder svg {
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
-  transition: transform var(--sidebar-slide-duration);
 }
 .gd-sidebar-panel--collapsible .add-item-placeholder::before {
   background-size: 18px auto;
-  transition: width var(--sidebar-slide-duration);
-}
-.gd-sidebar-panel--collapsible .gd-visualizations-list {
-  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
 }
 .gd-sidebar-panel--collapsible .configuration-panel {
   padding-top: 0;
@@ -74,8 +80,8 @@
 }
 .gd-sidebar-panel--collapsible .gd-creation-panel-header h2 {
   margin-bottom: 0;
+  margin-left: 0;
   color: var(--gd-palette-complementary-8, #464e56);
-  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
 }
 .gd-sidebar-panel--collapsible .add-item-panel {
   display: flex;
@@ -83,9 +89,6 @@
   gap: 5px;
   padding: 0 8px;
 }
-.gd-sidebar-panel--collapsible .add-item-panel .gd-ui-kit-tooltip__anchor {
-  width: auto;
-}
 .gd-sidebar-panel--collapsible .configuration-category {
   margin-bottom: 0;
   padding-top: 10px;
@@ -93,10 +96,33 @@
 .gd-sidebar-panel--collapsible .configuration-category:not(.flex-panel-item-stretch) {
   flex: 0 0 auto;
 }
-.gd-sidebar-panel--collapsible .configuration-category-vis {
+.gd-sidebar-container--hidden .gd-sidebar-panel--collapsible .flex-panel-full-height {
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-container--hidden.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .flex-panel-full-height {
+  opacity: 0;
+  transition: opacity var(--sidebar-fade-duration);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-placeholder {
+  transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-placeholder svg {
+  transition: transform var(--sidebar-slide-duration);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-placeholder::before {
+  transition: width var(--sidebar-slide-duration);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .add-item-panel .gd-ui-kit-tooltip__anchor {
+  width: auto;
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .gd-creation-panel-header h2,
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .gd-visualizations-list {
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .configuration-category-vis {
   position: relative;
 }
-.gd-sidebar-panel--collapsible .configuration-category-vis::before {
+.gd-sidebar-container--rail .gd-sidebar-panel--collapsible .configuration-category-vis::before {
   content: "";
   position: absolute;
   top: 10px;
@@ -107,34 +133,33 @@
   visibility: hidden;
   transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-creation-panel-header h2,
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-creation-panel-header .gd-sidebar-collapse-toggle,
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-visualizations-list {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-creation-panel-header h2,
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-visualizations-list {
   opacity: 0;
   visibility: hidden;
   transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-panel {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-panel {
   align-items: flex-start;
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder {
   width: 32px;
   padding: 0;
   overflow: hidden;
   color: transparent;
   transition: color var(--sidebar-fade-duration), padding 0s linear var(--sidebar-fade-duration);
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder.add-panel-item svg {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder.add-panel-item svg {
   transform: translateX(calc(-50% + 1px));
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder::before {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder::before {
   width: 32px;
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder.add-panel-item .gd-add-item-placeholder-help-trigger {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .add-item-placeholder.add-panel-item .gd-add-item-placeholder-help-trigger {
   display: none;
 }
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .configuration-category-vis::before,
-.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-sidebar-rail-search {
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .configuration-category-vis::before,
+.gd-sidebar-container--rail.gd-sidebar-container--collapsed .gd-sidebar-panel--collapsible .gd-sidebar-rail-search {
   opacity: 1;
   visibility: visible;
   transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
@@ -149,107 +174,13 @@
   transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
 }
 
-.gd-sidebar-rail {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 48px;
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity var(--sidebar-fade-duration), visibility 0s linear var(--sidebar-fade-duration);
-}
-.gd-sidebar-container--collapsed .gd-sidebar-rail {
-  opacity: 1;
-  visibility: visible;
-  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
-}
-.gd-sidebar-rail .gd-sidebar-collapse-toggle {
-  align-items: center;
-  height: 48px;
-  margin: 0;
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .gd-sidebar-container,
-  .gd-resizable-sidebar {
+  .gd-sidebar-container {
     --sidebar-fade-duration: 0s;
     --sidebar-fade-delay: 0s;
     --sidebar-slide-duration: 0s;
   }
 }
-.gd-resizable-sidebar {
-  --sidebar-fade-duration: 0.2s;
-  --sidebar-fade-delay: 0.3s;
-  --sidebar-slide-duration: 0.5s;
-  display: flex;
-  flex-direction: column;
-  flex: 0 0 auto;
-  transition: width var(--sidebar-slide-duration);
-}
-.gd-resizable-sidebar--dragging, .gd-resizable-sidebar:has(.gd-resizable-sidebar__handle:focus) {
-  z-index: 9999;
-  transition: none;
-}
-.gd-resizable-sidebar__handle {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  transform: translateX(calc(var(--drag-x, 0) - 50%));
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 6px;
-  background: transparent;
-  border: 0;
-  cursor: col-resize;
-  touch-action: none;
-}
-.gd-resizable-sidebar__handle:focus {
-  outline: none;
-}
-.gd-resizable-sidebar__handle:disabled {
-  cursor: initial;
-}
-.gd-resizable-sidebar__handle--dragging {
-  opacity: 1;
-}
-.gd-resizable-sidebar--resizable:hover .gd-resizable-sidebar__handle, .gd-resizable-sidebar--resizable:focus-within .gd-resizable-sidebar__handle {
-  opacity: 1;
-}
-.gd-resizable-sidebar__handle-grip {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  height: 25px;
-  padding: 5px 3px;
-  background: var(--gd-palette-complementary-0);
-  border: 1px solid var(--gd-palette-complementary-5);
-  border-radius: 2px;
-}
-.gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip {
-  border: 2px solid #14b2e2;
-  border-radius: 3px;
-}
-.gd-resizable-sidebar--dragging .gd-resizable-sidebar__handle-grip::after, .gd-resizable-sidebar__handle:focus .gd-resizable-sidebar__handle-grip::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: -1;
-  width: 2px;
-  background: #14b2e2;
-  box-shadow: 0 0 0 4px var(--gd-palette-primary-base-t85, rgba(20, 178, 226, 0.15));
-}
-
 .add-item-panel {
   padding: 0 7px;
 }

package/styles/css/sidebar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Button/_variables.scss","../scss/sidebar.scss","../scss/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACDA;AAAA;AAAA;ACcA;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA,cCsDS;EDrDT;;AAEA;EACI;EACA;;AAGJ;EACI,WA7BkB;EA8BlB,OA9BkB;;AAiCtB;EACI;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;AAEA;EACI;EACA,QAtDQ;EAuDR;EACA;;AAGJ;EACI;EACA,OA/DQ;EAgER,QAhEQ;EAiER;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI,QAjFY;EAkFZ,eCVC;;ADYD;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA,KAnHc;EAoHd;EACA;EACA,YChDH;EDiDG;EACA;EACA,YACI;;AAMR;AAAA;AAAA;EAGI;EACA;EACA,YACI;;AAIR;EACI;;AAGJ;EACI,OAhJI;EAiJJ;EACA;EACA;EACA,YACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;AAAA;EAEI;EACA;EACA;;;AAMhB;EACI;EACA,KA9KyB;EA+KzB;EACA;EACA;EACA,YACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OArMsB;EAsMtB;EACA;EACA,YACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA,QAlNgB;EAmNhB;;;AAIR;EACI;AAAA;IAEI;IACA;IACA;;;AAIR;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;;AAIA;EAEI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAEA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EAEI;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEI;EACA;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YEhTS;EFiTT;;;AAKZ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OEzSY;EF0SZ;;AAEA;EACI,OEtTY;EFuTZ;EACA;;AAGJ;EACI;EAIA,YACI;EAEJ;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OEzYmB;;;AF4YvB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"sidebar.css"}
+{"version":3,"sourceRoot":"","sources":["../../node_modules/@gooddata/sdk-ui-kit/styles/scss/mixins.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Bubble/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/Button/_variables.scss","../scss/sidebar.scss","../scss/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACDA;AAAA;AAAA;ACiBA;EACI;EACA;EACA;EAEA;EACA;EACA;EACA;EACA,cCmDS;EDlDT;;AAIA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;;AAQR;AAAA;EAEI;EAEA;;;AAKJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAIJ;EACI;;;AAGJ;EACI;;AAEA;EACI;;AAEA;EACI;EACA,QA7EQ;EA8ER;;AAGJ;EACI;EACA,OArFQ;EAsFR,QAtFQ;;AAyFZ;EACI;;AAGJ;EACI;;AAGJ;EACI,QAjGY;EAkGZ,eC5BC;;AD+BD;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAOJ;EACI;;AAGJ;EACI;EACA;;AAMA;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;AAAA;EAEI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA,KApKU;EAqKV;EACA;EACA,YCpGP;EDqGO;EACA;EACA,YACI;;AAOZ;AAAA;EAEI;EACA;EACA,YACI;;AAIR;EACI;;AAGJ;EACI,OAlMI;EAmMJ;EACA;EACA;EACA,YACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;AAAA;EAEI;EACA;EACA;;;AAOhB;EACI;EACA,KAhOyB;EAiOzB,MApOiB;EAqOjB;EACA;EACA,YACI;;;AAIR;EACI;IACI;IACA;IACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OE1OY;EF2OZ;;AAEA;EACI,OEvPY;EFwPZ;EACA;;AAGJ;EACI;EAIA,YACI;EAEJ;;AAMJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAIR;EACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OE1UmB;;;AF6UvB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"sidebar.css"}

package/styles/scss/sidebar.scss

@@ -1,14 +1,17 @@
-// (C) 2024-2025 GoodData Corporation
+// (C) 2024-2026 GoodData Corporation
 
 @use "sass:color";
 @use "variables";
+@use "zIndexes";
 @use "@gooddata/sdk-ui-kit/styles/scss/Button/variables" as button-variables;
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 
+// Fixed rail width owned by the kit (UI_RESIZABLE_SIDEBAR_RAIL_WIDTH in sdk-ui-kit).
 $sidebar-collapsed-width: 48px;
 $sidebar-icon-size: 18px;
 $sidebar-header-height: 48px;
 $sidebar-item-size: 32px;
+$sidebar-item-inset: ($sidebar-collapsed-width - $sidebar-item-size) * 0.5;
 $sidebar-rail-divider-offset: 10px;
 $sidebar-rail-search-gap: 10px;
 $sidebar-rail-search-offset: $sidebar-rail-divider-offset + variables.$nav-border-size +
@@ -28,14 +31,15 @@ $sidebar-fade-delay: 0.3s;
     border-right: variables.$nav-border;
     transition: width var(--sidebar-slide-duration);
 
+    // Follows the kit wrapper, which owns the width and its slide; a min-width here would snap the
+    // container open before the wrapper has slid.
     &--resizable {
-        min-width: 230px;
         width: 100%;
     }
 
     &--collapsed {
-        min-width: $sidebar-collapsed-width;
-        width: $sidebar-collapsed-width;
+        min-width: 0;
+        width: 0;
     }
 
     &--resizable#{&}--collapsed {
@@ -43,10 +47,26 @@ $sidebar-fade-delay: 0.3s;
     }
 }
 
+// Keeps the kit sidebar's width transition in step with the container and content transitions, and
+// paints the sidebar and its expand trigger above the sticky dashboard header so neither is cut off at
+// the top. The drag layer sits one level higher still (see DragLayer.tsx). The parent selector
+// out-specifies the kit's own z-index on the trigger.
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar,
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar__expand-trigger {
+    --resizable-sidebar-slide-duration: #{variables.$sidebar-transition-length};
+
+    z-index: zIndexes.$filterbar-sdk-8-12 + 1;
+}
+
+// The rule above would also beat the kit's drag-time lift, so restate it: dragging and a focused handle
+// then layer the same way.
+.gd-dashboards-root > .gd-ui-kit-resizable-sidebar--dragging {
+    z-index: 9999;
+}
+
 .gd-creation-panel-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
 }
 
 .gd-sidebar-collapse-toggle {
@@ -54,6 +74,11 @@ $sidebar-fade-delay: 0.3s;
     margin: 0 10px;
 }
 
+// Restore control in the top bar while the sidebar is hidden, placed right before the title.
+.dash-header-inner .gd-sidebar-collapse-toggle {
+    margin: 0;
+}
+
 .gd-sidebar-panel {
     height: 100%;
 
@@ -64,23 +89,16 @@ $sidebar-fade-delay: 0.3s;
             box-sizing: border-box;
             height: $sidebar-item-size;
             white-space: nowrap;
-            transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
         }
 
         .add-item-placeholder svg {
             flex: 0 0 auto;
             width: $sidebar-icon-size;
             height: $sidebar-icon-size;
-            transition: transform var(--sidebar-slide-duration);
         }
 
         .add-item-placeholder::before {
             background-size: $sidebar-icon-size auto;
-            transition: width var(--sidebar-slide-duration);
-        }
-
-        .gd-visualizations-list {
-            transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
         }
 
         .configuration-panel {
@@ -91,10 +109,11 @@ $sidebar-fade-delay: 0.3s;
             height: $sidebar-header-height;
             border-bottom: variables.$nav-border;
 
+            // The toggle in front of the headline provides the inset.
             h2 {
                 margin-bottom: 0;
+                margin-left: 0;
                 color: var(--gd-palette-complementary-8, #464e56);
-                transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
             }
         }
 
@@ -102,11 +121,7 @@ $sidebar-fade-delay: 0.3s;
             display: flex;
             flex-direction: column;
             gap: 5px;
-            padding: 0 (($sidebar-collapsed-width - $sidebar-item-size) * 0.5);
-        }
-
-        .add-item-panel .gd-ui-kit-tooltip__anchor {
-            width: auto;
+            padding: 0 $sidebar-item-inset;
         }
 
         .configuration-category {
@@ -118,27 +133,64 @@ $sidebar-fade-delay: 0.3s;
             flex: 0 0 auto;
         }
 
-        .configuration-category-vis {
-            position: relative;
+        // Hidden mode: the whole content fades out at the start of the collapse and back in once the
+        // expand slide has nearly finished, so it never overlaps the dashboard mid-slide. Opacity only:
+        // the collapsed wrapper is already inert and clipped, and the toggle must stay focusable for the
+        // focus hand-off.
+        .gd-sidebar-container--hidden & .flex-panel-full-height {
+            transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+        }
 
-            &::before {
-                content: "";
-                position: absolute;
-                top: $sidebar-rail-divider-offset;
-                left: 0;
-                right: 0;
-                border-top: variables.$nav-border;
-                opacity: 0;
-                visibility: hidden;
-                transition:
-                    opacity var(--sidebar-fade-duration),
-                    visibility 0s linear var(--sidebar-fade-duration);
+        .gd-sidebar-container--hidden.gd-sidebar-container--collapsed & .flex-panel-full-height {
+            opacity: 0;
+            transition: opacity var(--sidebar-fade-duration);
+        }
+
+        // Rail mode: the headline and the list fade out while the palette items shrink to their icons,
+        // which stay in place in the 48px rail together with the toggle in front of the headline.
+        .gd-sidebar-container--rail & {
+            .add-item-placeholder {
+                transition: color var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+            }
+
+            .add-item-placeholder svg {
+                transition: transform var(--sidebar-slide-duration);
+            }
+
+            .add-item-placeholder::before {
+                transition: width var(--sidebar-slide-duration);
+            }
+
+            .add-item-panel .gd-ui-kit-tooltip__anchor {
+                width: auto;
+            }
+
+            .gd-creation-panel-header h2,
+            .gd-visualizations-list {
+                transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+            }
+
+            .configuration-category-vis {
+                position: relative;
+
+                &::before {
+                    content: "";
+                    position: absolute;
+                    top: $sidebar-rail-divider-offset;
+                    left: 0;
+                    right: 0;
+                    border-top: variables.$nav-border;
+                    opacity: 0;
+                    visibility: hidden;
+                    transition:
+                        opacity var(--sidebar-fade-duration),
+                        visibility 0s linear var(--sidebar-fade-duration);
+                }
             }
         }
 
-        .gd-sidebar-container--collapsed & {
+        .gd-sidebar-container--rail.gd-sidebar-container--collapsed & {
             .gd-creation-panel-header h2,
-            .gd-creation-panel-header .gd-sidebar-collapse-toggle,
             .gd-visualizations-list {
                 opacity: 0;
                 visibility: hidden;
@@ -183,141 +235,26 @@ $sidebar-fade-delay: 0.3s;
     }
 }
 
+// Rail mode: the search shortcut is hidden while expanded and fades in with the rail.
 .gd-sidebar-rail-search {
     position: absolute;
     top: $sidebar-rail-search-offset;
-    left: ($sidebar-collapsed-width - $sidebar-item-size) * 0.5;
-    opacity: 0;
-    visibility: hidden;
-    transition:
-        opacity var(--sidebar-fade-duration),
-        visibility 0s linear var(--sidebar-fade-duration);
-}
-
-.gd-sidebar-rail {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: $sidebar-collapsed-width;
+    left: $sidebar-item-inset;
     opacity: 0;
     visibility: hidden;
     transition:
         opacity var(--sidebar-fade-duration),
         visibility 0s linear var(--sidebar-fade-duration);
-
-    .gd-sidebar-container--collapsed & {
-        opacity: 1;
-        visibility: visible;
-        transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
-    }
-
-    .gd-sidebar-collapse-toggle {
-        align-items: center;
-        height: $sidebar-header-height;
-        margin: 0;
-    }
 }
 
 @media (prefers-reduced-motion: reduce) {
-    .gd-sidebar-container,
-    .gd-resizable-sidebar {
+    .gd-sidebar-container {
         --sidebar-fade-duration: 0s;
         --sidebar-fade-delay: 0s;
         --sidebar-slide-duration: 0s;
     }
 }
 
-.gd-resizable-sidebar {
-    --sidebar-fade-duration: #{$sidebar-fade-length};
-    --sidebar-fade-delay: #{$sidebar-fade-delay};
-    --sidebar-slide-duration: #{variables.$sidebar-transition-length};
-
-    display: flex;
-    flex-direction: column;
-    flex: 0 0 auto;
-    transition: width var(--sidebar-slide-duration);
-
-    // Lift the wrapper above sibling main-content during drag so the indicator
-    // rail isn't covered by widgets/charts with their own stacking context.
-    &--dragging,
-    &:has(.gd-resizable-sidebar__handle:focus) {
-        z-index: 9999;
-        transition: none;
-    }
-
-    &__handle {
-        opacity: 0;
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        transform: translateX(calc(var(--drag-x, 0) - 50%));
-        z-index: 2;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 6px;
-        background: transparent;
-        border: 0;
-        cursor: col-resize;
-        // Prevent the browser from claiming the first touchmove for panning
-        // before pointer capture engages on pointerdown.
-        touch-action: none;
-
-        &:focus {
-            outline: none;
-        }
-
-        &:disabled {
-            cursor: initial;
-        }
-
-        &--dragging {
-            opacity: 1;
-        }
-
-        .gd-resizable-sidebar--resizable:hover &,
-        .gd-resizable-sidebar--resizable:focus-within & {
-            opacity: 1;
-        }
-    }
-
-    &__handle-grip {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-        height: 25px;
-        padding: 5px 3px;
-        background: var(--gd-palette-complementary-0);
-        border: 1px solid var(--gd-palette-complementary-5);
-        border-radius: 2px;
-
-        .gd-resizable-sidebar--dragging &,
-        .gd-resizable-sidebar__handle:focus & {
-            border: 2px solid kit-variables.$gd-color-highlight;
-            border-radius: 3px;
-        }
-
-        .gd-resizable-sidebar--dragging &::after,
-        .gd-resizable-sidebar__handle:focus &::after {
-            content: "";
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            z-index: -1;
-            width: 2px;
-            background: kit-variables.$gd-color-highlight;
-            box-shadow: 0 0 0 4px variables.$gd-palette-primary-base-t85;
-        }
-    }
-}
-
 .add-item-panel {
     padding: 0 7px;
 }

package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeChrome.d.ts

@@ -1,23 +0,0 @@
-import { type ReactElement, type ReactNode } from "react";
-/**
- * Internal presentational wrapper that drives the dashboard sidebar drag-to-resize interaction.
- *
- * Owns only the live drag state (drag width — used for the dashed indicator transform — and drag
- * phase). The committed width, min/max, and the editor-canvas constraint live in the shared
- * {@link useResizableSidebar} state, so the same value also feeds the content area's width via the
- * `--gd-dashboard-sidebar-width` custom property.
- *
- * Renders `.gd-sidebar-container` itself so the resize handle can be positioned absolutely inside
- * it — that element is sticky+100vh, so the handle (and the grip centered inside it) tracks the
- * visible viewport rather than the full dashboard-root height.
- *
- * Drag uses `setPointerCapture` on the handle button so pointer events keep flowing to it even
- * when the cursor leaves the 6 px hit area. No DOM overlay or window-level listener is needed.
- *
- * @internal
- */
-export declare function SidebarResizeChrome({ onContainerClick, children, }: {
-    onContainerClick?: () => void;
-    children: ReactNode;
-}): ReactElement;
-//# sourceMappingURL=SidebarResizeChrome.d.ts.map

package/esm/presentation/dashboard/DashboardSidebar/SidebarResizeChrome.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SidebarResizeChrome.d.ts","sourceRoot":"","sources":["../../../../src/presentation/dashboard/DashboardSidebar/SidebarResizeChrome.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEH,KAAK,YAAY,EACjB,KAAK,SAAS,EAIjB,MAAM,OAAO,CAAC;AAkBf;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAChC,gBAAgB,EAChB,QAAQ,GACX,EAAE;IACC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACvB,GAAG,YAAY,CAmHf"}