@celestia-island/hikari 0.55.279 → 0.55.280

package/package.json

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

package/src/components/HkCornerBadge.tsx

@@ -13,6 +13,12 @@ export type CornerBadgeVariant =
   | "info"
   | "muted";
 
+/** Which corner of the anchor the mark hangs on. Exported so hosts that
+ *  embed the shell (HkTabs' trigger badge) share the one vocabulary
+ *  instead of re-spelling the union; HkIconButton's dot borrows the tone
+ *  channels but is an inset span of its own, not a corner mark. */
+export type CornerBadgeCorner = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+
 /**
  * HkCornerBadge — the generic corner mark for ANY anchor (user
  * direction 2026-10-15): a green/red/traffic dot, a notification count
@@ -44,7 +50,7 @@ export default defineComponent({
     text: { type: String, default: undefined },
     /** Which corner of the anchor. */
     corner: {
-      type: String as PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">,
+      type: String as PropType<CornerBadgeCorner>,
       default: "top-right",
     },
     /** Extra clearance from the corner in px (0 = sit ON the corner,

package/src/components/HkTabs.test.ts

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkTabs from "./HkTabs";
+import type { TabItem } from "./HkTabs";
 import { CROSSFADE_WATCHDOG_MS } from "./HkCrossfade";
 import { DEFAULT_ANIMATION_DURATION_MS } from "../composables/useAnimationLoop";
 
@@ -661,3 +662,111 @@ describe("HkTabs panel morph (HkTransitionContainer consumption)", () => {
     expect(container.querySelector(".hk-tabs-panel")).toBeNull();
   });
 });
+
+describe("HkTabs trigger corner badge", () => {
+  /** Mount a two-tab strip with an optional badge on the first option. */
+  function mountBadge(badge: TabItem["badge"]): { container: HTMLElement } {
+    const active = ref("a");
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkTabs, {
+            variant: "segmented",
+            tabs: [
+              { key: "a", label: "Alpha", badge },
+              { key: "b", label: "Beta" },
+            ],
+            renderPanels: false,
+            modelValue: active.value,
+            "onUpdate:modelValue": (v: string) => { active.value = v; },
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return { container };
+  }
+
+  it("renders the count through HkCornerBadge inside the trigger (no hand-rolled suffix)", () => {
+    const { container } = mountBadge({ count: 3, label: "3 items" });
+    const trig = container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[0]!;
+    // The mark is the family's corner-badge pill, anchored bottom-right
+    // (the subscript corner) of the label, not a "(3)" text suffix.
+    const mark = trig.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark).not.toBeNull();
+    expect(mark.textContent).toBe("3");
+    expect(mark.dataset.corner).toBe("bottom-right");
+    expect(trig.textContent).not.toContain("(3)");
+    // Default clearance: the straddling pill must stay inside the
+    // scroller's 6px vertical clearance below the label (see
+    // TabItem.badge.offset) — the offset var pins that contract.
+    expect(mark.style.getPropertyValue("--hk-corner-badge-offset")).toBe("4px");
+    // The sibling trigger stays badge-free.
+    expect(container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[1]!.querySelector(".hk-corner-badge")).toBeNull();
+  });
+
+  it("keeps zero visible (presence count, not notification noise)", () => {
+    const { container } = mountBadge({ count: 0, label: "0 items" });
+    const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.textContent).toBe("0");
+  });
+
+  it("collapses past max to the N+ form and names the mark for assistive tech", () => {
+    const { container } = mountBadge({ count: 120, max: 99, label: "120 pending" });
+    const mark = container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark.textContent).toBe("99+");
+    expect(mark.getAttribute("role")).toBe("img");
+    expect(mark.getAttribute("aria-label")).toBe("120 pending");
+  });
+
+  it("follows a live count change without a remount (presence stays current)", async () => {
+    const active = ref("a");
+    const tabs = ref<TabItem[]>([{ key: "a", label: "Alpha", badge: { count: 1, label: "1 item" } }]);
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkTabs, {
+            variant: "segmented",
+            tabs: tabs.value,
+            renderPanels: false,
+            modelValue: active.value,
+            "onUpdate:modelValue": (v: string) => { active.value = v; },
+          });
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    const mark = () => container.querySelector<HTMLElement>(".hk-corner-badge--pill")!;
+    expect(mark().textContent).toBe("1");
+    tabs.value = [{ key: "a", label: "Alpha", badge: { count: 12, label: "12 items" } }];
+    await nextTick();
+    expect(mark().textContent).toBe("12");
+  });
+
+  it("warns in DEV when a badge lacks an accessible label", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    try {
+      mountBadge({ count: 3 });
+      const alarms = warn.mock.calls.filter((c) => String(c[0]).includes("badge without a label"));
+      expect(alarms.length, "the a11y drift alarm must fire").toBeGreaterThan(0);
+      expect(alarms[0]![1]).toBe("a");
+    } finally {
+      warn.mockRestore();
+    }
+  });
+
+  it("leaves badgeless triggers free of the badge anchor (plain label span render)", () => {
+    const { container } = mountBadge(undefined);
+    expect(container.querySelector(".hk-corner-badge-anchor")).toBeNull();
+    const label = container.querySelectorAll<HTMLElement>(".hk-tabs-trigger")[0]!.querySelector("span")!;
+    expect(label.textContent).toBe("Alpha");
+  });
+});

