@celestia-island/hikari 0.55.91 → 0.55.93

package/package.json

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

package/src/components/HkAttachmentModal.tsx

@@ -286,7 +286,7 @@ export const HkAttachmentModal = defineComponent({
                 <p class="s-attachment-modal-text-empty">
                   {srcError.value
                     ? srcError.value
-                    : t("hikari::attachment.noPreview", "No preview available.")}
+                    : t("hikari::attachment.noPreview", "No preview available")}
                 </p>
               )}
               {textError.value && (

package/src/components/HkCaptchaModal.tsx

@@ -41,7 +41,7 @@ export const HkCaptchaModal = defineComponent({
         width={props.width}
       >
         <div class="s-captcha-modal">
-          <p class="s-captcha-modal-prompt">{t("hikari::captcha.prompt", "Complete the verification below to continue.")}</p>
+          <p class="s-captcha-modal-prompt">{t("hikari::captcha.prompt", "Complete the verification below to continue")}</p>
           {props.modelValue && (
             <HkCaptchaWidget
               siteKey={props.siteKey}

package/src/components/HkCaptchaWidget.tsx

@@ -166,7 +166,7 @@ export const HkCaptchaWidget = defineComponent({
         return (
           <div class="s-captcha-widget s-captcha-widget-placeholder">
             <ShieldAlert size={16} />
-            <span>{t("hikari::captcha.placeholder", "Verification is not configured for this deployment (no site key provided).")}</span>
+            <span>{t("hikari::captcha.placeholder", "Verification is not configured for this deployment (no site key provided)")}</span>
           </div>
         );
       }

package/src/components/HkCookieConsent.test.tsx

@@ -51,7 +51,7 @@ describe("HkCookieConsent", () => {
     await nextTick();
     const notice = container.querySelector<HTMLElement>(".s-cookie-consent");
     expect(notice, "notice span renders").toBeTruthy();
-    expect(notice!.textContent).toContain("This site uses cookies.");
+    expect(notice!.textContent).toContain("This site uses cookies");
     const ok = container.querySelector<HTMLButtonElement>(".s-cookie-consent-ok");
     expect(ok, "OK button renders").toBeTruthy();
     expect(ok!.textContent).toBe("OK");

package/src/components/HkCookieConsent.tsx

@@ -45,7 +45,7 @@ export const HkCookieConsent = defineComponent({
       if (accepted.value) return <Cookie size={12} class="s-cookie-consent-icon" />;
       return (
         <span class="s-cookie-consent">
-          {t("hikari::cookie.text", "This site uses cookies.")}
+          {t("hikari::cookie.text", "This site uses cookies")}
           <button type="button" class="s-cookie-consent-ok" onClick={accept}>
             {t("hikari::cookie.ok", "OK")}
           </button>

package/src/components/HkErrorBoundary.test.tsx

@@ -91,6 +91,17 @@ describe("HkErrorBoundary", () => {
     expect(el.querySelector(".hk-error-landing")).not.toBeNull();
   });
 
+  it("feeds the landing's built-in copy action with the captured error", async () => {
+    vi.spyOn(console, "error").mockImplementation(() => {});
+    const el = mountWith(Boom, { copyErrorLabel: "Copy Error" });
+    await nextTick();
+
+    const buttons = Array.from(el.querySelectorAll<HTMLButtonElement>(".hk-error-landing__actions button"));
+    // Built-in copy seats first, the boundary's own retry follows.
+    expect(buttons[0]!.textContent).toBe("Copy Error");
+    expect(buttons.some((b) => b.textContent === "Retry")).toBe(true);
+  });
+
   it("keeps the custom fallback render prop contract", async () => {
     vi.spyOn(console, "error").mockImplementation(() => {});
     const el = mountWith(Boom, {

package/src/components/HkErrorBoundary.tsx

@@ -1,7 +1,6 @@
-import { Copy, RefreshCw } from "lucide-vue-next";
+import { RefreshCw } from "lucide-vue-next";
 import { computed, defineComponent, onErrorCaptured, ref, type PropType, type VNode } from "vue";
 
-import { useClipboard } from "../runtime/useClipboard";
 import { useI18n } from "../i18n/context";
 import HButton from "./HkButton";
 import { HkErrorLanding } from "./HkErrorLanding";
@@ -31,8 +30,9 @@ function formatError(err: CapturedError): string {
  * The built-in fallback is the same HkErrorLanding card the family's
  * full-page takeovers use (inline variant): tone icon, headline, the error
  * name as the tone-matched HkBadge chip, the message as the description,
- * the raw name/message/stack in the fixed-height JSON tree pane, plus
- * retry / copy actions.
+ * the raw name/message/stack in the fixed-height JSON tree pane, plus the
+ * retry action and the landing's built-in copy action (fed with the
+ * formatted error text).
  */
 export default defineComponent({
   name: "HkErrorBoundary",
@@ -44,7 +44,6 @@ export default defineComponent({
     retryLabel: { type: String, default: "" },
   },
   setup(props, { slots }) {
-    const clipboard = useClipboard();
     const { t } = useI18n();
     const error = ref<CapturedError | null>(null);
 
@@ -87,6 +86,11 @@ export default defineComponent({
           title={props.errorTitle || t("hikari::errors.defaultTitle", "Something went wrong")}
           description={err.message}
           code={err.name}
+          // The copy action is the landing's built-in now (seated left of
+          // the host actions, one design family-wide); this boundary only
+          // feeds it the formatted error and its legacy label override.
+          copyText={formatError(err)}
+          copyLabel={props.copyErrorLabel}
         >
           {{
             default: () => <HkJsonTree value={detailsValue.value} ariaLabel="stack trace" />,
@@ -95,10 +99,6 @@ export default defineComponent({
                 <RefreshCw size={12} />
                 {props.retryLabel || t("hikari::errorBoundary.retry", "Retry")}
               </HButton>,
-              <HButton variant="ghost" size="sm" onClick={() => clipboard.copy(formatError(err))}>
-                <Copy size={12} />
-                {props.copyErrorLabel || t("hikari::errorBoundary.copyError", "Copy Error")}
-              </HButton>,
             ],
           }}
         </HkErrorLanding>

package/src/components/HkErrorLanding.inline.contract.test.ts

@@ -51,3 +51,15 @@ describe("HkErrorLanding inline contract", () => {
     expect(card).not.toContain("2.25rem");
   });
 });
+
+describe("HkErrorLanding multiline headline contract", () => {
+  const css = readFileSync(join(here, "HkErrorLanding.scss"), "utf-8");
+  const title = ruleBody(css, ".hk-error-landing__title");
+
+  it("renders authored line breaks in the headline as breaks", () => {
+    // Catalogs ship per-line copy (a dash clause moved onto its own
+    // line); without pre-line the h1 collapses those breaks to spaces.
+    expect(title).toContain("white-space: pre-line");
+    expect(title).toContain("overflow-wrap: anywhere");
+  });
+});

package/src/components/HkErrorLanding.scss

@@ -173,6 +173,11 @@
   letter-spacing: -0.01em;
   line-height: 1.35;
   color: rgb(var(--hel-text));
+  // Headlines may carry their own line breaks (hosts ship per-line copy,
+  // e.g. a two-clause landing where the dash clause moved to its own
+  // line) — render them as breaks, not spaces.
+  white-space: pre-line;
+  overflow-wrap: anywhere;
 }
 
 .hk-error-landing__desc {

package/src/components/HkErrorLanding.test.tsx

@@ -1,5 +1,5 @@
-import { afterEach, describe, expect, it } from "vitest";
-import { createApp, h } from "vue";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createApp, h, nextTick } from "vue";
 
 import { HkErrorLanding } from "./HkErrorLanding";
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
@@ -11,6 +11,8 @@ interface MountOptions {
   status?: number;
   tone?: "error" | "warning" | "info";
   variant?: "page" | "inline";
+  copyText?: string;
+  copyLabel?: string;
   details?: () => ReturnType<typeof h>;
   actions?: () => ReturnType<typeof h>;
   brand?: () => ReturnType<typeof h>;
@@ -28,6 +30,8 @@ function mountLanding(opts: MountOptions = {}) {
         status: opts.status,
         tone: opts.tone ?? "error",
         variant: opts.variant ?? "page",
+        copyText: opts.copyText ?? "",
+        copyLabel: opts.copyLabel ?? "",
       }, {
         ...(opts.details ? { default: opts.details } : {}),
         ...(opts.actions ? { actions: opts.actions } : {}),
@@ -39,12 +43,29 @@ function mountLanding(opts: MountOptions = {}) {
   return container;
 }
 
+/** Stub the async clipboard (jsdom ships none) and restore afterwards. */
+function stubClipboard() {
+  const writeText = vi.fn().mockResolvedValue(undefined);
+  Object.defineProperty(navigator, "clipboard", {
+    value: { writeText },
+    configurable: true,
+    writable: true,
+  });
+  return writeText;
+}
+
+function actionButtons(el: HTMLElement): HTMLButtonElement[] {
+  return Array.from(el.querySelectorAll<HTMLButtonElement>(".hk-error-landing__actions button"));
+}
+
 afterEach(() => {
   for (const { app, container } of mounts) {
     app.unmount();
     container.remove();
   }
   mounts.length = 0;
+  Reflect.deleteProperty(navigator, "clipboard");
+  vi.restoreAllMocks();
 });
 
 describe("HkErrorLanding", () => {
@@ -142,4 +163,51 @@ describe("HkErrorLanding", () => {
     const root = el.querySelector(".hk-error-landing")!;
     expect(root.classList.contains("is-inline")).toBe(true);
   });
+
+  it("seats the built-in copy action FIRST, left of the host actions", () => {
+    const el = mountLanding({
+      copyText: "Boom: bad",
+      actions: () => h("button", { class: "fake-action" }, "Retry"),
+    });
+    const buttons = actionButtons(el);
+    expect(buttons).toHaveLength(2);
+    expect(buttons[0]!.textContent).toBe("Copy error details");
+    expect(buttons[1]!.classList.contains("fake-action")).toBe(true);
+  });
+
+  it("writes the copy payload and flips the label to Copied", async () => {
+    const writeText = stubClipboard();
+    const el = mountLanding({ copyText: "full error info" });
+    const copy = actionButtons(el)[0]!;
+    copy.click();
+    await vi.waitFor(() => expect(writeText).toHaveBeenCalledTimes(1));
+    expect(writeText).toHaveBeenCalledWith("full error info");
+    await nextTick();
+    await nextTick();
+    expect(actionButtons(el)[0]!.textContent).toBe("Copied");
+  });
+
+  it("renders the copy action alone when the host passes no actions", () => {
+    const el = mountLanding({ copyText: "raw" });
+    const buttons = actionButtons(el);
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]!.textContent).toBe("Copy error details");
+  });
+
+  it("renders no copy action and no actions row without copyText and slot", () => {
+    const el = mountLanding({ title: "Boom" });
+    expect(el.querySelector(".hk-error-landing__actions")).toBeNull();
+  });
+
+  it("keeps the actions row host-only when copyText is empty", () => {
+    const el = mountLanding({ actions: () => h("button", { class: "fake-action" }, "Retry") });
+    const buttons = actionButtons(el);
+    expect(buttons).toHaveLength(1);
+    expect(buttons[0]!.classList.contains("fake-action")).toBe(true);
+  });
+
+  it("honours a custom copy label override", () => {
+    const el = mountLanding({ copyText: "raw", copyLabel: "Copy Error" });
+    expect(actionButtons(el)[0]!.textContent).toBe("Copy Error");
+  });
 });

package/src/components/HkErrorLanding.tsx

@@ -1,4 +1,4 @@
-import { Braces, Info, TriangleAlert } from "lucide-vue-next";
+import { Braces, Check, Copy, Info, TriangleAlert } from "lucide-vue-next";
 import {
   computed,
   defineComponent,
@@ -7,11 +7,14 @@ import {
   onUpdated,
   ref,
   type PropType,
+  type VNode,
 } from "vue";
 
 import { attachOverlayScrollbars, type OverlayScrollbarHandle } from "../composables/useOverlayScrollbar";
 import { useI18n } from "../i18n/context";
+import { useClipboard } from "../runtime/useClipboard";
 import HkBadge from "./HkBadge";
+import HkButton from "./HkButton";
 
 import "./HkErrorLanding.scss";
 
@@ -27,6 +30,13 @@ export type HErrorTone = "error" | "warning" | "info";
  */
 export type HErrorLandingVariant = "page" | "inline";
 
+/** Slot renderers may return a single vnode or an array — normalize to an
+ *  array so the built-in copy action and the host's actions share one row. */
+function normalizeSlotNodes(nodes: VNode | VNode[] | undefined): VNode[] {
+  if (!nodes) return [];
+  return Array.isArray(nodes) ? nodes : [nodes];
+}
+
 /**
  * HkErrorLanding — the shared full-page error landing.
  *
@@ -46,6 +56,15 @@ export type HErrorLandingVariant = "page" | "inline";
  * server-rendered error page alike. All host-facing copy (`title`,
  * `description`, action buttons) arrives pre-translated; the component only
  * translates its own labels via `hikari::errors.*`.
+ *
+ * The standard copy action: hosts pass `copyText` (the full error info they
+ * want on the clipboard — headline, technical context, raw payload, …) and
+ * the landing seats its built-in "copy error details" button as the FIRST
+ * action, left of whatever the actions slot renders — one design for the
+ * whole error-landing family instead of every consumer hand-rolling its
+ * own copy row (the boundary used to ship a private one; it now feeds this
+ * hook). `copyLabel` overrides the button wording when a host already
+ * ships its own.
  */
 export const HkErrorLanding = defineComponent({
   name: "HkErrorLanding",
@@ -58,15 +77,29 @@ export const HkErrorLanding = defineComponent({
     code: { type: String, default: "" },
     /** HTTP status chip, e.g. 400. */
     status: { type: Number, default: undefined },
+    /** Full error info the built-in copy action puts on the clipboard
+     *  (headline + technical context + raw payload, host-composed).
+     *  Empty disables the action. */
+    copyText: { type: String, default: "" },
+    /** Optional wording override for the built-in copy button; empty
+     *  falls back to `hikari::errors.copyDetails`. */
+    copyLabel: { type: String, default: "" },
     tone: { type: String as PropType<HErrorTone>, default: "error" },
     /** Layout variant: `page` (viewport backdrop) or `inline` (in-flow card). */
     variant: { type: String as PropType<HErrorLandingVariant>, default: "page" },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
+    const clipboard = useClipboard();
 
     const titleText = computed(() => props.title || t("hikari::errors.defaultTitle", "Something went wrong"));
     const hasDetails = computed(() => slots.default != null);
+    // The actions row carries the built-in copy action whenever the host
+    // feeds it a payload — with or without slot actions beside it.
+    // Frozen like hasDetails: the slots object identity is not reactive,
+    // so a slot appearing mid-lifetime wouldn't flip this row — every
+    // family host mounts the landing with its slot set already settled.
+    const hasActions = computed(() => slots.actions != null || props.copyText !== "");
 
     // Badge variant follows the landing tone so the chip, the icon and the
     // card wash always speak the same severity language.
@@ -175,7 +208,31 @@ export const HkErrorLanding = defineComponent({
             </div>
           )}
 
-          {slots.actions && <div class="hk-error-landing__actions">{slots.actions()}</div>}
+          {hasActions.value && (
+            <div class="hk-error-landing__actions" aria-live="polite">
+              {[
+                // The standard copy action seats FIRST — left of every
+                // host-provided action — so the whole family reads
+                // [copy] [retry] [dismiss…] no matter who hosts the card.
+                ...(props.copyText
+                  ? [(
+                    <HkButton
+                      key="hk-error-copy"
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => { void clipboard.copy(props.copyText); }}
+                    >
+                      {clipboard.copied.value ? <Check size={12} /> : <Copy size={12} />}
+                      {clipboard.copied.value
+                        ? t("hikari::errors.copied", "Copied")
+                        : props.copyLabel || t("hikari::errors.copyDetails", "Copy error details")}
+                    </HkButton>
+                  )]
+                  : []),
+                ...(normalizeSlotNodes(slots.actions?.())),
+              ]}
+            </div>
+          )}
         </div>
       </div>
     );

package/src/components/HkIconButton.tsx

@@ -9,8 +9,8 @@ export default defineComponent({
   props: {
     icon: { type: String, default: "" },
     variant: { type: String as PropType<"ghost" | "primary" | "secondary" | "danger" | "success">, default: "ghost" },
-    // 28 is the header chrome step: HkThemeToggle's trigger buttons are
-    // 28px boxes with 16px glyphs, so a header action that must read as
+    // 28 is the header chrome step: HkThemeToggle's trigger is a 28px box
+    // with a 16px glyph, so a header action that must read as
     // "the same kind of button" (global search, the console pages'
     // refresh) composes at 28 — 24 read visibly smaller beside the toggle
     // (user report 2026-09-28: 前台全局搜索与主题切换按钮不同尺寸).

package/src/components/HkIconButtonVars.scss

@@ -76,9 +76,9 @@
   --hi-icon-button-size: 28px;
   /* The header-chrome step carries the sm glyph (16px): its consumers are
    * the header clusters — global search, the pages' refresh, the filter
-   * trigger — whose visual sibling is HkThemeToggle's own trigger buttons
-   * (28px boxes with direct 16px lucide glyphs). The xs mapping (12px)
-   * rendered those glyphs visibly smaller than the sun beside them
+   * trigger — whose visual sibling is HkThemeToggle's own trigger (one
+   * 28px box with a direct 16px lucide glyph). The xs mapping (12px)
+   * rendered those glyphs visibly smaller than the glyphs beside them
    * (user report 2026-09-29: 不像一个尺寸的图标按钮) — the `.svg` rule
    * in HkIconButton.scss forces ANY slotted glyph to this var, so the
    * slot's size-16 attribute never reached the screen. */

package/src/components/HkLogWindow.tsx

@@ -179,7 +179,7 @@ export const HkLogWindow = defineComponent({
             ref={scrollRef}
           >
             {currentLines.value.length === 0 ? (
-              <div class="s-log-empty">{t("hikari::log.empty", "No log lines yet.")}</div>
+              <div class="s-log-empty">{t("hikari::log.empty", "No log lines yet")}</div>
             ) : (
               currentLines.value.map((line, i) => (
                 <div key={i} class={["s-log-entry", `s-log-entry-${levelOf(line)}`]}>

package/src/components/HkThemeToggle.ghost-chrome.test.ts

@@ -1,13 +1,15 @@
 /**
  * Source contract for the theme-toggle trigger chrome (2026-09-08 user
  * report: the bordered surface box read as a mystery outline in the
- * header and fought the host themes — the faint border, the host
- * override layer and the `--hk-theme-toggle-btn-border` var never
- * agreed). The trigger is now the STANDARD ghost icon-button chrome
- * (same as `.hk-btn-ghost` / the HkIconButton ghost variant beside it):
- * transparent at rest, primary wash on hover, no border, no surface,
- * no shadow. Pinned here so the bordered-box chrome cannot silently
- * return.
+ * header and fought the host themes). That round standardized the trigger
+ * onto ghost chrome via a bespoke scss block; 2026-09-30 (user direction)
+ * went one step further: the trigger IS an HkIconButton (ghost/28 — the
+ * header chrome step, user report 2026-09-28) now — the retired
+ * main/arrow button pair, whose primary hover wash disagreed with the
+ * ghost gray of the buttons beside it, is merged into ONE palette-glyph
+ * trigger, and every byte of trigger chrome comes from the shared
+ * HkIconButtonVars contract. Pinned here so neither the bespoke block
+ * nor the two-button pair can silently return.
  */
 import { beforeAll, describe, expect, it } from "vitest";
 import { readFileSync } from "node:fs";
@@ -15,27 +17,39 @@ import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
 
 const here = dirname(fileURLToPath(import.meta.url));
-const src = readFileSync(join(here, "HkThemeToggle.scss"), "utf-8");
+const scss = readFileSync(join(here, "HkThemeToggle.scss"), "utf-8");
+const tsx = readFileSync(join(here, "HkThemeToggle.tsx"), "utf-8");
 
-describe("HkThemeToggle ghost trigger chrome contract", () => {
+describe("HkThemeToggle trigger chrome contract", () => {
   let block = "";
   beforeAll(() => {
-    block = src.match(/\.s-theme-toggle-btn\s*{[^}]*}/)?.[0] ?? "";
+    // Line-anchored: prose comments may NAME the hook class — only a real
+    // top-level rule block for it counts as chrome coming back.
+    block = scss.match(/^\.s-theme-toggle-btn[^{]*\{[^}]*\}/m)?.[0] ?? "";
   });
 
-  it("paints no border on the trigger (border: none)", () => {
-    expect(block).toContain("border: none;");
+  it("carries no bespoke chrome block for the trigger", () => {
+    // The class survives ONLY as a stable hook on the HkIconButton —
+    // any rule painting it would fork the chrome away from the shared
+    // ghost contract again.
+    expect(block).toBe("");
   });
 
-  it("keeps the rest state transparent (no surface box)", () => {
-    expect(block).toContain("background: transparent;");
+  it("removes the per-theme border var entirely", () => {
+    expect(scss).not.toContain("--hk-theme-toggle-btn-border");
   });
 
-  it("removes the per-theme border var entirely", () => {
-    expect(src).not.toContain("--hk-theme-toggle-btn-border");
+  it("renders the trigger through the standard HkIconButton", () => {
+    expect(tsx).toContain("HkIconButton");
+    expect(tsx).toMatch(/variant="ghost"/);
   });
 
-  it("retains a visible focus ring via :focus-visible", () => {
-    expect(src).toMatch(/\.s-theme-toggle-btn:focus-visible\s*{[^}]*}/);
+  it("merges the retired main/arrow pair into one trigger", () => {
+    // One s-theme-toggle-btn element, and the retired data hooks are gone.
+    const triggers = tsx.match(/class="s-theme-toggle-btn"/g) ?? [];
+    expect(triggers).toHaveLength(1);
+    expect(tsx).not.toContain('data-variant="arrow"');
+    expect(tsx).not.toContain('data-variant="main"');
+    expect(tsx).not.toContain("toggleMode");
   });
 });

package/src/components/HkThemeToggle.scss

@@ -3,35 +3,17 @@
 .s-theme-toggle {
   display: inline-flex;
   align-items: center;
-  gap: var(--space-2, 2px);
 }
 
-.s-theme-toggle-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.75rem;
-  min-width: 1.75rem;
-  padding: 0 var(--space-6, 0.375rem);
-  /* Standard ghost icon-button chrome (2026-09-08 user report: the
-   * bordered surface box read as a mystery outline in the header and
-   * fought the host themes — the faint border, the host override layer
-   * and the border-var never agreed). The trigger now matches the
-   * standard ghost buttons beside it (same chrome as .hk-btn-ghost and
-   * the HkIconButton ghost variant): transparent at rest, primary wash
-   * on hover, no border, no surface, no shadow, no per-theme border var. */
-  border: none;
-  border-radius: var(--radius-sm, 6px);
-  background: transparent;
-  color: rgb(var(--color-text, var(--color-text-secondary, var(--color-muted))));
-  cursor: pointer;
-  transition: background 0.15s ease, color 0.15s ease;
-}
-
-.s-theme-toggle-btn:focus-visible {
-  outline: 2px solid rgb(var(--color-primary));
-  outline-offset: 1px;
-}
+/* The trigger carries NO css of its own (2026-09-30 user direction): the
+ * retired bespoke trigger block — whose primary hover wash disagreed with
+ * the ghost gray of the HkIconButtons beside it and made the header
+ * cluster read as two different button families — is gone. The trigger IS
+ * an HkIconButton (ghost/28, the header chrome step) now, so its
+ * rest/hover/press chrome, radius and focus ring come verbatim from the
+ * shared HkIconButtonVars contract; the s-theme-toggle-btn class survives
+ * only as a stable hook on that button (chest's chrome guard asserts
+ * chest never re-paints it). Do not reintroduce a chrome rule for it. */
 
 /* Host strip under the mode group (mode-extra slot). */
 .s-theme-mode-extra {
@@ -39,15 +21,6 @@
   width: 100%;
 }
 
-.s-theme-toggle-btn:hover {
-  background: rgb(var(--color-primary) / 12%);
-  color: rgb(var(--color-text));
-}
-
-.s-theme-toggle-btn:active {
-  background: rgb(var(--color-primary) / 16%);
-}
-
 .s-theme-menu {
   display: flex;
   flex-direction: column;

package/src/components/HkThemeToggle.test.ts

@@ -60,10 +60,18 @@ async function settle(): Promise<void> {
 }
 
 function openMenu(container: HTMLElement): void {
-  const arrow = container.querySelector(
-    '.s-theme-toggle-btn[data-variant="arrow"]',
+  // The single merged trigger (user direction 2026-09-30): ONE ghost
+  // HkIconButton opens the menu — the retired main/arrow pair is gone.
+  const trigger = container.querySelector(
+    ".s-theme-toggle-btn",
   ) as HTMLButtonElement | null;
-  arrow!.click();
+  trigger!.click();
+}
+
+function triggerButton(container: HTMLElement): HTMLButtonElement {
+  const trigger = container.querySelector<HTMLButtonElement>(".s-theme-toggle-btn");
+  expect(trigger).toBeTruthy();
+  return trigger!;
 }
 
 function paletteButton(): HTMLButtonElement {
@@ -96,6 +104,54 @@ afterEach(() => {
   vi.unstubAllGlobals();
 });
 
+describe("HkThemeToggle trigger", () => {
+  it("renders ONE standard ghost icon-button trigger and no retired pair", async () => {
+    const { container } = mountToggle(true);
+    await settle();
+
+    // Exactly one trigger, and it IS the shared standard part: the merged
+    // single button (user direction 2026-09-30) must be chrome-identical
+    // to the functional HkIconButtons hosts place beside it — the ghost
+    // variant's shared rest/hover/press paint, not a bespoke block. The
+    // 28 step is the header chrome step (user report 2026-09-28: the
+    // cluster reads as one row only at ghost/28, sm 16px glyph).
+    const triggers = container.querySelectorAll(".s-theme-toggle-btn");
+    expect(triggers).toHaveLength(1);
+    const trigger = triggers[0] as HTMLElement;
+    expect(trigger.classList.contains("hk-icon-button")).toBe(true);
+    expect(trigger.classList.contains("hk-icon-button-28")).toBe(true);
+    expect(trigger.classList.contains("hk-icon-button-ghost")).toBe(true);
+    // The retired main/arrow data hooks must never come back.
+    expect(trigger.hasAttribute("data-variant")).toBe(false);
+    // A palette glyph, not the retired mode glyphs (the mode state lives
+    // in the menu's segmented group now).
+    expect(trigger.querySelector("svg")).toBeTruthy();
+  });
+
+  it("opens the theme menu from the single trigger with menu aria wiring", async () => {
+    const { container } = mountToggle(true);
+    await settle();
+
+    const trigger = triggerButton(container);
+    expect(trigger.getAttribute("aria-haspopup")).toBe("menu");
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    // A click opens the menu; no mode switch fires (the retired direct
+    // mode-cycle press is gone — mode switching lives in the strip).
+    const modeBefore = useTheme().currentMode.value;
+    trigger.click();
+    await settle();
+    expect(document.body.querySelector(".s-theme-menu")).toBeTruthy();
+    expect(useTheme().currentMode.value).toBe(modeBefore);
+    expect(trigger.getAttribute("aria-expanded")).toBe("true");
+
+    // Second press closes it again (plain toggle, same as before).
+    trigger.click();
+    await settle();
+    expect(document.body.querySelector(".s-theme-menu")).toBeNull();
+    expect(trigger.getAttribute("aria-expanded")).toBe("false");
+  });
+});
+
 describe("HkThemeToggle external customization", () => {
   it("emits open-customize and keeps the dialog closed when externalCustomize is true", async () => {
     const { container, openCustomize } = mountToggle(true);