@celestia-island/hikari 0.55.300 → 0.55.301

package/package.json

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

package/src/components/HkIconButton.test.tsx

@@ -122,6 +122,36 @@ describe("HkIconButton", () => {
   });
 });
 
+
+describe("HkIconButton button semantics", () => {
+  it("renders type=button so a form never treats the chrome as a submitter", () => {
+    const c = mountComp(() => h(HkIconButton, { "aria-label": "probe" }));
+    const btn = c.querySelector<HTMLButtonElement>("button")!;
+    expect(btn.getAttribute("type")).toBe("button");
+  });
+
+  it("never overwrites an explicit type", () => {
+    for (const explicit of ["submit", "reset"] as const) {
+      const c = mountComp(() => h(HkIconButton, { "aria-label": "probe", type: explicit } as never));
+      expect(c.querySelector<HTMLButtonElement>("button")!.getAttribute("type")).toBe(explicit);
+    }
+  });
+
+  it("keeps the default when the attribute is explicitly undefined or empty", () => {
+    // The discriminating cases: a pre-fix ordering (default first, attrs
+    // after) elides the attribute for `undefined` and passes an empty
+    // string through — the first is an implicit submitter, the second an
+    // invalid value that ALSO defaults to submit.
+    for (const value of [undefined, null, ""] as const) {
+      const c = mountComp(() => h(HkIconButton, { "aria-label": "probe", type: value } as never));
+      expect(
+        c.querySelector<HTMLButtonElement>("button")!.getAttribute("type"),
+        `type=${JSON.stringify(value)} must fall back to button`,
+      ).toBe("button");
+    }
+  });
+});
+
 /**
  * Static pin for the header-chrome glyph step (user report 2026-09-29:
  * the search / refresh / filter glyphs in the top-right clusters read

package/src/components/HkIconButton.tsx

@@ -61,6 +61,14 @@ export default defineComponent({
         disabled={props.disabled}
         onClick={(e: MouseEvent) => emit("click", e)}
         {...attrs}
+        // A rendered <button> defaults to type=submit, which silently turns
+        // every icon-only control inside a <form> into a submitter. The
+        // family is chrome, never a submitter: default it here, once, so
+        // call sites do not each spread an attribute the component does not
+        // declare. Placed AFTER the attrs spread and guarded with `||` so an
+        // explicit `type` still wins while an explicitly `undefined` one
+        // cannot silently defeat the default (HkButton's idiom).
+        type={((attrs.type as string) || "button") as "button" | "reset" | "submit"}
       >
         <span class="hk-icon-button-icon">
           {slots.icon

package/src/components/HkPillToggleGroup.scss

@@ -95,6 +95,40 @@
     background: rgb(var(--color-primary) / 12%);
   }
 
+  /* Tone channels (2026-11-06): a pill can carry the hue identity of the
+   * thing it filters (the trace chips tint with their lane's token so a
+   * chip, its ribbon segments and its rows share one identity). A tone
+   * re-tints the ACTIVE state only — inactive pills stay muted regardless
+   * of tone. The four hue tones share one alpha (16%); the "muted" tone
+   * rides 18% because it has to read as a neutral wash rather than a hue.
+   * The attribute pair wins on SPECIFICITY ((0,3,0) vs (0,2,0)) — order
+   * independent; they are also written after the plain rule so the source
+   * order agrees with what specificity already decides. */
+  &[data-tone="success"][data-active] {
+    color: rgb(var(--color-success, 14 184 64));
+    background: rgb(var(--color-success, 14 184 64) / 16%);
+  }
+
+  &[data-tone="secondary"][data-active] {
+    color: rgb(var(--color-secondary, 81 154 115));
+    background: rgb(var(--color-secondary, 81 154 115) / 16%);
+  }
+
+  &[data-tone="warning"][data-active] {
+    color: rgb(var(--color-warning, 238 214 119));
+    background: rgb(var(--color-warning, 238 214 119) / 16%);
+  }
+
+  &[data-tone="error"][data-active] {
+    color: rgb(var(--color-error, 247 118 142));
+    background: rgb(var(--color-error, 247 118 142) / 16%);
+  }
+
+  &[data-tone="muted"][data-active] {
+    color: rgb(var(--color-text, 30 30 30));
+    background: rgb(var(--color-muted, 108 108 108) / 18%);
+  }
+
   &:focus-visible {
     outline: 2px solid rgb(var(--color-primary));
     outline-offset: -2px;

package/src/components/HkPillToggleGroup.test.tsx

@@ -1,5 +1,9 @@
 import { afterEach, describe, expect, it } from "vitest";
 import { createApp, h } from "vue";
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { compile } from "sass";
 
 import HkPillToggleGroup from "./HkPillToggleGroup";
 
@@ -175,3 +179,96 @@ describe("HkPillToggleGroup", () => {
     expect(toggled).toEqual([OPTIONS[1].value]);
   });
 });
