@celestia-island/hikari 0.55.70 → 0.55.71

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.70",
+  "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/HkTimeline.scss

@@ -441,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;
@@ -462,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.
@@ -562,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 });