kritzel-stencil 0.3.16 → 0.3.18

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

@@ -0,0 +1,83 @@
+import { Host, h } from "@stencil/core";
+import { KRITZEL_WEBSITE_URL } from "../../../constants/engine.constants";
+/**
+ * "Powered by Kritzel" watermark shown in the bottom-right corner of the engine
+ * when the editor is not licensed.
+ *
+ * Rendered inside the engine's Shadow DOM and gated by the license manager on
+ * the engine's reactive render path, so removing the node simply causes it to
+ * reappear on the next render. The badge links to the Kritzel website.
+ */
+export class KritzelWatermark {
+    /** The core instance used to resolve localized terms. */
+    core;
+    /**
+     * Resolved "Powered by Kritzel" label. Passed in by the engine so the badge
+     * re-renders when the active locale changes. Falls back to resolving the term
+     * from the core when not provided.
+     */
+    label;
+    render() {
+        const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
+        return (h(Host, { key: '7ec2a304ac711a4d2a54edef317eef9f4aad1d47' }, h("a", { key: '365d588727bbc360fd47bc9a3fbd66155770d32f', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+    }
+    static get is() { return "kritzel-watermark"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-watermark.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-watermark.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "core": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelCore",
+                    "resolved": "KritzelCore",
+                    "references": {
+                        "KritzelCore": {
+                            "location": "import",
+                            "path": "../../../classes/core/core.class",
+                            "id": "src/classes/core/core.class.ts::KritzelCore",
+                            "referenceLocation": "KritzelCore"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The core instance used to resolve localized terms."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved \"Powered by Kritzel\" label. Passed in by the engine so the badge\nre-renders when the active locale changes. Falls back to resolving the term\nfrom the core when not provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

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

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '571bd5b92adc7c65b96ded37b8daf5ed79905361', style: containerStyles, class: {
+        return (h(Host, { key: '0d372a5443f41835c2e8e5b33b58bcb6c1292e89', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '1065850b4575fda4637ab61ce07c6dfc97f14a90', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'deb5f12115dd28b4b4ab2157cb2bbc9e48bb2a3f', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'a6d9c9dd2eac6e44c731a878e2460017da7fb0b7', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '9e9d33cdd213649071b76cb0875008562b30f6a1', class: "avatar-default" }, h("svg", { key: '5d0be5c503a8944b45de239f08e6f40378c2dc5e', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '9264549c9b8abbdea74cd707d6f77bcfdde6459d', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: '6fc12f2d32923f33df5a8ec743d51434f67e6934', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: 'd803b385f7eaa0659d7452231bfd46b1634f204d', class: "avatar-default" }, h("svg", { key: 'a3275ab33f58440abcd15c296d9c027dfab6495c', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '31ac7e63fe6b1778c3d0cbd71b5c85791b79d084', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: 'c915db75630392741de404f07265a391330e54ca' }, h("button", { key: '50248ee1ed5862c9ea72b4f7cf7d564d03b5b14e', type: this.type, class: {
+        return (h(Host, { key: 'aa366907b97e648ac73182a43d099baf457e0ba3' }, h("button", { key: 'e80875396a791606461b1a20e0f7e1c896f54073', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'd595cd819c7c0a3550e468ce65d4e2c28cc02164' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8f4e57a73837adfbf91f678c54558fe4c737aa91' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: 'c4c1fe2559aca61557ff2e8154f4d46ce3511b30' }, h("div", { key: '158c243018763a9609e0a056229263864a5e4d13', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '21ce0ecb616266ec4953468ae9bbe0b72259c2da' }, h("div", { key: '02c8e8684b3b0819755efd1f160bdee662428ddd', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: 'afa21c72b17ab5fb4b16521b91dbe7e9162d05f8', class: {
+            } }, h("div", { key: '0063e9a701994869adbd3022b5ace542e85dfd95', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: 'fc57d77d7c4cfd2aa2a02a70b8991858bb8cf61b' }, h("div", { key: '4fd10783609882f453ce95f5114acf799f21ec52', class: {
+        return (h(Host, { key: '9910a765816f45d420ad27c8fc7b02811380783b' }, h("div", { key: '91f3dae04338f55ab21831e4cac65f9d855c58c6', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {

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

@@ -4,7 +4,7 @@ export class KritzelFont {
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '6eef9e7df004469faeeaf458d9b9967f94f8536d' }, h("div", { key: '9926c54a57245c40d605077e191f62cebf3700b1', class: "font-preview", style: {
+        return (h(Host, { key: '49c44f7fef61bd7116e63bbe9522b0a0e22de116' }, h("div", { key: '4d130682f67e9c0d758cb6194e6a95f15bceb2ee', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

package/dist/collection/components/shared/kritzel-font-size/kritzel-font-size.js

@@ -16,7 +16,8 @@ export class KritzelFontSize {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (h(Host, { key: 'efb5ad516a0ebfea0fee5c78a1d3b4d0af4a6bc9' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: '2083b05b3fdc9940c26dd90dbf9e097564ee976d' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));

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

@@ -28,7 +28,7 @@ export class KritzelInput {
         this.valueChange.emit(input.value);
     };
     render() {
-        return (h(Host, { key: '3fd1f42a3ad5edfac752c05f70558ef73bbfebc3' }, h("div", { key: '78468652ce95508090495fefa9381af175415be8', class: "input-container" }, this.label && h("label", { key: 'f368e0370df4848fa9448ed53382152ad8cc8816', class: "input-label" }, this.label), h("div", { key: 'c775c0c0a9f4b6c78ba83ced6237a744b7d3cf20', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'aa5ce0bb5e3c56755bc6134a4328ce6294bda1ff', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '687cec4294e4cd10247db88caf157b33a3f16290', class: "input-suffix" }, this.suffix)))));
+        return (h(Host, { key: '8584ea0fa1a2cf0b9518ea978303837da5bfaf31' }, h("div", { key: 'e9f3ac340f17580221d1a86c8eb913fce2acdf49', class: "input-container" }, this.label && h("label", { key: 'b0d4c0250b07d83a3cd99e0ab18ed672a29de5f0', class: "input-label" }, this.label), h("div", { key: '5044bcff621d6c6850ef3d225608427401b75ebd', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'f8d057840e975d900c37a891268f39edb5128d49', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '4ae299b88798767b13e7126f88d3bd4703c91938', class: "input-suffix" }, this.suffix)))));
     }
     static get is() { return "kritzel-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-master-detail/kritzel-master-detail.js

@@ -90,15 +90,15 @@ export class KritzelMasterDetail {
         const selectedItem = this.items.find(item => item.id === this.selectedItemId);
         const panelId = 'master-detail-panel';
         const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
-        return (h(Host, { key: '59479b50a3e79ee854c75d78e1a41c1cb0551dab' }, h("div", { key: '0fdfa2d5a28c8f5800b2eeb80c545bdfcd252f6b', class: {
+        return (h(Host, { key: '6429c72aaf47f08ba0bdf5e64829b133339dafab' }, h("div", { key: '02e4616c67843632d2291abe347ee6ef7a660b12', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: 'f055346bdaf528e27136dffc680a5e2c6ddb95a7', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+            } }, h("nav", { key: '35cf3e8f97819a313fa6c57cde0faf05677997eb', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
                 'menu-item': true,
                 'is-selected': item.id === this.selectedItemId,
                 'is-disabled': !!item.disabled,
                 'is-focused': index === this.focusedIndex,
-            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '296ff692092eae9b73c673def66539aa4eb36053', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '72c65aa2825aa373daa3b1d6fd48d8dd84ab25f1', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '2241991dc0da3f53f77dc415e61f026a5734ad48', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '6ecdc24e462faf0d95e295d5536b44ea2f9181c9' })))));
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: 'cc7c69eb7ef02096fb76dbce310740d21019e72f', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: 'd10898c7eb8ec6d993024c7833e1f765a7b93079', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '5395af1bce2b91ade970ad68b1bb87b59e771dff', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '7a5a1ef33081c117f1b16f1da887577bd97d3681' })))));
     }
     static get is() { return "kritzel-master-detail"; }
     static get encapsulation() { return "shadow"; }

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

@@ -51,7 +51,7 @@ export class KritzelMenu {
         this.itemCloseChildMenu.emit(event.detail);
     };
     render() {
-        return (h(Host, { key: '2d6d46fc8135133ed3e42d65399c8549bc5f6bb5', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'b5b3910cc82f7cb451730792fe6e3b3a254036f3', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+        return (h(Host, { key: '4e4e510d2b1b5834ba12739d95e7c33268c005a6', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'ee60d7f4ceefda5fcdcfb64956b20d42b703c231', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
     }
     static get is() { return "kritzel-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-menu-item/kritzel-menu-item.js

@@ -90,12 +90,12 @@ export class KritzelMenuItem {
         ];
     }
     render() {
-        return (h(Host, { key: 'ae5057ce9101dc08e2365455c544914715be468e', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: 'ac91e3534c71074634ba053adc02f924e3fb5e14', tabIndex: this.item.isDisabled ? -1 : 0, class: {
                 'selected': this.item.isSelected,
                 'editing': this.item.isEditing,
                 'disabled': this.item.isDisabled,
                 'child-open': this.item.isChildMenuOpen,
-            }, onClick: this.handleItemSelect }, h("div", { key: '973fc68404ea95c2f0459565b8a3d124d31ae090', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: 'f49cf8a96f7394e244ce53d3933137325221d578', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
     }
     static get is() { return "kritzel-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-numeric-input/kritzel-numeric-input.js

@@ -86,7 +86,7 @@ export class KritzelNumericInput {
         this.valueChange.emit(newValue);
     };
     render() {
-        return (h(Host, { key: '18cd66a764c334a78e2dccd444f448235b41c38c' }, h("div", { key: '73305950e3e840e51466d720a2ef4f834a16adc1', class: "input-container" }, this.label && h("label", { key: 'f9521cb0137f5f8c676ced5c76989d8d03256f68', class: "input-label" }, this.label), h("div", { key: '07581a242db247a833cfa879b90c6da5dd06b116', class: "input-wrapper" }, h("input", { key: '7faa7a9a2c8923e2b2a24c435bc47a03998ac8ad', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'd3920c978a4d97032f5aec550e6ca7e74c9c2e94', class: "spinner-buttons" }, h("button", { key: 'ae27375f0ba66a9ca6cf53fe4a05fa219bf47711', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '8a6e40c12468bb44400c1ad015463c830d0af13e', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '70b8ee3cc3b00d7f83822078f73e0437e24a98aa', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'e26968c85480cbf4cd0f3bd9d6db59f1d6ade88c', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'a8c72dd2909b89ceb3797d0a77e531d0b5374e1d', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '16c95c8cbc90c9d49d081745384c3920620591fb', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        return (h(Host, { key: '3679786121f22a0aacb1b57701764b0bd0bf02f5' }, h("div", { key: 'e88251c356332f29d93f6a3d82f5154188243e4c', class: "input-container" }, this.label && h("label", { key: 'cb4d64a5acf94794a5876bc61dc13dd8159ad055', class: "input-label" }, this.label), h("div", { key: '9faad300f263e871322b68635feefb08172bd15c', class: "input-wrapper" }, h("input", { key: 'dd58ade6fe8454a3e4f67fddbb135d279f1147a8', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: 'a959beb441fe2143dc9c1c69347194e024362927', class: "spinner-buttons" }, h("button", { key: '6e2129f36080317e68b6fe1c05e69ea4e655fd20', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '47b5e178f82ef4eb6f2c5d888496ed95683c2f6d', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '6d5eb31ac5829b1e024822786beaafd347081c7e', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5a897f0b29ce89d5bd94327d2055753d06148c89', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '19ff176c07e1c2a18f708debc7c7f3953f2219cb', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '0c1289eb009b62ea36f7397811f553a4e7e669f6', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
     }
     static get is() { return "kritzel-numeric-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-opacity-slider/kritzel-opacity-slider.js

@@ -22,7 +22,7 @@ export class KritzelOpacitySlider {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: '988ad7b9ee8d3825c8577d951c6f1d00efbb45eb' }, h("div", { key: '4dad6a7d422333fbcaff55b2b374550b496a3adc', class: "opacity-container" }, h("div", { key: '7a0ceedd10f2e939dbf189410cc7263c7df498db', class: "slider-wrapper" }, h("input", { key: '453e8fbae27023fcbf3c453445fcb8567cb5db00', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+        return (h(Host, { key: '9b580f61b9113950b7dff5339879374f7882e1bd' }, h("div", { key: '80fb336580c49d4d7026993499b9c008ac2a4594', class: "opacity-container" }, h("div", { key: 'fcdd8e523d5f2ff4758a4839f2f43cbdabba4c5a', class: "slider-wrapper" }, h("input", { key: '914473676adc7cb8974c55b82ba1abf5b2787288', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
                 '--slider-progress': `${percentage}%`,
                 '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));

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

@@ -277,7 +277,7 @@ export class KritzelPortal {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (h(Host, { key: 'ea4b3c0bdaeb94a1aa03714537c3b68c972ad9c5', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'cd9060be1fbb801e3b72546d465576d5d79b3c82' })));
+        return (h(Host, { key: 'f4ee3156b094ff1126db417f8396ca6cd0eb9aa4', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '87812f4ddd50a29c8a76938e8778500a4873a30c' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-slide-toggle/kritzel-slide-toggle.js

@@ -21,7 +21,7 @@ export class KritzelSlideToggle {
         }
     };
     render() {
-        return (h(Host, { key: '8a1f816240f815905cc7def7cac92eb7ddac0df2', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: 'd5fa5091ad54032f81dad3879149c4d8ec7ea37b', class: "toggle-track" }, h("div", { key: 'cce0d61431ed65a26926b0a496a5c22eb4169577', class: "toggle-thumb" }))));
+        return (h(Host, { key: '92aefb30139abd512c02c99f5c532cb69daab8c3', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '53fc90f3a11055e0b16358be0e3beed2ed25bc48', class: "toggle-track" }, h("div", { key: 'e0a0cecb9ede9c8e932cbb6fa7cdc359c07be8db', class: "toggle-thumb" }))));
     }
     static get is() { return "kritzel-slide-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-split-button/kritzel-split-button.js

@@ -82,7 +82,7 @@ export class KritzelSplitButton {
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '794fdb5cb4d110d93b6b2cb060fe34241f29db57', class: { mobile: this.isTouchDevice } }, h("button", { key: '7202a40f05bf6fc256996a05db55bcfa3baba615', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '3156c6c4e757d9ebbd3f5e3719ee1bf9bf81f71b', name: this.buttonIcon })), h("div", { key: '4c5a3a9791ecfd00d36fc0eb885c1d227200cfc7', class: "split-divider" }), h("button", { key: 'fe0ee44d11ddb34f7719b986406905c47bc1f152', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: 'b3d84e4599dc408ccc8afe17e487b501cbde89a4', name: this.dropdownIcon })), h("kritzel-portal", { key: '6800329ebe3c94a661e9ad852b6bf256defc291f', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0c98abe2327e0cc3182a55caf50c89316b526049', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: '39516b2486a27534273b6bf4def6b11790aa0ed5', class: { mobile: this.isTouchDevice } }, h("button", { key: '19c4a58deb3992857b0e42e4a035a15d0980da22', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '4c8e7e09e60717b1653251468c2a25d41c4b1921', name: this.buttonIcon })), h("div", { key: '53617db6b630dfb5320e7309dcbc9f7288ff8974', class: "split-divider" }), h("button", { key: '5134f88ed43558ff0cb11b8ef29cf2b370aad4ee', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled, "aria-label": "Open menu" }, h("kritzel-icon", { key: '41f39a601ae91d4faaf54c1ca39c90e27e084d31', name: this.dropdownIcon })), h("kritzel-portal", { key: 'dcfe82f72a53e9346b48d2ff6da236c1f1344f3f', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '1208990bff47de642eafa6ca8cfaa76de46ca87c', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
     static get is() { return "kritzel-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-stroke-size/kritzel-stroke-size.js

@@ -8,7 +8,8 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '514d87732c9b15cddd5a905407ff7ce9069c06d7' }, h("div", { key: '170c9a8abfe8298116d8a269338da95fbc2aac7b', class: "size-grid" }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: '20c11daaf60055262706b8177b1090bddd2d522c' }, h("div", { key: '1729e29d836f85fe3be984a5ee78a0debc0e6218', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));

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

@@ -128,14 +128,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: '10bff4d14ff1f724d59463afc059f254e9485175', style: {
+        return (h(Host, { key: '57c0c2ddbe3f88815b975b7cf5b02c7da389b7f9', 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: '6bfc8f2fe731d758c74319abeb82c4b84616f8b6', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '2a92ad23f4424b2d17035f86983be66a81fee81d' }))));
+            } }, h("div", { key: '3ab17ef4ba55ed39458814685574b0c00504a07d', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'b0aa1eb2c9363644939bcc59a80d0294787f0946' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-back-to-content/kritzel-back-to-content.js

@@ -16,7 +16,7 @@ export class KritzelBackToContent {
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: 'b623a9a4e4b8fce50346771488a59c3a646c289e' }, h("button", { key: 'b2f6b257975639d33362f1038b61e5147963f189', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '22f34fc201a865b6d9b21775a349d0e185727d48', name: "chevrons-left" }))));
+        return (h(Host, { key: '5ef034156f28bdd1861d99343d51a237498db46b' }, h("button", { key: 'caa1c08d04f1a3a84d694b7df5d318a686d3a1fb', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '0c7cf5e18294ade600be3052ca7c57c8d933a736', name: "chevrons-left" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,6 +12,8 @@ export class KritzelControls {
     isUtilityPanelVisible = true;
     undoState = null;
     theme = 'light';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     isControlsReady;
     firstConfig = null;
     isTouchDevice = KritzelDevicesHelper.isTouchDevice();
@@ -231,13 +233,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: '0f40a136a6a9556080d922d346318045794421a8', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: '7247a377d1cb75153e35f5308e81b2bd00d98578', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd543e7575cb30e54d9362eddf7c7221fb8cce5f5', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '075577cd15f3e577a1a216b5b1f1874e82e0d123', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1083380152e9d1b51c35da335533c20ca2ca8fcc', class: "kritzel-controls" }, h("div", { key: '11ef0fb76c30ffda0e30f01d43229ca2142a5854', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '269924a8859aece37ff31202307d4feaecbbde86', 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: '7fb1041763c7b64917e337d68bbb29b36ed86b9a', class: "kritzel-controls" }, h("div", { key: '8577ed9c6f43a667aaba7dce1da519456c8ad210', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '42f8f2b85055705674f9e319056bd48856dbd197', 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);
@@ -267,10 +269,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: '8b97a5bba3ac4992482e8f433d7ba6197918a914', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '20007273e0f701193502320cf58099cbaedb834e', 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: 'd9adef8c2acc8d9b9d745174050ce78960b89b58', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '7605bbd2b6335c89c57aa68952293f26efad6b4b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '27b0f41442215e78b692fa44bb665444a4993b89', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '1fb5979b1c531593acf5086861b22b7d78d03e8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '2901fc2507e5b02fbd603bd2d2a4e2b07e35c970', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '653e6a9b49146a2f297dbb5b9debe8709efd59ad', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '6fae38444dff1978647e111643ee6e29c9cc1653', 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: '951a52f625c929634de5102b83a14ad0cf1abc8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -279,7 +281,7 @@ export class KritzelControls {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '3713ef344630f6b4d88df2e83992018859ddb18c', class: "color-container" }, h("kritzel-color", { key: 'c2679f68efae77c6daeb98be9e03d5320d51a73a', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: 'b8fff73b9055e86b312a9f0798fff4177cf85970', class: "color-container" }, h("kritzel-color", { key: 'fcd474e557d887f94383b7e583ab1c95a675ce23', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -440,6 +442,39 @@ export class KritzelControls {
                 "reflect": false,
                 "attribute": "theme",
                 "defaultValue": "'light'"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"engine.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }

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

@@ -9,13 +9,15 @@ export class KritzelCurrentUser {
      * Avatar size in pixels
      */
     avatarSize = 40;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     dialogRef;
     handleAvatarClick = (event) => {
         event.stopPropagation();
         this.dialogRef?.open();
     };
     render() {
-        return (h(Host, { key: 'a735cb9f16f4898fde0b52573affa2d270a8f1de' }, h("kritzel-avatar", { key: 'd449a515182718ab4ef3b26b2277696bbc7ab46f', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '3542f6df43c9924218e344f70bdc398c74a8eae6', ref: el => (this.dialogRef = el), user: this.user })));
+        return (h(Host, { key: '7e45048e532db84347e2531de2df19f5537d62ca' }, h("kritzel-avatar", { key: '5a67d1dbae041e16cdaeaf4bc678b6b00c56f442', user: this.user, size: this.avatarSize, onClick: this.handleAvatarClick }), h("kritzel-current-user-dialog", { key: '8e35219e282811b8bbafb058c02c8c0474574009', ref: el => (this.dialogRef = el), user: this.user, terms: this.terms })));
     }
     static get is() { return "kritzel-current-user"; }
     static get encapsulation() { return "shadow"; }
@@ -74,6 +76,39 @@ export class KritzelCurrentUser {
                 "reflect": false,
                 "attribute": "avatar-size",
                 "defaultValue": "40"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"engine.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }

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

@@ -2,6 +2,8 @@ import { Host, h } from "@stencil/core";
 export class KritzelCurrentUserDialog {
     host;
     user;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
     isDialogOpen = false;
     async open() {
         this.isDialogOpen = true;
@@ -21,7 +23,7 @@ export class KritzelCurrentUserDialog {
     }
     render() {
         const displayName = this.getDisplayName();
-        return (h(Host, { key: '40c1a1bed0ddf02f9835199b5f7d2363e4d1902b' }, h("kritzel-dialog", { key: 'a83c09eac66ddf51155591a32245e3f15e34943e', dialogTitle: "Account", isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '14f7100a881ee3c5ba6b672d509bf3a9161ccd62', class: "user-info" }, h("kritzel-avatar", { key: 'e3552a80db81db4c26f81c6cc699363afa6153ea', user: this.user, size: 80 }), displayName && h("div", { key: 'c54164be605ac2bd2fc8bac6bb4481f820119028', class: "user-name" }, displayName), this.user?.email && h("div", { key: 'e6af7c44e45443eb24be0777768de96b0e3d249e', class: "user-email" }, this.user.email)))));
+        return (h(Host, { key: '7c9e5c19249d400e2d670c60f5d6716c742adc62' }, h("kritzel-dialog", { key: '811da6bff0ce03914f545dd289878ba04924e85c', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '03a101b04d61882732547d91e81a2bacb3aa4df8', class: "user-info" }, h("kritzel-avatar", { key: '4033d0e2322d7a25231f01115ec33f20e4fb0d4c', user: this.user, size: 80 }), displayName && h("div", { key: 'cf3a3aecb84152736c9de119f82a79f1b2b32f6f', class: "user-name" }, displayName), this.user?.email && h("div", { key: '5725d71dd80468c64a2b0bb1d9d967232513fb63', class: "user-email" }, this.user.email)))));
     }
     static get is() { return "kritzel-current-user-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -60,6 +62,39 @@ export class KritzelCurrentUserDialog {
                 },
                 "getter": false,
                 "setter": false
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"engine.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "../../../interfaces/localization.interface",
+                            "id": "src/interfaces/localization.interface.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }