@celestia-island/hikari 0.55.189 → 0.55.190

package/package.json

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

package/src/components/HkAffixPicker.scss

@@ -196,8 +196,8 @@
 
   &:hover,
   &:focus-visible {
-    color: rgb(var(--color-danger, 240 70 80));
-    background: rgb(var(--color-danger, 240 70 80) / 12%);
+    color: rgb(var(--color-error, 247 118 142));
+    background: rgb(var(--color-error, 247 118 142) / 12%);
   }
 }
 

package/src/components/HkAuthSubmitButton.scss

@@ -8,5 +8,5 @@
 .s-auth-submit-error {
   margin: 0;
   font-size: var(--text-sm, 0.8125rem);
-  color: rgb(var(--color-error, 240 70 80));
+  color: rgb(var(--color-error, 247 118 142));
 }

package/src/components/HkAvatar.scss

@@ -7,8 +7,8 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  background-color: var(--hi-color-gray-200, #E5E7EB);
-  color: var(--hi-color-gray-600, #4B5563);
+  background-color: rgb(var(--color-muted, 108 108 108) / 15%);
+  color: rgb(var(--color-text-secondary, 102 102 102));
   transition: all 0.2s ease;
 
   img {

package/src/components/HkBlockingToast.scss

@@ -80,17 +80,21 @@
 // dark-on-amber warning text for contrast).
 .hk-blocking-toast-info {
   background: var(--hi-color-info, #6abed6);
-  color: #fff;
+  /* On-solid content: ride the canonical slot (HkToast family), keep the
+   * #fff fallback so themeless hosts render as before. */
+  color: var(--hi-color-text-on-solid, #fff);
 }
 
 .hk-blocking-toast-warning {
   background: var(--hi-color-warning, #eed677);
+  /* Deliberate DARK-on-amber: the warning band is light by design, and
+   * the on-solid slot is white — a white glyph here would be unreadable. */
   color: #1c1c1e;
 }
 
 .hk-blocking-toast-danger {
   background: var(--hi-color-danger, #f85149);
-  color: #fff;
+  color: var(--hi-color-text-on-danger, #fff);
 }
 
 // ── Actions on a tinted surface ─────────────────────────────────────

package/src/components/HkConfirmDialog.scss

@@ -17,7 +17,7 @@
 .hk-confirm-dialog-message {
   margin: 0;
   color: color-mix(in srgb, var(--hi-color-text-secondary) 85%, transparent);
-  font-size: var(--hi-text-sm, 0.875rem);
+  font-size: var(--text-sm, 0.8125rem);
   line-height: 1.6;
   overflow-wrap: anywhere;
 }

package/src/components/HkCornerBadge.scss

@@ -73,7 +73,7 @@
   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-size: var(--text-2xs, 0.625rem);
   font-weight: 700;
   line-height: 1;
   font-variant-numeric: tabular-nums;

package/src/components/HkDockBar.scss

@@ -117,8 +117,14 @@
   border: 1px solid var(--border-subtle);
   border-radius: var(--radius-md);
   /* Reverse soft light — dark mode: white halo; light mode: soft black
-   * shadow. Strength scales with --glow-scale (Style → Shadow). */
-  box-shadow: var(--glow-dock);
+   * shadow. Strength scales with --glow-scale (Style → Shadow). The
+   * default derives the halo from the theme's own ink channel, which IS
+   * mode-reversed — before 2026-10-19 the bare var(--glow-dock) had no
+   * publisher and no fallback, so the dock halo silently never rendered. */
+  box-shadow: var(
+    --glow-dock,
+    0 8px 32px rgb(var(--color-text, 30 30 30) / calc(8% * var(--glow-scale, 1)))
+  );
 }
 
 /* Vertical side docks (west / east edges) stack along the viewport's

package/src/components/HkDrawer.motion.test.ts

@@ -0,0 +1,111 @@
+import { readFileSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import * as sass from "sass";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Side-drawer motion contract (2026-10-19 phone recording).
+ *
+ * The left/right drawer used to share the scrim's opacity fade: at
+ * halfway through the close the panel was still on screen but its right
+ * half was transparent, so the page behind showed through and the right
+ * rounded corners dissolved — it read as a width shrink. Side drawers
+ * must slide as an opaque surface (transform only); the scrim keeps its
+ * own fade, and top/bottom sheets keep the fade.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const src = readFileSync(join(here, "HkDrawer.scss"), "utf-8");
+
+// The side-drawer overrides sit after the generic blocks and before the
+// reduced-motion block (which also lists the active classes with
+// `transition: none`, so the full-file last occurrence would find that).
+const sideStart = src.indexOf("/* Side drawers slide as an OPAQUE surface.");
+const reduceStart = src.indexOf("@media (prefers-reduced-motion: reduce)");
+const side = src.slice(sideStart, reduceStart);
+
+/** Body of the LAST rule for a selector — the side overrides are declared
+ *  after the generic four-direction blocks. */
+function lastRule(selector: string, from = src): string {
+  const at = from.lastIndexOf(selector);
+  expect(at, `${selector} exists`).toBeGreaterThanOrEqual(0);
+  const open = from.indexOf("{", at);
+  const close = from.indexOf("}", open);
+  return from.slice(open + 1, close);
+}
+
+describe("HkDrawer side motion (opaque slide)", () => {
+  it("does not fade the left/right panel out", () => {
+    for (const sel of [
+      ".hk-drawer-left-enter-active",
+      ".hk-drawer-left-leave-active",
+      ".hk-drawer-right-enter-active",
+      ".hk-drawer-right-leave-active",
+    ]) {
+      const rule = lastRule(sel, side);
+      expect(rule, sel).toContain("transform");
+      expect(rule, sel).not.toContain("opacity");
+    }
+    for (const sel of [
+      ".hk-drawer-left-enter-from",
+      ".hk-drawer-left-leave-to",
+      ".hk-drawer-right-enter-from",
+      ".hk-drawer-right-leave-to",
+    ]) {
+      expect(lastRule(sel, side), sel).toContain("opacity: 1");
+    }
+  });
+
+  it("keeps the opaque side overrides after the generic fade rules (compiled order)", () => {
+    // The source slices above are anchored on a comment marker; this
+    // compiled assertion pins the cascade itself: the side override must
+    // come AFTER the generic four-direction block in the emitted CSS.
+    const fullCss = sass.compile(resolve(here, "HkDrawer.scss")).css;
+    // The reduced-motion block repeats the active selectors with
+    // `transition: none`; exclude it so the last occurrence is the side
+    // override under test.
+    const reduceAt = fullCss.lastIndexOf(
+      "@media (prefers-reduced-motion: reduce)",
+    );
+    const css = fullCss.slice(0, reduceAt > 0 ? reduceAt : fullCss.length);
+    const genericAt = css.indexOf(".hk-drawer-left-enter-active");
+    const overrideAt = css.lastIndexOf(".hk-drawer-left-enter-active");
+    expect(overrideAt).toBeGreaterThan(genericAt);
+    const overrideBody = css.slice(overrideAt, css.indexOf("}", overrideAt));
+    expect(overrideBody).toContain("transform");
+    expect(overrideBody).not.toContain("opacity");
+
+    const genericFromAt = css.indexOf(".hk-drawer-left-enter-from");
+    const sideFromAt = css.lastIndexOf(".hk-drawer-left-enter-from");
+    expect(sideFromAt).toBeGreaterThan(genericFromAt);
+    const sideFromBody = css.slice(sideFromAt, css.indexOf("}", sideFromAt));
+    expect(sideFromBody).toContain("opacity: 1");
+  });
+
+  it("keeps the sheet active opacity transition", () => {
+    // R3 mutation: deleting the generic active opacity transition kept the
+    // suite green. Guard that top/bottom sheets still animate opacity.
+    const generic = src.slice(0, sideStart);
+    expect(lastRule(".hk-drawer-top-enter-active", generic)).toContain("opacity");
+    expect(lastRule(".hk-drawer-bottom-leave-active", generic)).toContain(
+      "opacity",
+    );
+  });
+
+  it("keeps the off-screen side transforms", () => {
+    // The side override only resets opacity to 1; the generic from/to
+    // blocks must keep the translateX(±100%) that carries the panel in
+    // and out of the screen.
+    const left = src.slice(src.indexOf(".hk-drawer-left-enter-from"));
+    expect(left.slice(0, left.indexOf("}") + 1)).toContain("translateX(-100%)");
+    const right = src.slice(src.indexOf(".hk-drawer-right-enter-from"));
+    expect(right.slice(0, right.indexOf("}") + 1)).toContain("translateX(100%)");
+  });
+
+  it("keeps the fade for top/bottom sheets", () => {
+    expect(lastRule(".hk-drawer-top-enter-from")).toContain("opacity: 0");
+    expect(lastRule(".hk-drawer-bottom-enter-from")).toContain("opacity: 0");
+  });
+});

package/src/components/HkDrawer.scss

@@ -123,6 +123,30 @@
   transform: translateY(100%);
 }
 
+/* Side drawers slide as an OPAQUE surface. The panel used to share the
+ * scrim's fade (opacity: 0 in the enter/leave states); on a phone the
+ * drawer was still partly on screen when its right half went transparent
+ * — the page behind showed through and the right rounded corners
+ * dissolved, which reads as a width shrink (screen recording
+ * 2026-10-19). The scrim keeps its own fade; the panel only translates.
+ * Top/bottom sheets keep the fade above. */
+.hk-drawer-left-enter-active,
+.hk-drawer-right-enter-active {
+  transition: transform var(--duration-normal, 0.3s) cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.hk-drawer-left-leave-active,
+.hk-drawer-right-leave-active {
+  transition: transform var(--duration-normal, 0.3s) cubic-bezier(0.4, 0, 1, 1);
+}
+
+.hk-drawer-left-enter-from,
+.hk-drawer-left-leave-to,
+.hk-drawer-right-enter-from,
+.hk-drawer-right-leave-to {
+  opacity: 1;
+}
+
 .hk-drawer-header {
   display: flex;
   align-items: center;

package/src/components/HkIconButtonGroup.scss

@@ -104,7 +104,7 @@
         (var(--hk-icon-group-item-size) + var(--hk-icon-group-slider-gap))
     )
   );
-  transition: transform var(--duration, 0.18s) ease;
+  transition: transform var(--duration-short, 0.15s) ease;
   pointer-events: none;
 }
 

package/src/components/HkMenu.scss

@@ -132,7 +132,7 @@
   padding: 0 var(--space-4, 4px);
   border-radius: var(--radius-full, 9999px);
   background: rgb(var(--color-error, 247 118 142));
-  color: #fff;
+  color: var(--hi-color-text-on-danger, #fff);
   font-size: var(--text-2xs, 10px);
   font-weight: 700;
   line-height: 1;

package/src/components/HkMessageBox.scss

@@ -20,7 +20,7 @@
 
   [data-tone="warning"] &,
   [data-tone="danger"] & {
-    color: rgb(var(--color-danger, 240 70 80));
+    color: rgb(var(--color-error, 247 118 142));
   }
 }
 

package/src/components/HkToast.scss

@@ -115,8 +115,10 @@
 }
 
 .hk-toast-loading-spinner {
-  border: 2px solid rgba(255, 255, 255, 0.3);
-  border-top-color: #fff;
+  /* The spinner rides the toast's SOLID band, so its glyph is on-solid
+   * content: ride the on-solid slot (white by default, theme-following) */
+  border: 2px solid rgb(var(--color-on-solid-text, 255 255 255) / 30%);
+  border-top-color: rgb(var(--color-on-solid-text, 255 255 255));
   border-radius: 50%;
   animation: hk-toast-spin 0.7s linear infinite;
   box-sizing: border-box;

package/src/components/_menu-item.scss

@@ -168,14 +168,14 @@
   }
 
   &[data-danger] {
-    color: rgb(var(--color-danger, 240 70 80) / 90%);
+    color: rgb(var(--color-error, 247 118 142) / 90%);
 
     /* Same checked-row guard as the base hover above: a checked danger
      * row keeps its checked face instead of flashing the hover wash. */
     &:hover:not(:disabled):not([data-disabled]):not([data-active]):not([data-checked]) {
-      background: rgb(var(--color-danger, 240 70 80) / 10%);
-      border-color: rgb(var(--color-danger, 240 70 80) / 25%);
-      color: rgb(var(--color-danger, 240 70 80));
+      background: rgb(var(--color-error, 247 118 142) / 10%);
+      border-color: rgb(var(--color-error, 247 118 142) / 25%);
+      color: rgb(var(--color-error, 247 118 142));
     }
   }
 }

package/src/styles/admin-tokens.scss

@@ -1179,7 +1179,7 @@
 
 /* ── Arona app utility classes ── */
 .a-text-primary {
-  color: var(--color-text-primary);
+  color: var(--color-text);
 }
 
 .a-text-secondary {
@@ -1207,11 +1207,11 @@
 }
 
 .a-bg-secondary {
-  background: var(--color-bg-secondary, #18181b);
+  background: rgb(var(--color-background, 214 236 240));
 }
 
 .a-bg-tertiary {
-  background: var(--color-bg-tertiary, #27272a);
+  background: rgb(var(--color-surface, 240 244 248));
 }
 
 .a-latency-text {

package/src/styles/channelFallbacks.test.ts

@@ -33,18 +33,20 @@ import { describe, expect, it } from "vitest";
  * is still the regression this guard exists to catch.
  *
  * Slots with no seed are listed in UNSEEDED rather than skipped silently:
- * `--color-bg-secondary` / `--color-bg-tertiary` are retired spellings
- * (their `#18181b` / `#27272a` fallbacks always win) and `--color-danger` is
- * defined nowhere, so there is no seed value to compare against — recorded
- * debt, not a passing check.
+ * The retired spellings that used to live in UNSEEDED —
+ * `--color-bg-secondary` / `--color-bg-tertiary` / `--color-danger` — were
+ * paid on 2026-10-19 (their last usages re-pointed to the seeded channels;
+ * see ghostChannels.contract.test.ts, which now forbids them outright).
  */
 
 const stylesDir = resolve(dirname(fileURLToPath(import.meta.url)));
 const packageDir = resolve(stylesDir, "..", "..");
 const legacyDir = resolve(packageDir, "..", "theme", "styles");
 
-/** Slots this guard cannot hold to the seed, with the reason above. */
-const UNSEEDED = ["--color-bg-secondary", "--color-bg-tertiary", "--color-danger"];
+/** Slots this guard cannot hold to the seed. The 2026-10-19 re-pointing
+ *  paid the debt this list used to record; it stays as an empty-seeded
+ *  invariant — a NEW unseeded slot must be justified here, not smuggled in. */
+const UNSEEDED: string[] = [];
 
 function read(path: string): string {
   return readFileSync(path, "utf8");

package/src/styles/ghostChannels.contract.test.ts

@@ -0,0 +1,138 @@
+/**
+ * Retired color spellings — source contract (2026-10-19 color audit).
+ *
+ * The audit swept every var() reference across the shipped sheets and the
+ * components crate against the two real emitters (vue's tokensToCSSVars
+ * channels + the Rust css.rs alias emissions) and found a family of ghost
+ * spellings: names that LOOK like theme tokens, were never emitted by
+ * anything, and therefore always resolved to their (often one-mode-biased)
+ * literal fallbacks — or, with no fallback, silently killed the face
+ * (hover washes → transparent, glows → none). Each entry below was
+ * re-pointed to its canonical channel in the same change that added this
+ * guard; this file exists so none of them can quietly come back.
+ *
+ * Scope: shipped sheets and crate style strings only (tests, demos and
+ * comments are stripped). Not a general resolver — a name lands here only
+ * when it is permanently retired, never to be emitted; names that ARE
+ * emitted are guarded by their own contracts (see
+ * theme::css::interaction_alias_tests in the crate).
+ */
+import { readFileSync, readdirSync, statSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import { describe, expect, it } from "vitest";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const vueDir = resolve(here, "..", "..");
+const repoDir = resolve(vueDir, "..", "..");
+const crateSrc = join(repoDir, "packages", "components", "src");
+const themeStyles = join(repoDir, "packages", "theme", "styles");
+
+/** Permanently retired spellings — a var() reference to any of these is a
+ *  regression. (Names that are merely host-tunable knobs live elsewhere;
+ *  this list is only for spellings the emitters must never grow.) */
+const RETIRED = [
+  // wrong channel: the danger channel is --color-error (seed 247 118 142);
+  // --color-danger was emitted by nothing and its 240 70 80 fallback was a
+  // second, drifting palette decision (the 2026-09-16 bug class again).
+  "--color-danger",
+  // retired spellings: the audit's admin-surface backgrounds ride
+  // --color-background / --color-surface now.
+  "--color-bg-secondary",
+  "--color-bg-tertiary",
+  // the vue-channel namespace has no --color-text-primary slot (the primary
+  // ink channel is --color-text); the admin .a-text-primary utility rode
+  // this phantom spelling with no fallback and inherited its parent ink.
+  "--color-text-primary",
+  // the alias family spells the primary ink slot --hi-color-text-primary;
+  // plain --hi-color-text never existed, and its #333 fallback was unreadable
+  // on dark surfaces (the exact bug class of the 2026-10-18 breadcrumb fix).
+  "--hi-color-text",
+  // the crate emits --hi-border-light; the --hi-color-border-light spelling
+  // was a ghost whose #f3f4f6 fallback was light-biased.
+  "--hi-color-border-light",
+  // spelling typo that was never emitted anywhere; the canonical scale token
+  // is --text-sm.
+  "--hi-text-sm",
+  // invented family prefix nothing emits; the values were already inline
+  // (unwrapped to the same literals).
+  "--hikari-duration-fast",
+  "--hikari-duration-normal",
+  "--hikari-ease-smooth",
+];
+
+function stripComments(source: string): string {
+  return source.replace(/\/\*[\s\S]*?\*\//g, " ").replace(/(^|[^:])\/\/[^\n]*/g, "$1");
+}
+
+/** Boundary-aware retired-spelling probe: `var(--name` NOT followed by
+ *  another name character, so --hi-color-text does not collide with the
+ *  legitimate --hi-color-text-primary/-secondary emissions. */
+function referencesRetired(source: string, name: string): boolean {
+  const re = new RegExp(`var\\(\\s*${name}(?![a-zA-Z-])`);
+  return re.test(source);
+}
+
+function* sheetsUnder(dir: string): Generator<string> {
+  for (const entry of readdirSync(dir)) {
+    const p = join(dir, entry);
+    if (statSync(p).isDirectory()) {
+      if (entry === "node_modules" || entry === "target" || entry.includes(".test.")) continue;
+      yield* sheetsUnder(p);
+    } else if (entry.endsWith(".scss") || entry.endsWith(".css")) {
+      yield p;
+    } else if (entry.endsWith(".rs") && !entry.endsWith(".test.rs")) {
+      yield p;
+    }
+  }
+}
+
+describe("retired color spellings", () => {
+  it("never appears in a shipped vue sheet", () => {
+    for (const file of sheetsUnder(join(vueDir, "src", "styles"))) {
+      const text = stripComments(readFileSync(file, "utf8"));
+      for (const name of RETIRED) {
+        expect(
+          referencesRetired(text, name),
+          `${file.replace(vueDir, "packages/vue")} references retired spelling ${name}`,
+        ).toBe(false);
+      }
+    }
+  });
+
+  it("never appears in a shipped component scss", () => {
+    for (const file of sheetsUnder(join(vueDir, "src", "components"))) {
+      const text = stripComments(readFileSync(file, "utf8"));
+      for (const name of RETIRED) {
+        expect(
+          referencesRetired(text, name),
+          `${file.replace(vueDir, "packages/vue")} references retired spelling ${name}`,
+        ).toBe(false);
+      }
+    }
+  });
+
+  it("never appears in the components crate styles or rs style strings", () => {
+    for (const root of [crateSrc, themeStyles]) {
+      for (const file of sheetsUnder(root)) {
+        const text = stripComments(readFileSync(file, "utf8"));
+        for (const name of RETIRED) {
+          expect(
+            referencesRetired(text, name),
+            `${file.replace(repoDir, "packages")} references retired spelling ${name}`,
+          ).toBe(false);
+        }
+      }
+    }
+  });
+
+  it("keeps its own denylist honest (positive control)", () => {
+    // The sweep above must be able to see a violation: feed it a synthetic
+    // line carrying a retired spelling and assert the detector matches.
+    const probe = "color: var(--color-danger, 240 70 80);";
+    expect(referencesRetired(probe, "--color-danger")).toBe(true);
+    // and the boundary holds: a legit longer name must NOT trip the probe
+    expect(referencesRetired("color: var(--color-dangerous);", "--color-danger")).toBe(false);
+  });
+});