@uxland/primary-shell 7.28.0 → 7.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxland/primary-shell",
-  "version": "7.28.0",
+  "version": "7.29.0",
   "description": "Primaria Shell",
   "author": "UXLand <dev@uxland.es>",
   "homepage": "https://github.com/uxland/harmonix/tree/app#readme",

package/src/UI/components/navigation-tooltip/index.ts

@@ -1,2 +1,2 @@
 export { showNavItemTooltip } from "./tooltip-manager";
-export { default as NavigationTooltip } from "./navigation-tooltip";
+export { NavigationTooltip } from "./navigation-tooltip";

package/src/UI/components/navigation-tooltip/navigation-tooltip.ts

@@ -0,0 +1,50 @@
+import { LitElement, html, css, unsafeCSS } from "lit";
+import { property } from "lit/decorators.js";
+import styles from "./styles.css?inline";
+
+export class NavigationTooltip extends LitElement {
+  @property({ type: String }) text = "";
+  @property({ type: Number }) itemAbsoluteY = 0;
+
+  static styles = css`
+    ${unsafeCSS(styles)}
+  `;
+
+  render() {
+    const itemHeight = 51;
+    const centerY = this.itemAbsoluteY + itemHeight / 2;
+
+    return html`
+      <div class="tooltip-overlay">
+        <div class="navigation-tooltip" style="left: 73px; top: ${centerY}px">
+          <dss-icon icon="info" size="md"></dss-icon>
+          ${this.text}
+          <div class="arrow"></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("navigation-tooltip", NavigationTooltip);
+
+export const renderNavigationTooltip = (text: string, itemAbsoluteY: number) => {
+  // Remove existing tooltip if any
+  const existing = document.querySelector("navigation-tooltip");
+  if (existing) {
+    existing.remove();
+  }
+
+  // Create new tooltip
+  const tooltip = document.createElement("navigation-tooltip") as NavigationTooltip;
+  tooltip.text = text;
+  tooltip.itemAbsoluteY = itemAbsoluteY;
+  document.body.appendChild(tooltip);
+
+  // Auto-remove after 5 seconds
+  setTimeout(() => {
+    if (tooltip && document.body.contains(tooltip)) {
+      tooltip.remove();
+    }
+  }, 5000);
+};

package/src/UI/components/navigation-tooltip/styles.css

@@ -1,3 +1,7 @@
+:host {
+  display: block;
+}
+
 .tooltip-overlay {
   position: fixed;
   top: 0;
@@ -40,7 +44,7 @@
   width: 0;
   height: 0;
   border: 12px solid transparent;
-  border-right-color: #1e88e5;
+  border-right-color: #0F4877;
 }
 
 @keyframes fadeInOut {