+
+// ── Tone channel ─────────────────────────────────────────────────────────
+describe("HkPillToggleGroup tone channel", () => {
+  const TONED_OPTIONS = [
+    { value: "input", label: "Input", tone: "success" },
+    { value: "text", label: "Text", tone: "secondary" },
+    { value: "tool", label: "Tool", tone: "warning" },
+    { value: "plain", label: "Plain" },
+    { value: "primary", label: "Primary", tone: "primary" },
+  ] as const;
+
+  it("carries data-tone for non-primary tones and omits it for default/primary", () => {
+    const c = mount(
+      h(HkPillToggleGroup, { label: "Kinds", options: [...TONED_OPTIONS], selected: new Set<string>() }),
+    );
+    const pills = [...c.querySelectorAll<HTMLButtonElement>(".hk-pill-group-pill")];
+    expect(pills[0].getAttribute("data-tone")).toBe("success");
+    expect(pills[1].getAttribute("data-tone")).toBe("secondary");
+    expect(pills[2].getAttribute("data-tone")).toBe("warning");
+    expect(pills[3].hasAttribute("data-tone"), "no tone → no attribute").toBe(false);
+    expect(pills[4].hasAttribute("data-tone"), "primary is the default → no attribute").toBe(false);
+  });
+
+  it("renders the option label alongside the tone attribute", () => {
+    const c = mount(
+      h(HkPillToggleGroup, {
+        label: "Kinds",
+        options: [{ value: "tool", label: "Tool", tone: "warning" }],
+        selected: new Set<string>(["tool"]),
+      }),
+    );
+    const pill = c.querySelector<HTMLButtonElement>(".hk-pill-group-pill")!;
+    expect(pill.textContent?.trim()).toBe("Tool");
+    expect(pill.hasAttribute("data-active")).toBe(true);
+    // Without this the whole channel could be reverted and the test stays green.
+    expect(pill.getAttribute("data-tone")).toBe("warning");
+  });
+
+  it("stylesheet contract: every tone re-tints the ACTIVE state only, after the plain rule", () => {
+    const here = dirname(fileURLToPath(import.meta.url));
+    const css = compile(join(here, "HkPillToggleGroup.scss"), { style: "expanded" }).css;
+    const tones = ["success", "secondary", "warning", "error", "muted"] as const;
+    // Same triplets styles/theme/channels.scss defines (light base).
+    const FALLBACKS: Record<(typeof tones)[number], string> = {
+      success: "14 184 64",
+      secondary: "81 154 115",
+      warning: "238 214 119",
+      error: "247 118 142",
+      muted: "108 108 108",
+    };
+    const plainActive = css.indexOf(".hk-pill-group-pill[data-active]");
+    expect(plainActive, "the plain active rule exists").toBeGreaterThan(-1);
+    for (const tone of tones) {
+      // Sass drops quotes around attribute values when expanding
+      // (`[data-status=pending]` — the HkRangeRibbon sheet contract hits
+      // the same formatting), so match the compiled shape.
+      const selector = `.hk-pill-group-pill[data-tone=${tone}][data-active]`;
+      const at = css.indexOf(selector);
+      expect(at, `${selector} compiles`).toBeGreaterThan(-1);
+      // Every tone rule must come AFTER the plain rule: the attribute pair
+      // outranks it, and the source order keeps that dominance explicit.
+      expect(at, `${tone} rule rides after the plain active rule`).toBeGreaterThan(plainActive);
+      // Tone must never repaint an INACTIVE pill: every tone selector has to
+      // carry the attribute pair. A bare `[data-tone=…]` rule would pass the
+      // assertions above while quietly tinting muted pills.
+      expect(css, "no tone rule without [data-active]").not.toMatch(
+        new RegExp(`\\[data-tone=${tone}\\]\\s*\\{`),
+      );
+      const body = css.slice(at, css.indexOf("}", at));
+      expect(body, `${tone} re-tints the ink`).toContain("color:");
+      expect(body, `${tone} re-tints the fill`).toContain("background:");
+      expect(body, `${tone} tint uses its theme token`).toContain(`var(--color-${tone}`);
+      // Presence alone is not enough: the token appears twice (ink + fill),
+      // so swapping one for another hue kept this green (R3 M9/M9b). Pin the
+      // ink and the fill to their own channels — muted is the documented
+      // exception (text ink, muted wash).
+      expect(body, `${tone} INK uses its own channel`).toContain(
+        `color: rgb(var(--color-${tone === "muted" ? "text" : tone}`,
+      );
+      expect(body, `${tone} FILL uses its own channel`).toContain(
+        `background: rgb(var(--color-${tone}`,
+      );
+      // The canonical fallback is what keeps the Rust-side mirror rendering
+      // the same hue without the theme layer — pin the exact triplet.
+      expect(body, `${tone} carries its canonical fallback`).toContain(FALLBACKS[tone]);
+      // Sass's expanded output drops the space before the alpha slash:
+      // `rgb(var(--color-x, t t t)/16%)`.
+      expect(body, `${tone} keeps the house alpha`).toMatch(
+        tone === "muted" ? /\/\s*18%/ : /\/\s*16%/,
+      );
+    }
+  });
+});

