@celestia-island/hikari 0.55.224 → 0.55.225

package/package.json

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

package/src/components/HkScrollContainer.fade.contract.test.ts

@@ -0,0 +1,66 @@
+/**
+ * Source contract for the scroll-container edge fades (the 2026-10
+ * revision): each edge owns a CSS var and the viewport mask INTERSECTS a
+ * vertical and a horizontal gradient, so a two-axis container fades on all
+ * four sides and the corners fall off naturally.
+ *
+ * The regression this pins (user report: "the light effect is clipped at
+ * the two sides"): the old sheet wrote ONE `mask-image` per axis, so the
+ * last matching rule won, the other axis never faded, and its band ended in
+ * a hard cut. Vertical fades were missing entirely. Hence:
+ *   - exactly ONE mask declaration pair lives in the sheet (the composed
+ *     block on the viewport) — a new per-axis `mask-image` rule is drift;
+ *   - all four edge vars are declared (top/right/bottom/left, 0px base);
+ *   - start/end/both rules exist for BOTH axes;
+ *   - RTL swaps the horizontal vars instead of rewriting the mask.
+ */
+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 sheet = readFileSync(join(here, "HkScrollContainer.scss"), "utf-8");
+
+describe("scroll fade composition contract", () => {
+  it("declares one composed mask on the viewport (no per-axis overrides)", () => {
+    const declarations = sheet.match(/^\s*-?(?:webkit-)?mask-image:/gm) ?? [];
+    // The composed block owns exactly one pair: -webkit-mask-image + mask-image.
+    expect(declarations.length).toBe(2);
+    expect(sheet).toContain("mask-composite: intersect");
+    expect(sheet).toContain("-webkit-mask-composite: source-in");
+  });
+
+  it("declares the four edge vars with zero defaults", () => {
+    for (const edge of ["top", "right", "bottom", "left"]) {
+      expect(sheet).toContain(`--hk-scroll-fade-${edge}: 0px;`);
+    }
+  });
+
+  it("fades both axes from the sensed overflow", () => {
+    for (const axis of ["v", "h"]) {
+      for (const state of ["start", "end", "both"]) {
+        expect(sheet).toContain(
+          `[data-${axis}-overflow="${state}"]`,
+        );
+      }
+    }
+    // The vertical half is what the old sheet was missing entirely.
+    expect(sheet).toContain('--hk-scroll-fade-top: var(--hk-scroll-fade-size)');
+    expect(sheet).toContain('--hk-scroll-fade-bottom: var(--hk-scroll-fade-size)');
+  });
+
+  it("swaps horizontal sides under RTL instead of rewriting the mask", () => {
+    expect(sheet).toContain(
+      '[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"]',
+    );
+    expect(sheet).toContain(
+      '[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"]',
+    );
+  });
+
+  it("routes the dock fades through the same edge vars", () => {
+    expect(sheet).toContain('--hk-scroll-fade-bottom: var(--hk-scroll-dock-fade, 2rem)');
+    expect(sheet).toContain('--hk-scroll-fade-top: var(--hk-scroll-dock-fade, 2rem)');
+  });
+});

package/src/components/HkScrollContainer.scss

@@ -39,18 +39,104 @@
   margin-inline: auto;
 }
 
-/* ── Optional edge fades (fade=true) ──────────────────────────────
-   Pure CSS driven by the sensed overflow state the component mirrors
-   onto the root (data-h-overflow). Only the sides with hidden
-   content fade. The fade size custom property is declared on the
-   root so consumers can override it from the container element. */
+/* ── Optional edge fades (fade=true / dock fades) ─────────────────
+   FOUR-EDGE composition (2026-10 revision): each edge owns a CSS var, and
+   the viewport's mask INTERSECTS a vertical and a horizontal gradient, so
+   the fade reaches zero on every side that hides content and the corners
+   fall off naturally in all four directions. The previous per-axis rules
+   overwrote one `mask-image` property, so a two-axis container only faded
+   one axis AND the band ended in a hard cut at the other axis's edges
+   (user report: the light effect is clipped at the two sides). Vertical
+   fades were missing entirely. Dock fades ride the same vars, which also
+   removes their old mask-override conflict. */
+.hk-scroll-container:is([data-fade="true"], [data-dock-fade]) > .hk-scroll-container-viewport {
+  --hk-scroll-fade-top: 0px;
+  --hk-scroll-fade-right: 0px;
+  --hk-scroll-fade-bottom: 0px;
+  --hk-scroll-fade-left: 0px;
+  -webkit-mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--hk-scroll-fade-top),
+      #000 calc(100% - var(--hk-scroll-fade-bottom)),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hk-scroll-fade-left),
+      #000 calc(100% - var(--hk-scroll-fade-right)),
+      transparent 100%
+    );
+  -webkit-mask-composite: source-in;
+  -webkit-mask-repeat: no-repeat;
+  mask-image:
+    linear-gradient(
+      to bottom,
+      transparent 0,
+      #000 var(--hk-scroll-fade-top),
+      #000 calc(100% - var(--hk-scroll-fade-bottom)),
+      transparent 100%
+    ),
+    linear-gradient(
+      to right,
+      transparent 0,
+      #000 var(--hk-scroll-fade-left),
+      #000 calc(100% - var(--hk-scroll-fade-right)),
+      transparent 100%
+    );
+  mask-composite: intersect;
+  mask-repeat: no-repeat;
+}
+
 .hk-scroll-container[data-fade="true"] {
   --hk-scroll-fade-size: var(--space-24);
 }
 
