@dropi/ui 0.1.20 → 0.1.22

package/dist/collection/components/dropi-tooltip/dropi-tooltip.css

@@ -1,67 +1,32 @@
-:host { display: inline-block; }
-*, *::before, *::after { box-sizing: border-box; }
-
-.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
-
-.tooltip-bubble {
-  position: absolute; z-index: 9999;
-  background: #1f2433; color: var(--Neutral-White,#fff);
-  font-size: var(--font-size-s,14px); line-height: 1.5;
-  padding: 8px 12px; border-radius: 8px;
-  white-space: normal; pointer-events: none;
-  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
-  word-break: break-word;
-  box-shadow: var(--Shadow-medium);
-  text-align: left;
-  width: max-content;
+:host {
+  display: inline-block;
+  position: relative;
 }
-.tooltip-bubble--visible { opacity: 1; }
 
-.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
-.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
-.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
-.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
-
-.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
-.tooltip-arrow::before {
-  content: '';
+.tooltip-simple-bubble {
   position: absolute;
-  width: 0;
-  height: 0;
-}
-
-.tooltip-arrow--top {
-  top: 100%; left: 50%; transform: translateX(-50%);
-}
-.tooltip-arrow--top::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-top: 6px solid #1f2433;
-}
-
-.tooltip-arrow--bottom {
-  bottom: 100%; left: 50%; transform: translateX(-50%);
-}
-.tooltip-arrow--bottom::before {
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #1f2433;
-}
-
-.tooltip-arrow--left {
-  left: 100%; top: 50%; transform: translateY(-50%);
-}
-.tooltip-arrow--left::before {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-left: 6px solid #1f2433;
-}
-
-.tooltip-arrow--right {
-  right: 100%; top: 50%; transform: translateY(-50%);
-}
-.tooltip-arrow--right::before {
-  border-top: 6px solid transparent;
-  border-bottom: 6px solid transparent;
-  border-right: 6px solid #1f2433;
+  background: var(--Gray-Gray-800, #1e293b);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+  z-index: 1000;
+}
+
+:host(:hover) .tooltip-simple-bubble {
+  opacity: 1;
+}
+
+.tooltip-simple--outlined .tooltip-simple-bubble {
+  border: 1px solid var(--Gray-Gray-300);
+  background: white;
+  color: var(--Gray-Gray-800);
 }

package/dist/collection/components/dropi-tooltip/dropi-tooltip.js

@@ -1,41 +1,15 @@
 import { h } from "@stencil/core";
 /**
  * @component dropi-tooltip
- * Wraps content and shows a tooltip bubble on hover/focus.
- *
- * @example
- * <dropi-tooltip text="Más información" position="top">
- *   <dropi-button text="Hover" />
- * </dropi-tooltip>
+ * Simple tooltip (Legacy version).
  */
 export class DropiTooltip {
     /** Tooltip text */
     text = '';
-    /** Position: top | bottom | left | right */
-    position = 'top';
-    /** Max CSS width of the bubble */
-    maxWidth = '280px';
-    /** Delay in ms before showing */
-    showDelay = 0;
-    visible = false;
-    showTimer = null;
-    show = () => {
-        if (this.showDelay > 0) {
-            this.showTimer = setTimeout(() => { this.visible = true; }, this.showDelay);
-        }
-        else {
-            this.visible = true;
-        }
-    };
-    hide = () => {
-        if (this.showTimer) {
-            clearTimeout(this.showTimer);
-            this.showTimer = null;
-        }
-        this.visible = false;
-    };
+    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
+    outlined = false;
     render() {
-        return (h("div", { key: '9f328904e1954d08cf18d51ca765f07ec8b9d3c1', class: "tooltip-wrapper", onMouseEnter: this.show, onMouseLeave: this.hide, onFocusin: this.show, onFocusout: this.hide }, h("slot", { key: '697ebc090a9b3d7db25666b6ae8726bc9c389d3c' }), this.text && (h("div", { key: 'f82c4ad44cd13b3eb7fd3bbfa54bb598166fba1c', class: { 'tooltip-bubble': true, [`tooltip-bubble--${this.position}`]: true, 'tooltip-bubble--visible': this.visible }, style: { maxWidth: this.maxWidth }, role: "tooltip" }, this.text, h("span", { key: 'f850e6f1b5a66a686e9741b3d5e9df3bd5b81e95', class: `tooltip-arrow tooltip-arrow--${this.position}` })))));
+        return (h("div", { key: '0b14943b628c231fbb530620e7829f70e6099c7a', class: { 'tooltip-simple': true, 'tooltip-simple--outlined': this.outlined } }, h("slot", { key: 'bf0245c6fab0ba938834d2d3e84ccaa9cb14f5c8' }), this.text && (h("div", { key: 'e1e33acf8628f79b36c5cc66c7076a03ce8167f7', class: "tooltip-simple-bubble" }, this.text))));
     }
     static get is() { return "dropi-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -71,77 +45,26 @@ export class DropiTooltip {
                 "attribute": "text",
                 "defaultValue": "''"
             },
-            "position": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "TooltipPosition",
-                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-                    "references": {
-                        "TooltipPosition": {
-                            "location": "local",
-                            "path": "/Users/mac-ti/Documents/dropi/dropi-ui/src/components/dropi-tooltip/dropi-tooltip.tsx",
-                            "id": "src/components/dropi-tooltip/dropi-tooltip.tsx::TooltipPosition"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Position: top | bottom | left | right"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "position",
-                "defaultValue": "'top'"
-            },
-            "maxWidth": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Max CSS width of the bubble"
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "max-width",
-                "defaultValue": "'280px'"
-            },
-            "showDelay": {
-                "type": "number",
+            "outlined": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Delay in ms before showing"
+                    "text": "Whether the tooltip has an outline style (matches Angular `outlined`)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-delay",
-                "defaultValue": "0"
+                "attribute": "outlined",
+                "defaultValue": "false"
             }
         };
     }
-    static get states() {
-        return {
-            "visible": {}
-        };
-    }
 }

