more improvements

Author: mdo

scss/_datepicker.scss

@@ -52,9 +52,9 @@ $datepicker-tokens: defaults(
     color-scheme: light dark;
     background-color: var(--datepicker-bg);
     border: var(--datepicker-border-width) solid var(--datepicker-border-color);
-    @include border-radius(var(--datepicker-border-radius));
     box-shadow: var(--datepicker-box-shadow);
     opacity: 1;
+    @include border-radius(var(--datepicker-border-radius));
 
     // Respond to Bootstrap's color mode system
     &[data-bs-theme="light"] {

scss/_dialog.scss

@@ -28,6 +28,8 @@ $dialog-tokens: defaults(
     --dialog-border-width: var(--border-width),
     --dialog-border-radius: var(--border-radius-lg),
     --dialog-box-shadow: var(--box-shadow-lg),
+    --dialog-transition-duration: .3s,
+    --dialog-transition-timing: cubic-bezier(.22, 1, .36, 1),
     --dialog-backdrop-bg: rgb(0 0 0 / 50%),
     --dialog-backdrop-blur: 8px,
     --dialog-header-padding: 1rem,

scss/_menu.scss

@@ -4,6 +4,7 @@
 @use "mixins/box-shadow" as *;
 @use "mixins/gradients" as *;
 @use "mixins/tokens" as *;
+@use "mixins/transition" as *;
 
 // stylelint-disable scss/dollar-variable-default, custom-property-no-missing-var-function
 $menu-tokens: () !default;
@@ -45,6 +46,8 @@ $menu-tokens: defaults(
     --menu-header-color: var(--fg-3),
     --menu-header-padding-x: .75rem,
     --menu-header-padding-y: .25rem,
+    --menu-transition-duration: .15s,
+    --menu-transition-timing: cubic-bezier(.22, 1, .36, 1),
   ),
   $menu-tokens
 );
@@ -76,9 +79,43 @@ $menu-tokens: defaults(
     border: var(--menu-border-width, var(--border-width)) solid var(--menu-border-color, var(--border-color-translucent));
     @include border-radius(var(--menu-border-radius, var(--border-radius-lg)));
     @include box-shadow(var(--menu-box-shadow));
+    opacity: 0;
+    transform: scale(.95);
+    transform-origin: top start;
+
+    &[data-bs-placement^="top"] {
+      transform-origin: bottom start;
+    }
+
+    &[data-bs-placement="bottom-end"] {
+      transform-origin: top end;
+    }
+
+    &[data-bs-placement="top-end"] {
+      transform-origin: bottom end;
+    }
+
+    &[data-bs-placement^="left"] {
+      transform-origin: top end;
+    }
+
+    @include transition(
+      opacity var(--menu-transition-duration) var(--menu-transition-timing),
+      transform var(--menu-transition-duration) var(--menu-transition-timing),
+      display var(--menu-transition-duration) allow-discrete
+    );
 
     &.show {
       display: flex;
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @starting-style {
+    .menu.show {
+      opacity: 0;
+      transform: scale(.95);
     }
   }
 

site/src/assets/partials/sidebar.js

@@ -27,4 +27,28 @@ export default () => {
   if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) {
     sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2)
   }
+
+  // Scroll the drawer body to the active link when the sidebar drawer opens.
+  // Uses `show` + requestAnimationFrame so the scroll is set before the
+  // slide-in transition renders, avoiding a visible jump.
+  const bdSidebar = document.querySelector('#bdSidebar')
+
+  if (bdSidebar) {
+    bdSidebar.addEventListener('show.bs.drawer', () => {
+      requestAnimationFrame(() => {
+        const drawerBody = bdSidebar.querySelector('.drawer-body')
+        const activeLink = bdSidebar.querySelector('.bd-links-nav .active')
+
+        if (!drawerBody || !activeLink) {
+          return
+        }
+
+        const activeLinkTop = activeLink.getBoundingClientRect().top - drawerBody.getBoundingClientRect().top + drawerBody.scrollTop
+        const drawerBodyHeight = drawerBody.clientHeight
+        const activeLinkHeight = activeLink.clientHeight
+
+        drawerBody.scrollTop = activeLinkTop - (drawerBodyHeight / 2) + (activeLinkHeight / 2)
+      })
+    })
+  }
 }

site/src/scss/_ads.scss

@@ -34,7 +34,7 @@
     }
   }
 
-  @container (max-width: 240px) {
+  @container (max-width: 300px) {
     #carbonads {
       position: sticky;
       bottom: 0;