@spaethtech/svelte-ui 0.12.0 → 0.13.0

package/dist/components/Divider/Divider.svelte

@@ -0,0 +1,48 @@
+<!--
+/**
+ * Divider — a thin separating rule. Horizontal (optionally with an inline label) or vertical (a 1px
+ * line that stretches to a flex row's height). Neutral `--ui-border-color`; no variant/size axis.
+ * See Divider.spec.md.
+ */
+-->
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let {
+    orientation = "horizontal",
+    label,
+    labelAlign = "center",
+    class: cls = "",
+    children,
+  }: {
+    orientation?: "horizontal" | "vertical";
+    label?: string;
+    labelAlign?: "start" | "center" | "end";
+    class?: string;
+    children?: Snippet;
+  } = $props();
+
+  const hasLabel = $derived(orientation === "horizontal" && (!!label || !!children));
+</script>
+
+{#if orientation === "vertical"}
+  <div
+    role="separator"
+    aria-orientation="vertical"
+    class="inline-block w-px self-stretch [background-color:var(--ui-border-color)] {cls}"
+  ></div>
+{:else if hasLabel}
+  <div role="separator" aria-orientation="horizontal" class="flex items-center gap-3 {cls}">
+    {#if labelAlign !== "start"}
+      <div class="h-px flex-1 [background-color:var(--ui-border-color)]"></div>
+    {/if}
+    <span class="shrink-0 text-xs [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]">
+      {#if children}{@render children()}{:else}{label}{/if}
+    </span>
+    {#if labelAlign !== "end"}
+      <div class="h-px flex-1 [background-color:var(--ui-border-color)]"></div>
+    {/if}
+  </div>
+{:else}
+  <hr class="w-full border-0 h-px [background-color:var(--ui-border-color)] {cls}" />
+{/if}

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    orientation?: "horizontal" | "vertical";
+    label?: string;
+    labelAlign?: "start" | "center" | "end";
+    class?: string;
+    children?: Snippet;
+};
+declare const Divider: import("svelte").Component<$$ComponentProps, {}, "">;
+type Divider = ReturnType<typeof Divider>;
+export default Divider;

package/dist/components/Divider/index.d.ts

@@ -0,0 +1 @@
+export { default as Divider } from "./Divider.svelte";

package/dist/components/Divider/index.js

@@ -0,0 +1 @@
+export { default as Divider } from "./Divider.svelte";

package/dist/components/Pagination/Pagination.svelte

@@ -0,0 +1,147 @@
+<!--
+/**
+ * Pagination — a standalone page navigator (numbered buttons + ellipsis, prev/next, optional
+ * first/last, optional rows-per-page Select + total). The reusable extraction of DataTable's footer
+ * pager; built only from `Button` (ghost, active = filled variant) and `Select`. See Pagination.spec.md.
+ */
+-->
+<script lang="ts">
+  import Button from "../Button.svelte";
+  import Select from "../Select.svelte";
+  import type { Variant } from "../../types/variants.js";
+  import type { Size } from "../../types/sizes.js";
+  import { responsiveClasses, type Responsive } from "../../types/responsive.js";
+  import IconFirst from "~icons/mdi/page-first";
+  import IconPrev from "~icons/mdi/chevron-left";
+  import IconNext from "~icons/mdi/chevron-right";
+  import IconLast from "~icons/mdi/page-last";
+
+  let {
+    page = $bindable(1),
+    total,
+    perPage = $bindable(10),
+    perPageOptions,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showEdges = false,
+    showTotal = false,
+    variant = "primary",
+    size = "md",
+    disabled = false,
+    class: cls = "",
+  }: {
+    page?: number;
+    total: number;
+    perPage?: number;
+    perPageOptions?: number[];
+    siblingCount?: number;
+    boundaryCount?: number;
+    showEdges?: boolean;
+    showTotal?: boolean;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    class?: string;
+  } = $props();
+
+  const pageCount = $derived(Math.max(1, Math.ceil((total || 0) / (perPage || 1))));
+  // Keep `page` in range as total/perPage change.
+  $effect(() => {
+    const clamped = Math.min(Math.max(page, 1), pageCount);
+    if (clamped !== page) page = clamped;
+  });
+
+  // Page-number list with ellipsis gaps: boundaryCount at each end + siblingCount around the current.
+  const items = $derived.by<(number | "ellipsis")[]>(() => {
+    const set = new Set<number>();
+    for (let i = 1; i <= boundaryCount; i++) {
+      set.add(i);
+      set.add(pageCount - i + 1);
+    }
+    for (let i = page - siblingCount; i <= page + siblingCount; i++) set.add(i);
+    const sorted = [...set].filter((n) => n >= 1 && n <= pageCount).sort((a, b) => a - b);
+    const out: (number | "ellipsis")[] = [];
+    let prev = 0;
+    for (const n of sorted) {
+      if (n - prev > 1) out.push("ellipsis");
+      out.push(n);
+      prev = n;
+    }
+    return out;
+  });
+
+  const rangeText = $derived(
+    total <= 0
+      ? "0 of 0"
+      : `${(page - 1) * perPage + 1}–${Math.min(page * perPage, total)} of ${total}`,
+  );
+  const subtle = $derived(
+    `${responsiveClasses(size, { sm: "text-xs", md: "text-sm", lg: "text-base" })} [color:color-mix(in_srgb,var(--ui-color-text)_60%,transparent)]`,
+  );
+
+  const go = (to: number) => {
+    if (disabled) return;
+    page = Math.min(Math.max(to, 1), pageCount);
+  };
+  const setPerPage = (n: number) => {
+    perPage = n;
+    page = 1;
+  };
+</script>
+
+<nav aria-label="Pagination" class="flex flex-wrap items-center justify-between gap-3 {cls}">
+  {#if perPageOptions?.length}
+    <div class="flex items-center gap-2">
+      <Select
+        class="w-20"
+        {size}
+        {disabled}
+        value={String(perPage)}
+        options={perPageOptions.map((n) => ({ value: String(n), label: String(n) }))}
+        onSelection={(o) => setPerPage(Number(o.value))}
+      />
+      <span class={subtle}>per page</span>
+    </div>
+  {/if}
+
+  <div class="flex items-center gap-3">
+    {#if showTotal}<span class={subtle}>{rangeText}</span>{/if}
+    <div class="inline-flex items-center gap-0.5">
+      {#snippet navBtn(Icon: typeof IconFirst, to: number, off: boolean, aria: string)}
+        <Button
+          variant="ghost"
+          {size}
+          disabled={disabled || off}
+          aria-label={aria}
+          title={aria}
+          onclick={() => go(to)}
+        >
+          {#snippet icon()}<Icon />{/snippet}
+        </Button>
+      {/snippet}
+
+      {#if showEdges}{@render navBtn(IconFirst, 1, page <= 1, "First page")}{/if}
+      {@render navBtn(IconPrev, page - 1, page <= 1, "Previous page")}
+
+      {#each items as it, i (i)}
+        {#if it === "ellipsis"}
+          <span aria-hidden="true" class="px-1.5 {subtle}">…</span>
+        {:else}
+          <Button
+            variant={it === page ? variant : "ghost"}
+            {size}
+            {disabled}
+            aria-label={`Page ${it}`}
+            aria-current={it === page ? "page" : undefined}
+            onclick={() => go(it)}
+          >
+            {it}
+          </Button>
+        {/if}
+      {/each}
+
+      {@render navBtn(IconNext, page + 1, page >= pageCount, "Next page")}
+      {#if showEdges}{@render navBtn(IconLast, pageCount, page >= pageCount, "Last page")}{/if}
+    </div>
+  </div>
+</nav>

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

@@ -0,0 +1,20 @@
+import type { Variant } from "../../types/variants.js";
+import type { Size } from "../../types/sizes.js";
+import { type Responsive } from "../../types/responsive.js";
+type $$ComponentProps = {
+    page?: number;
+    total: number;
+    perPage?: number;
+    perPageOptions?: number[];
+    siblingCount?: number;
+    boundaryCount?: number;
+    showEdges?: boolean;
+    showTotal?: boolean;
+    variant?: Variant;
+    size?: Responsive<Size>;
+    disabled?: boolean;
+    class?: string;
+};
+declare const Pagination: import("svelte").Component<$$ComponentProps, {}, "page" | "perPage">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination.svelte";

package/dist/components/Pagination/index.js

@@ -0,0 +1 @@
+export { default as Pagination } from "./Pagination.svelte";

package/dist/components/Popup.svelte

@@ -36,6 +36,7 @@
     boundary = "viewport",
     offset = 4,
     margin = 8,
+    snap = 0,
     matchWidth = false,
     surface = false,
     variant,
@@ -43,6 +44,7 @@
     borderless = false,
     lightDismiss = true,
     onclose,
+    onplaced,
     children,
   }: {
     /** The trigger element to position against. */
@@ -56,6 +58,8 @@
     /** Minimum gap kept from the boundary edges, in px (default 8). Set `0` to let the box sit flush
      *  against an edge — e.g. a sidebar popout that must align to the sidebar's (viewport) edge. */
     margin?: number;
+    /** Round the cross-axis shift to whole steps (px) — see `anchored`'s `snap`. Default 0. */
+    snap?: number;
     matchWidth?: boolean;
     /** Render a themed floating PANEL around the children (background, border, padding, shadow) instead
      *  of the default bare positioner. `variant`/`size`/`borderless` configure that panel. Consumers
@@ -72,6 +76,9 @@
      *  parent's top-layer element and would otherwise close its ancestors. */
     lightDismiss?: boolean;
     onclose?: () => void;
+    /** Fires after each (re)position with the resolved placement — for consumers that adapt to where
+     *  the box actually landed (e.g. edge-flush borders). */
+    onplaced?: (p: Placement) => void;
     children: Snippet;
   } = $props();
 
@@ -143,8 +150,12 @@
     boundary,
     offset,
     margin,
+    snap,
     matchWidth,
-    onplaced: (p) => (placed = p),
+    onplaced: (p) => {
+      placed = p;
+      onplaced?.(p);
+    },
   }}
 >
   {@render children()}

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

@@ -1,5 +1,5 @@
 import type { Snippet } from "svelte";
-import { type Side, type Align, type Boundary } from "../positioning/anchored.js";
+import { type Side, type Align, type Boundary, type Placement } from "../positioning/anchored.js";
 import type { Size } from "../types/sizes.js";
 import { type Responsive } from "../types/responsive.js";
 import { type Variant } from "../types/variants.js";
@@ -15,6 +15,8 @@ type $$ComponentProps = {
     /** Minimum gap kept from the boundary edges, in px (default 8). Set `0` to let the box sit flush
      *  against an edge — e.g. a sidebar popout that must align to the sidebar's (viewport) edge. */
     margin?: number;
+    /** Round the cross-axis shift to whole steps (px) — see `anchored`'s `snap`. Default 0. */
+    snap?: number;
     matchWidth?: boolean;
     /** Render a themed floating PANEL around the children (background, border, padding, shadow) instead
      *  of the default bare positioner. `variant`/`size`/`borderless` configure that panel. Consumers
@@ -31,6 +33,9 @@ type $$ComponentProps = {
      *  parent's top-layer element and would otherwise close its ancestors. */
     lightDismiss?: boolean;
     onclose?: () => void;
+    /** Fires after each (re)position with the resolved placement — for consumers that adapt to where
+     *  the box actually landed (e.g. edge-flush borders). */
+    onplaced?: (p: Placement) => void;
     children: Snippet;
 };
 declare const Popup: import("svelte").Component<$$ComponentProps, {}, "open">;

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -126,6 +126,9 @@
   import IconMenu from "~icons/mdi/menu";
   import IconClose from "~icons/mdi/close";
   import IconChevronRight from "~icons/mdi/chevron-right";
+  import IconChevronUp from "~icons/mdi/chevron-up";
+  import IconChevronDown from "~icons/mdi/chevron-down";
+  import type { Placement } from "../../positioning/anchored.js";
   import type { Size } from "../../types/sizes.js";
   import { variantToken, type Variant } from "../../types/variants.js";
   import { BREAKPOINT_PX, type Breakpoint } from "../../types/breakpoints.js";
@@ -648,18 +651,62 @@
   function openOnHover(id: ItemId, isParent: boolean) {
     cancelClose();
     const target = isParent ? id : parentOf(id);
-    if (openId !== target) openId = target;
+    if (openId !== target) {
+      if (target) popoutOffset[target] = 0; // fresh open → reset its scroll window
+      openId = target;
+    }
   }
   // Click toggles this node's popout: open it, or if it's already the deepest, collapse to its parent.
   function toggleOnClick(id: ItemId) {
     cancelClose();
-    openId = openId === id ? parentOf(id) : id;
+    const next = openId === id ? parentOf(id) : id;
+    if (next && next !== openId) popoutOffset[next] = 0;
+    openId = next;
   }
 
   // ── Refs ────────────────────────────────────────────────────────
   let asideRef = $state<HTMLElement | undefined>();
+  // Live strip height — popouts window to this (their max-height + the shift boundary).
+  let asideH = $state(0);
   // One ref per parent trigger. Keyed by ItemId so Popup can anchor.
   const triggerRefs = $state<Record<string, HTMLElement | undefined>>({});
+  // Resolved placement per open popout (from Popup's `onplaced`) — drives the edge-flush border rule.
+  let placedById = $state<Record<string, Placement>>({});
+
+  // ── Windowed popout scroll ──────────────────────────────────────
+  // A popout taller than the strip shows only a window of its children with full-height ▲/▼ stepper
+  // rows (no native scrollbar). `popoutOffset[id]` is the window's start index. Steps are whole items:
+  // an arrow click pages (by the visible count), the wheel moves 3, ↑/↓ move 1.
+  let popoutOffset = $state<Record<ItemId, number>>({});
+  const rowPxMap: Record<Size, number> = { sm: 40, md: 48, lg: 56 };
+  const rowPx = $derived(rowPxMap[size]);
+  // Row slots that fit the strip height (≥1). Arrow rows each consume one slot.
+  const popoutCapacity = $derived(Math.max(1, Math.floor((asideH || 9999) / rowPx)));
+
+  function popoutWindow(id: ItemId, count: number) {
+    const cap = popoutCapacity;
+    if (count <= cap) return { up: false, down: false, start: 0, end: count, page: count };
+    const maxStart = Math.max(0, count - (cap - 1));
+    const start = Math.min(Math.max(popoutOffset[id] ?? 0, 0), maxStart);
+    const up = start > 0;
+    const upRows = up ? 1 : 0;
+    // Try without a down arrow; add one (costing a slot) only if items remain beyond the window.
+    let shown = cap - upRows;
+    let down = false;
+    if (start + shown < count) {
+      down = true;
+      shown = cap - upRows - 1;
+    }
+    shown = Math.min(shown, count - start);
+    return { up, down, start, end: start + shown, page: Math.max(1, shown) };
+  }
+  function stepPopout(id: ItemId, count: number, delta: number) {
+    const cap = popoutCapacity;
+    if (count <= cap) return;
+    const maxStart = Math.max(0, count - (cap - 1));
+    const cur = Math.min(Math.max(popoutOffset[id] ?? 0, 0), maxStart);
+    popoutOffset[id] = Math.min(Math.max(cur + delta, 0), maxStart);
+  }
 
   // ── Cascade dismiss ─────────────────────────────────────────────
   // The popouts run with `lightDismiss={false}` (a nested popout is "outside" its parent's top-layer
@@ -721,57 +768,44 @@
     };
   }
 
-  // Spans rule — see SideBarMenu.spec.md → Popout Positioning.
-  function spansEdge(group: "top" | "bottom", idx: number, total: number, count: number) {
-    // positionFromEnd: how many rows from the anchored edge inclusive.
-    const positionFromEnd = group === "bottom" ? total - idx : idx + 1;
-    return count >= positionFromEnd;
-  }
-
+  // Popout geometry — see SideBarMenu.spec.md → Popout Positioning.
+  // The popout anchors to its TRIGGER ROW: a top-group popout aligns its top edge to the row top and
+  // grows downward (`align: 'start'`); a bottom-group popout aligns its bottom edge to the row bottom
+  // and grows upward (`align: 'end'`). The `anchored` engine then shift-clamps it within the strip
+  // boundary, so a tall popout slides just far enough to keep its far edge inside the strip's top/
+  // bottom — it never detaches from the row. When it still overflows the strip it's height-capped and
+  // scrolls (per-row snap).
   function geometryFor(
     id: ItemId,
     group: "top" | "bottom",
-    idx: number,
-    total: number,
-    count: number,
-  ): {
-    anchor: HTMLElement | undefined;
-    align: "start" | "end";
-    borderClass: string;
-  } {
-    const spans = spansEdge(group, idx, total, count);
-    // Border policy:
-    //   - Right border is always needed (popout meets free content
-    //     area on the right).
-    //   - Top/bottom borders are needed only on edges that DON'T
-    //     coincide with the sidebar's edge. When `spans` is true,
-    //     the popout's edge on the anchored side is flush with the
-    //     sidebar's top/bottom — that edge gets no border. The
-    //     opposite edge always extends into the sidebar's middle
-    //     vertical range, so it always gets a border.
-    //   - When `spans` is false the popout sits at the trigger row
-    //     level; both top and bottom edges are mid-sidebar and need
-    //     borders.
-    //   - Left border never — the sidebar's own `border-right`
-    //     covers that seam.
-    // NOTE: very tall popouts that would exceed the sidebar's
-    // 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 = dockRight ? "border-l" : "border-r";
-    if (group === "bottom") {
-      borderClass += spans ? " border-t" : " border-t border-b";
-    } else {
-      borderClass += spans ? " border-b" : " border-t border-b";
-    }
-    if (group === "bottom") {
-      return spans
-        ? { anchor: asideRef, align: "end", borderClass }
-        : { anchor: triggerRefs[id], align: "start", borderClass };
-    }
-    return spans
-      ? { anchor: asideRef, align: "start", borderClass }
-      : { anchor: triggerRefs[id], align: "end", borderClass };
+  ): { anchor: HTMLElement | undefined; align: "start" | "end" } {
+    return { anchor: triggerRefs[id], align: group === "bottom" ? "end" : "start" };
+  }
+
+  // Edge-flush border rule (see SideBarMenu.spec.md → Popout Positioning). The seam edge (facing the
+  // strip) is never bordered. The NEAR edge (the one meeting the trigger row — top for top items,
+  // bottom for bottomItems) is bordered UNLESS it's flush with the strip's matching edge; the OPPOSITE
+  // edge is bordered unless it too is flush (only when the popout fills the whole strip). When the near
+  // border is present, a 1px `nudge` keeps the first/last row pixel-inline with the parent (a
+  // border-box top border would otherwise push content down 1px). Nested cascades float mid-content →
+  // always border both vertical edges + nudge.
+  function popoutBorder(id: ItemId, group: "top" | "bottom", top: boolean, rowsShown: number) {
+    const farH = dockRight ? "border-l" : "border-r";
+    const near = group === "bottom" ? "border-b" : "border-t";
+    const opp = group === "bottom" ? "border-t" : "border-b";
+    const nudge = group === "bottom" ? 1 : -1;
+    const placed = top ? placedById[id] : undefined;
+    const aside = top ? asideRef?.getBoundingClientRect() : undefined;
+    if (!placed || !aside) return { cls: `${farH} ${near} ${opp}`, nudge };
+    const h = rowsShown * rowPx;
+    const topFlush = placed.y <= aside.top + 1;
+    const bottomFlush = placed.y + h >= aside.bottom - 1;
+    const nearFlush = group === "bottom" ? bottomFlush : topFlush;
+    const oppFlush = group === "bottom" ? topFlush : bottomFlush;
+    return {
+      cls: `${farH}${nearFlush ? "" : ` ${near}`}${oppFlush ? "" : ` ${opp}`}`,
+      nudge: nearFlush ? 0 : nudge,
+    };
   }
 </script>
 
@@ -975,8 +1009,6 @@
   item: SideBarMenuItem,
   id: ItemId,
   group: "top" | "bottom",
-  idx: number,
-  total: number,
   reserveIcon: boolean,
   depth: number,
 )}
@@ -984,16 +1016,15 @@
   {#if (((item.children?.length ?? 0) > 0) || !!item.popout) && !isStepped}
     {@const top = depth === 0}
     {@const geom = top
-      ? geometryFor(id, group, idx, total, item.children?.length ?? 1)
-      : {
-          anchor: triggerRefs[id],
-          align: "start" as const,
-          borderClass: `${dockRight ? "border-l" : "border-r"} border-t border-b`,
-        }}
-    <!-- Top-level parents (depth 0) anchor to the sidebar via the spans rule; a nested parent anchors
-         to its own trigger row and flies out further to the same side — a cascade. `lightDismiss={false}`
-         because a nested popout is "outside" its parent's top-layer element; the aside-level listener
-         below dismisses the whole chain instead. -->
+      ? geometryFor(id, group)
+      : { anchor: triggerRefs[id], align: "start" as const }}
+    <!-- The popout anchors to its trigger row and flies out to the popout side; the anchored engine
+         shift-clamps it within the viewport so it stays on-screen. Height is capped to the strip
+         (`asideH`) so a tall menu scrolls (per-row snap) instead of spilling past the strip. (The
+         viewport boundary — not the aside — is required because the popout is placed OUTSIDE the aside;
+         for a full-height strip the two coincide.) `lightDismiss={false}` because a nested popout is
+         "outside" its parent's top-layer element; the aside-level listener below dismisses the chain. -->
+    {@const maxH = top && asideH ? `${asideH}px` : "calc(100vh - 0.5rem)"}
     <Popup
       anchor={geom.anchor}
       open={isOnPath(id)}
@@ -1001,45 +1032,97 @@
       align={geom.align}
       offset={0}
       margin={top ? 0 : 8}
+      snap={rowPx}
       lightDismiss={false}
+      onplaced={top
+        ? (p) => {
+            placedById[id] = p;
+          }
+        : undefined}
       onclose={() => {
         if (isOnPath(id)) openId = null;
       }}
     >
-      {@render popoutPanel(item, id, group, geom.borderClass)}
+      {@render popoutPanel(item, id, group, maxH)}
     </Popup>
   {/if}
 {/snippet}
 
-<!-- Popout panel — the floating menu. Renders a custom `item.popout` snippet, else the children as
-     nested `menuNode`s (so a child that is itself a parent cascades further). `data-sbm-popout` +
-     `data-open` are consumer hooks; overflow scrolls, capped to the viewport. -->
-{#snippet popoutPanel(item: SideBarMenuItem, id: ItemId, group: "top" | "bottom", borderClass: string)}
+<!-- Full-height ▲/▼ stepper row shown at a popout's top/bottom when its children overflow the strip.
+     Click pages by the visible count; the wheel (3) and ↑/↓ (1) on the panel also step. -->
+{#snippet arrowRow(id: ItemId, count: number, dir: 1 | -1)}
+  <button
+    type="button"
+    aria-label={dir < 0 ? "Scroll up" : "Scroll down"}
+    class="group flex {sz.row} w-full shrink-0 items-center justify-center transition-colors cursor-pointer [color:color-mix(in_srgb,var(--ui-color-text)_55%,transparent)] hover:[background-color:color-mix(in_srgb,var(--sbm-accent)_12%,transparent)] {sz.iconSvg}"
+    onclick={() => stepPopout(id, count, dir * popoutWindow(id, count).page)}
+    onmouseenter={popoutOnHover ? cancelClose : undefined}
+    onmouseleave={popoutOnHover ? scheduleClose : undefined}
+  >
+    {#if dir < 0}<IconChevronUp />{:else}<IconChevronDown />{/if}
+  </button>
+{/snippet}
+
+<!-- Popout panel — the floating menu. Renders a custom `item.popout` snippet, else a WINDOW of the
+     children as nested `menuNode`s (so a child that is itself a parent cascades further). When the
+     children overflow the strip the window shows full-height ▲/▼ stepper rows instead of scrolling;
+     the wheel and ↑/↓ also step (whole items). `data-sbm-popout` + `data-open` are consumer hooks. -->
+{#snippet popoutPanel(item: SideBarMenuItem, id: ItemId, group: "top" | "bottom", maxHeight: string)}
   {@const popoutId = popoutDomId(id)}
   {@const isOpen = isOnPath(id)}
-  <!-- svelte-ignore a11y_interactive_supports_focus -->
+  {@const kids = item.children ?? []}
+  {@const win = popoutWindow(id, kids.length)}
+  {@const childReserve = anyIcon(kids)}
+  {@const rowsShown = (win.up ? 1 : 0) + (win.end - win.start) + (win.down ? 1 : 0)}
+  {@const bd = popoutBorder(id, group, !id.includes(">"), rowsShown)}
+  <!-- svelte-ignore a11y_interactive_supports_focus a11y_no_noninteractive_element_interactions -->
   <div
     role="menu"
     tabindex="-1"
     id={popoutId}
     data-sbm-popout=""
     data-open={isOpen}
-    style="width: max-content;{expandedWidth != null ? ` max-width: ${expandedWidth}px;` : ''} --sbm-accent: {accentVar};"
-    class="overflow-y-auto overflow-x-hidden max-h-[calc(100vh-0.5rem)] 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}"
+    style="width: max-content;{expandedWidth != null ? ` max-width: ${expandedWidth}px;` : ''} max-height: {maxHeight}; --sbm-accent: {accentVar};{bd.nudge ? ` transform: translateY(${bd.nudge}px);` : ''}"
+    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)] {bd.cls}"
     onmouseenter={popoutOnHover ? cancelClose : undefined}
     onmouseleave={popoutOnHover ? scheduleClose : undefined}
+    onwheel={item.popout
+      ? undefined
+      : (e) => {
+          if (win.up || win.down) {
+            e.preventDefault();
+            stepPopout(id, kids.length, Math.sign(e.deltaY) * 3);
+          }
+        }}
+    onkeydown={item.popout
+      ? undefined
+      : (e) => {
+          if (e.key === "ArrowDown") {
+            e.preventDefault();
+            stepPopout(id, kids.length, 1);
+          } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            stepPopout(id, kids.length, -1);
+          }
+        }}
   >
     {#if item.popout}
-      {@render item.popout()}
+      <div
+        class="overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+        style="max-height: {maxHeight};"
+      >
+        {@render item.popout()}
+      </div>
     {:else}
-      {@const childReserve = anyIcon(item.children ?? [])}
+      {#if win.up}{@render arrowRow(id, kids.length, -1)}{/if}
       <ul class="flex flex-col">
-        {#each item.children ?? [] as child, ci (child.label)}
+        {#each kids.slice(win.start, win.end) as child, i (child.label)}
           <li class="list-none" role="none">
-            {@render menuNode(child, `${id}>${ci}`, group, ci, item.children!.length, childReserve, 1)}
+            {@render menuNode(child, `${id}>${win.start + i}`, group, childReserve, 1)}
           </li>
         {/each}
       </ul>
+      {#if win.down}{@render arrowRow(id, kids.length, 1)}{/if}
     {/if}
   </div>
 {/snippet}
@@ -1081,6 +1164,7 @@
 >
   <aside
     bind:this={asideRef}
+    bind:clientHeight={asideH}
     style="width: {asideWidthCss};{maxWidthCss ? ` max-width: ${maxWidthCss};` : ''} --sbm-accent: {accentVar};"
     onmouseenter={hoverExpandActive ? openHoverExpand : undefined}
     onmouseleave={hoverExpandActive ? scheduleHoverCollapse : undefined}
@@ -1121,7 +1205,7 @@
       <ul class="flex flex-col {scrollList}">
         {#each items as item, idx (item.label)}
           <li class="list-none">
-            {@render menuNode(item, `top:${idx}`, "top", idx, items.length, railReserve, 0)}
+            {@render menuNode(item, `top:${idx}`, "top", railReserve, 0)}
           </li>
         {/each}
       </ul>
@@ -1137,7 +1221,7 @@
       <ul class="flex flex-col shrink-0">
         {#each bottomItems as item, idx (item.label)}
           <li class="list-none">
-            {@render menuNode(item, `bottom:${idx}`, "bottom", idx, bottomItems.length, railReserve, 0)}
+            {@render menuNode(item, `bottom:${idx}`, "bottom", railReserve, 0)}
           </li>
         {/each}
       </ul>