@dile/ui 3.0.4 → 3.0.6

package/components/tooltip/src/DileChipTooltip.js

@@ -53,12 +53,18 @@ export class DileChipTooltip  extends LitElement {
         label: { type: String },
         message: { type: String },
         position: { type: String },
+        icon: { type: Object },
+        arrow: { type: Boolean },
+        fadeIn: { type: Boolean },
     };
   }
 
   constructor() {
     super();
     this.position = "bottom";
+    this.icon = infoIcon;
+    this.arrow = false;
+    this.fadeIn = true;
   }
 
   render() {
@@ -67,15 +73,15 @@ export class DileChipTooltip  extends LitElement {
       <dile-tooltip 
           tooltip="${this.message}"
           position="${this.position}"
-          fadeIn
-          
+          ?arrow=${this.arrow}
+          ?fadeIn=${this.fadeIn}
       >
-        <span class="chip">
+        <span class="chip" role="button">
           ${this.label
             ? html`<span class="label">${this.label}</span>`
             : ''
           }
-          <dile-icon .icon=${infoIcon} class="info"></dile-icon>
+          <dile-icon .icon=${this.icon} class="info"></dile-icon>
         </span>
       </dile-tooltip>
     </div>

package/components/tooltip/src/DileTooltip.js

@@ -15,21 +15,23 @@ export class DileTooltip extends LitElement {
   
       .tooltiptext {
         visibility: hidden;
-        width: var(--dile-tooltip-width, 120px);
-        background-color: var(--dile-tooltip-background-color, #e74c3c);
-        color: var(--dile-tooltip-color, #fff);
+        position: fixed;
+        max-width: var(--dile-tooltip-width, 120px);
+        width: auto;
+        background-color: var(--dile-tooltip-background-color, var(--dile-primary-color, #e74c3c));
+        color: var(--dile-tooltip-color, var(--dile-on-primary-color, #fff));
         font-size: var(--dile-tooltip-font-size, 16px);
         text-align: var(--dile-tooltip-text-align, center);
         border-radius: var(--dile-tooltip-border-radius, 6px);;
         padding: var(--dile-tooltip-padding, 5px);
+        z-index: 10000;
       }
 
-      .tooltip-top {
-        position: absolute;
-        z-index: 1;
-        bottom: var(--dile-tooltip-top--bottom, 150%);
-        left: 50%;
-        margin-left: -60px;
+      .tooltip-top,
+      .tooltip-bottom,
+      .tooltip-left,
+      .tooltip-right {
+        /* Posicionamiento manejado por JavaScript */
       }
 
       .arrow-top::after {
@@ -37,46 +39,21 @@ export class DileTooltip extends LitElement {
         position: absolute;
         top: 100%;
         left: 50%;
-        margin-left: -5px;
+        transform: translateX(-50%);
         border-width: 5px;
         border-style: solid;
-        border-color: var(--dile-tooltip-background-color, #e74c3c) transparent transparent transparent;
-      }
-
-      .tooltip-left {
-        position: absolute;
-        z-index: 1;
-        top: -5px;
-        right: 105%;
+        border-color: var(--dile-tooltip-background-color, var(--dile-primary-color, #e74c3c)) transparent transparent transparent;
       }
 
       .arrow-left::after {
         content: " ";
         position: absolute;
         top: 50%;
-        left: 100%; /* To the right of the tooltip */
-        margin-top: -5px;
+        left: 100%;
+        transform: translateY(-50%);
         border-width: 5px;
         border-style: solid;
-        border-color: transparent transparent transparent var(--dile-tooltip-background-color, #e74c3c);
-      }
-
-      .tooltip-right {
-        position: absolute;
-        z-index: 1;
-        top: -5px;
-        left: 105%;
-      }
-
-      .arrow-right::after {
-        content: " ";
-        position: absolute;
-        top: 50%;
-        right: 100%; /* To the left of the tooltip */
-        margin-top: -5px;
-        border-width: 5px;
-        border-style: solid;
-        border-color: transparent var(--dile-tooltip-background-color, #e74c3c) transparent transparent;
+        border-color: transparent transparent transparent var(--dile-tooltip-background-color, var(--dile-primary-color, #e74c3c));
       }
 
       .arrow-right::after {
@@ -84,18 +61,10 @@ export class DileTooltip extends LitElement {
         position: absolute;
         top: 50%;
         right: 100%;
-        margin-top: -5px;
+        transform: translateY(-50%);
         border-width: 5px;
         border-style: solid;
-        border-color: transparent var(--dile-tooltip-background-color, #e74c3c) transparent transparent;
-      }
-
-      .tooltip-bottom {
-        position: absolute;
-        z-index: 1;
-        top: 150%;
-        left: 50%;
-        margin-left: -60px;
+        border-color: transparent var(--dile-tooltip-background-color, var(--dile-primary-color, #e74c3c)) transparent transparent;
       }
 
       .arrow-bottom::after {
@@ -103,7 +72,7 @@ export class DileTooltip extends LitElement {
         position: absolute;
         bottom: 100%;
         left: 50%;
-        margin-left: -5px;
+        transform: translateX(-50%);
         border-width: 5px;
         border-style: solid;
         border-color: transparent transparent var(--dile-tooltip-background-color, #e74c3c) transparent;
@@ -119,6 +88,16 @@ export class DileTooltip extends LitElement {
         opacity: 1;
       }
 
+      .tooltiptext:focus-visible {
+        outline: var(--dile-tooltip-focus-outline-width, 2px) solid var(--dile-tooltip-focus-outline-color, #12c9e9);
+        outline-offset: var(--dile-tooltip-focus-outline-offset, 2px);
+      }
+      
+      @media (prefers-reduced-motion: reduce) {
+        .animation {
+          transition: none;
+        }
+      }
     `;
   }
 
@@ -137,7 +116,10 @@ export class DileTooltip extends LitElement {
       fadeIn: { type: Boolean },
 
       /** Private property to control mouseovers and mouseouts */
-      _isMouseover: { type: Boolean }
+      _isMouseover: { type: Boolean },
+
+      /** Private property to track keyboard focus */
+      _isFocused: { type: Boolean }
     };
   }
 
@@ -148,6 +130,24 @@ export class DileTooltip extends LitElement {
     this.arrow = false;
     this.fadeIn = false;
     this._isMouseover = false;
+    this._isFocused = false;
+    this._tooltipId = `dile-tooltip-${Math.random().toString(36).substr(2, 9)}`;
+    this._rafId = null;
+    // El evento scroll puede dispararse muchas veces por frame (y con
+    // capture:true, por cualquier contenedor con scroll interno), así que
+    // agrupamos los recálculos con rAF para hacer como mucho uno por frame.
+    this._boundUpdateTooltipPosition = () => {
+      if (this._rafId) return;
+      this._rafId = requestAnimationFrame(() => {
+        this._rafId = null;
+        this.updateTooltipPosition();
+      });
+    };
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._removeReflowListeners();
   }
 
   classPosition(position) {
@@ -166,20 +166,27 @@ export class DileTooltip extends LitElement {
     return fadeIn ? 'animation' : '';
   }
 
-  showOrNot(isMouseover) {
-    return isMouseover ? 'show' : '';
+  showOrNot(isMouseover, isFocused) {
+    return isMouseover || isFocused ? 'show' : '';
   }
 
   render() {
     return html`
       <div 
         class="tooltip"
-        @mouseover="${this.doMouseover}"
-        @mouseout="${this.doMouseout}"
+        tabindex="0"
+        @mouseover=${this.doMouseover}
+        @mouseout=${this.doMouseout}
+        @focusin=${this.doFocusin}
+        @focusout=${this.doFocusout}
+        @keydown=${this.doKeydown}
       >
         <slot></slot>
         <span 
-          class="tooltiptext ${this.classPosition(this.position)} ${this.arrowPosition(this.arrow, this.position)} ${this.animation(this.fadeIn)} ${this.showOrNot(this._isMouseover)}"
+          id="${this._tooltipId}"
+          role="tooltip"
+          ?aria-hidden=${!(this._isMouseover || this._isFocused)}
+          class="tooltiptext ${this.classPosition(this.position)} ${this.arrowPosition(this.arrow, this.position)} ${this.animation(this.fadeIn)} ${this.showOrNot(this._isMouseover, this._isFocused)}"
         >${this.tooltip}</span>
       </div>
     `;
@@ -192,4 +199,88 @@ export class DileTooltip extends LitElement {
   doMouseout() {
     this._isMouseover = false;
   }
+
+  doFocusin() {
+    this._isFocused = true;
+  }
+
+  doFocusout() {
+    this._isFocused = false;
+  }
+
+  doKeydown(event) {
+    if (event.key === 'Escape') {
+      this._isFocused = false;
+    }
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('_isMouseover') || changedProperties.has('_isFocused')) {
+      if (this._isMouseover || this._isFocused) {
+        this.updateTooltipPosition();
+        // position:fixed no sigue al trigger si la página hace scroll
+        // mientras el tooltip está abierto, así que hay que recalcular a mano.
+        this._addReflowListeners();
+      } else {
+        this._removeReflowListeners();
+      }
+    }
+  }
+
+  _addReflowListeners() {
+    window.addEventListener('scroll', this._boundUpdateTooltipPosition, { capture: true, passive: true });
+    window.addEventListener('resize', this._boundUpdateTooltipPosition);
+  }
+
+  _removeReflowListeners() {
+    window.removeEventListener('scroll', this._boundUpdateTooltipPosition, { capture: true });
+    window.removeEventListener('resize', this._boundUpdateTooltipPosition);
+    if (this._rafId) {
+      cancelAnimationFrame(this._rafId);
+      this._rafId = null;
+    }
+  }
+
+  updateTooltipPosition() {
+    // Esperar a que el DOM se actualice antes de calcular posiciones
+    this.updateComplete.then(() => {
+      const tooltip = this.shadowRoot.querySelector('.tooltiptext');
+      const trigger = this.shadowRoot.querySelector('.tooltip');
+      
+      if (!tooltip || !trigger) return;
+
+      const triggerRect = trigger.getBoundingClientRect();
+      const gap = 5; // Espacio entre trigger y tooltip
+
+      let top, left;
+
+      switch (this.position) {
+        case 'top':
+          top = triggerRect.top - tooltip.offsetHeight - gap;
+          left = triggerRect.left + triggerRect.width / 2 - tooltip.offsetWidth / 2;
+          break;
+        case 'bottom':
+          top = triggerRect.bottom + gap;
+          left = triggerRect.left + triggerRect.width / 2 - tooltip.offsetWidth / 2;
+          break;
+        case 'left':
+          top = triggerRect.top + triggerRect.height / 2 - tooltip.offsetHeight / 2;
+          left = triggerRect.left - tooltip.offsetWidth - gap;
+          break;
+        case 'right':
+          top = triggerRect.top + triggerRect.height / 2 - tooltip.offsetHeight / 2;
+          left = triggerRect.right + gap;
+          break;
+        default:
+          top = triggerRect.top - tooltip.offsetHeight - gap;
+          left = triggerRect.left + triggerRect.width / 2 - tooltip.offsetWidth / 2;
+      }
+
+      // Con position:fixed, getBoundingClientRect() ya es relativo al viewport,
+      // no hay que sumar el scroll (eso solo aplica a position:absolute).
+      tooltip.style.top = top + 'px';
+      tooltip.style.left = left + 'px';
+    });
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.0.4",
+  "version": "3.0.6",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -27,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d59717e79d41152fc06792784258eab42f0035b"
+  "gitHead": "ce6edd61000dafbd2e31064d3031837befc1abb9"
 }