@celestia-island/hikari 0.55.25 → 0.55.27

package/package.json

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

package/src/theme/useTheme.test.ts

@@ -114,13 +114,15 @@ describe("useTheme lean cssvar injection", () => {
     });
   });
 
-  it("writes theme vars into a managed :root style block, never inline", () => {
+  it("writes theme vars into a managed html:root style block, never inline", () => {
     theme.initTheme();
     const styleEl = document.head.querySelector("style[data-hikari-theme-vars]");
     expect(styleEl).not.toBeNull();
     // Real browsers compute the static defaults, so the block holds only the
-    // true deltas; either way it is a :root block, not an inline attribute.
-    expect(styleEl!.textContent).toMatch(/^:root\{/);
+    // true deltas; either way it is an html:root block (specificity 0,1,1 —
+    // it must outrank every :root-level static seed regardless of document
+    // order), not an inline attribute.
+    expect(styleEl!.textContent).toMatch(/^html:root\{/);
     expect(styleEl!.textContent).toContain("--color-primary");
     // The html inline style attribute stays clean — no token vars on it.
     expect(document.documentElement.style.getPropertyValue("--color-primary")).toBe("");
@@ -133,9 +135,39 @@ describe("useTheme lean cssvar injection", () => {
     theme.useTheme().setTheme("nord");
     const blocks = document.head.querySelectorAll("style[data-hikari-theme-vars]");
     expect(blocks).toHaveLength(1);
-    expect(blocks[0].textContent).toMatch(/^:root\{/);
+    expect(blocks[0].textContent).toMatch(/^html:root\{/);
     expect(blocks[0].textContent).not.toBe(before);
   });
+
+  it("a :root seed injected AFTER the managed block cannot un-theme the page", () => {
+    // The 2026-09-18 dev.cw incident: every hikari component sheet @uses
+    // tokens.scss, so a lazily-loaded route chunk re-emits the static seed
+    // as a `:root` rule appended to <head> after this block — same
+    // specificity, later in the cascade, and the brand palette lost to it
+    // on the login page. The managed block therefore carries html:root
+    // (0,1,1), which outranks any :root-level emission (0,1,0) regardless
+    // of document order.
+    theme.initTheme();
+    const styleEl = document.head.querySelector("style[data-hikari-theme-vars]")!;
+    expect(styleEl.textContent).toContain("--color-primary");
+
+    const computed = () =>
+      getComputedStyle(document.documentElement).getPropertyValue("--color-primary").trim();
+    const themed = computed();
+    expect(themed).not.toBe("");
+
+    // Simulate the route-chunk seed: a :root rule with the static default,
+    // appended LAST (exactly what a lazy chunk's <link> does).
+    const seed = document.createElement("style");
+    seed.textContent = ":root{--color-primary:122 162 247;--color-background:214 236 240;--color-surface:240 244 248;}";
+    document.head.appendChild(seed);
+    expect(computed()).toBe(themed);
+
+    // Re-applying the theme must keep winning, too (no one-shot luck).
+    theme.useTheme().setTheme("nord");
+    expect(computed()).not.toBe("122 162 247");
+    seed.remove();
+  });
 });
 
 describe("useTheme preset/custom shadowing", () => {

package/src/theme/useTheme.ts

@@ -149,7 +149,7 @@ const THEME_TRANSITION_DURATION = 300;
 let transitionTimer: CronHandle | null = null;
 
 /**
- * Theme vars live in ONE managed stylesheet block (`:root` overrides)
+ * Theme vars live in ONE managed stylesheet block (`html:root` overrides)
  * instead of a hundred inline declarations on `<html style="...">`.
  *  - Inline style attributes bloat the DOM, show up as giant devtools
  *    noise on the root element, defeat caching of the token set and make
@@ -162,8 +162,20 @@ let transitionTimer: CronHandle | null = null;
  *    so a token whose value already resolves identically needs no
  *    override at all — a default-ish theme injects a handful of vars
  *    instead of ~80.
+ *
+ * The selector is `html:root`, not plain `:root`, on purpose: the static
+ * seed is `:root`-level, and lazy route chunks re-emit it (every component
+ * sheet `@use`s tokens.scss) into `<link>`s appended to `<head>` AFTER
+ * this block — a same-specificity `:root` there would silently beat the
+ * runtime palette and un-theme every late-loaded route (2026-09-18,
+ * dev.cw login: the HkOtpInput chunk flattened the brand palette back to
+ * the static seed). `html:root` (0,1,1) outranks every `:root`-level
+ * declaration (0,1,0) regardless of document order, while staying below
+ * inline styles and equal to `html[data-theme]` decor rules (order
+ * decides between those two, so a later decor can still override).
  */
 const THEME_VARS_STYLE_ATTR = "data-hikari-theme-vars";
+const THEME_VARS_SELECTOR = "html:root";
 
 function normalizeVarValue(value: string): string {
   return value.replace(/\s+/g, " ").trim();
@@ -214,7 +226,7 @@ function injectThemeVars(el: HTMLElement, vars: Record<string, string>): void {
 
   const deltas = pickThemeVarDeltas(vars, baseline);
   styleEl.textContent = Object.keys(deltas).length > 0
-    ? `:root{${Object.entries(deltas).map(([key, value]) => `${key}:${value}`).join(";")}}`
+    ? `${THEME_VARS_SELECTOR}{${Object.entries(deltas).map(([key, value]) => `${key}:${value}`).join(";")}}`
     : "";
 }