@spaethtech/svelte-ui 0.7.1-dev.42.aca96e0 → 0.7.1-dev.44.97afb0d

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -121,6 +121,9 @@
     open = $bindable(false),
     stepLevel = $bindable(0),
     hamburger = true,
+    iconHoverExpand = false,
+    hoverExpandCloseMs = 200,
+    side = "left",
     api = $bindable(),
     class: additionalClass = "",
   }: {
@@ -171,6 +174,15 @@
      * and binds to `open`.
      */
     hamburger?: boolean;
+    /** In `icon` mode, expand the rail to `expanded` ON HOVER — as a floating overlay over a spacer
+     *  that reserves the collapsed width, so page content never reflows. Default `false`. */
+    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. */
@@ -224,7 +236,45 @@
 
   const isStepped = $derived(currentMode === "stepped");
   const isDrawer = $derived(currentMode === "drawer" || currentMode === "stepped");
-  const labelsVisible = $derived(currentMode !== "icon");
+  // 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
+  // spacer that reserves the collapsed width — page content never reflows. Exit is delayed.
+  let hoverExpanded = $state(false);
+  let hoverExpandTimer: ReturnType<typeof setTimeout> | null = null;
+  const hoverExpandActive = $derived(iconHoverExpand && currentMode === "icon");
+  const effectivelyExpanded = $derived(hoverExpandActive && hoverExpanded);
+  function openHoverExpand() {
+    if (hoverExpandTimer) {
+      clearTimeout(hoverExpandTimer);
+      hoverExpandTimer = null;
+    }
+    if (hoverExpandActive) hoverExpanded = true;
+  }
+  function scheduleHoverCollapse() {
+    if (hoverExpandTimer) clearTimeout(hoverExpandTimer);
+    hoverExpandTimer = setTimeout(() => {
+      hoverExpanded = false;
+      openId = null;
+      hoverExpandTimer = null;
+    }, hoverExpandCloseMs);
+  }
+  $effect(() => {
+    if (!hoverExpandActive) hoverExpanded = false;
+  });
+
+  // Labels show in every mode except a collapsed (not hover-expanded) icon rail.
+  const labelsVisible = $derived(currentMode !== "icon" || effectivelyExpanded);
 
   // ── DEV depth warning ───────────────────────────────────────────
   if (DEV) {
@@ -470,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 {
@@ -529,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
@@ -555,7 +607,8 @@
   {@const isParent = (hasChildren || !!item.popout) && !opts.isPopoutChild}
   {@const hasLink = !!item.link}
   {@const isOpen = !!opts.id && openId === opts.id}
-  {@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 popoutId = opts.id ? "sbm-popout-" + opts.id.replace(":", "-") : undefined}
+  {@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}
@@ -563,6 +616,9 @@
       class={rowClass}
       data-sveltekit-reload={item.reload ? "" : undefined}
       aria-current={ownActive ? "page" : undefined}
+      aria-haspopup={isParent ? "menu" : undefined}
+      aria-expanded={isParent && opts.id ? isOpen : undefined}
+      aria-controls={isParent && isOpen ? popoutId : undefined}
       use:tooltip={{
         text: item.label,
         side: "right",
@@ -601,6 +657,7 @@
       class="{rowClass} text-left"
       aria-haspopup="menu"
       aria-expanded={openId === opts.id}
+      aria-controls={isOpen ? popoutId : undefined}
       use:tooltip={{ text: item.label, side: "right", disabled: openId === opts.id }}
       onmouseenter={!isStepped ? () => openOnHover(opts.id!) : undefined}
       onmouseleave={!isStepped ? scheduleClose : undefined}
@@ -636,11 +693,12 @@
      mirrors main strip styling. `borderClass` is computed per popout
      by `geometryFor` so the visible edges get borders and the edges
      that coincide with the sidebar's top/bottom don't. -->
-{#snippet popout(item: SideBarMenuItem, borderClass: string)}
+{#snippet popout(item: SideBarMenuItem, borderClass: string, popoutId: string)}
   <!-- svelte-ignore a11y_interactive_supports_focus -->
   <div
     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}"
     onmouseenter={cancelClose}
     onmouseleave={scheduleClose}
@@ -665,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)}
@@ -685,24 +745,34 @@
   ></div>
 {/if}
 
-<aside
-  bind:this={asideRef}
+<!-- Root wrapper. In icon hover-expand it becomes a `relative` spacer reserving the collapsed rail
+     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="
+>
+  <aside
+    bind:this={asideRef}
+    onmouseenter={hoverExpandActive ? openHoverExpand : undefined}
+    onmouseleave={hoverExpandActive ? scheduleHoverCollapse : undefined}
+    class="
 		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'}`
-    : 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'}`
-      : currentMode === 'icon'
-        ? 'relative w-[var(--sbm-collapsed-w)]'
-        : 'relative w-[var(--sbm-expanded-w)]'}
+      ? `absolute inset-y-0 ${dockEdge} w-full 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}`
+        : 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)]'}
 		{additionalClass}
 	"
->
+  >
   {#if isStepped && stepLevel === 1 && currentParent}
     <!-- Stepped sub-view (<2xs only): show just the children of the
 		     parent the user tapped. The consumer's hamburger button is
@@ -729,14 +799,14 @@
             <Popup
               anchor={geom.anchor}
               open={openId === id}
-              side="right"
+              side={popoutSide}
               align={geom.align}
               offset={0}
               onclose={() => {
                 if (openId === id) openId = null;
               }}
             >
-              {@render popout(item, geom.borderClass)}
+              {@render popout(item, geom.borderClass, "sbm-popout-" + id.replace(":", "-"))}
             </Popup>
           {/if}
         {/each}
@@ -765,18 +835,19 @@
             <Popup
               anchor={geom.anchor}
               open={openId === id}
-              side="right"
+              side={popoutSide}
               align={geom.align}
               offset={0}
               onclose={() => {
                 if (openId === id) openId = null;
               }}
             >
-              {@render popout(item, geom.borderClass)}
+              {@render popout(item, geom.borderClass, "sbm-popout-" + id.replace(":", "-"))}
             </Popup>
           {/if}
         {/each}
       </ul>
     {/if}
   {/if}
-</aside>
+  </aside>
+</div>

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

@@ -122,6 +122,15 @@ type $$ComponentProps = {
      * and binds to `open`.
      */
     hamburger?: boolean;
+    /** In `icon` mode, expand the rail to `expanded` ON HOVER — as a floating overlay over a spacer
+     *  that reserves the collapsed width, so page content never reflows. Default `false`. */
+    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.42.aca96e0",
+  "version": "0.7.1-dev.44.97afb0d",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"