@duskmoon-dev/el-tooltip 0.6.0 → 0.7.1
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/dist/cjs/index.js +171 -2
- package/dist/cjs/index.js.map +3 -3
- package/dist/cjs/register.js +171 -2
- package/dist/cjs/register.js.map +3 -3
- package/dist/esm/index.js +171 -2
- package/dist/esm/index.js.map +3 -3
- package/dist/esm/register.js +171 -2
- package/dist/esm/register.js.map +3 -3
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/el-dm-tooltip.d.ts +12 -0
- package/dist/types/el-dm-tooltip.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/cjs/index.js
CHANGED
|
@@ -43,6 +43,15 @@ 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
56
|
var styles = import_el_base.css`
|
|
48
57
|
:host {
|
|
@@ -151,6 +160,152 @@ var styles = import_el_base.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 {
|
|
166
|
+
background-color: var(--color-primary);
|
|
167
|
+
color: var(--color-on-primary);
|
|
168
|
+
}
|
|
169
|
+
.tooltip-primary .tooltip-arrow {
|
|
170
|
+
border-color: var(--color-primary);
|
|
171
|
+
}
|
|
172
|
+
.tooltip-secondary {
|
|
173
|
+
background-color: var(--color-secondary);
|
|
174
|
+
color: var(--color-on-secondary);
|
|
175
|
+
}
|
|
176
|
+
.tooltip-secondary .tooltip-arrow {
|
|
177
|
+
border-color: var(--color-secondary);
|
|
178
|
+
}
|
|
179
|
+
.tooltip-accent {
|
|
180
|
+
background-color: var(--color-tertiary);
|
|
181
|
+
color: var(--color-on-tertiary);
|
|
182
|
+
}
|
|
183
|
+
.tooltip-accent .tooltip-arrow {
|
|
184
|
+
border-color: var(--color-tertiary);
|
|
185
|
+
}
|
|
186
|
+
.tooltip-info {
|
|
187
|
+
background-color: var(--color-info);
|
|
188
|
+
color: #fff;
|
|
189
|
+
}
|
|
190
|
+
.tooltip-info .tooltip-arrow {
|
|
191
|
+
border-color: var(--color-info);
|
|
192
|
+
}
|
|
193
|
+
.tooltip-success {
|
|
194
|
+
background-color: var(--color-success);
|
|
195
|
+
color: #fff;
|
|
196
|
+
}
|
|
197
|
+
.tooltip-success .tooltip-arrow {
|
|
198
|
+
border-color: var(--color-success);
|
|
199
|
+
}
|
|
200
|
+
.tooltip-warning {
|
|
201
|
+
background-color: var(--color-warning);
|
|
202
|
+
color: #000;
|
|
203
|
+
}
|
|
204
|
+
.tooltip-warning .tooltip-arrow {
|
|
205
|
+
border-color: var(--color-warning);
|
|
206
|
+
}
|
|
207
|
+
.tooltip-error {
|
|
208
|
+
background-color: var(--color-error);
|
|
209
|
+
color: #fff;
|
|
210
|
+
}
|
|
211
|
+
.tooltip-error .tooltip-arrow {
|
|
212
|
+
border-color: var(--color-error);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* Arrow color inheritance for colored variants — reset transparent borders */
|
|
216
|
+
.tooltip-primary .tooltip-arrow,
|
|
217
|
+
.tooltip-secondary .tooltip-arrow,
|
|
218
|
+
.tooltip-accent .tooltip-arrow,
|
|
219
|
+
.tooltip-info .tooltip-arrow,
|
|
220
|
+
.tooltip-success .tooltip-arrow,
|
|
221
|
+
.tooltip-warning .tooltip-arrow,
|
|
222
|
+
.tooltip-error .tooltip-arrow {
|
|
223
|
+
border-color: transparent;
|
|
224
|
+
}
|
|
225
|
+
.tooltip-primary.tooltip-top .tooltip-arrow {
|
|
226
|
+
border-top-color: var(--color-primary);
|
|
227
|
+
}
|
|
228
|
+
.tooltip-primary.tooltip-bottom .tooltip-arrow {
|
|
229
|
+
border-bottom-color: var(--color-primary);
|
|
230
|
+
}
|
|
231
|
+
.tooltip-primary.tooltip-left .tooltip-arrow {
|
|
232
|
+
border-left-color: var(--color-primary);
|
|
233
|
+
}
|
|
234
|
+
.tooltip-primary.tooltip-right .tooltip-arrow {
|
|
235
|
+
border-right-color: var(--color-primary);
|
|
236
|
+
}
|
|
237
|
+
.tooltip-secondary.tooltip-top .tooltip-arrow {
|
|
238
|
+
border-top-color: var(--color-secondary);
|
|
239
|
+
}
|
|
240
|
+
.tooltip-secondary.tooltip-bottom .tooltip-arrow {
|
|
241
|
+
border-bottom-color: var(--color-secondary);
|
|
242
|
+
}
|
|
243
|
+
.tooltip-secondary.tooltip-left .tooltip-arrow {
|
|
244
|
+
border-left-color: var(--color-secondary);
|
|
245
|
+
}
|
|
246
|
+
.tooltip-secondary.tooltip-right .tooltip-arrow {
|
|
247
|
+
border-right-color: var(--color-secondary);
|
|
248
|
+
}
|
|
249
|
+
.tooltip-accent.tooltip-top .tooltip-arrow {
|
|
250
|
+
border-top-color: var(--color-tertiary);
|
|
251
|
+
}
|
|
252
|
+
.tooltip-accent.tooltip-bottom .tooltip-arrow {
|
|
253
|
+
border-bottom-color: var(--color-tertiary);
|
|
254
|
+
}
|
|
255
|
+
.tooltip-accent.tooltip-left .tooltip-arrow {
|
|
256
|
+
border-left-color: var(--color-tertiary);
|
|
257
|
+
}
|
|
258
|
+
.tooltip-accent.tooltip-right .tooltip-arrow {
|
|
259
|
+
border-right-color: var(--color-tertiary);
|
|
260
|
+
}
|
|
261
|
+
.tooltip-info.tooltip-top .tooltip-arrow {
|
|
262
|
+
border-top-color: var(--color-info);
|
|
263
|
+
}
|
|
264
|
+
.tooltip-info.tooltip-bottom .tooltip-arrow {
|
|
265
|
+
border-bottom-color: var(--color-info);
|
|
266
|
+
}
|
|
267
|
+
.tooltip-info.tooltip-left .tooltip-arrow {
|
|
268
|
+
border-left-color: var(--color-info);
|
|
269
|
+
}
|
|
270
|
+
.tooltip-info.tooltip-right .tooltip-arrow {
|
|
271
|
+
border-right-color: var(--color-info);
|
|
272
|
+
}
|
|
273
|
+
.tooltip-success.tooltip-top .tooltip-arrow {
|
|
274
|
+
border-top-color: var(--color-success);
|
|
275
|
+
}
|
|
276
|
+
.tooltip-success.tooltip-bottom .tooltip-arrow {
|
|
277
|
+
border-bottom-color: var(--color-success);
|
|
278
|
+
}
|
|
279
|
+
.tooltip-success.tooltip-left .tooltip-arrow {
|
|
280
|
+
border-left-color: var(--color-success);
|
|
281
|
+
}
|
|
282
|
+
.tooltip-success.tooltip-right .tooltip-arrow {
|
|
283
|
+
border-right-color: var(--color-success);
|
|
284
|
+
}
|
|
285
|
+
.tooltip-warning.tooltip-top .tooltip-arrow {
|
|
286
|
+
border-top-color: var(--color-warning);
|
|
287
|
+
}
|
|
288
|
+
.tooltip-warning.tooltip-bottom .tooltip-arrow {
|
|
289
|
+
border-bottom-color: var(--color-warning);
|
|
290
|
+
}
|
|
291
|
+
.tooltip-warning.tooltip-left .tooltip-arrow {
|
|
292
|
+
border-left-color: var(--color-warning);
|
|
293
|
+
}
|
|
294
|
+
.tooltip-warning.tooltip-right .tooltip-arrow {
|
|
295
|
+
border-right-color: var(--color-warning);
|
|
296
|
+
}
|
|
297
|
+
.tooltip-error.tooltip-top .tooltip-arrow {
|
|
298
|
+
border-top-color: var(--color-error);
|
|
299
|
+
}
|
|
300
|
+
.tooltip-error.tooltip-bottom .tooltip-arrow {
|
|
301
|
+
border-bottom-color: var(--color-error);
|
|
302
|
+
}
|
|
303
|
+
.tooltip-error.tooltip-left .tooltip-arrow {
|
|
304
|
+
border-left-color: var(--color-error);
|
|
305
|
+
}
|
|
306
|
+
.tooltip-error.tooltip-right .tooltip-arrow {
|
|
307
|
+
border-right-color: var(--color-error);
|
|
308
|
+
}
|
|
154
309
|
`;
|
|
155
310
|
|
|
156
311
|
class ElDmTooltip extends import_el_base.BaseElement {
|
|
@@ -160,7 +315,9 @@ class ElDmTooltip extends import_el_base.BaseElement {
|
|
|
160
315
|
trigger: { type: String, reflect: true, default: "hover" },
|
|
161
316
|
delay: { type: Number, reflect: true, default: 0 },
|
|
162
317
|
arrow: { type: Boolean, reflect: true, default: true },
|
|
163
|
-
disabled: { type: Boolean, reflect: true }
|
|
318
|
+
disabled: { type: Boolean, reflect: true },
|
|
319
|
+
color: { type: String, reflect: true },
|
|
320
|
+
open: { type: Boolean, reflect: true }
|
|
164
321
|
};
|
|
165
322
|
_showTimeout = null;
|
|
166
323
|
_isVisible = false;
|
|
@@ -207,11 +364,23 @@ class ElDmTooltip extends import_el_base.BaseElement {
|
|
|
207
364
|
} else {
|
|
208
365
|
classes.push("tooltip-top");
|
|
209
366
|
}
|
|
367
|
+
if (this.color && COLOR_CLASSES[this.color]) {
|
|
368
|
+
classes.push(COLOR_CLASSES[this.color]);
|
|
369
|
+
}
|
|
210
370
|
return classes.join(" ");
|
|
211
371
|
}
|
|
212
372
|
connectedCallback() {
|
|
213
373
|
super.connectedCallback();
|
|
214
374
|
this._setupListeners();
|
|
375
|
+
if (this.open) {
|
|
376
|
+
this._setVisible(true);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
update() {
|
|
380
|
+
super.update();
|
|
381
|
+
if (this.open) {
|
|
382
|
+
this._setVisible(true);
|
|
383
|
+
}
|
|
215
384
|
}
|
|
216
385
|
disconnectedCallback() {
|
|
217
386
|
super.disconnectedCallback?.();
|
|
@@ -257,5 +426,5 @@ function register() {
|
|
|
257
426
|
}
|
|
258
427
|
}
|
|
259
428
|
|
|
260
|
-
//# debugId=
|
|
429
|
+
//# debugId=CEE01E4B1AF4ACED64756E2164756E21
|
|
261
430
|
//# 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, 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\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, 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 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 =\n | 'primary'\n | 'secondary'\n | 'accent'\n | 'info'\n | 'success'\n | 'warning'\n | '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 {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n .tooltip-primary .tooltip-arrow {\n border-color: var(--color-primary);\n }\n .tooltip-secondary {\n background-color: var(--color-secondary);\n color: var(--color-on-secondary);\n }\n .tooltip-secondary .tooltip-arrow {\n border-color: var(--color-secondary);\n }\n .tooltip-accent {\n background-color: var(--color-tertiary);\n color: var(--color-on-tertiary);\n }\n .tooltip-accent .tooltip-arrow {\n border-color: var(--color-tertiary);\n }\n .tooltip-info {\n background-color: var(--color-info);\n color: #fff;\n }\n .tooltip-info .tooltip-arrow {\n border-color: var(--color-info);\n }\n .tooltip-success {\n background-color: var(--color-success);\n color: #fff;\n }\n .tooltip-success .tooltip-arrow {\n border-color: var(--color-success);\n }\n .tooltip-warning {\n background-color: var(--color-warning);\n color: #000;\n }\n .tooltip-warning .tooltip-arrow {\n border-color: var(--color-warning);\n }\n .tooltip-error {\n background-color: var(--color-error);\n color: #fff;\n }\n .tooltip-error .tooltip-arrow {\n border-color: var(--color-error);\n }\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 {\n border-top-color: var(--color-primary);\n }\n .tooltip-primary.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-primary);\n }\n .tooltip-primary.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-primary);\n }\n .tooltip-primary.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-primary);\n }\n .tooltip-secondary.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-secondary);\n }\n .tooltip-secondary.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-secondary);\n }\n .tooltip-secondary.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-secondary);\n }\n .tooltip-secondary.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-secondary);\n }\n .tooltip-accent.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-tertiary);\n }\n .tooltip-accent.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-tertiary);\n }\n .tooltip-accent.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-tertiary);\n }\n .tooltip-accent.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-tertiary);\n }\n .tooltip-info.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-info);\n }\n .tooltip-info.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-info);\n }\n .tooltip-info.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-info);\n }\n .tooltip-info.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-info);\n }\n .tooltip-success.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-success);\n }\n .tooltip-success.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-success);\n }\n .tooltip-success.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-success);\n }\n .tooltip-success.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-success);\n }\n .tooltip-warning.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-warning);\n }\n .tooltip-warning.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-warning);\n }\n .tooltip-warning.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-warning);\n }\n .tooltip-warning.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-warning);\n }\n .tooltip-error.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-error);\n }\n .tooltip-error.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-error);\n }\n .tooltip-error.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-error);\n }\n .tooltip-error.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-error);\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 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBkD,IAAlD;AACkC,IAAlC;AAEA,IAAM,mBAA2C;AAAA,EAC/C,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;
|
|
9
|
-
"debugId": "
|
|
8
|
+
"mappings": "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",
|
|
9
|
+
"debugId": "CEE01E4B1AF4ACED64756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/cjs/register.js
CHANGED
|
@@ -43,6 +43,15 @@ 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
56
|
var styles = import_el_base.css`
|
|
48
57
|
:host {
|
|
@@ -151,6 +160,152 @@ var styles = import_el_base.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 {
|
|
166
|
+
background-color: var(--color-primary);
|
|
167
|
+
color: var(--color-on-primary);
|
|
168
|
+
}
|
|
169
|
+
.tooltip-primary .tooltip-arrow {
|
|
170
|
+
border-color: var(--color-primary);
|
|
171
|
+
}
|
|
172
|
+
.tooltip-secondary {
|
|
173
|
+
background-color: var(--color-secondary);
|
|
174
|
+
color: var(--color-on-secondary);
|
|
175
|
+
}
|
|
176
|
+
.tooltip-secondary .tooltip-arrow {
|
|
177
|
+
border-color: var(--color-secondary);
|
|
178
|
+
}
|
|
179
|
+
.tooltip-accent {
|
|
180
|
+
background-color: var(--color-tertiary);
|
|
181
|
+
color: var(--color-on-tertiary);
|
|
182
|
+
}
|
|
183
|
+
.tooltip-accent .tooltip-arrow {
|
|
184
|
+
border-color: var(--color-tertiary);
|
|
185
|
+
}
|
|
186
|
+
.tooltip-info {
|
|
187
|
+
background-color: var(--color-info);
|
|
188
|
+
color: #fff;
|
|
189
|
+
}
|
|
190
|
+
.tooltip-info .tooltip-arrow {
|
|
191
|
+
border-color: var(--color-info);
|
|
192
|
+
}
|
|
193
|
+
.tooltip-success {
|
|
194
|
+
background-color: var(--color-success);
|
|
195
|
+
color: #fff;
|
|
196
|
+
}
|
|
197
|
+
.tooltip-success .tooltip-arrow {
|
|
198
|
+
border-color: var(--color-success);
|
|
199
|
+
}
|
|
200
|
+
.tooltip-warning {
|
|
201
|
+
background-color: var(--color-warning);
|
|
202
|
+
color: #000;
|
|
203
|
+
}
|
|
204
|
+
.tooltip-warning .tooltip-arrow {
|
|
205
|
+
border-color: var(--color-warning);
|
|
206
|
+
}
|
|
207
|
+
.tooltip-error {
|
|
208
|
+
background-color: var(--color-error);
|
|
209
|
+
color: #fff;
|
|
210
|
+
}
|
|
211
|
+
.tooltip-error .tooltip-arrow {
|
|
212
|
+
border-color: var(--color-error);
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
/* Arrow color inheritance for colored variants — reset transparent borders */
|
|
216
|
+
.tooltip-primary .tooltip-arrow,
|
|
217
|
+
.tooltip-secondary .tooltip-arrow,
|
|
218
|
+
.tooltip-accent .tooltip-arrow,
|
|
219
|
+
.tooltip-info .tooltip-arrow,
|
|
220
|
+
.tooltip-success .tooltip-arrow,
|
|
221
|
+
.tooltip-warning .tooltip-arrow,
|
|
222
|
+
.tooltip-error .tooltip-arrow {
|
|
223
|
+
border-color: transparent;
|
|
224
|
+
}
|
|
225
|
+
.tooltip-primary.tooltip-top .tooltip-arrow {
|
|
226
|
+
border-top-color: var(--color-primary);
|
|
227
|
+
}
|
|
228
|
+
.tooltip-primary.tooltip-bottom .tooltip-arrow {
|
|
229
|
+
border-bottom-color: var(--color-primary);
|
|
230
|
+
}
|
|
231
|
+
.tooltip-primary.tooltip-left .tooltip-arrow {
|
|
232
|
+
border-left-color: var(--color-primary);
|
|
233
|
+
}
|
|
234
|
+
.tooltip-primary.tooltip-right .tooltip-arrow {
|
|
235
|
+
border-right-color: var(--color-primary);
|
|
236
|
+
}
|
|
237
|
+
.tooltip-secondary.tooltip-top .tooltip-arrow {
|
|
238
|
+
border-top-color: var(--color-secondary);
|
|
239
|
+
}
|
|
240
|
+
.tooltip-secondary.tooltip-bottom .tooltip-arrow {
|
|
241
|
+
border-bottom-color: var(--color-secondary);
|
|
242
|
+
}
|
|
243
|
+
.tooltip-secondary.tooltip-left .tooltip-arrow {
|
|
244
|
+
border-left-color: var(--color-secondary);
|
|
245
|
+
}
|
|
246
|
+
.tooltip-secondary.tooltip-right .tooltip-arrow {
|
|
247
|
+
border-right-color: var(--color-secondary);
|
|
248
|
+
}
|
|
249
|
+
.tooltip-accent.tooltip-top .tooltip-arrow {
|
|
250
|
+
border-top-color: var(--color-tertiary);
|
|
251
|
+
}
|
|
252
|
+
.tooltip-accent.tooltip-bottom .tooltip-arrow {
|
|
253
|
+
border-bottom-color: var(--color-tertiary);
|
|
254
|
+
}
|
|
255
|
+
.tooltip-accent.tooltip-left .tooltip-arrow {
|
|
256
|
+
border-left-color: var(--color-tertiary);
|
|
257
|
+
}
|
|
258
|
+
.tooltip-accent.tooltip-right .tooltip-arrow {
|
|
259
|
+
border-right-color: var(--color-tertiary);
|
|
260
|
+
}
|
|
261
|
+
.tooltip-info.tooltip-top .tooltip-arrow {
|
|
262
|
+
border-top-color: var(--color-info);
|
|
263
|
+
}
|
|
264
|
+
.tooltip-info.tooltip-bottom .tooltip-arrow {
|
|
265
|
+
border-bottom-color: var(--color-info);
|
|
266
|
+
}
|
|
267
|
+
.tooltip-info.tooltip-left .tooltip-arrow {
|
|
268
|
+
border-left-color: var(--color-info);
|
|
269
|
+
}
|
|
270
|
+
.tooltip-info.tooltip-right .tooltip-arrow {
|
|
271
|
+
border-right-color: var(--color-info);
|
|
272
|
+
}
|
|
273
|
+
.tooltip-success.tooltip-top .tooltip-arrow {
|
|
274
|
+
border-top-color: var(--color-success);
|
|
275
|
+
}
|
|
276
|
+
.tooltip-success.tooltip-bottom .tooltip-arrow {
|
|
277
|
+
border-bottom-color: var(--color-success);
|
|
278
|
+
}
|
|
279
|
+
.tooltip-success.tooltip-left .tooltip-arrow {
|
|
280
|
+
border-left-color: var(--color-success);
|
|
281
|
+
}
|
|
282
|
+
.tooltip-success.tooltip-right .tooltip-arrow {
|
|
283
|
+
border-right-color: var(--color-success);
|
|
284
|
+
}
|
|
285
|
+
.tooltip-warning.tooltip-top .tooltip-arrow {
|
|
286
|
+
border-top-color: var(--color-warning);
|
|
287
|
+
}
|
|
288
|
+
.tooltip-warning.tooltip-bottom .tooltip-arrow {
|
|
289
|
+
border-bottom-color: var(--color-warning);
|
|
290
|
+
}
|
|
291
|
+
.tooltip-warning.tooltip-left .tooltip-arrow {
|
|
292
|
+
border-left-color: var(--color-warning);
|
|
293
|
+
}
|
|
294
|
+
.tooltip-warning.tooltip-right .tooltip-arrow {
|
|
295
|
+
border-right-color: var(--color-warning);
|
|
296
|
+
}
|
|
297
|
+
.tooltip-error.tooltip-top .tooltip-arrow {
|
|
298
|
+
border-top-color: var(--color-error);
|
|
299
|
+
}
|
|
300
|
+
.tooltip-error.tooltip-bottom .tooltip-arrow {
|
|
301
|
+
border-bottom-color: var(--color-error);
|
|
302
|
+
}
|
|
303
|
+
.tooltip-error.tooltip-left .tooltip-arrow {
|
|
304
|
+
border-left-color: var(--color-error);
|
|
305
|
+
}
|
|
306
|
+
.tooltip-error.tooltip-right .tooltip-arrow {
|
|
307
|
+
border-right-color: var(--color-error);
|
|
308
|
+
}
|
|
154
309
|
`;
|
|
155
310
|
|
|
156
311
|
class ElDmTooltip extends import_el_base.BaseElement {
|
|
@@ -160,7 +315,9 @@ class ElDmTooltip extends import_el_base.BaseElement {
|
|
|
160
315
|
trigger: { type: String, reflect: true, default: "hover" },
|
|
161
316
|
delay: { type: Number, reflect: true, default: 0 },
|
|
162
317
|
arrow: { type: Boolean, reflect: true, default: true },
|
|
163
|
-
disabled: { type: Boolean, reflect: true }
|
|
318
|
+
disabled: { type: Boolean, reflect: true },
|
|
319
|
+
color: { type: String, reflect: true },
|
|
320
|
+
open: { type: Boolean, reflect: true }
|
|
164
321
|
};
|
|
165
322
|
_showTimeout = null;
|
|
166
323
|
_isVisible = false;
|
|
@@ -207,11 +364,23 @@ class ElDmTooltip extends import_el_base.BaseElement {
|
|
|
207
364
|
} else {
|
|
208
365
|
classes.push("tooltip-top");
|
|
209
366
|
}
|
|
367
|
+
if (this.color && COLOR_CLASSES[this.color]) {
|
|
368
|
+
classes.push(COLOR_CLASSES[this.color]);
|
|
369
|
+
}
|
|
210
370
|
return classes.join(" ");
|
|
211
371
|
}
|
|
212
372
|
connectedCallback() {
|
|
213
373
|
super.connectedCallback();
|
|
214
374
|
this._setupListeners();
|
|
375
|
+
if (this.open) {
|
|
376
|
+
this._setVisible(true);
|
|
377
|
+
}
|
|
378
|
+
}
|
|
379
|
+
update() {
|
|
380
|
+
super.update();
|
|
381
|
+
if (this.open) {
|
|
382
|
+
this._setVisible(true);
|
|
383
|
+
}
|
|
215
384
|
}
|
|
216
385
|
disconnectedCallback() {
|
|
217
386
|
super.disconnectedCallback?.();
|
|
@@ -260,5 +429,5 @@ function register() {
|
|
|
260
429
|
// src/register.ts
|
|
261
430
|
register();
|
|
262
431
|
|
|
263
|
-
//# debugId=
|
|
432
|
+
//# debugId=BF252FE0952B8DDC64756E2164756E21
|
|
264
433
|
//# 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, 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\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, 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 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 =\n | 'primary'\n | 'secondary'\n | 'accent'\n | 'info'\n | 'success'\n | 'warning'\n | '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 {\n background-color: var(--color-primary);\n color: var(--color-on-primary);\n }\n .tooltip-primary .tooltip-arrow {\n border-color: var(--color-primary);\n }\n .tooltip-secondary {\n background-color: var(--color-secondary);\n color: var(--color-on-secondary);\n }\n .tooltip-secondary .tooltip-arrow {\n border-color: var(--color-secondary);\n }\n .tooltip-accent {\n background-color: var(--color-tertiary);\n color: var(--color-on-tertiary);\n }\n .tooltip-accent .tooltip-arrow {\n border-color: var(--color-tertiary);\n }\n .tooltip-info {\n background-color: var(--color-info);\n color: #fff;\n }\n .tooltip-info .tooltip-arrow {\n border-color: var(--color-info);\n }\n .tooltip-success {\n background-color: var(--color-success);\n color: #fff;\n }\n .tooltip-success .tooltip-arrow {\n border-color: var(--color-success);\n }\n .tooltip-warning {\n background-color: var(--color-warning);\n color: #000;\n }\n .tooltip-warning .tooltip-arrow {\n border-color: var(--color-warning);\n }\n .tooltip-error {\n background-color: var(--color-error);\n color: #fff;\n }\n .tooltip-error .tooltip-arrow {\n border-color: var(--color-error);\n }\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 {\n border-top-color: var(--color-primary);\n }\n .tooltip-primary.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-primary);\n }\n .tooltip-primary.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-primary);\n }\n .tooltip-primary.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-primary);\n }\n .tooltip-secondary.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-secondary);\n }\n .tooltip-secondary.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-secondary);\n }\n .tooltip-secondary.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-secondary);\n }\n .tooltip-secondary.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-secondary);\n }\n .tooltip-accent.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-tertiary);\n }\n .tooltip-accent.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-tertiary);\n }\n .tooltip-accent.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-tertiary);\n }\n .tooltip-accent.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-tertiary);\n }\n .tooltip-info.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-info);\n }\n .tooltip-info.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-info);\n }\n .tooltip-info.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-info);\n }\n .tooltip-info.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-info);\n }\n .tooltip-success.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-success);\n }\n .tooltip-success.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-success);\n }\n .tooltip-success.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-success);\n }\n .tooltip-success.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-success);\n }\n .tooltip-warning.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-warning);\n }\n .tooltip-warning.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-warning);\n }\n .tooltip-warning.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-warning);\n }\n .tooltip-warning.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-warning);\n }\n .tooltip-error.tooltip-top .tooltip-arrow {\n border-top-color: var(--color-error);\n }\n .tooltip-error.tooltip-bottom .tooltip-arrow {\n border-bottom-color: var(--color-error);\n }\n .tooltip-error.tooltip-left .tooltip-arrow {\n border-left-color: var(--color-error);\n }\n .tooltip-error.tooltip-right .tooltip-arrow {\n border-right-color: var(--color-error);\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 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsBkD,IAAlD;AACkC,IAAlC;AAEA,IAAM,mBAA2C;AAAA,EAC/C,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AACT;
|
|
10
|
-
"debugId": "
|
|
9
|
+
"mappings": "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",
|
|
10
|
+
"debugId": "BF252FE0952B8DDC64756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|