kritzel-stencil 0.0.127 → 0.0.128

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

@@ -0,0 +1,324 @@
+import { h, Host } from "@stencil/core";
+export class KritzelSplitButton {
+    constructor() {
+        this.dropdownIcon = 'chevron-down';
+        this.options = [];
+        this.disabled = false;
+        this.activeItemIndex = null;
+        this.editingIndex = null;
+        this.isMenuOpen = false;
+        this.handleDocumentClick = (event) => {
+            const path = (event.composedPath && event.composedPath()) || [];
+            const clickedInside = path.some(node => (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-SPLIT-BUTTON' || (node === null || node === void 0 ? void 0 : node.tagName) === 'KRITZEL-MENU');
+            if (!clickedInside) {
+                this.closeMenu();
+            }
+            else if (this.isMenuOpen) {
+                document.addEventListener('click', this.handleDocumentClick, { once: true });
+            }
+        };
+        this.toggleMenu = () => {
+            if (this.isMenuOpen) {
+                this.closeMenu();
+            }
+            else {
+                this.openMenu();
+            }
+        };
+        this.handleButtonClick = () => {
+            if (!this.disabled) {
+                this.buttonClick.emit();
+            }
+        };
+    }
+    async openMenu() {
+        if (this.disabled || this.isMenuOpen)
+            return;
+        this.isMenuOpen = true;
+        this.menuOpened.emit();
+        document.addEventListener('click', this.handleDocumentClick, { once: true });
+    }
+    async closeMenu() {
+        if (this.disabled || !this.isMenuOpen)
+            return;
+        this.isMenuOpen = false;
+        this.menuClosed.emit();
+        this.host.focus();
+    }
+    render() {
+        return (h(Host, { key: 'cf133b2867dffe6b9d70259c7d44b86342411d38', tabIndex: 0 }, h("button", { key: '3044cd9cbe02dde919a276b9f1d8f1f24b8514e9', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.disabled }, this.buttonIcon && h("kritzel-icon", { key: '4ed314f7288df567bb35a909c4919cf353788dd2', name: this.buttonIcon }), this.buttonText && (h("span", { key: '68b2148200e4698468aae137d16a4b5f17764f9f' }, this.buttonText, " (", this.options.length, ")"))), h("div", { key: '5047a2aea1d31e80fba8f6350e4b64572198c87d', class: "split-divider" }), h("button", { key: 'd7b33d9c717553d7cff3c3d2fafe90ce9dce1e67', ref: el => (this.splitMenuButton = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.disabled }, h("kritzel-icon", { key: 'a3d485aee5e9843c2d07d367a0d5743bfc8f3d5c', name: this.dropdownIcon })), h("kritzel-portal", { key: '2bb8f5c58884e6c73d3d7025a8e6efce770ab039', anchor: this.host, offsetY: 4 }, this.isMenuOpen && (h("kritzel-menu", { key: '3f2bb51a43ec78ff8664d5f625afa21cf9ecfb8c', style: { maxHeight: '300px', width: '180px' }, items: this.options, activeItemIndex: this.activeItemIndex, editingIndex: this.editingIndex, onClose: () => this.closeMenu() })))));
+    }
+    static get is() { return "kritzel-split-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-split-button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-split-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "buttonText": {
+                "type": "string",
+                "attribute": "button-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonIcon": {
+                "type": "string",
+                "attribute": "button-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "dropdownIcon": {
+                "type": "string",
+                "attribute": "dropdown-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'chevron-down'"
+            },
+            "options": {
+                "type": "unknown",
+                "attribute": "options",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelMenuItem[]",
+                    "resolved": "KritzelMenuItem<any>[]",
+                    "references": {
+                        "KritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::KritzelMenuItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "activeItemIndex": {
+                "type": "number",
+                "attribute": "active-item-index",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "editingIndex": {
+                "type": "number",
+                "attribute": "editing-index",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isMenuOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "optionSelect",
+                "name": "optionSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "KritzelMenuItem",
+                    "resolved": "KritzelMenuItem<any>",
+                    "references": {
+                        "KritzelMenuItem": {
+                            "location": "import",
+                            "path": "../../../interfaces/menu-item.interface",
+                            "id": "src/interfaces/menu-item.interface.ts::KritzelMenuItem"
+                        }
+                    }
+                }
+            }, {
+                "method": "menuOpened",
+                "name": "menuOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "menuClosed",
+                "name": "menuClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeMenu": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=kritzel-split-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kritzel-split-button.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelMenuItem } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-split-button',\r\n  styleUrl: 'kritzel-split-button.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n  @Prop()\r\n  buttonText: string;\r\n\r\n  @Prop()\r\n  buttonIcon: string;\r\n\r\n  @Prop()\r\n  dropdownIcon = 'chevron-down';\r\n\r\n  @Prop()\r\n  options: KritzelMenuItem[] = [];\r\n\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  @Prop()\r\n  activeItemIndex: number | null = null;\r\n\r\n  @Prop()\r\n  editingIndex: number | null = null;\r\n\r\n  @State()\r\n  isMenuOpen = false;\r\n\r\n  @Event()\r\n  buttonClick: EventEmitter<void>;\r\n\r\n  @Event()\r\n  optionSelect: EventEmitter<KritzelMenuItem>;\r\n\r\n  @Event()\r\n  menuOpened: EventEmitter<void>;\r\n\r\n  @Event()\r\n  menuClosed: EventEmitter<void>;\r\n\r\n  @Element()\r\n  host!: HTMLElement;\r\n\r\n  splitMenuButton: HTMLButtonElement;\r\n\r\n  @Method()\r\n  async openMenu() {\r\n    if (this.disabled || this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = true;\r\n    this.menuOpened.emit();\r\n    document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n  }\r\n\r\n  @Method()\r\n  async closeMenu() {\r\n    if (this.disabled || !this.isMenuOpen) return;\r\n\r\n    this.isMenuOpen = false;\r\n    this.menuClosed.emit();\r\n\r\n    this.host.focus();\r\n  }\r\n\r\n  private handleDocumentClick = (event: MouseEvent) => {\r\n    const path = (event.composedPath && event.composedPath()) || [];\r\n    const clickedInside = path.some(node => (node as HTMLElement)?.tagName === 'KRITZEL-SPLIT-BUTTON' || (node as HTMLElement)?.tagName === 'KRITZEL-MENU');\r\n\r\n    if (!clickedInside) {\r\n      this.closeMenu();\r\n    } else if (this.isMenuOpen) {\r\n      document.addEventListener('click', this.handleDocumentClick, { once: true });\r\n    }\r\n  };\r\n\r\n  private toggleMenu = () => {\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu();\r\n    }\r\n  };\r\n\r\n  private handleButtonClick = () => {\r\n    if (!this.disabled) {\r\n      this.buttonClick.emit();\r\n    }\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host tabIndex={0}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.disabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n          {this.buttonText && (\r\n            <span>\r\n              {this.buttonText} ({this.options.length})\r\n            </span>\r\n          )}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButton = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.disabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.host} offsetY={4}>\r\n          {this.isMenuOpen && (\r\n            <kritzel-menu\r\n              style={{ maxHeight: '300px', width: '180px' }}\r\n              items={this.options}\r\n              activeItemIndex={this.activeItemIndex}\r\n              editingIndex={this.editingIndex}\r\n              onClose={() => this.closeMenu()}\r\n            ></kritzel-menu>\r\n          )}\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -19,10 +19,10 @@
 }
 
 .size-container:hover {
-  background-color: var(--kritzel-stroke-size-hover-background-color, #f0f0f0);
+  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);
 }
 
 .size-container.selected {
   border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-stroke-size-selected-background-color, #f0f0f0);
+  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);
 }

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

@@ -9,7 +9,7 @@ export class KritzelStrokeSize {
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: 'b481b62184551bc776042f58d2f27beba837f61d' }, this.sizes.map(size => (h("div", { class: {
+        return (h(Host, { key: '0185d3243c35c49169324c98f87df6a286fc3d31' }, this.sizes.map(size => (h("div", { class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));

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

@@ -37,23 +37,23 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'aed123eda0750df66229f0dd40eeafea39360901', style: {
+        return (h(Host, { key: '7610e8185e037813cc363daa3212a4164a20daaf', 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.isMobileView ? `${this.positionX}px` : '50%',
                 marginBottom: `${this.offsetY + this.arrowSize}px`,
-            } }, h("div", { key: 'ebd77cc44aea3a3ff193717f2dae7eedb55023fd', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '70966228bbe59b894eb472704f08b340c32bbad9' }), h("div", { key: '0d82c0f5b1531b39e48b9e80045771e3dda53964', class: "tooltip-arrow-wrapper", style: {
+            } }, h("div", { key: 'bd5c1f0f7ff3afddfcf2469277189d026e79b453', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '547e5a8fcb8131225461881a1ad0125fa4b0d55b' }), h("div", { key: 'de1d30c31667a81a36873d32bec20fcc911ec89f', class: "tooltip-arrow-wrapper", style: {
                 position: 'fixed',
                 left: this.arrowOffset,
                 bottom: `-${this.arrowSize * 2}px`,
-            } }, h("div", { key: '24b911e6fe5b5b9a1009d28c797c4c3d00f6f7c7', class: "tooltip-arrow", style: {
+            } }, h("div", { key: 'ebbf83bd4d35e252b0258a7c81ebcef48ac10004', class: "tooltip-arrow", style: {
                 borderLeft: `${this.arrowSize}px solid transparent`,
                 borderRight: `${this.arrowSize}px solid transparent`,
                 borderTop: `${this.arrowSize}px solid var(--kritzel-controls-tooltip-background-color, #ffffff)`,
                 filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2))',
-            } }), h("div", { key: '2a15c5e8614e57a763aa3d8d4f8d4138146ac0a7', class: "tooltip-arrow-rect", style: {
+            } }), h("div", { key: '918ca46c438657dc4f72ccc73f81d58076d637c5', class: "tooltip-arrow-rect", style: {
                 position: 'relative',
                 width: `${this.arrowSize * 2}px`,
                 height: `${this.arrowSize}px`,

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.css

@@ -8,7 +8,7 @@
   background-color: var(--kritzel-context-menu-background-color, #ffffff);
   border-radius: var(--kritzel-context-menu-border-radius, 12px);
   box-shadow: var(--kritzel-context-menu-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
-  border: var(--kritzel-context-menu-border, 1px solid #f0f0f0);
+  border: var(--kritzel-context-menu-border, 1px solid #ebebeb);
   padding: var(--kritzel-context-menu-padding,4px);
 }
 

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js

@@ -1,77 +1,41 @@
 import { Host, h } from "@stencil/core";
 export class KritzelContextMenu {
     constructor() {
-        this.disabledStates = new Map();
-        this.visibleItems = [];
+        this.processedItems = [];
     }
     componentWillLoad() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
+        this.updateMenuItems();
     }
     onItemsChanged() {
-        this.resolveVisibleItems();
-        this.resolveDisabledStates();
+        this.updateMenuItems();
     }
-    handleItemClick(item, index) {
-        if (!this.disabledStates.get(index)) {
+    handleItemClick(item, isDisabled) {
+        if (!isDisabled) {
             this.actionSelected.emit(item);
         }
     }
-    async resolveVisibleItems() {
-        const visibleItems = [];
-        const visibilityPromises = this.items.map(async (item, index) => {
-            let isVisible = true;
-            if (item.visible !== undefined) {
-                if (typeof item.visible === 'boolean') {
-                    isVisible = item.visible;
-                }
-                else if (typeof item.visible === 'function') {
-                    const result = item.visible(null, this.objects);
-                    if (result instanceof Promise) {
-                        isVisible = await result;
-                    }
-                    else {
-                        isVisible = result;
-                    }
-                }
-            }
-            return { item, index, isVisible };
-        });
-        const visibilityResults = await Promise.all(visibilityPromises);
-        visibilityResults.forEach(({ item, isVisible }) => {
-            if (isVisible) {
-                visibleItems.push(item);
-            }
-        });
-        this.visibleItems = visibleItems;
+    async evaluateProperty(value, defaultValue) {
+        if (typeof value === 'boolean') {
+            return value;
+        }
+        if (typeof value === 'function') {
+            return await Promise.resolve(value(null, this.objects));
+        }
+        return defaultValue;
     }
-    async resolveDisabledStates() {
-        const newStates = new Map();
-        const disabledPromises = this.visibleItems.map(async (item, index) => {
-            let isDisabled = false;
-            if (typeof item.disabled === 'boolean') {
-                isDisabled = item.disabled;
-            }
-            else if (typeof item.disabled === 'function') {
-                const result = item.disabled(null, this.objects);
-                if (result instanceof Promise) {
-                    isDisabled = await result;
-                }
-                else {
-                    isDisabled = result;
-                }
+    async updateMenuItems() {
+        const processed = [];
+        for (const item of this.items) {
+            const isVisible = await this.evaluateProperty(item.visible, true);
+            if (isVisible) {
+                const isDisabled = await this.evaluateProperty(item.disabled, false);
+                processed.push({ item, isDisabled });
             }
-            newStates.set(index, isDisabled);
-        });
-        await Promise.all(disabledPromises);
-        this.disabledStates = new Map(newStates);
+        }
+        this.processedItems = processed;
     }
     render() {
-        return (h(Host, { key: 'cc1a338a7bf0d32764c2737f4f32774ccb22370a' }, h("div", { key: '4a83b9366332e42b506c3c876c00d77498a2b8b5', class: "menu-container" }, this.visibleItems.map((item, index) => {
-            var _a;
-            const isDisabled = (_a = this.disabledStates.get(index)) !== null && _a !== void 0 ? _a : false;
-            return (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, 'disabled': isDisabled }, onClick: () => this.handleItemClick(item, index), onTouchStart: () => this.handleItemClick(item, index), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)));
-        }))));
+        return (h(Host, { key: '96569454f806a6d17380315b4d0200236fe22550' }, h("div", { key: '0e5899a2901e1e9ab9d657824e105121ce785bdc', class: "menu-container" }, this.processedItems.map(({ item, isDisabled }, index) => (h("button", { key: `${item.label}-${index}`, class: { 'menu-item': true, disabled: isDisabled }, onClick: () => this.handleItemClick(item, isDisabled), onTouchStart: () => this.handleItemClick(item, isDisabled), disabled: isDisabled }, item.icon && h("kritzel-icon", { name: item.icon, size: 16 }), h("span", { class: "label" }, item.label)))))));
     }
     static get is() { return "kritzel-context-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -139,8 +103,7 @@ export class KritzelContextMenu {
     }
     static get states() {
         return {
-            "disabledStates": {},
-            "visibleItems": {}
+            "processedItems": {}
         };
     }
     static get events() {

package/dist/collection/components/ui/kritzel-context-menu/kritzel-context-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AASrG,MAAM,OAAO,kBAAkB;IAL/B;QAmBU,mBAAc,GAAyB,IAAI,GAAG,EAAE,CAAC;QAGjD,iBAAY,GAAsB,EAAE,CAAC;KA6F9C;IA3FC,iBAAiB;QACf,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAID,cAAc;QACZ,IAAI,CAAC,mBAAmB,EAAE,CAAC;QAC3B,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAEO,eAAe,CAAC,IAAqB,EAAE,KAAa;QAC1D,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,mBAAmB;QAC/B,MAAM,YAAY,GAAsB,EAAE,CAAC;QAC3C,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YAC9D,IAAI,SAAS,GAAG,IAAI,CAAC;YACrB,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;gBAC/B,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;oBACtC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC3B,CAAC;qBAAM,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;oBAC9C,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;oBAChD,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;wBAC9B,SAAS,GAAG,MAAM,MAAM,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,SAAS,GAAG,MAAM,CAAC;oBACrB,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC;QACpC,CAAC,CAAC,CAAC;QAEH,MAAM,iBAAiB,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAChE,iBAAiB,CAAC,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,EAAE;YAChD,IAAI,SAAS,EAAE,CAAC;gBACd,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;IACnC,CAAC;IAEO,KAAK,CAAC,qBAAqB;QACjC,MAAM,SAAS,GAAG,IAAI,GAAG,EAAmB,CAAC;QAC7C,MAAM,gBAAgB,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE;YACnE,IAAI,UAAU,GAAG,KAAK,CAAC;YACvB,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE,CAAC;gBACvC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;YAC7B,CAAC;iBAAM,IAAI,OAAO,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjD,IAAI,MAAM,YAAY,OAAO,EAAE,CAAC;oBAC9B,UAAU,GAAG,MAAM,MAAM,CAAC;gBAC5B,CAAC;qBAAM,CAAC;oBACN,UAAU,GAAG,MAAM,CAAC;gBACtB,CAAC;YACH,CAAC;YACD,SAAS,CAAC,GAAG,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,MAAM,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;QACpC,IAAI,CAAC,cAAc,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;gBACrC,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,KAAK,CAAC,mCAAI,KAAK,CAAC;gBAC3D,OAAO,CACL,cACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAC7B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,UAAU,EAAE,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EAChD,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,KAAK,CAAC,EACrD,QAAQ,EAAE,UAAU;oBAEnB,IAAI,CAAC,IAAI,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;oBACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACV,CAAC;YACJ,CAAC,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Prop()\r\n  items: ContextMenuItem[];\r\n\r\n  @Prop()\r\n  objects: KritzelBaseObject[];\r\n\r\n  @Event()\r\n  actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n  @Element()\r\n  hostElement: HTMLElement;\r\n\r\n  @State()\r\n  private disabledStates: Map<number, boolean> = new Map();\r\n\r\n  @State()\r\n  private visibleItems: ContextMenuItem[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.resolveVisibleItems();\r\n    this.resolveDisabledStates();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, index: number) {\r\n    if (!this.disabledStates.get(index)) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async resolveVisibleItems() {\r\n    const visibleItems: ContextMenuItem[] = [];\r\n    const visibilityPromises = this.items.map(async (item, index) => {\r\n      let isVisible = true;\r\n      if (item.visible !== undefined) {\r\n        if (typeof item.visible === 'boolean') {\r\n          isVisible = item.visible;\r\n        } else if (typeof item.visible === 'function') {\r\n          const result = item.visible(null, this.objects);\r\n          if (result instanceof Promise) {\r\n            isVisible = await result;\r\n          } else {\r\n            isVisible = result;\r\n          }\r\n        }\r\n      }\r\n      return { item, index, isVisible };\r\n    });\r\n\r\n    const visibilityResults = await Promise.all(visibilityPromises);\r\n    visibilityResults.forEach(({ item, isVisible }) => {\r\n      if (isVisible) {\r\n        visibleItems.push(item);\r\n      }\r\n    });\r\n\r\n    this.visibleItems = visibleItems;\r\n  }\r\n\r\n  private async resolveDisabledStates() {\r\n    const newStates = new Map<number, boolean>();\r\n    const disabledPromises = this.visibleItems.map(async (item, index) => {\r\n      let isDisabled = false;\r\n      if (typeof item.disabled === 'boolean') {\r\n        isDisabled = item.disabled;\r\n      } else if (typeof item.disabled === 'function') {\r\n        const result = item.disabled(null, this.objects);\r\n        if (result instanceof Promise) {\r\n          isDisabled = await result;\r\n        } else {\r\n          isDisabled = result;\r\n        }\r\n      }\r\n      newStates.set(index, isDisabled);\r\n    });\r\n\r\n    await Promise.all(disabledPromises);\r\n    this.disabledStates = new Map(newStates);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.visibleItems.map((item, index) => {\r\n            const isDisabled = this.disabledStates.get(index) ?? false;\r\n            return (\r\n              <button\r\n                key={`${item.label}-${index}`}\r\n                class={{ 'menu-item': true, 'disabled': isDisabled }}\r\n                onClick={() => this.handleItemClick(item, index)}\r\n                onTouchStart={() => this.handleItemClick(item, index)}\r\n                disabled={isDisabled}\r\n              >\r\n                {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n                <span class=\"label\">{item.label}</span>\r\n              </button>\r\n            );\r\n          })}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-context-menu.js","sourceRoot":"","sources":["../../../../src/components/ui/kritzel-context-menu/kritzel-context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAcrG,MAAM,OAAO,kBAAkB;IAL/B;QAmBU,mBAAc,GAAwB,EAAE,CAAC;KAgElD;IA9DC,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAGD,cAAc;QACZ,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe,CAAC,IAAqB,EAAE,UAAmB;QAChE,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC;IACH,CAAC;IAEO,KAAK,CAAC,gBAAgB,CAC5B,KAAoG,EACpG,YAAqB;QAErB,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE,CAAC;YAC/B,OAAO,KAAK,CAAC;QACf,CAAC;QACD,IAAI,OAAO,KAAK,KAAK,UAAU,EAAE,CAAC;YAChC,OAAO,MAAM,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC1D,CAAC;QACD,OAAO,YAAY,CAAC;IACtB,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,MAAM,SAAS,GAAwB,EAAE,CAAC;QAE1C,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;YAClE,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;gBACrE,SAAS,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;YACvC,CAAC;QACH,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,gBAAgB,IACxB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,CACxD,cACE,GAAG,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,KAAK,EAAE,EAC7B,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,EAClD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,EACrD,YAAY,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,UAAU,CAAC,EAC1D,QAAQ,EAAE,UAAU;gBAEnB,IAAI,CAAC,IAAI,IAAI,oBAAc,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,GAAiB;gBACtE,YAAM,KAAK,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACV,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Element, State, Watch } from '@stencil/core';\r\nimport { ContextMenuItem } from '../../../interfaces/context-menu-item.interface';\r\nimport { KritzelBaseObject } from '../../../classes/objects/base-object.class';\r\n\r\ninterface ProcessedMenuItem {\r\n  item: ContextMenuItem;\r\n  isDisabled: boolean;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-context-menu',\r\n  styleUrl: 'kritzel-context-menu.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelContextMenu {\r\n  @Prop()\r\n  items: ContextMenuItem[];\r\n\r\n  @Prop()\r\n  objects: KritzelBaseObject[];\r\n\r\n  @Event()\r\n  actionSelected: EventEmitter<ContextMenuItem>;\r\n\r\n  @Element()\r\n  hostElement: HTMLElement;\r\n\r\n  @State()\r\n  private processedItems: ProcessedMenuItem[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  @Watch('items')\r\n  onItemsChanged() {\r\n    this.updateMenuItems();\r\n  }\r\n\r\n  private handleItemClick(item: ContextMenuItem, isDisabled: boolean) {\r\n    if (!isDisabled) {\r\n      this.actionSelected.emit(item);\r\n    }\r\n  }\r\n\r\n  private async evaluateProperty(\r\n    value: boolean | ((obj: KritzelBaseObject, objs: KritzelBaseObject[]) => boolean | Promise<boolean>),\r\n    defaultValue: boolean,\r\n  ): Promise<boolean> {\r\n    if (typeof value === 'boolean') {\r\n      return value;\r\n    }\r\n    if (typeof value === 'function') {\r\n      return await Promise.resolve(value(null, this.objects));\r\n    }\r\n    return defaultValue;\r\n  }\r\n\r\n  private async updateMenuItems() {\r\n    const processed: ProcessedMenuItem[] = [];\r\n\r\n    for (const item of this.items) {\r\n      const isVisible = await this.evaluateProperty(item.visible, true);\r\n      if (isVisible) {\r\n        const isDisabled = await this.evaluateProperty(item.disabled, false);\r\n        processed.push({ item, isDisabled });\r\n      }\r\n    }\r\n\r\n    this.processedItems = processed;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div class=\"menu-container\">\r\n          {this.processedItems.map(({ item, isDisabled }, index) => (\r\n            <button\r\n              key={`${item.label}-${index}`} \r\n              class={{ 'menu-item': true, disabled: isDisabled }}\r\n              onClick={() => this.handleItemClick(item, isDisabled)}\r\n              onTouchStart={() => this.handleItemClick(item, isDisabled)}\r\n              disabled={isDisabled}\r\n            >\r\n              {item.icon && <kritzel-icon name={item.icon} size={16}></kritzel-icon>}\r\n              <span class=\"label\">{item.label}</span>\r\n            </button>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.js

@@ -28,14 +28,14 @@ export class KritzelControlBrushConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: 'c200146a90a3dd72241e098eff555312fd3125a9' }, h("div", { key: '886492ec4c5e15954166c4a7569ba832d0e6eff8', style: {
+        return (h(Host, { key: 'd099d1c6722678fdfb06c34eb0860e8819dd17ca' }, h("div", { key: '0856f0150666415ee452a0fcec5c76b6d25b82c4', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-brush-style", { key: '64e205189fbd740c01d4fd94c5098edae574d69b', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: '4b2d0fbf4d485350223dbc27601e78ab37be8df5', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '35262e8456901d10c84437e578317287282cf690', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '4f519179f419a3e3567d2db39d0d8f9f30d5a6a1', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '05f05946c3ebd2707f1c41c236a2efca47cedbec', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-brush-style", { key: '364e6026d1b280a02c3618c7ded11f40c7e3cba4', type: this.tool.type, onTypeChange: event => this.handleTypeChange(event) }), h("button", { key: 'fc58c9ceb9e92ef8c79836e686b9a64653f91210', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: 'ab219c72a9ace56853c725ba75767be2079a3c10', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '8757c754217a3de88dad2c465ff748571716ae64', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("kritzel-stroke-size", { key: '056b227dd9a92b06588816739b55a80f5ce80835', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-brush-config"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-control-text-config/kritzel-control-text-config.js

@@ -19,14 +19,14 @@ export class KritzelControlTextConfig {
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '1c8463a1f6b7bcf81f3b58fc0064330c50d6ada9' }, h("div", { key: '69825e6c9be473dda3597c86d51dffff9a6418fd', style: {
+        return (h(Host, { key: 'f0d35cc43f1fe58a5a26f21dad99f1a733b66cce' }, h("div", { key: 'efc7d31c11460015a41185b4215e9ff45970abdd', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-font-family", { key: '56c947950e32989782512a2b00e3be0aaa12d77b', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '83fdb5908340adc032a7abae9b4b678697e0cff8', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '739c175fbc3c0c5c342f2983d0e47323bc5b56f4', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '98251da71574b3487bf6ee46f7e4e95d133e1eea', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '95c88611a6631a4db5d200aac57e7eeef2c195b8', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-font-family", { key: '7f7d3ccb061d4b0e5e0f181ba4224f3de430a88c', selectedFontFamily: this.tool.fontFamily, onFontFamilyChange: event => this.handleFamilyChange(event) }), h("button", { key: '6676fcfa245874d54fa9933888c242c6f611c58c', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand' }, h("kritzel-icon", { key: '0734f636889c77f9087a2de2899a28ebd8df30a2', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-color-palette", { key: '68373ef79578d6a73028da681f1e3b0e8e3e5874', colors: this.tool.palette, selectedColor: this.tool.fontColor, isExpanded: this.isExpanded, onColorChange: event => this.handleColorChange(event) }), h("kritzel-font-size", { key: '56e6828f6ceaac3d37910b7d092a30bacbd84519', selectedSize: this.tool.fontSize, fontFamily: this.tool.fontFamily, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get is() { return "kritzel-control-text-config"; }
     static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@
   background-color: var(--kritzel-controls-background-color, #ffffff);
   border-radius: var(--kritzel-controls-border-radius, 16px);
   box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-controls-border, 1px solid #f0f0f0);
+  border: var(--kritzel-controls-border, 1px solid #ebebeb);
   z-index: 10000;
   position: relative;
 }
@@ -92,7 +92,7 @@
   cursor: pointer;
   border: 2px solid transparent;
   box-sizing: border-box;
-  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
 }
 
 .font-container {
@@ -105,7 +105,7 @@
   cursor: pointer;
   border: 2px solid transparent;
   box-sizing: border-box;
-  background-color: var(--kritzel-color-palette-hover-background-color, #f0f0f0);
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
 }
 
 .no-config {