@celestia-island/hikari 0.55.11 → 0.55.12

package/package.json

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

package/src/DemoApp.tsx

@@ -537,13 +537,14 @@ export default defineComponent({
           <h2>HEmptyState</h2>
           <div class="col">
             <HEmptyState
+              boxed
               title="No items"
               description="Nothing to show here yet."
               v-slots={{ action: () => <HButton size="sm">Create item</HButton> }}
             />
             <HEmptyState
               title="Nothing found"
-              description="Search returned no matches — try a different query."
+              description="Bare by default — the host (card/modal/panel) provides the surface; pass boxed when the empty state stands on the page alone."
               icon={PackageOpen}
             />
             <HEmptyState

package/src/components/HkAdminTablePage.tsx

@@ -53,7 +53,7 @@ export const HkAdminTablePage = defineComponent({
           ) : props.loading && !props.rows.length ? (
             <HSpinner center />
           ) : !props.rows.length ? (
-            <HEmptyState title={emptyTitle} description={props.emptyDescription} />
+            <HEmptyState boxed title={emptyTitle} description={props.emptyDescription} />
           ) : (
             <HCard padded={false}>
               <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>

package/src/components/HkEmptyState.scss

@@ -5,11 +5,17 @@
   justify-content: center;
   padding: var(--space-48, 3rem) var(--space-16, 1rem);
   text-align: center;
+  box-sizing: border-box;
+}
+
+/* The component's own surface. Opt-in (`boxed`): the host — card, modal,
+   panel — usually already provides a surface, and an always-on box turned
+   every in-card empty state into a nested placeholder layer. */
+.hk-empty-state--boxed {
   background: var(--hk-empty-bg, var(--hi-color-surface, rgba(240,244,248,0.95)));
   backdrop-filter: blur(var(--blur-sm, 8px));
   border: 1px solid var(--hi-color-border, rgba(100,100,100,0.06));
   border-radius: var(--radius-md, 0.5rem);
-  box-sizing: border-box;
 }
 
 .hk-empty-icon {

package/src/components/HkEmptyState.surface.contract.test.ts

@@ -0,0 +1,63 @@
+/**
+ * Source contract: the empty state's surface is OPT-IN (`boxed`). The
+ * base `.hk-empty-state` class must stay a bare layout block — the four
+ * surface declarations (background, blur, border, radius) live only in
+ * `.hk-empty-state--boxed`. Pinned because every in-card empty state in
+ * the family reads as a second nested placeholder layer the moment the
+ * surface creeps back into the base class (hikari #567); a class-name
+ * test alone cannot catch that, the compiled contract lives here.
+ */
+import { 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 SURFACE_PROPERTIES = [
+  "background:",
+  "backdrop-filter:",
+  "border:",
+  "border-radius:",
+] as const;
+
+/** Extract one top-level rule block's body (`{ ... }`) by selector. */
+function ruleBody(css: string, selector: string): string {
+  const start = css.indexOf(`${selector} {`);
+  expect(start, `rule ${selector} present`).toBeGreaterThanOrEqual(0);
+  const open = css.indexOf("{", start);
+  const close = css.indexOf("}", open);
+  return css.slice(open + 1, close);
+}
+
+describe("HkEmptyState surface contract", () => {
+  const css = readFileSync(join(here, "HkEmptyState.scss"), "utf-8");
+
+  it("keeps the base class free of surface declarations", () => {
+    const base = ruleBody(css, ".hk-empty-state");
+    for (const property of SURFACE_PROPERTIES) {
+      expect(base).not.toContain(property);
+    }
+  });
+
+  it("declares the full surface on the opt-in --boxed rule only", () => {
+    const boxed = ruleBody(css, ".hk-empty-state--boxed");
+    for (const property of SURFACE_PROPERTIES) {
+      expect(boxed).toContain(property);
+    }
+    // The surface is the ONLY rule allowed to paint: with the --boxed rule
+    // (and comments, whose prose may name the properties) removed, no
+    // declaration of a surface property may remain anywhere in the sheet.
+    // (The sr-only reset's `border: 0` and box-sizing's `border-box` are
+    // not surfaces — the assertions match the painted forms.)
+    const commentFree = css.replace(/\/\*[\s\S]*?\*\//g, "");
+    const withoutBoxed = commentFree.replace(
+      /\.hk-empty-state--boxed\s*\{[^}]*\}/g,
+      "",
+    );
+    expect(withoutBoxed).not.toContain("background:");
+    expect(withoutBoxed).not.toContain("backdrop-filter:");
+    expect(withoutBoxed).not.toContain("border: 1px");
+    expect(withoutBoxed).not.toContain("border-radius:");
+  });
+});

package/src/components/HkEmptyState.test.tsx

@@ -135,4 +135,16 @@ describe("HkEmptyState", () => {
     expect(cls).toContain("hk-empty-state--fill");
     expect(cls).not.toContain("hk-empty-state--page");
   });
+
+  it("does not draw its own surface by default (the host provides it)", () => {
+    const c = mount(h(HkEmptyState, { title: "x" }));
+    const cls = (c.querySelector(".hk-empty-state") as HTMLElement).className;
+    expect(cls).not.toContain("hk-empty-state--boxed");
+  });
+
+  it("opt-in boxed restores the surface modifier", () => {
+    const c = mount(h(HkEmptyState, { title: "x", boxed: true }));
+    const cls = (c.querySelector(".hk-empty-state") as HTMLElement).className;
+    expect(cls).toContain("hk-empty-state--boxed");
+  });
 });

package/src/components/HkEmptyState.tsx

@@ -19,6 +19,12 @@ export default defineComponent({
       type: String as PropType<"page" | "fill">,
       default: "page",
     },
+    /** Draw the component's own surface (background, border, blur). Off by
+     *  default: most hosts (cards, modals, panels) already provide a
+     *  surface, and a boxed empty state inside them reads as a second
+     *  nested placeholder layer. Set this only when the empty state stands
+     *  directly on the page with no outer frame of its own. */
+    boxed: { type: Boolean, default: false },
   },
   setup(props, { slots }) {
     const { t } = useI18n();
@@ -28,6 +34,7 @@ export default defineComponent({
           "hk-empty-state",
           props.fit === "fill" ? "hk-empty-state--fill" : "hk-empty-state--page",
           props.loading && "hk-empty-state--loading",
+          props.boxed && "hk-empty-state--boxed",
         ]}
         role={props.loading ? "status" : undefined}
         aria-busy={props.loading ? "true" : undefined}