@duskmoon-dev/el-tooltip 0.5.0 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +133 -0
- package/dist/cjs/index.js +84 -6
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/register.js +84 -6
- package/dist/cjs/register.js.map +3 -3
- package/dist/esm/index.js +82 -4
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/register.js +82 -4
- package/dist/esm/register.js.map +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/el-dm-tooltip.d.ts +13 -1
- package/dist/types/el-dm-tooltip.d.ts.map +1 -1
- package/package.json +6 -6
package/README.md
ADDED
|
@@ -0,0 +1,133 @@
|
|
|
1
|
+
# @duskmoon-dev/el-tooltip
|
|
2
|
+
|
|
3
|
+
A hover tooltip component built with Web Components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add @duskmoon-dev/el-tooltip
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Auto-Register
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
import '@duskmoon-dev/el-tooltip/register';
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```html
|
|
20
|
+
<el-dm-tooltip content="Helpful information">
|
|
21
|
+
<button>Hover me</button>
|
|
22
|
+
</el-dm-tooltip>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Manual Registration
|
|
26
|
+
|
|
27
|
+
```typescript
|
|
28
|
+
import { ElDmTooltip, register } from '@duskmoon-dev/el-tooltip';
|
|
29
|
+
|
|
30
|
+
// Register with default tag name
|
|
31
|
+
register();
|
|
32
|
+
|
|
33
|
+
// Or register with custom tag name
|
|
34
|
+
customElements.define('my-tooltip', ElDmTooltip);
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Positions
|
|
38
|
+
|
|
39
|
+
| Position | Description |
|
|
40
|
+
|----------|-------------|
|
|
41
|
+
| `top` | Above the element (default) |
|
|
42
|
+
| `bottom` | Below the element |
|
|
43
|
+
| `left` | Left of the element |
|
|
44
|
+
| `right` | Right of the element |
|
|
45
|
+
|
|
46
|
+
## Attributes
|
|
47
|
+
|
|
48
|
+
| Attribute | Type | Default | Description |
|
|
49
|
+
|-----------|------|---------|-------------|
|
|
50
|
+
| `content` | `string` | `''` | Tooltip text |
|
|
51
|
+
| `position` | `string` | `'top'` | Position: `top`, `bottom`, `left`, `right` |
|
|
52
|
+
| `trigger` | `string` | `'hover'` | Trigger: `hover`, `click`, `focus` |
|
|
53
|
+
| `delay` | `number` | `0` | Show delay in ms |
|
|
54
|
+
| `arrow` | `boolean` | `true` | Show arrow |
|
|
55
|
+
| `disabled` | `boolean` | `false` | Disable the tooltip |
|
|
56
|
+
|
|
57
|
+
## CSS Parts
|
|
58
|
+
|
|
59
|
+
| Part | Description |
|
|
60
|
+
|------|-------------|
|
|
61
|
+
| `tooltip` | The tooltip container |
|
|
62
|
+
| `content` | The tooltip content |
|
|
63
|
+
| `arrow` | The arrow element |
|
|
64
|
+
|
|
65
|
+
## Examples
|
|
66
|
+
|
|
67
|
+
### Basic
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<el-dm-tooltip content="This is a tooltip">
|
|
71
|
+
<button>Hover me</button>
|
|
72
|
+
</el-dm-tooltip>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
### Positions
|
|
76
|
+
|
|
77
|
+
```html
|
|
78
|
+
<el-dm-tooltip content="Top tooltip" position="top">
|
|
79
|
+
<button>Top</button>
|
|
80
|
+
</el-dm-tooltip>
|
|
81
|
+
|
|
82
|
+
<el-dm-tooltip content="Bottom tooltip" position="bottom">
|
|
83
|
+
<button>Bottom</button>
|
|
84
|
+
</el-dm-tooltip>
|
|
85
|
+
|
|
86
|
+
<el-dm-tooltip content="Left tooltip" position="left">
|
|
87
|
+
<button>Left</button>
|
|
88
|
+
</el-dm-tooltip>
|
|
89
|
+
|
|
90
|
+
<el-dm-tooltip content="Right tooltip" position="right">
|
|
91
|
+
<button>Right</button>
|
|
92
|
+
</el-dm-tooltip>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
### With Delay
|
|
96
|
+
|
|
97
|
+
```html
|
|
98
|
+
<el-dm-tooltip content="Delayed tooltip" delay="500">
|
|
99
|
+
<button>Hover (500ms delay)</button>
|
|
100
|
+
</el-dm-tooltip>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Click Trigger
|
|
104
|
+
|
|
105
|
+
```html
|
|
106
|
+
<el-dm-tooltip content="Click triggered" trigger="click">
|
|
107
|
+
<button>Click me</button>
|
|
108
|
+
</el-dm-tooltip>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### No Arrow
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
<el-dm-tooltip content="No arrow" arrow="false">
|
|
115
|
+
<button>No arrow</button>
|
|
116
|
+
</el-dm-tooltip>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### On Icons
|
|
120
|
+
|
|
121
|
+
```html
|
|
122
|
+
<el-dm-tooltip content="Edit item">
|
|
123
|
+
<button>✏️</button>
|
|
124
|
+
</el-dm-tooltip>
|
|
125
|
+
|
|
126
|
+
<el-dm-tooltip content="Delete item">
|
|
127
|
+
<button>🗑️</button>
|
|
128
|
+
</el-dm-tooltip>
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
## License
|
|
132
|
+
|
|
133
|
+
MIT
|
package/dist/cjs/index.js
CHANGED
|
@@ -35,7 +35,7 @@ __export(exports_src, {
|
|
|
35
35
|
module.exports = __toCommonJS(exports_src);
|
|
36
36
|
|
|
37
37
|
// src/el-dm-tooltip.ts
|
|
38
|
-
var
|
|
38
|
+
var import_el_base = require("@duskmoon-dev/el-base");
|
|
39
39
|
var import_tooltip = require("@duskmoon-dev/core/components/tooltip");
|
|
40
40
|
var POSITION_CLASSES = {
|
|
41
41
|
top: "tooltip-top",
|
|
@@ -43,8 +43,17 @@ var POSITION_CLASSES = {
|
|
|
43
43
|
left: "tooltip-left",
|
|
44
44
|
right: "tooltip-right"
|
|
45
45
|
};
|
|
46
|
+
var COLOR_CLASSES = {
|
|
47
|
+
primary: "tooltip-primary",
|
|
48
|
+
secondary: "tooltip-secondary",
|
|
49
|
+
accent: "tooltip-accent",
|
|
50
|
+
info: "tooltip-info",
|
|
51
|
+
success: "tooltip-success",
|
|
52
|
+
warning: "tooltip-warning",
|
|
53
|
+
error: "tooltip-error"
|
|
54
|
+
};
|
|
46
55
|
var coreStyles = import_tooltip.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
47
|
-
var styles =
|
|
56
|
+
var styles = import_el_base.css`
|
|
48
57
|
:host {
|
|
49
58
|
display: inline-flex;
|
|
50
59
|
position: relative;
|
|
@@ -151,22 +160,79 @@ var styles = import_el_core.css`
|
|
|
151
160
|
border-right-color: var(--color-inverse-surface, #1f1f1f);
|
|
152
161
|
border-left: 0;
|
|
153
162
|
}
|
|
163
|
+
|
|
164
|
+
/* Color variants */
|
|
165
|
+
.tooltip-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
|
|
166
|
+
.tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }
|
|
167
|
+
.tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }
|
|
168
|
+
.tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }
|
|
169
|
+
.tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }
|
|
170
|
+
.tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }
|
|
171
|
+
.tooltip-info { background-color: var(--color-info); color: #fff; }
|
|
172
|
+
.tooltip-info .tooltip-arrow { border-color: var(--color-info); }
|
|
173
|
+
.tooltip-success { background-color: var(--color-success); color: #fff; }
|
|
174
|
+
.tooltip-success .tooltip-arrow { border-color: var(--color-success); }
|
|
175
|
+
.tooltip-warning { background-color: var(--color-warning); color: #000; }
|
|
176
|
+
.tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }
|
|
177
|
+
.tooltip-error { background-color: var(--color-error); color: #fff; }
|
|
178
|
+
.tooltip-error .tooltip-arrow { border-color: var(--color-error); }
|
|
179
|
+
|
|
180
|
+
/* Arrow color inheritance for colored variants — reset transparent borders */
|
|
181
|
+
.tooltip-primary .tooltip-arrow,
|
|
182
|
+
.tooltip-secondary .tooltip-arrow,
|
|
183
|
+
.tooltip-accent .tooltip-arrow,
|
|
184
|
+
.tooltip-info .tooltip-arrow,
|
|
185
|
+
.tooltip-success .tooltip-arrow,
|
|
186
|
+
.tooltip-warning .tooltip-arrow,
|
|
187
|
+
.tooltip-error .tooltip-arrow {
|
|
188
|
+
border-color: transparent;
|
|
189
|
+
}
|
|
190
|
+
.tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }
|
|
191
|
+
.tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }
|
|
192
|
+
.tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }
|
|
193
|
+
.tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }
|
|
194
|
+
.tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }
|
|
195
|
+
.tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }
|
|
196
|
+
.tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }
|
|
197
|
+
.tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }
|
|
198
|
+
.tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }
|
|
199
|
+
.tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }
|
|
200
|
+
.tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }
|
|
201
|
+
.tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }
|
|
202
|
+
.tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }
|
|
203
|
+
.tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }
|
|
204
|
+
.tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }
|
|
205
|
+
.tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }
|
|
206
|
+
.tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }
|
|
207
|
+
.tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }
|
|
208
|
+
.tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }
|
|
209
|
+
.tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }
|
|
210
|
+
.tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }
|
|
211
|
+
.tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }
|
|
212
|
+
.tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }
|
|
213
|
+
.tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }
|
|
214
|
+
.tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }
|
|
215
|
+
.tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }
|
|
216
|
+
.tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }
|
|
217
|
+
.tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }
|
|
154
218
|
`;
|
|
155
219
|
|
|
156
|
-
class ElDmTooltip extends
|
|
220
|
+
class ElDmTooltip extends import_el_base.BaseElement {
|
|
157
221
|
static properties = {
|
|
158
222
|
content: { type: String, reflect: true },
|
|
159
223
|
position: { type: String, reflect: true, default: "top" },
|
|
160
224
|
trigger: { type: String, reflect: true, default: "hover" },
|
|
161
225
|
delay: { type: Number, reflect: true, default: 0 },
|
|
162
226
|
arrow: { type: Boolean, reflect: true, default: true },
|
|
163
|
-
disabled: { type: Boolean, reflect: true }
|
|
227
|
+
disabled: { type: Boolean, reflect: true },
|
|
228
|
+
color: { type: String, reflect: true },
|
|
229
|
+
open: { type: Boolean, reflect: true }
|
|
164
230
|
};
|
|
165
231
|
_showTimeout = null;
|
|
166
232
|
_isVisible = false;
|
|
167
233
|
constructor() {
|
|
168
234
|
super();
|
|
169
|
-
this.attachStyles(styles);
|
|
235
|
+
this.attachStyles([styles, import_el_base.animationStyles]);
|
|
170
236
|
}
|
|
171
237
|
_show() {
|
|
172
238
|
if (this.disabled || !this.content)
|
|
@@ -207,11 +273,23 @@ class ElDmTooltip extends import_el_core.BaseElement {
|
|
|
207
273
|
} else {
|
|
208
274
|
classes.push("tooltip-top");
|
|
209
275
|
}
|
|
276
|
+
if (this.color && COLOR_CLASSES[this.color]) {
|
|
277
|
+
classes.push(COLOR_CLASSES[this.color]);
|
|
278
|
+
}
|
|
210
279
|
return classes.join(" ");
|
|
211
280
|
}
|
|
212
281
|
connectedCallback() {
|
|
213
282
|
super.connectedCallback();
|
|
214
283
|
this._setupListeners();
|
|
284
|
+
if (this.open) {
|
|
285
|
+
this._setVisible(true);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
update() {
|
|
289
|
+
super.update();
|
|
290
|
+
if (this.open) {
|
|
291
|
+
this._setVisible(true);
|
|
292
|
+
}
|
|
215
293
|
}
|
|
216
294
|
disconnectedCallback() {
|
|
217
295
|
super.disconnectedCallback?.();
|
|
@@ -257,5 +335,5 @@ function register() {
|
|
|
257
335
|
}
|
|
258
336
|
}
|
|
259
337
|
|
|
260
|
-
//# debugId=
|
|
338
|
+
//# debugId=2E5830406DDDC2E864756E2164756E21
|
|
261
339
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-tooltip.ts", "../../src/index.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Tooltip Element\n *\n * A tooltip component for displaying additional information on hover/focus.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} position - Tooltip position: top, bottom, left, right\n * @attr {string} trigger - Trigger mode: hover, click, focus\n * @attr {number} delay - Show delay in milliseconds\n * @attr {boolean} arrow - Whether to show arrow\n * @attr {boolean} disabled - Whether tooltip is disabled\n *\n * @slot - Default slot for trigger element\n *\n * @csspart tooltip - The tooltip container\n * @csspart content - The tooltip content\n * @csspart arrow - The tooltip arrow\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
|
|
5
|
+
"/**\n * DuskMoon Tooltip Element\n *\n * A tooltip component for displaying additional information on hover/focus.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} position - Tooltip position: top, bottom, left, right\n * @attr {string} trigger - Trigger mode: hover, click, focus\n * @attr {number} delay - Show delay in milliseconds\n * @attr {boolean} arrow - Whether to show arrow\n * @attr {boolean} disabled - Whether tooltip is disabled\n *\n * @slot - Default slot for trigger element\n *\n * @csspart tooltip - The tooltip container\n * @csspart content - The tooltip content\n * @csspart arrow - The tooltip arrow\n */\n\nimport { BaseElement, css, animationStyles } from '@duskmoon-dev/el-base';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nconst COLOR_CLASSES: Record<string, string> = {\n primary: 'tooltip-primary',\n secondary: 'tooltip-secondary',\n accent: 'tooltip-accent',\n info: 'tooltip-info',\n success: 'tooltip-success',\n warning: 'tooltip-warning',\n error: 'tooltip-error',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\nexport type TooltipColor = 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n\n /* Color variants */\n .tooltip-primary { background-color: var(--color-primary); color: var(--color-on-primary); }\n .tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }\n .tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }\n .tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }\n .tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }\n .tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }\n .tooltip-info { background-color: var(--color-info); color: #fff; }\n .tooltip-info .tooltip-arrow { border-color: var(--color-info); }\n .tooltip-success { background-color: var(--color-success); color: #fff; }\n .tooltip-success .tooltip-arrow { border-color: var(--color-success); }\n .tooltip-warning { background-color: var(--color-warning); color: #000; }\n .tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }\n .tooltip-error { background-color: var(--color-error); color: #fff; }\n .tooltip-error .tooltip-arrow { border-color: var(--color-error); }\n\n /* Arrow color inheritance for colored variants — reset transparent borders */\n .tooltip-primary .tooltip-arrow,\n .tooltip-secondary .tooltip-arrow,\n .tooltip-accent .tooltip-arrow,\n .tooltip-info .tooltip-arrow,\n .tooltip-success .tooltip-arrow,\n .tooltip-warning .tooltip-arrow,\n .tooltip-error .tooltip-arrow {\n border-color: transparent;\n }\n .tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }\n .tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }\n .tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }\n .tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }\n .tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }\n .tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }\n .tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }\n .tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }\n .tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }\n .tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }\n .tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }\n .tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }\n .tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }\n .tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }\n .tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }\n .tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }\n .tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }\n .tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }\n .tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }\n .tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }\n .tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }\n .tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n color: { type: String, reflect: true },\n open: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n declare color: TooltipColor;\n declare open: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles([styles, animationStyles]);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n if (this.color && COLOR_CLASSES[this.color]) {\n classes.push(COLOR_CLASSES[this.color]);\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n // Sync initial open state\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n update(): void {\n super.update();\n // Sync open prop with visibility\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
|
|
6
6
|
"/**\n * @duskmoon-dev/el-tooltip\n *\n * DuskMoon Tooltip custom element\n */\n\nimport { ElDmTooltip } from './el-dm-tooltip.js';\n\nexport { ElDmTooltip };\nexport type { TooltipPosition, TooltipTrigger } from './el-dm-tooltip.js';\n\n/**\n * Register the el-dm-tooltip custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-tooltip';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-tooltip')) {\n customElements.define('el-dm-tooltip', ElDmTooltip);\n }\n}\n"
|
|
7
7
|
],
|
|
8
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "2E5830406DDDC2E864756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/cjs/register.js
CHANGED
|
@@ -35,7 +35,7 @@ __export(exports_src, {
|
|
|
35
35
|
module.exports = __toCommonJS(exports_src);
|
|
36
36
|
|
|
37
37
|
// src/el-dm-tooltip.ts
|
|
38
|
-
var
|
|
38
|
+
var import_el_base = require("@duskmoon-dev/el-base");
|
|
39
39
|
var import_tooltip = require("@duskmoon-dev/core/components/tooltip");
|
|
40
40
|
var POSITION_CLASSES = {
|
|
41
41
|
top: "tooltip-top",
|
|
@@ -43,8 +43,17 @@ var POSITION_CLASSES = {
|
|
|
43
43
|
left: "tooltip-left",
|
|
44
44
|
right: "tooltip-right"
|
|
45
45
|
};
|
|
46
|
+
var COLOR_CLASSES = {
|
|
47
|
+
primary: "tooltip-primary",
|
|
48
|
+
secondary: "tooltip-secondary",
|
|
49
|
+
accent: "tooltip-accent",
|
|
50
|
+
info: "tooltip-info",
|
|
51
|
+
success: "tooltip-success",
|
|
52
|
+
warning: "tooltip-warning",
|
|
53
|
+
error: "tooltip-error"
|
|
54
|
+
};
|
|
46
55
|
var coreStyles = import_tooltip.css.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
47
|
-
var styles =
|
|
56
|
+
var styles = import_el_base.css`
|
|
48
57
|
:host {
|
|
49
58
|
display: inline-flex;
|
|
50
59
|
position: relative;
|
|
@@ -151,22 +160,79 @@ var styles = import_el_core.css`
|
|
|
151
160
|
border-right-color: var(--color-inverse-surface, #1f1f1f);
|
|
152
161
|
border-left: 0;
|
|
153
162
|
}
|
|
163
|
+
|
|
164
|
+
/* Color variants */
|
|
165
|
+
.tooltip-primary { background-color: var(--color-primary); color: var(--color-on-primary); }
|
|
166
|
+
.tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }
|
|
167
|
+
.tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }
|
|
168
|
+
.tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }
|
|
169
|
+
.tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }
|
|
170
|
+
.tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }
|
|
171
|
+
.tooltip-info { background-color: var(--color-info); color: #fff; }
|
|
172
|
+
.tooltip-info .tooltip-arrow { border-color: var(--color-info); }
|
|
173
|
+
.tooltip-success { background-color: var(--color-success); color: #fff; }
|
|
174
|
+
.tooltip-success .tooltip-arrow { border-color: var(--color-success); }
|
|
175
|
+
.tooltip-warning { background-color: var(--color-warning); color: #000; }
|
|
176
|
+
.tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }
|
|
177
|
+
.tooltip-error { background-color: var(--color-error); color: #fff; }
|
|
178
|
+
.tooltip-error .tooltip-arrow { border-color: var(--color-error); }
|
|
179
|
+
|
|
180
|
+
/* Arrow color inheritance for colored variants — reset transparent borders */
|
|
181
|
+
.tooltip-primary .tooltip-arrow,
|
|
182
|
+
.tooltip-secondary .tooltip-arrow,
|
|
183
|
+
.tooltip-accent .tooltip-arrow,
|
|
184
|
+
.tooltip-info .tooltip-arrow,
|
|
185
|
+
.tooltip-success .tooltip-arrow,
|
|
186
|
+
.tooltip-warning .tooltip-arrow,
|
|
187
|
+
.tooltip-error .tooltip-arrow {
|
|
188
|
+
border-color: transparent;
|
|
189
|
+
}
|
|
190
|
+
.tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }
|
|
191
|
+
.tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }
|
|
192
|
+
.tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }
|
|
193
|
+
.tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }
|
|
194
|
+
.tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }
|
|
195
|
+
.tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }
|
|
196
|
+
.tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }
|
|
197
|
+
.tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }
|
|
198
|
+
.tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }
|
|
199
|
+
.tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }
|
|
200
|
+
.tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }
|
|
201
|
+
.tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }
|
|
202
|
+
.tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }
|
|
203
|
+
.tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }
|
|
204
|
+
.tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }
|
|
205
|
+
.tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }
|
|
206
|
+
.tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }
|
|
207
|
+
.tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }
|
|
208
|
+
.tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }
|
|
209
|
+
.tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }
|
|
210
|
+
.tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }
|
|
211
|
+
.tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }
|
|
212
|
+
.tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }
|
|
213
|
+
.tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }
|
|
214
|
+
.tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }
|
|
215
|
+
.tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }
|
|
216
|
+
.tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }
|
|
217
|
+
.tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }
|
|
154
218
|
`;
|
|
155
219
|
|
|
156
|
-
class ElDmTooltip extends
|
|
220
|
+
class ElDmTooltip extends import_el_base.BaseElement {
|
|
157
221
|
static properties = {
|
|
158
222
|
content: { type: String, reflect: true },
|
|
159
223
|
position: { type: String, reflect: true, default: "top" },
|
|
160
224
|
trigger: { type: String, reflect: true, default: "hover" },
|
|
161
225
|
delay: { type: Number, reflect: true, default: 0 },
|
|
162
226
|
arrow: { type: Boolean, reflect: true, default: true },
|
|
163
|
-
disabled: { type: Boolean, reflect: true }
|
|
227
|
+
disabled: { type: Boolean, reflect: true },
|
|
228
|
+
color: { type: String, reflect: true },
|
|
229
|
+
open: { type: Boolean, reflect: true }
|
|
164
230
|
};
|
|
165
231
|
_showTimeout = null;
|
|
166
232
|
_isVisible = false;
|
|
167
233
|
constructor() {
|
|
168
234
|
super();
|
|
169
|
-
this.attachStyles(styles);
|
|
235
|
+
this.attachStyles([styles, import_el_base.animationStyles]);
|
|
170
236
|
}
|
|
171
237
|
_show() {
|
|
172
238
|
if (this.disabled || !this.content)
|
|
@@ -207,11 +273,23 @@ class ElDmTooltip extends import_el_core.BaseElement {
|
|
|
207
273
|
} else {
|
|
208
274
|
classes.push("tooltip-top");
|
|
209
275
|
}
|
|
276
|
+
if (this.color && COLOR_CLASSES[this.color]) {
|
|
277
|
+
classes.push(COLOR_CLASSES[this.color]);
|
|
278
|
+
}
|
|
210
279
|
return classes.join(" ");
|
|
211
280
|
}
|
|
212
281
|
connectedCallback() {
|
|
213
282
|
super.connectedCallback();
|
|
214
283
|
this._setupListeners();
|
|
284
|
+
if (this.open) {
|
|
285
|
+
this._setVisible(true);
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
update() {
|
|
289
|
+
super.update();
|
|
290
|
+
if (this.open) {
|
|
291
|
+
this._setVisible(true);
|
|
292
|
+
}
|
|
215
293
|
}
|
|
216
294
|
disconnectedCallback() {
|
|
217
295
|
super.disconnectedCallback?.();
|
|
@@ -260,5 +338,5 @@ function register() {
|
|
|
260
338
|
// src/register.ts
|
|
261
339
|
register();
|
|
262
340
|
|
|
263
|
-
//# debugId=
|
|
341
|
+
//# debugId=4B9CABD8F7612D6164756E2164756E21
|
|
264
342
|
//# sourceMappingURL=register.js.map
|
package/dist/cjs/register.js.map
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/el-dm-tooltip.ts", "../../src/index.ts", "../../src/register.ts"],
|
|
4
4
|
"sourcesContent": [
|
|
5
|
-
"/**\n * DuskMoon Tooltip Element\n *\n * A tooltip component for displaying additional information on hover/focus.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} position - Tooltip position: top, bottom, left, right\n * @attr {string} trigger - Trigger mode: hover, click, focus\n * @attr {number} delay - Show delay in milliseconds\n * @attr {boolean} arrow - Whether to show arrow\n * @attr {boolean} disabled - Whether tooltip is disabled\n *\n * @slot - Default slot for trigger element\n *\n * @csspart tooltip - The tooltip container\n * @csspart content - The tooltip content\n * @csspart arrow - The tooltip arrow\n */\n\nimport { BaseElement, css } from '@duskmoon-dev/el-core';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
|
|
5
|
+
"/**\n * DuskMoon Tooltip Element\n *\n * A tooltip component for displaying additional information on hover/focus.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} position - Tooltip position: top, bottom, left, right\n * @attr {string} trigger - Trigger mode: hover, click, focus\n * @attr {number} delay - Show delay in milliseconds\n * @attr {boolean} arrow - Whether to show arrow\n * @attr {boolean} disabled - Whether tooltip is disabled\n *\n * @slot - Default slot for trigger element\n *\n * @csspart tooltip - The tooltip container\n * @csspart content - The tooltip content\n * @csspart arrow - The tooltip arrow\n */\n\nimport { BaseElement, css, animationStyles } from '@duskmoon-dev/el-base';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nconst COLOR_CLASSES: Record<string, string> = {\n primary: 'tooltip-primary',\n secondary: 'tooltip-secondary',\n accent: 'tooltip-accent',\n info: 'tooltip-info',\n success: 'tooltip-success',\n warning: 'tooltip-warning',\n error: 'tooltip-error',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\nexport type TooltipColor = 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n\n /* Color variants */\n .tooltip-primary { background-color: var(--color-primary); color: var(--color-on-primary); }\n .tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }\n .tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }\n .tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }\n .tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }\n .tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }\n .tooltip-info { background-color: var(--color-info); color: #fff; }\n .tooltip-info .tooltip-arrow { border-color: var(--color-info); }\n .tooltip-success { background-color: var(--color-success); color: #fff; }\n .tooltip-success .tooltip-arrow { border-color: var(--color-success); }\n .tooltip-warning { background-color: var(--color-warning); color: #000; }\n .tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }\n .tooltip-error { background-color: var(--color-error); color: #fff; }\n .tooltip-error .tooltip-arrow { border-color: var(--color-error); }\n\n /* Arrow color inheritance for colored variants — reset transparent borders */\n .tooltip-primary .tooltip-arrow,\n .tooltip-secondary .tooltip-arrow,\n .tooltip-accent .tooltip-arrow,\n .tooltip-info .tooltip-arrow,\n .tooltip-success .tooltip-arrow,\n .tooltip-warning .tooltip-arrow,\n .tooltip-error .tooltip-arrow {\n border-color: transparent;\n }\n .tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }\n .tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }\n .tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }\n .tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }\n .tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }\n .tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }\n .tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }\n .tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }\n .tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }\n .tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }\n .tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }\n .tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }\n .tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }\n .tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }\n .tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }\n .tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }\n .tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }\n .tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }\n .tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }\n .tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }\n .tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }\n .tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n color: { type: String, reflect: true },\n open: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n declare color: TooltipColor;\n declare open: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles([styles, animationStyles]);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n if (this.color && COLOR_CLASSES[this.color]) {\n classes.push(COLOR_CLASSES[this.color]);\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n // Sync initial open state\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n update(): void {\n super.update();\n // Sync open prop with visibility\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
|
|
6
6
|
"/**\n * @duskmoon-dev/el-tooltip\n *\n * DuskMoon Tooltip custom element\n */\n\nimport { ElDmTooltip } from './el-dm-tooltip.js';\n\nexport { ElDmTooltip };\nexport type { TooltipPosition, TooltipTrigger } from './el-dm-tooltip.js';\n\n/**\n * Register the el-dm-tooltip custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-tooltip';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-tooltip')) {\n customElements.define('el-dm-tooltip', ElDmTooltip);\n }\n}\n",
|
|
7
7
|
"import { register } from './index.js';\nregister();\n"
|
|
8
8
|
],
|
|
9
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
10
|
-
"debugId": "
|
|
9
|
+
"mappings": "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",
|
|
10
|
+
"debugId": "4B9CABD8F7612D6164756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|