@celestia-island/hikari 0.41.8 → 0.42.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.41.8",
+  "version": "0.42.1",
   "private": false,
   "type": "module",
   "description": "Hikari Vue 3 component library — production-grade UI components based on shittim-chest design system",

package/src/DemoApp.tsx

@@ -16,6 +16,7 @@ import {
   HSkeleton, HSkeletonList, HAvatar, HKbd, HDivider,
   HAlert, HEmptyState, HExpansionPanel,
   HTabs, HCard, HTable, HTimeline,
+  HScrollContainer, HLoadMore,
   HMediaSlider, HMediaPlayer, HImageViewer,
   HImagePreview,
   HZoomToolbar, HMinimap, HTrendChart,
@@ -197,6 +198,24 @@ export default defineComponent({
       syncZoom();
     }
 
+    // HLoadMore + HScrollContainer approachEnd — the canonical dynamic
+    // loading pair: the container emits `approachEnd` when the content
+    // end nears (including the initial under-filled pass), the demo
+    // "fetches" a page, and the indicator morphs button → spinner → end.
+    const pagedRows = ref(Array.from({ length: 10 }, (_, i) => `Row ${i + 1}`));
+    const pagedState = ref<"idle" | "loading" | "end">("idle");
+    function loadPagedRows() {
+      if (pagedState.value !== "idle") return;
+      pagedState.value = "loading";
+      setTimeout(() => {
+        pagedRows.value = [
+          ...pagedRows.value,
+          ...Array.from({ length: 10 }, (_, i) => `Row ${pagedRows.value.length + i + 1}`),
+        ];
+        pagedState.value = pagedRows.value.length >= 60 ? "end" : "idle";
+      }, 500);
+    }
+
     return () => (
       <div class="demo">
         <header class="demo-header">
@@ -225,6 +244,22 @@ export default defineComponent({
           </div>
         </section>
 
+        <section>
+          <h2>HScrollContainer + HLoadMore</h2>
+          <HScrollContainer
+            style={{ height: "320px" }}
+            approachEnd
+            onApproachEnd={loadPagedRows}
+          >
+            <div style={{ display: "flex", flexDirection: "column" }}>
+              {pagedRows.value.map((r) => (
+                <div key={r} style={{ padding: "6px 12px", borderBottom: "1px solid rgb(var(--color-muted, 108 108 108) / 18%)" }}>{r}</div>
+              ))}
+              <HLoadMore state={pagedState.value} shown={pagedRows.value.length} total={60} onLoadMore={loadPagedRows} />
+            </div>
+          </HScrollContainer>
+        </section>
+
         <section>
           <h2>HIconButton</h2>
           <div class="row">

package/src/components/HkButton.scss

@@ -64,6 +64,62 @@
   min-height: 2.75rem;
 }
 
+/* ---- Prefix / suffix icon boxes ---- */
+/* Standard-part contract (2026-09-10 user direction): a button glyph
+   renders inside a FIXED SQUARE box — flex:none so host flex rows can
+   never squeeze it into a squat sliver, centered on both axes so the
+   icon rides the button's vertical midline at any button height, and
+   the box (not the bare svg) owns the rhythm so the glyph keeps a
+   consistent margin from the adjacent label via the button's own gap.
+   The 1rem box matches the 16px glyph HkButton renders for the
+   icon/suffix props. */
+.hk-btn-icon,
+.hk-btn-suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  line-height: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+/* ---- Icon-only square ---- */
+/* An icon-only HkButton (glyph, no label) occupies a SQUARE footprint
+   by default: padding collapses fully and width locks to the size
+   variant's min-height, so it reads as the same standard square the
+   HIconButton family guarantees. box-sizing is self-declared (house
+   convention — geometry rules never rely on a host-side reset reaching
+   the component): with zero padding the min-height governs the height
+   on every size, an exact square under border-box AND content-box.
+   Hosts may still override with an explicit width when a design
+   genuinely calls for another shape. */
+.hk-btn-icon-only {
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.hk-btn-sm.hk-btn-icon-only {
+  width: 1.75rem;
+}
+
+.hk-btn-md.hk-btn-icon-only {
+  width: 2.5rem;
+}
+
+.hk-btn-lg.hk-btn-icon-only {
+  width: 2.75rem;
+}
+
+/* The first-class block prop wins over the square width. */
+.hk-btn-block.hk-btn-icon-only {
+  width: 100%;
+}
+
 /* ---- Primary ---- */
 
 .hk-btn-primary {

package/src/components/HkButton.test.tsx

@@ -1,8 +1,13 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { createApp, h } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
 
 import HkButton from "./HkButton";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 /**
  * HkButton contract tests:
  * - variant / size / block / loading class mapping on the root <button>
@@ -142,6 +147,82 @@ describe("HkButton content slots", () => {
   });
 });
 
+describe("HkButton icon-only square contract", () => {
+  it("flags the icon-only square class for a glyph with no label", () => {
+    const iconOnly = mount(h(HkButton, { icon: "close", ariaLabel: "Close" }));
+    const btn = button(iconOnly);
+    expect(btn.className).toContain("hk-btn-icon-only");
+    expect(iconOnly.querySelector(".hk-btn-icon")).not.toBeNull();
+
+    const suffixOnly = mount(h(HkButton, { suffix: "close", ariaLabel: "Next" }));
+    expect(button(suffixOnly).className).toContain("hk-btn-icon-only");
+
+    // Glyph + text stays a normal text button — no square collapse.
+    const withText = mount(h(HkButton, { icon: "close" }, () => "Close"));
+    expect(button(withText).className).not.toContain("hk-btn-icon-only");
+  });
+
+  it("keeps the square footprint while an icon-only button loads", () => {
+    const c = mount(h(HkButton, { icon: "close", loading: true, ariaLabel: "Busy" }));
+    // The spinner replaces the glyph, but the button still carries no
+    // label — the square footprint must hold through the swap.
+    expect(button(c).className).toContain("hk-btn-icon-only");
+  });
+
+  it("keeps the block class alongside the icon-only square class", () => {
+    // CSS precedence lives in the SCSS contract test below; this pins the
+    // class composition so both rules can actually apply.
+    const c = mount(h(HkButton, { icon: "close", block: true, ariaLabel: "Go" }));
+    const cls = button(c).className;
+    expect(cls).toContain("hk-btn-block");
+    expect(cls).toContain("hk-btn-icon-only");
+  });
+
+  it("does not square-collapse when a shortcut chip rides along", () => {
+    // The HKbd chip is an extra flex child — the fixed square width would
+    // visibly clip it, so icon + shortcut stays a padded button.
+    const c = mount(h(HkButton, { icon: "close", shortcut: "Ctrl+W", ariaLabel: "Close" }));
+    expect(button(c).className).not.toContain("hk-btn-icon-only");
+  });
+});
+
+// SCSS geometry contract (house pattern, cf. HkNumberInput.affix.test.ts):
+// the square is a CSS fact — padding fully collapsed + self-declared
+// border-box (survives hosts without a reset) + the block prop winning
+// over the square width. Textual assertions because happy-dom does not
+// lay out.
+describe("HkButton icon-only SCSS contract", () => {
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+
+  it("self-declares the collapsed square geometry", () => {
+    const rule = scss.match(/\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "icon-only rule must exist").toBeTruthy();
+    expect(rule).toContain("padding: 0");
+    expect(rule).toContain("box-sizing: border-box");
+  });
+
+  it("lets the block prop win over the square width", () => {
+    const rule = scss.match(/\.hk-btn-block\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "block override rule must exist").toBeTruthy();
+    expect(rule).toContain("width: 100%");
+  });
+
+  it("locks each size variant width to its min-height", () => {
+    const cases: Array<[string, string]> = [
+      ["sm", "1.75rem"],
+      ["md", "2.5rem"],
+      ["lg", "2.75rem"],
+    ];
+    for (const [size, width] of cases) {
+      const rule = scss.match(new RegExp(`\\.hk-btn-${size}\\.hk-btn-icon-only\\s*{[^}]*}`))?.[0] ?? "";
+      expect(rule, `${size} icon-only rule must exist`).toBeTruthy();
+      expect(rule).toContain(`width: ${width}`);
+      const minH = scss.match(new RegExp(`\\.hk-btn-${size}\\s*{[^}]*}`))?.[0] ?? "";
+      expect(minH).toContain(`min-height: ${width}`);
+    }
+  });
+});
+
 describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
   it("spreads extra attrs and honors an explicit type", () => {
     const c = mount(h(HkButton, { type: "submit", "data-test": "probe" }, () => "Save"));

package/src/components/HkButton.tsx

@@ -42,33 +42,47 @@ export default defineComponent({
       props.shortcut ? "hk-btn-has-shortcut" : "",
     ]);
 
-    return () => (
-      <button
-        {...attrs}
-        type={(attrs.type as "button" | "submit" | "reset") || "button"}
-        disabled={props.disabled || props.loading}
-        class={[buttonClass.value, attrs.class]}
-        style={attrs.style || undefined}
-        aria-label={props.ariaLabel}
-        aria-busy={props.loading || undefined}
-        onClick={(e) => emit("click", e)}
-      >
-        {props.loading ? <HSpinner size="xs" tone="current" /> : null}
-        {!props.loading && props.icon ? (
-          <span class="hk-btn-icon">
-            <HIcon name={props.icon} size={16} />
-          </span>
-        ) : null}
-        {slots.default?.()}
-        {props.suffix ? (
-          <span class="hk-btn-suffix">
-            <HIcon name={props.suffix} size={16} />
-          </span>
-        ) : null}
-        {props.shortcut ? (
-          <HKbd keys={props.shortcut!} size="sm" />
-        ) : null}
-      </button>
-    );
+    return () => {
+      // Icon-only contract (2026-09-10 user direction): a button carrying
+      // just a prefix/suffix glyph and no text collapses to the same
+      // square footprint the HIconButton family guarantees — a bare icon
+      // in a padded text button reads as a squat rectangle otherwise.
+      // Re-evaluated per render, NOT a computed: slots.default is not
+      // reactive, so a cached flag would go stale when a parent toggles
+      // the label slot without touching the icon props. A shortcut chip
+      // is excluded: it renders as an extra flex child the fixed square
+      // width would visibly clip.
+      const iconOnly =
+        !slots.default && Boolean(props.icon || props.suffix) && !props.shortcut;
+
+      return (
+        <button
+          {...attrs}
+          type={(attrs.type as "button" | "submit" | "reset") || "button"}
+          disabled={props.disabled || props.loading}
+          class={[buttonClass.value, iconOnly ? "hk-btn-icon-only" : "", attrs.class]}
+          style={attrs.style || undefined}
+          aria-label={props.ariaLabel}
+          aria-busy={props.loading || undefined}
+          onClick={(e) => emit("click", e)}
+        >
+          {props.loading ? <HSpinner size="xs" tone="current" /> : null}
+          {!props.loading && props.icon ? (
+            <span class="hk-btn-icon">
+              <HIcon name={props.icon} size={16} />
+            </span>
+          ) : null}
+          {slots.default?.()}
+          {props.suffix ? (
+            <span class="hk-btn-suffix">
+              <HIcon name={props.suffix} size={16} />
+            </span>
+          ) : null}
+          {props.shortcut ? (
+            <HKbd keys={props.shortcut!} size="sm" />
+          ) : null}
+        </button>
+      );
+    };
   },
 });

package/src/components/HkIconButton.test.tsx

@@ -102,4 +102,19 @@ describe("HkIconButton", () => {
     const c = mountComp(() => h(HkIconButton, { "aria-label": "probe" }));
     expect(c.querySelector("circle")).not.toBeNull();
   });
+
+  // Named-icon contract (2026-09-10): the icon prop resolves through HIcon
+  // (functional keys ride the host material pack) — slot content still
+  // wins over it, and the placeholder circle only shows with neither.
+  it("renders the icon prop through HIcon, below slot precedence", () => {
+    const propOnly = mountComp(() => h(HkIconButton, { icon: "close", "aria-label": "close" }));
+    expect(propOnly.querySelector(".hk-icon")).not.toBeNull();
+    expect(propOnly.querySelector("circle")).toBeNull();
+
+    const propAndSlot = mountComp(() =>
+      h(HkIconButton, { icon: "close", "aria-label": "close" }, { icon: () => h("span", { class: "slot-probe" }) }),
+    );
+    expect(propAndSlot.querySelector(".slot-probe")).not.toBeNull();
+    expect(propAndSlot.querySelector(".hk-icon")).toBeNull();
+  });
 });

package/src/components/HkIconButton.tsx

@@ -1,6 +1,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 import "./HkIconButton.scss";
 import "./HkIconButtonVars.scss";
+import HIcon from "./HkIcon";
 
 export default defineComponent({
   name: "HkIconButton",
@@ -21,6 +22,14 @@ export default defineComponent({
       `hk-icon-button-${props.variant}`,
     ]);
 
+    // Named-icon contract (2026-09-10 user direction): the icon prop is a
+    // first-class way to draw the glyph — it resolves through HIcon so
+    // functional keys ("close", "back") keep riding the host material-pack
+    // family exactly like the slot composition does. The rendered size is
+    // pinned by --hi-icon-button-icon-size; the HIcon size prop only picks
+    // the matching box class. Slot content still wins over the prop.
+    const glyphSize = computed(() => (props.size >= 32 ? 20 : 16));
+
     return () => (
       <button
         class={cls.value}
@@ -35,11 +44,15 @@ export default defineComponent({
               ? // Natural children usage: <HIconButton><HIcon .../></HIconButton>
                 // renders the child as the icon (unified window-close wave).
                 slots.default()
-              : (
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="10" />
-                </svg>
-              )}
+              : props.icon
+                ? (
+                  <HIcon name={props.icon} size={glyphSize.value} />
+                )
+                : (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                  </svg>
+                )}
         </span>
       </button>
     );

package/src/components/HkLoadMore.scss

@@ -0,0 +1,53 @@
+/*
+ * HkLoadMore — the unified bottom indicator for dynamically loaded
+ * lists. Hairline rules flank the control so the indicator reads as
+ * "the list pauses here" rather than a stray button; everything is
+ * token-driven (no hardcoded colors) so themes restyle it for free.
+ */
+
+.hk-load-more {
+  display: flex;
+  align-items: center;
+  gap: var(--space-12);
+  padding: var(--space-12) 0;
+  color: rgb(var(--color-text-tertiary));
+}
+
+/* Hairline rules: transparent at the outer edge, muted towards the
+ * control; the end rule mirrors the gradient. */
+.hk-load-more-rule {
+  flex: 1;
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgb(var(--color-muted) / 35%));
+}
+
+.hk-load-more-rule-end {
+  background: linear-gradient(to left, transparent, rgb(var(--color-muted) / 35%));
+}
+
+.hk-load-more-core {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-10);
+}
+
+/* Delivery progress ("3 / 19"): mono, tabular so the digits don't
+ * shimmer while counting up. */
+.hk-load-more-count {
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.04em;
+  color: rgb(var(--color-text-tertiary));
+}
+
+.hk-load-more[data-state="loading"] .hk-load-more-count {
+  opacity: 0.6;
+}
+
+.hk-load-more-end {
+  font-size: var(--text-2xs);
+  letter-spacing: 0.08em;
+  color: rgb(var(--color-text-tertiary));
+}

package/src/components/HkLoadMore.test.tsx

@@ -0,0 +1,65 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkLoadMore from "./HkLoadMore";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+/** The en bundle loads eagerly, so the two-arg t() fallbacks double as
+ *  the assertions' expected strings — no i18n test setup needed. */
+describe("HkLoadMore", () => {
+  it("idle renders the load-more button and the shown/total counter", () => {
+    const c = mount(h(HkLoadMore, { shown: 3, total: 19 }));
+    const button = c.querySelector("button.hk-btn");
+    expect(button).not.toBeNull();
+    expect(button!.textContent).toContain("Load more");
+    expect(c.querySelector(".hk-load-more-count")!.textContent).toBe("3 / 19");
+    expect(c.querySelector(".hk-load-more")!.getAttribute("data-state")).toBe("idle");
+  });
+
+  it("clicking the button emits load-more", () => {
+    const fired: string[] = [];
+    const c = mount(h(HkLoadMore, { onLoadMore: () => fired.push("more") }));
+    (c.querySelector("button.hk-btn") as HTMLButtonElement).click();
+    expect(fired).toEqual(["more"]);
+  });
+
+  it("loading state disables the button with aria-busy and the loading label", () => {
+    const c = mount(h(HkLoadMore, { state: "loading", shown: 3, total: 19 }));
+    const button = c.querySelector("button.hk-btn") as HTMLButtonElement;
+    expect(button.disabled).toBe(true);
+    expect(button.getAttribute("aria-busy")).toBe("true");
+    expect(button.textContent).toContain("Loading…");
+    expect(c.querySelector(".hk-spinner")).not.toBeNull();
+  });
+
+  it("end state swaps the button for the reached-the-end status note", () => {
+    const c = mount(h(HkLoadMore, { state: "end", shown: 19, total: 19 }));
+    expect(c.querySelector("button.hk-btn")).toBeNull();
+    const note = c.querySelector('[role="status"]');
+    expect(note).not.toBeNull();
+    expect(note!.textContent).toContain("You've reached the end");
+    expect(c.querySelector(".hk-load-more-count")!.textContent).toBe("19 / 19");
+  });
+
+  it("omits the counter entirely when shown/total are absent", () => {
+    const c = mount(h(HkLoadMore));
+    expect(c.querySelector(".hk-load-more-count")).toBeNull();
+  });
+});

package/src/components/HkLoadMore.tsx

@@ -0,0 +1,72 @@
+import { defineComponent, type PropType } from "vue";
+
+import "./HkLoadMore.scss";
+import { useI18n } from "../i18n/context";
+import HButton from "./HkButton";
+
+/**
+ * The unified bottom indicator for dynamically loaded lists — one look
+ * for every consumer (cruise panels, tables, feeds), three states:
+ *
+ * - `idle`: a ghost load-more button; clicking emits `loadMore`.
+ * - `loading`: the SAME button with its built-in spinner (HkButton
+ *   swaps in an HSpinner while loading) — no second spinner here, the
+ *   affordance morphs in place at a stable height.
+ * - `end`: a muted "reached the end" note replacing the button.
+ *
+ * Optional `shown`/`total` render a tabular mono counter next to the
+ * control in every state ("3 / 19"), giving users the delivery
+ * progress without each app inventing its own wording.
+ */
+export default defineComponent({
+  name: "HkLoadMore",
+  props: {
+    state: { type: String as PropType<"idle" | "loading" | "end">, default: "idle" },
+    /** Delivered item count (with `total`, renders the progress counter). */
+    shown: { type: Number, default: undefined },
+    /** Full item count behind the windowed list. */
+    total: { type: Number, default: undefined },
+  },
+  emits: ["loadMore"],
+  setup(props, { emit }) {
+    const { t } = useI18n();
+    return () => {
+      const hasCount =
+        typeof props.shown === "number" && typeof props.total === "number";
+      const loading = props.state === "loading";
+      return (
+        <div class="hk-load-more" data-state={props.state}>
+          <span class="hk-load-more-rule" aria-hidden="true" />
+          <span class="hk-load-more-core">
+            {props.state === "end" ? (
+              <span class="hk-load-more-end" role="status">
+                {t("hikari::loadMore.end", "You've reached the end")}
+              </span>
+            ) : (
+              <HButton
+                variant="ghost"
+                size="sm"
+                icon="ChevronDown"
+                loading={loading}
+                aria-label={
+                  loading
+                    ? t("hikari::loadMore.loading", "Loading…")
+                    : t("hikari::loadMore.more", "Load more")
+                }
+                onClick={() => emit("loadMore")}
+              >
+                {loading
+                  ? t("hikari::loadMore.loading", "Loading…")
+                  : t("hikari::loadMore.more", "Load more")}
+              </HButton>
+            )}
+            {hasCount ? (
+              <span class="hk-load-more-count">{props.shown} / {props.total}</span>
+            ) : null}
+          </span>
+          <span class="hk-load-more-rule hk-load-more-rule-end" aria-hidden="true" />
+        </div>
+      );
+    };
+  },
+});

package/src/components/HkScrollContainer.test.ts

@@ -11,6 +11,8 @@ interface Mounted {
   instance: {
     refresh: () => void;
     getOverflow: () => { horizontal: string; vertical: string };
+    isNearEnd?: () => boolean;
+    recheck?: () => void;
   } | null;
 }
 
@@ -47,7 +49,7 @@ function mountScroller(props: Record<string, unknown> = {}, slotText = "content"
 /** happy-dom performs no layout, so scroll geometry is stubbed on the
  *  viewport instance (shadowing the prototype getters) before a
  *  refresh() pass re-senses the overflow. */
-function stubGeometry(el: HTMLElement, geom: { scrollWidth?: number; clientWidth?: number; scrollLeft?: number }) {
+function stubGeometry(el: HTMLElement, geom: { scrollWidth?: number; clientHeight?: number; clientWidth?: number; scrollLeft?: number; scrollHeight?: number; scrollTop?: number }) {
   const desc: PropertyDescriptorMap = {};
   for (const [key, value] of Object.entries(geom)) {
     desc[key] = { configurable: true, get: () => value };
@@ -158,3 +160,44 @@ describe("HkScrollContainer scrollbar reactivity", () => {
     expect(root.querySelectorAll(".hk-scrollbar-track").length).toBe(0);
   });
 });
+
+describe("HkScrollContainer approachEnd", () => {
+  /** Two awaited frames: scheduleFrame's scheduling rAF + the composable's
+   *  onceFrame initial sensing pass. */
+  async function flushFrames(): Promise<void> {
+    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+    await new Promise<void>((r) => requestAnimationFrame(() => r()));
+  }
+
+  it("emits approachEnd for under-filled content and exposes isNearEnd", async () => {
+    const emissions: number[] = [];
+    const m = mountScroller({ approachEnd: true, onApproachEnd: () => emissions.push(1) });
+    // happy-dom has no layout; a real under-filled DOM reports the
+    // CSSOM clamp (scrollHeight == clientHeight), so stub THAT.
+    stubGeometry(m.viewport, { scrollHeight: 300, clientHeight: 300, scrollTop: 0 });
+    await flushFrames();
+    expect(emissions.length).toBe(1);
+    expect(m.instance?.isNearEnd?.()).toBe(true);
+  });
+
+  it("does not emit when the prop is off", async () => {
+    const emissions: number[] = [];
+    mountScroller({ onApproachEnd: () => emissions.push(1) });
+    await flushFrames();
+    expect(emissions.length).toBe(0);
+  });
+
+  it("exposes recheck and honours it at the container level", async () => {
+    const emissions: number[] = [];
+    const m = mountScroller({ approachEnd: true, onApproachEnd: () => emissions.push(1) });
+    stubGeometry(m.viewport, { scrollHeight: 300, clientHeight: 300, scrollTop: 0 });
+    await flushFrames();
+    expect(emissions.length).toBe(1);
+    // Pin recheck on the exposed surface: dropping it from expose() must
+    // fail here, not just at the composable level.
+    expect(typeof m.instance?.recheck).toBe("function");
+    m.instance?.recheck?.();
+    await flushFrames();
+    expect(emissions.length).toBe(2);
+  });
+});