kritzel-stencil 0.2.10 → 0.2.11

package/dist/collection/components/core/kritzel-editor/kritzel-editor.css

@@ -14,11 +14,18 @@ kritzel-editor{
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none;           
+  user-select: none;
+  text-align: start;
+  line-height: normal;
 }
 
 kritzel-controls {
   position: absolute;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  width: max-content;
+  max-width: calc(100% - 16px);
   bottom: var(--kritzel-editor-controls-bottom, 14px);
   transition: transform var(--kritzel-editor-controls-transition-duration, 0.1s) var(--kritzel-editor-controls-transition, ease-in-out);
 }

package/dist/collection/components/shared/kritzel-dialog/kritzel-dialog.css

@@ -2,6 +2,11 @@
   display: contents;
 }
 
+.dialog-content {
+  text-align: start;
+  line-height: normal;
+}
+
 .backdrop {
   position: fixed;
   top: 0;
@@ -71,6 +76,30 @@
   border-radius: 0;
 }
 
+/*
+ * Contained-mobile: when the wrapping container itself is mobile-sized, the
+ * dialog fills the container fully (mirrors the viewport fullscreen-on-mobile
+ * behavior). The actual sizing is set inline by JS based on the container
+ * rect; here we just remove decorations and ensure body flex layout.
+ */
+.backdrop.contained-fullscreen {
+  background-color: transparent;
+}
+
+.dialog-content.contained-fullscreen {
+  border-radius: 0;
+}
+
+.dialog-content.contained-fullscreen .dialog-body {
+  display: flex;
+  flex-direction: column;
+}
+
+.dialog-content.contained-fullscreen .dialog-body ::slotted(*) {
+  flex: 1;
+  min-height: 0;
+}
+
 /* Responsive: auto fullscreen on mobile when enabled (portrait) */
 @media (max-width: 576px),
   (max-height: 576px) and (orientation: landscape) {

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

@@ -20,8 +20,12 @@ export class KritzelDialog {
     size = 'medium';
     /** Whether to automatically go fullscreen on mobile viewports */
     fullscreenOnMobile = true;
+    /** Constrain the dialog to its nearest editor/container ancestor instead of the viewport. */
+    contained = false;
     isAnimating = false;
     mobileLockedHeight = null;
+    containerRect = null;
+    containerBorderRadius = null;
     /** Emitted when the dialog opens */
     dialogOpen;
     /** Emitted when the dialog closes */
@@ -29,6 +33,9 @@ export class KritzelDialog {
     previousOverflow = '';
     previousActiveElement = null;
     visualViewportListenersAttached = false;
+    containerElement = null;
+    containerResizeObserver = null;
+    containerTrackingFrame = null;
     handleIsOpenChange(newValue) {
         if (newValue) {
             this.openDialog();
@@ -78,13 +85,19 @@ export class KritzelDialog {
     }
     disconnectedCallback() {
         this.removeVisualViewportListeners();
+        this.stopContainerTracking();
         this.restoreBodyScroll();
     }
     openDialog() {
         this.isAnimating = true;
         this.previousActiveElement = document.activeElement;
-        this.lockBodyScroll();
-        this.addVisualViewportListeners();
+        if (this.contained) {
+            this.startContainerTracking();
+        }
+        else {
+            this.lockBodyScroll();
+            this.addVisualViewportListeners();
+        }
         this.lockMobileViewportHeight();
         this.dialogOpen.emit();
         if (this.autoFocus) {
@@ -99,9 +112,106 @@ export class KritzelDialog {
     closeDialog() {
         this.restoreBodyScroll();
         this.removeVisualViewportListeners();
+        this.stopContainerTracking();
         this.mobileLockedHeight = null;
         this.returnFocusToPreviousElement();
     }
+    findContainerElement() {
+        // Walk up the composed DOM (crossing shadow roots) and return the first
+        // ancestor that opts into containing dialogs. We accept either an explicit
+        // [data-kritzel-dialog-container] marker or the kritzel-editor host so any
+        // consumer can opt in without modifying the editor itself.
+        let node = this.host;
+        while (node) {
+            if (node instanceof HTMLElement) {
+                if (node.hasAttribute('data-kritzel-dialog-container') || node.tagName === 'KRITZEL-EDITOR') {
+                    return node;
+                }
+            }
+            const parent = node.parentNode;
+            if (parent) {
+                node = parent;
+            }
+            else if (node instanceof ShadowRoot) {
+                node = node.host;
+            }
+            else {
+                node = null;
+            }
+        }
+        return null;
+    }
+    startContainerTracking() {
+        this.containerElement = this.findContainerElement();
+        if (!this.containerElement) {
+            // No container found — fall back to viewport behavior.
+            this.containerRect = null;
+            return;
+        }
+        this.updateContainerRect();
+        if (typeof ResizeObserver !== 'undefined') {
+            this.containerResizeObserver = new ResizeObserver(() => this.updateContainerRect());
+            this.containerResizeObserver.observe(this.containerElement);
+        }
+        window.addEventListener('resize', this.handleContainerTrackingEvent, { passive: true });
+        window.addEventListener('scroll', this.handleContainerTrackingEvent, { capture: true, passive: true });
+    }
+    stopContainerTracking() {
+        if (this.containerResizeObserver) {
+            this.containerResizeObserver.disconnect();
+            this.containerResizeObserver = null;
+        }
+        window.removeEventListener('resize', this.handleContainerTrackingEvent);
+        window.removeEventListener('scroll', this.handleContainerTrackingEvent, { capture: true });
+        if (this.containerTrackingFrame !== null) {
+            cancelAnimationFrame(this.containerTrackingFrame);
+            this.containerTrackingFrame = null;
+        }
+        this.containerElement = null;
+        this.containerRect = null;
+        this.containerBorderRadius = null;
+    }
+    handleContainerTrackingEvent = () => {
+        if (this.containerTrackingFrame !== null)
+            return;
+        this.containerTrackingFrame = requestAnimationFrame(() => {
+            this.containerTrackingFrame = null;
+            this.updateContainerRect();
+        });
+    };
+    updateContainerRect() {
+        if (!this.containerElement)
+            return;
+        const rect = this.containerElement.getBoundingClientRect();
+        const next = { top: rect.top, left: rect.left, width: rect.width, height: rect.height };
+        const prev = this.containerRect;
+        if (!prev || prev.top !== next.top || prev.left !== next.left || prev.width !== next.width || prev.height !== next.height) {
+            this.containerRect = next;
+        }
+        // Look for the nearest visually-rounded ancestor (the container itself or
+        // any ancestor up to the document) so the backdrop matches wrappers that
+        // round their corners around the editor.
+        const radius = this.findVisualBorderRadius(this.containerElement);
+        if (this.containerBorderRadius !== radius) {
+            this.containerBorderRadius = radius;
+        }
+    }
+    findVisualBorderRadius(start) {
+        let node = start;
+        while (node && node !== document.body && node !== document.documentElement) {
+            const computed = window.getComputedStyle(node);
+            const tl = computed.borderTopLeftRadius;
+            const tr = computed.borderTopRightRadius;
+            const br = computed.borderBottomRightRadius;
+            const bl = computed.borderBottomLeftRadius;
+            const isZero = (v) => !v || v === '0px' || v === '0%';
+            if (!(isZero(tl) && isZero(tr) && isZero(br) && isZero(bl))) {
+                return `${tl} ${tr} ${br} ${bl}`;
+            }
+            node = node.parentElement;
+        }
+        return null;
+    }
     emitClose(reason) {
         this.dialogClose.emit({ reason });
     }
@@ -110,6 +220,12 @@ export class KritzelDialog {
         document.body.style.overflow = 'hidden';
     }
     lockMobileViewportHeight() {
+        // Skip mobile viewport height locking when contained — the dialog is sized
+        // by its wrapper, not the viewport.
+        if (this.contained) {
+            this.mobileLockedHeight = null;
+            return;
+        }
         // Only lock height on mobile when fullscreenOnMobile is enabled.
         // Use the smaller dimension so landscape phones (wide but short) are also detected.
         const viewportWidth = this.getViewportWidth();
@@ -244,15 +360,73 @@ export class KritzelDialog {
             return null;
         return (h("div", { class: "dialog-footer" }, h("slot", { name: "footer" })));
     }
+    getBackdropStyle() {
+        if (!this.contained || !this.containerRect)
+            return undefined;
+        const { top, left, width, height } = this.containerRect;
+        const style = {
+            top: `${top}px`,
+            left: `${left}px`,
+            right: 'auto',
+            bottom: 'auto',
+            width: `${width}px`,
+            height: `${height}px`,
+        };
+        if (this.containerBorderRadius) {
+            style.borderRadius = this.containerBorderRadius;
+            // Ensure rounded corners actually clip the inner dialog content.
+            style.overflow = 'hidden';
+        }
+        return style;
+    }
+    getDialogContentStyle() {
+        const style = {};
+        // In contained mode, cap the dialog dimensions to the container so the
+        // declared widths/heights of size variants cannot overflow the wrapper.
+        if (this.contained && this.containerRect) {
+            const { width, height } = this.containerRect;
+            if (this.isContainerMobile()) {
+                // Mobile-sized container: behave like fullscreen-on-mobile but scoped
+                // to the container instead of the viewport (works in any orientation).
+                style.width = `${width}px`;
+                style.height = `${height}px`;
+                style.maxWidth = `${width}px`;
+                style.maxHeight = `${height}px`;
+                style.borderRadius = '0';
+            }
+            else {
+                // Leave a small margin so the dialog visibly sits within the container.
+                const maxWidth = Math.max(0, width - 32);
+                const maxHeight = Math.max(0, height - 32);
+                style.maxWidth = `${maxWidth}px`;
+                style.maxHeight = `${maxHeight}px`;
+            }
+        }
+        if (this.mobileLockedHeight) {
+            style.height = this.mobileLockedHeight;
+            style.maxHeight = this.mobileLockedHeight;
+        }
+        return Object.keys(style).length > 0 ? style : undefined;
+    }
+    isContainerMobile() {
+        if (!this.fullscreenOnMobile || !this.containerRect)
+            return false;
+        // Match the existing viewport media-query threshold: container is "mobile"
+        // when its smaller dimension is <= 576px. This handles both portrait and
+        // landscape wrappers symmetrically.
+        return Math.min(this.containerRect.width, this.containerRect.height) <= 576;
+    }
     render() {
         if (!this.isOpen)
             return null;
-        return (h(Host, null, h("div", { class: { backdrop: true, 'is-animating': this.isAnimating }, onClick: this.handleBackdropClick }, h("div", { class: {
+        const containerFullscreen = this.contained && this.isContainerMobile();
+        return (h(Host, null, h("div", { class: { backdrop: true, 'is-animating': this.isAnimating, 'contained-fullscreen': containerFullscreen }, style: this.getBackdropStyle(), onClick: this.handleBackdropClick }, h("div", { class: {
                 'dialog-content': true,
                 'is-animating': this.isAnimating,
                 [`size-${this.size}`]: true,
                 'fullscreen-on-mobile': this.fullscreenOnMobile,
-            }, style: this.mobileLockedHeight ? { height: this.mobileLockedHeight, maxHeight: this.mobileLockedHeight } : undefined, role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? 'dialog-title' : undefined, tabIndex: -1, onClick: this.handleContentClick }, this.renderHeader(), h("div", { class: "dialog-body" }, h("slot", null)), this.renderFooter()))));
+                'contained-fullscreen': containerFullscreen,
+            }, style: this.getDialogContentStyle(), role: "dialog", "aria-modal": "true", "aria-labelledby": this.dialogTitle ? 'dialog-title' : undefined, tabIndex: -1, onClick: this.handleContentClick }, this.renderHeader(), h("div", { class: "dialog-body" }, h("slot", null)), this.renderFooter()))));
     }
     static get is() { return "kritzel-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -446,13 +620,35 @@ export class KritzelDialog {
                 "reflect": false,
                 "attribute": "fullscreen-on-mobile",
                 "defaultValue": "true"
+            },
+            "contained": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Constrain the dialog to its nearest editor/container ancestor instead of the viewport."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "contained",
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
             "isAnimating": {},
-            "mobileLockedHeight": {}
+            "mobileLockedHeight": {},
+            "containerRect": {},
+            "containerBorderRadius": {}
         };
     }
     static get events() {

package/dist/collection/components/ui/kritzel-controls/kritzel-controls.css

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   user-select: none;
-  max-width: calc(100vw - 16px);
+  max-width: 100%;
 }
 
 :host(.mobile) {

package/dist/collection/components/ui/kritzel-current-user-dialog/kritzel-current-user-dialog.js

@@ -21,7 +21,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: '49dd037cca0741cc949f20d9d44cfd028492dc60', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: 'ddcdfb82cc0c896025559888d475ab5c9ad59b4c', class: "user-info" }, h("kritzel-avatar", { key: '4d164b784cde6787d26ac164c7450c0352e6a7cb', user: this.user, size: 80 }), displayName && h("div", { key: '13ad719d8bd90cd608c78438fccbb38ed1d5e5ba', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'df360afd434293d9c9d5fcf114713e0a6925a78e', class: "user-email" }, this.user.email)))));
+        return (h(Host, { key: 'e1dd44cdfdbaebfe886fed0d9feba2ef232b6615' }, h("kritzel-dialog", { key: 'cd3daa7abd53c10852d63a2fe53d919414cd8904', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '94d0a691ede73135e6cf4ef144c13e52e410ffbe', class: "user-info" }, h("kritzel-avatar", { key: 'e57592d2f3663b593534055be5aae1b224fa8906', user: this.user, size: 80 }), displayName && h("div", { key: '237db2d0608ee49ea70e5282b61a59077f0f4595', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'd821e8171530b92ce6f1781c1145b611d3c533d0', class: "user-email" }, this.user.email)))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-export/kritzel-export.js

@@ -65,7 +65,7 @@ export class KritzelExport {
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: "Filename", value: this.exportFilename, placeholder: "Enter filename", suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: '01aae6955be6828945b20e8a8a4d7c49eb92b2e2', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, onDialogClose: this.closeDialog }, h("div", { key: '57c6f6de2917fb51201d737c4d0e1877f5671466', class: "export-content" }, h("kritzel-pill-tabs", { key: '800b8c058078ba1bba06b5edbaf370c4fa3c6806', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '99fb3b3d8dc42fdb47a3110e8403dde4e508e6cd', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
+        return (h(Host, { key: '5178e66f75b94697c771e2dc6fe7ce317e21cd1a' }, h("kritzel-dialog", { key: 'f80cbe3fa709ed7e046303034b7345ca1f94bc48', isOpen: this.isDialogOpen, dialogTitle: "Export", closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'e7968807c2b67ebfc800cb1694b4e34af245ffba', class: "export-content" }, h("kritzel-pill-tabs", { key: 'eac62225c4c42431296f330791a1fb2212f579f5', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '3489affca39a901c2ef05a0698cdf51c0a7f6d1a', class: "export-primary-button", onClick: this.handleExport }, "Export")))));
     }
     static get is() { return "kritzel-export"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-login-dialog/kritzel-login-dialog.js

@@ -44,7 +44,7 @@ export class KritzelLoginDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '09ece6fb5949fc8b204f29cd931c583e525590e1', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: '57218d7762734929691b82700c31922f5a4991c8', class: "login-content" }, this.subtitle && (h("p", { key: '9ee071786f393857cd6a666e395526a139359d60', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'a487687345aabcfb55976437ddc85feb464f0cae', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+        return (h(Host, { key: '1a664868b840030a773f61c2a0f4388dfb014675' }, h("kritzel-dialog", { key: '54844ffa772a211515c1ef3e6834ec45f7f3d035', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'd9b981b6904c58bc39173ae37ee5c4c0ee329005', class: "login-content" }, this.subtitle && (h("p", { key: 'd4d200060507d2b8b755796d8313acdfc7e2f587', class: "login-subtitle" }, this.subtitle)), h("div", { key: '3dc1e3c070e62d026eb16ceb48eb63c94bc2bed0', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
                 'provider-button': true,
                 'is-loading': this.loadingProvider === provider.name,
                 'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,

package/dist/collection/components/ui/kritzel-settings/kritzel-settings.js

@@ -181,7 +181,7 @@ export class KritzelSettings {
         }
     }
     render() {
-        return (h(Host, { key: 'e86192a8ca49f8618d58ede4d04d321ea238d7d4' }, h("kritzel-dialog", { key: '111bc00bbf36c2a2f82179b1a8ba22fb3a9ed11b', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '02c49d50572678e2ffc9d0a02bece918fbaa14e2', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+        return (h(Host, { key: 'e86192a8ca49f8618d58ede4d04d321ea238d7d4' }, h("kritzel-dialog", { key: '23a47a8cd9281794bfd2aec7edd6a4ef4b931550', isOpen: this.isDialogOpen, dialogTitle: "Settings", size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '007c8a1c04bd0d692b55d88988b0f8874f9242a4', items: SETTINGS_CATEGORIES, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-share-dialog/kritzel-share-dialog.js

@@ -84,9 +84,9 @@ export class KritzelShareDialog {
         this.dialogClosed.emit();
     };
     render() {
-        return (h(Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, h("kritzel-dialog", { key: 'c152f4ec5739a18b265f9a8b161ec8501c1a053b', dialogTitle: "Share Workspace", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small" }, h("div", { key: '2810061b1c99e4f4644342453de693e1cddf9a27', class: "share-content" }, h("div", { key: 'bc56de53fd6136c6867018af24019383094cab0d', class: "share-section" }, h("div", { key: '43464ffd61e5a19653cc081e823f01c0eb17e454', class: "share-row" }, h("div", { key: 'ed83ea6684695d09dc6af82b3367fbbff6e4c7e2', class: "share-label-group" }, h("label", { key: 'fe2eaf501dd80ad0b8d83f93a2dcdd18bc093d3b', class: "share-label" }, "Link sharing"), h("p", { key: '738f1a6afc0421380164b9d270920631cefdfd78', class: "share-description" }, this.internalIsPublic
+        return (h(Host, { key: 'bd58f146337b3eca96ca34408a3d30621f01765a' }, h("kritzel-dialog", { key: '0575ac82e19d07cf909556cae2ec433e0057fd5b', dialogTitle: "Share Workspace", size: "small", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, contained: true }, h("div", { key: 'c51d207e31255f45724103bfecbe858f13a721e6', class: "share-content" }, h("div", { key: 'ca6cb7721b9ba834c133b2cb953b208475e34fb5', class: "share-section" }, h("div", { key: '2c76845c903cc1c18cc26b9111d608e732ed12a5', class: "share-row" }, h("div", { key: '7700533f54372bc81d8d795414318a6bf0e93c47', class: "share-label-group" }, h("label", { key: 'a1d80009cb09cfe35bce35ce1151bf0754b052c1', class: "share-label" }, "Link sharing"), h("p", { key: '10c1963e95e658c7fb86174f1dba7565ce40d5a6', class: "share-description" }, this.internalIsPublic
             ? 'Anyone with the link can access this workspace.'
-            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: '60f0200ea8f9c207cd5ee76f5a86f82707bb724b', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: '83212a2a996b85996eee119d5535203f77d3c8dd', class: "share-section" }, h("div", { key: '297031b5aef2018f7aa33c32fd0f8c82f1ddb4cb', class: "share-url-container" }, h("input", { key: '467cca4a8c31b75daa82670f64b562730c241f52', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: 'fdc0f490339cb7050fb020cb1e83e51f6374b183', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: '5ff1a76d7977c75ea7bc8c339bdf515ba102e511', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
+            : 'Link sharing is disabled. Only you can access this workspace.')), h("kritzel-slide-toggle", { key: 'ec62a5ece12be0cea18a16c5d41db0a992309174', checked: this.internalIsPublic, onCheckedChange: this.handleToggleChange, label: "Enable link sharing" }))), this.internalIsPublic && (h("div", { key: '5e826d4c8c37792ba3a74a0189ad313a8ab482e2', class: "share-section" }, h("div", { key: 'f8e35cda32cb34ab21f56335aa27503fd6fe98c4', class: "share-url-container" }, h("input", { key: '47feb20a1843e1d3d8f7d146d71574b187002e8d', type: "text", class: "share-url-input", value: this.getShareUrl(), readOnly: true, onClick: (e) => e.target.select() }), h("button", { key: '052f56f35d057430cbc8fd03da5bef574b173791', class: { 'copy-button': true, 'copy-success': this.copySuccess }, onClick: this.handleCopyUrl, title: this.copySuccess ? 'Copied!' : 'Copy link' }, h("kritzel-icon", { key: '4e1de478f837a352185be2a06e15796dc1fb2f5e', name: this.copySuccess ? 'check' : 'copy', size: 18 })))))))));
     }
     static get is() { return "kritzel-share-dialog"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.2.10';
+export const KRITZEL_VERSION = '0.2.11';

package/dist/components/kritzel-controls.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-CzYgMB2N.js";const p=o,r=s;export{p as KritzelControls,r as defineCustomElement}
+import{K as o,d as s}from"./p-C51_twnc.js";const t=o,p=s;export{t as KritzelControls,p as defineCustomElement}

package/dist/components/kritzel-current-user-dialog.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-BuSOJ7Xd.js";const p=o,r=s;export{p as KritzelCurrentUserDialog,r as defineCustomElement}
+import{K as o,d as r}from"./p-CrmWVXea.js";const s=o,a=r;export{s as KritzelCurrentUserDialog,a as defineCustomElement}

package/dist/components/kritzel-current-user.js

@@ -1 +1 @@
-import{K as o,d as s}from"./p-nW05C2cx.js";const p=o,r=s;export{p as KritzelCurrentUser,r as defineCustomElement}
+import{K as o,d as s}from"./p-Z9_amVdR.js";const a=o,m=s;export{a as KritzelCurrentUser,m as defineCustomElement}

package/dist/components/kritzel-dialog.js

@@ -1 +1 @@
-import{K as o,d as r}from"./p-DPxSr1wV.js";const s=o,p=r;export{s as KritzelDialog,p as defineCustomElement}
+import{K as o,d as s}from"./p-BTSOqHMI.js";const p=o,r=s;export{p as KritzelDialog,r as defineCustomElement}