@spaethtech/svelte-ui 0.21.1-dev.131.6298c61 → 0.21.1-dev.132.b812036

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -95,8 +95,9 @@
     link?: string;
     badge?: SideBarMenuBadge;
     /** Child items — rendered as a fly-out popout. Recursive: a child that itself has children
-     *  cascades into a further popout (or steps deeper in `stepped` mode). */
-    children?: SideBarMenuItem[];
+     *  cascades into a further popout (or steps deeper in `stepped` mode). May include
+     *  `{ divider: true }` entries to draw a separator between children. */
+    children?: SideBarMenuEntry[];
     /** Action row (no `link`) — renders a `<button>` and calls this on click. For a "toggle"
      *  row (an AI panel, etc.) or a non-navigating action. Runs after the drawer/popout reset. */
     onclick?: (e: MouseEvent) => void;
@@ -114,6 +115,20 @@
      *  the default `currentPath` segment-boundary match against `link`. */
     activeMatch?: SideBarMenuActiveRule;
   };
+
+  /**
+   * A horizontal rule between adjacent rows in an `items` / `bottomItems` / `children` list — a 1px
+   * full-bleed separator (`--ui-border-color`) drawn between the two rows it sits between. It adds no
+   * navigable row and (visually) only the 1px line, so it never disturbs the fixed-height row rhythm.
+   * Leading, trailing, and consecutive dividers collapse — a divider renders ONLY between two real
+   * rows. Honoured identically in the fly-out popout, the stepped sub-view, and the inline
+   * expanded/drawer rail. Use the discriminated form `{ divider: true }` so a genuinely malformed item
+   * still falls through to the visible "malformed item" row rather than silently becoming a separator.
+   */
+  export type SideBarMenuDivider = { divider: true };
+
+  /** A SideBarMenu list entry: either a {@link SideBarMenuItem} or a {@link SideBarMenuDivider}. */
+  export type SideBarMenuEntry = SideBarMenuItem | SideBarMenuDivider;
 </script>
 
 <script lang="ts">