package/src/components/HkPillToggleGroup.tsx

@@ -3,6 +3,13 @@ import { defineComponent, h, type PropType, type VNode } from "vue";
 import { useOptionStrip } from "../composables/useOptionStrip";
 import "./HkPillToggleGroup.scss";
 
+/** Semantic tone channel for a pill's ACTIVE tint — the same vocabulary
+ *  the HkRangeRibbon segment family speaks (a filter bar can keep its
+ *  lane-hue identity while riding the shared pill chrome). Omit (or
+ *  "primary") = the default primary tint. A tone recolors the ACTIVE
+ *  state only; inactive pills stay muted regardless of tone. */
+export type HkPillTone = "primary" | "success" | "secondary" | "warning" | "error" | "muted";
+
 /** One toggleable pill of the group. */
 export interface HkPillToggleGroupOption {
   /** Stable identity — the value emitted back through `toggle`. */
@@ -14,6 +21,8 @@ export interface HkPillToggleGroupOption {
    * (never stringified: a raw function child renders as source text,
    * which is exactly the landmine this normalization defuses). */
   icon?: unknown;
+  /** Active-tint hue channel (see {@link HkPillTone}). */
+  tone?: HkPillTone;
 }
 
 /** Normalize an option icon to a renderable vnode. A component (function
@@ -94,6 +103,7 @@ export default defineComponent({
               type="button"
               key={o.value}
               class="hk-pill-group-pill"
+              data-tone={o.tone && o.tone !== "primary" ? o.tone : undefined}
               data-active={props.selected.has(o.value) || undefined}
               aria-pressed={props.selected.has(o.value) ? "true" : "false"}
               onClick={() => emit("toggle", o.value)}

package/src/components/HkRangeRibbon.scss

@@ -9,8 +9,10 @@
    the strip is 32px tall, a handle is an 8px half-overlapping grip
    (translateX(-50%) so `left: 20%` centers it on the window edge), a
    clipped segment keeps a 2px minimum so edge slivers stay visible, and
-   the reset chip clears the edge handle (right: 4px = the handle's
-   half-width, so a handle at 0% / 100% is never covered).
+   the reset button (a standard HkIconButton) clears the edge handle
+   (right: 4px = the handle's half-width, so a handle at 0% / 100% is never
+   covered). The 24px touch-floor seat costs the strip's top-right brush
+   band — the free band below the seat is what remains.
 
    Colours and spacing come from hikari theme tokens; a few geometry values
    (the 32px strip, the 8px grip, the 2px min-width floor) are deliberate
@@ -152,7 +154,12 @@
   position: absolute;
   top: 3px;
   bottom: 3px;
-  z-index: 2;
+  // ABOVE the reset seat (z-index 3): a 24px seat reaches ~10-13% into the
+  // strip's right edge, so at z-index 2 a window whose end lands in that
+  // band had both grips covered by the reset's box and unreachable by
+  // pointer (the seat is opaque and paints later). The grip wins the band;
+  // the reset keeps every other pixel of its area.
+  z-index: 4;
   width: 8px;
   transform: translateX(-50%);
   border: 1px solid rgb(var(--color-surface));
@@ -174,32 +181,31 @@
   outline-offset: 2px;
 }
 
-.hk-range-ribbon-reset {
+// The reset affordance is a STANDARD HkIconButton (size 24, ghost) — the
+// icon-button sheet owns box, glyph size, hover, press and focus chrome.
+// 24 is the touch floor the family uses for dense chrome (the same floor the
+// consumers' icon-size guards enforce); the 32px strip still seats it with a
+// 4px inset top and bottom.
+// This rule only pins the seat on the overview field: right = the edge
+// handle's half-width, so a handle at 0% / 100% is never covered.
+// The seat rides the descendant key on purpose: `.hk-icon-button` declares
+// `position: relative` at the SAME (0,1,0) specificity, so a bare
+// `.hk-range-ribbon-reset` rule would only win while HkIconButton.scss
+// happens to come first in the bundle (the exact failure the lightbox close
+// hit in 2026-09-11 — its seat rule is `.hk-image-lightbox-close.hk-icon-button`
+// for this reason). (0,2,0) makes the seat order-independent.
+// The surface backing rides it for the same reason: the `--hi-icon-button-*`
+// properties also live on `.hk-icon-button` (HkIconButtonVars). The ghost
+// variant is transparent by default — a control floating on the strip's own
+// paint keeps a surface tint to stay legible over segments and scrims.
+.hk-range-ribbon .hk-range-ribbon-reset {
   position: absolute;
   top: 4px;
   right: 4px;
   z-index: 3;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border: 1px solid rgb(var(--color-border));
-  border-radius: var(--radius-sm);
-  background: rgb(var(--color-surface) / 85%);
-  color: rgb(var(--color-text));
-  cursor: pointer;
-  transition: background-color var(--duration-fast, 0.15s) ease;
-}
-
-.hk-range-ribbon-reset:hover {
-  background: rgb(var(--color-surface));
-}
-
-.hk-range-ribbon-reset:focus-visible {
-  outline: 2px solid rgb(var(--color-primary));
-  outline-offset: 1px;
+  --hi-icon-button-bg: rgb(var(--color-surface) / 85%);
+  --hi-icon-button-bg-hover: rgb(var(--color-surface));
+  --hi-icon-button-bg-active: rgb(var(--color-surface));
 }
 
 // Visually hidden, still read by AT: labels the keyboard contract the

package/src/components/HkRangeRibbon.test.tsx

@@ -771,6 +771,18 @@ describe("HkRangeRibbon reset", () => {
     const host = mountHost([0.2, 0.6]);
     const button = host.root.querySelector<HTMLElement>(".hk-range-ribbon-reset");
     expect(button, "reset button is shown while a window exists").toBeTruthy();
+    // The reset affordance rides the STANDARD icon button (user direction
+    // 2026-11-06: no hand-rolled chip chrome), carrying its lucide glyph
+    // through the house-normal slot — pin the lucide class the slot must
+    // produce so a glyph swap cannot silently vanish.
+    expect(button!.className, "reset is an HkIconButton, not a bespoke chip").toContain(
+      "hk-icon-button",
+    );
+    expect(
+      button!.querySelector("svg.lucide-rotate-ccw"),
+      "reset glyph renders through the icon slot",
+    ).not.toBeNull();
+    expect(button!.getAttribute("type"), "reset never becomes a submit button").toBe("button");
     button!.click();
     await nextTick();
     expect(host.windowChange).toHaveBeenLastCalledWith(null);
@@ -1405,8 +1417,36 @@ describe("HkRangeRibbon stylesheet contract", () => {
     // A clipped 2px sliver must still be visible.
     expect(declaration(ruleBody(css, ".hk-range-ribbon-segment"), "min-width")).toBe("2px");
     expect(declaration(ruleBody(css, ".hk-range-ribbon-lane-track"), "height")).toBe("20px");
-    // The reset chip clears the edge handle (half its 8px width).
-    expect(declaration(ruleBody(css, ".hk-range-ribbon-reset"), "right")).toBe("4px");
+    // The reset seat clears the edge handle (half its 8px width). The rule
+    // must sit on the descendant key (0,2,0): `.hk-icon-button` declares
+    // `position: relative` at (0,1,0), so a bare-class seat would depend on
+    // bundle order.
+    const resetSeat = ruleBody(css, ".hk-range-ribbon .hk-range-ribbon-reset");
+    expect(declaration(resetSeat, "right")).toBe("4px");
+    expect(declaration(resetSeat, "position"), "the seat must out-rank .hk-icon-button").toBe(
+      "absolute",
+    );
+    expect(declaration(resetSeat, "top"), "the seat clears the strip edge").toBe("4px");
+    // The grip must paint ABOVE the seat: a right-side window puts its end
+    // handle inside the seat's box, and an opaque seat below it would make
+    // the grip unreachable by pointer.
+    const gripZ = Number(declaration(ruleBody(css, ".hk-range-ribbon-handle"), "z-index"));
+    const seatZ = Number(declaration(resetSeat, "z-index"));
+    expect(gripZ, "the edge grip outranks the reset seat").toBeGreaterThan(seatZ);
+    // The surface backing is what keeps the control legible over the strip's
+    // segments and scrims: ghost carries NO background (HkIconButtonVars),
+    // so without these three the reset degrades to a bare glyph floating on
+    // the paint. Removing them alone left the whole suite green (R3 M5b) —
+    // pin the paint, not just the geometry.
+    expect(declaration(resetSeat, "--hi-icon-button-bg"), "resting surface tint").toContain(
+      "var(--color-surface)",
+    );
+    expect(declaration(resetSeat, "--hi-icon-button-bg-hover"), "hover surface tint").toContain(
+      "var(--color-surface)",
+    );
+    expect(declaration(resetSeat, "--hi-icon-button-bg-active"), "press surface tint").toContain(
+      "var(--color-surface)",
+    );
     expect(ruleBody(css, ".hk-range-ribbon-window")).toContain("var(--color-primary)");
     expect(ruleBody(css, ".hk-range-ribbon-scrim")).toContain("var(--color-background)");
   });

package/src/components/HkRangeRibbon.tsx

@@ -11,6 +11,7 @@ import {
 } from "vue";
 
 import { useI18n } from "../i18n/context";
+import HIconButton from "./HkIconButton";
 import "./HkRangeRibbon.scss";
 
 /**
@@ -744,15 +745,23 @@ export default defineComponent({
                     onPointerdown={(event: PointerEvent) => onHandlePointerDown("end", event)}
                     onKeydown={(event: KeyboardEvent) => onHandleKeyDown("end", event)}
                   />
-                  <button
-                    type="button"
+                  {/* The reset affordance is the STANDARD icon button (user
+                      direction 2026-11-06: no hand-rolled chip chrome) —
+                      HkIconButton owns box, glyph size, hover, press and
+                      focus; this sheet only pins the seat (position) and a
+                      surface backing via its override vars. The glyph slots
+                      as a lucide component (the house-normal integration:
+                      every in-tree HkIconButton slots its glyph). */}
+                  <HIconButton
                     class="hk-range-ribbon-reset"
