@celestia-island/hikari 0.55.115 → 0.55.117

package/package.json

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

package/src/components/HkAdminTablePage.tsx

@@ -50,8 +50,14 @@ export const HkAdminTablePage = defineComponent({
     rowKey: { type: String, default: "id" },
     emptyTitle: { type: String, default: "" },
     emptyDescription: { type: String as PropType<string | undefined>, default: undefined },
+    /** Left grip column with drag-to-reorder (forwarded to HTable; the
+     *  `reorder` event is forwarded verbatim — indices into `rows`). */
+    draggable: { type: Boolean, default: false },
   },
-  setup(props, { slots }) {
+  emits: {
+    reorder: (_fromIndex: number, _toIndex: number) => true,
+  },
+  setup(props, { emit, slots }) {
 
     return () => {
       const { t } = useI18n();
@@ -96,7 +102,13 @@ export const HkAdminTablePage = defineComponent({
             <div class="hk-admin-table-page-body">{slots.body()}</div>
           ) : (
             <HCard padded={false}>
-              <HTable columns={props.columns} rows={props.rows} rowKey={props.rowKey}>
+              <HTable
+                columns={props.columns}
+                rows={props.rows}
+                rowKey={props.rowKey}
+                draggable={props.draggable}
+                onReorder={(from: number, to: number) => emit("reorder", from, to)}
+              >
                 {slots}
               </HTable>
             </HCard>

package/src/components/HkAuthMethodList.test.tsx

@@ -60,13 +60,18 @@ describe("HkAuthMethodList", () => {
     expect(c.querySelector(".s-auth-methods [role='radiogroup']")).toBeNull();
   });
 
-  it("wraps every tile in a tooltip carrying the provider label", () => {
+  it("wraps every tile in a tooltip carrying the provider label", async () => {
     const c = mount(
       h("div", { class: "s-auth-methods" }, h(HkAuthMethodList, { methods })),
     );
     const wrappers = c.querySelectorAll(".hk-tooltip-wrapper");
     expect(wrappers.length).toBe(2);
-    // The teleported popups exist with the label text (hidden until hover).
+    // Popups mount lazily on first engage — a touch tap mounts each one
+    // immediately — and then carry the label text.
+    for (const w of wrappers) {
+      w.dispatchEvent(new PointerEvent("pointerdown", { pointerType: "touch", bubbles: true }));
+    }
+    await Promise.resolve();
     const popups = [...document.querySelectorAll(".hk-tooltip-popup .hk-tooltip-content")]
       .map((el) => el.textContent);
     expect(popups).toContain("GitHub");

package/src/components/HkCopyBadge.test.tsx

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp, h, defineComponent } from "vue";
+import { createApp, h, defineComponent, nextTick } from "vue";
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
@@ -8,6 +8,7 @@ import HkCopyBadge from "./HkCopyBadge";
 import { useToast } from "../runtime/useToast";
 
 const mounts: Array<{ app: ReturnType<typeof createApp>; container: HTMLElement }> = [];
+const appUnmounts: Array<{ app: ReturnType<typeof createApp> }> = [];
 
 function mount(renderNode: () => ReturnType<typeof h>) {
   const container = document.createElement("div");
@@ -15,6 +16,7 @@ function mount(renderNode: () => ReturnType<typeof h>) {
   const app = createApp({ render: renderNode });
   app.mount(container);
   mounts.push({ app, container });
+  appUnmounts.push({ app });
   return container;
 }
 
@@ -126,18 +128,64 @@ describe("HkCopyBadge", () => {
     expect(writeText).not.toHaveBeenCalled();
   });
 
-  it("renders the custom tooltip text", () => {
+  /** Engage the lazy tooltip without hovering: a touch tap mounts the
+   *  popup immediately (showNow), no fake timers needed. */
+  function engageTooltip(c: HTMLElement) {
+    c.querySelector(".hk-tooltip-wrapper")!.dispatchEvent(
+      new PointerEvent("pointerdown", { pointerType: "touch", bubbles: true }),
+    );
+  }
+
+  it("renders the custom tooltip text", async () => {
     const c = mount(() => h(HkCopyBadge, { tooltip: "Open details" }, () => "#d.132"));
-    const content = c.parentElement!.querySelector(".hk-tooltip-popup .hk-tooltip-content");
+    // The popup mounts lazily on first engage (dense-list contract).
+    expect(document.querySelector(".hk-tooltip-popup")).toBeNull();
+    engageTooltip(c);
+    await nextTick();
+    const content = document.body.querySelector(".hk-tooltip-popup .hk-tooltip-content");
     expect(content?.textContent).toBe("Open details");
   });
 
-  it("shows the localized click-to-copy tooltip by default", () => {
+  it("shows the localized click-to-copy tooltip by default", async () => {
     const c = mount(() => h(HkCopyBadge, null, () => "#d.132"));
-    const content = c.parentElement!.querySelector(".hk-tooltip-popup .hk-tooltip-content");
+    engageTooltip(c);
+    await nextTick();
+    const content = document.body.querySelector(".hk-tooltip-popup .hk-tooltip-content");
     expect(content?.textContent).toBe("Click to copy");
   });
 
+  it("links the badge to the popup via aria-describedby across the whole lifecycle", async () => {
+    const c = mount(() => h(HkCopyBadge, { tooltip: "Open details" }, () => "#d.132"));
+    const badge = c.querySelector(".hk-badge")!;
+
+    // Dormant: no popup, no describedby.
+    expect(badge.getAttribute("aria-describedby")).toBeNull();
+    expect(document.body.querySelector(".hk-tooltip-popup")).toBeNull();
+
+    // Engage: describedby == the popup id.
+    engageTooltip(c);
+    await nextTick();
+    const popup = document.body.querySelector(".hk-tooltip-popup")!;
+    expect(badge.getAttribute("aria-describedby")).toBe(popup.getAttribute("id"));
+    expect(popup.querySelector(".hk-tooltip-content")!.textContent).toBe("Open details");
+
+    // Leave: the attribute flips BACK (slot re-invocation must not stick).
+    c.querySelector(".hk-tooltip-wrapper")!.dispatchEvent(new MouseEvent("mouseleave"));
+    await nextTick();
+    expect(badge.getAttribute("aria-describedby")).toBeNull();
+
+    // Re-engage: returns, reusing the same popup element.
+    engageTooltip(c);
+    await nextTick();
+    expect(badge.getAttribute("aria-describedby")).toBe(
+      document.body.querySelector(".hk-tooltip-popup")!.getAttribute("id"),
+    );
+
+    // Unmount while visible: the teleported popup goes away.
+    appUnmounts.splice(0).forEach(({ app }) => app.unmount());
+    expect(document.body.querySelector(".hk-tooltip-popup")).toBeNull();
+  });
+
   it("renders the inert badge face when disabled", () => {
     const c = mount(() => h(HkCopyBadge, { disabled: true }, () => "#d.132"));
     const badge = c.querySelector(".hk-badge")!;

package/src/components/HkCopyBadge.tsx

@@ -27,9 +27,12 @@ import "./HkCopyBadge.scss";
  *
  * A11y: the tag is a real button (role, tab order, Enter/Space), and the
  * click is stopped from reaching clickable ancestors — a tag inside a
- * selectable row copies without selecting the row. Consumer attrs
- * (class/style/data-*) land on the badge element itself, so a call site
- * skinning the pill keeps working; the tooltip wrapper stays clean.
+ * selectable row copies without selecting the row. The tooltip popup is
+ * linked to the badge via aria-describedby (HkTooltip hands the popup id
+ * down as a slot prop, so the describedby lands on the actual focus
+ * target). Consumer attrs (class/style/data-*) land on the badge element
+ * itself, so a call site skinning the pill keeps working; the tooltip
+ * wrapper stays clean.
  */
 export default defineComponent({
   name: "HkCopyBadge",
@@ -95,7 +98,7 @@ export default defineComponent({
       // itself; only the interactive contract below is ours to add.
       const { class: attrClass, style: attrStyle, ...restAttrs } = attrs;
 
-      const badge = (
+      const buildBadge = (describedBy?: string) => (
         <HBadge
           ref={badgeRef}
           {...restAttrs}
@@ -110,6 +113,7 @@ export default defineComponent({
           color={props.color}
           bgColor={props.bgColor}
           borderColor={props.borderColor}
+          aria-describedby={describedBy}
           {...(props.disabled
             ? {}
             : {
@@ -133,8 +137,13 @@ export default defineComponent({
         </HBadge>
       );
 
-      if (props.disabled) return badge;
-      return <HTooltip text={tooltipText.value}>{badge}</HTooltip>;
+      if (props.disabled) return buildBadge();
+      return (
+        <HTooltip text={tooltipText.value}>
+          {(tip: { popupId: string; visible: boolean }) =>
+            buildBadge(tip?.visible ? tip.popupId : undefined)}
+        </HTooltip>
+      );
     };
   },
 });