@spaethtech/svelte-ui 0.7.1-dev.43.72e77ad → 0.7.1-dev.44.97afb0d

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
@@ -505,7 +520,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 +579,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 +608,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}
@@ -706,7 +723,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)}
@@ -741,14 +760,14 @@
 		flex flex-col z-[60] overflow-hidden
 		[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} w-full 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} w-[var(--sbm-expanded-w)] 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)]'}`
+            ? `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)]'}
 		{additionalClass}
@@ -780,7 +799,7 @@
             <Popup
               anchor={geom.anchor}
               open={openId === id}
-              side="right"
+              side={popoutSide}
               align={geom.align}
               offset={0}
               onclose={() => {
@@ -816,7 +835,7 @@
             <Popup
               anchor={geom.anchor}
               open={openId === id}
-              side="right"
+              side={popoutSide}
               align={geom.align}
               offset={0}
               onclose={() => {

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.44.97afb0d",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"