-.hk-scroll-container[data-fade="true"][data-h-overflow="end"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
+/* Vertical axis — the half the old implementation never had. */
+.hk-scroll-container[data-fade="true"][data-v-overflow="start"] {
+  --hk-scroll-fade-top: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-v-overflow="end"] {
+  --hk-scroll-fade-bottom: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-v-overflow="both"] {
+  --hk-scroll-fade-top: var(--hk-scroll-fade-size);
+  --hk-scroll-fade-bottom: var(--hk-scroll-fade-size);
+}
+
+/* Horizontal axis (LTR: inline start = left). */
+.hk-scroll-container[data-fade="true"][data-h-overflow="start"] {
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-h-overflow="end"] {
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
+}
+
+.hk-scroll-container[data-fade="true"][data-h-overflow="both"] {
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
+}
+
+/* RTL: the inline start edge is the right side, so the horizontal vars
+   swap instead of the mask (the mask itself is direction-neutral). */
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"] {
+  --hk-scroll-fade-left: 0px;
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
+}
+
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"] {
+  --hk-scroll-fade-right: 0px;
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+}
+
+[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="both"] {
+  --hk-scroll-fade-left: var(--hk-scroll-fade-size);
+  --hk-scroll-fade-right: var(--hk-scroll-fade-size);
 }
 
 /* ── Anchored docks (dockTop / dockBottom slots) ─────────────────
@@ -74,14 +160,12 @@
    instead of a hard clip against the dock's top edge. Content never
    sits under the dock, so this fades the viewport's last few pixels,
    not the dock itself. */
-.hk-scroll-container[data-dock-fade="bottom"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hk-scroll-dock-fade, 2rem)), transparent);
-  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--hk-scroll-dock-fade, 2rem)), transparent);
+.hk-scroll-container[data-dock-fade="bottom"] {
+  --hk-scroll-fade-bottom: var(--hk-scroll-dock-fade, 2rem);
 }
 
-.hk-scroll-container[data-dock-fade="top"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--hk-scroll-dock-fade, 2rem));
-  mask-image: linear-gradient(to bottom, transparent, #000 var(--hk-scroll-dock-fade, 2rem));
+.hk-scroll-container[data-dock-fade="top"] {
+  --hk-scroll-fade-top: var(--hk-scroll-dock-fade, 2rem);
 }
 
 /* ── Floating-dock tail clearance (dockTailClearance opt-in) ──────
@@ -135,39 +219,7 @@
 }
 
 
-.hk-scroll-container[data-fade="true"][data-h-overflow="start"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-}
-
-/* RTL: the horizontal scroll start/end edges swap sides, so the
- * directional fades flip (the "both" mask is end-symmetric — no flip). */
-[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="end"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to right, transparent 0, #000 var(--hk-scroll-fade-size));
-}
 
-[dir="rtl"] .hk-scroll-container[data-fade="true"][data-h-overflow="start"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
-  mask-image: linear-gradient(to left, transparent 0, #000 var(--hk-scroll-fade-size));
-}
-
-.hk-scroll-container[data-fade="true"][data-h-overflow="both"] > .hk-scroll-container-viewport {
-  -webkit-mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--hk-scroll-fade-size),
-    #000 calc(100% - var(--hk-scroll-fade-size)),
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent 0,
-    #000 var(--hk-scroll-fade-size),
-    #000 calc(100% - var(--hk-scroll-fade-size)),
-    transparent 100%
-  );
-}
 
 /* autoFollow content is bottom-anchored while it fits the viewport: the
    newest row hugs the bottom edge (a tail-following console, e.g. the

package/src/components/HkToast.scss

@@ -134,17 +134,21 @@
   to { transform: rotate(360deg); }
 }
 
-/* Inline action (e.g. Undo): a compact text pill in the toast chrome,
- *  between the body and the icon buttons. Sits in the same ghost-button
- *  family as copy/close, but reads as an affordance. */
+/* Inline action (e.g. Undo / open analysis): a GLASS PILL on the toast's
+ *  solid band. The old ghost outline sat flat on the accent fill — "a grey
+ *  outlined transparent button", user report 2026-10 — because it borrowed
+ *  the page-surface border tokens on a filled surface. A currentColor tint
+ *  follows every variant (white on the coloured bands, near-black on the
+ *  amber warning band) and reads as a real affordance without introducing
+ *  a second accent colour. */
 .hk-toast-action {
   flex: none;
   align-self: center;
   margin-inline-start: var(--space-4, 4px);
-  padding: var(--space-2, 2px) var(--space-8, 8px);
-  border: 1px solid rgb(var(--color-border, 100 100 100) / 30%);
-  border-radius: var(--radius-sm, 4px);
-  background: transparent;
+  padding: var(--space-4, 4px) var(--space-10, 10px);
+  border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
+  border-radius: var(--radius-full, 9999px);
+  background: color-mix(in srgb, currentColor 14%, transparent);
   color: inherit;
   font: inherit;
   font-size: var(--text-sm, 0.8125rem);
@@ -152,14 +156,18 @@
   line-height: 1.4;
   cursor: pointer;
   white-space: nowrap;
-  opacity: 0.92;
-  transition: opacity var(--duration-fast, 0.15s) ease,
+  transition:
+    background var(--duration-fast, 0.15s) ease,
     border-color var(--duration-fast, 0.15s) ease;
 }
 
 .hk-toast-action:hover {
-  opacity: 1;
-  border-color: rgb(var(--color-border, 100 100 100) / 55%);
+  background: color-mix(in srgb, currentColor 24%, transparent);
+  border-color: color-mix(in srgb, currentColor 55%, transparent);
+}
+
+.hk-toast-action:active {
+  background: color-mix(in srgb, currentColor 32%, transparent);
 }
 
 .hk-toast-action:focus-visible {