kritzel-stencil 0.1.21 → 0.1.23

package/dist/cjs/stencil.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["kritzel-back-to-content_32.cjs",[[512,"kritzel-editor",{"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"lockDrawingScale":[1028,"lock-drawing-scale"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"isBackToContentButtonVisible":[32],"currentTheme":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}],"currentTheme":[{"onCurrentThemeChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"theme":[1],"firstConfig":[32],"isTooltipVisible":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"openSubMenuControl":[32],"canScrollLeft":[32],"canScrollRight":[32],"needsScrolling":[32],"displayValues":[32],"closeTooltip":[64]},[[4,"click","handleDocumentClick"],[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{"theme":[{"onThemeChange":0}]}],[513,"kritzel-settings",{"isDialogOpen":[32],"selectedCategoryId":[32],"scaleMin":[32],"scaleMax":[32],"lockDrawingScale":[32],"currentTheme":[32],"open":[64]}],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-more-menu",{"items":[16],"icon":[1],"iconSize":[2,"icon-size"],"offsetY":[2,"offset-y"],"menuAnchor":[32]}],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"lockDrawingScale":[4,"lock-drawing-scale"],"theme":[1],"forceUpdate":[32],"triggerSelectionChange":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"getCopiedObjects":[64],"getScreenshot":[64],"exportViewportAsPng":[64],"exportViewportAsSvg":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[1,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[1,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}],"lockDrawingScale":[{"onLockDrawingScaleChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-export",{"isDialogOpen":[32],"previewUrl":[32],"isLoading":[32],"open":[64]}],[513,"kritzel-back-to-content",{"visible":[4],"text":[1]}],[513,"kritzel-tool-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"theme":[1],"config":[32],"palette":[32],"currentOpacity":[32],"updateTrigger":[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{"tool":[{"handleToolChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[769,"kritzel-master-detail",{"items":[16],"selectedItemId":[1,"selected-item-id"],"focusedIndex":[32],"showMobileDetail":[32]},null,{"selectedItemId":[{"watchSelectedItemId":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-numeric-input",{"value":[1026],"min":[2],"max":[2],"step":[2],"label":[1],"inputValue":[32]},null,{"value":[{"onValueChange":0}]}],[513,"kritzel-slide-toggle",{"checked":[1028],"disabled":[4],"label":[1]}],[769,"kritzel-tooltip",{"isVisible":[4,"is-visible"],"anchorElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"focusContent":[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[9,"resize","handleWindowResize"]]],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1040],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"],"opacity":[2],"theme":[1]}],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-dialog",{"isOpen":[516,"is-open"],"dialogTitle":[1,"dialog-title"],"closable":[4],"closeOnBackdrop":[4,"close-on-backdrop"],"closeOnEscape":[4,"close-on-escape"],"autoFocus":[4,"auto-focus"],"trapFocus":[4,"trap-focus"],"size":[1],"fullscreenOnMobile":[4,"fullscreen-on-mobile"],"isAnimating":[32],"open":[64],"close":[64],"focusFirstElement":[64]},[[8,"keydown","handleKeyDown"]],{"isOpen":[{"handleIsOpenChange":0}]}],[513,"kritzel-line-endings",{"styles":[16],"value":[1040]}],[513,"kritzel-opacity-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"previewColor":[1,"preview-color"]}],[513,"kritzel-shape-fill",{"value":[1025]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-color",{"value":[1],"theme":[1],"size":[2]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
+  return index.bootstrapLazy([["kritzel-back-to-content_32.cjs",[[512,"kritzel-editor",{"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"lockDrawingScale":[1028,"lock-drawing-scale"],"controls":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"customSvgIcons":[16],"isControlsVisible":[4,"is-controls-visible"],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"syncConfig":[16],"isEngineReady":[32],"isControlsReady":[32],"isWorkspaceManagerReady":[32],"workspaces":[32],"activeWorkspace":[32],"isVirtualKeyboardOpen":[32],"undoState":[32],"isBackToContentButtonVisible":[32],"currentTheme":[32],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[0,"dblclick","onTouchStart"]],{"isEngineReady":[{"onIsEngineReady":0}],"isControlsReady":[{"onIsControlsReady":0}],"workspaces":[{"onWorkspacesChange":0}],"currentTheme":[{"onCurrentThemeChange":0}]}],[513,"kritzel-controls",{"controls":[16],"activeControl":[1040],"isUtilityPanelVisible":[4,"is-utility-panel-visible"],"undoState":[16],"theme":[1],"firstConfig":[32],"isTouchDevice":[32],"selectedSubOptions":[32],"canScrollLeft":[32],"canScrollRight":[32],"needsScrolling":[32],"displayValues":[32],"closeTooltip":[64]},[[8,"keydown","handleKeyDown"],[4,"activeToolChange","handleActiveToolChange"],[4,"objectsSelectionChange","handleSelectionChange"]],{"theme":[{"onThemeChange":0}]}],[513,"kritzel-settings",{"isDialogOpen":[32],"selectedCategoryId":[32],"scaleMin":[32],"scaleMax":[32],"lockDrawingScale":[32],"currentTheme":[32],"open":[64]}],[513,"kritzel-workspace-manager",{"activeWorkspace":[1040],"workspaces":[16],"childMenuAnchor":[32],"openChildMenuItem":[32],"newWorkspace":[32],"editingItemId":[32]},[[8,"wheel","handleWheel"]]],[513,"kritzel-more-menu",{"items":[16],"icon":[1],"iconSize":[2,"icon-size"],"offsetY":[2,"offset-y"],"menuAnchor":[32]}],[513,"kritzel-engine",{"workspace":[16],"syncConfig":[16],"activeTool":[16],"globalContextMenuItems":[16],"objectContextMenuItems":[16],"scaleMax":[1026,"scale-max"],"scaleMin":[1026,"scale-min"],"cursorTarget":[16],"lockDrawingScale":[4,"lock-drawing-scale"],"theme":[1],"forceUpdate":[32],"triggerSelectionChange":[64],"registerTool":[64],"changeActiveTool":[64],"disable":[64],"enable":[64],"delete":[64],"copy":[64],"paste":[64],"bringForward":[64],"sendBackward":[64],"bringToFront":[64],"sendToBack":[64],"group":[64],"ungroup":[64],"undo":[64],"redo":[64],"hideContextMenu":[64],"getObjectById":[64],"addObject":[64],"updateObject":[64],"removeObject":[64],"getSelectedObjects":[64],"selectObjects":[64],"selectAllObjectsInViewport":[64],"clearSelection":[64],"centerObjectInViewport":[64],"backToContent":[64],"getCopiedObjects":[64],"getScreenshot":[64],"exportViewportAsPng":[64],"exportViewportAsSvg":[64],"createWorkspace":[64],"updateWorkspace":[64],"deleteWorkspace":[64],"getWorkspaces":[64],"getActiveWorkspace":[64]},[[1,"wheel","handleWheel"],[0,"pointerdown","handlePointerDown"],[0,"pointermove","handlePointerMove"],[0,"pointerup","handlePointerUp"],[0,"pointercancel","handlePointerCancel"],[1,"longpress","handleLongPress"],[0,"contextmenu","handleContextMenu"],[9,"resize","handleResize"],[8,"keydown","handleKeyDown"],[8,"keyup","handleKeyUp"],[4,"dblclick","preventDoubleTapZoomOnTouchDevices"]],{"workspace":[{"onWorkspaceChange":0}],"scaleMax":[{"validateScaleMax":0}],"scaleMin":[{"validateScaleMin":0}],"cursorTarget":[{"onCursorTargetChange":0}],"lockDrawingScale":[{"onLockDrawingScaleChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-export",{"isDialogOpen":[32],"previewUrl":[32],"isLoading":[32],"open":[64]}],[513,"kritzel-back-to-content",{"visible":[4],"text":[1]}],[513,"kritzel-tool-config",{"tool":[1040],"isExpanded":[1028,"is-expanded"],"theme":[1],"config":[32],"palette":[32],"currentOpacity":[32],"updateTrigger":[32]},[[4,"objectsSelectionChange","handleSelectionChange"]],{"tool":[{"handleToolChange":0}],"theme":[{"onThemeChange":0}]}],[513,"kritzel-split-button",{"buttonIcon":[1,"button-icon"],"dropdownIcon":[1,"dropdown-icon"],"items":[16],"mainButtonDisabled":[4,"main-button-disabled"],"menuButtonDisabled":[4,"menu-button-disabled"],"isMenuOpen":[32],"isTouchDevice":[32],"anchorElement":[32],"menuScrollTop":[32],"open":[64],"focusMenu":[64]}],[513,"kritzel-context-menu",{"items":[16],"objects":[16],"processedItems":[32]},[[9,"pointerdown","handleOutsideClick"]],{"items":[{"onItemsChanged":0}]}],[769,"kritzel-master-detail",{"items":[16],"selectedItemId":[1,"selected-item-id"],"focusedIndex":[32],"showMobileDetail":[32]},null,{"selectedItemId":[{"watchSelectedItemId":0}]}],[513,"kritzel-utility-panel",{"undoState":[16]}],[513,"kritzel-cursor-trail",{"core":[16],"cursorTrailPoints":[32],"isLeftButtonDown":[32]},[[9,"pointerdown","handleMouseDown"],[9,"pointermove","handlePointerMove"],[9,"pointerup","handlePointerUp"]]],[513,"kritzel-numeric-input",{"value":[1026],"min":[2],"max":[2],"step":[2],"label":[1],"inputValue":[32]},null,{"value":[{"onValueChange":0}]}],[513,"kritzel-slide-toggle",{"checked":[1028],"disabled":[4],"label":[1]}],[769,"kritzel-tooltip",{"isVisible":[1028,"is-visible"],"anchorElement":[16],"triggerElement":[16],"offsetY":[2,"offset-y"],"positionX":[32],"positionY":[32],"open":[64],"close":[64],"toggle":[64],"focusContent":[64]},[[4,"click","handleOutsideClick"],[7,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{"triggerElement":[{"handleTriggerElementChange":0}],"isVisible":[{"handleVisibilityChange":0}]}],[513,"kritzel-color-palette",{"colors":[16],"selectedColor":[1040],"isExpanded":[4,"is-expanded"],"isOpaque":[4,"is-opaque"],"opacity":[2],"theme":[1]}],[513,"kritzel-font-family",{"fontOptions":[16],"selectedFontFamily":[1025,"selected-font-family"]}],[513,"kritzel-font-size",{"sizes":[16],"selectedSize":[1026,"selected-size"],"fontFamily":[1,"font-family"]}],[513,"kritzel-stroke-size",{"sizes":[16],"selectedSize":[1026,"selected-size"]}],[769,"kritzel-dialog",{"isOpen":[516,"is-open"],"dialogTitle":[1,"dialog-title"],"closable":[4],"closeOnBackdrop":[4,"close-on-backdrop"],"closeOnEscape":[4,"close-on-escape"],"autoFocus":[4,"auto-focus"],"trapFocus":[4,"trap-focus"],"size":[1],"fullscreenOnMobile":[4,"fullscreen-on-mobile"],"isAnimating":[32],"open":[64],"close":[64],"focusFirstElement":[64]},[[8,"keydown","handleKeyDown"]],{"isOpen":[{"handleIsOpenChange":0}]}],[513,"kritzel-line-endings",{"styles":[16],"value":[1040]}],[513,"kritzel-opacity-slider",{"value":[1026],"min":[2],"max":[2],"step":[2],"previewColor":[1,"preview-color"]}],[513,"kritzel-shape-fill",{"value":[1025]}],[513,"kritzel-font",{"fontFamily":[1,"font-family"],"size":[2],"color":[1]}],[513,"kritzel-color",{"value":[1],"theme":[1],"size":[2]}],[769,"kritzel-dropdown",{"options":[16],"value":[1],"width":[1],"selectStyles":[16],"internalValue":[32],"hasSuffixContent":[32],"hasPrefixContent":[32],"isOpen":[32],"focusedIndex":[32],"openDirection":[32]},[[4,"click","handleDocumentClick"],[4,"keydown","handleDocumentKeydown"]],{"options":[{"optionsChanged":0}],"value":[{"externalValueChanged":0}]}],[513,"kritzel-menu",{"items":[16],"parent":[16],"selectedIndex":[32],"setScrollTop":[64],"setFocus":[64]}],[513,"kritzel-menu-item",{"item":[16],"parent":[16],"isDirty":[32]},null,{"item":[{"onItemChange":0}]}],[769,"kritzel-portal",{"anchor":[16],"offsetX":[2,"offset-x"],"offsetY":[2,"offset-y"],"autoFocus":[4,"auto-focus"]},[[8,"click","handleOutsideClick"],[8,"keydown","handleKeyDown"],[11,"resize","handleResize"],[11,"scroll","handleWindowScroll"]],{"anchor":[{"anchorChanged":0}]}],[513,"kritzel-icon",{"name":[1],"label":[1],"size":[2]}]]],["kritzel-brush-style.cjs",[[513,"kritzel-brush-style",{"type":[1],"brushOptions":[16]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/classes/objects/shape.class.js

@@ -234,19 +234,25 @@ export class KritzelShape extends KritzelBaseObject {
         if (!this.isEditing) {
             return;
         }
-        event.stopPropagation();
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
     }
     handlePointerMove(event) {
         if (!this.isEditing) {
             return;
         }
-        event.stopPropagation();
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
     }
     handlePointerUp(event) {
         if (!this.isEditing) {
             return;
         }
-        event.stopPropagation();
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
     }
     copy() {
         const copiedObject = super.copy();

package/dist/collection/classes/objects/text.class.js

@@ -169,7 +169,7 @@ export class KritzelText extends KritzelBaseObject {
     focus(coords) {
         if (this.editor) {
             const doc = this.editor.state.doc;
-            if (coords.x && coords.y) {
+            if (coords.x && coords.y && !this.isEmpty) {
                 const pos = this.editor.posAtCoords({ left: coords.x, top: coords.y });
                 if (pos) {
                     this.editor.dispatch(this.editor.state.tr.setSelection(TextSelection.create(doc, pos.pos)));
@@ -230,13 +230,29 @@ export class KritzelText extends KritzelBaseObject {
         if (!this.isEditing) {
             return;
         }
-        event.stopPropagation();
+        // Only stop propagation if the engine is not tracking this pointer.
+        // During text creation, the engine adds the pointer before the text element
+        // is in the DOM. We must let move events propagate so the engine can
+        // update its pointer state.
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
     }
     handlePointerUp(event) {
         if (!this.isEditing) {
             return;
         }
-        event.stopPropagation();
+        // Only stop propagation if the engine is not tracking this pointer.
+        // When a text is created during pointerdown, the engine adds the pointer
+        // to its map before the text element exists in the DOM. By the time
+        // pointerup fires, the text element may intercept the event (especially
+        // on iOS where pointer capture may not redirect events in shadow DOM).
+        // We must let the event propagate so the engine can clean up the pointer.
+        // Without this, stale pointers accumulate and single-finger touches
+        // get misinterpreted as two-finger zoom gestures.
+        if (!this._core.store.state.pointers.has(event.pointerId)) {
+            event.stopPropagation();
+        }
     }
     copy() {
         const copiedObject = super.copy();

package/dist/collection/classes/tools/text-tool.class.js

@@ -91,9 +91,9 @@ export class KritzelTextTool extends KritzelBaseTool {
         }
     }
     handlePointerUp(event) {
-        if (event.cancelable) {
-            event.preventDefault();
+        const activeText = this._core.store.activeText;
+        if (activeText && activeText.isMounted && !activeText.editor?.hasFocus()) {
+            activeText.focus({ x: event.clientX, y: event.clientY });
         }
-        this._core.store.activeText?.edit(event);
     }
 }

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -126,7 +126,9 @@ export class KritzelEngine {
             return;
         }
         this.core.store.state.pointers.delete(ev.pointerId);
-        this.host.releasePointerCapture(ev.pointerId);
+        if (this.host.hasPointerCapture(ev.pointerId)) {
+            this.host.releasePointerCapture(ev.pointerId);
+        }
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
             this.core.cursorManager.resetToDefault();
@@ -138,7 +140,9 @@ export class KritzelEngine {
         if (this.core.store.isDisabled) {
             return;
         }
-        this.host.releasePointerCapture(ev.pointerId);
+        if (this.host.hasPointerCapture(ev.pointerId)) {
+            this.host.releasePointerCapture(ev.pointerId);
+        }
         this.core.store.state.pointers.delete(ev.pointerId);
         // Reset cursor to default when all pointers are released
         if (this.core.store.state.pointers.size === 0) {
@@ -507,7 +511,7 @@ export class KritzelEngine {
         if (this.core.store.totalObjectCount > 0) {
             this.objectsInViewportChange.emit(visibleObjects);
         }
-        return (h(Host, { key: '26d2ef50f28fb809d046b60dff6e977dec53fc8c' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: 'bbacc63967672c6934d1c90913139f1f96e532cb', class: "debug-panel" }, h("div", { key: '59d46ef1a1a8dffe7b1bd97b0df3c77fdd095d97' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: 'd6bc9b3c6076540ccfec4fd2ef3b3e2edf08d524' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '12e229d893933a01bbfdd038e1bd14eee198b34e' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '9caf69c342d545a478bb4945aa7b2c37ea77561f' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '123f6b17777475f4de32872b940abd3b7ffe6d78' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '463c70e208dad8572317bbde0df0f4b149674a7d' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: '82deb6d97ae66c86431b32582114f81bcd83e5ae' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: 'be32ffe65da2fc92f556ac037afa5b50c27cedd2' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '53029e75a8972f670ef0fa427549415fd8be7986' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '27517882d278f0df7df59858a9219d356e5bbd8d' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: '616611f9ad570741c9be3eabd0c78dc978c16c4f' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: '318a17d0b0d7eb2a58233c76063cc72e87782f1b' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '45c92f5cc524338b5c0cab5f5123faf0296e7484' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: '4b295ddaf8eb9e49547430c839a9ba50daacd42e' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: 'eef9039260d0f1ffa23102aee0f18ebd90111738' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1a22a4a93ddab249532fe40640f1fa7bbb485d76' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '094daef63fffab66051e1c65392baac58d8f3eca' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'dae17ba3dec0ededdfb873eda4081fb51cea0c52' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: '11b4c3fb7fef201e6a98a58f586e1c717f255af4' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: 'ac7b98f441747b90f047069b9e7eac2ac5194eec' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'eb2285428d88835319c68ff26cb99e1e631cba82' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'd32cb23e569a84b16a50b98d2e3d778c6462c88c' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '0b4fafde05bb83d4046b103015a4f008c5b268d8' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '0083eb1e81cd1d0552e0fa2d6cca147e14e0bd86' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '232f452fd89d22db9e4aaf8e6d3b672f934422a5' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: '66a0d3a6ac62153acf6ed1b7c57b3ae77daa3c5e', id: "origin", class: "origin", style: {
+        return (h(Host, { key: '6cc974d4e3fdcfe1b185a014fa9eb6b1243dde91' }, this.core.store.state.debugInfo.showViewportInfo && (h("div", { key: '8f8ac08f2d643b664e2b39fbaf50e0c474c5255d', class: "debug-panel" }, h("div", { key: '79ad4f3db958d8b17b2efdb3a1a6ab24d81bb436' }, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", { key: '0cdaa6abeebc865eec1c3026d5fd38e00bd388a7' }, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", { key: '125ca4bb69ca2fcc647bd55e9cb8c4072fbaa600' }, "TranslateX: ", this.core.store.state?.translateX), h("div", { key: '02aee9b8359b9cdefa2f54afc26d328dab984ea3' }, "TranslateY: ", this.core.store.state?.translateY), h("div", { key: '8398e28a5c70318dace386182633088e5e3267d5' }, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", { key: '0e17a7fbf96acbe1cbf2769b0fa853eaf7fb6f3b' }, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", { key: 'd214e66618d2c38ca94154e7b06f681d815ffadc' }, "PointerCount: ", this.core.store.state.pointers.size), h("div", { key: '35695f7f82605bf6ba0fd512f814a7da723f623c' }, "Scale: ", this.core.store.state?.scale), h("div", { key: '6935c9e5cedb8f7bd6d81a5d02b383fbb0e4d3a2' }, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", { key: '6a7490a07ca3019157d6a4b10b9164d3a504c4c0' }, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", { key: 'ba70d5d01cad9e0fb6e80a4955e3361723af3531' }, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", { key: 'be3a408762c8bada64224c4da92baf987ae62f6d' }, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", { key: '9cf44848dbcb7e8b1a40618db1ee6cf019e01720' }, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", { key: 'b53633b5c099b338089294c897cfbc32973d360d' }, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", { key: '0cab012a88532c69ba0aeb1daa7646e91c4f029d' }, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", { key: '1c47bfd56352b70a8eafb771470d9912240e9885' }, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", { key: '1147a866a58f3d50c8751fc02f6614e899b13bc0' }, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", { key: 'a308df3601fd5ba49741f2efbc3d262059daed2d' }, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", { key: 'af5ceafa9bb39c2e2085815c691198f7a0b48017' }, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", { key: '8abffd4f1e3e7b174ee5e5e9070fc0ca0703d1aa' }, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", { key: 'e127318f52e25d65b323d3325b02a0125864c3be' }, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", { key: 'b8f21b1a1bd674f7403e3096e7cb52e629b2df89' }, "PointerX: ", this.core.store.state?.pointerX), h("div", { key: '892abdc68df061495f88ceea2037766b537f82ab' }, "PointerY: ", this.core.store.state?.pointerY), h("div", { key: '04f08e11cb67cedf31900d01803960caaa0a5a0b' }, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", { key: '6a6efb9f05cb70eaff83cea1a22e1151a08e2ec9' }, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { key: 'c9e2392f43cf54b57f0fb49a361d47a2c4156ca3', id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
             return (h("div", { key: object.id, id: object.id, class: "object", style: {
@@ -516,7 +520,7 @@ export class KritzelEngine {
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -526,7 +530,8 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.resolveThemeColor(object.fill, currentTheme), stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
                     height: object?.totalHeight + 'px',
                     width: object?.totalWidth + 'px',
                     left: '0',
@@ -536,7 +541,8 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("svg", { ref: el => object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: { overflow: 'visible' }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", { style: {
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: object.getArrowFill('start'), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: object.getArrowFill('end'), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.resolveThemeColor(object?.stroke, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("img", { ref: el => object.mount(el), src: object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -552,13 +558,9 @@ export class KritzelEngine {
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
                     overflow: 'visible',
-                } }, h("img", { ref: el => object.mount(el), src: object.src, style: {
-                    width: '100%',
-                    height: '100%',
                     userSelect: 'none',
-                    pointerEvents: 'none',
                     imageRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'pixelated' : 'auto',
-                }, draggable: false, onDragStart: e => e.preventDefault() }))), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { style: {
+                }, draggable: false, onDragStart: e => e.preventDefault() })), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -573,14 +575,9 @@ export class KritzelEngine {
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
                     padding: object.padding + 'px',
-                    overflow: 'visible',
-                } }, h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                    pointerEvents: 'auto',
                     overflow: 'hidden',
                     display: 'block',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') && !this.core.displaySelectionLineUI(object) && (h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -590,10 +587,7 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox') && (h("div", { ref: el => object.mount(el), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -607,10 +601,7 @@ export class KritzelEngine {
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
                     borderWidth: object.borderWidth + 'px',
                     borderStyle: 'solid',
-                } }, h("div", { ref: el => object.mount(el), style: {
-                    width: '100%',
-                    height: '100%',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
+                } })), KritzelClassHelper.isInstanceOf(object, 'KritzelText') && (h("div", { style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -630,8 +621,7 @@ export class KritzelEngine {
                     transform: `scale(${object.scaleFactor})`,
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
-                    textRendering: this.core.store.state.isScaling || this.core.store.state.isPanning ? 'optimizeSpeed' : 'auto',
-                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { style: {
+                } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -641,10 +631,6 @@ export class KritzelEngine {
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
                     opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                } }, h("div", { ref: el => object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
-                    width: '100%',
-                    height: '100%',
-                    position: 'relative',
                     overflow: 'visible',
                 } }, h("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
                     position: 'absolute',
@@ -666,7 +652,7 @@ export class KritzelEngine {
                     textAlign: 'center',
                     overflow: 'hidden',
                     pointerEvents: object.isEditing ? 'auto' : 'none',
-                } })))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
+                } }))), this.core.store.state.debugInfo.showObjectInfo && object.isDebugInfoVisible && (h("div", { style: {
                     pointerEvents: 'none',
                     position: 'absolute',
                     left: `${object.totalWidth}px`,
@@ -853,7 +839,7 @@ export class KritzelEngine {
                     stroke: 'var(--kritzel-snap-indicator-stroke, #007bff)',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
-        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: 'b9171dfffeb4a88bc4ad9a7b0196a18f5427183f', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
+        })()), this.core.store.state.isContextMenuVisible && (h("kritzel-context-menu", { key: '307012661cd1021e7e3c3db48f1671700f5de91b', class: "context-menu", ref: el => (this.contextMenuElement = el), items: this.core.store.state.contextMenuItems, objects: this.core.store.selectionGroup?.objects || [], style: {
                 position: 'fixed',
                 left: `${this.core.store.state.contextMenuX}px`,
                 top: `${this.core.store.state.contextMenuY}px`,
@@ -864,7 +850,7 @@ export class KritzelEngine {
                     y: (-this.core.store.state.translateY + this.core.store.state.contextMenuY) / this.core.store.state.scale,
                 }, this.core.store.selectionGroup?.objects);
                 this.hideContextMenu();
-            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'd3ce01397575891a78449128020a212345332d06', core: this.core })));
+            }, onClose: () => this.hideContextMenu() })), this.core.store.state?.activeTool instanceof KritzelEraserTool && !this.core.store.state.isScaling && h("kritzel-cursor-trail", { key: 'bd48d2a8e7c83e2c5d80c92548b00720650391ab', core: this.core })));
     }
     static get is() { return "kritzel-engine"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-tooltip/kritzel-tooltip.js

@@ -4,18 +4,20 @@ export class KritzelTooltip {
     host;
     isVisible = false;
     anchorElement;
+    triggerElement;
     offsetY = 24;
     tooltipClosed;
+    tooltipOpened;
     positionX = 0;
     positionY = 0;
     handleOutsideClick(event) {
         if (!this.isVisible)
             return;
-        // Check if click is inside the tooltip host or any of its shadow DOM content
         const path = event.composedPath();
         const isInsideTooltip = path.some(el => el === this.host);
-        if (!isInsideTooltip) {
-            this.tooltipClosed.emit();
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            this.close();
         }
     }
     handleOutsidePointerDown(event) {
@@ -23,23 +25,73 @@ export class KritzelTooltip {
             return;
         const path = event.composedPath();
         const isInsideTooltip = path.some(el => el === this.host);
-        if (!isInsideTooltip) {
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
             event.stopPropagation();
             event.preventDefault();
-            this.tooltipClosed.emit();
+            this.close();
+        }
+    }
+    handleCloseAll(event) {
+        if (event.detail !== this.host) {
+            this.close();
         }
     }
     handleWindowResize() {
         this.calculateAdjustedPosition();
     }
+    handleTriggerElementChange(newTrigger, oldTrigger) {
+        if (oldTrigger) {
+            oldTrigger.removeEventListener('click', this.handleTriggerClick);
+        }
+        if (newTrigger) {
+            newTrigger.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    handleVisibilityChange(newValue) {
+        if (newValue) {
+            this.calculateAdjustedPosition();
+            requestAnimationFrame(() => {
+                this.focusContent();
+            });
+        }
+    }
+    async open() {
+        if (this.isVisible)
+            return;
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll', { detail: this.host }));
+        this.isVisible = true;
+        this.tooltipOpened.emit();
+    }
+    async close() {
+        if (!this.isVisible)
+            return;
+        this.isVisible = false;
+        this.tooltipClosed.emit();
+    }
+    async toggle() {
+        if (this.isVisible) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
     async focusContent() {
         const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
         if (focusableElements.length > 0) {
             focusableElements[0].focus();
         }
     }
+    connectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
     componentDidLoad() {
-        this.focusSlottedContent();
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
     }
     componentWillLoad() {
         this.calculateAdjustedPosition();
@@ -47,14 +99,15 @@ export class KritzelTooltip {
     componentWillUpdate() {
         this.calculateAdjustedPosition();
     }
-    focusSlottedContent() {
-        const slot = this.host.shadowRoot?.querySelector('slot');
-        const assignedElements = slot?.assignedElements() || [];
-        if (assignedElements.length > 0) {
-            const firstElement = assignedElements[0];
-            firstElement.focus();
+    disconnectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('click', this.handleTriggerClick);
         }
     }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
     calculateAdjustedPosition() {
         if (this.isVisible && this.anchorElement) {
             const anchorRect = this.anchorElement.getBoundingClientRect();
@@ -75,14 +128,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'd23199ba12acd84fe7fb7a3e133a6605b175bcec', style: {
+        return (h(Host, { key: '4145c722bdd124506bf988e5c2d4886bb10c5516', style: {
                 position: 'fixed',
                 zIndex: '9999',
                 transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
                 visibility: this.isVisible ? 'visible' : 'hidden',
                 left: `${this.positionX}px`,
                 bottom: `${this.positionY}px`,
-            } }, h("div", { key: '030ca8a36358b78ba726f7406e76cea16a4e75e9', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '148ed867ee7962487d38f82e6d37b8599a7158af' }))));
+            } }, h("div", { key: '7b8b74d2a9027b23bd6ebb0cb1f628820320dfe2', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '52b93a5847696ddd740fce6d69ac48f20a215bd3' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -100,7 +153,7 @@ export class KritzelTooltip {
         return {
             "isVisible": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -140,6 +193,28 @@ export class KritzelTooltip {
                 "getter": false,
                 "setter": false
             },
+            "triggerElement": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
             "offsetY": {
                 "type": "number",
                 "mutable": false,
@@ -184,10 +259,76 @@ export class KritzelTooltip {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "tooltipOpened",
+                "name": "tooltipOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
         return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "focusContent": {
                 "complexType": {
                     "signature": "() => Promise<void>",
@@ -208,6 +349,15 @@ export class KritzelTooltip {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "triggerElement",
+                "methodName": "handleTriggerElementChange"
+            }, {
+                "propName": "isVisible",
+                "methodName": "handleVisibilityChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "click",
@@ -221,6 +371,12 @@ export class KritzelTooltip {
                 "target": "document",
                 "capture": true,
                 "passive": true
+            }, {
+                "name": "kritzelTooltipCloseAll",
+                "method": "handleCloseAll",
+                "target": "document",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "resize",
                 "method": "handleWindowResize",