@celestia-island/hikari 0.55.6 → 0.55.8

package/package.json

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

package/src/components/HkAuthCard.test.tsx

@@ -1,3 +1,7 @@
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { createApp, h } from "vue";
 
@@ -257,3 +261,33 @@ describe("HkAuthCard", () => {
     expect(vi.getTimerCount()).toBe(0);
   });
 });
+
+// SCSS spacing contract (house pattern, cf. HkButton icon-only SCSS
+// contract): happy-dom does not lay out, so the vertical breathing room of
+// the `methods` slot container is asserted on the sheet text. Block
+// comments are stripped first so a commented-out declaration cannot
+// satisfy the guard.
+describe("HkAuthCard methods-block SCSS spacing contract", () => {
+  const here = dirname(fileURLToPath(import.meta.url));
+  const scss = readFileSync(join(here, "../styles/admin-tokens.scss"), "utf-8")
+    .replace(/\/\*[\s\S]*?\*\//g, "");
+
+  it("bands the third-party methods block off its neighbours", () => {
+    // 2026-09-16 user feedback: with only `margin-top: 16px` and no vertical
+    // padding, the divider row sat on the submit button and the tiles sat on
+    // the footer rows — the block needs its own top/bottom breathing room.
+    const rule = scss.match(/\.s-auth-methods\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, ".s-auth-methods rule must exist in admin-tokens.scss").toBeTruthy();
+    expect(rule).toContain("padding: var(--space-8, 0.5rem) var(--space-32, 2rem)");
+    expect(rule).toContain("margin-top: var(--space-24, 1.5rem)");
+  });
+
+  it("keeps the form's collapsed bottom padding feeding that band", () => {
+    // The 40px form→divider distance is composed (8px form padding-bottom
+    // via :has + 24px margin-top + 8px own padding); losing the collapse
+    // would swap in the form's default 24px bottom padding instead.
+    const rule = scss.match(/\.s-auth-form:has\(\+ \.s-auth-methods\)\s*{[^}]*}/)?.[0] ?? "";
+    expect(rule, ":has collapse rule must exist").toBeTruthy();
+    expect(rule).toContain("padding-bottom: var(--space-8, 0.5rem)");
+  });
+});

package/src/components/HkModal.scss

@@ -240,7 +240,10 @@
   display: flex;
   align-items: center;
   gap: var(--space-2, 4px);
-  margin-inline-start: var(--space-8, 8px);
+  /* Pin to inline-end: the header is space-between, so without this the
+     actions cell becomes the middle child and floats to the center
+     (user report 2026-09-16 — the login sheet's gear landed mid-header). */
+  margin-inline-start: auto;
   flex-shrink: 0;
 }
 

package/src/components/HkTimeline.scss

@@ -400,15 +400,12 @@
     outline-offset: 2px;
   }
 
+  /* Highlight only — no scale pop: enlarging the node clipped it against
+     tight hosts (a top-of-rail circle poked out of its overflow box) and
+     read as jitter (user direction 2026-09-16). */
   &:hover [data-el="indicator"] {
-    transform: scale(1.12);
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--hi-color-primary) 15%, transparent);
-    transition: transform var(--duration-normal, 0.3s) ease, box-shadow var(--duration-normal, 0.3s) ease;
-  }
-
-  // Press feedback mirroring the hover pop (role="button" affordance).
-  &:active [data-el="indicator"] {
-    transform: scale(0.96);
+    transition: box-shadow var(--duration-normal, 0.3s) ease;
   }
 }
 
@@ -416,8 +413,8 @@
 // animation under reduced motion, keeping the state change itself
 // (house pattern: HkIconButton.scss).
 @media (prefers-reduced-motion: reduce) {
-  .hk-timeline-step[data-clickable]:hover [data-el="indicator"],
-  .hk-timeline-step[data-clickable]:active [data-el="indicator"] {
+  .hk-timeline-step[data-clickable]:hover [data-el="indicator"] {
     transition: none;
   }
 }
+}

package/src/styles/admin-tokens.scss

@@ -924,18 +924,22 @@
    slot, usually HkAuthMethodList). Same side padding as the form and the
    footer so the buttons line up exactly with the inputs; the footer keeps
    its fit-content centered-group behavior because the buttons live here,
-   not in the footer. */
+   not in the footer. The 8px top/bottom padding bands the divider row off
+   the submit button above and the tiles off the footer rows below — a bare
+   16px margin sat the divider on the button and the tiles on the footer
+   (2026-09-16 user feedback). */
 .s-auth-methods {
   display: flex;
   flex-direction: column;
   gap: var(--space-8, 0.5rem);
-  padding: 0 var(--space-32, 2rem);
-  margin-top: var(--space-16, 1rem);
+  padding: var(--space-8, 0.5rem) var(--space-32, 2rem);
+  margin-top: var(--space-24, 1.5rem);
 }
 
 /* Keep the vertical rhythm when the block sits between form and footer:
-   form → 24px → divider row (8px collapsed padding + 16px margin), and
-   buttons → 16px → footer rows (the footer's own margin-top). */
+   form → 40px → divider row (8px collapsed padding + 24px margin + 8px
+   padding), and buttons → 24px → footer rows (8px padding + the footer's
+   16px margin-top). */
 .s-auth-form:has(+ .s-auth-methods) {
   padding-bottom: var(--space-8, 0.5rem);
 }