@kritzel/editor 0.4.31

package/dist/components/p-CzUeIini.js

@@ -0,0 +1,381 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelToolConfigHelper, resolveTextToolAvailableFonts, KritzelFontRegistry, KritzelColorHelper } from '@kritzel/engine';
+import { d as defineCustomElement$b } from './p-DVv8ChhE.js';
+import { d as defineCustomElement$a } from './p-GbCxpbQ6.js';
+import { d as defineCustomElement$9 } from './p-R1D8Sr0l.js';
+import { d as defineCustomElement$8 } from './p-BDjRSoAc.js';
+import { d as defineCustomElement$7 } from './p-ClfOtiNp.js';
+import { d as defineCustomElement$6 } from './p-BfMlwIcG.js';
+import { d as defineCustomElement$5 } from './p-BGmTmdLe.js';
+import { d as defineCustomElement$4 } from './p-CoNexfpB.js';
+import { d as defineCustomElement$3 } from './p-h_uh_Njf.js';
+import { d as defineCustomElement$2 } from './p-BvG3JO85.js';
+import { d as defineCustomElement$1 } from './p-DXuf225S.js';
+
+const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
+
+const KritzelToolConfig = /*@__PURE__*/ proxyCustomElement(class KritzelToolConfig extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.toolChange = createEvent(this, "toolChange");
+        this.displayValuesChange = createEvent(this, "displayValuesChange");
+    }
+    tool;
+    handleToolChange(newTool, oldTool) {
+        const newConfig = KritzelToolConfigHelper.getToolConfig(newTool);
+        // Maintain settings when switching between shape tools
+        if (oldTool && newTool && newConfig?.type === 'shape') {
+            const oldConfig = KritzelToolConfigHelper.getToolConfig(oldTool);
+            if (oldConfig?.type === 'shape') {
+                // Copy properties that should persist
+                const propsToCopy = [
+                    newConfig.colorProperty, // strokeColor
+                    newConfig.sizeProperty, // strokeWidth
+                    newConfig.opacityProperty, // opacity
+                    'fillColor' // shape specific
+                ];
+                propsToCopy.forEach(prop => {
+                    if (prop && oldTool[prop] !== undefined) {
+                        newTool[prop] = oldTool[prop];
+                    }
+                });
+            }
+        }
+        this.config = newConfig;
+        if (this.config) {
+            this.updatePalette();
+            this.updateSizes();
+            this.currentOpacity = newTool[this.config.opacityProperty] ?? 1;
+            // Emit the values since they might have been updated from the old tool
+            this.emitDisplayValues();
+        }
+    }
+    isExpanded = false;
+    theme;
+    engine;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
+    onThemeChange() {
+        this.emitDisplayValues();
+    }
+    handleEngineChange(newEngine, oldEngine) {
+        if (oldEngine) {
+            oldEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+        if (newEngine) {
+            newEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    toolChange;
+    displayValuesChange;
+    config;
+    palette = [];
+    sizes = [];
+    currentOpacity = 1;
+    updateTrigger = 0;
+    getFontOptionsFromTool() {
+        const configuredFonts = resolveTextToolAvailableFonts(this.tool.availableFonts).map(font => {
+            const registeredFont = typeof font === 'string'
+                ? {
+                    family: font,
+                    label: font,
+                    cssFontFamily: font,
+                }
+                : {
+                    family: font.family,
+                    label: font.label ?? font.family,
+                    cssFontFamily: font.cssFontFamily ?? font.family,
+                };
+            return {
+                value: registeredFont.family,
+                label: registeredFont.label,
+                cssFontFamily: registeredFont.cssFontFamily,
+            };
+        });
+        const mergedFonts = [...configuredFonts];
+        const seenFonts = new Set(mergedFonts.map(font => font.value.trim().toLocaleLowerCase()));
+        for (const font of KritzelFontRegistry.list()) {
+            const normalizedValue = font.family.trim().toLocaleLowerCase();
+            if (seenFonts.has(normalizedValue)) {
+                continue;
+            }
+            seenFonts.add(normalizedValue);
+            mergedFonts.push({
+                value: font.family,
+                label: font.label,
+                cssFontFamily: font.cssFontFamily,
+            });
+        }
+        return mergedFonts;
+    }
+    handleSelectionChange() {
+        if (this.tool?.toolType === 'selection') {
+            this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+            if (this.config) {
+                this.updatePalette();
+                this.updateSizes();
+                this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+                this.emitDisplayValues();
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.engine) {
+            this.engine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    componentWillLoad() {
+        this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+        if (this.config) {
+            this.updatePalette();
+            this.updateSizes();
+            this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+            this.emitDisplayValues();
+        }
+        if (this.engine) {
+            this.engine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    emitDisplayValues() {
+        if (!this.config)
+            return;
+        const color = this.tool[this.config.colorProperty];
+        const opacity = this.currentOpacity;
+        const size = this.tool[this.config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            size,
+        };
+        if (this.tool.toolType === 'text') {
+            displayValues.fontFamily = this.tool.fontFamily;
+        }
+        this.displayValuesChange.emit(displayValues);
+    }
+    updatePalette() {
+        if (!this.config)
+            return;
+        if (this.config.paletteSource === 'none') {
+            this.palette = [];
+        }
+        else {
+            this.palette = this.tool.palette || [];
+        }
+    }
+    updateSizes() {
+        if (!this.config)
+            return;
+        if (this.config.sizesSource === 'none') {
+            this.sizes = [];
+        }
+        else {
+            this.sizes = this.tool.sizes || [];
+        }
+    }
+    handleToggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    handleColorChange = (event) => {
+        this.tool[this.config.colorProperty] = event.detail;
+        // Special handling for shape fill: when color (stroke) changes, update fill color if it's currently filled
+        if (this.config.type === 'shape' || this.config.type === 'selection') {
+            const tool = this.tool;
+            const isTransparent = typeof tool.fillColor === 'string' ? tool.fillColor === 'transparent' :
+                (tool.fillColor.light === 'transparent' && tool.fillColor.dark === 'transparent');
+            if (!isTransparent) {
+                tool.fillColor = event.detail;
+            }
+        }
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleSizeChange = (event) => {
+        this.tool[this.config.sizeProperty] = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleOpacityChange = (event) => {
+        this.tool[this.config.opacityProperty] = event.detail;
+        this.currentOpacity = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+    };
+    handlePropertyChange = (propertyName, value) => {
+        // Special handling for shape fill
+        if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : { light: 'transparent', dark: 'transparent' };
+            this.tool.fillColor = newFillColor;
+            // When switching to fill mode, also update stroke color to match
+            if (value === 'filled') {
+                this.tool[this.config.colorProperty] = newFillColor;
+            }
+        }
+        else {
+            this.tool[propertyName] = value;
+            // Emit display values for font family changes
+            if (propertyName === 'fontFamily') {
+                this.emitDisplayValues();
+            }
+        }
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    getShapeFillValue() {
+        const fillColor = this.tool.fillColor;
+        const isTransparent = typeof fillColor === 'string' ? fillColor === 'transparent' :
+            (fillColor.light === 'transparent' && fillColor.dark === 'transparent');
+        return isTransparent ? 'transparent' : 'filled';
+    }
+    renderControl(control) {
+        const value = this.tool[control.propertyName];
+        switch (control.type) {
+            case 'stroke-size':
+                return (h("kritzel-stroke-size", { key: control.type, sizes: this.sizes, selectedSize: value, onSizeChange: this.handleSizeChange }));
+            case 'font-size':
+                return (h("kritzel-font-size", { key: control.type, sizes: this.sizes, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
+            case 'line-endings':
+                return (h("kritzel-line-endings", { key: control.type, value: value, onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'shape-fill':
+                return (h("kritzel-shape-fill", { key: control.type, value: this.getShapeFillValue(), onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'font-family':
+                return (h("kritzel-font-family", { key: control.type, fontOptions: this.getFontOptionsFromTool(), selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            default:
+                return null;
+        }
+    }
+    render() {
+        if (!this.config)
+            return null;
+        const shouldShowExpandButton = this.palette.length > 6 || this.config.type === 'text';
+        const shouldShowColorPalette = this.palette.length > 0;
+        // Separate size control from other controls
+        const sizeControl = this.config.controls.find(c => c.type === 'stroke-size' || c.type === 'font-size');
+        const otherControls = this.config.controls.filter(c => c.type !== 'stroke-size' && c.type !== 'font-size');
+        return (h(Host, null, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '8px',
+                width: '100%',
+            } }, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                flex: '1',
+            } }, shouldShowColorPalette && (h("kritzel-color-palette", { colors: this.palette, selectedColor: this.tool[this.config.colorProperty], isExpanded: this.isExpanded, isOpaque: true, opacity: this.currentOpacity, theme: this.theme, onColorChange: this.handleColorChange })), sizeControl && this.renderControl(sizeControl), h("kritzel-opacity-slider", { value: this.tool[this.config.opacityProperty], previewColor: this.tool[this.config.colorProperty], onValueChange: this.handleOpacityChange }), otherControls.map((control) => [
+            h("div", { class: "divider" }),
+            this.renderControl(control),
+        ])), shouldShowExpandButton && (h("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? (this.terms['toolConfig.collapse'] ?? 'Collapse') : (this.terms['toolConfig.expand'] ?? 'Expand') }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
+    }
+    static get watchers() { return {
+        "tool": [{
+                "handleToolChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }],
+        "engine": [{
+                "handleEngineChange": 0
+            }]
+    }; }
+    static get style() { return kritzelToolConfigCss(); }
+}, [513, "kritzel-tool-config", {
+        "tool": [1040],
+        "isExpanded": [1028, "is-expanded"],
+        "theme": [1],
+        "engine": [16],
+        "terms": [16],
+        "config": [32],
+        "palette": [32],
+        "sizes": [32],
+        "currentOpacity": [32],
+        "updateTrigger": [32]
+    }, undefined, {
+        "tool": [{
+                "handleToolChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }],
+        "engine": [{
+                "handleEngineChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-tool-config", "kritzel-color", "kritzel-color-palette", "kritzel-dropdown", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-line-endings", "kritzel-opacity-slider", "kritzel-shape-fill", "kritzel-stroke-size"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-tool-config":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelToolConfig);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kritzel-color-palette":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "kritzel-font-family":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kritzel-font-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-line-endings":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-opacity-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-shape-fill":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-stroke-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelToolConfig as K, defineCustomElement as d };

package/dist/components/p-D0tPTPkR.js

@@ -0,0 +1,99 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+
+const kritzelNotificationCardCss = () => `:host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}`;
+
+const KritzelNotificationCard = /*@__PURE__*/ proxyCustomElement(class KritzelNotificationCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dismiss = createEvent(this, "dismiss");
+        this.hoverChange = createEvent(this, "hoverChange");
+    }
+    /** Notification data rendered by this card. */
+    notification;
+    /** Whether a formatted timestamp should be displayed when available. */
+    showTimestamp = true;
+    /** Locale used for formatting the timestamp. */
+    locale;
+    /** Emitted when the notification should be dismissed manually. */
+    dismiss;
+    /** Emitted when pointer hover state changes. */
+    hoverChange;
+    handleDismissClick = (event) => {
+        event.stopPropagation();
+        this.dismiss.emit();
+    };
+    handleMouseEnter = () => {
+        this.hoverChange.emit(true);
+    };
+    handleMouseLeave = () => {
+        this.hoverChange.emit(false);
+    };
+    get type() {
+        return this.notification?.type ?? 'info';
+    }
+    get role() {
+        return this.type === 'error' ? 'alert' : 'status';
+    }
+    getTypeLabel(type) {
+        switch (type) {
+            case 'warning':
+                return 'Warning';
+            case 'error':
+                return 'Error';
+            default:
+                return 'Info';
+        }
+    }
+    formatTimestamp(timestamp) {
+        if (!timestamp || !this.showTimestamp) {
+            return null;
+        }
+        const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+        if (Number.isNaN(date.getTime())) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(this.locale, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+        }).format(date);
+    }
+    render() {
+        const notification = this.notification;
+        if (!notification) {
+            return h(Host, null);
+        }
+        const type = this.type;
+        const timestamp = this.formatTimestamp(notification.timestamp);
+        return (h(Host, null, h("article", { class: { card: true, [`type-${type}`]: true }, role: this.role, "aria-live": "polite", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("header", { class: "card-header" }, h("span", { class: "type-pill" }, this.getTypeLabel(type)), h("div", { class: "header-right" }, timestamp && (h("time", { class: "timestamp", dateTime: notification.timestamp?.toISOString() }, timestamp)), h("button", { class: "dismiss-button", type: "button", "aria-label": "Dismiss notification", onClick: this.handleDismissClick }, h("kritzel-icon", { name: "x", size: 16 })))), h("p", { class: "message" }, notification.message))));
+    }
+    static get style() { return kritzelNotificationCardCss(); }
+}, [513, "kritzel-notification-card", {
+        "notification": [16],
+        "showTimestamp": [4, "show-timestamp"],
+        "locale": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-notification-card", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-notification-card":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelNotificationCard);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelNotificationCard as K, defineCustomElement as d };

package/dist/components/p-DJxgPPfs.js

@@ -0,0 +1,194 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelHTMLHelper } from '@kritzel/engine';
+
+const kritzelTooltipCss = () => `:host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}`;
+
+const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.tooltipClosed = createEvent(this, "tooltipClosed");
+        this.tooltipOpened = createEvent(this, "tooltipOpened");
+    }
+    get host() { return this; }
+    isVisible = false;
+    anchorElement;
+    triggerElement;
+    offsetY = 24;
+    tooltipClosed;
+    tooltipOpened;
+    positionX = 0;
+    positionY = 0;
+    handleOutsideClick(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            this.close();
+        }
+    }
+    handleOutsidePointerDown(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            event.stopPropagation();
+            event.preventDefault();
+            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() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    componentWillLoad() {
+        this.calculateAdjustedPosition();
+    }
+    componentWillUpdate() {
+        this.calculateAdjustedPosition();
+    }
+    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();
+            const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
+            const tooltipRect = tooltipContent?.getBoundingClientRect();
+            const tooltipWidth = tooltipRect?.width || 0;
+            const viewportPadding = 12; // Minimum distance from viewport edges
+            const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+            // Step 1: Try to center the tooltip above the anchor
+            let idealLeft = anchorCenterX - tooltipWidth / 2;
+            // Step 2: Clamp to viewport bounds
+            const minLeft = viewportPadding;
+            const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;
+            // Apply clamping - adjust if tooltip would overflow
+            this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
+            // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
+            this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'aa1367fd2af71357855814087a3d3c69e77e326f', 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: 'da84f59a18173fa4c93b4c2b8ace6102b0067e17', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'a68910ec2f7c2243043aea21489e3c68b6b09966' }))));
+    }
+    static get watchers() { return {
+        "triggerElement": [{
+                "handleTriggerElementChange": 0
+            }],
+        "isVisible": [{
+                "handleVisibilityChange": 0
+            }]
+    }; }
+    static get style() { return kritzelTooltipCss(); }
+}, [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"], [6, "pointerdown", "handleOutsidePointerDown"], [4, "kritzelTooltipCloseAll", "handleCloseAll"], [9, "resize", "handleWindowResize"]], {
+        "triggerElement": [{
+                "handleTriggerElementChange": 0
+            }],
+        "isVisible": [{
+                "handleVisibilityChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelTooltip);
+            }
+            break;
+    } });
+}
+
+export { KritzelTooltip as K, defineCustomElement as d };