package/src/components/HkTabs.tsx

@@ -5,6 +5,8 @@ import HkScrollContainer from "./HkScrollContainer";
 import HkHoverRevealAction from "./HkHoverRevealAction";
 import HkIconButton from "./HkIconButton";
 import HkTransitionContainer from "./HkTransitionContainer";
+import HkCornerBadge from "./HkCornerBadge";
+import type { CornerBadgeCorner, CornerBadgeVariant } from "./HkCornerBadge";
 import { iconByName } from "../composables/iconRegistry";
 import { useI18n } from "../i18n/context";
 import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
@@ -18,6 +20,39 @@ export interface TabItem {
   /** Optional icon vnode rendered before the label (the `icon-${key}`
    *  slot wins when provided). */
   icon?: unknown;
+  /** Corner-count badge rendered on the trigger through HkCornerBadge —
+   *  the ONE sup/sub decoration shell (user direction 2026-11-05:
+   *  hand-rolled "(n)" count suffixes baked into labels are being
+   *  replaced by the standard corner mark, and triggers are badge hosts
+   *  like every other button). Zero stays visible: a tab count is
+   *  presence information (the "（0）" the inline suffix carried), not
+   *  notification noise — pass no badge to hide it entirely. The badge
+   *  anchors the LABEL, so a tab with an empty label renders no badge
+   *  either; pass `label` (an accessible name like "{n} active") or the
+   *  mark is aria-hidden decoration and the count is announced nowhere
+   *  (a DEV warning fires — a silent a11y regression against the inline
+   *  suffix it replaces must at least be loud). */
+  badge?: {
+    count: number;
+    /** "N+" ceiling (HkCornerBadge.max). */
+    max?: number;
+    /** Which corner of the LABEL the mark hangs on — the subscript
+     *  corner (bottom-right) by default, per the same direction. */
+    corner?: CornerBadgeCorner;
+    /** Tone channel (HkCornerBadge.variant names, default "primary"). */
+    variant?: CornerBadgeVariant;
+    /** Corner clearance in px (HkCornerBadge.offset). Default 4: the
+     *  pill protrudes half its 18px height past the label box, and the
+     *  strip's vertical clearance below the label is trigger padding
+     *  (4px) + list padding (2px) = 6px before the scroller viewport
+     *  clips — offset 4 keeps the protrusion at 5px, inside that
+     *  clearance. 0 sits ON the corner and clips ~3px on the default
+     *  scrollable strip; raise it if your host adds no extra padding. */
+    offset?: number;
+    /** Accessible name for the mark — strongly expected (DEV-warned
+     *  when missing). */
+    label?: string;
+  };
   disabled?: boolean;
   /**
    * Slot-unit width for block (row-filling) strips: how many equal
@@ -202,6 +237,22 @@ export default defineComponent({
           props.tabs.map((tb) => tb.key).join(", "),
         );
       }
+      if (import.meta.env.DEV) {
+        // A badge the strip renders as aria-hidden decoration is a
+        // SILENT a11y regression against the inline "(n)" suffix it
+        // replaces — the count was part of the accessible name before
+        // and is announced nowhere now. Same tier as the duplicate-key
+        // drift alarm above.
+        for (const tb of props.tabs) {
+          if (tb.badge && !tb.badge.label) {
+            // eslint-disable-next-line no-console -- dev-only drift alarm
+            console.warn(
+              "[HkTabs] tab badge without a label is aria-hidden — pass badge.label so the count is announced:",
+              tb.key,
+            );
+          }
+        }
+      }
       return list;
     });
     /** Merged keys actually present in `tabs`, in tab order. */
@@ -546,7 +597,28 @@ export default defineComponent({
             }}
           >
             {icon}
-            {tab.label && <span>{tab.label}</span>}
+            {/* The badge anchors the LABEL (inside the trigger's own
+             *  padding box) rather than the button box: the mark reads
+             *  as part of the control's silhouette (the HkIconButton
+             *  dot's 2026-10-28 lesson, count form). Clipping is kept
+             *  honest by the offset default: the pill straddles the
+             *  label's corner and the scroller viewport clips at
+             *  6px below the label — see TabItem.badge.offset. */}
+            {tab.label && (tab.badge ? (
+              <HkCornerBadge
+                count={tab.badge.count}
+                max={tab.badge.max}
+                showZero
+                corner={tab.badge.corner ?? "bottom-right"}
+                offset={tab.badge.offset ?? 4}
+                variant={tab.badge.variant ?? "primary"}
+                label={tab.badge.label}
+              >
+                <span>{tab.label}</span>
+              </HkCornerBadge>
+            ) : (
+              <span>{tab.label}</span>
+            ))}
           </button>,
         );
       });