@@ -159,8 +174,8 @@
     class: additionalClass = "",
     ...rest
   }: {
-    items?: SideBarMenuItem[];
-    bottomItems?: SideBarMenuItem[];
+    items?: SideBarMenuEntry[];
+    bottomItems?: SideBarMenuEntry[];
     currentPath: string;
     size?: Size;
     /**
@@ -492,7 +507,34 @@
   // reserving group that lack an icon still get an empty box so everything aligns. The main rail counts
   // `items` + `bottomItems` as ONE group (so top/bottom align); each popout / stepped sub-view is its
   // own group.
-  const anyIcon = (list: SideBarMenuItem[]) => list.some((i) => i.icon || i.badge);
+  // ── Dividers ────────────────────────────────────────────────────
+  // A list entry is either a real item or a `{ divider: true }` separator. Dividers are not navigable
+  // rows — they render as a 1px full-bleed rule BETWEEN two real rows (see `renderRows`).
+  const isDivider = (e: SideBarMenuEntry): e is SideBarMenuDivider =>
+    typeof e === "object" && e !== null && (e as SideBarMenuDivider).divider === true;
+  const itemsOnly = (list: SideBarMenuEntry[] = []): SideBarMenuItem[] =>
+    list.filter((e): e is SideBarMenuItem => !isDivider(e));
+
+  // Normalize a list into the rows to render, each tagged with whether a divider precedes it. Leading,
+  // trailing, and consecutive dividers collapse — `dividerBefore` is set only when a divider sits
+  // between two real rows. `index` is the entry's ORIGINAL position in the list, so open-path ids
+  // (`top:3`, `id>5`) stay stable and unique no matter how many dividers precede a row.
+  type RenderRow = { item: SideBarMenuItem; index: number; dividerBefore: boolean };
+  function renderRows(list: SideBarMenuEntry[] = []): RenderRow[] {
+    const out: RenderRow[] = [];
+    let pending = false;
+    list.forEach((e, index) => {
+      if (isDivider(e)) {
+        if (out.length > 0) pending = true; // drop leading; collapse runs of dividers
+        return;
+      }
+      out.push({ item: e, index, dividerBefore: pending });
+      pending = false;
+    });
+    return out; // a trailing divider is never consumed → dropped
+  }
+
+  const anyIcon = (list: SideBarMenuEntry[] = []) => itemsOnly(list).some((i) => i.icon || i.badge);
   const railReserve = $derived(anyIcon(items) || anyIcon(bottomItems));
 
   // ── Mobile drawer state ─────────────────────────────────────────
@@ -605,7 +647,8 @@
     } else if (item.link && pathMatches(item.link, currentPath)) {
       return true;
     }
-    if (item.children?.length) return item.children.some(isItemActive);
+    const kids = itemsOnly(item.children);
+    if (kids.length) return kids.some(isItemActive);
     return false;
   }
   // A row's OWN active state (drives `aria-current`) — its own rule/link only, never descendants.
@@ -919,7 +962,7 @@
   {@const active = isItemActive(item)}
   {@const ownActive = isItemOwnActive(item)}
   {@const reserveIcon = opts.reserveIcon ?? true}
-  {@const hasChildren = (item.children?.length ?? 0) > 0}
+  {@const hasChildren = itemsOnly(item.children).length > 0}
   {@const isParent = hasChildren || !!item.popout}
   {@const hasLink = !!item.link}
   {@const isOpen = !!opts.id && isOnPath(opts.id)}
@@ -1028,7 +1071,7 @@
   depth: number,
 )}
   {@render row(item, { id, isPopoutChild: depth > 0, reserveIcon })}
-  {#if (((item.children?.length ?? 0) > 0) || !!item.popout) && !isStepped}
+  {#if (itemsOnly(item.children).length > 0 || !!item.popout) && !isStepped}
     {@const top = depth === 0}
     {@const geom = top
       ? geometryFor(id, group)
@@ -1085,9 +1128,9 @@
 {#snippet popoutPanel(item: SideBarMenuItem, id: ItemId, group: "top" | "bottom", maxHeight: string)}
   {@const popoutId = popoutDomId(id)}
   {@const isOpen = isOnPath(id)}
-  {@const kids = item.children ?? []}
-  {@const win = popoutWindow(id, kids.length)}
-  {@const childReserve = anyIcon(kids)}
+  {@const rows = renderRows(item.children)}
+  {@const win = popoutWindow(id, rows.length)}
+  {@const childReserve = anyIcon(item.children)}
   {@const rowsShown = (win.up ? 1 : 0) + (win.end - win.start) + (win.down ? 1 : 0)}
   {@const bd = popoutBorder(id, group, !id.includes(">"), rowsShown)}
   <!-- Nav submenu popout — a list of links (NOT role="menu"); Tab navigates, per the disclosure-nav
@@ -1106,7 +1149,7 @@
       : (e) => {
           if (win.up || win.down) {
             e.preventDefault();
-            stepPopout(id, kids.length, Math.sign(e.deltaY) * 3);
+            stepPopout(id, rows.length, Math.sign(e.deltaY) * 3);
           }
         }}
     onkeydown={item.popout
@@ -1114,10 +1157,10 @@
       : (e) => {
           if (e.key === "ArrowDown") {
             e.preventDefault();
-            stepPopout(id, kids.length, 1);
+            stepPopout(id, rows.length, 1);
           } else if (e.key === "ArrowUp") {
             e.preventDefault();
-            stepPopout(id, kids.length, -1);
+            stepPopout(id, rows.length, -1);
           }
         }}
   >
@@ -1129,15 +1172,20 @@
         {@render item.popout()}
       </div>
     {:else}
-      {#if win.up}{@render arrowRow(id, kids.length, -1)}{/if}
+      {#if win.up}{@render arrowRow(id, rows.length, -1)}{/if}
       <ul class="flex flex-col">
-        {#each kids.slice(win.start, win.end) as child, i (child.label)}
+        {#each rows.slice(win.start, win.end) as r, i (r.index)}
+          <!-- A divider renders only BETWEEN real rows: suppress it at the window's top edge (i===0),
+               where there's nothing above it and it would collide with the panel border. -->
+          {#if r.dividerBefore && i > 0}
+            <li class="list-none border-t [border-color:var(--ui-border-color)]" role="separator"></li>
+          {/if}
           <li class="list-none">
-            {@render menuNode(child, `${id}>${win.start + i}`, group, childReserve, 1)}
+            {@render menuNode(r.item, `${id}>${r.index}`, group, childReserve, 1)}
           </li>
         {/each}
       </ul>
-      {#if win.down}{@render arrowRow(id, kids.length, 1)}{/if}
+      {#if win.down}{@render arrowRow(id, rows.length, 1)}{/if}
     {/if}
   </div>
 {/snippet}
@@ -1203,20 +1251,29 @@
 		     return here — there is no in-drawer back row by design so
 		     the back affordance stays in a single, consistent spot. -->
     {@const currentParent = stepPath[stepPath.length - 1]}
-    {@const stepReserve = anyIcon(currentParent.children ?? [])}
+    {@const stepRows = renderRows(currentParent.children)}
+    {@const stepReserve = anyIcon(currentParent.children)}
     <ul class="flex flex-col {scrollList}">
-      {#each currentParent.children ?? [] as child, ci (child.label)}
+      {#each stepRows as r, i (r.index)}
+        {#if r.dividerBefore && i > 0}
+          <li class="list-none border-t [border-color:var(--ui-border-color)]" role="separator"></li>
+        {/if}
         <li class="list-none">
-          {@render row(child, { id: `step:${ci}`, isPopoutChild: true, reserveIcon: stepReserve })}
+          {@render row(r.item, { id: `step:${r.index}`, isPopoutChild: true, reserveIcon: stepReserve })}
         </li>
       {/each}
     </ul>
   {:else}
-    {#if items.length > 0}
+    {@const topRows = renderRows(items)}
+    {@const bottomRows = renderRows(bottomItems)}
+    {#if topRows.length > 0}
       <ul class="flex flex-col {scrollList}">
-        {#each items as item, idx (item.label)}
+        {#each topRows as r, i (r.index)}
+          {#if r.dividerBefore && i > 0}
+            <li class="list-none border-t [border-color:var(--ui-border-color)]" role="separator"></li>
+          {/if}
           <li class="list-none">
-            {@render menuNode(item, `top:${idx}`, "top", railReserve, 0)}
+            {@render menuNode(r.item, `top:${r.index}`, "top", railReserve, 0)}
           </li>
         {/each}
       </ul>
@@ -1224,15 +1281,18 @@
 
     <!-- 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}
+    {#if topRows.length === 0 && bottomRows.length > 0}
       <div class="flex-1"></div>
     {/if}
 
-    {#if bottomItems.length > 0}
+    {#if bottomRows.length > 0}
       <ul class="flex flex-col shrink-0">
-        {#each bottomItems as item, idx (item.label)}
+        {#each bottomRows as r, i (r.index)}
+          {#if r.dividerBefore && i > 0}
+            <li class="list-none border-t [border-color:var(--ui-border-color)]" role="separator"></li>
+          {/if}
           <li class="list-none">
-            {@render menuNode(item, `bottom:${idx}`, "bottom", railReserve, 0)}
+            {@render menuNode(r.item, `bottom:${r.index}`, "bottom", railReserve, 0)}
           </li>
         {/each}
       </ul>

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

@@ -75,8 +75,9 @@ export type SideBarMenuItem = {
     link?: string;
     badge?: SideBarMenuBadge;
     /** Child items — rendered as a fly-out popout. Recursive: a child that itself has children
-     *  cascades into a further popout (or steps deeper in `stepped` mode). */
-    children?: SideBarMenuItem[];
+     *  cascades into a further popout (or steps deeper in `stepped` mode). May include
+     *  `{ divider: true }` entries to draw a separator between children. */
+    children?: SideBarMenuEntry[];
     /** Action row (no `link`) — renders a `<button>` and calls this on click. For a "toggle"
      *  row (an AI panel, etc.) or a non-navigating action. Runs after the drawer/popout reset. */
     onclick?: (e: MouseEvent) => void;
@@ -94,14 +95,28 @@ export type SideBarMenuItem = {
      *  the default `currentPath` segment-boundary match against `link`. */
     activeMatch?: SideBarMenuActiveRule;
 };
+/**
+ * A horizontal rule between adjacent rows in an `items` / `bottomItems` / `children` list — a 1px
+ * full-bleed separator (`--ui-border-color`) drawn between the two rows it sits between. It adds no
+ * navigable row and (visually) only the 1px line, so it never disturbs the fixed-height row rhythm.
+ * Leading, trailing, and consecutive dividers collapse — a divider renders ONLY between two real
+ * rows. Honoured identically in the fly-out popout, the stepped sub-view, and the inline
+ * expanded/drawer rail. Use the discriminated form `{ divider: true }` so a genuinely malformed item
+ * still falls through to the visible "malformed item" row rather than silently becoming a separator.
+ */
+export type SideBarMenuDivider = {
+    divider: true;
+};
+/** A SideBarMenu list entry: either a {@link SideBarMenuItem} or a {@link SideBarMenuDivider}. */
+export type SideBarMenuEntry = SideBarMenuItem | SideBarMenuDivider;
 import type { HTMLAttributes } from "svelte/elements";
 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 = {
-    items?: SideBarMenuItem[];
-    bottomItems?: SideBarMenuItem[];
+    items?: SideBarMenuEntry[];
+    bottomItems?: SideBarMenuEntry[];
     currentPath: string;
     size?: Size;
     /**

package/dist/index.d.ts

@@ -76,7 +76,7 @@ export { default as Disclosure2 } from "./components/Disclosure2.svelte";
 export { default as Accordion2 } from "./components/Accordion2.svelte";
 export { default as DatePicker2 } from "./components/DatePicker2.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
-export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, SideBarMenuActiveRule, } from "./components/SideBarMenu/SideBarMenu.svelte";
+export type { SideBarMenuItem, SideBarMenuDivider, SideBarMenuEntry, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, SideBarMenuActiveRule, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { Breadcrumbs } from "./components/Breadcrumbs/index.js";
 export type { BreadcrumbItem } from "./components/Breadcrumbs/index.js";
 export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.21.1-dev.131.6298c61",
+  "version": "0.21.1-dev.132.b812036",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"