@celestia-island/hikari 0.41.9 → 0.42.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.41.9",
+  "version": "0.42.2",
   "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/HkColorSchemeDialog.test.ts

@@ -84,22 +84,28 @@ describe("HkColorSchemeDialog extension groups", () => {
   it("renders the extension section reactively when a group is registered after mount", async () => {
     mountDialog();
     await nextTick();
-    // Zero-cost for consumers that register nothing.
-    expect(document.body.querySelector(".s-scheme-groups")).toBeNull();
+    // The section always renders now (the on-brand content group lives
+    // here); before any registration it holds exactly that one panel.
+    const before = document.body.querySelector(".s-scheme-groups");
+    expect(before).toBeTruthy();
+    expect(before!.querySelectorAll(".hk-expansion-panel")).toHaveLength(1);
 
     // Late registration (after the dialog is already rendered): the
     // registry's reactive version invalidates the computed and the
-    // section appears without a remount.
+    // group's panel appears without a remount.
     registerTokenGroup(DIALOG_GROUP);
     await nextTick();
 
     const section = document.body.querySelector(".s-scheme-groups");
     expect(section).toBeTruthy();
-    // Un-sectioned group: one expansion panel, all slots on its grid.
-    expect(section!.querySelectorAll(".hk-expansion-panel")).toHaveLength(1);
-    const grid = section!.querySelector(".s-scheme-group-grid");
-    expect(grid).toBeTruthy();
-    expect(grid!.querySelectorAll(".hk-color-picker")).toHaveLength(2);
+    // The late group's panel lands after the on-brand content panel.
+    expect(section!.querySelectorAll(".hk-expansion-panel")).toHaveLength(2);
+    // The late group's own grid: scoped by its panel title, 2 slots.
+    const groupPanel = [...section!.querySelectorAll<HTMLElement>(".hk-expansion-panel")].find(
+      (p) => p.querySelector(".hk-expansion-panel-title")?.textContent === "Dialog wires",
+    );
+    expect(groupPanel).toBeTruthy();
+    expect(groupPanel!.querySelectorAll(".hk-color-picker")).toHaveLength(2);
   });
 
   it("renders one expansion panel per section of a sectioned group", async () => {

package/src/components/HkColorSchemeEditor.test.ts

@@ -143,6 +143,23 @@ async function setSwatchHex(swatchIndex: number, hex: string): Promise<void> {
   await nextTick();
 }
 
+/** Set an on-brand content slot (0 = onSolidText, 1 = onSolidIcon) of the
+ *  active mode to a hex color — the pair edits inside the extended-colors
+ *  section's first group panel, not the accent row. */
+async function setOnSolidHex(slotIndex: number, hex: string): Promise<void> {
+  const swatches = document.body.querySelectorAll(
+    ".s-scheme-groups .s-scheme-group-grid .hk-color-picker-swatch-btn",
+  );
+  (swatches[slotIndex] as HTMLButtonElement).click();
+  await settle();
+  const input = document.body.querySelector(
+    ".hk-color-picker-hex-row input.hk-input-element",
+  ) as HTMLInputElement | null;
+  input!.value = hex;
+  input!.dispatchEvent(new Event("input", { bubbles: true }));
+  await nextTick();
+}
+
 beforeEach(() => {
   // Pin the effective mode so edits deterministically target the dark side.
   useTheme().setMode("dark");
@@ -156,14 +173,21 @@ afterEach(() => {
 });
 
 describe("HkColorSchemeEditor", () => {
-  it("renders the seven accent pickers plus the two on-solid content pickers", async () => {
+  it("renders seven accent pickers and moves the on-solid pair into the extended section", async () => {
     const { container } = mountEditor();
     await nextTick();
 
     const pickers = container.querySelectorAll(".s-scheme-colors .hk-color-picker");
-    expect(pickers).toHaveLength(9); // 7 accents + onSolidText + onSolidIcon
-    // No groups registered in this file yet: the extension section is absent.
-    expect(container.querySelector(".s-scheme-groups")).toBeNull();
+    expect(pickers).toHaveLength(7); // accents only — the on-solid pair moved out
+    // The extended section is always rendered: the on-brand content group
+    // lives there even with no extension token group registered.
+    const groups = container.querySelector(".s-scheme-groups");
+    expect(groups).not.toBeNull();
+    expect(groups!.querySelector(".s-scheme-groups-title")).not.toBeNull();
+    const onSolidPickers = groups!.querySelectorAll(
+      ".s-scheme-group-grid .hk-color-picker",
+    );
+    expect(onSolidPickers).toHaveLength(2); // onSolidText + onSolidIcon
   });
 
   it("editing a token updates getDraft() with the edited RGB", async () => {
@@ -175,15 +199,15 @@ describe("HkColorSchemeEditor", () => {
     expect(draft.dark.primary).toEqual({ r: 255, g: 0, b: 0 });
   });
 
-  it("editing an on-solid content color updates getDraft()", async () => {
+  it("editing an on-brand content color updates getDraft()", async () => {
     const { ref } = mountEditor();
     await nextTick();
 
-    // 9th picker in the grid = onSolidIcon (7 accents, then text, then icon).
+    // 2nd picker in the on-brand group grid = onSolidIcon (text first).
     const swatches = document.body.querySelectorAll(
-      ".s-scheme-colors .hk-color-picker-swatch-btn",
+      ".s-scheme-groups .s-scheme-group-grid .hk-color-picker-swatch-btn",
     );
-    (swatches[8] as HTMLButtonElement).click();
+    (swatches[1] as HTMLButtonElement).click();
     await settle();
     const input = document.body.querySelector(
       ".hk-color-picker-hex-row input.hk-input-element",
@@ -237,8 +261,8 @@ describe("HkColorSchemeEditor", () => {
     const { ref } = mountEditor({ initialDark: legacyDark });
     await nextTick();
 
-    // 8th picker in the grid = onSolidText (7 accents, then text, then icon).
-    await setSwatchHex(7, "00ff00");
+    // 1st picker in the on-brand group grid = onSolidText.
+    await setOnSolidHex(0, "00ff00");
     expect(ref.value!.getDraft().dark.onSolidText).toEqual({ r: 0, g: 255, b: 0 });
 
     ref.value!.reset();
@@ -259,7 +283,7 @@ describe("HkColorSchemeEditor", () => {
     });
     await nextTick();
 
-    await setSwatchHex(7, "00ff00");
+    await setOnSolidHex(0, "00ff00");
     expect(ref.value!.getDraft().dark.onSolidText).toEqual({ r: 0, g: 255, b: 0 });
 
     ref.value!.reset();

package/src/components/HkColorSchemeEditor.tsx

@@ -123,14 +123,16 @@ export interface HCustomTheme {
  * their own surface (tabs, drawers, panels) instead of the built-in modal.
  *
  * Edits the seven accent tokens (primary/secondary/accent/success/error/
- * warning/info) plus the on-solid content colors (onSolidText — text on
- * brand fills, onSolidIcon — icons/shapes such as the switch thumb) per
- * mode (dark/light); the remaining surface tokens are derived. When
- * extension token groups are registered (`registerTokenGroup` /
- * `registerTokenGroupConfig`), the "Extended colors" section renders one
- * Material expansion panel per group — sub-sectioned groups get one panel
- * per section — with the slots laid out on a 2–3 column grid of
- * hue-clamped pickers showing full localized color names.
+ * warning/info) per mode (dark/light); the remaining surface tokens are
+ * derived. The on-solid content colors (onSolidText — text on brand
+ * fills, onSolidIcon — icons/shapes such as the switch thumb) are
+ * user-choosable too and edit as the FIRST group of the "Extended
+ * colors" section (2026-09-11 user direction: moved out of the accent
+ * row). When extension token groups are registered
+ * (`registerTokenGroup` / `registerTokenGroupConfig`), the section
+ * renders one Material expansion panel per group — sub-sectioned groups
+ * get one panel per section — with the slots laid out on a 2–3 column
+ * grid of hue-clamped pickers showing full localized color names.
  *
  * Exposes `reset()` (re-seed from props + current effective mode) and
  * `getDraft()` (snapshot the current edits as a `HCustomTheme`) for the
@@ -365,6 +367,40 @@ export const HkColorSchemeEditor = defineComponent({
       return panels;
     }
 
+    // ── On-brand content colors as their own extended group ──────────
+    // The two content tokens (text / icons on solid brand fills) USED to
+    // sit in the top accent row (2026-09-11 user direction: they are
+    // niche, rarely-tuned colors — they belong with the other extension
+    // palettes, as the section's FIRST group). Editing them here writes
+    // the exact same draft slots as before; only the location moved.
+    function renderOnSolidGroup() {
+      return (
+        <HExpansionPanel
+          key="on-solid-content"
+          title={t("hikari::theme.onSolidGroupTitle", "On-brand content")}
+          subtitle={countLabel(contentTokens.length)}
+        >
+          <div class="s-scheme-group-grid">
+            {contentTokens.map((key) => {
+              // Optional slots: an older prefilled custom theme may omit them.
+              const rgb = currentTokens.value[key] ?? WHITE;
+              return (
+                <HColorPicker
+                  key={key}
+                  r={rgb.r}
+                  g={rgb.g}
+                  b={rgb.b}
+                  label={t(`hikari::theme.tokens.${key}`)}
+                  layout="row"
+                  onChange={(next: { r: number; g: number; b: number }) => updateToken(key, next)}
+                />
+              );
+            })}
+          </div>
+        </HExpansionPanel>
+      );
+    }
+
     return () => (
       <div class="s-scheme-dialog">
         {props.showName && (
@@ -393,31 +429,18 @@ export const HkColorSchemeEditor = defineComponent({
               onChange={(rgb: { r: number; g: number; b: number }) => updateToken(key, rgb)}
             />
           ))}
-          {contentTokens.map((key) => {
-            // Optional slots: an older prefilled custom theme may omit them.
-            const rgb = currentTokens.value[key] ?? WHITE;
-            return (
-              <HColorPicker
-                key={key}
-                r={rgb.r}
-                g={rgb.g}
-                b={rgb.b}
-                label={t(`hikari::theme.tokens.${key}`)}
-                onChange={(next: { r: number; g: number; b: number }) => updateToken(key, next)}
-              />
-            );
-          })}
         </div>
-        {registeredGroups.value.length > 0 && (
-          <div class="s-scheme-groups">
-            <div class="s-scheme-groups-title">
-              {t("hikari::theme.extendedColors", "Extended colors")}
-            </div>
-            <div class="s-scheme-group-panels">
-              {registeredGroups.value.map((group) => renderGroup(group))}
-            </div>
+        {/* Always rendered now: the on-brand content group lives here even
+            when no extension token group is registered. */}
+        <div class="s-scheme-groups">
+          <div class="s-scheme-groups-title">
+            {t("hikari::theme.extendedColors", "Extended colors")}
           </div>
-        )}
+          <div class="s-scheme-group-panels">
+            {renderOnSolidGroup()}
+            {registeredGroups.value.map((group) => renderGroup(group))}
+          </div>
+        </div>
       </div>
     );
   },

package/src/components/HkImageLightbox.contract.test.ts

@@ -0,0 +1,44 @@
+/**
+ * Source contract for the immersive lightbox layout (2026-09-11 field
+ * report wave). Pinned as scss-text assertions because the failure class
+ * is invisible to DOM tests: happy-dom has no layout engine, so a
+ * collapsed flex chain (the "white lightbox" — viewer 0px tall inside a
+ * full-size modal frame) and a cascade-losing hover state (the floating
+ * close button melting into the page) both pass every render test.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const read = (f: string): string => readFileSync(join(here, f), "utf-8");
+
+describe("HkImageLightbox layout contract", () => {
+  it("makes the modal scroll region a flex container so the body chain can fill the frame", () => {
+    const css = read("HkImageLightbox.scss");
+    // The lightbox override block must carry the display itself: the inner
+    // only carries flex: 1, which is inert inside a block parent — without
+    // this the stage collapses to its padding and the viewer renders 0px
+    // tall (white canvas, dead gestures).
+    const block = css.slice(
+      css.indexOf(".hk-modal-content.hk-image-lightbox"),
+      css.indexOf(".hk-image-lightbox-stage"),
+    );
+    expect(block).toContain(".hk-modal-body-scroll");
+    expect(block).toMatch(/\.hk-modal-body-scroll\s*\{[^}]*display:\s*flex/);
+  });
+
+  it("re-asserts the dark chip on hover/focus above the window-close cascade", () => {
+    const css = read("HkImageLightbox.scss");
+    // window-close.scss's :hover paints the light theme tint and loses to
+    // nothing here — the lightbox hover must re-assert the real background
+    // (not just the custom properties) at higher specificity, and push the
+    // color into the glyph span (which keeps its own white declaration).
+    expect(css).toContain("&.hk-window-close:hover");
+    expect(css).toContain("&.hk-window-close:focus-visible");
+    const hoverBlock = css.slice(css.indexOf("&.hk-window-close:hover"));
+    expect(hoverBlock.indexOf("background:")).toBeGreaterThan(-1);
+    expect(hoverBlock).toContain(".hk-icon-button-icon");
+  });
+});

package/src/components/HkImageLightbox.scss

@@ -8,6 +8,13 @@
 // The frame is a fixed-size stage; the body chain (body → scroll →
 // inner) is flattened to pure flex so the HImageViewer fills it, and the
 // floating close button rides on top of the stage.
+//
+// The scroll link MUST become a flex container itself: the inner below it
+// only carries `flex: 1`, which does nothing inside a block parent —
+// without `display: flex` here the chain collapses to the stage's own
+// padding and the viewer renders 0px tall (the 2026-09-11 "white
+// lightbox" field report: full-size modal frame, invisible canvas, and
+// every wheel/pointer gesture dead because their surface had no area).
 // ------
 
 .hk-modal-content.hk-image-lightbox {
@@ -28,6 +35,8 @@
     flex: 1;
     min-height: 0;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .hk-modal-body-inner {
@@ -61,6 +70,17 @@
 // Floating close button — legible on any image: translucent dark chip
 // with a blur, light glyph. Colors ride HIconButton's variable layer
 // (--hi-icon-button-*) so the icon span picks them up too.
+//
+// The hover/focus state must RE-ASSERT the real `background`/`color`
+// properties, not just the custom properties: the shared window-close
+// grammar (imported after this sheet, equal specificity on :hover) wins
+// the cascade tie and paints the near-transparent light-theme tint over
+// the dark chip, while the glyph span keeps its own
+// `color: var(--hi-icon-button-icon-color)` (white) — white glyph on the
+// white modal, the button visibly vanished (2026-09-11 field report).
+// The selectors carry the extra `.hk-window-close` class the lightbox
+// button always wears, so the pair here outranks window-close's
+// `&:hover` regardless of bundle order.
 // ------
 
 .hk-image-lightbox-close.hk-icon-button {
@@ -77,11 +97,24 @@
   color: var(--hi-icon-button-icon-color);
   backdrop-filter: blur(6px);
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     --hi-icon-button-bg: rgb(0 0 0 / 65%);
     --hi-icon-button-icon-color: #fff;
   }
 
+  // (0,4,0) with the pseudo-class counted — beats
+  // `.hk-icon-button.hk-window-close:hover` at (0,3,0).
+  &.hk-window-close:hover,
+  &.hk-window-close:focus-visible {
+    background: var(--hi-icon-button-bg);
+    color: var(--hi-icon-button-icon-color);
+
+    .hk-icon-button-icon {
+      color: var(--hi-icon-button-icon-color);
+    }
+  }
+
   &:focus-visible {
     outline: 2px solid rgb(255 255 255 / 80%);
     outline-offset: 2px;

package/src/components/HkImageViewer.tsx

@@ -327,7 +327,13 @@ export default defineComponent({
           </div>
         )}
 
-        {loaded.value && isZoomed.value && (
+        {/* The controls are visible for the WHOLE session, not only once
+            zoomed past fit (2026-09-11 user report: at fit the viewer
+            offered no affordance at all — no buttons, no percent, no hint
+            that wheel/pinch/drag exist). At fit the viewport rect says
+            nothing worth drawing, so the minimap runs toolbar-only and
+            grows the overview map back the moment zooming starts. */}
+        {loaded.value && (
           <HMinimap
             imageSrc={props.src}
             imageBounds={contentBounds.value}
@@ -344,6 +350,7 @@ export default defineComponent({
             minZoomPercent={Math.max(1, Math.round(fit.value * 100))}
             maxZoomPercent={Math.round(MAX_ZOOM * 100)}
             showReset
+            toolbarOnly={!isZoomed.value}
             onZoomTo={(percent: number) => setZoom(percent / 100)}
             onReset={resetView}
             onPanDelta={onPanDelta}

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/HkMinimap.scss

@@ -41,6 +41,16 @@
   pointer-events: auto;
 }
 
+// Toolbar-only form (no overview map): shrink-wrap the card around the
+// zoom bar and drop the map's separator — the bar IS the whole surface.
+.hk-minimap[data-toolbar-only] {
+  width: auto;
+
+  .hk-mm-zoom-bar {
+    border-top: none;
+  }
+}
+
 .hk-mm-zoom-btn {
   display: flex;
   align-items: center;