@celestia-island/hikari 0.55.91 → 0.55.92

package/package.json

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

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/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);

package/src/components/HkThemeToggle.tsx

@@ -1,5 +1,5 @@
 import { computed, defineComponent, onUnmounted, ref, watch, type PropType } from "vue";
-import { Check, ChevronDown, Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
+import { Check, Monitor, MoonStar, Palette, Sun, Trash as Trash2 } from "lucide-vue-next";
 import {
   HDivider,
   HPopover,
@@ -14,6 +14,7 @@ import {
 } from "@celestia-island/hikari";
 
 import { HColorSchemeDialog, type HCustomTheme } from "./HkColorSchemeDialog";
+import HkIconButton from "./HkIconButton";
 import HTabs, { type TabItem } from "./HkTabs";
 import "./HkThemeToggle.scss";
 
@@ -40,10 +41,14 @@ export interface ThemeItemScope {
  * HkThemeToggle — light/dark/auto theme control over hikari's theme engine.
  *
  * Composes hikari's `useTheme()` (theme presets + custom themes + mode
- * persistence); it does NOT reimplement the theme engine. A main button
- * cycles light/dark (auto keeps a Monitor glyph); the popover offers the
- * color-mode group and preset/custom theme selection (custom themes are
- * removable), and opens HColorSchemeDialog to create a new custom scheme.
+ * persistence); it does NOT reimplement the theme engine. ONE trigger —
+ * a standard HkIconButton ghost/28 with a palette glyph, chrome-identical
+ * to the functional buttons hosts place beside it — opens the popover,
+ * which offers the color-mode group and preset/custom theme selection
+ * (custom themes are removable) and opens HColorSchemeDialog to create a
+ * new custom scheme. The retired main/arrow button pair cycled light/dark
+ * straight from the header; that press lives on only as the menu's
+ * altitude-strip resolution (auto) and the segmented group (manual).
  *
  * Theme rows are host-customizable through three scoped slots (all render
  * in the popover AND the mobile bottom sheet — same DOM):
@@ -102,7 +107,7 @@ export const HkThemeToggle = defineComponent({
   },
   setup(props, { emit, slots, expose }) {
     const { t } = useI18n();
-    const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, toggleMode, allThemeList, addCustomTheme, removeCustomTheme, customThemes } = useTheme();
+    const { currentTheme, currentMode, effectiveMode, geo, setTheme, setMode, allThemeList, addCustomTheme, removeCustomTheme, customThemes } = useTheme();
 
     /** Resolve a row's full definition for the item slots: the user's
      *  stored custom schemes first, then the live preset table — the SAME
@@ -171,15 +176,6 @@ export const HkThemeToggle = defineComponent({
 
     const isAutoMode = computed(() => currentMode.value === "system");
 
-    const modeLabel = computed(() => {
-      const map: Record<string, string> = {
-        system: t("hikari::theme.modeAuto"),
-        light: t("hikari::theme.modeLight"),
-        dark: t("hikari::theme.modeDark"),
-      };
-      return map[currentMode.value] ?? currentMode.value;
-    });
-
     /**
      * Fresh option objects (and fresh icon vnodes) on every call — never
      * cache icon vnodes across renders, or closing/reopening the popover
@@ -229,31 +225,32 @@ export const HkThemeToggle = defineComponent({
 
     return () => (
       <div class="s-theme-toggle" ref={triggerRef}>
-        <button
-          type="button"
-          class="s-theme-toggle-btn"
-          data-variant="main"
-          onClick={toggleMode}
-          title={modeLabel.value}
-          aria-label={t("hikari::theme.mode")}
-        >
-          {currentMode.value === "system" ? (
-            <Monitor size={16} />
-          ) : effectiveMode.value === "dark" ? (
-            <MoonStar size={16} />
-          ) : (
-            <Sun size={16} />
-          )}
-        </button>
-        <button
-          type="button"
+        {/* ONE trigger (user direction 2026-09-30): the old main/arrow pair
+         * read as two separate header buttons whose hover washes disagreed
+         * (bespoke primary wash here vs the ghost gray beside them). The
+         * trigger is now a STANDARD HkIconButton ghost/28 with a palette
+         * glyph — identical chrome to the functional buttons it sits
+         * beside (transparent rest, ghost wash on hover/press, shared
+         * focus ring) at the SAME header chrome step (user report
+         * 2026-09-28: the cluster reads as one row only at ghost/28 with
+         * the sm 16px glyph, which the 28 step maps). And it only opens
+         * the menu; mode switching lives in the menu's color-mode strip
+         * (auto altitude strip resolves auto to a manual side), which
+         * loses nothing the old direct mode-cycle press offered. The
+         * `s-theme-toggle-btn` class stays as a stable consumer/test
+         * hook; it carries NO css of its own. */}
+        <HkIconButton
           class="s-theme-toggle-btn"
-          data-variant="arrow"
-          onClick={() => { menuOpen.value = !menuOpen.value; }}
+          size={28}
+          variant="ghost"
+          aria-haspopup="menu"
+          aria-expanded={menuOpen.value ? "true" : "false"}
           aria-label={t("hikari::theme.themes")}
+          {...{ title: t("hikari::theme.themes") }}
+          onClick={() => { menuOpen.value = !menuOpen.value; }}
         >
-          <ChevronDown size={12} />
-        </button>
+          {{ icon: () => <Palette size={16} /> }}
+        </HkIconButton>
 
         <HPopover
           modelValue={menuOpen.value}