@duskmoon-dev/el-tooltip 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +133 -0
  2. package/dist/cjs/index.js +84 -6
  3. package/dist/cjs/index.js.map +3 -3
  4. package/dist/cjs/register.js +84 -6
  5. package/dist/cjs/register.js.map +3 -3
  6. package/dist/esm/index.js +82 -4
  7. package/dist/esm/index.js.map +3 -3
  8. package/dist/esm/register.js +82 -4
  9. package/dist/esm/register.js.map +3 -3
  10. package/dist/tsconfig.tsbuildinfo +1 -1
  11. package/dist/types/el-dm-tooltip.d.ts +13 -1
  12. package/dist/types/el-dm-tooltip.d.ts.map +1 -1
  13. package/package.json +6 -6
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/el-dm-tooltip.ts
2
- import { BaseElement, css } from "@duskmoon-dev/el-core";
2
+ import { BaseElement, css, animationStyles } from "@duskmoon-dev/el-base";
3
3
  import { css as tooltipCSS } from "@duskmoon-dev/core/components/tooltip";
4
4
  var POSITION_CLASSES = {
5
5
  top: "tooltip-top",
@@ -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,61 @@ 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 { background-color: var(--color-primary); color: var(--color-on-primary); }
130
+ .tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }
131
+ .tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }
132
+ .tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }
133
+ .tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }
134
+ .tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }
135
+ .tooltip-info { background-color: var(--color-info); color: #fff; }
136
+ .tooltip-info .tooltip-arrow { border-color: var(--color-info); }
137
+ .tooltip-success { background-color: var(--color-success); color: #fff; }
138
+ .tooltip-success .tooltip-arrow { border-color: var(--color-success); }
139
+ .tooltip-warning { background-color: var(--color-warning); color: #000; }
140
+ .tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }
141
+ .tooltip-error { background-color: var(--color-error); color: #fff; }
142
+ .tooltip-error .tooltip-arrow { border-color: var(--color-error); }
143
+
144
+ /* Arrow color inheritance for colored variants — reset transparent borders */
145
+ .tooltip-primary .tooltip-arrow,
146
+ .tooltip-secondary .tooltip-arrow,
147
+ .tooltip-accent .tooltip-arrow,
148
+ .tooltip-info .tooltip-arrow,
149
+ .tooltip-success .tooltip-arrow,
150
+ .tooltip-warning .tooltip-arrow,
151
+ .tooltip-error .tooltip-arrow {
152
+ border-color: transparent;
153
+ }
154
+ .tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }
155
+ .tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }
156
+ .tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }
157
+ .tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }
158
+ .tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }
159
+ .tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }
160
+ .tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }
161
+ .tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }
162
+ .tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }
163
+ .tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }
164
+ .tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }
165
+ .tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }
166
+ .tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }
167
+ .tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }
168
+ .tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }
169
+ .tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }
170
+ .tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }
171
+ .tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }
172
+ .tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }
173
+ .tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }
174
+ .tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }
175
+ .tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }
176
+ .tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }
177
+ .tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }
178
+ .tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }
179
+ .tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }
180
+ .tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }
181
+ .tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }
118
182
  `;
119
183
 
120
184
  class ElDmTooltip extends BaseElement {
@@ -124,13 +188,15 @@ class ElDmTooltip extends BaseElement {
124
188
  trigger: { type: String, reflect: true, default: "hover" },
125
189
  delay: { type: Number, reflect: true, default: 0 },
126
190
  arrow: { type: Boolean, reflect: true, default: true },
127
- disabled: { type: Boolean, reflect: true }
191
+ disabled: { type: Boolean, reflect: true },
192
+ color: { type: String, reflect: true },
193
+ open: { type: Boolean, reflect: true }
128
194
  };
129
195
  _showTimeout = null;
130
196
  _isVisible = false;
131
197
  constructor() {
132
198
  super();
133
- this.attachStyles(styles);
199
+ this.attachStyles([styles, animationStyles]);
134
200
  }
135
201
  _show() {
136
202
  if (this.disabled || !this.content)
@@ -171,11 +237,23 @@ class ElDmTooltip extends BaseElement {
171
237
  } else {
172
238
  classes.push("tooltip-top");
173
239
  }
240
+ if (this.color && COLOR_CLASSES[this.color]) {
241
+ classes.push(COLOR_CLASSES[this.color]);
242
+ }
174
243
  return classes.join(" ");
175
244
  }
176
245
  connectedCallback() {
177
246
  super.connectedCallback();
178
247
  this._setupListeners();
248
+ if (this.open) {
249
+ this._setVisible(true);
250
+ }
251
+ }
252
+ update() {
253
+ super.update();
254
+ if (this.open) {
255
+ this._setVisible(true);
256
+ }
179
257
  }
180
258
  disconnectedCallback() {
181
259
  super.disconnectedCallback?.();
@@ -225,5 +303,5 @@ export {
225
303
  ElDmTooltip
226
304
  };
227
305
 
228
- //# debugId=614341F72E9E7F9064756E2164756E21
306
+ //# debugId=DFD6AF5D83D14B1264756E2164756E21
229
307
  //# 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 } from '@duskmoon-dev/el-core';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
5
+ "/**\n * DuskMoon Tooltip Element\n *\n * A tooltip component for displaying additional information on hover/focus.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} position - Tooltip position: top, bottom, left, right\n * @attr {string} trigger - Trigger mode: hover, click, focus\n * @attr {number} delay - Show delay in milliseconds\n * @attr {boolean} arrow - Whether to show arrow\n * @attr {boolean} disabled - Whether tooltip is disabled\n *\n * @slot - Default slot for trigger element\n *\n * @csspart tooltip - The tooltip container\n * @csspart content - The tooltip content\n * @csspart arrow - The tooltip arrow\n */\n\nimport { BaseElement, css, animationStyles } from '@duskmoon-dev/el-base';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nconst COLOR_CLASSES: Record<string, string> = {\n primary: 'tooltip-primary',\n secondary: 'tooltip-secondary',\n accent: 'tooltip-accent',\n info: 'tooltip-info',\n success: 'tooltip-success',\n warning: 'tooltip-warning',\n error: 'tooltip-error',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\nexport type TooltipColor = 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n\n /* Color variants */\n .tooltip-primary { background-color: var(--color-primary); color: var(--color-on-primary); }\n .tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }\n .tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }\n .tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }\n .tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }\n .tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }\n .tooltip-info { background-color: var(--color-info); color: #fff; }\n .tooltip-info .tooltip-arrow { border-color: var(--color-info); }\n .tooltip-success { background-color: var(--color-success); color: #fff; }\n .tooltip-success .tooltip-arrow { border-color: var(--color-success); }\n .tooltip-warning { background-color: var(--color-warning); color: #000; }\n .tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }\n .tooltip-error { background-color: var(--color-error); color: #fff; }\n .tooltip-error .tooltip-arrow { border-color: var(--color-error); }\n\n /* Arrow color inheritance for colored variants — reset transparent borders */\n .tooltip-primary .tooltip-arrow,\n .tooltip-secondary .tooltip-arrow,\n .tooltip-accent .tooltip-arrow,\n .tooltip-info .tooltip-arrow,\n .tooltip-success .tooltip-arrow,\n .tooltip-warning .tooltip-arrow,\n .tooltip-error .tooltip-arrow {\n border-color: transparent;\n }\n .tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }\n .tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }\n .tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }\n .tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }\n .tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }\n .tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }\n .tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }\n .tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }\n .tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }\n .tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }\n .tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }\n .tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }\n .tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }\n .tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }\n .tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }\n .tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }\n .tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }\n .tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }\n .tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }\n .tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }\n .tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }\n .tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n color: { type: String, reflect: true },\n open: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n declare color: TooltipColor;\n declare open: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles([styles, animationStyles]);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n if (this.color && COLOR_CLASSES[this.color]) {\n classes.push(COLOR_CLASSES[this.color]);\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n // Sync initial open state\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n update(): void {\n super.update();\n // Sync open prop with visibility\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
6
6
  "/**\n * @duskmoon-dev/el-tooltip\n *\n * DuskMoon Tooltip custom element\n */\n\nimport { ElDmTooltip } from './el-dm-tooltip.js';\n\nexport { ElDmTooltip };\nexport type { TooltipPosition, TooltipTrigger } from './el-dm-tooltip.js';\n\n/**\n * Register the el-dm-tooltip custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-tooltip';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-tooltip')) {\n customElements.define('el-dm-tooltip', ElDmTooltip);\n }\n}\n"
7
7
  ],
8
- "mappings": "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",
9
- "debugId": "614341F72E9E7F9064756E2164756E21",
8
+ "mappings": "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",
9
+ "debugId": "DFD6AF5D83D14B1264756E2164756E21",
10
10
  "names": []
11
11
  }
package/dist/esm/register.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/el-dm-tooltip.ts
2
- import { BaseElement, css } from "@duskmoon-dev/el-core";
2
+ import { BaseElement, css, animationStyles } from "@duskmoon-dev/el-base";
3
3
  import { css as tooltipCSS } from "@duskmoon-dev/core/components/tooltip";
4
4
  var POSITION_CLASSES = {
5
5
  top: "tooltip-top",
@@ -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,61 @@ 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 { background-color: var(--color-primary); color: var(--color-on-primary); }
130
+ .tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }
131
+ .tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }
132
+ .tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }
133
+ .tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }
134
+ .tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }
135
+ .tooltip-info { background-color: var(--color-info); color: #fff; }
136
+ .tooltip-info .tooltip-arrow { border-color: var(--color-info); }
137
+ .tooltip-success { background-color: var(--color-success); color: #fff; }
138
+ .tooltip-success .tooltip-arrow { border-color: var(--color-success); }
139
+ .tooltip-warning { background-color: var(--color-warning); color: #000; }
140
+ .tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }
141
+ .tooltip-error { background-color: var(--color-error); color: #fff; }
142
+ .tooltip-error .tooltip-arrow { border-color: var(--color-error); }
143
+
144
+ /* Arrow color inheritance for colored variants — reset transparent borders */
145
+ .tooltip-primary .tooltip-arrow,
146
+ .tooltip-secondary .tooltip-arrow,
147
+ .tooltip-accent .tooltip-arrow,
148
+ .tooltip-info .tooltip-arrow,
149
+ .tooltip-success .tooltip-arrow,
150
+ .tooltip-warning .tooltip-arrow,
151
+ .tooltip-error .tooltip-arrow {
152
+ border-color: transparent;
153
+ }
154
+ .tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }
155
+ .tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }
156
+ .tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }
157
+ .tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }
158
+ .tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }
159
+ .tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }
160
+ .tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }
161
+ .tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }
162
+ .tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }
163
+ .tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }
164
+ .tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }
165
+ .tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }
166
+ .tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }
167
+ .tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }
168
+ .tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }
169
+ .tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }
170
+ .tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }
171
+ .tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }
172
+ .tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }
173
+ .tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }
174
+ .tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }
175
+ .tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }
176
+ .tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }
177
+ .tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }
178
+ .tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }
179
+ .tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }
180
+ .tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }
181
+ .tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }
118
182
  `;
119
183
 
120
184
  class ElDmTooltip extends BaseElement {
@@ -124,13 +188,15 @@ class ElDmTooltip extends BaseElement {
124
188
  trigger: { type: String, reflect: true, default: "hover" },
125
189
  delay: { type: Number, reflect: true, default: 0 },
126
190
  arrow: { type: Boolean, reflect: true, default: true },
127
- disabled: { type: Boolean, reflect: true }
191
+ disabled: { type: Boolean, reflect: true },
192
+ color: { type: String, reflect: true },
193
+ open: { type: Boolean, reflect: true }
128
194
  };
129
195
  _showTimeout = null;
130
196
  _isVisible = false;
131
197
  constructor() {
132
198
  super();
133
- this.attachStyles(styles);
199
+ this.attachStyles([styles, animationStyles]);
134
200
  }
135
201
  _show() {
136
202
  if (this.disabled || !this.content)
@@ -171,11 +237,23 @@ class ElDmTooltip extends BaseElement {
171
237
  } else {
172
238
  classes.push("tooltip-top");
173
239
  }
240
+ if (this.color && COLOR_CLASSES[this.color]) {
241
+ classes.push(COLOR_CLASSES[this.color]);
242
+ }
174
243
  return classes.join(" ");
175
244
  }
176
245
  connectedCallback() {
177
246
  super.connectedCallback();
178
247
  this._setupListeners();
248
+ if (this.open) {
249
+ this._setVisible(true);
250
+ }
251
+ }
252
+ update() {
253
+ super.update();
254
+ if (this.open) {
255
+ this._setVisible(true);
256
+ }
179
257
  }
180
258
  disconnectedCallback() {
181
259
  super.disconnectedCallback?.();
@@ -224,5 +302,5 @@ function register() {
224
302
  // src/register.ts
225
303
  register();
226
304
 
227
- //# debugId=4BCED25038517C7564756E2164756E21
305
+ //# debugId=CE06CD86C1A1E28464756E2164756E21
228
306
  //# 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 } from '@duskmoon-dev/el-core';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles(styles);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
5
+ "/**\n * DuskMoon Tooltip Element\n *\n * A tooltip component for displaying additional information on hover/focus.\n * Uses styles from @duskmoon-dev/core for consistent theming.\n *\n * @element el-dm-tooltip\n *\n * @attr {string} content - Tooltip text content\n * @attr {string} position - Tooltip position: top, bottom, left, right\n * @attr {string} trigger - Trigger mode: hover, click, focus\n * @attr {number} delay - Show delay in milliseconds\n * @attr {boolean} arrow - Whether to show arrow\n * @attr {boolean} disabled - Whether tooltip is disabled\n *\n * @slot - Default slot for trigger element\n *\n * @csspart tooltip - The tooltip container\n * @csspart content - The tooltip content\n * @csspart arrow - The tooltip arrow\n */\n\nimport { BaseElement, css, animationStyles } from '@duskmoon-dev/el-base';\nimport { css as tooltipCSS } from '@duskmoon-dev/core/components/tooltip';\n\nconst POSITION_CLASSES: Record<string, string> = {\n top: 'tooltip-top',\n bottom: 'tooltip-bottom',\n left: 'tooltip-left',\n right: 'tooltip-right',\n};\n\nconst COLOR_CLASSES: Record<string, string> = {\n primary: 'tooltip-primary',\n secondary: 'tooltip-secondary',\n accent: 'tooltip-accent',\n info: 'tooltip-info',\n success: 'tooltip-success',\n warning: 'tooltip-warning',\n error: 'tooltip-error',\n};\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'focus';\nexport type TooltipColor = 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n\n// Strip @layer wrapper for Shadow DOM compatibility\nconst coreStyles = tooltipCSS.replace(/@layer\\s+components\\s*\\{/, '').replace(/\\}\\s*$/, '');\n\nconst styles = css`\n :host {\n display: inline-flex;\n position: relative;\n }\n\n :host([hidden]) {\n display: none !important;\n }\n\n ${coreStyles}\n\n .tooltip-wrapper {\n display: inline-flex;\n position: relative;\n }\n\n .tooltip-content {\n position: absolute;\n z-index: 1000;\n padding: 0.5rem 0.75rem;\n background-color: var(--color-inverse-surface, #1f1f1f);\n color: var(--color-inverse-on-surface, #fff);\n font-size: 0.75rem;\n line-height: 1rem;\n border-radius: 0.375rem;\n white-space: nowrap;\n opacity: 0;\n visibility: hidden;\n transition:\n opacity 150ms ease,\n visibility 150ms ease;\n pointer-events: none;\n font-family: inherit;\n }\n\n .tooltip-content.visible {\n opacity: 1;\n visibility: visible;\n }\n\n .tooltip-top {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-bottom: 0.5rem;\n }\n\n .tooltip-bottom {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n margin-top: 0.5rem;\n }\n\n .tooltip-left {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-right: 0.5rem;\n }\n\n .tooltip-right {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n margin-left: 0.5rem;\n }\n\n .tooltip-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border: 0.375rem solid transparent;\n }\n\n .tooltip-top .tooltip-arrow {\n top: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-top-color: var(--color-inverse-surface, #1f1f1f);\n border-bottom: 0;\n }\n\n .tooltip-bottom .tooltip-arrow {\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border-bottom-color: var(--color-inverse-surface, #1f1f1f);\n border-top: 0;\n }\n\n .tooltip-left .tooltip-arrow {\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-left-color: var(--color-inverse-surface, #1f1f1f);\n border-right: 0;\n }\n\n .tooltip-right .tooltip-arrow {\n right: 100%;\n top: 50%;\n transform: translateY(-50%);\n border-right-color: var(--color-inverse-surface, #1f1f1f);\n border-left: 0;\n }\n\n /* Color variants */\n .tooltip-primary { background-color: var(--color-primary); color: var(--color-on-primary); }\n .tooltip-primary .tooltip-arrow { border-color: var(--color-primary); }\n .tooltip-secondary { background-color: var(--color-secondary); color: var(--color-on-secondary); }\n .tooltip-secondary .tooltip-arrow { border-color: var(--color-secondary); }\n .tooltip-accent { background-color: var(--color-tertiary); color: var(--color-on-tertiary); }\n .tooltip-accent .tooltip-arrow { border-color: var(--color-tertiary); }\n .tooltip-info { background-color: var(--color-info); color: #fff; }\n .tooltip-info .tooltip-arrow { border-color: var(--color-info); }\n .tooltip-success { background-color: var(--color-success); color: #fff; }\n .tooltip-success .tooltip-arrow { border-color: var(--color-success); }\n .tooltip-warning { background-color: var(--color-warning); color: #000; }\n .tooltip-warning .tooltip-arrow { border-color: var(--color-warning); }\n .tooltip-error { background-color: var(--color-error); color: #fff; }\n .tooltip-error .tooltip-arrow { border-color: var(--color-error); }\n\n /* Arrow color inheritance for colored variants — reset transparent borders */\n .tooltip-primary .tooltip-arrow,\n .tooltip-secondary .tooltip-arrow,\n .tooltip-accent .tooltip-arrow,\n .tooltip-info .tooltip-arrow,\n .tooltip-success .tooltip-arrow,\n .tooltip-warning .tooltip-arrow,\n .tooltip-error .tooltip-arrow {\n border-color: transparent;\n }\n .tooltip-primary.tooltip-top .tooltip-arrow { border-top-color: var(--color-primary); }\n .tooltip-primary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-primary); }\n .tooltip-primary.tooltip-left .tooltip-arrow { border-left-color: var(--color-primary); }\n .tooltip-primary.tooltip-right .tooltip-arrow { border-right-color: var(--color-primary); }\n .tooltip-secondary.tooltip-top .tooltip-arrow { border-top-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-left .tooltip-arrow { border-left-color: var(--color-secondary); }\n .tooltip-secondary.tooltip-right .tooltip-arrow { border-right-color: var(--color-secondary); }\n .tooltip-accent.tooltip-top .tooltip-arrow { border-top-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-left .tooltip-arrow { border-left-color: var(--color-tertiary); }\n .tooltip-accent.tooltip-right .tooltip-arrow { border-right-color: var(--color-tertiary); }\n .tooltip-info.tooltip-top .tooltip-arrow { border-top-color: var(--color-info); }\n .tooltip-info.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-info); }\n .tooltip-info.tooltip-left .tooltip-arrow { border-left-color: var(--color-info); }\n .tooltip-info.tooltip-right .tooltip-arrow { border-right-color: var(--color-info); }\n .tooltip-success.tooltip-top .tooltip-arrow { border-top-color: var(--color-success); }\n .tooltip-success.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-success); }\n .tooltip-success.tooltip-left .tooltip-arrow { border-left-color: var(--color-success); }\n .tooltip-success.tooltip-right .tooltip-arrow { border-right-color: var(--color-success); }\n .tooltip-warning.tooltip-top .tooltip-arrow { border-top-color: var(--color-warning); }\n .tooltip-warning.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-warning); }\n .tooltip-warning.tooltip-left .tooltip-arrow { border-left-color: var(--color-warning); }\n .tooltip-warning.tooltip-right .tooltip-arrow { border-right-color: var(--color-warning); }\n .tooltip-error.tooltip-top .tooltip-arrow { border-top-color: var(--color-error); }\n .tooltip-error.tooltip-bottom .tooltip-arrow { border-bottom-color: var(--color-error); }\n .tooltip-error.tooltip-left .tooltip-arrow { border-left-color: var(--color-error); }\n .tooltip-error.tooltip-right .tooltip-arrow { border-right-color: var(--color-error); }\n`;\n\nexport class ElDmTooltip extends BaseElement {\n static properties = {\n content: { type: String, reflect: true },\n position: { type: String, reflect: true, default: 'top' },\n trigger: { type: String, reflect: true, default: 'hover' },\n delay: { type: Number, reflect: true, default: 0 },\n arrow: { type: Boolean, reflect: true, default: true },\n disabled: { type: Boolean, reflect: true },\n color: { type: String, reflect: true },\n open: { type: Boolean, reflect: true },\n };\n\n declare content: string;\n declare position: TooltipPosition;\n declare trigger: TooltipTrigger;\n declare delay: number;\n declare arrow: boolean;\n declare disabled: boolean;\n declare color: TooltipColor;\n declare open: boolean;\n\n private _showTimeout: number | null = null;\n private _isVisible = false;\n\n constructor() {\n super();\n this.attachStyles([styles, animationStyles]);\n }\n\n private _show(): void {\n if (this.disabled || !this.content) return;\n\n if (this.delay > 0) {\n this._showTimeout = window.setTimeout(() => {\n this._setVisible(true);\n }, this.delay);\n } else {\n this._setVisible(true);\n }\n }\n\n private _hide(): void {\n if (this._showTimeout) {\n clearTimeout(this._showTimeout);\n this._showTimeout = null;\n }\n this._setVisible(false);\n }\n\n private _setVisible(visible: boolean): void {\n this._isVisible = visible;\n const tooltipContent = this.shadowRoot?.querySelector('.tooltip-content');\n if (tooltipContent) {\n tooltipContent.classList.toggle('visible', visible);\n }\n }\n\n private _toggle(): void {\n if (this._isVisible) {\n this._hide();\n } else {\n this._show();\n }\n }\n\n private _getTooltipClasses(): string {\n const classes = ['tooltip-content'];\n\n if (this.position && POSITION_CLASSES[this.position]) {\n classes.push(POSITION_CLASSES[this.position]);\n } else {\n classes.push('tooltip-top');\n }\n\n if (this.color && COLOR_CLASSES[this.color]) {\n classes.push(COLOR_CLASSES[this.color]);\n }\n\n return classes.join(' ');\n }\n\n connectedCallback(): void {\n super.connectedCallback();\n this._setupListeners();\n // Sync initial open state\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n update(): void {\n super.update();\n // Sync open prop with visibility\n if (this.open) {\n this._setVisible(true);\n }\n }\n\n disconnectedCallback(): void {\n super.disconnectedCallback?.();\n this._removeListeners();\n }\n\n private _setupListeners(): void {\n if (this.trigger === 'hover') {\n this.addEventListener('mouseenter', this._show.bind(this));\n this.addEventListener('mouseleave', this._hide.bind(this));\n } else if (this.trigger === 'click') {\n this.addEventListener('click', this._toggle.bind(this));\n }\n\n if (this.trigger === 'focus' || this.trigger === 'hover') {\n this.addEventListener('focusin', this._show.bind(this));\n this.addEventListener('focusout', this._hide.bind(this));\n }\n }\n\n private _removeListeners(): void {\n this.removeEventListener('mouseenter', this._show.bind(this));\n this.removeEventListener('mouseleave', this._hide.bind(this));\n this.removeEventListener('click', this._toggle.bind(this));\n this.removeEventListener('focusin', this._show.bind(this));\n this.removeEventListener('focusout', this._hide.bind(this));\n }\n\n render(): string {\n const tooltipClasses = this._getTooltipClasses();\n\n return `\n <div class=\"tooltip-wrapper\" part=\"tooltip\">\n <slot></slot>\n <div class=\"${tooltipClasses}\" role=\"tooltip\" part=\"content\">\n ${this.content || ''}\n ${this.arrow ? '<span class=\"tooltip-arrow\" part=\"arrow\"></span>' : ''}\n </div>\n </div>\n `;\n }\n}\n",
6
6
  "/**\n * @duskmoon-dev/el-tooltip\n *\n * DuskMoon Tooltip custom element\n */\n\nimport { ElDmTooltip } from './el-dm-tooltip.js';\n\nexport { ElDmTooltip };\nexport type { TooltipPosition, TooltipTrigger } from './el-dm-tooltip.js';\n\n/**\n * Register the el-dm-tooltip custom element\n *\n * @example\n * ```ts\n * import { register } from '@duskmoon-dev/el-tooltip';\n * register();\n * ```\n */\nexport function register(): void {\n if (!customElements.get('el-dm-tooltip')) {\n customElements.define('el-dm-tooltip', ElDmTooltip);\n }\n}\n",
7
7
  "import { register } from './index.js';\nregister();\n"
8
8
  ],
9
- "mappings": "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",
10
- "debugId": "4BCED25038517C7564756E2164756E21",
9
+ "mappings": "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",
10
+ "debugId": "CE06CD86C1A1E28464756E2164756E21",
11
11
  "names": []
12
12
  }