@celestia-island/hikari 0.41.8 → 0.41.9

package/package.json

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

package/src/components/HkButton.scss

@@ -64,6 +64,62 @@
   min-height: 2.75rem;
 }
 
+/* ---- Prefix / suffix icon boxes ---- */
+/* Standard-part contract (2026-09-10 user direction): a button glyph
+   renders inside a FIXED SQUARE box — flex:none so host flex rows can
+   never squeeze it into a squat sliver, centered on both axes so the
+   icon rides the button's vertical midline at any button height, and
+   the box (not the bare svg) owns the rhythm so the glyph keeps a
+   consistent margin from the adjacent label via the button's own gap.
+   The 1rem box matches the 16px glyph HkButton renders for the
+   icon/suffix props. */
+.hk-btn-icon,
+.hk-btn-suffix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  line-height: 0;
+
+  svg {
+    display: block;
+  }
+}
+
+/* ---- Icon-only square ---- */
+/* An icon-only HkButton (glyph, no label) occupies a SQUARE footprint
+   by default: padding collapses fully and width locks to the size
+   variant's min-height, so it reads as the same standard square the
+   HIconButton family guarantees. box-sizing is self-declared (house
+   convention — geometry rules never rely on a host-side reset reaching
+   the component): with zero padding the min-height governs the height
+   on every size, an exact square under border-box AND content-box.
+   Hosts may still override with an explicit width when a design
+   genuinely calls for another shape. */
+.hk-btn-icon-only {
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.hk-btn-sm.hk-btn-icon-only {
+  width: 1.75rem;
+}
+
+.hk-btn-md.hk-btn-icon-only {
+  width: 2.5rem;
+}
+
+.hk-btn-lg.hk-btn-icon-only {
+  width: 2.75rem;
+}
+
+/* The first-class block prop wins over the square width. */
+.hk-btn-block.hk-btn-icon-only {
+  width: 100%;
+}
+
 /* ---- Primary ---- */
 
 .hk-btn-primary {

package/src/components/HkButton.test.tsx

@@ -1,8 +1,13 @@
 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 HkButton from "./HkButton";
 
+const here = dirname(fileURLToPath(import.meta.url));
+
 /**
  * HkButton contract tests:
  * - variant / size / block / loading class mapping on the root <button>
@@ -142,6 +147,82 @@ describe("HkButton content slots", () => {
   });
 });
 
+describe("HkButton icon-only square contract", () => {
+  it("flags the icon-only square class for a glyph with no label", () => {
+    const iconOnly = mount(h(HkButton, { icon: "close", ariaLabel: "Close" }));
+    const btn = button(iconOnly);
+    expect(btn.className).toContain("hk-btn-icon-only");
+    expect(iconOnly.querySelector(".hk-btn-icon")).not.toBeNull();
+
+    const suffixOnly = mount(h(HkButton, { suffix: "close", ariaLabel: "Next" }));
+    expect(button(suffixOnly).className).toContain("hk-btn-icon-only");
+
+    // Glyph + text stays a normal text button — no square collapse.
+    const withText = mount(h(HkButton, { icon: "close" }, () => "Close"));
+    expect(button(withText).className).not.toContain("hk-btn-icon-only");
+  });
+
+  it("keeps the square footprint while an icon-only button loads", () => {
+    const c = mount(h(HkButton, { icon: "close", loading: true, ariaLabel: "Busy" }));
+    // The spinner replaces the glyph, but the button still carries no
+    // label — the square footprint must hold through the swap.
+    expect(button(c).className).toContain("hk-btn-icon-only");
+  });
+
+  it("keeps the block class alongside the icon-only square class", () => {
+    // CSS precedence lives in the SCSS contract test below; this pins the
+    // class composition so both rules can actually apply.
+    const c = mount(h(HkButton, { icon: "close", block: true, ariaLabel: "Go" }));
+    const cls = button(c).className;
+    expect(cls).toContain("hk-btn-block");
+    expect(cls).toContain("hk-btn-icon-only");
+  });
+
+  it("does not square-collapse when a shortcut chip rides along", () => {
+    // The HKbd chip is an extra flex child — the fixed square width would
+    // visibly clip it, so icon + shortcut stays a padded button.
+    const c = mount(h(HkButton, { icon: "close", shortcut: "Ctrl+W", ariaLabel: "Close" }));
+    expect(button(c).className).not.toContain("hk-btn-icon-only");
+  });
+});
+
+// SCSS geometry contract (house pattern, cf. HkNumberInput.affix.test.ts):
+// the square is a CSS fact — padding fully collapsed + self-declared
+// border-box (survives hosts without a reset) + the block prop winning
+// over the square width. Textual assertions because happy-dom does not
+// lay out.
+describe("HkButton icon-only SCSS contract", () => {
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+
+  it("self-declares the collapsed square geometry", () => {
+    const rule = scss.match(/\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "icon-only rule must exist").toBeTruthy();
+    expect(rule).toContain("padding: 0");
+    expect(rule).toContain("box-sizing: border-box");
+  });
+
+  it("lets the block prop win over the square width", () => {
+    const rule = scss.match(/\.hk-btn-block\.hk-btn-icon-only\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "block override rule must exist").toBeTruthy();
+    expect(rule).toContain("width: 100%");
+  });
+
+  it("locks each size variant width to its min-height", () => {
+    const cases: Array<[string, string]> = [
+      ["sm", "1.75rem"],
+      ["md", "2.5rem"],
+      ["lg", "2.75rem"],
+    ];
+    for (const [size, width] of cases) {
+      const rule = scss.match(new RegExp(`\\.hk-btn-${size}\\.hk-btn-icon-only\\s*{[^}]*}`))?.[0] ?? "";
+      expect(rule, `${size} icon-only rule must exist`).toBeTruthy();
+      expect(rule).toContain(`width: ${width}`);
+      const minH = scss.match(new RegExp(`\\.hk-btn-${size}\\s*{[^}]*}`))?.[0] ?? "";
+      expect(minH).toContain(`min-height: ${width}`);
+    }
+  });
+});
+
 describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
   it("spreads extra attrs and honors an explicit type", () => {
     const c = mount(h(HkButton, { type: "submit", "data-test": "probe" }, () => "Save"));

package/src/components/HkButton.tsx

@@ -42,33 +42,47 @@ export default defineComponent({
       props.shortcut ? "hk-btn-has-shortcut" : "",
     ]);
 
-    return () => (
-      <button
-        {...attrs}
-        type={(attrs.type as "button" | "submit" | "reset") || "button"}
-        disabled={props.disabled || props.loading}
-        class={[buttonClass.value, attrs.class]}
-        style={attrs.style || undefined}
-        aria-label={props.ariaLabel}
-        aria-busy={props.loading || undefined}
-        onClick={(e) => emit("click", e)}
-      >
-        {props.loading ? <HSpinner size="xs" tone="current" /> : null}
-        {!props.loading && props.icon ? (
-          <span class="hk-btn-icon">
-            <HIcon name={props.icon} size={16} />
-          </span>
-        ) : null}
-        {slots.default?.()}
-        {props.suffix ? (
-          <span class="hk-btn-suffix">
-            <HIcon name={props.suffix} size={16} />
-          </span>
-        ) : null}
-        {props.shortcut ? (
-          <HKbd keys={props.shortcut!} size="sm" />
-        ) : null}
-      </button>
-    );
+    return () => {
+      // Icon-only contract (2026-09-10 user direction): a button carrying
+      // just a prefix/suffix glyph and no text collapses to the same
+      // square footprint the HIconButton family guarantees — a bare icon
+      // in a padded text button reads as a squat rectangle otherwise.
+      // Re-evaluated per render, NOT a computed: slots.default is not
+      // reactive, so a cached flag would go stale when a parent toggles
+      // the label slot without touching the icon props. A shortcut chip
+      // is excluded: it renders as an extra flex child the fixed square
+      // width would visibly clip.
+      const iconOnly =
+        !slots.default && Boolean(props.icon || props.suffix) && !props.shortcut;
+
+      return (
+        <button
+          {...attrs}
+          type={(attrs.type as "button" | "submit" | "reset") || "button"}
+          disabled={props.disabled || props.loading}
+          class={[buttonClass.value, iconOnly ? "hk-btn-icon-only" : "", attrs.class]}
+          style={attrs.style || undefined}
+          aria-label={props.ariaLabel}
+          aria-busy={props.loading || undefined}
+          onClick={(e) => emit("click", e)}
+        >
+          {props.loading ? <HSpinner size="xs" tone="current" /> : null}
+          {!props.loading && props.icon ? (
+            <span class="hk-btn-icon">
+              <HIcon name={props.icon} size={16} />
+            </span>
+          ) : null}
+          {slots.default?.()}
+          {props.suffix ? (
+            <span class="hk-btn-suffix">
+              <HIcon name={props.suffix} size={16} />
+            </span>
+          ) : null}
+          {props.shortcut ? (
+            <HKbd keys={props.shortcut!} size="sm" />
+          ) : null}
+        </button>
+      );
+    };
   },
 });

package/src/components/HkIconButton.test.tsx

@@ -102,4 +102,19 @@ describe("HkIconButton", () => {
     const c = mountComp(() => h(HkIconButton, { "aria-label": "probe" }));
     expect(c.querySelector("circle")).not.toBeNull();
   });
+
+  // Named-icon contract (2026-09-10): the icon prop resolves through HIcon
+  // (functional keys ride the host material pack) — slot content still
+  // wins over it, and the placeholder circle only shows with neither.
+  it("renders the icon prop through HIcon, below slot precedence", () => {
+    const propOnly = mountComp(() => h(HkIconButton, { icon: "close", "aria-label": "close" }));
+    expect(propOnly.querySelector(".hk-icon")).not.toBeNull();
+    expect(propOnly.querySelector("circle")).toBeNull();
+
+    const propAndSlot = mountComp(() =>
+      h(HkIconButton, { icon: "close", "aria-label": "close" }, { icon: () => h("span", { class: "slot-probe" }) }),
+    );
+    expect(propAndSlot.querySelector(".slot-probe")).not.toBeNull();
+    expect(propAndSlot.querySelector(".hk-icon")).toBeNull();
+  });
 });

package/src/components/HkIconButton.tsx

@@ -1,6 +1,7 @@
 import { computed, defineComponent, type PropType } from "vue";
 import "./HkIconButton.scss";
 import "./HkIconButtonVars.scss";
+import HIcon from "./HkIcon";
 
 export default defineComponent({
   name: "HkIconButton",
@@ -21,6 +22,14 @@ export default defineComponent({
       `hk-icon-button-${props.variant}`,
     ]);
 
+    // Named-icon contract (2026-09-10 user direction): the icon prop is a
+    // first-class way to draw the glyph — it resolves through HIcon so
+    // functional keys ("close", "back") keep riding the host material-pack
+    // family exactly like the slot composition does. The rendered size is
+    // pinned by --hi-icon-button-icon-size; the HIcon size prop only picks
+    // the matching box class. Slot content still wins over the prop.
+    const glyphSize = computed(() => (props.size >= 32 ? 20 : 16));
+
     return () => (
       <button
         class={cls.value}
@@ -35,11 +44,15 @@ export default defineComponent({
               ? // Natural children usage: <HIconButton><HIcon .../></HIconButton>
                 // renders the child as the icon (unified window-close wave).
                 slots.default()
-              : (
-                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <circle cx="12" cy="12" r="10" />
-                </svg>
-              )}
+              : props.icon
+                ? (
+                  <HIcon name={props.icon} size={glyphSize.value} />
+                )
+                : (
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <circle cx="12" cy="12" r="10" />
+                  </svg>
+                )}
         </span>
       </button>
     );

package/src/composables/iconRegistry.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+import { Info } from "lucide-vue-next";
+
+import { iconByName } from "./iconRegistry";
+
+// Glyph-expansion contract (2026-09-10): downstream audits (chest / e.cw /
+// erp.cw icon waves) found these icon-prop names silently rendering the
+// `Info` fallback because the lucide exports were missing from the
+// tree-shakeable registry. `minus` and `copy` are chest adversarial-verifier
+// finds that shipped as Info-fallback regressions. Each entry must resolve
+// to its real glyph — asserted against the unknown-name fallback, not just
+// against `Info`, so a future fallback swap cannot silently pass this suite.
+const NEW_GLYPH_KEBAB = [
+  "log-out", "sparkles", "upload", "camera", "flag", "download", "image",
+  "video", "save", "braces", "history", "rotate-cw", "key-round",
+  "scan-search", "ban", "filter", "minus", "copy",
+] as const;
+
+const NEW_GLYPH_PASCAL = [
+  "LogOut", "Sparkles", "Upload", "Camera", "Flag", "Download", "Image",
+  "Video", "Save", "Braces", "History", "RotateCw", "KeyRound",
+  "ScanSearch", "Ban", "Filter", "Minus", "Copy",
+] as const;
+
+describe("icon registry glyph expansion", () => {
+  const fallback = iconByName("totally-unknown-name");
+
+  it("resolves unknown names to the Info fallback", () => {
+    expect(fallback).toBe(Info);
+  });
+
+  it("keeps the kebab-case lookup distinct from the fallback for every new glyph", () => {
+    for (const kebab of NEW_GLYPH_KEBAB) {
+      const resolved = iconByName(kebab);
+      expect(resolved, `iconByName(${kebab}) hit the fallback`).not.toBe(fallback);
+      expect(resolved).not.toBe(Info);
+    }
+  });
+
+  it("resolves the PascalCase export names directly", () => {
+    for (const pascal of NEW_GLYPH_PASCAL) {
+      const resolved = iconByName(pascal);
+      expect(resolved, `iconByName(${pascal}) hit the fallback`).not.toBe(fallback);
+      expect(resolved).not.toBe(Info);
+    }
+  });
+
+  it("maps kebab-case and PascalCase spellings to the same glyph", () => {
+    for (const [kebab, pascal] of NEW_GLYPH_KEBAB.map((k, i) => [k, NEW_GLYPH_PASCAL[i]] as const)) {
+      expect(iconByName(kebab)).toBe(iconByName(pascal));
+    }
+  });
+
+  it("still resolves the Info fallback for unknown names after the expansion", () => {
+    expect(iconByName("no-such-glyph-at-all")).toBe(fallback);
+  });
+});

package/src/composables/iconRegistry.ts

@@ -8,7 +8,7 @@
 // badges, nav tags) resolve without the wildcard import. Unknown names fall
 // back to `Info`, matching the previous `|| LucideIcons.Info` behavior.
 
-import { Activity, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Battery, Bell, Bot, Box, Brain, Cable, Calendar, ChartBarBig as BarChart3, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert as AlertCircle, CircleCheck as CheckCircle, CircleCheckBig as CheckCircle2, CircleDot, Clock, Cpu, Database, Dot, Ellipsis as MoreHorizontal, ExternalLink, Eye, FileArchive, FileCode, FileImage, FileText, Flame, FolderOpen, Gauge, Globe, HardDrive, Info, Kanban, Key, Layers, LayoutDashboard, LoaderCircle as Loader2, Lock, Maximize, Maximize2, MessageSquare, Mic, MicOff, Minimize, Monitor, Network, Package, Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw, Search, Send, Server, Settings, Share2, Shield, Star, Table, Tag, Thermometer, Trash2, TriangleAlert as AlertTriangle, Volume2, VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-vue-next";
+import { Activity, ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Ban, Battery, Bell, Bot, Box, Braces, Brain, Cable, Calendar, Camera, ChartBarBig as BarChart3, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, CircleAlert as AlertCircle, CircleCheck as CheckCircle, CircleCheckBig as CheckCircle2, CircleDot, Clock, Copy, Cpu, Database, Dot, Download, Ellipsis as MoreHorizontal, ExternalLink, Eye, FileArchive, FileCode, FileImage, FileText, Filter, Flag, Flame, FolderOpen, Gauge, Globe, HardDrive, History, Image, Info, Kanban, Key, KeyRound, Layers, LayoutDashboard, LoaderCircle as Loader2, LogOut, Lock, Maximize, Maximize2, MessageSquare, Mic, MicOff, Minimize, Minus, Monitor, Network, Package, Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw, RotateCw, ScanSearch, Save, Search, Send, Server, Settings, Share2, Shield, Sparkles, Star, Table, Tag, Thermometer, Trash2, TriangleAlert as AlertTriangle, Upload, Video, Volume2, VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut } from "lucide-vue-next";
 import type { Component } from "vue";
 
 
@@ -98,16 +98,19 @@ import type { Component } from "vue";
 
 const REGISTRY: Record<string, Component> = {
   Activity, AlertCircle, AlertTriangle, ArrowDown, ArrowLeft, ArrowRight,
-  ArrowUp, BarChart3, Battery, Bell, Bot, Box, Brain, Cable, Calendar,
-  Check, CheckCircle, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight,
-  ChevronUp, Circle, CircleDot, Clock, Cpu, Database, Dot, ExternalLink, Eye,
-  FileArchive, FileCode, FileImage, FileText, Flame,
-  FolderOpen, Gauge, Globe, HardDrive, Info, Kanban, Key, Layers,
-  LayoutDashboard, Loader2, Lock, Maximize, Maximize2, MessageSquare, Mic,
-  MicOff, Minimize, Monitor, MoreHorizontal, Network, Package, Pause, Pencil,
-  Play, Plug, Plus, Radio, RefreshCw, Search, Send, Server, Settings, Share2,
-  Shield, Star, Table, Tag, Thermometer, Trash2, Volume2, VolumeX, Webhook,
-  Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut,
+  ArrowUp, Ban, BarChart3, Battery, Bell, Bot, Box, Braces, Brain, Cable,
+  Calendar, Camera, Check, CheckCircle, CheckCircle2, ChevronDown,
+  ChevronLeft, ChevronRight, ChevronUp, Circle, CircleDot, Clock, Copy, Cpu,
+  Database, Dot, Download, ExternalLink, Eye, FileArchive, FileCode,
+  FileImage, FileText, Filter, Flag, Flame, FolderOpen, Gauge, Globe,
+  HardDrive, History, Image, Info, Kanban, Key, KeyRound, Layers,
+  LayoutDashboard, Loader2, LogOut, Lock, Maximize, Maximize2,
+  MessageSquare, Mic, MicOff, Minimize, Minus, Monitor, MoreHorizontal,
+  Network, Package, Pause, Pencil, Play, Plug, Plus, Radio, RefreshCw,
+  RotateCw,
+  ScanSearch, Save, Search, Send, Server, Settings, Share2, Shield,
+  Sparkles, Star, Table, Tag, Thermometer, Trash2, Upload, Video, Volume2,
+  VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut,
 };
 
 /**