@celestia-island/hikari 0.55.260 → 0.55.261

package/package.json

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

package/src/components/HkDonutChart.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it } from "vitest";
-import { createApp, h } from "vue";
+import { createApp, h, nextTick, ref } from "vue";
 
 import HkDonutChart from "./HkDonutChart";
 import type { HkDonutEntry } from "./donutGeometry";
@@ -80,6 +80,24 @@ describe("HkDonutChart", () => {
     expect(empty.querySelector(".hk-donut--empty")).toBeTruthy();
   });
 
+  it("clears a dead hover key when the entries swap under a held pointer", async () => {
+    // The wowsp lesson: the hovered element can unmount without firing
+    // mouseleave; without the reset every surviving slice would stay
+    // stuck at is-dim under the dead key.
+    const entriesRef = ref(ENTRIES);
+    const el = mount(h(() => <HkDonutChart entries={entriesRef.value} />));
+    const slices = [...el.querySelectorAll(".hk-donut__slice")];
+    slices[0]!.dispatchEvent(new MouseEvent("mouseenter"));
+    await nextTick();
+    expect(slices[1]!.className).toContain("is-dim");
+    entriesRef.value = ENTRIES.slice(0, 1);
+    await nextTick();
+    const after = [...el.querySelectorAll(".hk-donut__slice")];
+    expect(after).toHaveLength(1);
+    expect(after[0]!.className).not.toContain("is-dim");
+    expect(after[0]!.className).not.toContain("is-hot");
+  });
+
   it("renders the legendIcon slot's glyph in place of the text label", () => {
     const el = mount(
       <HkDonutChart

package/src/components/HkDonutChart.tsx

@@ -1,4 +1,4 @@
-import { computed, defineComponent, ref, type PropType } from "vue";
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
 
 import {
   chunkLegendItems,
@@ -67,6 +67,20 @@ export default defineComponent({
   },
   setup(props, { emit, slots }) {
     const hovered = ref<string | null>(null);
+    // A hover key lives on a DOM element; when the entries swap under a
+    // held pointer, the hovered element can unmount WITHOUT firing
+    // mouseleave (browsers skip removed nodes) — a dead key would dim
+    // the whole block until the pointer deliberately re-entered it.
+    // Resetting on every entries repaint costs nothing (a resting
+    // pointer only ever clears nulls) and can never stick. Lesson
+    // upstreamed from wowsp's ShipDistCharts, whose own test pins it.
+    watch(
+      () => props.entries,
+      () => {
+        hovered.value = null;
+      },
+      { deep: true },
+    );
 
     const slices = computed<HkDonutSlice[]>(() =>
       donutSlices(