@spaethtech/svelte-ui 0.7.1-dev.49.421c66b → 0.7.1-dev.50.4b4666d

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -248,6 +248,24 @@
     activeMode = currentMode;
   });
 
+  // Suppress the slide/width transition for a frame whenever the MODE changes (from a resize), so the
+  // switch SNAPS instead of animating the wrong intermediate state — e.g. a labeled drawer sliding
+  // offscreen, or an expanded rail collapsing to icon. Same-mode interactions (drawer open/close,
+  // hover-expand) still animate because `currentMode` didn't change.
+  let noTransition = $state(false);
+  $effect(() => {
+    currentMode; // re-run on mode change
+    noTransition = true;
+    let r2: number | undefined;
+    const r1 = requestAnimationFrame(() => {
+      r2 = requestAnimationFrame(() => (noTransition = false));
+    });
+    return () => {
+      cancelAnimationFrame(r1);
+      if (r2 !== undefined) cancelAnimationFrame(r2);
+    };
+  });
+
   const isStepped = $derived(currentMode === "stepped");
   const isDrawer = $derived(currentMode === "drawer" || currentMode === "stepped");
   // Dock side. `right` mirrors the frame, drawer slide, hamburger corner, popout side, and item layout.
@@ -298,6 +316,17 @@
         ? `${collapsedWidth}px`
         : `${expandedWidth}px`,
   );
+  // Slide (drawer/stepped) or width (icon hover-expand) transition — suppressed on a mode change (see
+  // `noTransition`) so resizing between modes snaps rather than animating a wrong intermediate state.
+  const transitionClass = $derived(
+    noTransition
+      ? "transition-none"
+      : currentMode === "stepped" || currentMode === "drawer"
+        ? "transition-transform duration-200"
+        : currentMode === "icon" && hoverExpandActive
+          ? "transition-[width] duration-200"
+          : "",
+  );
 
   // ── DEV depth warning ───────────────────────────────────────────
   if (DEV) {
@@ -782,17 +811,17 @@
     onmouseenter={hoverExpandActive ? openHoverExpand : undefined}
     onmouseleave={hoverExpandActive ? scheduleHoverCollapse : undefined}
     class="
-		flex flex-col z-[60] overflow-hidden shrink-0
+		flex flex-col z-[60] overflow-hidden shrink-0 {transitionClass}
 		[background-color:var(--ui-color-background)]
 		[color:var(--ui-color-text)]
 		{dockBorder}
 		{currentMode === 'stepped'
-      ? `absolute inset-y-0 ${dockEdge} z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
+      ? `absolute inset-y-0 ${dockEdge} z-[75] ${open ? 'translate-x-0' : dockOff}`
       : currentMode === 'drawer'
-        ? `absolute inset-y-0 ${dockEdge} z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
+        ? `absolute inset-y-0 ${dockEdge} z-[75] ${open ? 'translate-x-0' : dockOff}`
         : currentMode === 'icon'
           ? hoverExpandActive
-            ? `absolute inset-y-0 ${dockEdge} z-[65] transition-[width] duration-200 ${effectivelyExpanded ? 'shadow-lg' : ''}`
+            ? `absolute inset-y-0 ${dockEdge} z-[65] ${effectivelyExpanded ? 'shadow-lg' : ''}`
             : 'relative'
           : 'relative'}
 		{additionalClass}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.49.421c66b",
+  "version": "0.7.1-dev.50.4b4666d",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"