@celestia-island/hikari 0.55.107 → 0.55.108

package/package.json

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

@@ -44,7 +44,18 @@
    text and toolbar rows. Font size does NOT scale with the size
    (2026-08-30 user report, Material-Design convention): md and lg share
    --text-base and lg only grows padding/min-height for a larger touch
-   target; sm keeps its compact --text-xs. */
+   target; sm keeps its compact --text-xs. xs (2026-10-02, connection
+   popover action row) shrinks the footprint further for inline popover
+   footers: same --text-xs, tighter padding, 1.375rem min-height, and a
+   13px glyph (HkButton.tsx scales icon/suffix with the size) inside a
+   0.8125rem fixed box so the square-glyph contract keeps its rhythm at
+   the smaller scale. */
+
+.hk-btn-xs {
+  padding: var(--space-4) var(--space-8);
+  font-size: var(--text-xs);
+  min-height: 1.375rem;
+}
 
 .hk-btn-sm {
   padding: var(--space-6) var(--space-12);
@@ -73,6 +84,19 @@
    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-xs .hk-btn-icon,
+.hk-btn-xs .hk-btn-suffix {
+  inline-size: 0.8125rem;
+  block-size: 0.8125rem;
+
+  /* HIcon's smallest span is 1rem; the box scales the span (and the svg
+     fills the span), so the glyph lands at 13px inside the 22px button. */
+  .hk-icon {
+    inline-size: 100%;
+    block-size: 100%;
+  }
+}
+
 .hk-btn-icon,
 .hk-btn-suffix {
   display: inline-flex;
@@ -121,6 +145,10 @@
   box-sizing: border-box;
 }
 
+.hk-btn-xs.hk-btn-icon-only {
+  width: 1.375rem;
+}
+
 .hk-btn-sm.hk-btn-icon-only {
   width: 1.75rem;
 }

package/src/components/HkButton.test.tsx

@@ -62,6 +62,15 @@ describe("HkButton class mapping", () => {
     expect(cls).not.toContain("hk-btn-md");
   });
 
+  it("maps the xs size with its leading icon box", () => {
+    const xs = mount(h(HkButton, { size: "xs", icon: "RotateCw" }, () => "Reconnect"));
+    const xsBtn = button(xs);
+    expect(xsBtn.className).toContain("hk-btn-xs");
+    const box = xsBtn.querySelector(".hk-btn-icon");
+    expect(box, "xs renders the leading icon box").toBeTruthy();
+    expect(box!.querySelector(".hk-icon"), "HIcon span renders").toBeTruthy();
+  });
+
   it("adds the block modifier only when block is set", () => {
     const blocked = mount(h(HkButton, { block: true }, () => "wide"));
     expect(button(blocked).className).toContain("hk-btn-block");
@@ -207,8 +216,16 @@ describe("HkButton icon-only SCSS contract", () => {
     expect(rule).toContain("width: 100%");
   });
 
+  it("shrinks the xs glyph box and scales the HIcon span with it", () => {
+    const rule = scss.match(/\.hk-btn-xs \.hk-btn-icon,\n\.hk-btn-xs \.hk-btn-suffix\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, "xs glyph-box rule must exist").toBeTruthy();
+    expect(rule).toContain("inline-size: 0.8125rem");
+    expect(rule).toContain("inline-size: 100%");
+  });
+
   it("locks each size variant width to its min-height", () => {
     const cases: Array<[string, string]> = [
+      ["xs", "1.375rem"],
       ["sm", "1.75rem"],
       ["md", "2.5rem"],
       ["lg", "2.75rem"],

package/src/components/HkButton.tsx

@@ -11,7 +11,7 @@ export type ButtonVariant =
   | "ghost"
   | "danger"
   | "outline";
-export type ButtonSize = "sm" | "md" | "lg";
+export type ButtonSize = "xs" | "sm" | "md" | "lg";
 
 export default defineComponent({
   name: "HkButton",

package/src/components/HkStatusBar.test.tsx

@@ -345,6 +345,9 @@ describe("HkStatusBar", () => {
     expect(row, "actions row renders").toBeTruthy();
     const button = row.querySelector<HTMLButtonElement>("button")!;
     expect(button.textContent).toContain("Reconnect now");
+    // 2026-10-02 user direction: small buttons with a leading glyph.
+    expect(button.className).toContain("hk-btn-xs");
+    expect(button.querySelector(".hk-btn-icon svg"), "leading glyph renders").toBeTruthy();
     expect(panel.textContent).not.toContain("Click to retry");
     button.click();
     expect(onRetry, "popover button click retries").toHaveBeenCalledTimes(1);

package/src/components/HkStatusBar.tsx

@@ -458,7 +458,12 @@ export const HkStatusBar = defineComponent({
                   }}
                 >
                   {showRetryButton && (
-                    <HkButton size="sm" variant="secondary" onClick={onRetryButtonClick}>
+                    <HkButton
+                      size="xs"
+                      variant="secondary"
+                      icon="RotateCw"
+                      onClick={onRetryButtonClick}
+                    >
                       {t("hikari::statusBar.retryNow", "Reconnect now")}
                     </HkButton>
                   )}