kritzel-stencil 0.4.30 → 0.4.31

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: '42f84f104e4b008a7c53a5e1ea9290c17ba792d2', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: 'b24e74fd097649b287ed531539f9870e307e7bd9', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '8f6b3df9db735dfd847da9683db3fbdcc65b08a4', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'f6b0c86a4a56292692ad803f8bfa3ae17bbafb46', 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: '7a314d779882e2b42a39fdb2a52f434ccacff112', class: "kritzel-controls" }, h("div", { key: '23458bc04c2f1a610cff9c5e617d7be2c657bf4f', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'b17d817767c92ce7a6edf279759d3f1fb1097911', 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: 'ed6cd48baea27dd26136c2325a1e3f5bb2c25583', class: "kritzel-controls" }, h("div", { key: '63396ad42750244a3f19973421396d29593a6ca9', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'fe26d6c155cf365d4d84d6bd10f3675cf224afd4', 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: '740b52666bf823b7dc504a1072f68b59f94a3773', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: 'ba5b229ad298a52cf3fff9898e52b1facb64fb26', 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: '7c5697faa2d03931ba9449b58a32e9f06166528e', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '6e9bc7e5cf77778ec1dd2bee1c415344295acc00', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'fbfb910dacd4178aaffca5aa02e4e4422ba1b308', 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: '59d11a83e8c9968ba8d50df4275a892b4b75958c', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '5d8f80c0f0c3a9068196196bbe1d1f7f3ad822d4', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '986bde3449a3d0f524d11996851c9c1c23ea7732', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '7338acd8fc97e684b583413d6cf8f22bcedbe5ca', 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: '08e7597220bed80377dc677a6340b037168b7fa3', 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: '0ce5a0d8f51773b6e31feeee785606d637e06b42', class: "color-container" }, h("kritzel-color", { key: '29cc12dd6677b695b14e76e8a1704da78f910698', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: 'bec7b1ff440dbd8a3517b4bc0d757aede0877a8e', class: "color-container" }, h("kritzel-color", { key: '3d6af3817779445b6879b7e6626a738dcb3099ec', 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: '30f2cedeefdef5817fcced6b84e74b53beba76ec' }, h("kritzel-avatar", { key: '41dc69bfbc13471fc686bb52e269dc98d2bfa3a8', user: this.user, size: this.avatarSize })));
+        return (h(Host, { key: '5cd225e636bc44a9c2418a6e9cf03b4dc220bcd8' }, h("kritzel-avatar", { key: '783d399ad51f40805ed63e3c44a4634066a05666', 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: '33baea01a828422f2bba5c2fba82dd82e5c5b32d' }, h("kritzel-dialog", { key: '5271e1eb5d36b74f8487c040e70424c26f7019f8', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '901697b9439eb8449f2f5c8e044c194f176633b1', class: "user-info" }, h("kritzel-avatar", { key: '76a17b9a2e4442b36b89747a5f5f168d2c59e7a1', user: this.user, size: 80 }), displayName && h("div", { key: '6aaedb1d2d8ea65de2460c15017d13b4e096223d', class: "user-name" }, displayName), this.user?.email && h("div", { key: '3cb78d0007087a18f798849f244399e5d6137e3b', class: "user-email" }, this.user.email), h("kritzel-button", { key: '67d416a1ac1be41cd6b658f79901cea29a287eb7', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
+        return (h(Host, { key: '5e7e3c553dde2d1d049ab0e2f15a60d8ccf41708' }, h("kritzel-dialog", { key: '24e27641ade633adfb76536c34f0bbc885b230f0', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'c9898de33ff63db1d244fe3028fd3ced36ce4f32', class: "user-info" }, h("kritzel-avatar", { key: '09ea2593f5a83c46d1fced68665319467c81786f', user: this.user, size: 80 }), displayName && h("div", { key: '61a0357598bd5ee85084255fcd97cc9f61f48cbd', class: "user-name" }, displayName), this.user?.email && h("div", { key: '761eaf17029b5721dbda7d523918ec1932296f89', class: "user-email" }, this.user.email), h("kritzel-button", { key: '55e6930d2e0975425fc00e40b4150d3116318875', 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: '61ce7589d0453a1bd9fde8f33a711e06225eacde' }, h("kritzel-dialog", { key: '48da046edabdb5659b6edefaca56adb7531f9862', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'b7afc64ad1f558a78aa68c07b4dec65e6ca21c67', class: "export-content" }, h("kritzel-pill-tabs", { key: '59f759ade5a590eda6ba87f89eb433ced62da0cd', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'a38bf30c9c5256d417cd3b0baf743e245a8cf3e4', slot: "footer" }, h("button", { key: '3dc9c53416ff9c8ca47df003f41767a2143fa4ef', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+        return (h(Host, { key: '495d4e2ab6dd72661a1046308867b4b8dd8cf0ea' }, h("kritzel-dialog", { key: '616ec1d660c7bdceb6bb4b4ab1190691708059a9', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: 'eca5698b79848cac0e9fc4f13858c8382dd9cae4', class: "export-content" }, h("kritzel-pill-tabs", { key: '3b1d63d270aa29ab08e8a3021b8c0ee23c9076e7', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: 'e5473f00fd9481452426966b5e410afdf3ee8b5a', slot: "footer" }, h("button", { key: 'c799c614e17877fb608445728c547ce2ba6673ab', 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,54 +1,54 @@
-:host {
-  position: absolute;
-  inset: 0;
-  z-index: var(--kritzel-editor-loading-overlay-z-index, 1);
-  display: block;
-  pointer-events: none;
-}
-
-.loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  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;
-  transition:
-    opacity 300ms ease,
-    visibility 0s linear 300ms;
-}
-
-.loading-overlay.visible {
-  opacity: 1;
-  pointer-events: all;
-  visibility: visible;
-  transition:
-    opacity 300ms ease,
-    visibility 0s linear 0s;
-}
-
-.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);
-  }
-}
+:host {
+  position: absolute;
+  inset: 0;
+  z-index: var(--kritzel-editor-loading-overlay-z-index, 1);
+  display: block;
+  pointer-events: none;
+}
+
+.loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  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;
+  transition:
+    opacity 300ms ease,
+    visibility 0s linear 300ms;
+}
+
+.loading-overlay.visible {
+  opacity: 1;
+  pointer-events: all;
+  visibility: visible;
+  transition:
+    opacity 300ms ease,
+    visibility 0s linear 0s;
+}
+
+.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);
+  }
+}

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: '6795ffc47d57a27f0b58fb42715080bf47c836af' }, h("div", { key: '5359411fa326444a1bddf6f40a6e2bd0ccf1617d', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'bd194c6fef9f2fbc4a4e38aee169d0a754e5dc96', class: "loading-spinner" }), this.text)));
+        return (h(Host, { key: '57dcbaddf9f4f165bccb4affeb51305524bc3475' }, h("div", { key: '70092807eee43133de15793886ab4217eb64b846', class: { 'loading-overlay': true, visible: this.visible }, "aria-hidden": this.visible ? 'false' : 'true' }, h("span", { key: 'a8dee6ae64b8f7f979c54cbb3370311c26b8b28b', class: "loading-spinner" }), this.text)));
     }
     static get is() { return "kritzel-loading-overlay"; }
     static get encapsulation() { return "shadow"; }