@gooddata/sdk-ui-dashboard 11.56.0-alpha.7 → 11.56.0

package/styles/css/sidebar.css

@@ -7,24 +7,189 @@
    Variables
    ========================================================================== */
 .gd-sidebar-container {
+  --sidebar-fade-duration: 0.2s;
+  --sidebar-fade-delay: 0.3s;
+  --sidebar-slide-duration: 0.5s;
   position: sticky;
   top: 0;
   width: 230px;
   height: 100vh;
   border-right: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  transition: width var(--sidebar-slide-duration);
 }
 .gd-sidebar-container--resizable {
   min-width: 230px;
   width: 100%;
 }
+.gd-sidebar-container--collapsed {
+  min-width: 48px;
+  width: 48px;
+}
+.gd-sidebar-container--resizable.gd-sidebar-container--collapsed {
+  width: 100%;
+}
 
+.gd-creation-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gd-sidebar-collapse-toggle {
+  display: flex;
+  margin: 0 10px;
+}
+
+.gd-sidebar-panel {
+  height: 100%;
+}
+.gd-sidebar-panel--collapsible {
+  overflow: hidden;
+}
+.gd-sidebar-panel--collapsible .add-item-placeholder {
+  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;
+}
+.gd-sidebar-panel--collapsible .gd-creation-panel-header {
+  height: 48px;
+  border-bottom: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+}
+.gd-sidebar-panel--collapsible .gd-creation-panel-header h2 {
+  margin-bottom: 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;
+  flex-direction: column;
+  gap: 5px;
+  padding: 0 8px;
+}
+.gd-sidebar-panel--collapsible .configuration-category {
+  margin-bottom: 0;
+  padding-top: 10px;
+}
+.gd-sidebar-panel--collapsible .configuration-category:not(.flex-panel-item-stretch) {
+  flex: 0 0 auto;
+}
+.gd-sidebar-panel--collapsible .configuration-category-vis {
+  position: relative;
+}
+.gd-sidebar-panel--collapsible .configuration-category-vis::before {
+  content: "";
+  position: absolute;
+  top: 10px;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--gd-palette-complementary-3, #dde4eb);
+  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 .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 {
+  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 {
+  align-items: flex-start;
+}
+.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 {
+  transform: translateX(calc(-50% + 1px));
+}
+.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 {
+  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 {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+}
+
+.gd-sidebar-rail-search {
+  position: absolute;
+  top: 21px;
+  left: 8px;
+  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: 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 {
+    --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;

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;ACGA;EACI;EACA;EACA;EACA;EACA,cCqES;;ADnET;EACI;EACA;;;AAIR;EACI;EACA;EACA;;AAIA;EAEI;;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,YErFS;EFsFT;;;AAKZ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OE9EY;EF+EZ;;AAEA;EACI,OE3FY;EF4FZ;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,OE9KmB;;;AFiLvB;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;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;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAEA;EACI;EACA;EACA,KA/Gc;EAgHd;EACA;EACA,YC5CH;ED6CG;EACA;EACA,YACI;;AAMR;AAAA;AAAA;EAGI;EACA;EACA,YACI;;AAIR;EACI;;AAGJ;EACI,OA5II;EA6IJ;EACA;EACA;EACA,YACI;;AAIR;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;AAAA;EAEI;EACA;EACA;;;AAMhB;EACI;EACA,KA1KyB;EA2KzB;EACA;EACA;EACA,YACI;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OAjMsB;EAkMtB;EACA;EACA,YACI;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA,QA9MgB;EA+MhB;;;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,YE5SS;EF6ST;;;AAKZ;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,OErSY;EFsSZ;;AAEA;EACI,OElTY;EFmTZ;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,OErYmB;;;AFwYvB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA","file":"sidebar.css"}

package/styles/css/visualizationSwitcherWidget.css

@@ -74,4 +74,12 @@
   visibility: hidden;
 }
 
+.gd-visualization-switcher-widget-header-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+}
+
 /*# sourceMappingURL=visualizationSwitcherWidget.css.map */

package/styles/css/visualizationSwitcherWidget.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","../scss/visualizationSwitcherWidget.scss","../scss/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACDA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIA;EACI;;AAEA;EAEI;EACA;EACA;EACA;EACA,OC0E2B;EDzE3B;EACA;EACA;EACA;EACA;EACA;;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,OE3BQ;;;AF+BhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA","file":"visualizationSwitcherWidget.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","../scss/visualizationSwitcherWidget.scss","../scss/_variables.scss","../../node_modules/@gooddata/sdk-ui-kit/styles/scss/variables.scss"],"names":[],"mappings":"AA0HA;AA4DA;ACjLA;AAAA;AAAA;ACDA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;AAAA;EAEI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAIA;EACI;;AAEA;EAEI;EACA;EACA;EACA;EACA,OC0E2B;EDzE3B;EACA;EACA;EACA;EACA;EACA;;;AAMhB;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI,OE3BQ;;;AF+BhB;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;;AAIR;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA","file":"visualizationSwitcherWidget.css"}

package/styles/scss/configurationPanel.scss

@@ -58,12 +58,6 @@
     }
 }
 
-.creation-panel {
-    h3 {
-        padding-left: 15px;
-    }
-}
-
 // sdk-edit-mode-on is in selector to override same classes in KD.
 // Can be removed when old implementation in KD removed
 .gd-configuration-bubble-wrapper.overlay-wrapper.sdk-edit-mode-on {
@@ -300,7 +294,7 @@
         }
 
         .gd-input-search {
-            margin: 0 15px 10px;
+            margin: 10px 15px 10px;
         }
 
         .attribute-select {

package/styles/scss/filterBar.scss

@@ -4,6 +4,7 @@
 @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;
+@use "@gooddata/sdk-ui-kit/styles/scss/maqlPalette" as maql-palette;
 @use "@gooddata/sdk-ui-kit/styles/scss/mixins" as mixins;
 
 $attribute-filter-drag-handle-left: 10px;
@@ -472,6 +473,43 @@ $attribute-filter-drag-handle-left: 10px;
             color: kit-variables.$gd-color-state-blank;
             text-transform: lowercase;
         }
+
+        .gd-maql-token-object,
+        .gd-maql-token-attribute-element {
+            font-weight: bold;
+            color: kit-variables.$gd-color-text;
+        }
+
+        .gd-maql-token-fact {
+            color: maql-palette.$maql-fact;
+        }
+
+        .gd-maql-token-measure,
+        .gd-maql-token-metric {
+            color: maql-palette.$maql-metric;
+        }
+
+        .gd-maql-token-attribute,
+        .gd-maql-token-computedAttribute {
+            color: maql-palette.$maql-attribute;
+        }
+
+        .gd-maql-token-displayForm,
+        .gd-maql-token-attributeDisplayForm {
+            color: maql-palette.$maql-attribute-display-form;
+        }
+
+        .gd-maql-token-attribute-element {
+            color: maql-palette.$maql-attribute-element;
+        }
+
+        .gd-maql-token-dataSet {
+            color: maql-palette.$maql-dataset;
+        }
+
+        .gd-maql-token-parameter {
+            color: maql-palette.$maql-parameter;
+        }
     }
 }
 

