@spaethtech/svelte-ui 0.7.1-dev.43.72e77ad → 0.7.1-dev.45.41387ea

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

@@ -123,6 +123,7 @@
     hamburger = true,
     iconHoverExpand = false,
     hoverExpandCloseMs = 200,
+    side = "left",
     api = $bindable(),
     class: additionalClass = "",
   }: {
@@ -178,6 +179,10 @@
     iconHoverExpand?: boolean;
     /** Exit delay (ms) before a hover-expanded rail collapses on mouse-leave. Default `200`. */
     hoverExpandCloseMs?: number;
+    /** Which edge the sidebar docks to. `"right"` mirrors everything: the frame border, the drawer
+     *  slide direction, the hamburger corner, popout side + border, and item layout (icon on the
+     *  right, labels right-aligned). Default `"left"`. */
+    side?: "left" | "right";
     /** Imperative handle (bindable). Call `api.reset()` from your router's navigation lifecycle
      *  (SvelteKit `afterNavigate`, etc.) so a programmatic `goto()`/back-button closes the drawer +
      *  any open popout and returns a stepped drawer to the top. */
@@ -231,6 +236,16 @@
 
   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.
+  const dockRight = $derived(side === "right");
+  const popoutSide = $derived<"left" | "right">(dockRight ? "left" : "right");
+  const dockEdge = $derived(dockRight ? "right-0" : "left-0");
+  const dockOff = $derived(dockRight ? "translate-x-full" : "-translate-x-full");
+  const dockBorder = $derived(
+    dockRight
+      ? "[border-left:1px_solid_color-mix(in_srgb,var(--ui-color-text)_15%,transparent)]"
+      : "[border-right:1px_solid_color-mix(in_srgb,var(--ui-color-text)_15%,transparent)]",
+  );
 
   // ── Icon-mode hover-expand ──────────────────────────────────────
   // When enabled + in `icon` mode, hovering the rail floats it out to the `expanded` render OVER a
@@ -261,6 +276,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[]) => {
@@ -505,7 +529,7 @@
     // height get clamped to the viewport by the `anchored` engine
     // boundary. That case also needs in-popout scroll (TODO) and
     // the border rule may need to account for viewport-edge cases.
-    let borderClass = "border-r";
+    let borderClass = dockRight ? "border-l" : "border-r";
     if (group === "bottom") {
       borderClass += spans ? " border-t" : " border-t border-b";
     } else {
@@ -564,7 +588,9 @@
 	     what `truncate` (overflow-hidden + text-ellipsis) needs to
 	     actually clip overflow. Without `min-w-0` the label refuses
 	     to shrink past its natural width and the row overflows. -->
-  <span class="flex-1 min-w-0 truncate {labelClassResolved} {sz.text}">{item.label}</span>
+  <span class="flex-1 min-w-0 truncate {dockRight ? 'text-right' : ''} {labelClassResolved} {sz.text}"
+    >{item.label}</span
+  >
   {#if isParent}
     <!-- Chevron — visible only when the label is visible (no point
 		     dangling a `>` next to an icon-only icon). Rotates 180° to
@@ -591,7 +617,7 @@
   {@const hasLink = !!item.link}
   {@const isOpen = !!opts.id && openId === opts.id}
   {@const popoutId = opts.id ? "sbm-popout-" + opts.id.replace(":", "-") : undefined}
-  {@const rowClass = `group flex items-center w-full ${sz.row} lg:pr-3 transition-colors cursor-pointer ${active ? "[background-color:var(--ui-color-primary)] text-white" : isOpen ? "[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]" : "hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]"}`}
+  {@const rowClass = `group flex items-center w-full ${sz.row} ${dockRight ? "flex-row-reverse lg:pl-3" : "lg:pr-3"} transition-colors cursor-pointer ${active ? "[background-color:var(--ui-color-primary)] text-white" : isOpen ? "[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]" : "hover:[background-color:color-mix(in_srgb,var(--ui-color-text)_10%,transparent)]"}`}
   {#if hasLink}
     <a
       href={item.link}
@@ -682,7 +708,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}
   >
@@ -706,7 +733,9 @@
 	     to suppress this when the consumer provides its own trigger. -->
   <button
     type="button"
-    class="fixed top-3 left-3 z-[80] inline-flex w-10 h-10 items-center justify-center cursor-pointer [background-color:var(--ui-color-background)] border [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] shadow-md [&_svg]:w-5 [&_svg]:h-5"
+    class="fixed top-3 {dockRight
+      ? 'right-3'
+      : 'left-3'} z-[80] inline-flex w-10 h-10 items-center justify-center cursor-pointer [background-color:var(--ui-color-background)] border [border-color:color-mix(in_srgb,var(--ui-color-text)_15%,transparent)] shadow-md [&_svg]:w-5 [&_svg]:h-5"
     aria-label={open ? "Close menu" : "Open menu"}
     aria-expanded={open}
     onclick={() => (open = !open)}
@@ -730,27 +759,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)]
-		[border-right:1px_solid_color-mix(in_srgb,var(--ui-color-text)_15%,transparent)]
+		{dockBorder}
 		{currentMode === 'stepped'
-      ? `absolute inset-y-0 left-0 w-full z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : '-translate-x-full'}`
+      ? `absolute inset-y-0 ${dockEdge} z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
       : currentMode === 'drawer'
-        ? `absolute inset-y-0 left-0 w-[var(--sbm-expanded-w)] z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : '-translate-x-full'}`
+        ? `absolute inset-y-0 ${dockEdge} z-[75] transition-transform duration-200 ${open ? 'translate-x-0' : dockOff}`
         : currentMode === 'icon'
           ? hoverExpandActive
-            ? `absolute inset-y-0 left-0 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}
 	"
   >
@@ -780,9 +810,10 @@
             <Popup
               anchor={geom.anchor}
               open={openId === id}
-              side="right"
+              side={popoutSide}
               align={geom.align}
               offset={0}
+              margin={0}
               onclose={() => {
                 if (openId === id) openId = null;
               }}
@@ -816,9 +847,10 @@
             <Popup
               anchor={geom.anchor}
               open={openId === id}
-              side="right"
+              side={popoutSide}
               align={geom.align}
               offset={0}
+              margin={0}
               onclose={() => {
                 if (openId === id) openId = null;
               }}

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

@@ -127,6 +127,10 @@ type $$ComponentProps = {
     iconHoverExpand?: boolean;
     /** Exit delay (ms) before a hover-expanded rail collapses on mouse-leave. Default `200`. */
     hoverExpandCloseMs?: number;
+    /** Which edge the sidebar docks to. `"right"` mirrors everything: the frame border, the drawer
+     *  slide direction, the hamburger corner, popout side + border, and item layout (icon on the
+     *  right, labels right-aligned). Default `"left"`. */
+    side?: "left" | "right";
     /** Imperative handle (bindable). Call `api.reset()` from your router's navigation lifecycle
      *  (SvelteKit `afterNavigate`, etc.) so a programmatic `goto()`/back-button closes the drawer +
      *  any open popout and returns a stepped drawer to the top. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.43.72e77ad",
+  "version": "0.7.1-dev.45.41387ea",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"