@celestia-island/hikari 0.55.69 → 0.55.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.69",
+  "version": "0.55.70",
   "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);