@spaethtech/svelte-ui 0.7.1-dev.44.97afb0d → 0.7.1-dev.46.8e420d1

package/dist/components/Popup.svelte

@@ -35,6 +35,7 @@
     align = "start",
     boundary = "viewport",
     offset = 4,
+    margin = 8,
     matchWidth = false,
     surface = false,
     variant,
@@ -51,6 +52,9 @@
     /** Default the viewport; pass a container element or CSS selector to bound flipping to it. */
     boundary?: Boundary;
     offset?: number;
+    /** Minimum gap kept from the boundary edges, in px (default 8). Set `0` to let the box sit flush
+     *  against an edge — e.g. a sidebar popout that must align to the sidebar's (viewport) edge. */
+    margin?: number;
     matchWidth?: boolean;
     /** Render a themed floating PANEL around the children (background, border, padding, shadow) instead
      *  of the default bare positioner. `variant`/`size`/`borderless` configure that panel. Consumers
@@ -132,6 +136,7 @@
     align,
     boundary,
     offset,
+    margin,
     matchWidth,
     onplaced: (p) => (placed = p),
   }}

package/dist/components/Popup.svelte.d.ts

@@ -12,6 +12,9 @@ type $$ComponentProps = {
     /** Default the viewport; pass a container element or CSS selector to bound flipping to it. */
     boundary?: Boundary;
     offset?: number;
+    /** Minimum gap kept from the boundary edges, in px (default 8). Set `0` to let the box sit flush
+     *  against an edge — e.g. a sidebar popout that must align to the sidebar's (viewport) edge. */
+    margin?: number;
     matchWidth?: boolean;
     /** Render a themed floating PANEL around the children (background, border, padding, shadow) instead
      *  of the default bare positioner. `variant`/`size`/`borderless` configure that panel. Consumers

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -216,8 +216,13 @@
     return active;
   }
 
-  // SSR-safe default — the effect below corrects on mount.
-  let currentMode = $state<SideBarMenuMode>("expanded");
+  // Resolve the mode synchronously on the CLIENT at init (from the real viewport width) so the first
+  // client render is already correct — no post-hydration flash from `expanded` → the actual mode. On
+  // the server `window` is undefined, so SSR emits `expanded`; the client corrects during hydration
+  // (not via a delayed effect). The effect below keeps it in sync on subsequent viewport changes.
+  let currentMode = $state<SideBarMenuMode>(
+    typeof window !== "undefined" ? resolveMode(effectiveModes, window.innerWidth) : "expanded",
+  );
 
   $effect(() => {
     const map = effectiveModes;
@@ -276,6 +281,15 @@
   // Labels show in every mode except a collapsed (not hover-expanded) icon rail.
   const labelsVisible = $derived(currentMode !== "icon" || effectivelyExpanded);
 
+  // Aside width in px, driven by mode (inline style — robust, no Tailwind arbitrary-var class).
+  const asideWidthCss = $derived(
+    currentMode === "stepped"
+      ? "100%"
+      : currentMode === "icon" && !effectivelyExpanded
+        ? `${collapsedWidth}px`
+        : `${expandedWidth}px`,
+  );
+
   // ── DEV depth warning ───────────────────────────────────────────
   if (DEV) {
     const walk = (list: SideBarMenuItem[], depth: number, path: string[]) => {
@@ -699,7 +713,8 @@
     role="menu"
     tabindex="-1"
     id={popoutId}
-    class="w-[var(--sbm-expanded-w)] overflow-hidden shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] {borderClass}"
+    style="width: {expandedWidth}px;"
+    class="overflow-hidden shadow-lg [background-color:var(--ui-color-background)] [color:var(--ui-color-text)] [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] {borderClass}"
     onmouseenter={cancelClose}
     onmouseleave={scheduleClose}
   >
@@ -749,27 +764,28 @@
      width, so the expanded float below is positioned against the SIDEBAR's own box (container-relative,
      never the viewport). In every other mode it's `display: contents` (no box) so layout is unchanged. -->
 <div
-  class={hoverExpandActive ? "relative shrink-0 [width:var(--sbm-collapsed-w)]" : "contents"}
-  style="--sbm-collapsed-w: {collapsedWidth}px; --sbm-expanded-w: {expandedWidth}px;"
+  class={hoverExpandActive ? "relative shrink-0" : "contents"}
+  style="{hoverExpandActive ? `width: ${collapsedWidth}px;` : ''}"
 >
   <aside
     bind:this={asideRef}
+    style="width: {asideWidthCss};"
     onmouseenter={hoverExpandActive ? openHoverExpand : undefined}
     onmouseleave={hoverExpandActive ? scheduleHoverCollapse : undefined}
     class="
-		flex flex-col z-[60] overflow-hidden
+		flex flex-col z-[60] overflow-hidden shrink-0
 		[background-color:var(--ui-color-background)]
 		[color:var(--ui-color-text)]
 		{dockBorder}
 		{currentMode === 'stepped'
-      ? `absolute inset-y-0 ${dockEdge} w-full z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
+      ? `absolute inset-y-0 ${dockEdge} z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
       : currentMode === 'drawer'
-        ? `absolute inset-y-0 ${dockEdge} w-[var(--sbm-expanded-w)] z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
+        ? `absolute inset-y-0 ${dockEdge} z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
         : currentMode === 'icon'
           ? hoverExpandActive
-            ? `absolute inset-y-0 ${dockEdge} z-[65] transition-[width] duration-200 ${effectivelyExpanded ? 'w-[var(--sbm-expanded-w)] shadow-lg' : 'w-[var(--sbm-collapsed-w)]'}`
-            : 'relative w-[var(--sbm-collapsed-w)]'
-          : 'relative w-[var(--sbm-expanded-w)]'}
+            ? `absolute inset-y-0 ${dockEdge} z-[65] transition-[width] duration-200 ${effectivelyExpanded ? 'shadow-lg' : ''}`
+            : 'relative'
+          : 'relative'}
 		{additionalClass}
 	"
   >
@@ -802,6 +818,7 @@
               side={popoutSide}
               align={geom.align}
               offset={0}
+              margin={0}
               onclose={() => {
                 if (openId === id) openId = null;
               }}
@@ -838,6 +855,7 @@
               side={popoutSide}
               align={geom.align}
               offset={0}
+              margin={0}
               onclose={() => {
                 if (openId === id) openId = null;
               }}

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export type { Columns, Gap } from "./components/field-group.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
-export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, } from "./components/SideBarMenu/SideBarMenu.svelte";
+export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";
 export type { TabDefinition } from "./components/TabStrip/TabStrip.svelte";
 export { default as DataTable } from "./components/DataTable.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.44.97afb0d",
+  "version": "0.7.1-dev.46.8e420d1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"