@spaethtech/svelte-ui 0.7.1-dev.42.aca96e0 → 0.7.1-dev.43.72e77ad

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -121,6 +121,8 @@
     open = $bindable(false),
     stepLevel = $bindable(0),
     hamburger = true,
+    iconHoverExpand = false,
+    hoverExpandCloseMs = 200,
     api = $bindable(),
     class: additionalClass = "",
   }: {
@@ -171,6 +173,11 @@
      * 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;
     /** 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 +231,35 @@
 
   const isStepped = $derived(currentMode === "stepped");
   const isDrawer = $derived(currentMode === "drawer" || currentMode === "stepped");
-  const labelsVisible = $derived(currentMode !== "icon");
+
+  // ── 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) {
@@ -555,6 +590,7 @@
   {@const isParent = (hasChildren || !!item.popout) && !opts.isPopoutChild}
   {@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)]"}`}
   {#if hasLink}
     <a
@@ -563,6 +599,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 +640,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 +676,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}
@@ -685,24 +726,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)]
 		{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 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'
+          ? 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)]'}
 		{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
@@ -736,7 +787,7 @@
                 if (openId === id) openId = null;
               }}
             >
-              {@render popout(item, geom.borderClass)}
+              {@render popout(item, geom.borderClass, "sbm-popout-" + id.replace(":", "-"))}
             </Popup>
           {/if}
         {/each}
@@ -772,11 +823,12 @@
                 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,11 @@ 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;
     /** 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.43.72e77ad",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"