@spaethtech/svelte-ui 0.8.0 → 0.9.0

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -105,6 +105,7 @@
   import IconClose from "~icons/mdi/close";
   import IconChevronRight from "~icons/mdi/chevron-right";
   import type { Size } from "../../types/sizes.js";
+  import { variantToken, type Variant } from "../../types/variants.js";
   import { BREAKPOINT_PX, type Breakpoint } from "../../types/breakpoints.js";
 
   type ModesMap = Partial<Record<Breakpoint, SideBarMenuMode>>;
@@ -114,15 +115,17 @@
     bottomItems = [],
     currentPath,
     size = "md",
+    variant = "primary",
     modes,
     collapsedAt = "lg",
-    collapsedWidth = 48,
-    expandedWidth = 200,
+    collapsedWidth,
+    expandedWidth,
     open = $bindable(false),
     stepLevel = $bindable(0),
     hamburger = true,
     iconHoverExpand = false,
     hoverExpandCloseMs = 200,
+    interactMode,
     side = "left",
     api = $bindable(),
     activeMode = $bindable(),
@@ -132,6 +135,12 @@
     bottomItems?: SideBarMenuItem[];
     currentPath: string;
     size?: Size;
+    /**
+     * Colour axis — affects ONLY the row hover/open/active background. The active row fills with the
+     * variant's accent token (`--ui-color-*`, white text); hover/open rows get a soft mix of it.
+     * Everything else (icons, labels, borders) stays neutral. Default `primary`.
+     */
+    variant?: Variant;
     /**
      * Per-tier visual mode. Each key in this map sets the mode at and
      * above that breakpoint. The active mode at any viewport is the
@@ -150,9 +159,13 @@
      * `modes` is set explicitly. Prefer passing `modes` directly.
      */
     collapsedAt?: Exclude<Breakpoint, "base" | "4xs" | "3xs" | "2xs" | "xs">;
-    /** Pixel width of the strip in `icon` mode. */
+    /** Pixel width of the strip in `icon` mode. Defaults to the `size`'s square icon-box width
+     *  (`sm` 40 · `md` 48 · `lg` 56) so icons are never cramped; override for a custom rail width. */
     collapsedWidth?: number;
-    /** Pixel width of the strip in `expanded` mode and the slide-in drawer when open. */
+    /** Optional MAX width (px) of the strip in `expanded`/`drawer`/hover-expanded state. The strip
+     *  always sizes to its content (`max-content` — fits the widest icon + label + chevron so every
+     *  row aligns); set this to cap that width so an unusually long label truncates instead of blowing
+     *  the rail out. Unset (default) = no cap, fit the longest label fully. */
     expandedWidth?: number;
     /**
      * Drawer open state when the active mode is `drawer` or `stepped`.
@@ -180,6 +193,14 @@
     iconHoverExpand?: boolean;
     /** Exit delay (ms) before a hover-expanded rail collapses on mouse-leave. Default `200`. */
     hoverExpandCloseMs?: number;
+    /**
+     * How parent popouts open. `"hover"` opens on mouse-enter and closes shortly after mouse-leave;
+     * `"click"` toggles on click and stays open until an outside click / Escape / re-click (mouse-out
+     * does NOT close it). When unset (default), it auto-resolves: a plain `icon` rail
+     * (`iconHoverExpand={false}`) is compact, so it uses `"click"`; every other popout mode uses
+     * `"hover"`. `stepped` ignores this (parents step in place). Set it to force one mode everywhere.
+     */
+    interactMode?: "hover" | "click";
     /** 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"`. */
@@ -308,14 +329,40 @@
   // 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).