+                    size={24}
+                    variant="ghost"
                     aria-label={t("hikari::ribbon.reset", "Reset range")}
-                    title={t("hikari::ribbon.reset", "Reset range")}
+                    {...{ title: t("hikari::ribbon.reset", "Reset range") }}
                     onClick={resetWindow}
                   >
-                    <RotateCcw size={12} aria-hidden="true" />
-                  </button>
+                    {{ icon: () => <RotateCcw aria-hidden="true" /> }}
+                  </HIconButton>
                 </>
               )}
             </div>

package/src/components/range-ribbon-reset.contract.test.ts

@@ -0,0 +1,52 @@
+/**
+ * Source contract for the range-ribbon reset affordance (user direction
+ * 2026-11-06: the waterfall minimap's reset control must be the STANDARD
+ * icon button, not a per-component hand-rolled `<button>` chip).
+ *
+ * HkRangeRibbon renders its reset through HkIconButton (the shared icon
+ * button: one box ladder, one glyph channel, one hover/press/focus chrome)
+ * carrying the a directly-imported `RotateCcw` glyph in the icon slot — the same "named-icon contract" the unified window-close wave
+ * pinned (window-close.contract.test.ts). The positioning class
+ * `hk-range-ribbon-reset` survives ONLY as the seat hook the component
+ * sheet pins (it must keep clearing the edge handle).
+ *
+ * Pinned here so a refactor cannot silently re-sprout a bespoke chip —
+ * the same "looks unified but drifted" failure class the window-close
+ * contract guards against.
+ */
+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 ribbon = readFileSync(join(here, "HkRangeRibbon.tsx"), "utf-8");
+
+describe("range-ribbon reset control contract", () => {
+  it("renders the reset affordance through the standard HkIconButton", () => {
+    expect(ribbon, "the reset must ride HkIconButton chrome").toContain("HIconButton");
+    expect(ribbon, "the seat class survives as the positioning hook").toContain(
+      'class="hk-range-ribbon-reset"',
+    );
+    expect(
+      ribbon,
+      "the glyph rides the house-normal lucide slot (every in-tree HkIconButton slots its glyph)",
+    ).toContain("<RotateCcw");
+    expect(ribbon, "no hand-rolled <button> may carry the reset class").not.toMatch(
+      /<button[^>]*hk-range-ribbon-reset/,
+    );
+    // The three things a partial revert silently drops while still passing
+    // the substring checks above.
+    expect(ribbon, "the reset keeps its touch-floor size").toMatch(
+      /<HIconButton[\s\S]{0,200}?size=\{24\}/,
+    );
+    // The non-submit guarantee moved upstream into HkIconButton (one
+    // implementation, not a per-call-site spread); it is pinned in
+    // HkIconButton.test.tsx and asserted on the rendered DOM in
+    // HkRangeRibbon.test.tsx.
+    expect(ribbon, "the reset passes the standard variant explicitly").toContain('variant="ghost"');
+    expect(ribbon, "the glyph rides the slot form, not the icon prop").toMatch(
+      /\{\{\s*icon:\s*\(\)\s*=>\s*<RotateCcw/,
+    );
+  });
+});

package/src/index.ts

@@ -978,7 +978,7 @@ export type {
 } from "./composables/useInfinitePages";
 export { default as HkFilterChip } from "./components/HkFilterChip";
 export { default as HkPillToggleGroup } from "./components/HkPillToggleGroup";
-export type { HkPillToggleGroupOption } from "./components/HkPillToggleGroup";
+export type { HkPillToggleGroupOption, HkPillTone } from "./components/HkPillToggleGroup";
 export { HkIconChip as HkIconChip } from "./components/HkIconChip";
 export { HkIconChip as HIconChip } from "./components/HkIconChip";
 export { HkCardList, HkListRow } from "./components/HkCardList";