package/dist/collection/components/dropi-tooltip-v2/dropi-tooltip.css

@@ -0,0 +1,67 @@
+:host { display: inline-block; }
+*, *::before, *::after { box-sizing: border-box; }
+
+.tooltip-wrapper { position: relative; display: inline-flex; align-items: center; justify-content: center; }
+
+.tooltip-bubble {
+  position: absolute; z-index: 9999;
+  background: var(--Gray-Gray-800); color: var(--Neutral-White, #ffffff);
+  font-size: var(--font-size-s,14px); line-height: 1.5;
+  padding: 8px 12px; border-radius: 8px;
+  white-space: normal; pointer-events: none;
+  opacity: 0; transition: opacity 0.15s ease, transform 0.15s ease;
+  word-break: break-word;
+  box-shadow: var(--Shadow-medium);
+  text-align: left;
+  width: max-content;
+}
+.tooltip-bubble--visible { opacity: 1; }
+
+.tooltip-bubble--top    { bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--bottom { top: calc(100% + 12px);    left: 50%; transform: translateX(-50%); }
+.tooltip-bubble--left   { right: calc(100% + 12px);  top: 50%;  transform: translateY(-50%); }
+.tooltip-bubble--right  { left: calc(100% + 12px);   top: 50%;  transform: translateY(-50%); }
+
+.tooltip-arrow { position: absolute; width: 12px; height: 6px; }
+.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+
+.tooltip-arrow--top {
+  top: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--top::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--bottom {
+  bottom: 100%; left: 50%; transform: translateX(-50%);
+}
+.tooltip-arrow--bottom::before {
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--left {
+  left: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--left::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-left: 6px solid var(--Gray-Gray-800);
+}
+
+.tooltip-arrow--right {
+  right: 100%; top: 50%; transform: translateY(-50%);
+}
+.tooltip-arrow--right::before {
+  border-top: 6px solid transparent;
+  border-bottom: 6px solid transparent;
+  border-right: 6px solid var(--Gray-Gray-800);
+}