+  // Collapsed (icon-only) rail width. Defaults to the size's SQUARE icon-box width so the rail is
+  // exactly as wide as the icon box is tall (sm 40 · md 48 · lg 56) — no dead space, no clipping.
+  const collapsedW = $derived(collapsedWidth ?? ({ sm: 40, md: 48, lg: 56 } as const)[size]);
+
+  // Variant accent for row hover/open/active backgrounds. Published as a `--sbm-accent` custom property
+  // on the aside + popout (so rows read a STATIC Tailwind class and Tailwind still tree-shakes it —
+  // interpolating the token straight into the class name would make it invisible to the JIT scanner).
+  const accentVar = $derived(`var(${variantToken[variant]})`);
+
+  // Interim overflow handling: a group taller than the available height scrolls, but with the scrollbar
+  // hidden ("silent scroll") — a native scrollbar in a narrow icon rail looks wrong. `flex-1 min-h-0`
+  // lets the group take the remaining height and actually scroll; the bottom cluster stays pinned.
+  // (A per-section stepper-button affordance is the planned replacement — see FUTURE.md.)
+  const scrollList = "flex-1 min-h-0 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden";
+
+  // Aside width, driven by mode (inline style — robust, no Tailwind arbitrary-var class):
+  //   - stepped: full width (100%)
+  //   - collapsed icon rail: the square icon-box width
+  //   - expanded / drawer / hover-expanded rail: `max-content` so the strip fits the widest row
+  //     (icon + longest label + chevron) exactly, keeping every row's icon/label/chevron aligned.
+  //     `expandedWidth` becomes an optional MAX so a very long label truncates instead of blowing out.
+  const contentFit = $derived(
+    currentMode === "drawer" ||
+      currentMode === "expanded" ||
+      (currentMode === "icon" && effectivelyExpanded),
+  );
   const asideWidthCss = $derived(
     currentMode === "stepped"
       ? "100%"
       : currentMode === "icon" && !effectivelyExpanded
-        ? `${collapsedWidth}px`
-        : `${expandedWidth}px`,
+        ? `${collapsedW}px`
+        : "max-content",
   );
+  const maxWidthCss = $derived(contentFit && expandedWidth != null ? `${expandedWidth}px` : "");
   // Slide (drawer/stepped) or width (icon hover-expand) transition — suppressed on a mode change (see
   // `noTransition`) so resizing between modes snaps rather than animating a wrong intermediate state.
   const transitionClass = $derived(
@@ -477,6 +524,15 @@
   // noise — suppress it. (Per-row `disabled` also drops the tooltip while that parent's popout is open.)
   const tooltipSuppressed = $derived(labelsVisible || hoverExpandActive);
 
+  // Popout trigger. An explicit `interactMode` wins; otherwise auto — a plain (non-hover-expand) `icon`
+  // rail is a deliberately compact target, so it opens popouts on CLICK (click toggles; it does not
+  // navigate; mouse-out does not close), while every other popout mode opens on HOVER. `stepped` never
+  // uses popouts (it steps in place).
+  const resolvedInteract = $derived<"hover" | "click">(
+    interactMode ?? (currentMode === "icon" && !iconHoverExpand ? "click" : "hover"),
+  );
+  const popoutOnHover = $derived(!isStepped && resolvedInteract === "hover");
+
   // ── Active state ────────────────────────────────────────────────
   // Match on a SEGMENT boundary, not a raw prefix: a link is active when the current path equals it
   // or is nested under it (`/x` matches `/x/y` but not `/xyz`). `/` (a Home/root link) matches ONLY
@@ -667,7 +723,8 @@
   {@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} ${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)]"}`}
