@celestia-island/hikari 0.55.241 → 0.55.242

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.241",
+  "version": "0.55.242",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkCrossfade.test.tsx

@@ -139,6 +139,54 @@ describe("HkCrossfade — DOM contract", () => {
     expect(list[1]!.classList.contains("hk-crossfade-enter-from")).toBe(true);
   });
 
+  it("marks the leaving copy INERT for the dissolve (a11y: dead content)", async () => {
+    // pointer-events: none only stops the mouse — the frozen copy must
+    // also leave the tab order and the accessibility tree, or a screen
+    // reader walks a second, stale copy (duplicate landmarks/roles; in
+    // the rail swap it is a whole second sidebar). A cancelled leave has
+    // to restore the item (see the next case).
+    vi.useFakeTimers();
+    freezeRaf();
+    const { container, set } = mountCrossfade();
+    await set("b");
+    await vi.advanceTimersByTimeAsync(200);
+
+    const list = items(container);
+    expect(list[0]!.hasAttribute("inert"), "the leaving copy is inert").toBe(true);
+    expect(list[0]!.getAttribute("aria-hidden")).toBe("true");
+    expect(list[1]!.hasAttribute("inert"), "the live copy stays interactive").toBe(false);
+    expect(list[1]!.hasAttribute("aria-hidden")).toBe(false);
+  });
+
+  it("a flip-back never leaves a LIVE copy inert (Vue removes the leaving node)", async () => {
+    // Pins the behavior the inert contract relies on: on a keyed
+    // flip-back Vue cancels the in-flight leave of the old element
+    // through its internal callback (no element argument -> routed to
+    // afterLeave, which REMOVES it) and re-enters the key as a FRESH
+    // element. So no live copy can carry inert; if Vue ever changed that
+    // shape (a reused, re-entered element), this test is the tripwire.
+    vi.useFakeTimers();
+    freezeRaf();
+    const { container, set } = mountCrossfade();
+    await set("b");
+    await vi.advanceTimersByTimeAsync(100);
+    const oldA = items(container).find((el) => el.dataset.crossfadeKey === "a")!;
+    expect(oldA.hasAttribute("inert")).toBe(true);
+
+    await set("a");
+    await vi.advanceTimersByTimeAsync(100);
+
+    // The inert old node is gone (not left mounted), and every live node
+    // for the key renders un-inert.
+    expect(oldA.isConnected, "the inert leaving node is removed").toBe(false);
+    const live = items(container).filter((el) => el.dataset.crossfadeKey === "a");
+    expect(live.length).toBeGreaterThan(0);
+    for (const el of live) {
+      expect(el.hasAttribute("inert"), "a live copy must never be inert").toBe(false);
+      expect(el.getAttribute("aria-hidden")).toBeNull();
+    }
+  });
+
   it("watchdog completes a stalled swap: sweeps frozen classes, drops the stale item", async () => {
     vi.useFakeTimers();
     freezeRaf();

package/src/components/HkCrossfade.tsx

@@ -40,7 +40,16 @@ const REPORT_MS = CROSSFADE_WATCHDOG_MS;
  *   opacity ahead of the outgoing one's decay and stops the composite from
  *   dipping toward the background mid-swap.
  * - The leaving item drops pointer events: it is dead content and must not
- *   intercept clicks while it dissolves under the incoming one.
+ *   intercept clicks while it dissolves under the incoming one. It is also
+ *   marked `inert` + `aria-hidden` for the dissolve (2026-10-31): a frozen
+ *   copy must leave the TAB ORDER and the accessibility tree too, or a
+ *   screen reader walks a stale duplicate (in the rail swap it is a whole
+ *   second sidebar). TRADE-OFF: a control focused in the leaving item is
+ *   blurred by the browser the moment the attribute lands, `--duration`
+ *   earlier than the unmount would have; hosts that care move focus FIRST
+ *   (the rail kit's closePeek does exactly that). happy-dom applies no
+ *   inert focus fixup, so that browser behavior is intentionally not
+ *   covered by this suite.
  * - `appear` dissolves the initially rendered item in; off by default —
  *   first paint should never animate (view shells, restored state).
  * - `disabled` renders the active item bare (synchronous swap, no watchdog):
@@ -115,6 +124,25 @@ export default defineComponent({
       if (pending === 0) report.cancel();
     };
 
+    /** Mark a leaving item inert (out of the tab order and the a11y tree)
+     *  for the dissolve. Attribute-based (not the `inert` IDL property) so
+     *  the DOM contract is observable in tests and SSR-less hosts alike.
+     *  The restore is defence: on a keyed flip-back Vue removes the
+     *  leaving node and re-enters a FRESH element (its internal
+     *  cancel-callback runs with no argument and routes to afterLeave), so
+     *  nothing live is ever left inert by that route — but any shape that
+     *  DOES cancel a leave must not keep a live copy inert. */
+    function setLeavingInert(el: Element | null | undefined, on: boolean): void {
+      if (!el) return;
+      if (on) {
+        el.setAttribute("inert", "");
+        el.setAttribute("aria-hidden", "true");
+        return;
+      }
+      el.removeAttribute("inert");
+      el.removeAttribute("aria-hidden");
+    }
+
     // ── Swap-stall watchdog ──────────────────────────────────────────
     /** Budget for one arm: the base sweep window plus the choreographed
      *  enter hold — a delayed enter is mid-flight, not stalled, when the
@@ -211,9 +239,23 @@ export default defineComponent({
             onBeforeEnter={() => { armReport(); armWatchdog(); }}
             onAfterEnter={settleReport}
             onEnterCancelled={settleReport}
-            onBeforeLeave={() => { armReport(); armWatchdog(); }}
+            onBeforeLeave={(el: Element) => {
+              // DEAD CONTENT for the dissolve: drop it from the tab order
+              // AND the accessibility tree. pointer-events: none (the
+              // leave rule) only stops the mouse — a frozen copy otherwise
+              // stays reachable by Tab and by a screen reader's virtual
+              // cursor for the whole dissolve, and in the rail swap it is
+              // a second full sidebar (duplicate landmark/roles, stale
+              // controls) while the live one dissolves in.
+              setLeavingInert(el, true);
+              armReport();
+              armWatchdog();
+            }}
             onAfterLeave={settleReport}
-            onLeaveCancelled={settleReport}
+            onLeaveCancelled={(el: Element) => {
+              setLeavingInert(el, false);
+              settleReport();
+            }}
           >
             {item()}
           </Transition>

package/src/components/HkFaceShell.rail.test.tsx

@@ -475,9 +475,46 @@ describe("HkFaceShell rail chrome: toggle placement and the clip wrapper", () =>
     // marker reads rail while the DENSITY lives on the generation.
     expect(c.slotParams[c.slotParams.length - 1]!.collapsed).toBe(true);
     expect(c.aside().hasAttribute("data-rail"), "the root keeps the state marker").toBe(true);
+    // The leaving generation's ITEM is inert for the dissolve (dead
+    // content leaves the tab order and the a11y tree); the live one is
+    // not.
+    const leavingItem = mid[0]!.parentElement!;
+    const enteringItem = mid[1]!.parentElement!;
+    expect(leavingItem.hasAttribute("inert"), "the dying copy is inert").toBe(true);
+    expect(leavingItem.getAttribute("aria-hidden")).toBe("true");
+    expect(enteringItem.hasAttribute("inert"), "the live copy stays interactive").toBe(false);
     vi.unstubAllGlobals();
   });
 
+  it("hands focus to the toggle when a peek close unmounts the focused row", async () => {
+    // The rail/full swap mounts the entering generation fresh and marks
+    // the leaving one inert, so a focused row inside the clip dies with
+    // it. useSidebarRail's close paths hand focus to the toggle — this is
+    // the SHELL half of that contract (the HkSidebar suite pins the other
+    // host; different host ref, different toggle placement).
+    vi.useFakeTimers();
+    const c = mountShell({ sidebarCollapsible: true }, () =>
+      h("div", { class: "sidebar-mock" }, h("button", { class: "nav-btn" }, "NAV")),
+    );
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+    c.aside().dispatchEvent(POINTER_ENTER());
+    await vi.advanceTimersByTimeAsync(400);
+    expect(c.aside().hasAttribute("data-peeking")).toBe(true);
+
+    // The ACTIVE (entering) generation's row: the leaving copy is inert
+    // and (correctly) refuses focus.
+    const gens = c.panel().querySelectorAll<HTMLElement>(".hk-sidebar-rail-generation");
+    const row = gens[gens.length - 1]!.querySelector<HTMLButtonElement>("button.nav-btn")!;
+    row.focus();
+    expect(document.activeElement).toBe(row);
+
+    c.aside().dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await vi.advanceTimersByTimeAsync(0);
+    expect(c.aside().hasAttribute("data-peeking")).toBe(false);
+    expect(document.activeElement, "focus moved to the toggle").toBe(c.toggle());
+  });
+
   it("does not touch the legacy sidebar path (no clip wrapper, no rail classes)", () => {
     const c = mountShell();
     expect(c.container.querySelector(".hk-sidebar-rail-clip")).toBeFalsy();

package/src/components/HkSidebar.rail.test.tsx

@@ -242,6 +242,11 @@ describe("HkSidebar rail chrome: toggle placement and the clip wrapper", () => {
     expect(entering!.style.width).toBe("64px");
     // The band content lives inside the entering generation.
     expect(entering!.querySelector(".hk-sidebar-body")).toBeTruthy();
+    // The leaving generation's ITEM is inert for the dissolve (dead
+    // content leaves the tab order and the a11y tree); the live one is not.
+    expect(leaving!.parentElement!.hasAttribute("inert"), "the dying copy is inert").toBe(true);
+    expect(leaving!.parentElement!.getAttribute("aria-hidden")).toBe("true");
+    expect(entering!.parentElement!.hasAttribute("inert")).toBe(false);
     vi.unstubAllGlobals();
   });
 
@@ -318,6 +323,37 @@ describe("HkSidebar pin window: expand must not replay the slide", () => {
   });
 });
 
+describe("HkSidebar peek close: focus is handed back to the toggle", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("Escape from a focused row inside the swapped clip lands focus on the toggle", async () => {
+    // The peek close flips the density, which MOUNTS the entering
+    // generation fresh — the focused row is unmounted a dissolve later.
+    // Without the handoff (useSidebarRail.closePeek) focus would fall to
+    // <body> and take the host's :focus-within reveal with it.
+    const c = mountSidebar({ collapsible: true });
+    c.toggle().click();
+    await vi.advanceTimersByTimeAsync(0);
+
+    // The slot's faux nav row lives INSIDE the swapped clip.
+    const row = c.container.querySelector<HTMLButtonElement>("nav button")!;
+    row.focus();
+    expect(document.activeElement).toBe(row);
+
+    c.aside().dispatchEvent(new Event("pointerenter"));
+    await vi.advanceTimersByTimeAsync(400);
+    expect(c.aside().hasAttribute("data-peeking")).toBe(true);
+
+    c.aside().dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+    await vi.advanceTimersByTimeAsync(0);
+    await vi.advanceTimersByTimeAsync(0);
+    expect(c.aside().hasAttribute("data-peeking")).toBe(false);
+    expect(document.activeElement, "focus moved to the toggle").toBe(c.toggle());
+  });
+});
+
 describe("HkSidebar hover suppression: a pointer on the toggle never peeks", () => {
   beforeEach(() => {
     vi.useFakeTimers();

package/src/components/HkSidebarRailSwap.tsx

@@ -65,11 +65,17 @@ import "./HkSidebarRail.scss";
  *   inside the slot. A peek OPEN also hands hover to the full row under
  *   the resting pointer without user intent — inherent to any dissolve.
  * - FOCUS: when the leaving generation unmounts at the end of the
- *   dissolve, focus inside it (a nav row focused in an open peek)
- *   drops to <body> — the sharpest edge is Escape-closing a peek from
- *   a focused row, which also drops the host's :focus-within (the
- *   toggle's keyboard reveal) until the next Tab. Hosts that need a
- *   softer landing can refocus the toggle from the peek-closer path.
+ *   dissolve (and the leaving item is marked inert, which blurs a
+ *   focused descendant), focus inside it would drop to <body> — taking
+ *   the host's :focus-within (the toggle's keyboard reveal) with it. The
+ *   KIT closes this for rail hosts: useSidebarRail.closePeek (and every
+ *   path that funnels through it, including the pointerleave grace close)
+ *   hands focus to the toggle when the focused node lived inside the
+ *   swapped window (2026-10-31). A bespoke host that drives its own
+ *   close paths still owns the handoff.
+ * - The leaving generation also carries `inert` + `aria-hidden` for the
+ *   dissolve (HkCrossfade), so the frozen copy is neither tabbable nor
+ *   announced while the live one fades in.
  *
  * Reduced motion: HkCrossfade keeps a short opacity exchange (a fade
  * carries no movement) while the kit's sheets kill the width slides —

package/src/composables/useSidebarRail.test.ts

@@ -1,12 +1,14 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp, defineComponent, h, ref, type Ref } from "vue";
+import { createApp, defineComponent, h, nextTick, ref, type Ref } from "vue";
 
 import { __teardownMediaQueries } from "../runtime/useMediaQuery";
 import {
   useSidebarRail,
+  SIDEBAR_RAIL_CLIP_SELECTOR,
   SIDEBAR_RAIL_PEEK_DELAY,
   SIDEBAR_RAIL_PEEK_GRACE,
   SIDEBAR_RAIL_PIN_FALLBACK,
+  SIDEBAR_RAIL_TOGGLE_BUTTON_SELECTOR,
   type SidebarRailHandle,
 } from "./useSidebarRail";
 
@@ -484,3 +486,158 @@ describe("useSidebarRail — pin window (expand must not replay the slide)", ()
     }
   });
 });
+describe("useSidebarRail — peek-close focus handoff (2026-10-31)", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  /** The rail host DOM the handoff reasons about: the swapped content
+   *  window (the clip) with a focused row inside, the straddling toggle
+   *  OUTSIDE it (the handoff target), and panel chrome that is neither.
+   *  Built from the EXPORTED selectors, so a drifted constant fails here
+   *  (it would look for a target the real markup never renders). */
+  function focusFixture() {
+    // "…-toggle button" -> the wrapper's class name (drop the leading ".").
+    const toggleClass = SIDEBAR_RAIL_TOGGLE_BUTTON_SELECTOR.split(" ")[0]!.slice(1);
+    const host = document.createElement("div");
+    host.innerHTML = [
+      `<div class="${SIDEBAR_RAIL_CLIP_SELECTOR.slice(1)}"><button class="nav-row">nav</button></div>`,
+      `<div class="${toggleClass}"><button class="toggle-btn">toggle</button></div>`,
+      '<button class="panel-chrome">chrome</button>',
+    ].join("");
+    document.body.appendChild(host);
+    const outside = document.createElement("button");
+    document.body.appendChild(outside);
+    return {
+      host,
+      row: host.querySelector<HTMLButtonElement>(".nav-row")!,
+      toggle: host.querySelector<HTMLButtonElement>(SIDEBAR_RAIL_TOGGLE_BUTTON_SELECTOR)!,
+      chrome: host.querySelector<HTMLButtonElement>(".panel-chrome")!,
+      outside,
+      cleanup: () => {
+        host.remove();
+        outside.remove();
+      },
+    };
+  }
+
+  /** Open a peek on the fixture's host. */
+  function openPeek(f: ReturnType<typeof focusFixture>): SidebarRailHandle {
+    const rail = mountRail({ host: () => f.host });
+    rail.collapse();
+    rail.onPointerEnter();
+    vi.advanceTimersByTime(SIDEBAR_RAIL_PEEK_DELAY);
+    expect(rail.peeking.value).toBe(true);
+    return rail;
+  }
+
+  it("hands focus to the toggle when the focused row is inside the swapped clip", async () => {
+    const f = focusFixture();
+    try {
+      const rail = openPeek(f);
+      f.row.focus();
+      expect(document.activeElement).toBe(f.row);
+
+      rail.closePeek();
+      await nextTick();
+      expect(
+        document.activeElement,
+        "the focused row is unmounted by the flip — focus must land on the toggle",
+      ).toBe(f.toggle);
+    } finally {
+      f.cleanup();
+    }
+  });
+
+  it("Escape closes through the same handoff (the keyboard path)", async () => {
+    const f = focusFixture();
+    try {
+      const rail = openPeek(f);
+      f.row.focus();
+      const consumed = rail.onKeydown(new KeyboardEvent("keydown", { key: "Escape" }));
+      expect(consumed).toBe(true);
+      await nextTick();
+      expect(document.activeElement).toBe(f.toggle);
+    } finally {
+      f.cleanup();
+    }
+  });
+
+  it("leaves focus alone when it lives OUTSIDE the swapped clip", async () => {
+    const f = focusFixture();
+    try {
+      const rail = openPeek(f);
+
+      // Panel chrome inside the host but outside the clip survives the
+      // flip — it keeps the focus it had.
+      f.chrome.focus();
+      rail.closePeek();
+      await nextTick();
+      expect(document.activeElement).toBe(f.chrome);
+
+      // Focus outside the host entirely is never touched either.
+      const rail2 = openPeek(f);
+      f.outside.focus();
+      rail2.closePeek();
+      await nextTick();
+      expect(document.activeElement).toBe(f.outside);
+    } finally {
+      f.cleanup();
+    }
+  });
+
+  it("a NO-OP closePeek (no open peek) never steals focus", async () => {
+    const f = focusFixture();
+    try {
+      const rail = mountRail({ host: () => f.host });
+      f.row.focus();
+      rail.closePeek(); // expanded, nothing to close — a nav-click path
+      await nextTick();
+      expect(document.activeElement, "navigation focus stays where the user put it").toBe(f.row);
+    } finally {
+      f.cleanup();
+    }
+  });
+
+  it("the pointerleave GRACE close hands off too (the most common close)", async () => {
+    // Regression pin for the 2026-10-31 review finding: the grace timer
+    // and the grace<=0 branch used to write `peeking` directly, bypassing
+    // the handoff — hover-peek, focus a header inside it, move the
+    // pointer away, and focus died with the leaving generation.
+    const f = focusFixture();
+    try {
+      const rail = openPeek(f);
+      f.row.focus();
+
+      rail.onPointerLeave();
+      vi.advanceTimersByTime(SIDEBAR_RAIL_PEEK_GRACE - 1);
+      expect(rail.peeking.value, "still inside the grace").toBe(true);
+      expect(document.activeElement, "focus untouched before the close").toBe(f.row);
+
+      vi.advanceTimersByTime(1);
+      expect(rail.peeking.value).toBe(false);
+      expect(document.activeElement, "the grace close hands focus to the toggle").toBe(f.toggle);
+    } finally {
+      f.cleanup();
+    }
+  });
+
+  it("the grace<=0 branch (no grace configured) hands off as well", async () => {
+    const f = focusFixture();
+    try {
+      const rail = mountRail({ host: () => f.host, peekGrace: 0 });
+      rail.collapse();
+      rail.onPointerEnter();
+      vi.advanceTimersByTime(SIDEBAR_RAIL_PEEK_DELAY);
+      expect(rail.peeking.value).toBe(true);
+      f.row.focus();
+
+      rail.onPointerLeave();
+      expect(rail.peeking.value).toBe(false);
+      expect(document.activeElement).toBe(f.toggle);
+    } finally {
+      f.cleanup();
+    }
+  });
+});
+

package/src/composables/useSidebarRail.ts

@@ -115,7 +115,12 @@ export interface SidebarRailHandle {
    *  it would otherwise start a spurious grace close. Cancels a pending
    *  peek arm; arms the grace close while peeking. */
   onPointerLeave(e?: { relatedTarget?: EventTarget | null } | null): void;
-  /** Close an open peek immediately (Escape, nav click, mode change). */
+  /** Close an open peek immediately (Escape, nav click, mode change).
+   *  A REAL close hands focus to the straddling toggle when the focused
+   *  node lived inside the swapped content window (the rail/full handoff
+   *  unmounts it and marks it inert; otherwise focus would fall to <body>
+   *  and take the host's :focus-within reveal with it). A no-op close (no
+   *  peek open) never touches focus. */
   closePeek(): void;
   /** Clear the pin window early — bind the host's width `transitionend`
    *  here (filter it to the host's own `width` transition first). */
@@ -130,6 +135,14 @@ export interface SidebarRailHandle {
 export const SIDEBAR_RAIL_PEEK_DELAY = 400;
 /** Default grace after pointerleave before the peek drawer closes. */
 export const SIDEBAR_RAIL_PEEK_GRACE = 150;
+/** Selector of the panel's content window — the clip the rail handoff
+ *  (HkSidebarRailSwap) swaps its generations inside. Focus living here
+ *  cannot survive a peek close: the density flip mounts the entering
+ *  generation fresh and unmounts the focused copy a dissolve later. */
+export const SIDEBAR_RAIL_CLIP_SELECTOR = ".hk-sidebar-rail-clip";
+/** Selector of the straddling toggle's <button> — the focus target a
+ *  peek close hands off to (the one control OUTSIDE the swap). */
+export const SIDEBAR_RAIL_TOGGLE_BUTTON_SELECTOR = ".hk-sidebar-rail-toggle button";
 /** Safety net for the pin window: hosts clear it on their width
  *  `transitionend`, but a transition that never fires (equal widths, a
  *  host without a width animation) must not strand `data-pinning`. */
@@ -234,12 +247,67 @@ export function useSidebarRail(options: SidebarRailOptions = {}): SidebarRailHan
     arm();
   }
 
-  function closePeek(): void {
+  /**
+   * A peek close swaps the panel's content (the rail/full handoff), so a
+   * control focused inside the clip is unmounted with the leaving
+   * generation — and the leaving generation is marked `inert` for the
+   * dissolve, which blurs a focused descendant. Focus would fall to
+   * <body>, taking the host's :focus-within reveal (the toggle's
+   * keyboard affordance) with it. Hand focus to the toggle: it is the one
+   * control outside the swap and stays mounted through the flip.
+   *
+   * Runs SYNCHRONOUSLY, before the flip lands — the focused node still
+   * exists at this moment, and "move focus before hiding" is the ARIA
+   * guidance. A host that renders the toggle conditionally on `peeking`
+   * would lose the target; no shipped host does that, and the panel
+   * chrome around the clip is exactly where the toggle lives.
+   *
+   * Guarded three ways: SSR (no document), focus outside the host (the
+   * caller's own control keeps it), and focus outside the CLIP (the
+   * panel chrome survives — nothing is being unmounted).
+   */
+  function handoffFocusFromClip(): void {
+    if (typeof document === "undefined") return;
+    const host = hostEl();
+    const active = document.activeElement;
+    if (!host || !(active instanceof HTMLElement) || !host.contains(active)) return;
+    const clip = active.closest<HTMLElement>(SIDEBAR_RAIL_CLIP_SELECTOR);
+    if (!clip) return;
+    // The toggle is the clip's SIBLING inside the panel. Scope the lookup
+    // to that panel and skip toggles nested INSIDE a clip: a nested
+    // collapsible sidebar renders its own clip+toggle before the outer
+    // toggle in document order, and focusing that one would land inside
+    // the leaving (soon inert) generation — a silent no-op.
+    const panel = clip.parentElement ?? host;
+    for (const btn of panel.querySelectorAll<HTMLButtonElement>(
+      SIDEBAR_RAIL_TOGGLE_BUTTON_SELECTOR,
+    )) {
+      if (btn.closest(SIDEBAR_RAIL_CLIP_SELECTOR)) continue;
+      btn.focus();
+      return;
+    }
+  }
+
+  /**
+   * THE one writer that closes the peek. Every close path — Escape, a nav
+   * click, the pin path, the grace timer after pointerleave — funnels
+   * through here so the focus handoff can never be bypassed (the
+   * pointerleave close used to write `peeking` directly and dropped
+   * focus; 2026-10-31 review finding). Focus is handed off FIRST, while
+   * the focused node still exists.
+   */
+  function closePeekNow(): void {
     clearArm();
     clearClose();
+    if (!peeking.value) return;
+    handoffFocusFromClip();
     peeking.value = false;
   }
 
+  function closePeek(): void {
+    closePeekNow();
+  }
+
   function endPinning(): void {
     clearPin();
     pinning.value = false;
@@ -321,12 +389,12 @@ export function useSidebarRail(options: SidebarRailOptions = {}): SidebarRailHan
       clearClose();
       const grace = peekGrace();
       if (grace <= 0) {
-        peeking.value = false;
+        closePeekNow();
         return;
       }
       closeTimer = setTimeout(() => {
         closeTimer = null;
-        peeking.value = false;
+        closePeekNow();
       }, grace);
     },
     closePeek,