kritzel-stencil 0.3.8 → 0.3.10

package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.js

@@ -14,7 +14,7 @@ export class KritzelBrushStyle {
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '126d6ebbd4b90eef936ccb90905da373a5f9b3ac' }, h("kritzel-dropdown", { key: '22e8e49b74c43b410384e247d4b0c779b1ee7b2e', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: '0b00fc066db7a2afb5ab101bc20badbb8c065d4a', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'ed074981009c37c86a22cbc70656663060c22553', name: this.type, size: 16 })))));
+        return (h(Host, { key: '7b05e93ce8d28c23503e4ca358a487165169f1ad' }, h("kritzel-dropdown", { key: 'a8f2f30762b339411cd3995482c3bc658855f749', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ac06462897a0fbd5011533095fafb7491a75508a', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'caee4c657c7fee478b1038ebd2ef3b502cf73e5e', name: this.type, size: 16 })))));
     }
     static get is() { return "kritzel-brush-style"; }
     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: 'aa82a9e0c6c39b0b2bce597ac2e864049543d474' }, h("button", { key: '5bda14f9fef89abacb9cd04e5aaa8ae7ae25048a', type: this.type, class: {
+        return (h(Host, { key: 'c915db75630392741de404f07265a391330e54ca' }, h("button", { key: '50248ee1ed5862c9ea72b4f7cf7d564d03b5b14e', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8585675eec39345ddfbf3f6dbb705035f7a5d099' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'd595cd819c7c0a3550e468ce65d4e2c28cc02164' }))));
     }
     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: 'a740b94f2baacb978b26deae1ea1057c7faf9036' }, h("div", { key: 'e82f83a23e44a2ff23b5efbfac28e4c47cd5b749', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'c4c1fe2559aca61557ff2e8154f4d46ce3511b30' }, h("div", { key: '158c243018763a9609e0a056229263864a5e4d13', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: 'd83e2be171f89ee4cd53e8cf83ab6591f585129f', class: {
+            } }, h("div", { key: 'afa21c72b17ab5fb4b16521b91dbe7e9162d05f8', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {
@@ -102,14 +102,14 @@ export class KritzelColorComponent {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ThemeMode",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
                     "references": {
-                        "ThemeMode": {
+                        "ThemeName": {
                             "location": "import",
-                            "path": "../../../constants/color-palette.constants",
-                            "id": "src/constants/color-palette.constants.ts::ThemeMode",
-                            "referenceLocation": "ThemeMode"
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
                         }
                     }
                 },

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: 'a2c996d16a44f66471f6f76e08129142fc9f5ddb' }, h("div", { key: '245f4b9ff50412b84ede221d22b0894a104a6895', class: {
+        return (h(Host, { key: 'fc57d77d7c4cfd2aa2a02a70b8991858bb8cf61b' }, h("div", { key: '4fd10783609882f453ce95f5114acf799f21ec52', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {
@@ -173,14 +173,14 @@ export class KritzelColorPalette {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "ThemeMode",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "ThemeName",
+                    "resolved": "\"dark\" | \"light\" | string & {}",
                     "references": {
-                        "ThemeMode": {
+                        "ThemeName": {
                             "location": "import",
-                            "path": "../../../constants/color-palette.constants",
-                            "id": "src/constants/color-palette.constants.ts::ThemeMode",
-                            "referenceLocation": "ThemeMode"
+                            "path": "../../../interfaces/theme.interface",
+                            "id": "src/interfaces/theme.interface.ts::ThemeName",
+                            "referenceLocation": "ThemeName"
                         }
                     }
                 },

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

@@ -53,13 +53,13 @@ export class KritzelDropdown {
     }
     updateInternalValue(proposedValue, emitChange) {
         let finalValue = proposedValue;
-        if (this.options && this.options.length > 0) {
-            const isValidValue = this.options.some(opt => opt.value === finalValue);
-            if (!finalValue || !isValidValue) {
-                finalValue = this.options[0].value;
-            }
+        // Only fall back to an option if the proposed value is completely missing.
+        // We intentionally don't sanitize invalid values here, to allow for values 
+        // that might be added to options asynchronously later (preventing race conditions).
+        if (!finalValue && this.options && this.options.length > 0) {
+            finalValue = this.options[0].value;
         }
-        else {
+        else if (!finalValue) {
             finalValue = undefined;
         }
         if (this.internalValue !== finalValue) {
@@ -231,7 +231,7 @@ export class KritzelDropdown {
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (h(Host, { key: 'ac4dc8a445f79fa68555756a4ac26ba174a13eaa' }, h("div", { key: '1c73835be42e6a289657920ef33c2a53c183913d', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'ac73d76b5e24e2f2740113523524bc00d1c98d02', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'e1e71c68a8abb2cf0dc2b9314e05d1170c0bb5b3', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '74588e1ff661f8f86318a2ed9bb53192ad96bacd', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '432f694526e20e1e6abb6721f12aa246471d830d', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '81f7d98f78201910f4427a7c442172d0283de45b', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '18db309dc145718fbb3d51e44058e3bfa96b0d27', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '32af6ce9a1f045c2ce3b205b1b1dc1fe1a80e227', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b37cd43daa06424ea7b7951929352154f7d1ea0f', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0e673d4e09e007a4c93ed6a992dddeb8eba33e91', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
             const isSelected = option.value === this.internalValue;
             const isFocused = index === this.focusedIndex;
             const optionClasses = {

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: 'bcff1827a61df6896e49fe1df4819bf27b3610ef' }, h("div", { key: '53a03532afde5fca6e8ec1cc78e6cd41ab1444cd', class: "font-preview", style: {
+        return (h(Host, { key: '6eef9e7df004469faeeaf458d9b9967f94f8536d' }, h("div", { key: '9926c54a57245c40d605077e191f62cebf3700b1', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color

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

@@ -31,7 +31,7 @@ export class KritzelFontFamily {
             label: option.label,
             style: { fontFamily: option.value },
         }));
-        return (h(Host, { key: '3d942116fc1019f1b2982395a08b14a9b0081040' }, h("kritzel-dropdown", { key: 'a042505de2d9b27c6f77ed929496a3921c3170cd', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
+        return (h(Host, { key: '0123dbdff9b7051d2ebc9dcf8d1f9c7c4c161dc4' }, h("kritzel-dropdown", { key: '5d4e289161502ecc60cef3d0c6d546a64817a12a', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } })));
     }
     static get is() { return "kritzel-font-family"; }
     static get encapsulation() { return "shadow"; }

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

@@ -16,7 +16,7 @@ export class KritzelFontSize {
     }
     render() {
         const color = 'var(--kritzel-global-text-primary)';
-        return (h(Host, { key: 'c409d73ff06966fd3861a16c7de32d41db85c12a' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'efb5ad516a0ebfea0fee5c78a1d3b4d0af4a6bc9' }, this.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: 'e482edcbaf7cee8c35effbce0428c2b4dea84bd4' }, h("div", { key: 'a71f5e3eeba5e34470227ea3be4dd6731a94a52e', class: "input-container" }, this.label && h("label", { key: '757a32997f09558412952fe948fa234d1baecb3f', class: "input-label" }, this.label), h("div", { key: 'cfb13fe0041efdd9fe4a7bf2a098ff321b545b79', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: 'b8bf209f14f15f4ad8eb0cf1be1afb1bfc958f79', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: 'b5d4444609ad93c10d86978a488252b673979c94', class: "input-suffix" }, this.suffix)))));
+        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)))));
     }
     static get is() { return "kritzel-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-line-endings/kritzel-line-endings.js

@@ -65,10 +65,10 @@ export class KritzelLineEndings {
     render() {
         const startEnding = this.getStartEnding();
         const endEnding = this.getEndEnding();
-        return (h(Host, { key: '38bcd0b0e56c0d0fc7fd57346b718054faa0ba06' }, h("div", { key: '5ae52039756334299a86d7301b15f6874d5689ff', class: "endings-section" }, h("div", { key: '8a0dd7792498248203f2db8c346828fe7f57534d', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+        return (h(Host, { key: '60115b8a2840ffe21e0846fdc2678c6ba24b22c0' }, h("div", { key: '3b63aa05ca78699172c645fdd404efdc55bc4536', class: "endings-section" }, h("div", { key: '9538369e8d2bb26600d6054ddbbc13d6c960bd56', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
                 'ending-option': true,
                 'selected': startEnding === type,
-            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: '001c6cc50af45e1461ef15e2c43df4efdd83b48f', class: "endings-section" }, h("div", { key: '96cc57da4bed38aa42207d40a6a21cd39fa18cad', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
+            }, onClick: () => this.handleStartChange(type), title: type === 'none' ? 'No start arrow' : `${type} start arrow` }, this.renderEndingIcon(type, true)))))), h("div", { key: 'ecec29740c09a61190938bab4955ccde6b84cfa2', class: "endings-section" }, h("div", { key: 'ea054597c3e3566e7921f2c04c07d74e4f4331a1', class: "endings-row" }, this.styles.map(type => (h("button", { class: {
                 'ending-option': true,
                 'selected': endEnding === type,
             }, onClick: () => this.handleEndChange(type), title: type === 'none' ? 'No end arrow' : `${type} end arrow` }, this.renderEndingIcon(type, false))))))));

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: '7f1fd360f657fddcdb6ce2eea17e4e2daf426eb2' }, h("div", { key: '02f7f6dd141d057dbf395dd836f7841a649fa16d', class: {
+        return (h(Host, { key: '59479b50a3e79ee854c75d78e1a41c1cb0551dab' }, h("div", { key: '0fdfa2d5a28c8f5800b2eeb80c545bdfcd252f6b', class: {
                 'master-detail-container': true,
                 'is-mobile-detail-visible': this.showMobileDetail,
-            } }, h("nav", { key: '397758627252c5e9573a61c457d4481df6d9b4f2', 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: '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: {
                 '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: '65cc4601a39cb7780c52cc86075efd0b4a24646a', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '6b6ae9ac689c757d71e2a42ecaf8aaceb3785154', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '28d9b2f68030587d44505f691e8fed57d968e631', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '2a35ca82717713808ca12227ecca671b848d1f02' })))));
+            }, 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' })))));
     }
     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: 'a81ea8a1fe2dc6cb8d9f395cafbcadec3eb4aa45', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'bb27d7a923431d79567e79283e505ea4ae02ef36', 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: '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 })))));
     }
     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: '6fd639ff533e0b2c39febd369b4ba034661ec708', tabIndex: this.item.isDisabled ? -1 : 0, class: {
+        return (h(Host, { key: 'ae5057ce9101dc08e2365455c544914715be468e', 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: 'd7486e9f1614be1801268fa97947aaab4c12460d', class: "menu-item-overlay" }), this.item.isEditing ? this.renderEditMode() : this.renderViewMode()));
+            }, onClick: this.handleItemSelect }, h("div", { key: '973fc68404ea95c2f0459565b8a3d124d31ae090', 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: 'b27f16d562bc6c61b0a6a289e622e7e35159a782' }, h("div", { key: '7f5f2295a60b46dc05c003b10ff74e9da6822406', class: "input-container" }, this.label && h("label", { key: 'a5a10af06139312ef0b038ed8c3bb533afa6235c', class: "input-label" }, this.label), h("div", { key: 'b15b4a2d84ad1185a67cd748176c7585a0789f09', class: "input-wrapper" }, h("input", { key: '8da76a405713461ef4eb2f316af6b737493371dd', 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: '9813f61998a8902d9a1bc4100dbab744e91e98f8', class: "spinner-buttons" }, h("button", { key: 'ad688c3332b0dbdd6327c66aed778d3e0d036aab', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: 'a21ec61f331a7b672d2ce56cd2d1b30e7f0b22c6', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'f36b4f68ea3733851bebce1e9f45a1f36e62acdc', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '484373581f26b6cf71194bf545d67997ef7db79f', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '5b9199c270ad270729b9f5c1c9246824e1d49cb8', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'd96e78c311bbc941edfafcb02017da7c367aaf2e', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+        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" }))))))));
     }
     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,8 +22,9 @@ export class KritzelOpacitySlider {
     }
     render() {
         const percentage = this.getPercentage();
-        return (h(Host, { key: 'f6460d2d37ca76c69c62597b32f7567c8a2e1b77' }, h("div", { key: '09cb87f8e7e09639b4b794f9c9b30da024a4023f', class: "opacity-container" }, h("div", { key: '783cd792f0511945f685483a181b621f3c2551f8', class: "slider-wrapper" }, h("input", { key: 'd05be4ab1a2a2b19411b12358b7846bebac83a83', 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: '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: {
                 '--slider-progress': `${percentage}%`,
+                '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
             } })))));
     }
     static get is() { return "kritzel-opacity-slider"; }

package/dist/collection/components/shared/kritzel-pill-tabs/kritzel-pill-tabs.js

@@ -50,7 +50,7 @@ export class KritzelPillTabs {
         buttons?.[newIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: 'cd6993107010e578b91af23101da27bd2ef943cd' }, h("div", { key: '509c023b5bf91de1f463c8e080b83216a94d7d64', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
+        return (h(Host, { key: 'f02f93ada5ec002695b62f511c847de201a8cbe4' }, h("div", { key: 'bb08ae773f1b993cb330556a5778d71fc5e91ce1', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
                 'pill-tab': true,
                 'selected': this.value === tab.id,
             }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));

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: 'dcd8e6f3787c713012aeb6436bf63f2f4930c39e', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '830f51521a77f0a28471026494323e14ab4f9f9a' })));
+        return (h(Host, { key: 'ea4b3c0bdaeb94a1aa03714537c3b68c972ad9c5', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'cd9060be1fbb801e3b72546d465576d5d79b3c82' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-shape-fill/kritzel-shape-fill.js

@@ -16,10 +16,10 @@ export class KritzelShapeFill {
         return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
     }
     render() {
-        return (h(Host, { key: '5f915acf7a98ac585f5aba494981cbbb38252c93' }, h("div", { key: 'e8a7fd9a1611d5cace9fbf73c1421b211a8b7d89', class: "fill-row" }, h("button", { key: 'cbd388e362c94e36220e93f55fd0140a774e0bd7', class: {
+        return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
                 'fill-option': true,
                 'selected': this.value === 'transparent',
-            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '532eec1936f973eb2fb44c15839400e53ac4f4f7', class: {
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
                 'fill-option': true,
                 'selected': this.value === 'filled',
             }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));

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

@@ -21,7 +21,7 @@ export class KritzelSlideToggle {
         }
     };
     render() {
-        return (h(Host, { key: '376beaa4424858c3aaf1466797663024889c0f73', 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: '2108fe8de84e0b9a619667b5ab4f57215c185375', class: "toggle-track" }, h("div", { key: 'ff8253ce660ca62313dea3034ac4980135eaac88', class: "toggle-thumb" }))));
+        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" }))));
     }
     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: '1ec4c6806f5ff020d675b34f32efeecf6ddf40ab', class: { mobile: this.isTouchDevice } }, h("button", { key: '11deb29bfc899fb2aa4d98c5bc615a8e0dfc56f9', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled, "aria-label": "Main action" }, this.buttonIcon && h("kritzel-icon", { key: '46b0a1cea4528d5565c5ab17a2966fc15e2c00cb', name: this.buttonIcon })), h("div", { key: '6efd2cc0c64c4af734d1071c98c59afdfcc49067', class: "split-divider" }), h("button", { key: 'ed0cb5af95404a18ec335348d7e3af9dc6565bca', 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: '72a83a39b8dd60468800befe85763574e19c3e20', name: this.dropdownIcon })), h("kritzel-portal", { key: 'f014876c36faef4b59db720b645ed6d30615df77', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '3c16b2828d68ec64d6fe571865dbfbd80d09b40e', 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: '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 }))));
     }
     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,7 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'f964d37a6cbfa48898ac066859165df1492535a9' }, h("div", { key: 'fed8ec5ddbe07d64beb151b22211fecdc0a278d1', class: "size-grid" }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: '514d87732c9b15cddd5a905407ff7ce9069c06d7' }, h("div", { key: '170c9a8abfe8298116d8a269338da95fbc2aac7b', class: "size-grid" }, this.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: '647f4d837fc06a3b5dca8896383c1a92ef7c5a3d', style: {
+        return (h(Host, { key: '10bff4d14ff1f724d59463afc059f254e9485175', 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: '41b32207d1e9f84c85c054a8aae4727b7df05d62', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'c164d76762957e60d904458d7a34936944d02eae' }))));
+            } }, h("div", { key: '6bfc8f2fe731d758c74319abeb82c4b84616f8b6', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: '2a92ad23f4424b2d17035f86983be66a81fee81d' }))));
     }
     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: '7d33e599832eb5e4f65b9fdbb9239cfe157733af' }, h("button", { key: '905b50a8a90a0ca66a4fa9421457b78a0f650de5', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: 'eaa718ab29fad870464c6b67d5ad27c4300dfd54', name: "chevrons-left" }))));
+        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" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }