kritzel-stencil 0.4.19 → 0.4.21

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

@@ -232,13 +232,13 @@ export class KritzelControls {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '0c61b173d0a92351de148c9c98b25031f231e1ab', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: '2a7595b72594df3e8ff9a103c3ff7dd70f0a8045', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a696e0af5f126456e610a6353377cb5a68b4fcb4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '1c2d9f14c53944f291cf49cbcd1bf282ad8a8683', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'ffe96a9b2b73d3e08c7d149fd64b9b209eaf47d3', class: "kritzel-controls" }, h("div", { key: 'a351b3a4a801a4480d2476a6ca34bbbd628525ac', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '9447a0d4728d4d476113a2bcb94f53a5652f7dd1', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '8ac30e183885bc106033ca163aa7e5927802e67c', class: "kritzel-controls" }, h("div", { key: '74b2808a506e671682aed91107c7c9e27aa4b2c7', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '3fd693c993d5b11eadd2eec7481214fbc1550301', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -268,10 +268,10 @@ export class KritzelControls {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '31a1d141b1381c9aa0b7f07c1ae7d1606d1a8fc6', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '6f16a8332dc6a082f2e6aedbec3e31398f2a8b66', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: 'ed4b6440e5b99b68a29269476de7efa15ecec38f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'cac5417d5e1a8c4ec19fbcf38affb30ac67b521e', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'ffba221a22ab50b4c44c0247ef9e86e4b67e5bde', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '1f5b90e286d5aa8fcf10aa3987c6c6cd75360d49', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '554d743fccfb62d8c368f2a5cdca232ae9842b7f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'af97d986d82c961d66c910f7edabd6e597ec59ab', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '3721e5463a85881c7e806d69c0a9524f44732978', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'c6e3fe4a4a9b781db394073c8f929533487be760', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -280,7 +280,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '3857f9f2bc30ddac57d108a8021061edc5decb07', class: "color-container" }, h("kritzel-color", { key: '304eda20d9036bf567db7a4f146f1b07a8ca4c34', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: '9eeb3a9fc29f4848ee9f325d50b4cbfc5bfe5f1c', class: "color-container" }, h("kritzel-color", { key: '1d45edb7ed07a8d12ab55e374ea456b8e95c8d41', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));

package/dist/collection/components/ui/kritzel-current-user/kritzel-current-user.css

@@ -1,11 +1,11 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-tap-highlight-color: transparent;
-}
-
-kritzel-avatar {
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border-radius: 50%;
-}
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  -webkit-tap-highlight-color: transparent;
+}
+
+kritzel-avatar {
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border-radius: 50%;
+}

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

@@ -11,7 +11,7 @@ export class KritzelCurrentUser {
     /** Resolved localized strings keyed by term key, supplied by the editor. */
     terms = {};
     render() {
-        return (h(Host, { key: '05ff7ea13b5a4850ae49672dfab15280b97e50a1' }, h("kritzel-avatar", { key: '4c33f853508509337033afd7015d7367c5c81d49', user: this.user, size: this.avatarSize })));
+        return (h(Host, { key: '19551eb12507f1384aedf3ca4ce5212eca509c24' }, h("kritzel-avatar", { key: 'e39405e8e6c2e77a8acf5f286fa3890e28e8ab17', user: this.user, size: this.avatarSize })));
     }
     static get is() { return "kritzel-current-user"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,39 +1,39 @@
-:host {
-  display: contents;
-}
-
-kritzel-dialog {
-  --kritzel-dialog-width-small: 380px;
-}
-
-.user-info {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 0;
-}
-
-.user-name {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--kritzel-current-user-dialog-name-color, #333333);
-  text-align: center;
-  margin-top: 8px;
-}
-
-.user-email {
-  font-size: 14px;
-  color: var(--kritzel-current-user-dialog-email-color, #666666);
-  text-align: center;
-}
-
-.logout-button {
-  margin-top: 16px;
-  width: 100%;
-  --kritzel-button-width: 100%;
-  --kritzel-button-primary-background-color: var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);
-  --kritzel-button-primary-hover-background-color: var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);
-  --kritzel-button-primary-active-background-color: var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);
-  --kritzel-button-primary-color: var(--kritzel-current-user-dialog-logout-button-color, #ffffff);
-}
+:host {
+  display: contents;
+}
+
+kritzel-dialog {
+  --kritzel-dialog-width-small: 380px;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 0;
+}
+
+.user-name {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--kritzel-current-user-dialog-name-color, #333333);
+  text-align: center;
+  margin-top: 8px;
+}
+
+.user-email {
+  font-size: 14px;
+  color: var(--kritzel-current-user-dialog-email-color, #666666);
+  text-align: center;
+}
+
+.logout-button {
+  margin-top: 16px;
+  width: 100%;
+  --kritzel-button-width: 100%;
+  --kritzel-button-primary-background-color: var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);
+  --kritzel-button-primary-hover-background-color: var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);
+  --kritzel-button-primary-active-background-color: var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);
+  --kritzel-button-primary-color: var(--kritzel-current-user-dialog-logout-button-color, #ffffff);
+}

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

@@ -29,7 +29,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: 'bb0e0c4181b562bcf6f930508d0799dd24dceb70' }, h("kritzel-dialog", { key: '94b668b6d4c773b30bae2dfad437a0043048dbf3', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '7023664c08e42668e44d5e1f57fa0d020b65d452', class: "user-info" }, h("kritzel-avatar", { key: '461af0f69cb606ad37f779fc5971296f82e2ff34', user: this.user, size: 80 }), displayName && h("div", { key: '60c6e416942465a9afb872ed12cfec4788c580c9', class: "user-name" }, displayName), this.user?.email && h("div", { key: '74a78e08f1aae64ee7e6ba84ca0eeb2efa1650bc', class: "user-email" }, this.user.email), h("kritzel-button", { key: '2b0bc8ded74baeee7a59b958e1529cd1b8862cd1', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
+        return (h(Host, { key: '8f8e63ac6f789f2d0ee43b8b7439634411a91ac9' }, h("kritzel-dialog", { key: '4022a7251881f669f290e0a8beb9a39ef6242b19', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '4671f884c121cfaefdd8a47bd52b30acc2d7b345', class: "user-info" }, h("kritzel-avatar", { key: 'a1847b4b67302f3b7179e4e2b751f7f2106b76d4', user: this.user, size: 80 }), displayName && h("div", { key: 'b3d09b4c99d76014a2e36260edce52c39f1081e1', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'a76ce19cbd24ad536b022264dab6a83f4d1b36c2', class: "user-email" }, this.user.email), h("kritzel-button", { key: 'f125164a9d9362eedfbfff4fc2629f7ec055fc14', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,89 +1,89 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-.export-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding:0;
-  flex: 1;
-}
-
-.export-content kritzel-pill-tabs {
-  align-self: center;
-}
-
-.export-tab-content {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  min-height: 330px;
-}
-
-.format-selection {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.format-selection label {
-  font-size: 14px;
-  font-weight: 500;
-  color: var(--kritzel-global-text-primary, #333);
-}
-
-.export-primary-button {
-  width: 100%;
-  padding: 12px 24px;
-  background-color: var(--kritzel-global-primary-color, #007AFF);
-  color: var(--kritzel-global-primary-text-color, #fff);
-  border: none;
-  border-radius: var(--kritzel-button-border-radius, 8px);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.export-primary-button:hover {
-  background-color: var(--kritzel-global-primary-hover-color, #0066d6);
-}
-
-.export-primary-button:focus-visible {
-  outline: revert;
-  outline-offset: revert;
-}
-
-.preview-container {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  margin-bottom: 8px; 
-}
-
-.preview-container img {
-  max-width: 100%;
-  max-height: 250px;
-  object-fit: contain;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  border-radius: 4px;
-  border: 1px solid var(--kritzel-global-border-color, #dbdbdb);
-}
-
-.export-content p {
-  margin: 0;
-  color: var(--kritzel-global-text-secondary, #666);
-}
-
-@media (max-width: 576px) {
-  .export-tab-content {
-    flex: 1;
-    min-height: 0;
-  }
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.export-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding:0;
+  flex: 1;
+}
+
+.export-content kritzel-pill-tabs {
+  align-self: center;
+}
+
+.export-tab-content {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-height: 330px;
+}
+
+.format-selection {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.format-selection label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--kritzel-global-text-primary, #333);
+}
+
+.export-primary-button {
+  width: 100%;
+  padding: 12px 24px;
+  background-color: var(--kritzel-global-primary-color, #007AFF);
+  color: var(--kritzel-global-primary-text-color, #fff);
+  border: none;
+  border-radius: var(--kritzel-button-border-radius, 8px);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.export-primary-button:hover {
+  background-color: var(--kritzel-global-primary-hover-color, #0066d6);
+}
+
+.export-primary-button:focus-visible {
+  outline: revert;
+  outline-offset: revert;
+}
+
+.preview-container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  margin-bottom: 8px; 
+}
+
+.preview-container img {
+  max-width: 100%;
+  max-height: 250px;
+  object-fit: contain;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+  border-radius: 4px;
+  border: 1px solid var(--kritzel-global-border-color, #dbdbdb);
+}
+
+.export-content p {
+  margin: 0;
+  color: var(--kritzel-global-text-secondary, #666);
+}
+
+@media (max-width: 576px) {
+  .export-tab-content {
+    flex: 1;
+    min-height: 0;
+  }
+}

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

@@ -69,7 +69,7 @@ export class KritzelExport {
         return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
     }
     render() {
-        return (h(Host, { key: '68aef5d406aa819577ca773ea3616b93b9dfc9e7' }, h("kritzel-dialog", { key: '5072ac78ce417ed4d057d44f5532c7ac5c0f5dd6', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '8642b3f39b20a5434a8eb5346fb4a71b9aca39da', class: "export-content" }, h("kritzel-pill-tabs", { key: 'b45da668b2f777a826de32ff2fde51e72f6f3deb', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '594a6ade24ecd869e23e57228ad2f5eff9ee90a8', slot: "footer" }, h("button", { key: '187c56cfd5f00acedb1dfd337a192495a19b5362', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (h(Host, { key: '64a9957ef87799215f9274213ead958a895dd8ef' }, h("kritzel-dialog", { key: '59ad70cc7d2834f5ecac3a659189390015cd26cb', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'fc9247f5b3848def87e6f6a6044d3fb1e63594ac', class: "export-content" }, h("kritzel-pill-tabs", { key: '54da74bbbd206b5e596865081cc5fe65bf8a776f', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'b8e748034496936bf000a8eb111f52d58bf28d20', slot: "footer" }, h("button", { key: 'b7a59f3882146b45a0eb8395ea1c45cb41af0f34', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
     }
     static get is() { return "kritzel-export"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.css

@@ -1,50 +1,50 @@
-:host {
-  display: contents;
-}
-
-.loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: var(--kritzel-editor-loading-overlay-z-index, 9999);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  background-color: var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));
-  color: var(--kritzel-editor-loading-overlay-color, #333);
-  font-family: var(--kritzel-font-family, sans-serif);
-  font-size: 1.25rem;
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-
-.loading-overlay.visible {
-  pointer-events: all;
-  visibility: visible;
-  animation: kritzel-loading-fade-in 200ms ease-out var(--kritzel-editor-loading-overlay-delay, 300ms) forwards;
-}
-
-.loading-spinner {
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  display: block;
-  flex-shrink: 0;
-  border: 2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);
-  border-top-color: var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);
-  border-radius: 50%;
-  animation: kritzel-loading-spin 0.6s linear infinite;
-}
-
-@keyframes kritzel-loading-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes kritzel-loading-fade-in {
-  to {
-    opacity: 1;
-  }
-}
+:host {
+  display: contents;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: var(--kritzel-editor-loading-overlay-z-index, 9999);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background-color: var(--kritzel-editor-loading-overlay-background, rgba(255, 255, 255, 0.6));
+  color: var(--kritzel-editor-loading-overlay-color, #333);
+  font-family: var(--kritzel-font-family, sans-serif);
+  font-size: 1.25rem;
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.loading-overlay.visible {
+  pointer-events: all;
+  visibility: visible;
+  animation: kritzel-loading-fade-in 200ms ease-out var(--kritzel-editor-loading-overlay-delay, 300ms) forwards;
+}
+
+.loading-spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  border: 2px solid var(--kritzel-editor-loading-overlay-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-editor-loading-overlay-spinner-active-color, #333333);
+  border-radius: 50%;
+  animation: kritzel-loading-spin 0.6s linear infinite;
+}
+
+@keyframes kritzel-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes kritzel-loading-fade-in {
+  to {
+    opacity: 1;
+  }
+}

package/dist/collection/components/ui/kritzel-loading-overlay/kritzel-loading-overlay.js

@@ -9,7 +9,7 @@ export class KritzelLoadingOverlay {
      */
     text = 'Loading...';
     render() {
-        return (h(Host, { key: 'bba8ce825e41dff170d9552c28ac996249639ff3' }, h("div", { key: 'af98ab01de836fb6c718f5ceda4a490d91231e66', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '7c04c6abcb445c34f9a036e1797605ef7d575031', class: "loading-spinner" }), this.text)));
+        return (h(Host, { key: '6fc1886217516966fa3599473989748151d93efd' }, h("div", { key: 'c6f2aa1c7f81bbab65411292934d185b4bf69e5a', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: '21bae0b6f9b9a08f814aec7e6635a904018ab839', class: "loading-spinner" }), this.text)));
     }
     static get is() { return "kritzel-loading-overlay"; }
     static get encapsulation() { return "shadow"; }