+  {@const tipSuppressed = tooltipSuppressed || !!opts.isPopoutChild}
+  {@const rowClass = `group flex items-center w-full ${sz.row} ${dockRight ? "flex-row-reverse" : ""} ${labelsVisible || opts.isPopoutChild ? (dockRight ? "pl-3" : "pr-3") : ""} transition-colors cursor-pointer ${active ? "[background-color:var(--sbm-accent)] text-white" : isOpen ? "[background-color:color-mix(in_srgb,var(--sbm-accent)_18%,transparent)]" : "hover:[background-color:color-mix(in_srgb,var(--sbm-accent)_12%,transparent)]"}`}
   {#if hasLink}
     <a
       href={item.link}
@@ -681,10 +738,10 @@
       use:tooltip={{
         text: item.label,
         side: popoutSide,
-        disabled: tooltipSuppressed || (isParent && opts.id ? openId === opts.id : false),
+        disabled: tipSuppressed || (isParent && opts.id ? openId === opts.id : false),
       }}
-      onmouseenter={isParent && opts.id && !isStepped ? () => openOnHover(opts.id!) : undefined}
-      onmouseleave={isParent && opts.id && !isStepped ? scheduleClose : undefined}
+      onmouseenter={isParent && opts.id && popoutOnHover ? () => openOnHover(opts.id!) : undefined}
+      onmouseleave={isParent && opts.id && popoutOnHover ? scheduleClose : undefined}
       onclick={(e) => {
         // Power-user passthrough: Shift/Cmd/Ctrl click opens in
         // a new tab — don't mutate UI state in that case.
@@ -697,6 +754,9 @@
             e.preventDefault();
             stepIntoChildren(item);
           } else {
+            // When popouts are click-to-open (a plain icon rail), a click opens the popout
+            // instead of following the parent's href.
+            if (!popoutOnHover) e.preventDefault();
             toggleOnClick(opts.id);
           }
         } else {
@@ -717,9 +777,9 @@
       aria-haspopup="menu"
       aria-expanded={openId === opts.id}
       aria-controls={isOpen ? popoutId : undefined}
-      use:tooltip={{ text: item.label, side: popoutSide, disabled: tooltipSuppressed || openId === opts.id }}
-      onmouseenter={!isStepped ? () => openOnHover(opts.id!) : undefined}
-      onmouseleave={!isStepped ? scheduleClose : undefined}
+      use:tooltip={{ text: item.label, side: popoutSide, disabled: tipSuppressed || openId === opts.id }}
+      onmouseenter={popoutOnHover ? () => openOnHover(opts.id!) : undefined}
+      onmouseleave={popoutOnHover ? scheduleClose : undefined}
       onclick={() => (isStepped ? stepIntoChildren(item) : toggleOnClick(opts.id!))}
     >
       {@render rowBody(item, isParent, !!opts.isPopoutChild, isOpen)}
@@ -731,7 +791,7 @@
       type="button"
       use:refIntoMap={opts.id}
       class="{rowClass} text-left"
-      use:tooltip={{ text: item.label, side: popoutSide, disabled: tooltipSuppressed }}
+      use:tooltip={{ text: item.label, side: popoutSide, disabled: tipSuppressed }}
       onclick={(e) => {
         item.onclick!(e);
         closeAfterNav();
@@ -758,10 +818,10 @@
     role="menu"
     tabindex="-1"
     id={popoutId}
-    style="width: {expandedWidth}px;"
+    style="width: max-content;{expandedWidth != null ? ` max-width: ${expandedWidth}px;` : ''} --sbm-accent: {accentVar};"
     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}
+    onmouseenter={popoutOnHover ? cancelClose : undefined}
+    onmouseleave={popoutOnHover ? scheduleClose : undefined}
   >
     {#if item.popout}
       {@render item.popout()}
@@ -810,11 +870,11 @@
      never the viewport). In every other mode it's `display: contents` (no box) so layout is unchanged. -->
 <div
   class={hoverExpandActive ? "relative shrink-0" : "contents"}
-  style="{hoverExpandActive ? `width: ${collapsedWidth}px;` : ''}"
+  style="{hoverExpandActive ? `width: ${collapsedW}px;` : ''}"
 >
   <aside
     bind:this={asideRef}
-    style="width: {asideWidthCss};"
+    style="width: {asideWidthCss};{maxWidthCss ? ` max-width: ${maxWidthCss};` : ''} --sbm-accent: {accentVar};"
     onmouseenter={hoverExpandActive ? openHoverExpand : undefined}
     onmouseleave={hoverExpandActive ? scheduleHoverCollapse : undefined}
     class="
@@ -840,7 +900,7 @@
 		     expected to flip to a `←` icon and set `stepLevel = 0` to
 		     return here — there is no in-drawer back row by design so
 		     the back affordance stays in a single, consistent spot. -->
-    <ul class="flex flex-col">
+    <ul class="flex flex-col {scrollList}">
       {#each currentParent.children ?? [] as child (child.label)}
         <li class="list-none">
           {@render row(child, { isPopoutChild: true })}
@@ -849,7 +909,7 @@
     </ul>
   {:else}
     {#if items.length > 0}
-      <ul class="flex flex-col">
+      <ul class="flex flex-col {scrollList}">
         {#each items as item, idx (item.label)}
           {@const id = `top:${idx}` as ItemId}
           <li class="list-none">
@@ -875,12 +935,14 @@
       </ul>
     {/if}
 
-    {#if items.length > 0 && bottomItems.length > 0}
+    <!-- With items present, the scrollable top list (flex-1) already fills the gap; only add a spacer
+         to push the bottom cluster down when there are no top items. -->
+    {#if items.length === 0 && bottomItems.length > 0}
       <div class="flex-1"></div>
     {/if}
 
     {#if bottomItems.length > 0}
-      <ul class="flex flex-col">
+      <ul class="flex flex-col shrink-0">
         {#each bottomItems as item, idx (item.label)}
           {@const id = `bottom:${idx}` as ItemId}
           <li class="list-none">

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

@@ -72,6 +72,7 @@ export type SideBarMenuItem = {
     reload?: boolean;
 };
 import type { Size } from "../../types/sizes.js";
+import { type Variant } from "../../types/variants.js";
 import { type Breakpoint } from "../../types/breakpoints.js";
 type ModesMap = Partial<Record<Breakpoint, SideBarMenuMode>>;
 type $$ComponentProps = {
@@ -79,6 +80,12 @@ type $$ComponentProps = {
     bottomItems?: SideBarMenuItem[];
     currentPath: string;
     size?: Size;
+    /**
+     * Colour axis — affects ONLY the row hover/open/active background. The active row fills with the
+     * variant's accent token (`--ui-color-*`, white text); hover/open rows get a soft mix of it.
+     * Everything else (icons, labels, borders) stays neutral. Default `primary`.
+     */
+    variant?: Variant;
     /**
      * Per-tier visual mode. Each key in this map sets the mode at and
      * above that breakpoint. The active mode at any viewport is the
@@ -97,9 +104,13 @@ type $$ComponentProps = {
      * `modes` is set explicitly. Prefer passing `modes` directly.
      */
     collapsedAt?: Exclude<Breakpoint, "base" | "4xs" | "3xs" | "2xs" | "xs">;
-    /** Pixel width of the strip in `icon` mode. */
+    /** Pixel width of the strip in `icon` mode. Defaults to the `size`'s square icon-box width
+     *  (`sm` 40 · `md` 48 · `lg` 56) so icons are never cramped; override for a custom rail width. */
     collapsedWidth?: number;
-    /** Pixel width of the strip in `expanded` mode and the slide-in drawer when open. */
+    /** Optional MAX width (px) of the strip in `expanded`/`drawer`/hover-expanded state. The strip
+     *  always sizes to its content (`max-content` — fits the widest icon + label + chevron so every
+     *  row aligns); set this to cap that width so an unusually long label truncates instead of blowing
+     *  the rail out. Unset (default) = no cap, fit the longest label fully. */
     expandedWidth?: number;
     /**
      * Drawer open state when the active mode is `drawer` or `stepped`.
@@ -127,6 +138,14 @@ type $$ComponentProps = {
     iconHoverExpand?: boolean;
     /** Exit delay (ms) before a hover-expanded rail collapses on mouse-leave. Default `200`. */
     hoverExpandCloseMs?: number;
+    /**
+     * How parent popouts open. `"hover"` opens on mouse-enter and closes shortly after mouse-leave;
+     * `"click"` toggles on click and stays open until an outside click / Escape / re-click (mouse-out
+     * does NOT close it). When unset (default), it auto-resolves: a plain `icon` rail
+     * (`iconHoverExpand={false}`) is compact, so it uses `"click"`; every other popout mode uses
+     * `"hover"`. `stepped` ignores this (parents step in place). Set it to force one mode everywhere.
+     */
+    interactMode?: "hover" | "click";
     /** 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"`. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"