@celestia-island/hikari 0.55.196 → 0.55.197

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@celestia-island/hikari",
-  "version": "0.55.196",
+  "version": "0.55.197",
   "private": false,
   "type": "module",
   "description": "Hikari UI library, Vue 3 runtime — one design system for Vue 3 and Rust/WASM applications",

package/src/components/HkTabs.scss

@@ -166,6 +166,13 @@
 
 /* === Panel (pill / tablist mode) === */
 
+/* The panel area is ONE HkTransitionContainer (`.hk-tabs-panels`,
+   aliasing `.hk-tc`) keyed on the active tab: HkCrossfade dissolves the
+   outgoing panel in a shared grid cell while the container's inline
+   height transition morphs to the incoming panel's natural size. Both
+   generations carry data-active through the dissolve, so the :not rule
+   below only ever hides a genuinely inactive render, never a
+   dissolving one. */
 .hk-tabs-panel {
   /* No outline suppression: the panel div carries no tabindex and can
      never take focus, so there is nothing to suppress. */

package/src/components/HkTabs.test.ts

@@ -1,10 +1,12 @@
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { afterEach, describe, expect, it } from "vitest";
+import { afterEach, describe, expect, it, vi } from "vitest";
 import { createApp, defineComponent, h, nextTick, ref } from "vue";
 
 import HkTabs from "./HkTabs";
+import { CROSSFADE_WATCHDOG_MS } from "./HkCrossfade";
+import { DEFAULT_ANIMATION_DURATION_MS } from "../composables/useAnimationLoop";
 
 const here = dirname(fileURLToPath(import.meta.url));
 
@@ -515,3 +517,109 @@ describe("HkTabs segmented variant", () => {
     expect(itemRule![1]).not.toMatch(/\bflex:/);
   });
 });
+
+describe("HkTabs panel morph (HkTransitionContainer consumption)", () => {
+  /** Pill mode with panels ON (renderPanels defaults true) and a slot
+   *  per tab — the surface the morph container plugs into. */
+  function mountWithPanels(
+    extra: Record<string, unknown> = {},
+    slots?: Record<string, () => unknown>,
+  ): { container: HTMLElement; active: { value: string } } {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    containers.push(container);
+    const active = ref("a");
+    const panelSlots = slots ?? {
+      a: () => h("p", { class: "body" }, "panel-alpha"),
+      b: () => h("p", { class: "body" }, "panel-beta"),
+      c: () => h("p", { class: "body" }, "panel-gamma"),
+    };
+    const Wrapper = defineComponent({
+      setup() {
+        return () =>
+          h(HkTabs, {
+            tabs: [
+              { key: "a", label: "Alpha" },
+              { key: "b", label: "Beta" },
+              { key: "c", label: "Gamma" },
+            ],
+            ...extra,
+            modelValue: active.value,
+            "onUpdate:modelValue": (v: string) => { active.value = v; },
+          }, panelSlots);
+      },
+    });
+    const app = createApp(Wrapper);
+    mounts.push(app);
+    app.mount(container);
+    return { container, active };
+  }
+
+  function freezeRaf(): void {
+    vi.stubGlobal("requestAnimationFrame", (_cb: FrameRequestCallback) => 0 as unknown as number);
+    vi.stubGlobal("cancelAnimationFrame", () => {});
+  }
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("renders the active panel inside the height-morph container and swaps it on tab change", async () => {
+    vi.useFakeTimers();
+    const { container, active } = mountWithPanels();
+    // ONE morph host (`.hk-tabs-panels` aliasing `.hk-tc`) below the
+    // strip, carrying the family height-morph transition contract.
+    const host = container.querySelector<HTMLElement>(".hk-tabs-panels.hk-tc");
+    expect(host).not.toBeNull();
+    expect(host?.style.transitionProperty).toBe("height");
+    expect(host?.style.transitionDuration).toBe(`${DEFAULT_ANIMATION_DURATION_MS}ms`);
+    // It owns exactly ONE panel — the active tab's.
+    const panels = container.querySelectorAll<HTMLElement>(".hk-tabs-panel");
+    expect(panels).toHaveLength(1);
+    expect(panels[0].hasAttribute("data-active")).toBe(true);
+    expect(panels[0].getAttribute("role")).toBe("tabpanel");
+    expect(container.textContent).toContain("panel-alpha");
+
+    active.value = "b";
+    await nextTick();
+    // Past the watchdog budget: the dissolve settled on Beta's panel —
+    // content, crossfade key and single item all moved with the tab.
+    await vi.advanceTimersByTimeAsync(CROSSFADE_WATCHDOG_MS + 100);
+    const settled = container.querySelectorAll<HTMLElement>(".hk-tabs-panel");
+    expect(settled).toHaveLength(1);
+    expect(settled[0].textContent).toContain("panel-beta");
+    const item = container.querySelector<HTMLElement>(".hk-crossfade-item");
+    expect(item?.dataset.crossfadeKey).toBe("b");
+  });
+
+  it("keeps both panel generations data-active mid-dissolve (no display:none pop)", async () => {
+    vi.useFakeTimers();
+    freezeRaf();
+    const { container, active } = mountWithPanels();
+    active.value = "b";
+    await nextTick();
+    await vi.advanceTimersByTimeAsync(100); // inside the dissolve window
+    // Both generations on stage and BOTH marked active: the leaving
+    // panel keeps its last-rendered data-active, so the stylesheet's
+    // `:not([data-active])` hide never fires mid-dissolve — the swap
+    // is HkCrossfade's stacked-grid dissolve, not an instant toggle.
+    const mid = container.querySelectorAll<HTMLElement>(".hk-tabs-panel");
+    expect(mid).toHaveLength(2);
+    expect(mid[0].hasAttribute("data-active")).toBe(true);
+    expect(mid[1].hasAttribute("data-active")).toBe(true);
+    expect(mid[0].textContent).toContain("panel-alpha");
+    expect(mid[1].textContent).toContain("panel-beta");
+  });
+
+  it("drops the panel area entirely while the active option is merged away", () => {
+    const { container } = mountWithPanels(
+      { mergeKeys: ["a"] },
+      { a: () => h("p", "panel-alpha"), merged: () => h("span", "m") },
+    );
+    // Pill-mode merged contract: merged options' panels are not
+    // rendered while merged — no host, no panel.
+    expect(container.querySelector(".hk-tabs-panels")).toBeNull();
+    expect(container.querySelector(".hk-tabs-panel")).toBeNull();
+  });
+});

