@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/esm/index.js
CHANGED
|
@@ -7,6 +7,15 @@ var POSITION_CLASSES = {
|
|
|
7
7
|
left: "tooltip-left",
|
|
8
8
|
right: "tooltip-right"
|
|
9
9
|
};
|
|
10
|
+
var COLOR_CLASSES = {
|
|
11
|
+
primary: "tooltip-primary",
|
|
12
|
+
secondary: "tooltip-secondary",
|
|
13
|
+
accent: "tooltip-accent",
|
|
14
|
+
info: "tooltip-info",
|
|
15
|
+
success: "tooltip-success",
|
|
16
|
+
warning: "tooltip-warning",
|
|
17
|
+
error: "tooltip-error"
|
|
18
|
+
};
|
|
10
19
|
var coreStyles = tooltipCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
11
20
|
var styles = css`
|
|
12
21
|
:host {
|
|
@@ -115,6 +124,152 @@ var styles = css`
|
|
|
115
124
|
border-right-color: var(--color-inverse-surface, #1f1f1f);
|
|
116
125
|
border-left: 0;
|
|
117
126
|
}
|
|
127
|
+
|
|
128
|
+
/* Color variants */
|
|
129
|
+
.tooltip-primary {
|
|
130
|
+
background-color: var(--color-primary);
|
|
131
|
+
color: var(--color-on-primary);
|
|
132
|
+
}
|
|
133
|
+
.tooltip-primary .tooltip-arrow {
|
|
134
|
+
border-color: var(--color-primary);
|
|
135
|
+
}
|
|
136
|
+
.tooltip-secondary {
|
|
137
|
+
background-color: var(--color-secondary);
|
|
138
|
+
color: var(--color-on-secondary);
|
|
139
|
+
}
|
|
140
|
+
.tooltip-secondary .tooltip-arrow {
|
|
141
|
+
border-color: var(--color-secondary);
|
|
142
|
+
}
|
|
143
|
+
.tooltip-accent {
|
|
144
|
+
background-color: var(--color-tertiary);
|
|
145
|
+
color: var(--color-on-tertiary);
|
|
146
|
+
}
|
|
147
|
+
.tooltip-accent .tooltip-arrow {
|
|
148
|
+
border-color: var(--color-tertiary);
|
|
149
|
+
}
|
|
150
|
+
.tooltip-info {
|
|
151
|
+
background-color: var(--color-info);
|
|
152
|
+
color: #fff;
|
|
153
|
+
}
|
|
154
|
+
.tooltip-info .tooltip-arrow {
|
|
155
|
+
border-color: var(--color-info);
|
|
156
|
+
}
|
|
157
|
+
.tooltip-success {
|
|
158
|
+
background-color: var(--color-success);
|
|
159
|
+
color: #fff;
|
|
160
|
+
}
|
|
161
|
+
.tooltip-success .tooltip-arrow {
|
|
162
|
+
border-color: var(--color-success);
|
|
163
|
+
}
|
|
164
|
+
.tooltip-warning {
|
|
165
|
+
background-color: var(--color-warning);
|
|
166
|
+
color: #000;
|
|
167
|
+
}
|
|
168
|
+
.tooltip-warning .tooltip-arrow {
|
|
169
|
+
border-color: var(--color-warning);
|
|
170
|
+
}
|
|
171
|
+
.tooltip-error {
|
|
172
|
+
background-color: var(--color-error);
|
|
173
|
+
color: #fff;
|
|
174
|
+
}
|
|
175
|
+
.tooltip-error .tooltip-arrow {
|
|
176
|
+
border-color: var(--color-error);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Arrow color inheritance for colored variants — reset transparent borders */
|
|
180
|
+
.tooltip-primary .tooltip-arrow,
|
|
181
|
+
.tooltip-secondary .tooltip-arrow,
|
|
182
|
+
.tooltip-accent .tooltip-arrow,
|
|
183
|
+
.tooltip-info .tooltip-arrow,
|
|
184
|
+
.tooltip-success .tooltip-arrow,
|
|
185
|
+
.tooltip-warning .tooltip-arrow,
|
|
186
|
+
.tooltip-error .tooltip-arrow {
|
|
187
|
+
border-color: transparent;
|
|
188
|
+
}
|
|
189
|
+
.tooltip-primary.tooltip-top .tooltip-arrow {
|
|
190
|
+
border-top-color: var(--color-primary);
|
|
191
|
+
}
|
|
192
|
+
.tooltip-primary.tooltip-bottom .tooltip-arrow {
|
|
193
|
+
border-bottom-color: var(--color-primary);
|
|
194
|
+
}
|
|
195
|
+
.tooltip-primary.tooltip-left .tooltip-arrow {
|
|
196
|
+
border-left-color: var(--color-primary);
|
|
197
|
+
}
|
|
198
|
+
.tooltip-primary.tooltip-right .tooltip-arrow {
|
|
199
|
+
border-right-color: var(--color-primary);
|
|
200
|
+
}
|
|
201
|
+
.tooltip-secondary.tooltip-top .tooltip-arrow {
|
|
202
|
+
border-top-color: var(--color-secondary);
|
|
203
|
+
}
|
|
204
|
+
.tooltip-secondary.tooltip-bottom .tooltip-arrow {
|
|
205
|
+
border-bottom-color: var(--color-secondary);
|
|
206
|
+
}
|
|
207
|
+
.tooltip-secondary.tooltip-left .tooltip-arrow {
|
|
208
|
+
border-left-color: var(--color-secondary);
|
|
209
|
+
}
|
|
210
|
+
.tooltip-secondary.tooltip-right .tooltip-arrow {
|
|
211
|
+
border-right-color: var(--color-secondary);
|
|
212
|
+
}
|
|
213
|
+
.tooltip-accent.tooltip-top .tooltip-arrow {
|
|
214
|
+
border-top-color: var(--color-tertiary);
|
|
215
|
+
}
|
|
216
|
+
.tooltip-accent.tooltip-bottom .tooltip-arrow {
|
|
217
|
+
border-bottom-color: var(--color-tertiary);
|
|
218
|
+
}
|
|
219
|
+
.tooltip-accent.tooltip-left .tooltip-arrow {
|
|
220
|
+
border-left-color: var(--color-tertiary);
|
|
221
|
+
}
|
|
222
|
+
.tooltip-accent.tooltip-right .tooltip-arrow {
|
|
223
|
+
border-right-color: var(--color-tertiary);
|
|
224
|
+
}
|
|
225
|
+
.tooltip-info.tooltip-top .tooltip-arrow {
|
|
226
|
+
border-top-color: var(--color-info);
|
|
227
|
+
}
|
|
228
|
+
.tooltip-info.tooltip-bottom .tooltip-arrow {
|
|
229
|
+
border-bottom-color: var(--color-info);
|
|
230
|
+
}
|
|
231
|
+
.tooltip-info.tooltip-left .tooltip-arrow {
|
|
232
|
+
border-left-color: var(--color-info);
|
|
233
|
+
}
|
|
234
|
+
.tooltip-info.tooltip-right .tooltip-arrow {
|
|
235
|
+
border-right-color: var(--color-info);
|
|
236
|
+
}
|
|
237
|
+
.tooltip-success.tooltip-top .tooltip-arrow {
|
|
238
|
+
border-top-color: var(--color-success);
|
|
239
|
+
}
|
|
240
|
+
.tooltip-success.tooltip-bottom .tooltip-arrow {
|
|
241
|
+
border-bottom-color: var(--color-success);
|
|
242
|
+
}
|
|
243
|
+
.tooltip-success.tooltip-left .tooltip-arrow {
|
|
244
|
+
border-left-color: var(--color-success);
|
|
245
|
+
}
|
|
246
|
+
.tooltip-success.tooltip-right .tooltip-arrow {
|
|
247
|
+
border-right-color: var(--color-success);
|
|
248
|
+
}
|
|
249
|
+
.tooltip-warning.tooltip-top .tooltip-arrow {
|
|
250
|
+
border-top-color: var(--color-warning);
|
|
251
|
+
}
|
|
252
|
+
.tooltip-warning.tooltip-bottom .tooltip-arrow {
|
|
253
|
+
border-bottom-color: var(--color-warning);
|
|
254
|
+
}
|
|
255
|
+
.tooltip-warning.tooltip-left .tooltip-arrow {
|
|
256
|
+
border-left-color: var(--color-warning);
|
|
257
|
+
}
|
|
258
|
+
.tooltip-warning.tooltip-right .tooltip-arrow {
|
|
259
|
+
border-right-color: var(--color-warning);
|
|
260
|
+
}
|
|
261
|
+
.tooltip-error.tooltip-top .tooltip-arrow {
|
|
262
|
+
border-top-color: var(--color-error);
|
|
263
|
+
}
|
|
264
|
+
.tooltip-error.tooltip-bottom .tooltip-arrow {
|
|
265
|
+
border-bottom-color: var(--color-error);
|
|
266
|
+
}
|
|
267
|
+
.tooltip-error.tooltip-left .tooltip-arrow {
|
|
268
|
+
border-left-color: var(--color-error);
|
|
269
|
+
}
|
|
270
|
+
.tooltip-error.tooltip-right .tooltip-arrow {
|
|
271
|
+
border-right-color: var(--color-error);
|
|
272
|
+
}
|
|
118
273
|
`;
|
|
119
274
|
|
|
120
275
|
class ElDmTooltip extends BaseElement {
|
|
@@ -124,7 +279,9 @@ class ElDmTooltip extends BaseElement {
|
|
|
124
279
|
trigger: { type: String, reflect: true, default: "hover" },
|
|
125
280
|
delay: { type: Number, reflect: true, default: 0 },
|
|
126
281
|
arrow: { type: Boolean, reflect: true, default: true },
|
|
127
|
-
disabled: { type: Boolean, reflect: true }
|
|
282
|
+
disabled: { type: Boolean, reflect: true },
|
|
283
|
+
color: { type: String, reflect: true },
|
|
284
|
+
open: { type: Boolean, reflect: true }
|
|
128
285
|
};
|
|
129
286
|
_showTimeout = null;
|
|
130
287
|
_isVisible = false;
|
|
@@ -171,11 +328,23 @@ class ElDmTooltip extends BaseElement {
|
|
|
171
328
|
} else {
|
|
172
329
|
classes.push("tooltip-top");
|
|
173
330
|
}
|
|
331
|
+
if (this.color && COLOR_CLASSES[this.color]) {
|
|
332
|
+
classes.push(COLOR_CLASSES[this.color]);
|
|
333
|
+
}
|
|
174
334
|
return classes.join(" ");
|
|
175
335
|
}
|
|
176
336
|
connectedCallback() {
|
|
177
337
|
super.connectedCallback();
|
|
178
338
|
this._setupListeners();
|
|
339
|
+
if (this.open) {
|
|
340
|
+
this._setVisible(true);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
update() {
|
|
344
|
+
super.update();
|
|
345
|
+
if (this.open) {
|
|
346
|
+
this._setVisible(true);
|
|
347
|
+
}
|
|
179
348
|
}
|
|
180
349
|
disconnectedCallback() {
|
|
181
350
|
super.disconnectedCallback?.();
|
|
@@ -225,5 +394,5 @@ export {
|
|
|
225
394
|
ElDmTooltip
|
|
226
395
|
};
|
|
227
396
|
|
|
228
|
-
//# debugId=
|
|
397
|
+
//# debugId=3326017B73E712EE64756E2164756E21
|
|
229
398
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/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": ";AAsBA;AACA,gBAAS;AAET,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": "3326017B73E712EE64756E2164756E21",
|
|
10
10
|
"names": []
|
|
11
11
|
}
|
package/dist/esm/register.js
CHANGED
|
@@ -7,6 +7,15 @@ var POSITION_CLASSES = {
|
|
|
7
7
|
left: "tooltip-left",
|
|
8
8
|
right: "tooltip-right"
|
|
9
9
|
};
|
|
10
|
+
var COLOR_CLASSES = {
|
|
11
|
+
primary: "tooltip-primary",
|
|
12
|
+
secondary: "tooltip-secondary",
|
|
13
|
+
accent: "tooltip-accent",
|
|
14
|
+
info: "tooltip-info",
|
|
15
|
+
success: "tooltip-success",
|
|
16
|
+
warning: "tooltip-warning",
|
|
17
|
+
error: "tooltip-error"
|
|
18
|
+
};
|
|
10
19
|
var coreStyles = tooltipCSS.replace(/@layer\s+components\s*\{/, "").replace(/\}\s*$/, "");
|
|
11
20
|
var styles = css`
|
|
12
21
|
:host {
|
|
@@ -115,6 +124,152 @@ var styles = css`
|
|
|
115
124
|
border-right-color: var(--color-inverse-surface, #1f1f1f);
|
|
116
125
|
border-left: 0;
|
|
117
126
|
}
|
|
127
|
+
|
|
128
|
+
/* Color variants */
|
|
129
|
+
.tooltip-primary {
|
|
130
|
+
background-color: var(--color-primary);
|
|
131
|
+
color: var(--color-on-primary);
|
|
132
|
+
}
|
|
133
|
+
.tooltip-primary .tooltip-arrow {
|
|
134
|
+
border-color: var(--color-primary);
|
|
135
|
+
}
|
|
136
|
+
.tooltip-secondary {
|
|
137
|
+
background-color: var(--color-secondary);
|
|
138
|
+
color: var(--color-on-secondary);
|
|
139
|
+
}
|
|
140
|
+
.tooltip-secondary .tooltip-arrow {
|
|
141
|
+
border-color: var(--color-secondary);
|
|
142
|
+
}
|
|
143
|
+
.tooltip-accent {
|
|
144
|
+
background-color: var(--color-tertiary);
|
|
145
|
+
color: var(--color-on-tertiary);
|
|
146
|
+
}
|
|
147
|
+
.tooltip-accent .tooltip-arrow {
|
|
148
|
+
border-color: var(--color-tertiary);
|
|
149
|
+
}
|
|
150
|
+
.tooltip-info {
|
|
151
|
+
background-color: var(--color-info);
|
|
152
|
+
color: #fff;
|
|
153
|
+
}
|
|
154
|
+
.tooltip-info .tooltip-arrow {
|
|
155
|
+
border-color: var(--color-info);
|
|
156
|
+
}
|
|
157
|
+
.tooltip-success {
|
|
158
|
+
background-color: var(--color-success);
|
|
159
|
+
color: #fff;
|
|
160
|
+
}
|
|
161
|
+
.tooltip-success .tooltip-arrow {
|
|
162
|
+
border-color: var(--color-success);
|
|
163
|
+
}
|
|
164
|
+
.tooltip-warning {
|
|
165
|
+
background-color: var(--color-warning);
|
|
166
|
+
color: #000;
|
|
167
|
+
}
|
|
168
|
+
.tooltip-warning .tooltip-arrow {
|
|
169
|
+
border-color: var(--color-warning);
|
|
170
|
+
}
|
|
171
|
+
.tooltip-error {
|
|
172
|
+
background-color: var(--color-error);
|
|
173
|
+
color: #fff;
|
|
174
|
+
}
|
|
175
|
+
.tooltip-error .tooltip-arrow {
|
|
176
|
+
border-color: var(--color-error);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* Arrow color inheritance for colored variants — reset transparent borders */
|
|
180
|
+
.tooltip-primary .tooltip-arrow,
|
|
181
|
+
.tooltip-secondary .tooltip-arrow,
|
|
182
|
+
.tooltip-accent .tooltip-arrow,
|
|
183
|
+
.tooltip-info .tooltip-arrow,
|
|
184
|
+
.tooltip-success .tooltip-arrow,
|
|
185
|
+
.tooltip-warning .tooltip-arrow,
|
|
186
|
+
.tooltip-error .tooltip-arrow {
|
|
187
|
+
border-color: transparent;
|
|
188
|
+
}
|
|
189
|
+
.tooltip-primary.tooltip-top .tooltip-arrow {
|
|
190
|
+
border-top-color: var(--color-primary);
|
|
191
|
+
}
|
|
192
|
+
.tooltip-primary.tooltip-bottom .tooltip-arrow {
|
|
193
|
+
border-bottom-color: var(--color-primary);
|
|
194
|
+
}
|
|
195
|
+
.tooltip-primary.tooltip-left .tooltip-arrow {
|
|
196
|
+
border-left-color: var(--color-primary);
|
|
197
|
+
}
|
|
198
|
+
.tooltip-primary.tooltip-right .tooltip-arrow {
|
|
199
|
+
border-right-color: var(--color-primary);
|
|
200
|
+
}
|
|
201
|
+
.tooltip-secondary.tooltip-top .tooltip-arrow {
|
|
202
|
+
border-top-color: var(--color-secondary);
|
|
203
|
+
}
|
|
204
|
+
.tooltip-secondary.tooltip-bottom .tooltip-arrow {
|
|
205
|
+
border-bottom-color: var(--color-secondary);
|
|
206
|
+
}
|
|
207
|
+
.tooltip-secondary.tooltip-left .tooltip-arrow {
|
|
208
|
+
border-left-color: var(--color-secondary);
|
|
209
|
+
}
|
|
210
|
+
.tooltip-secondary.tooltip-right .tooltip-arrow {
|
|
211
|
+
border-right-color: var(--color-secondary);
|
|
212
|
+
}
|
|
213
|
+
.tooltip-accent.tooltip-top .tooltip-arrow {
|
|
214
|
+
border-top-color: var(--color-tertiary);
|
|
215
|
+
}
|
|
216
|
+
.tooltip-accent.tooltip-bottom .tooltip-arrow {
|
|
217
|
+
border-bottom-color: var(--color-tertiary);
|
|
218
|
+
}
|
|
219
|
+
.tooltip-accent.tooltip-left .tooltip-arrow {
|
|
220
|
+
border-left-color: var(--color-tertiary);
|
|
221
|
+
}
|
|
222
|
+
.tooltip-accent.tooltip-right .tooltip-arrow {
|
|
223
|
+
border-right-color: var(--color-tertiary);
|
|
224
|
+
}
|
|
225
|
+
.tooltip-info.tooltip-top .tooltip-arrow {
|
|
226
|
+
border-top-color: var(--color-info);
|
|
227
|
+
}
|
|
228
|
+
.tooltip-info.tooltip-bottom .tooltip-arrow {
|
|
229
|
+
border-bottom-color: var(--color-info);
|
|
230
|
+
}
|
|
231
|
+
.tooltip-info.tooltip-left .tooltip-arrow {
|
|
232
|
+
border-left-color: var(--color-info);
|
|
233
|
+
}
|
|
234
|
+
.tooltip-info.tooltip-right .tooltip-arrow {
|
|
235
|
+
border-right-color: var(--color-info);
|
|
236
|
+
}
|
|
237
|
+
.tooltip-success.tooltip-top .tooltip-arrow {
|
|
238
|
+
border-top-color: var(--color-success);
|
|
239
|
+
}
|
|
240
|
+
.tooltip-success.tooltip-bottom .tooltip-arrow {
|
|
241
|
+
border-bottom-color: var(--color-success);
|
|
242
|
+
}
|
|
243
|
+
.tooltip-success.tooltip-left .tooltip-arrow {
|
|
244
|
+
border-left-color: var(--color-success);
|
|
245
|
+
}
|
|
246
|
+
.tooltip-success.tooltip-right .tooltip-arrow {
|
|
247
|
+
border-right-color: var(--color-success);
|
|
248
|
+
}
|
|
249
|
+
.tooltip-warning.tooltip-top .tooltip-arrow {
|
|
250
|
+
border-top-color: var(--color-warning);
|
|
251
|
+
}
|
|
252
|
+
.tooltip-warning.tooltip-bottom .tooltip-arrow {
|
|
253
|
+
border-bottom-color: var(--color-warning);
|
|
254
|
+
}
|
|
255
|
+
.tooltip-warning.tooltip-left .tooltip-arrow {
|
|
256
|
+
border-left-color: var(--color-warning);
|
|
257
|
+
}
|
|
258
|
+
.tooltip-warning.tooltip-right .tooltip-arrow {
|
|
259
|
+
border-right-color: var(--color-warning);
|
|
260
|
+
}
|
|
261
|
+
.tooltip-error.tooltip-top .tooltip-arrow {
|
|
262
|
+
border-top-color: var(--color-error);
|
|
263
|
+
}
|
|
264
|
+
.tooltip-error.tooltip-bottom .tooltip-arrow {
|
|
265
|
+
border-bottom-color: var(--color-error);
|
|
266
|
+
}
|
|
267
|
+
.tooltip-error.tooltip-left .tooltip-arrow {
|
|
268
|
+
border-left-color: var(--color-error);
|
|
269
|
+
}
|
|
270
|
+
.tooltip-error.tooltip-right .tooltip-arrow {
|
|
271
|
+
border-right-color: var(--color-error);
|
|
272
|
+
}
|
|
118
273
|
`;
|
|
119
274
|
|
|
120
275
|
class ElDmTooltip extends BaseElement {
|
|
@@ -124,7 +279,9 @@ class ElDmTooltip extends BaseElement {
|
|
|
124
279
|
trigger: { type: String, reflect: true, default: "hover" },
|
|
125
280
|
delay: { type: Number, reflect: true, default: 0 },
|
|
126
281
|
arrow: { type: Boolean, reflect: true, default: true },
|
|
127
|
-
disabled: { type: Boolean, reflect: true }
|
|
282
|
+
disabled: { type: Boolean, reflect: true },
|
|
283
|
+
color: { type: String, reflect: true },
|
|
284
|
+
open: { type: Boolean, reflect: true }
|
|
128
285
|
};
|
|
129
286
|
_showTimeout = null;
|
|
130
287
|
_isVisible = false;
|
|
@@ -171,11 +328,23 @@ class ElDmTooltip extends BaseElement {
|
|
|
171
328
|
} else {
|
|
172
329
|
classes.push("tooltip-top");
|
|
173
330
|
}
|
|
331
|
+
if (this.color && COLOR_CLASSES[this.color]) {
|
|
332
|
+
classes.push(COLOR_CLASSES[this.color]);
|
|
333
|
+
}
|
|
174
334
|
return classes.join(" ");
|
|
175
335
|
}
|
|
176
336
|
connectedCallback() {
|
|
177
337
|
super.connectedCallback();
|
|
178
338
|
this._setupListeners();
|
|
339
|
+
if (this.open) {
|
|
340
|
+
this._setVisible(true);
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
update() {
|
|
344
|
+
super.update();
|
|
345
|
+
if (this.open) {
|
|
346
|
+
this._setVisible(true);
|
|
347
|
+
}
|
|
179
348
|
}
|
|
180
349
|
disconnectedCallback() {
|
|
181
350
|
super.disconnectedCallback?.();
|
|
@@ -224,5 +393,5 @@ function register() {
|
|
|
224
393
|
// src/register.ts
|
|
225
394
|
register();
|
|
226
395
|
|
|
227
|
-
//# debugId=
|
|
396
|
+
//# debugId=5C27011F1FA7910164756E2164756E21
|
|
228
397
|
//# sourceMappingURL=register.js.map
|
package/dist/esm/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": ";AAsBA;AACA,gBAAS;AAET,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": "5C27011F1FA7910164756E2164756E21",
|
|
11
11
|
"names": []
|
|
12
12
|
}
|