package/styles/scss/sidebar.scss

@@ -5,29 +5,244 @@
 @use "@gooddata/sdk-ui-kit/styles/scss/Button/variables" as button-variables;
 @use "@gooddata/sdk-ui-kit/styles/scss/variables" as kit-variables;
 
+$sidebar-collapsed-width: 48px;
+$sidebar-icon-size: 18px;
+$sidebar-header-height: 48px;
+$sidebar-item-size: 32px;
+$sidebar-rail-divider-offset: 10px;
+$sidebar-rail-search-gap: 10px;
+$sidebar-rail-search-offset: $sidebar-rail-divider-offset + variables.$nav-border-size +
+    $sidebar-rail-search-gap;
+$sidebar-fade-length: 0.2s;
+$sidebar-fade-delay: 0.3s;
+
 .gd-sidebar-container {
+    --sidebar-fade-duration: #{$sidebar-fade-length};
+    --sidebar-fade-delay: #{$sidebar-fade-delay};
+    --sidebar-slide-duration: #{variables.$sidebar-transition-length};
+
     position: sticky;
     top: 0;
     width: 230px;
     height: 100vh;
     border-right: variables.$nav-border;
+    transition: width var(--sidebar-slide-duration);
 
     &--resizable {
         min-width: 230px;
         width: 100%;
     }
+
+    &--collapsed {
+        min-width: $sidebar-collapsed-width;
+        width: $sidebar-collapsed-width;
+    }
+
+    &--resizable#{&}--collapsed {
+        width: 100%;
+    }
+}
+
+.gd-creation-panel-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.gd-sidebar-collapse-toggle {
+    display: flex;
+    margin: 0 10px;
+}
+
+.gd-sidebar-panel {
+    height: 100%;
+
+    &--collapsible {
+        overflow: hidden;
+
+        .add-item-placeholder {
+            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 {
+            padding-top: 0;
+        }
+
+        .gd-creation-panel-header {
+            height: $sidebar-header-height;
+            border-bottom: variables.$nav-border;
+
+            h2 {
+                margin-bottom: 0;
+                color: var(--gd-palette-complementary-8, #464e56);
+                transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+            }
+        }
+
+        .add-item-panel {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            padding: 0 (($sidebar-collapsed-width - $sidebar-item-size) * 0.5);
+        }
+
+        .configuration-category {
+            margin-bottom: 0;
+            padding-top: 10px;
+        }
+
+        .configuration-category:not(.flex-panel-item-stretch) {
+            flex: 0 0 auto;
+        }
+
+        .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-creation-panel-header h2,
+            .gd-creation-panel-header .gd-sidebar-collapse-toggle,
+            .gd-visualizations-list {
+                opacity: 0;
+                visibility: hidden;
+                transition:
+                    opacity var(--sidebar-fade-duration),
+                    visibility 0s linear var(--sidebar-fade-duration);
+            }
+
+            .add-item-panel {
+                align-items: flex-start;
+            }
+
+            .add-item-placeholder {
+                width: $sidebar-item-size;
+                padding: 0;
+                overflow: hidden;
+                color: transparent;
+                transition:
+                    color var(--sidebar-fade-duration),
+                    padding 0s linear var(--sidebar-fade-duration);
+            }
+
+            .add-item-placeholder.add-panel-item svg {
+                transform: translateX(calc(-50% + 1px));
+            }
+
+            .add-item-placeholder::before {
+                width: $sidebar-collapsed-width - 16px;
+            }
+
+            .add-item-placeholder.add-panel-item .gd-add-item-placeholder-help-trigger {
+                display: none;
+            }
+
+            .configuration-category-vis::before,
+            .gd-sidebar-rail-search {
+                opacity: 1;
+                visibility: visible;
+                transition: opacity var(--sidebar-fade-duration) var(--sidebar-fade-delay);
+            }
+        }
+    }
+}
+
+.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;
+    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 {
+        --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 {

package/styles/scss/visualizationSwitcherWidget.scss

@@ -84,3 +84,12 @@
     overflow: hidden;
     visibility: hidden;
 }
+
+// keeps the lock of a restricted entry on the same line as its title
+.gd-visualization-switcher-widget-header-title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    min-width: 0;
+}