@celestia-island/hikari 0.55.257 → 0.55.258

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.257",
+  "version": "0.55.258",
   "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

@@ -80,6 +80,25 @@ describe("HkDonutChart", () => {
     expect(empty.querySelector(".hk-donut--empty")).toBeTruthy();
   });
 
+  it("renders the legendIcon slot's glyph in place of the text label", () => {
+    const el = mount(
+      <HkDonutChart
+        entries={ENTRIES}
+        v-slots={{
+          legendIcon: (slice: { key: string }) => <b data-flag={slice.key}>flag</b>,
+        }}
+      />,
+    );
+    const rows = [...el.querySelectorAll(".hk-donut__legend-row")];
+    expect(rows.map((r) => r.querySelector("[data-flag]")?.getAttribute("data-flag"))).toEqual([
+      "dd",
+      "ca",
+      "bb",
+    ]);
+    // the plain-text labels are gone; the color dots stay
+    expect(rows.every((r) => r.querySelector(".hk-donut__legend-dot"))).toBe(true);
+  });
+
   it("carries the chart-level aria label", () => {
     const el = mount(<HkDonutChart entries={ENTRIES} ariaLabel="ship mix" />);
     expect(el.querySelector(".hk-donut")?.getAttribute("aria-label")).toBe("ship mix");

package/src/components/HkDonutChart.tsx

@@ -29,7 +29,9 @@ function defaultFill(i: number): string {
  * o'clock start, clockwise), legend rows that stack in fixed-height
  * columns with percents shown inline, and paired hover focus —
  * hovering a slice or its legend row lifts the pair and dims the
- * block's siblings without rescaling any shape.
+ * block's siblings without rescaling any shape. A scoped `legendIcon`
+ * slot (slice => node) swaps a legend row's text label for a glyph —
+ * nation flags, tier marks — keeping the color dot and the row hint.
  *
  * Entries may carry an explicit `color`; absent entries ride the
  * default primary ladder above. Hints ride the consumer's tooltip
@@ -63,7 +65,7 @@ export default defineComponent({
   emits: {
     select: (key: string) => typeof key === "string",
   },
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const hovered = ref<string | null>(null);
 
     const slices = computed<HkDonutSlice[]>(() =>
@@ -129,7 +131,14 @@ export default defineComponent({
                       onClick={() => emit("select", s.key)}
                     >
                       <span class="hk-donut__legend-dot" style={{ background: s.fill }} />
-                      <span class="hk-donut__legend-label">{s.label}</span>
+                      <span class="hk-donut__legend-label">
+                        {/* legendIcon slot: an optional per-slice glyph
+                         * (flags, tier marks) rendered IN PLACE of the
+                         * text label — the color dot stays, and the row's
+                         * data-hint carries the full slice hint either
+                         * way (wowsp's NationFlag contract). */}
+                        {slots.legendIcon?.(s) ?? s.label}
+                      </span>
                       <span class="hk-donut__legend-pct">{s.percentInt}%</span>
                     </div>
                   ))}