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

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -471,16 +471,23 @@
   // `inline`) so its SVG stays centered; otherwise the same logic.
   const labelClass = $derived(labelsVisible ? "inline" : "hidden");
   const chevronVisibility = $derived(labelsVisible ? "inline-flex" : "hidden");
-  // The corresponding "label is currently visible" check used to disable
-  // tooltips at the expanded breakpoint. We don't have direct access to
-  // the media query here without an effect, so we always pass the tooltip
-  // the label text and let the tooltip's own `disabled` option be flipped
-  // off by the popout-open state; when the label is on-screen the user
-  // has no reason to hover for it anyway.
+  // Row tooltips exist ONLY to surface a label the rail can't show. That's a single case: a collapsed
+  // `icon` rail that does NOT hover-expand. When labels are already visible (`expanded`/`drawer`/
+  // `stepped`), or the rail hover-expands to reveal them (`iconHoverExpand`), the tooltip is redundant
+  // noise — suppress it. (Per-row `disabled` also drops the tooltip while that parent's popout is open.)
+  const tooltipSuppressed = $derived(labelsVisible || hoverExpandActive);
 
   // ── Active state ────────────────────────────────────────────────
+  // Match on a SEGMENT boundary, not a raw prefix: a link is active when the current path equals it
+  // or is nested under it (`/x` matches `/x/y` but not `/xyz`). `/` (a Home/root link) matches ONLY
+  // the exact root — otherwise it would light up on every page (every path starts with "/").
+  function pathMatches(link: string, path: string): boolean {
+    if (link === path) return true;
+    if (link === "/") return false;
+    return path.startsWith(link.endsWith("/") ? link : link + "/");
+  }
   function isItemActive(item: SideBarMenuItem): boolean {
-    if (item.link && currentPath.startsWith(item.link)) return true;
+    if (item.link && pathMatches(item.link, currentPath)) return true;
     if (item.children?.length) return item.children.some(isItemActive);
     return false;
   }
@@ -654,7 +661,7 @@
 <!-- Single row template — used by items / bottomItems and the popout. -->
 {#snippet row(item: SideBarMenuItem, opts: { id?: ItemId; isPopoutChild?: boolean })}
   {@const active = isItemActive(item)}
-  {@const ownActive = !!item.link && currentPath.startsWith(item.link)}
+  {@const ownActive = !!item.link && pathMatches(item.link, currentPath)}
   {@const hasChildren = (item.children?.length ?? 0) > 0}
   {@const isParent = (hasChildren || !!item.popout) && !opts.isPopoutChild}
   {@const hasLink = !!item.link}
@@ -673,8 +680,8 @@
       aria-controls={isParent && isOpen ? popoutId : undefined}
       use:tooltip={{
         text: item.label,
-        side: "right",
-        disabled: isParent && opts.id ? openId === opts.id : false,
+        side: popoutSide,
+        disabled: tooltipSuppressed || (isParent && opts.id ? openId === opts.id : false),
       }}
       onmouseenter={isParent && opts.id && !isStepped ? () => openOnHover(opts.id!) : undefined}
       onmouseleave={isParent && opts.id && !isStepped ? scheduleClose : undefined}
@@ -710,7 +717,7 @@
       aria-haspopup="menu"
       aria-expanded={openId === opts.id}
       aria-controls={isOpen ? popoutId : undefined}
-      use:tooltip={{ text: item.label, side: "right", disabled: openId === opts.id }}
+      use:tooltip={{ text: item.label, side: popoutSide, disabled: tooltipSuppressed || openId === opts.id }}
       onmouseenter={!isStepped ? () => openOnHover(opts.id!) : undefined}
       onmouseleave={!isStepped ? scheduleClose : undefined}
       onclick={() => (isStepped ? stepIntoChildren(item) : toggleOnClick(opts.id!))}
@@ -724,7 +731,7 @@
       type="button"
       use:refIntoMap={opts.id}
       class="{rowClass} text-left"
-      use:tooltip={{ text: item.label, side: "right" }}
+      use:tooltip={{ text: item.label, side: popoutSide, disabled: tooltipSuppressed }}
       onclick={(e) => {
         item.onclick!(e);
         closeAfterNav();

package/dist/positioning/anchored.js

@@ -108,15 +108,34 @@ export function anchored(node, params) {
     const onScrollResize = () => place();
     window.addEventListener("scroll", onScrollResize, { passive: true, capture: true });
     window.addEventListener("resize", onScrollResize, { passive: true });
+    // Re-place when the ANCHOR (or the floating box) changes size — not just on window resize. A CSS
+    // transition on the anchor (e.g. a sidebar rail animating its width open) moves the edge we're
+    // glued to; without this the box stays pinned to the anchor's size at open-time. Observing `node`
+    // too keeps us placed if the content reflows.
+    let ro;
+    function observe(anchor) {
+        ro?.disconnect();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        ro ??= new ResizeObserver(() => place());
+        if (anchor)
+            ro.observe(anchor);
+        ro.observe(node);
+    }
+    observe(params.anchor);
     place();
     return {
         update(next) {
+            const anchorChanged = next.anchor !== current.anchor;
             current = next;
+            if (anchorChanged)
+                observe(next.anchor);
             place();
         },
         destroy() {
             window.removeEventListener("scroll", onScrollResize, { capture: true });
             window.removeEventListener("resize", onScrollResize);
+            ro?.disconnect();
         },
     };
 }

package/package.json

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