@celestia-island/hikari 0.40.23 → 0.40.24

package/package.json

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

package/src/components/HkPopover.scss

@@ -109,6 +109,16 @@
    * rule's max-content width would over-constrain it (left+right+width
    * drops `right` in LTR) and dock it at content width instead. */
   width: auto;
+  /* The base .hk-popover-panel max-width clamp (calc(100vw - 16px), the
+   * anchored panel's ratchet guard) must NOT leak into the sheet: with
+   * the inline left:0 + right:0 docking the clamp over-constrains the
+   * used width and LTR drops the `right` constraint — the sheet docks
+   * flush left but stops 16px short of the right viewport edge (2026-09-08
+   * user report: a mysterious right-hand gap on the secondary windows,
+   * present on every popover-family sheet and never on the HkModal /
+   * HkSelectPanel sheets, hence "some have it, some don't"). The inline
+   * left/right pair alone owns the sheet's horizontal geometry. */
+  max-width: none;
   border-radius: var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  var(--hk-modal-radius, var(--hi-radius-lg, 12px))
                  0 0;

package/src/components/HkPopover.sheet-maxwidth.test.ts

@@ -0,0 +1,41 @@
+/**
+ * Source contract for the popover sheet viewport width (2026-09-08 user
+ * report: the mobile bottom sheets showed a mysterious right-hand gap —
+ * the sheet docked flush left but stopped 16px short of the right
+ * viewport edge, on every popover-family sheet and never on the HkModal
+ * / HkSelectPanel sheets, hence "some have it, some don't").
+ *
+ * Root cause: the base `.hk-popover-panel` rule sets
+ * `max-width: calc(100vw - 2 * 8px)` (the anchored panel's
+ * anti-ratchet clamp, #421). The mobile sheet branch overrides
+ * `width: auto` but inherited the max-width, over-constraining the
+ * inline `left: 0; right: 0` docking — the used width resolved to
+ * 100vw - 16px and LTR dropped the `right` constraint. Pinned here so
+ * a refactor cannot silently reintroduce the leak.
+ */
+import { beforeAll, 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 scss = readFileSync(join(here, "HkPopover.scss"), "utf-8");
+
+describe("HkPopover sheet viewport width contract", () => {
+  let block = "";
+  beforeAll(() => {
+    block = scss.match(/\.hk-popover-panel\.hk-is-sheet\s*{[\s\S]*?^\}/m)?.[0] ?? "";
+  });
+
+  it("neutralizes the base max-width clamp inside the sheet block", () => {
+    expect(block).toContain("max-width: none;");
+  });
+
+  it("keeps the sheet width content-independent (width: auto)", () => {
+    expect(block).toContain("width: auto;");
+  });
+
+  it("declares max-width: none after the width override (ordering sanity)", () => {
+    expect(block.indexOf("max-width: none")).toBeGreaterThan(block.indexOf("width: auto"));
+  });
+});

package/src/components/HkThemeToggle.ghost-chrome.test.ts

@@ -0,0 +1,41 @@
+/**
+ * Source contract for the theme-toggle trigger chrome (2026-09-08 user
+ * report: the bordered surface box read as a mystery outline in the
+ * header and fought the host themes — the faint border, the host
+ * override layer and the `--hk-theme-toggle-btn-border` var never
+ * agreed). The trigger is now the STANDARD ghost icon-button chrome
+ * (same as `.hk-btn-ghost` / the HkIconButton ghost variant beside it):
+ * transparent at rest, primary wash on hover, no border, no surface,
+ * no shadow. Pinned here so the bordered-box chrome cannot silently
+ * return.
+ */
+import { beforeAll, 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 src = readFileSync(join(here, "HkThemeToggle.scss"), "utf-8");
+
+describe("HkThemeToggle ghost trigger chrome contract", () => {
+  let block = "";
+  beforeAll(() => {
+    block = src.match(/\.s-theme-toggle-btn\s*{[^}]*}/)?.[0] ?? "";
+  });
+
+  it("paints no border on the trigger (border: none)", () => {
+    expect(block).toContain("border: none;");
+  });
+
+  it("keeps the rest state transparent (no surface box)", () => {
+    expect(block).toContain("background: transparent;");
+  });
+
+  it("removes the per-theme border var entirely", () => {
+    expect(src).not.toContain("--hk-theme-toggle-btn-border");
+  });
+
+  it("retains a visible focus ring via :focus-visible", () => {
+    expect(src).toMatch(/\.s-theme-toggle-btn:focus-visible\s*{[^}]*}/);
+  });
+});

package/src/components/HkThemeToggle.scss

@@ -13,15 +13,26 @@
   height: 1.75rem;
   min-width: 1.75rem;
   padding: 0 var(--space-6, 0.375rem);
-  /* Host/theme-tunable: borderless chrome sets --hk-theme-toggle-btn-border:
-   * transparent (e.g. the BA brand look). */
-  border: 1px solid var(--hk-theme-toggle-btn-border, var(--border-faint, rgb(var(--color-border) / 12%)));
-  background: rgb(var(--color-surface));
-  color: rgb(var(--color-text-secondary, var(--color-muted)));
+  /* Standard ghost icon-button chrome (2026-09-08 user report: the
+   * bordered surface box read as a mystery outline in the header and
+   * fought the host themes — the faint border, the host override layer
+   * and the border-var never agreed). The trigger now matches the
+   * standard ghost buttons beside it (same chrome as .hk-btn-ghost and
+   * the HkIconButton ghost variant): transparent at rest, primary wash
+   * on hover, no border, no surface, no shadow, no per-theme border var. */
+  border: none;
+  border-radius: var(--radius-sm, 6px);
+  background: transparent;
+  color: rgb(var(--color-text, var(--color-text-secondary, var(--color-muted))));
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
 }
 
+.s-theme-toggle-btn:focus-visible {
+  outline: 2px solid rgb(var(--color-primary));
+  outline-offset: 1px;
+}
+
 /* Host strip under the mode group (mode-extra slot). */
 .s-theme-mode-extra {
   margin-top: var(--space-8, 0.5rem);
@@ -33,15 +44,6 @@
   color: rgb(var(--color-text));
 }
 
-.s-theme-toggle-btn[data-variant="main"] {
-  border-radius: var(--radius-sm, 6px) 0 0 var(--radius-sm, 6px);
-  border-right: none;
-}
-
-.s-theme-toggle-btn[data-variant="arrow"] {
-  border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0;
-}
-
 .s-theme-menu {
   display: flex;
   flex-direction: column;