@celestia-island/hikari 0.55.162 → 0.55.164

package/package.json

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

package/src/components/HkAdminShell.tsx

@@ -268,7 +268,7 @@ export const HkAdminShell = defineComponent({
 
         {slots.footer && (
           <footer class="s-status-bar" style={{ position: "fixed", bottom: 0, left: 0, right: 0, // Footer band (was a bare 40 — the pre-band chrome value).
-            zIndex: "var(--z-footer, 110)" }}>
+            zIndex: "var(--hk-z-toolbar)" }}>
             {slots.footer()}
           </footer>
         )}

package/src/components/HkBlockingToast.scss

@@ -12,7 +12,7 @@
   /* Same viewport gutter the anchored popups clamp to (16px desktop /
    * 8px mobile) — the toast stack is a floating layer too. */
   inset-inline-end: var(--viewport-gutter, 16px);
-  z-index: var(--hk-z-toast, 4000);
+  z-index: var(--hk-overlay-z-blocking-toast, 50);
   max-width: 24rem;
   pointer-events: none;
 }

package/src/components/HkBlockingToast.tsx

@@ -45,6 +45,7 @@ import {
 } from "../runtime/useBlockingToast";
 import "./HkBlockingToast.scss";
 import HButton from "./HkButton";
+import { ensureOverlayRoot } from "../overlay/overlayRoot";
 
 const ICON_SIZE = 18;
 
@@ -175,7 +176,7 @@ export default defineComponent({
     }
 
     return () => (
-      <Teleport to="body">
+      <Teleport to={ensureOverlayRoot()}>
         <div class="hk-blocking-toast-container">
           <TransitionGroup
             ref={hostRef}

package/src/components/HkBreadcrumb.scss

@@ -212,7 +212,7 @@
     top: calc(100% + 4px);
     left: 0;
     min-width: 200px;
-    z-index: 100;
+    z-index: var(--hk-z-header);
 
     // Appearance
     border-radius: vars.$hikari-radius-fui-md;

package/src/components/HkCheckbox.scss

@@ -103,7 +103,7 @@
 
 .hk-checkbox-icon {
   position: relative;
-  z-index: var(--hi-z-above, 1);
+  z-index: var(--hk-z-above);
   color: rgb(var(--color-on-solid-icon, 255 255 255));
   width: 14px;
   height: 14px;
@@ -124,7 +124,7 @@
   height: 6px;
   border-radius: 50%;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
-  z-index: var(--hi-z-above, 1);
+  z-index: var(--hk-z-above);
 
   .hk-checkbox-sm & {
     width: 5px;
@@ -142,7 +142,7 @@
   height: 2px;
   border-radius: 1px;
   background: rgb(var(--color-on-solid-icon, 255 255 255));
-  z-index: var(--hi-z-above, 1);
+  z-index: var(--hk-z-above);
 
   .hk-checkbox-sm & {
     width: 6px;

package/src/components/HkCornerBadge.scss

@@ -0,0 +1,132 @@
+/**
+ * HkCornerBadge — the generic corner mark (dot / count / label) pinned
+ * to one corner of the default-slot anchor (see HkCornerBadge.tsx for
+ * the contract). Geometry follows the house pattern the trigger dots
+ * and the Rust family's .hk-badge-wrapper established: the anchor is a
+ * relative inline-flex wrapper (the badge escapes nothing — hosts wrap
+ * ANY child), the mark centers ON the corner via translate(50%,-50%)
+ * with an optional --hk-corner-badge-offset clearance.
+ */
+
+.hk-corner-badge-anchor {
+  position: relative;
+  display: inline-flex;
+}
+
+.hk-corner-badge {
+  position: absolute;
+  /* Centered on the corner; the corner data-attribute flips the axes
+   * and the offset var adds clearance without re-deriving transforms. */
+  transform: translate(var(--hk-corner-badge-tx, 50%), var(--hk-corner-badge-ty, -50%));
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.hk-corner-badge[data-corner="top-right"] {
+  top: var(--hk-corner-badge-offset, 0px);
+  right: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: 50%;
+  --hk-corner-badge-ty: -50%;
+}
+
+.hk-corner-badge[data-corner="top-left"] {
+  top: var(--hk-corner-badge-offset, 0px);
+  left: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: -50%;
+  --hk-corner-badge-ty: -50%;
+}
+
+.hk-corner-badge[data-corner="bottom-right"] {
+  bottom: var(--hk-corner-badge-offset, 0px);
+  right: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: 50%;
+  --hk-corner-badge-ty: 50%;
+}
+
+.hk-corner-badge[data-corner="bottom-left"] {
+  bottom: var(--hk-corner-badge-offset, 0px);
+  left: var(--hk-corner-badge-offset, 0px);
+  --hk-corner-badge-tx: -50%;
+  --hk-corner-badge-ty: 50%;
+}
+
+/* Dot form: a filled circle in the variant's tone (same token trio
+ * HkBadge uses — variant classes below set all three channels). */
+.hk-corner-badge--dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--hk-badge-bg);
+  box-shadow: 0 0 0 1.5px rgb(var(--color-surface) / 85%);
+}
+
+/* Pill form: the compact count/label chip (18px min, text-4xs mono
+ * digits — notification-badge geometry across the family). */
+.hk-corner-badge--pill {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full, 999px);
+  background: var(--hk-badge-bg);
+  color: var(--hk-badge-text);
+  border: 1px solid var(--hk-badge-border);
+  font-size: var(--text-4xs, 0.625rem);
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Variant tones — the same channel triplets HkBadge.scss ships; kept
+ * literal here so the corner badge owns its own (tiny) sheet. */
+.hk-corner-badge-default {
+  --hk-badge-bg: rgb(var(--color-primary) / 12%);
+  --hk-badge-text: rgb(var(--color-text));
+  --hk-badge-border: rgb(var(--color-primary) / 35%);
+}
+
+.hk-corner-badge-primary {
+  --hk-badge-bg: rgb(var(--color-primary));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-success {
+  --hk-badge-bg: rgb(var(--color-success));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-corner-badge-ring: rgb(var(--color-surface) / 85%);
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-error {
+  --hk-badge-bg: rgb(var(--color-error));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-warning {
+  --hk-badge-bg: rgb(var(--color-warning));
+  --hk-badge-text: rgb(var(--color-text));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-info {
+  --hk-badge-bg: rgb(var(--color-info, var(--color-primary)));
+  --hk-badge-text: rgb(var(--color-on-primary, 255 255 255));
+  --hk-badge-border: transparent;
+}
+
+.hk-corner-badge-muted {
+  --hk-badge-bg: rgb(var(--color-text) / 55%);
+  --hk-badge-text: rgb(var(--color-surface));
+  --hk-badge-border: transparent;
+}
+
+/* The success dot's ring token feeds the dot form's surface cutout so
+ * the mark reads ON the anchor, not under it (the icon-group marker's
+ * trick, generalized). */
+.hk-corner-badge-success.hk-corner-badge--dot {
+  box-shadow: 0 0 0 1.5px var(--hk-corner-badge-ring, rgb(var(--color-surface) / 85%));
+}

package/src/components/HkCornerBadge.styles.test.ts

@@ -0,0 +1,61 @@
+import { readFileSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { compile } from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Compiled-stylesheet guard for HkCornerBadge — the anchoring contract
+ * (2026-10-15): the anchor wrapper is a relative inline-flex host (any
+ * child can carry the mark), the mark centers ON its corner via
+ * translate(±50%,±50%), and each data-corner flips the right axes.
+ * Vitest stubs CSS, so the runtime suite can never catch a lost rule.
+ */
+
+const componentDir = resolve(dirname(fileURLToPath(import.meta.url)));
+
+const css = compile(resolve(componentDir, "HkCornerBadge.scss"), {
+  style: "expanded",
+}).css;
+
+function ruleFor(selector: string): string {
+  const start = css.indexOf(selector);
+  expect(start, `${selector} present in the compiled sheet`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(start, close + 1);
+}
+
+describe("HkCornerBadge stylesheet contract", () => {
+  it("compiles", () => {
+    expect(css).toContain(".hk-corner-badge");
+  });
+
+  it("the anchor is a relative inline-flex wrapper (any child carries the mark)", () => {
+    const rule = ruleFor(".hk-corner-badge-anchor {");
+    expect(rule).toContain("position: relative");
+    expect(rule).toContain("display: inline-flex");
+  });
+
+  it("the mark never takes pointer events and never wraps", () => {
+    const rule = ruleFor(".hk-corner-badge {");
+    expect(rule).toContain("position: absolute");
+    expect(rule).toContain("pointer-events: none");
+    expect(rule).toContain("white-space: nowrap");
+  });
+
+  it("each corner flips the translate axes", () => {
+    expect(ruleFor('.hk-corner-badge[data-corner=top-right] {')).toContain("--hk-corner-badge-tx: 50%");
+    expect(ruleFor('.hk-corner-badge[data-corner=top-left] {')).toContain("--hk-corner-badge-tx: -50%");
+    expect(ruleFor('.hk-corner-badge[data-corner=bottom-right] {')).toContain("--hk-corner-badge-ty: 50%");
+    expect(ruleFor('.hk-corner-badge[data-corner=bottom-left] {')).toContain("--hk-corner-badge-tx: -50%");
+  });
+
+  it("the dot is round and the pill is a tabular-numbers chip", () => {
+    const dot = ruleFor(".hk-corner-badge--dot {");
+    expect(dot).toContain("border-radius: 50%");
+    const pill = ruleFor(".hk-corner-badge--pill {");
+    expect(pill).toContain("font-variant-numeric: tabular-nums");
+  });
+});

package/src/components/HkCornerBadge.test.tsx

@@ -0,0 +1,86 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkCornerBadge from "./HkCornerBadge";
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+describe("HkCornerBadge — the generic corner mark (2026-10-15)", () => {
+  it("anchors the default slot in a relative wrapper with no mark by default", () => {
+    const c = mount(h(HkCornerBadge, null, () => h("button", { class: "probe" }, "x")));
+    const anchor = c.querySelector(".hk-corner-badge-anchor")!;
+    expect(anchor, "anchor wrapper present").toBeTruthy();
+    // (The relative/inline-flex anchoring is pinned by the compiled-css
+    // contract test — vitest stubs styles, so no computed assertions.)
+    expect(c.querySelector(".probe"), "slot content rendered").toBeTruthy();
+    expect(c.querySelector(".hk-corner-badge")).toBeNull();
+  });
+
+  it("dot form: a variant-colored dot at the requested corner, decorative by default", () => {
+    const c = mount(
+      h(HkCornerBadge, { dot: true, variant: "success", corner: "bottom-right" }, () => h("i")),
+    );
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge).toBeTruthy();
+    expect(badge.className).toContain("hk-corner-badge--dot");
+    expect(badge.className).toContain("hk-corner-badge-success");
+    expect(badge.getAttribute("data-corner")).toBe("bottom-right");
+    expect(badge.getAttribute("aria-hidden")).toBe("true");
+    expect(badge.getAttribute("role")).toBeNull();
+  });
+
+  it("count form: renders the number, caps past max, hides zero unless showZero", () => {
+    const c = mount(h(HkCornerBadge, { count: 7 }, () => h("i")));
+    expect(c.querySelector(".hk-corner-badge")!.textContent).toBe("7");
+    const capped = mount(h(HkCornerBadge, { count: 130, max: 99 }, () => h("i")));
+    expect(capped.querySelector(".hk-corner-badge")!.textContent).toBe("99+");
+    const zero = mount(h(HkCornerBadge, { count: 0 }, () => h("i")));
+    expect(zero.querySelector(".hk-corner-badge")).toBeNull();
+    const zeroShown = mount(h(HkCornerBadge, { count: 0, showZero: true }, () => h("i")));
+    expect(zeroShown.querySelector(".hk-corner-badge")!.textContent).toBe("0");
+  });
+
+  it("custom label form: a text pill from the default slot", () => {
+    const c = mount(h(HkCornerBadge, { variant: "primary", text: "5h" }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge.textContent).toBe("5h");
+    expect(badge.className).toContain("hk-corner-badge--pill");
+  });
+
+  it("accessible mode: role=img + aria-label instead of aria-hidden", () => {
+    const c = mount(h(HkCornerBadge, { dot: true, label: "3 active filters" }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge.getAttribute("role")).toBe("img");
+    expect(badge.getAttribute("aria-label")).toBe("3 active filters");
+    expect(badge.getAttribute("aria-hidden")).toBeNull();
+  });
+
+  it("dot wins when both dot and count/text are set", () => {
+    const c = mount(h(HkCornerBadge, { dot: true, count: 9 }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge")!;
+    expect(badge.className).toContain("hk-corner-badge--dot");
+    expect(badge.textContent).toBe("");
+  });
+
+  it("offset writes the clearance custom property", () => {
+    const c = mount(h(HkCornerBadge, { dot: true, offset: 2 }, () => h("i")));
+    const badge = c.querySelector(".hk-corner-badge") as HTMLElement;
+    expect(badge.style.getPropertyValue("--hk-corner-badge-offset")).toBe("2px");
+  });
+});

package/src/components/HkCornerBadge.tsx

@@ -0,0 +1,91 @@
+import { computed, defineComponent, type PropType } from "vue";
+
+import "./HkCornerBadge.scss";
+
+/** The color channels HkBadge already standardizes (same variant names,
+ * same override escape hatch — kept in lockstep with HkBadge.tsx). */
+export type CornerBadgeVariant =
+  | "default"
+  | "primary"
+  | "success"
+  | "error"
+  | "warning"
+  | "info"
+  | "muted";
+
+/**
+ * HkCornerBadge — the generic corner mark for ANY anchor (user
+ * direction 2026-10-15): a green/red/traffic dot, a notification count
+ * ("9+"), or a custom text label pinned to one corner of whatever sits
+ * in the default slot. The Vue package had every consumer hand-rolling
+ * its own absolute span (the filter/search trigger dots, the icon-group
+ * marker, chest's dock time-range pill); this is the one component they
+ * converge on — API parity with the Rust family's badge.rs (dot / count
+ * / max "N+" / showZero), plus the corner + custom-label the web needs.
+ *
+ * Decorative by default (aria-hidden): the mark VISUALIZES state the
+ * anchor already exposes (a filtered trigger, a selected range); pass
+ * `label` when it is the only place a count is announced.
+ */
+export default defineComponent({
+  name: "HkCornerBadge",
+  props: {
+    variant: { type: String as PropType<CornerBadgeVariant>, default: "primary" },
+    /** Bare dot form (the green/red/traffic light). */
+    dot: { type: Boolean, default: false },
+    /** Count form: renders the number, or "max+" past `max`. Hidden at
+     * 0 unless showZero (notification semantics). */
+    count: { type: Number, default: undefined },
+    max: { type: Number, default: undefined },
+    showZero: { type: Boolean, default: false },
+    /** Custom label text (the pill form). The default slot is the
+     *  ANCHOR, never the label — overloading it made every anchored
+     *  child's own text leak into the badge. */
+    text: { type: String, default: undefined },
+    /** Which corner of the anchor. */
+    corner: {
+      type: String as PropType<"top-right" | "top-left" | "bottom-right" | "bottom-left">,
+      default: "top-right",
+    },
+    /** Extra clearance from the corner in px (0 = sit ON the corner,
+     * the translate(50%,-50%) centering). */
+    offset: { type: Number, default: 0 },
+    /** Accessible name for the mark (without it the badge is
+     * aria-hidden decoration). */
+    label: { type: String, default: undefined },
+  },
+  setup(props, { slots }) {
+    const text = computed<string | null>(() => {
+      if (props.count !== undefined) {
+        if (props.count === 0 && !props.showZero) return null;
+        if (props.max !== undefined && props.count > props.max) return `${props.max}+`;
+        return String(props.count);
+      }
+      return props.text && props.text.length > 0 ? props.text : null;
+    });
+
+    const show = computed(() => props.dot || text.value !== null);
+
+    return () => (
+      <span class="hk-corner-badge-anchor">
+        {slots.default?.()}
+        {show.value && (
+          <span
+            class={[
+              "hk-corner-badge",
+              `hk-corner-badge-${props.variant}`,
+              props.dot ? "hk-corner-badge--dot" : "hk-corner-badge--pill",
+            ]}
+            data-corner={props.corner}
+            style={props.offset ? { "--hk-corner-badge-offset": `${props.offset}px` } : undefined}
+            aria-hidden={props.label ? undefined : "true"}
+            role={props.label ? "img" : undefined}
+            aria-label={props.label}
+          >
+            {props.dot ? null : text.value}
+          </span>
+        )}
+      </span>
+    );
+  },
+});

package/src/components/HkDraggableGrid.scss

@@ -136,7 +136,7 @@
   /* Drag ghost: above page chrome (--z-sidebar 900) but below every
      popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)
      so a drag never buries toasts or open panels. */
-  z-index: var(--hk-z-drag, 950);
+  z-index: var(--hk-z-drag);
   will-change: transform;
 
   > .hk-draggable-grid-cell {

package/src/components/HkDraggableList.scss

@@ -110,7 +110,7 @@
   /* Drag ghost: above page chrome (--z-sidebar 900) but below every
      popup band (overlay 1000 < dropdown 2000 < tooltip 3000 < toast 4000)
      so a drag never buries toasts or open panels. */
-  z-index: var(--hk-z-drag, 950);
+  z-index: var(--hk-z-drag);
   will-change: transform;
 
   > .hk-draggable-list-item {

package/src/components/HkDrawer.tsx

@@ -23,6 +23,7 @@ import { useSurfaceContentHold } from "../composables/useSurfaceContentHold";
 import HIconButton from "./HkIconButton";
 import HIcon from "./HkIcon";
 import "./window-close.scss";
+import { ensureOverlayRoot } from "../overlay/overlayRoot";
 
 type DrawerSide = "left" | "right" | "top" | "bottom";
 
@@ -276,7 +277,7 @@ export default defineComponent({
       if (!machine.mounted.value) return null;
       const panelPrefix = `hk-drawer-${props.side}`;
       return (
-      <Teleport to="body">
+      <Teleport to={ensureOverlayRoot()}>
         {props.overlay ? (
           <div
             ref={overlayEl}

package/src/components/HkFab.scss

@@ -4,7 +4,7 @@
 // safe-area-aware base per instance (set from offsetX / offsetY).
 .hk-fab {
   position: absolute;
-  z-index: var(--hk-fab-z, 40);
+  z-index: var(--hk-z-fab);
   display: flex;
   align-items: center;
   gap: var(--space-8, 0.5rem);

package/src/components/HkFab.test.tsx

@@ -46,10 +46,10 @@ function mountFab(props: Record<string, unknown> = {}): Harness {
   // fall back to the document scope so both modes resolve.
   const root =
     container.querySelector<HTMLElement>(".hk-fab") ??
-    document.body.querySelector<HTMLElement>(".hk-fab");
+    document.querySelector<HTMLElement>(".hk-fab");
   const button =
     container.querySelector<HTMLButtonElement>(".hk-fab-button") ??
-    document.body.querySelector<HTMLButtonElement>(".hk-fab-button");
+    document.querySelector<HTMLButtonElement>(".hk-fab-button");
   if (!root || !button) throw new Error("HkFab did not render its shell");
   harness.root = root;
   harness.button = button;
@@ -226,13 +226,13 @@ describe("HkFab speed dial", () => {
 describe("HkFab layer", () => {
   it("host (default) keeps the fab anchored in the host tree", () => {
     const m = mountFab({ ariaLabel: "Host", positioning: "fixed" });
-    expect(document.body.querySelector(".hk-floating-layer")).toBeNull();
+    expect(document.querySelector(".hk-floating-layer")).toBeNull();
     expect(m.root.getAttribute("data-positioning")).toBe("fixed");
   });
 
   it("top wraps the fab in an HkFloatingLayer above the window band", () => {
     const m = mountFab({ ariaLabel: "Float", layer: "top", corner: "bottom-right" });
-    const layer = document.body.querySelector<HTMLElement>(".hk-floating-layer");
+    const layer = document.querySelector<HTMLElement>(".hk-floating-layer");
     expect(layer).not.toBeNull();
     expect(layer!.contains(m.root)).toBe(true);
     // Geometry is owned by the layer alone once floated.
@@ -244,6 +244,6 @@ describe("HkFab layer", () => {
     expect(layer!.getAttribute("data-corner")).toBe("bottom-right");
     const z = Number(layer!.style.getPropertyValue("--hk-float-z"));
     expect(z).toBeGreaterThanOrEqual(POPUP_Z_BANDS.tooltip);
-    expect(z).toBeLessThan(POPUP_Z_BANDS.toast);
+    // Tooltip is the topmost band (2026-10-15): no upper bound.
   });
 });