@sondor-technology/sondor-components 1.0.7 → 1.0.8

package/src/components/tooltip/tooltip.ts

@@ -0,0 +1,286 @@
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state, queryAssignedElements} from "lit/decorators.js";
+import {classMap} from "lit/directives/class-map.js";
+import {resetStyles} from "../../styles/reset.js";
+
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
+export type TooltipVariant = "default" | "info" | "success" | "warning" | "danger";
+
+@customElement("st-tooltip")
+export class StTooltip extends LitElement {
+  @property({type: String}) content = "";
+  @property({type: String}) position: TooltipPosition = "top";
+  @property({type: String}) variant: TooltipVariant = "default";
+  @property({type: Number}) delay = 200;
+  @property({type: Boolean, reflect: true}) disabled = false;
+
+  @state() private _isVisible = false;
+
+  private _showTimeout?: number;
+  private _hideTimeout?: number;
+  private _tooltipId = `st-tooltip-${Math.random().toString(36).substring(2, 9)}`;
+
+  private _a11yNode?: HTMLSpanElement;
+
+  @queryAssignedElements() private _slottedElements!: HTMLElement[];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: inline-block;
+        position: relative;
+      }
+
+      .tooltip-target {
+        display: inline-block;
+      }
+
+      .tooltip-popup {
+        position: absolute;
+        z-index: 1000;
+        background: var(--st-color-surface);
+        color: var(--st-color-text);
+        border: 1px solid var(--st-color-border);
+        padding: var(--st-spacing-xs) var(--st-spacing-sm);
+        border-radius: var(--st-radius-sm);
+        font-size: var(--st-font-size-xs);
+        font-weight: 500;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        visibility: hidden;
+        transition:
+          opacity 0.2s ease,
+          transform 0.2s ease,
+          visibility 0.2s;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+
+      .tooltip-popup::before {
+        content: "";
+        position: absolute;
+        width: 8px;
+        height: 8px;
+        background: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        transform: rotate(45deg);
+        box-sizing: border-box;
+      }
+
+      .is-visible {
+        opacity: 1;
+        visibility: visible;
+      }
+
+      /* ==========================================
+         VARIANTS
+         ========================================== */
+
+      .variant-info {
+        background: var(--st-color-info, #3b82f6);
+        border-color: var(--st-color-info, #3b82f6);
+        color: var(--st-color-on-info, #ffffff);
+      }
+      .variant-info::before {
+        background: var(--st-color-info, #3b82f6);
+        border-color: var(--st-color-info, #3b82f6);
+      }
+
+      .variant-success {
+        background: var(--st-color-success, #16a34a);
+        border-color: var(--st-color-success, #16a34a);
+        color: var(--st-color-on-success, #ffffff);
+      }
+      .variant-success::before {
+        background: var(--st-color-success, #16a34a);
+        border-color: var(--st-color-success, #16a34a);
+      }
+
+      .variant-warning {
+        background: var(--st-color-warning, #f59e0b);
+        border-color: var(--st-color-warning, #f59e0b);
+        /* Warning usually needs dark text for contrast */
+        color: var(--st-color-on-warning, #1e293b);
+      }
+      .variant-warning::before {
+        background: var(--st-color-warning, #f59e0b);
+        border-color: var(--st-color-warning, #f59e0b);
+      }
+
+      .variant-danger {
+        background: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger, #dc2626);
+        color: var(--st-color-on-danger, #ffffff);
+      }
+      .variant-danger::before {
+        background: var(--st-color-danger, #dc2626);
+        border-color: var(--st-color-danger, #dc2626);
+      }
+
+      /* ==========================================
+         POSITIONS
+         ========================================== */
+
+      .position-top {
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-10px);
+      }
+      .position-top.is-visible {
+        transform: translateX(-50%) translateY(-6px);
+      }
+      .position-top::before {
+        bottom: -5px;
+        left: 50%;
+        margin-left: -4px;
+        border-top: none;
+        border-left: none;
+      }
+
+      .position-bottom {
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%) translateY(10px);
+      }
+      .position-bottom.is-visible {
+        transform: translateX(-50%) translateY(6px);
+      }
+      .position-bottom::before {
+        top: -5px;
+        left: 50%;
+        margin-left: -4px;
+        border-bottom: none;
+        border-right: none;
+      }
+
+      .position-left {
+        right: 100%;
+        top: 50%;
+        transform: translateY(-50%) translateX(-10px);
+      }
+      .position-left.is-visible {
+        transform: translateY(-50%) translateX(-6px);
+      }
+      .position-left::before {
+        right: -5px;
+        top: 50%;
+        margin-top: -4px;
+        border-bottom: none;
+        border-left: none;
+      }
+
+      .position-right {
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%) translateX(10px);
+      }
+      .position-right.is-visible {
+        transform: translateY(-50%) translateX(6px);
+      }
+      .position-right::before {
+        left: -5px;
+        top: 50%;
+        margin-top: -4px;
+        border-top: none;
+        border-right: none;
+      }
+    `,
+  ];
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._a11yNode = document.createElement("span");
+    this._a11yNode.id = this._tooltipId;
+    this._a11yNode.role = "tooltip";
+    this._a11yNode.style.display = "none";
+    this._a11yNode.textContent = this.content;
+    this.appendChild(this._a11yNode);
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._a11yNode && this.contains(this._a11yNode)) {
+      this.removeChild(this._a11yNode);
+    }
+  }
+
+  override updated(changedProperties: PropertyValues) {
+    super.updated(changedProperties);
+    if (changedProperties.has("content") && this._a11yNode) {
+      this._a11yNode.textContent = this.content;
+    }
+  }
+
+  private _handleSlotChange() {
+    if (this._slottedElements.length > 0) {
+      this._slottedElements.forEach((el) => {
+        el.setAttribute("aria-describedby", this._tooltipId);
+      });
+    }
+  }
+
+  private _handleMouseEnter() {
+    if (this.disabled || !this.content) return;
+    clearTimeout(this._hideTimeout);
+    this._showTimeout = window.setTimeout(() => {
+      this._isVisible = true;
+    }, this.delay);
+  }
+
+  private _handleMouseLeave() {
+    clearTimeout(this._showTimeout);
+    this._hideTimeout = window.setTimeout(() => {
+      this._isVisible = false;
+    }, 100);
+  }
+
+  private _handleFocusIn() {
+    if (this.disabled || !this.content) return;
+    this._isVisible = true;
+  }
+
+  private _handleFocusOut() {
+    this._isVisible = false;
+  }
+
+  private _handleKeyDown(e: KeyboardEvent) {
+    if (e.key === "Escape" && this._isVisible) {
+      e.stopPropagation();
+      this._isVisible = false;
+    }
+  }
+
+  render() {
+    return html`
+      <div
+        class="tooltip-target"
+        @mouseenter=${this._handleMouseEnter}
+        @mouseleave=${this._handleMouseLeave}
+        @focusin=${this._handleFocusIn}
+        @focusout=${this._handleFocusOut}
+        @keydown=${this._handleKeyDown}
+      >
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+
+      <div
+        class=${classMap({
+          "tooltip-popup": true,
+          [`position-${this.position}`]: true,
+          [`variant-${this.variant}`]: true,
+          "is-visible": this._isVisible,
+        })}
+        aria-hidden="true"
+      >
+        ${this.content}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-tooltip": StTooltip;
+  }
+}

package/src/styles/theme.css

@@ -64,4 +64,6 @@
   --st-color-info-bg: #1e3a8a;
 
   --st-hover-brightness: 1.3;
+
+  --st-icon-filter: invert(1);
 }