@celestia-island/hikari 0.55.328 → 0.55.330

package/package.json

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

package/src/components/HkBreadcrumb.scss

@@ -84,7 +84,7 @@
   // Padding
   padding: var(--space-4) var(--space-8);
   margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-8));
-  border-radius: vars.$hikari-radius-fine-sm;
+  border-radius: var(--radius-sm, 4px);
 
   // Display
   display: inline-flex;
@@ -216,7 +216,7 @@
     z-index: var(--hk-z-header);
 
     // Appearance
-    border-radius: vars.$hikari-radius-fine-md;
+    border-radius: var(--radius-lg, 12px);
     border: 1px solid var(--hi-color-border);
     background: var(--hi-surface);
     @include backdrop-filter(blur(4px));
@@ -321,7 +321,7 @@
   .hk-breadcrumb-item {
     background: var(--hi-card-bg);
     padding: 0.375rem 0.75rem;
-    border-radius: vars.$hikari-radius-fine-sm;
+    border-radius: var(--radius-sm, 4px);
 
     &:not(:last-child):hover {
       background: var(--hi-primary);

package/src/components/HkTable.sections.test.tsx

@@ -270,6 +270,31 @@ describe("HkTable sections", () => {
     expect(empty!.getAttribute("colspan")).toBe(String(COLS.length));
   });
 
+  it("names an empty-title header cell via headerLabel without rendering text", async () => {
+    // Utility columns (row actions) intentionally carry `title: ""` —
+    // but an empty `<th>` is an UNNAMED one for assistive tech. The
+    // headerLabel contract: aria-label published on the th, visible
+    // header stays empty, and columns without the label render no
+    // aria-label at all (no behavior change for existing tables).
+    const columns = [
+      { key: "name", title: "Name" },
+      { key: "actions", title: "", headerLabel: "Actions", align: "right" as const },
+    ];
+    const sections: HkTableSection[] = [
+      { key: "panel-a", label: "Panel A", rows: [{ name: "alpha", actions: "…" }] },
+    ];
+    const c = mount(h(HTable, { columns, sections }));
+
+    const heads = Array.from(c.querySelectorAll("thead th"));
+    const named = heads.find((th) => th.getAttribute("aria-label") === "Actions");
+    expect(named, "the actions th carries the accessible name").toBeTruthy();
+    const plain = heads.find((th) => th.getAttribute("aria-label") === null) as HTMLElement;
+    expect(plain.textContent).toContain("Name");
+    // visible header of the named column stays EMPTY — the label is
+    // assistive-only
+    expect(named!.textContent!.trim()).toBe("");
+  });
+
   it("sorts inside each section and keeps the section order", async () => {
     const columns = [{ key: "name", title: "Name", sortable: true }];
     const sections: HkTableSection[] = [

package/src/components/HkTable.tsx

@@ -18,6 +18,13 @@ import "./HkTable.scss";
 interface Column {
   key: string;
   title: string;
+  /** Accessible name for the header cell, WITHOUT visible text. Utility
+   *  columns (row actions, ⋯ menus) intentionally render an empty
+   *  `title` — but an empty `<th>` is also an unnamed one for screen
+   *  readers. Set `headerLabel` to publish `aria-label` on that `<th>`
+   *  while the visible header stays empty; it never renders text and
+   *  never participates in sorting. */
+  headerLabel?: string;
   width?: string;
   sortable?: boolean;
   align?: "left" | "center" | "right";
@@ -1161,6 +1168,7 @@ export default defineComponent({
                 return (
                   <th
                     key={col.key}
+                    aria-label={col.headerLabel}
                     class={[
                       "hk-table-header-cell",
                       col.align ? `hk-text-${col.align}` : "",

package/src/components/HkTerminal.scss

@@ -1,15 +1,23 @@
 // Use theme variables with namespace to avoid conflicts
 @use "./hikari-vars" as vars;
 
+/* The terminal is a solid dark canvas by convention (like a code block):
+   the surface IS its own frame — no border, one radius tier. The canvas
+   stays dark in every app theme (a light-mode terminal reads as a web
+   pane, not a terminal); hosts may retune it via --color-terminal-bg /
+   --color-terminal-fg without touching the component. Nested hosts must
+   NOT wrap it in their own framed box — that stacking is what produced
+   the round-outer/square-inner double frame reported 2026-11-09. */
 .hk-terminal {
   position: relative;
   display: block;
   width: 100%;
   height: 100%;
   min-height: 8rem;
-  padding: 0.35rem 0.45rem;
-  background: rgb(var(--color-background, 20 22 26));
-  border: 1px solid rgb(var(--color-border, 128 128 128) / 15%);
+  padding: 0.6rem 0.75rem;
+  /* Terminal channels seed as r g b TRIPLETS (a hex seed passes the TSX
+     layer but invalidates rgb(var()) here — computed value drops out). */
+  background: rgb(var(--color-terminal-bg, 20 22 26));
   border-radius: vars.$hikari-radius-fine-md;
   box-sizing: border-box;
   overflow: hidden;

package/src/components/HkTerminal.test.tsx

@@ -159,6 +159,46 @@ afterEach(() => {
 });
 
 describe("HkTerminal", () => {
+  it("derives the canvas from the TERMINAL channels, not the app theme", async () => {
+    // The canvas is a terminal and stays dark in every app theme: the
+    // 2026-11-09 double-frame report was a light theme-background panel
+    // inside chest's black rounded host. The palette must read
+    // --color-terminal-bg/-fg (fixed dark defaults) and must NOT read
+    // --color-background/--color-text.
+    const theme = __testables.deriveXtermTheme(document.createElement("div")) as Record<
+      string,
+      string
+    >;
+    expect(theme.background).toBe("#14161a");
+    expect(theme.foreground).toBe("#d6dde6");
+    expect(theme.cursorAccent).toBe("#14161a");
+    expect(theme.cursor).toBe("#7aa2f7");
+    expect(theme.selectionBackground).toBe("#3b435688");
+    // Host-side retune wins over the defaults (happy-dom's computed
+    // style doesn't resolve inline custom properties, so the retune arm
+    // is exercised through a stubbed window computed-style).
+    const fakeHost = { tag: "stub" } as unknown as HTMLElement;
+    const resolver = (el: Element) =>
+      el === fakeHost
+        ? ({
+            getPropertyValue: (name: string) =>
+              name === "--color-terminal-bg"
+                ? "10 12 16"
+                : name === "--color-terminal-fg"
+                  ? "#c0c8d4"
+                  : name === "--color-terminal-selection"
+                    ? "#2e3a4e"
+                    : "",
+          } as CSSStyleDeclaration)
+        : window.getComputedStyle(el);
+    const spy = vi.spyOn(window, "getComputedStyle").mockImplementation(resolver);
+    const tuned = __testables.deriveXtermTheme(fakeHost) as Record<string, string>;
+    spy.mockRestore();
+    expect(tuned.background).toBe("#0a0c10");
+    expect(tuned.foreground).toBe("#c0c8d4");
+    expect(tuned.selectionBackground).toBe("#2e3a4e88");
+  });
+
   it("passes the typography props into the Terminal options", async () => {
     mountTerminal({ fontSize: 15, fontFamily: "MyMono", scrollback: 500, cursorBlink: false });
     await nextTick();

package/src/components/HkTerminal.tsx

@@ -47,10 +47,16 @@ import "./HkTerminal.scss";
  * - `write(data: string | Uint8Array)` — binary-safe feed.
  * - `writeln`, `clear`, `reset`, `fit`, `focus`, `dimensions`.
  *
- * Theming: the xterm theme is derived from the hikari color channels
- * (`--color-background` / `--color-text` / `--color-primary` / …) at
- * mount, and re-derived when the document element's class or style
- * changes (the light/dark switch mechanism consumers use).
+ * Theming: the canvas is a terminal and stays DARK in every app theme —
+ * background/foreground default to the fixed terminal palette and may be
+ * retuned per host via `--color-terminal-bg` / `--color-terminal-fg` /
+ * `--color-terminal-selection`; the cursor accent still derives from the
+ * hikari channel (`--color-primary`). The palette re-derives
+ * when the document element's class or style changes (the light/dark
+ * switch mechanism consumers use). Surface grammar: the component owns
+ * border+radius+background (borderless dark canvas, one radius tier) —
+ * consumers size the host box and must not wrap it in their own framed
+ * surface.
  */
 
 /** Resolve an `r g b` triplet channel (with fallback) to `#rrggbb`. */
@@ -72,11 +78,18 @@ function channelToHex(host: HTMLElement, name: string, fallback: string): string
 
 function deriveXtermTheme(host: HTMLElement): ITheme {
   return {
-    background: channelToHex(host, "--color-background", "#14161a"),
-    foreground: channelToHex(host, "--color-text", "#e6e6e6"),
+    // The canvas is a terminal: fixed dark defaults, NOT the app theme's
+    // background/text (those flip with light/dark and would render a
+    // light terminal). Selection too — a theme-coupled pale wash on the
+    // dark canvas collapses selected-text contrast to ~3:1 in light
+    // themes (R2 of the 2026-11-09 chain). Hosts retune via
+    // --color-terminal-bg/-fg/-selection.
+    background: channelToHex(host, "--color-terminal-bg", "#14161a"),
+    foreground: channelToHex(host, "--color-terminal-fg", "#d6dde6"),
     cursor: channelToHex(host, "--color-primary", "#7aa2f7"),
-    cursorAccent: channelToHex(host, "--color-background", "#14161a"),
-    selectionBackground: channelToHex(host, "--color-selected-bg", "#3b4356") + "88",
+    cursorAccent: channelToHex(host, "--color-terminal-bg", "#14161a"),
+    selectionBackground:
+      channelToHex(host, "--color-terminal-selection", "#3b4356") + "88",
   };
 }
 
@@ -238,4 +251,4 @@ export default defineComponent({
 });
 
 /** Test seam: pure helpers (no DOM dependency beyond getComputedStyle). */
-export const __testables = { channelToHex };
+export const __testables = { channelToHex, deriveXtermTheme };

package/src/components/_hikari-vars.scss

@@ -4,3 +4,4 @@ $hikari-font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans
 $hikari-font-size-sm: 0.875rem;
 $hikari-radius-fine-sm: 4px;
 $hikari-radius-fine-md: 6px;
+$hikari-radius-fine-lg: 8px;

package/src/styles/tokenInventory.test.ts

@@ -171,6 +171,38 @@ describe("theme token inventory", () => {
     expect(unexpected, "new multi-defined scale tokens").toEqual([]);
   });
 
+  it("scale seed defines the full radius ladder with canonical values", () => {
+    // Existence + value pin for the runtime radius scale. Before the
+    // 2026-11 radius wave, deleting a `--radius-*` definition stayed
+    // green everywhere (no read face checked for presence); this test is
+    // that read face. Values mirror hikari scale.scss — the same ladder
+    // chest mirrors into its own `:root`, so a value change here is a
+    // cross-repo contract change and must ride a dedicated wave.
+    const defs = harvestDefinitions(seedFiles);
+    const ladder: Array<[string, string]> = [
+      ["--radius-xs", "2px"],
+      ["--radius-sm", "4px"],
+      ["--radius-md", "8px"],
+      ["--radius-lg", "12px"],
+      ["--radius-xl", "16px"],
+      ["--radius-full", "9999px"],
+    ];
+    for (const [name, value] of ladder) {
+      const sites = defs.get(name);
+      expect(sites, `${name} missing from theme/scale.scss`).toBeDefined();
+      // Every site must carry the canonical value — not just the first.
+      // A same-file duplicate would slip past the multi-file guard above
+      // (files.size stays 1) and win the CSS cascade as the LAST
+      // definition; iterating all sites closes that bypass.
+      for (const site of sites!) {
+        expect(
+          site.value,
+          `${name} non-canonical site in ${site.file}`,
+        ).toBe(value);
+      }
+    }
+  });
+
   it("component --hi-color-* fallbacks stay on the canonical literals", () => {
     // The standalone-render contract: when a host loads nothing, a
     // component renders through these literals. They are DERIVED FROM THE