@celestia-island/hikari 0.55.69 → 0.55.71

package/package.json

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

package/src/components/HkStepFlow.scss

@@ -32,7 +32,22 @@
     --hk-stepflow-sticky-bg,
     color-mix(in srgb, var(--hi-color-surface, #f0f4f8) 95%, transparent)
   );
-  top: var(--hk-stepflow-sticky-top, 0px);
+  // The HOST's declared gutter owns the resting offset, not this rule. The
+  // pin contract's offset rule is (0,3,0) and parks a top pin at
+  // var(--hk-scroll-pad-top, 0px); this rule is (0,4,0), so a bare `0px`
+  // default silently out-specified it and parked the stuck pin flush
+  // against the scrollport edge instead of at the gutter line. The
+  // window-mode bonds sit 11-13px below the pin's top, so they landed
+  // INSIDE the host's own gutter cover (HkModal paints
+  // `.hk-modal-body::before` there at z-index 3), leaving their visibility
+  // resting entirely on the pin's z-index 10 staying inside that cover's
+  // stacking context. Any promoted wrapper between the scroll host and the
+  // pin collapses that: the bond measures 0 % under an opaque cover and
+  // exactly 5.0 % under a 95 % one — the round-24 phone signature
+  // (左中右三段式的步骤左右没有横线). Deferring to the gutter moves the
+  // bond to pad+11, clear of the cover band, and keeps a consumer's own
+  // override working through --hk-stepflow-sticky-top.
+  top: var(--hk-stepflow-sticky-top, var(--hk-scroll-pad-top, 0px));
   margin-bottom: 0;
   padding-bottom: var(--hk-stepflow-header-gap, var(--space-16, 1rem));
 }

package/src/components/HkTimeline.bondvisibility.contract.test.ts

@@ -0,0 +1,86 @@
+/**
+ * Source contract for the window-mode bond's visibility.
+ *
+ * Round-24 chest report: 左中右三段式的步骤左右没有横线 — the provider wizard's
+ * step indicator rendered its three cells but neither the completed bond,
+ * the pending bond, nor the edge continuations read as lines. Two
+ * independent causes, both measured on a real engine, both pinned here:
+ *
+ *   1. The stuck pin ignored the host's declared gutter. The step-flow's
+ *      sticky rule is (0,4,0) and the pin contract's offset rule is
+ *      (0,3,0), so a bare `0px` default out-specified the contract and
+ *      parked the pin flush against the scrollport edge. The window-mode
+ *      bonds sit 11-13px below the pin's top and therefore landed inside
+ *      HkModal's own gutter cover (`.hk-modal-body::before`, z-index 3),
+ *      which left their visibility resting entirely on the pin's z-index
+ *      beating that cover. One promoted wrapper between the scroll host
+ *      and the pin collapses it: the bond then measures 0 % under an
+ *      opaque cover and exactly 5.0 % under a 95 % one.
+ *   2. The pending bond derived its colour from `--hi-color-border`, which
+ *      the shipped schemes define WITH alpha (rgb(128 128 128 / 15%)), so
+ *      the bond computed to 15 % × 30 % = 4.5 % — and a 2px line at 4.5 %
+ *      is not a line.
+ *
+ * Both are pure stylesheet facts, which is why they are asserted against
+ * the source: jsdom runs no cascade, and the failure only shows up as
+ * pixels. The geometry half of the same investigation (the containing
+ * block is correct — the overlay anchors to the sticky timeline) needs no
+ * assertion; it was never wrong.
+ */
+import { describe, expect, it } from "vitest";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const read = (name: string): string => readFileSync(join(here, name), "utf-8");
+
+const stepflow = read("HkStepFlow.scss");
+const timeline = read("HkTimeline.scss");
+const scrollpin = read("HkScrollPin.scss");
+
+/** The declaration block of the first rule whose selector starts at `from`. */
+function blockAfter(source: string, from: number): string {
+  const end = source.indexOf("}", from);
+  return end < 0 ? source.slice(from) : source.slice(from, end);
+}
+
+describe("window-mode bond visibility contract", () => {
+  it("keeps the pin contract's gutter as the sticky step-flow header's default offset", () => {
+    // The pin contract still declares the gutter for an offset top pin...
+    expect(scrollpin).toContain("top: var(--hk-scroll-pad-top, 0px)");
+
+    // ...and the step-flow override DEFERS to it instead of replacing it
+    // with 0. Losing this is silent: the pin still pins, the cells still
+    // render, only the bonds fall under the host's gutter cover.
+    const at = stepflow.indexOf(
+      ".hk-step-flow[data-sticky-header] > .hk-timeline.hk-scroll-pin",
+    );
+    expect(at).toBeGreaterThan(-1);
+    const block = blockAfter(stepflow, at);
+    expect(block).toContain(
+      "top: var(--hk-stepflow-sticky-top, var(--hk-scroll-pad-top, 0px));",
+    );
+    // The old bare default must not come back.
+    expect(block).not.toContain("top: var(--hk-stepflow-sticky-top, 0px);");
+  });
+
+  it("derives the pending bond from an opaque tone so its alpha is not multiplied", () => {
+    const at = timeline.indexOf('&[data-status="pending"]');
+    expect(at).toBeGreaterThan(-1);
+    const block = blockAfter(timeline, at);
+    expect(block).toContain("--_link-color:");
+    expect(block).toContain("var(--hi-color-muted");
+    // Deriving from the border token multiplied its own alpha.
+    expect(block).not.toContain("var(--hi-color-border)");
+  });
+
+  it("carries both bonds as real boxes on the shared node geometry", () => {
+    // The segments are positioned off the shared tokens, so a bond can only
+    // be invisible through colour or occlusion — never through zero size.
+    expect(timeline).toContain("--hk-timeline-link-thickness: 2px");
+    expect(timeline).toContain("--hk-timeline-link-clearance: 20px");
+    expect(timeline).toContain('&[data-segment="before-current"]');
+    expect(timeline).toContain('&[data-segment="current-after"]');
+  });
+});

package/src/components/HkTimeline.scss

@@ -137,7 +137,16 @@
   // the current step is never a link endpoint (HkTimeline.tsx statusOf),
   // so no "active" key here.
   &[data-status="pending"] {
-    --_link-color: color-mix(in srgb, var(--hi-color-border) 30%, transparent);
+    // 30 % of a SOLID muted tone. Deriving from --hi-color-border multiplied
+    // that token's own alpha: the shipped schemes define it as
+    // `rgb(128 128 128 / 15%)`, so the bond computed to 15 % × 30 % = 4.5 %
+    // — a 2px line at 4.5 % reads as no line at all, which is what the
+    // round-24 report saw on the right bond and on both edge continuations
+    // (左中右三段式的步骤左右没有横线). --hi-color-muted is an opaque text
+    // tone in the family's schemes, so the 30 % below is the strength it
+    // looks like; the intent ("a third as loud as the completed bond")
+    // survives whatever alpha a theme gives its border token.
+    --_link-color: color-mix(in srgb, var(--hi-color-muted, #6c6c6c) 30%, transparent);
   }
 
   background-color: var(--_link-color);
@@ -432,10 +441,9 @@
 }
 
 // ── Navigation motion (2026-09-23 user directive, round 16) ──────────
-// The stepper never hard-cuts: status colors crossfade, the full-mode
-// active halo slides between step nodes, and the window-mode cells wipe
-// in from the navigation side. All of it rides the family's standard
-// duration/ease and collapses under reduced motion.
+// The stepper never hard-cuts: status colors crossfade and the window-mode
+// cells wipe in from the navigation side. All of it rides the family's
+// standard duration/ease and collapses under reduced motion.
 
 .hk-timeline {
   --hk-timeline-motion: 0.3s;
@@ -453,41 +461,17 @@
     border-color var(--hk-timeline-motion) var(--hk-timeline-motion-ease);
 }
 
-// Full mode: the active halo — a measured pill behind the active step
-// (the component positions it via transform/size), sliding between
-// nodes with the same clock. The first placement is instant (data-placed
-// gates the transition) so opening the sheet does not animate it.
+// The full-mode active halo was removed here (2026-09-24 user directive):
+// a measured pill behind the active step, sliding between nodes, which
+// read as an unexplained primary blob in every wide multi-step flow and
+// duplicated what the filled indicator and the label weight already say.
+// Window mode never had one. The containing-block rule below stays — it is
+// the timeline's anchor for any absolutely positioned consumer content, and
+// the vertical rail anchors to the step rather than to this box.
 .hk-timeline[data-mode="full"]:not(.hk-scroll-pin) {
   position: relative;
 }
 
-.hk-timeline-halo {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  translate: 0 -50%;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--hi-color-primary) 10%, transparent);
-  pointer-events: none;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-.hk-timeline[data-orientation="vertical"] .hk-timeline-halo {
-  top: 0;
-  left: 50%;
-  translate: -50% 0;
-  width: 100%;
-  height: auto;
-}
-
-.hk-timeline-halo[data-placed] {
-  transition:
-    transform var(--hk-timeline-motion) var(--hk-timeline-motion-ease),
-    width var(--hk-timeline-motion) var(--hk-timeline-motion-ease),
-    height var(--hk-timeline-motion) var(--hk-timeline-motion-ease);
-}
-
 // Window mode: each cell's step content is keyed by its step key, so a
 // navigation remounts it — wipe in from the navigation side. data-dir is
 // absent on the very first render, so opening does not animate.
@@ -553,8 +537,4 @@ html[data-css-animations="0"] .hk-timeline[data-mode="window"][data-dir] .hk-tim
   .hk-timeline[data-mode="window"][data-dir] .hk-timeline-step {
     animation: none;
   }
-
-  .hk-timeline-halo[data-placed] {
-    transition: none;
-  }
 }

package/src/components/HkTimeline.test.tsx

@@ -424,36 +424,20 @@ describe("HkTimeline navigation motion (round 16)", () => {
     return { container, current };
   }
 
-  it("positions the full-mode halo on the active step and slides it on navigation", async () => {
-    const { container, current } = mountTimeline(4, "s1");
-    // happy-dom has no layout engine: give the step nodes deterministic
-    // offsets so the halo's measured transform is observable.
-    const steps = () =>
-      Array.from(container.querySelectorAll<HTMLElement>(".hk-timeline-step"));
-    for (const [i, step] of steps().entries()) {
-      Object.defineProperty(step, "offsetLeft", {
-        configurable: true,
-        get: () => i * 100,
-      });
-      Object.defineProperty(step, "offsetWidth", {
-        configurable: true,
-        get: () => 80,
-      });
-    }
-    await nextTick();
-    await nextTick();
-    const halo = container.querySelector<HTMLElement>(".hk-timeline-halo");
-    expect(halo).not.toBeNull();
-    // Active = s1 (second node): translateX(100 - pad).
-    expect(halo!.style.transform).toBe("translateX(94px)");
-    expect(halo!.style.width).toBe("92px");
-    expect(halo!.hasAttribute("data-placed")).toBe(true);
-
-    current.value = "s3";
+  it("renders no full-mode halo behind the active step", async () => {
+    // The measured pill that used to slide behind the active step is gone
+    // (2026-09-24 user directive): in a wide multi-step flow it read as an
+    // unexplained primary blob, and the filled indicator plus the label
+    // weight already carry the active step. Pinned so a later "highlight"
+    // refactor cannot quietly reintroduce it.
+    const { container } = mountTimeline(4, "s1");
     await nextTick();
     await nextTick();
-    // Slid to the fourth node.
-    expect(halo!.style.transform).toBe("translateX(294px)");
+    expect(container.querySelector(".hk-timeline-halo")).toBeNull();
+    // The overlay the window mode owns is a different element and stays a
+    // window-mode concern — full mode draws its connectors inline.
+    expect(container.querySelector(".hk-timeline[data-mode='full']")).not.toBeNull();
+    expect(container.querySelector(".hk-timeline-links")).toBeNull();
   });
 
   it("marks the navigation direction for the window-mode wipe", async () => {

package/src/components/HkTimeline.tsx

@@ -178,9 +178,8 @@ export default defineComponent({
 
     // ── Navigation motion (2026-09-23 user directive, round 16) ──────
     // The stepper must not hard-cut between steps: the status colors
-    // crossfade (stylesheet), the window-mode cells wipe in from the
-    // navigation side (keyed remount + data-dir), and the full-mode
-    // active halo slides between step nodes (measured transform).
+    // crossfade (stylesheet) and the window-mode cells wipe in from the
+    // navigation side (keyed remount + data-dir).
     let prevIndex = currentIndex.value;
     /** Set once the first navigation revealed a direction; drives the
      *  window-mode wipe's side via the host attribute. */
@@ -192,37 +191,11 @@ export default defineComponent({
       prevIndex = idx;
     });
 
-    /** The sliding full-mode highlight. */
-    const halo = ref<HTMLElement | null>(null);
-    function positionHalo(): void {
-      const hostEl = host.value;
-      const haloEl = halo.value;
-      if (!hostEl || !haloEl) return;
-      const step = hostEl.querySelector<HTMLElement>(
-        '.hk-timeline-step[data-status="active"]',
-      );
-      if (!step) return;
-      const vertical = props.orientation === "vertical";
-      const pad = 6;
-      if (vertical) {
-        haloEl.style.transform = `translateY(${Math.max(0, step.offsetTop - pad)}px)`;
-        haloEl.style.width = "";
-        haloEl.style.height = `${step.offsetHeight + pad * 2}px`;
-      } else {
-        haloEl.style.transform = `translateX(${Math.max(0, step.offsetLeft - pad)}px)`;
-        haloEl.style.height = "";
-        haloEl.style.width = `${step.offsetWidth + pad * 2}px`;
-      }
-      // The very first placement must not animate from nothing — only
-      // subsequent moves ride the CSS transition.
-      haloEl.setAttribute("data-placed", "");
-    }
-    watch(
-      () => [props.currentKey, props.orientation] as const,
-      () => {
-        void nextTick(positionHalo);
-      },
-    );
+    // The sliding full-mode highlight is gone (2026-09-24 user directive).
+    // It read as an unexplained primary blob behind the active step in every
+    // multi-step flow that is wide enough to show all of them, and the
+    // active step is already carried by its filled indicator plus the label
+    // weight. Window mode never had one, so nothing replaces it there.
 
     function statusOf(idx: number): TimelineStepStatus {
       return idx < currentIndex.value
@@ -262,13 +235,11 @@ export default defineComponent({
       if (typeof ResizeObserver !== "undefined") {
         observer = new ResizeObserver(() => {
           measure();
-          positionHalo();
         });
         if (host.value) observer.observe(host.value);
       }
       void nextTick(() => {
         measure();
-        positionHalo();
       });
     });
 
@@ -428,7 +399,6 @@ export default defineComponent({
           data-mode="full"
           data-dir={navDir.value ?? undefined}
         >
-          <div ref={halo} class="hk-timeline-halo" aria-hidden="true" />
           {props.steps.map((_step, idx) => {
             const isLast = idx === props.steps.length - 1;
             return renderStep(idx, { connector: !isLast, last: isLast });