package/src/components/HkTabs.tsx

@@ -4,6 +4,7 @@ import "./HkTabs.scss";
 import HkScrollContainer from "./HkScrollContainer";
 import HkHoverRevealAction from "./HkHoverRevealAction";
 import HkIconButton from "./HkIconButton";
+import HkTransitionContainer from "./HkTransitionContainer";
 import { iconByName } from "../composables/iconRegistry";
 import { useI18n } from "../i18n/context";
 import { clearLeaveGeometry, pinLeaveGeometry, type LeaveBoxSnapshot } from "../utils/dom";
@@ -88,6 +89,12 @@ interface ScrollerExpose {
  *   the row is then divided into one equal `1fr` grid track per unit,
  *   so merging Light+Dark into the altitude strip swaps TWO one-unit
  *   slots for ONE two-unit cell and nothing else on the strip moves;
+ * - morphing tab panels (pill mode, `renderPanels`): the panel area is
+ *   ONE HkTransitionContainer keyed on the active tab — switching tabs
+ *   dissolves the outgoing panel through HkCrossfade while the
+ *   container height-morphs to the incoming panel's natural size
+ *   (panels never had switch CSS before — inactive ones were simply
+ *   display:none'd, so nothing visual is layered away);
  * - full arrow-key navigation (arrows/Home/End, wrapping, disabled tabs
  *   skipped, selection follows focus) and roving tabindex.
  */
@@ -435,6 +442,13 @@ export default defineComponent({
 
     return () => {
       const mergedHead = mergedRun.value[0];
+      /** The ONE panel on stage: the active tab's, when panels render
+       *  (pill mode only) and the tab is not collapsed into the merged
+       *  cell — merged options' panels are not rendered while merged
+       *  (unchanged contract; the whole container drops out instead). */
+      const panelTab = props.renderPanels && !isSegmented.value
+        ? props.tabs.find((tb) => tb.key === props.modelValue && !isMergedTab(tb))
+        : undefined;
       const listChildren = [
         <div
           key="$indicator"
@@ -553,16 +567,20 @@ export default defineComponent({
             </HkScrollContainer>
           ) : list}
 
-          {props.renderPanels && !isSegmented.value && props.tabs.filter((tab) => !isMergedTab(tab)).map((tab) => (
-            <div
-              key={tab.key}
-              role="tabpanel"
-              class="hk-tabs-panel"
-              data-active={(tab.key === props.modelValue) || undefined}
-            >
-              {tab.key === props.modelValue && slots[tab.key]?.()}
-            </div>
-          ))}
+          {/* Panel area (pill mode, renderPanels): ONE morph container
+              keyed on the active tab (2026-10-22 animation direction) —
+              HkCrossfade dissolves the outgoing panel in the shared grid
+              cell while the container's inline-height transition rides the
+              incoming panel's natural size. The strip's own hk-tabs-swap
+              transitions are untouched; a merged-active strip renders no
+              panel at all, exactly as before. */}
+          {panelTab && (
+            <HkTransitionContainer swapKey={panelTab.key} class="hk-tabs-panels">
+              <div role="tabpanel" class="hk-tabs-panel" data-active>
+                {slots[panelTab.key]?.()}
+              </div>
+            </HkTransitionContainer>
+          )}
         </div>
       );