@jskit-ai/shell-web 0.1.179 → 0.1.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/shell-web",
-  "version": "0.1.179",
+  "version": "0.1.180",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -31,7 +31,7 @@
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/kernel": "0.1.175",
+    "@jskit-ai/kernel": "0.1.176",
     "pinia": "^3.0.4",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/src/client/components/ShellNavigationTooltip.vue

@@ -17,6 +17,7 @@ const theme = useTheme();
     :theme="theme.name.value"
     location="end"
     content-class="shell-navigation-tooltip"
+    :open-delay="400"
     :open-on-focus="true"
     :open-on-hover="true"
   >
@@ -32,6 +33,5 @@ const theme = useTheme();
     rgb(var(--v-theme-inverse-surface, var(--v-theme-on-surface))) !important;
   color:
     rgb(var(--v-theme-inverse-on-surface, var(--v-theme-surface))) !important;
-  opacity: 1 !important;
 }
 </style>

package/test/adaptiveShell.browser.test.js

@@ -57,6 +57,7 @@ async function assertTooltipContrast(page, linkName, interaction) {
   }
   const tooltip = page.locator(".shell-navigation-tooltip").filter({ hasText: linkName }).last();
   await expect(tooltip).toBeVisible();
+  await expect(tooltip).toHaveCSS("opacity", "1");
   const colors = await tooltip.evaluate((element) => {
     const style = window.getComputedStyle(element);
     return {
@@ -76,6 +77,49 @@ async function assertTooltipContrast(page, linkName, interaction) {
   await page.keyboard.press("Escape");
 }
 
+async function assertRapidTooltipTraversal(page) {
+  const result = await page.locator(".shell-menu-link-item").evaluateAll(async (links) => {
+    const pause = (duration) => new Promise((resolve) => window.setTimeout(resolve, duration));
+    const countVisibleTooltips = () => Array.from(
+      document.querySelectorAll(".shell-navigation-tooltip")
+    ).filter((element) => {
+      const style = window.getComputedStyle(element);
+      const rect = element.getBoundingClientRect();
+      return (
+        style.display !== "none" &&
+        style.visibility !== "hidden" &&
+        Number(style.opacity) > 0 &&
+        rect.width > 0 &&
+        rect.height > 0
+      );
+    }).length;
+
+    const samples = [];
+    let activeLink = null;
+    for (const link of links) {
+      activeLink?.dispatchEvent(new MouseEvent("mouseleave"));
+      link.dispatchEvent(new MouseEvent("mouseenter"));
+      activeLink = link;
+      await pause(24);
+      samples.push(countVisibleTooltips());
+    }
+    activeLink?.dispatchEvent(new MouseEvent("mouseleave"));
+    await pause(100);
+
+    return {
+      afterLeaving: countVisibleTooltips(),
+      maximumVisible: Math.max(0, ...samples)
+    };
+  });
+
+  assert.equal(
+    result.maximumVisible,
+    0,
+    "Briefly crossing navigation links must not leave tooltip overlays on screen."
+  );
+  assert.equal(result.afterLeaving, 0, "Navigation tooltips must remain hidden after traversal.");
+}
+
 async function assertDrawerFit(page) {
   const drawer = page.getByTestId("jskit-shell-drawer");
   await expect(drawer).toHaveAttribute("data-presentation", "drawer");
@@ -203,11 +247,22 @@ test("shell-web adaptive navigation passes package-owned browser contracts", {
       await page.goto(pathAndTheme);
       await expect(page.getByTestId("jskit-shell-drawer")).toBeVisible();
       await assertDrawerFit(page);
+      await assertRapidTooltipTraversal(page);
       await assertTooltipContrast(page, "Bookings", "focus");
       await assertTooltipContrast(page, "Help and support", "hover");
       await page.close();
     }
 
+    const mediumTooltipPage = await context.newPage();
+    await mediumTooltipPage.setViewportSize({ width: 1024, height: 1024 });
+    await mediumTooltipPage.goto("/w/acme/admin/bookings?theme=light");
+    await expect(mediumTooltipPage.getByTestId("jskit-shell-drawer")).toHaveAttribute(
+      "data-layout",
+      "medium"
+    );
+    await assertRapidTooltipTraversal(mediumTooltipPage);
+    await mediumTooltipPage.close();
+
     const railPage = await context.newPage();
     await railPage.setViewportSize({ width: 1280, height: 900 });
     await railPage.goto("/w/acme/admin/bookings?theme=light");

package/test/settingsPlacementContract.test.js

@@ -126,6 +126,16 @@ test("shell-web shell layout registers navigation at the app layout level", asyn
   assert.doesNotMatch(template, /ShellOutlet|ShellRouteTransition|useShellLayoutState|pointerdown|v-navigation-drawer|v-bottom-navigation/);
 });
 
+test("shell navigation tooltips ignore incidental pointer traversal", async () => {
+  const source = await readFile(
+    path.join(PACKAGE_DIR, "src", "client", "components", "ShellNavigationTooltip.vue"),
+    "utf8"
+  );
+
+  assert.match(source, /:open-delay="400"/u);
+  assert.doesNotMatch(source, /opacity:\s*1\s*!important/u);
+});
+
 test("shell-web error host uses one explicit close affordance for banner errors", async () => {
   const source = await readFile(path.join(PACKAGE_DIR, "src", "client", "components", "ShellErrorHost.vue"), "utf8");