@celestia-island/hikari 0.55.122 → 0.55.123

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.122",
+  "version": "0.55.123",
   "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

@@ -168,6 +168,135 @@
   width: 100%;
 }
 
+/* ---- Responsive label collapse ---- */
+/* A `collapseLabel` button carries icon + text at wide viewports and
+   collapses to the SAME icon-only square below the chosen breakpoint
+   (chest 2026-10-05 direction: the ad-hoc `hidden sm:inline` label-span
+   pattern left the button as a padded icon rectangle on phones — the
+   exact squat shape the icon-only contract exists to prevent). The
+   geometry mirrors the icon-only ladder above per size; the breakpoint
+   px values mirror the runtime useBreakpoint scale (sm 640 / md 768 /
+   lg 1024 / xl 1280) — a media query cannot read the TS constant, keep
+   the two tables in sync. The TS side suppresses the collapse class
+   together with `block` (a full-width button has nothing to collapse
+   into), so no block override is needed here. */
+.hk-btn-label {
+  /* Inline-flex so multi-node labels (text + inline marks) stay on one
+     row and center against the glyph box. */
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+@mixin hk-btn-collapse-geometry($square) {
+  .hk-btn-label {
+    display: none;
+  }
+
+  /* The exact icon-only geometry (all-side padding zero, width locked),
+     mirrored per size from the ladder above. */
+  padding: 0;
+  box-sizing: border-box;
+  width: $square;
+}
+
+.hk-btn-label-collapse-sm.hk-btn-xs {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-sm {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-md {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-sm.hk-btn-lg {
+  @media (max-width: 639.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-xs {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-sm {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-md {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-md.hk-btn-lg {
+  @media (max-width: 767.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-xs {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-sm {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-md {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-lg.hk-btn-lg {
+  @media (max-width: 1023.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-xs {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(1.375rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-sm {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(1.75rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-md {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(2.5rem);
+  }
+}
+
+.hk-btn-label-collapse-xl.hk-btn-lg {
+  @media (max-width: 1279.98px) {
+    @include hk-btn-collapse-geometry(2.75rem);
+  }
+}
+
+
 /* ---- Primary ---- */
 
 .hk-btn-primary {

package/src/components/HkButton.test.tsx

@@ -255,3 +255,134 @@ describe("HkButton attr fallthrough (inheritAttrs: false)", () => {
     expect(cls).toContain("extra-class");
   });
 });
+
+describe("HkButton label prop + responsive collapse contract", () => {
+  it("renders the label prop in a .hk-btn-label span and keeps the button textual", () => {
+    const c = mount(h(HkButton, { icon: "gauge", label: "Test all" }));
+    const btn = button(c);
+    const label = c.querySelector(".hk-btn-label");
+    expect(label).not.toBeNull();
+    expect(label!.textContent).toBe("Test all");
+    // icon + label = a text button at wide viewports, never icon-only.
+    expect(btn.className).not.toContain("hk-btn-icon-only");
+    // The label prop is the accessible name unless one is given.
+    expect(btn.getAttribute("aria-label")).toBe("Test all");
+  });
+
+  it("prefers the label prop over the default slot and an explicit ariaLabel over the label", () => {
+    const c = mount(h(HkButton, { label: "From prop" }, () => "From slot"));
+    expect(c.querySelector(".hk-btn-label")!.textContent).toBe("From prop");
+    expect(c.textContent).not.toContain("From slot");
+
+    const named = mount(h(HkButton, { label: "Visible", ariaLabel: "Custom" }));
+    expect(button(named).getAttribute("aria-label")).toBe("Custom");
+  });
+
+  it("emits the collapse modifier class from collapseLabel", () => {
+    const c = mount(h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm" }));
+    expect(button(c).className).toContain("hk-btn-label-collapse-sm");
+  });
+
+  it("suppresses the collapse class with block or shortcut (nothing to collapse into)", () => {
+    const blocked = mount(
+      h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm", block: true }),
+    );
+    expect(button(blocked).className).not.toContain("hk-btn-label-collapse");
+
+    const withShortcut = mount(
+      h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm", shortcut: "Ctrl+B" }),
+    );
+    expect(button(withShortcut).className).not.toContain("hk-btn-label-collapse");
+  });
+
+  it("keeps label-prop buttons out of the icon-only square class", () => {
+    // The narrow-end square is the SCSS media query's job; the class
+    // must not flip at mount time or the wide viewport would square a
+    // labeled button.
+    const c = mount(h(HkButton, { icon: "gauge", label: "Probe", collapseLabel: "sm" }));
+    expect(button(c).className).not.toContain("hk-btn-icon-only");
+  });
+});
+
+// SCSS geometry contract for the responsive collapse (same textual style
+// as the icon-only contract above — happy-dom does not lay out): every
+// collapse breakpoint × size pair must exist, must collapse below the
+// useBreakpoint px scale (sm 640 / md 768 / lg 1024 / xl 1280), and must
+// land on the exact icon-only square width of its size.
+describe("HkButton label-collapse SCSS contract", () => {
+  const scss = readFileSync(join(here, "HkButton.scss"), "utf-8");
+
+  const breakpoints: Array<[string, string]> = [
+    ["sm", "639.98px"],
+    ["md", "767.98px"],
+    ["lg", "1023.98px"],
+    ["xl", "1279.98px"],
+  ];
+  const squares: Array<[string, string]> = [
+    ["xs", "1.375rem"],
+    ["sm", "1.75rem"],
+    ["md", "2.5rem"],
+    ["lg", "2.75rem"],
+  ];
+
+  it("collapses every breakpoint × size pair to the icon-only square", () => {
+    for (const [bp, query] of breakpoints) {
+      for (const [size, square] of squares) {
+        const rule = scss.match(
+          new RegExp(
+            `\\.hk-btn-label-collapse-${bp}\\.hk-btn-${size}\\s*{\\s*@media \\(max-width: ${query}\\) {`,
+          ),
+        )?.[0];
+        expect(rule, `${bp}×${size} collapse rule must exist`).toBeTruthy();
+      }
+    }
+  });
+
+  it("hides the label and lands on the exact square inside each media block", () => {
+    // The per-pair rules @include one shared mixin; the geometry lives in
+    // its definition (the compiled CSS materializes it per media block).
+    const start = scss.indexOf("@mixin hk-btn-collapse-geometry($square) {");
+    expect(start, "collapse mixin must exist").toBeGreaterThan(-1);
+    // Slice to the mixin's closing brace (nested rules make a [^}] scan
+    // stop early, so index from the header to the documented tail line).
+    const end = scss.indexOf("width: $square;", start);
+    const mixin = scss.slice(start, end + "width: $square;".length);
+    expect(mixin).toContain(".hk-btn-label");
+    expect(mixin).toContain("display: none;");
+    expect(mixin).toContain("padding: 0;");
+    expect(mixin).toContain("box-sizing: border-box;");
+    expect(mixin).toContain("width: $square");
+
+    const smBlock = scss.match(
+      /\.hk-btn-label-collapse-sm\.hk-btn-sm\s*{\s*@media \(max-width: 639\.98px\) {([^}]*)}/,
+    )?.[1];
+    expect(smBlock, "sm×sm collapse body must exist").toBeTruthy();
+    expect(smBlock).toContain("@include hk-btn-collapse-geometry(1.75rem)");
+  });
+
+  it("mirrors the useBreakpoint scale breakpoints in order", () => {
+    // Keep the SCSS table honest against the runtime scale document —
+    // the px values appear in ascending breakpoint order.
+    const queries = [...scss.matchAll(/@media \(max-width: (\d+(?:\.\d+)?px)\)/g)].map(
+      (m) => m[1],
+    );
+    expect(queries).toEqual([
+      "639.98px",
+      "639.98px",
+      "639.98px",
+      "639.98px",
+      "767.98px",
+      "767.98px",
+      "767.98px",
+      "767.98px",
+      "1023.98px",
+      "1023.98px",
+      "1023.98px",
+      "1023.98px",
+      "1279.98px",
+      "1279.98px",
+      "1279.98px",
+      "1279.98px",
+    ]);
+  });
+});

package/src/components/HkButton.tsx

@@ -13,6 +13,14 @@ export type ButtonVariant =
   | "outline";
 export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
+/** Breakpoints below which a `collapseLabel` button hides its label and
+ *  collapses to the icon-only square. Mirrors the runtime useBreakpoint
+ *  scale (sm 640 / md 768 / lg 1024 / xl 1280) — the SCSS side repeats
+ *  the px values because a media query cannot read a TS constant; keep
+ *  the two in sync. "xs" is deliberately absent: collapse-at-xs means
+ *  "always collapsed", which is just the icon prop + label-less button. */
+export type ButtonLabelCollapse = "sm" | "md" | "lg" | "xl";
+
 export default defineComponent({
   name: "HkButton",
   inheritAttrs: false,
@@ -26,6 +34,24 @@ export default defineComponent({
     shortcut: { type: String, default: undefined },
     icon: { type: String, default: undefined },
     suffix: { type: String, default: undefined },
+    /** Plain-text label, rendered in a `.hk-btn-label` span after the
+     *  glyph. Pairs with `collapseLabel`: at wide viewports the button
+     *  reads icon + text; below the chosen breakpoint the label hides
+     *  and the button collapses to the icon-only square. When set, the
+     *  default slot is ignored (one label source per button) and the
+     *  accessible name falls back to this text, so the button keeps its
+     *  name at breakpoints where the visible label is display:none. */
+    label: { type: String, default: undefined },
+    /** Breakpoint below which the label hides and the button collapses
+     *  to the icon-only square (see `ButtonLabelCollapse`). Requires
+     *  `label`; ignored together with `block` (a full-width button has
+     *  nothing to collapse into) and with `shortcut` (the shortcut chip
+     *  is an extra child the square width would visibly clip — the same
+     *  exclusion the icon-only contract applies). */
+    collapseLabel: {
+      type: String as PropType<ButtonLabelCollapse>,
+      default: undefined,
+    },
   },
   emits: {
     click: (_e: MouseEvent) => true,
@@ -40,6 +66,9 @@ export default defineComponent({
       props.block ? "hk-btn-block" : "",
       props.loading ? "hk-btn-loading" : "",
       props.shortcut ? "hk-btn-has-shortcut" : "",
+      props.collapseLabel && props.label && !props.block && !props.shortcut
+        ? `hk-btn-label-collapse-${props.collapseLabel}`
+        : "",
     ]);
 
     return () => {
@@ -51,9 +80,13 @@ export default defineComponent({
       // 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.
+      // width would visibly clip. A `label` prop counts as text (the
+      // responsive collapse handles the narrow end via CSS instead).
       const iconOnly =
-        !slots.default && Boolean(props.icon || props.suffix) && !props.shortcut;
+        !slots.default &&
+        props.label === undefined &&
+        Boolean(props.icon || props.suffix) &&
+        !props.shortcut;
 
       return (
         <button
@@ -62,7 +95,7 @@ export default defineComponent({
           disabled={props.disabled || props.loading}
           class={[buttonClass.value, iconOnly ? "hk-btn-icon-only" : "", attrs.class]}
           style={attrs.style || undefined}
-          aria-label={props.ariaLabel}
+          aria-label={props.ariaLabel ?? props.label}
           aria-busy={props.loading || undefined}
           onClick={(e) => emit("click", e)}
         >
@@ -116,7 +149,11 @@ export default defineComponent({
               <HIcon name={props.icon} size={16} />
             </span>
           ) : null}
-          {slots.default?.()}
+          {props.label !== undefined && props.label !== "" ? (
+            <span class="hk-btn-label">{props.label}</span>
+          ) : (
+            slots.default?.()
+          )}
           {props.suffix ? (
             <span class="hk-btn-suffix">
               <HIcon name={props.suffix} size={16} />

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, 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 { 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, SlidersHorizontal, 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";
 
 
@@ -109,7 +109,7 @@ const REGISTRY: Record<string, Component> = {
   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,
+  SlidersHorizontal, Sparkles, Star, Table, Tag, Thermometer, Trash2, Upload, Video, Volume2,
   VolumeX, Webhook, Wind, Workflow, Wrench, X, Zap, ZoomIn, ZoomOut,
 };