@celestia-island/hikari 0.41.2 → 0.41.5

package/package.json

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

package/src/components/HkSelectionGrid.scss

@@ -11,6 +11,15 @@
   margin: 0 0 0.5rem;
 }
 
+/* Foot note under the grid — same register as .hk-input-hint so the
+   helper line reads identically wherever it appears in a form. */
+.hk-selection-grid-hint {
+  margin: var(--space-4, 0.25rem) 0 0;
+  font-size: var(--text-xs, 0.75rem);
+  color: color-mix(in srgb, rgb(var(--color-muted)) 70%, rgb(var(--color-background)));
+  text-align: start;
+}
+
 .hk-selection-grid-grid {
   display: grid;
   gap: 0.5rem;

package/src/components/HkSelectionGrid.test.tsx

@@ -0,0 +1,119 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { createApp, h } from "vue";
+
+import HkSelectionGrid, { type SelectionGridItem } from "./HkSelectionGrid";
+
+/**
+ * HkSelectionGrid contract tests:
+ * - single mode keys the lit state off `selectedId` and lights exactly one card
+ * - multi mode keys it off `selectedIds` membership and lights every listed id
+ * - multi mode never lets `selectedId` leak through (the two selectors stay
+ *   independent, so a stale single id cannot double-light a card)
+ * - `select` fires for already-selected cards too — the consumer owns the
+ *   toggle, the grid only reports the click
+ * - the optional `hint` renders under the grid and is absent when unset
+ *
+ * House style: raw createApp mounts on a shared container list torn down
+ * after each case; DOM assertions via document queries.
+ */
+
+const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+
+function mount(node: ReturnType<typeof h>) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const app = createApp({ render: () => node });
+  app.mount(container);
+  mounts.push({ app, container });
+  return container;
+}
+
+afterEach(() => {
+  for (const { app, container } of mounts.splice(0)) {
+    app.unmount();
+    container.remove();
+  }
+});
+
+const ITEMS: SelectionGridItem[] = [
+  { id: "text", title: "Text" },
+  { id: "vision", title: "Vision" },
+  { id: "gen", title: "Generation" },
+];
+
+function cards(container: HTMLElement) {
+  return Array.from(container.querySelectorAll<HTMLElement>(".hk-selection-grid-item"));
+}
+
+function litIds(container: HTMLElement) {
+  return cards(container)
+    .filter((el) => el.hasAttribute("data-selected"))
+    .map((el) => el.querySelector(".hk-selection-grid-name")?.textContent);
+}
+
+describe("HkSelectionGrid single mode", () => {
+  it("lights only the card matching selectedId", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS, selectedId: "vision" }));
+    expect(litIds(container)).toEqual(["Vision"]);
+  });
+
+  it("lights nothing when selectedId is undefined", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS }));
+    expect(litIds(container)).toEqual([]);
+  });
+
+  it("ignores selectedIds unless multi is on", () => {
+    const container = mount(
+      h(HkSelectionGrid, { items: ITEMS, selectedIds: ["text", "gen"], selectedId: "vision" }),
+    );
+    expect(litIds(container)).toEqual(["Vision"]);
+  });
+});
+
+describe("HkSelectionGrid multi mode", () => {
+  it("lights every id listed in selectedIds", () => {
+    const container = mount(
+      h(HkSelectionGrid, { items: ITEMS, multi: true, selectedIds: ["text", "gen"] }),
+    );
+    expect(litIds(container)).toEqual(["Text", "Generation"]);
+  });
+
+  it("lights nothing when selectedIds is empty", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS, multi: true }));
+    expect(litIds(container)).toEqual([]);
+  });
+
+  it("does not read selectedId while multi is on", () => {
+    const container = mount(
+      h(HkSelectionGrid, { items: ITEMS, multi: true, selectedIds: ["gen"], selectedId: "text" }),
+    );
+    expect(litIds(container)).toEqual(["Generation"]);
+  });
+
+  it("emits select for an already-selected card so the consumer can toggle it off", () => {
+    const seen: string[] = [];
+    const container = mount(
+      h(HkSelectionGrid, {
+        items: ITEMS,
+        multi: true,
+        selectedIds: ["vision"],
+        onSelect: (item: SelectionGridItem) => seen.push(item.id),
+      }),
+    );
+    cards(container)[1]!.click();
+    expect(seen).toEqual(["vision"]);
+  });
+});
+
+describe("HkSelectionGrid hint", () => {
+  it("renders the hint line under the grid when provided", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS, hint: "Pick one or more" }));
+    const hint = container.querySelector(".hk-selection-grid-hint");
+    expect(hint?.textContent).toBe("Pick one or more");
+  });
+
+  it("renders no hint node when the prop is unset", () => {
+    const container = mount(h(HkSelectionGrid, { items: ITEMS }));
+    expect(container.querySelector(".hk-selection-grid-hint")).toBeNull();
+  });
+});

package/src/components/HkSelectionGrid.tsx

@@ -19,8 +19,14 @@ export default defineComponent({
   props: {
     items: { type: Array as PropType<SelectionGridItem[]>, required: true },
     selectedId: { type: String, default: undefined },
+    selectedIds: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    multi: { type: Boolean, default: false },
     columns: { type: Number as PropType<SelectionGridCols>, default: 2 },
     groupTitle: { type: String, default: undefined },
+    hint: { type: String, default: undefined },
     dense: { type: Boolean, default: false },
   },
   emits: {
@@ -41,7 +47,9 @@ export default defineComponent({
             data-dense={props.dense || undefined}
           >
             {props.items.map((item) => {
-              const isSelected = props.selectedId === item.id;
+              const isSelected = props.multi
+                ? props.selectedIds.includes(item.id)
+                : props.selectedId === item.id;
               const ItemIcon = item.icon;
 
               return (
@@ -93,6 +101,9 @@ export default defineComponent({
               );
             })}
           </div>
+          {props.hint && (
+            <p class="hk-selection-grid-hint">{props.hint}</p>
+          )}
         </div>
       );
     };