@kritzel/editor 0.4.31 → 0.4.32

package/dist/collection/components/kritzel-toolbar/kritzel-toolbar.js

@@ -154,17 +154,13 @@ export class KritzelToolbar {
         await this.resolveDisabledStates(newToolbar);
         for (const c of newToolbar) {
             if (c.type === 'tool' && c.tool) {
-                let toolConstructor = c.tool;
-                if (typeof toolConstructor !== 'function') {
-                    toolConstructor = toolConstructor.constructor;
-                }
-                const registered = await this.kritzelEngine.registerTool(c.name, toolConstructor, c.config);
+                const registered = await this.kritzelEngine.getTool(c.name);
                 if (registered) {
                     c.tool = registered;
                 }
             }
             if (c.type === 'tool' && c.isDefault && !this.isControlDisabled(c) && c.tool) {
-                await this.kritzelEngine.changeActiveTool(c.name);
+                await this.kritzelEngine.setActiveTool(c.name);
                 this.activeControl = c;
                 this.updateDisplayValues(c.tool);
                 hasDefault = true;
@@ -183,7 +179,7 @@ export class KritzelToolbar {
         if (!hasDefault) {
             const firstTool = this.internalToolbar.find(c => c.type === 'tool' && c.tool && !this.isControlDisabled(c));
             if (firstTool) {
-                await this.kritzelEngine.changeActiveTool(firstTool.name);
+                await this.kritzelEngine.setActiveTool(firstTool.name);
                 this.activeControl = firstTool;
                 this.updateDisplayValues(firstTool.tool);
             }
@@ -219,12 +215,12 @@ export class KritzelToolbar {
         this.activeControl = control;
         if (this.activeControl.type === 'tool') {
             this.updateDisplayValues(this.activeControl.tool);
-            await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+            await this.kritzelEngine.setActiveTool(this.activeControl.name);
         }
     }
     async handleToolChange(event) {
         this.activeControl = { ...this.activeControl, tool: event.detail };
-        await this.kritzelEngine.changeActiveTool(this.activeControl.name);
+        await this.kritzelEngine.setActiveTool(this.activeControl.name);
     }
     /**
      * Get the currently selected sub-option for a control.
@@ -263,13 +259,13 @@ export class KritzelToolbar {
         // Separate tool controls from config control
         const toolControls = this.internalToolbar.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalToolbar.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '138b1071841d6d8de85379e953f5f597216569d3', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: 'e4f662409cdd76fafa8753a47d4c4670968a9e7a', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '566c48a8ebe036f2bd5972b25e1f937cab45e34b', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'c3c864e0e818ccf92d4c9b43f183775fa919cf4c', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'eda49dc67a1e4da92e4b47e5a97366810464d998', class: "kritzel-toolbar" }, h("div", { key: '018b3062a233b92424a9c64002fe69bb48d6a2d3', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '8afc779f4137ad4410765e7c37fe49e32fe94624', 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: '4d59605d66ee7277af8fc56002947f943f8a5b14', class: "kritzel-toolbar" }, h("div", { key: '7c36b7ad02470bafc9efcb426f667376e28953e8', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: 'd29be9bca631077fad2fe709219c8897735bc6a6', 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);
@@ -291,7 +287,7 @@ export class KritzelToolbar {
                     }, disabled: isDisabled, ref: el => {
                         if (el)
                             control._triggerRef = el;
-                    }, "aria-label": `Select ${control.name} options`, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-dropdown`, tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevron-down", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
+                    }, "aria-label": `Select ${control.name} options`, "aria-disabled": isDisabled, "data-testid": `tool-${control.name}-dropdown`, tabIndex: isActive ? 0 : -1 }, h("kritzel-icon", { name: "chevronDown", size: 12 })), h("kritzel-tooltip", { anchorElement: control._anchorRef, triggerElement: control._triggerRef }, h("div", { class: "kritzel-submenu-content" }, control.subOptions.map(option => (h("button", { class: {
                         'kritzel-submenu-item': true,
                         'active': option.id === selectedSubOption?.id,
                     }, key: option.id, "data-testid": `suboption-${option.id}`, onClick: () => this.selectSubOption(control, option) }, h("kritzel-icon", { name: option.icon, size: 20 }), h("span", null, option.label))))))));
@@ -305,10 +301,10 @@ export class KritzelToolbar {
                     'selected': this.activeControl?.name === control?.name,
                     'disabled': this.isControlDisabled(control),
                 }, disabled: this.isControlDisabled(control), key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1), "aria-disabled": this.isControlDisabled(control) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '08de74d08ced9a4d34d61740729f317fee7724e0', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '8cb7ae1d0b77f6bac9c6ddf34699c2653b1cfa68', 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: 'c453af061cbf23f83c2418fe5db315008550afeb', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '9818cdc44e0da2f5bbae24697a22add9499aaa9b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'f957bba0e15a7771856c4f04346ada370f0730c8', 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: '49657d004467ae5f6ec97f70c3d88cfc48e6e3d8', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: '764230be2ef0ca45f94ca2a7bf6e2b5df7bdf7b2', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '7b6c2cae55b9ca6f723e2209f98d921b388e8159', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '222a7eb3c5a0ad3589e62b43618dcf56bce01418', 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: '90455ca7c55240645445f3d92ccec54ffc1e3572', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -317,7 +313,7 @@ export class KritzelToolbar {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '6a8f4f549919b7e87a3338145347597f6e41019c', class: "color-container" }, h("kritzel-color", { key: 'c050efb35a31ac668fcb25fec3cd036f871d6a8f', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: 'ef0c11f630b70dadf5c9b7688c0f1b93cf9cf030', class: "color-container" }, h("kritzel-color", { key: 'd14a7837fef6d3777ee92d219d22915c5f21e541', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));

package/dist/collection/components/kritzel-tooltip/kritzel-tooltip.css

@@ -1,18 +1,18 @@
-:host {
-  width: auto;
-}
-
-.tooltip-content {
-  position: relative;
-  padding: 8px 12px;
-  border-radius: 4px;
-  width: fit-content;
-  background-color: var(--kritzel-tooltip-background-color, #ffffff);
-  color: var(--kritzel-tooltip-color, #000000);
-  padding: var(--kritzel-tooltip-padding, 12px);
-  border: var(--kritzel-tooltip-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-tooltip-border-radius, 16px);
-  white-space: nowrap;
-  box-shadow: var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
-}
-
+:host {
+  width: auto;
+}
+
+.tooltip-content {
+  position: relative;
+  padding: 8px 12px;
+  border-radius: 4px;
+  width: fit-content;
+  background-color: var(--kritzel-tooltip-background-color, #ffffff);
+  color: var(--kritzel-tooltip-color, #000000);
+  padding: var(--kritzel-tooltip-padding, 12px);
+  border: var(--kritzel-tooltip-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-tooltip-border-radius, 16px);
+  white-space: nowrap;
+  box-shadow: var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));
+}
+

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

@@ -128,14 +128,14 @@ export class KritzelTooltip {
         }
     }
     render() {
-        return (h(Host, { key: 'aa1367fd2af71357855814087a3d3c69e77e326f', style: {
+        return (h(Host, { key: '9c80a8831cdc03e08b4fe19c8c0aabd036fd5a23', 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: 'da84f59a18173fa4c93b4c2b8ace6102b0067e17', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'a68910ec2f7c2243043aea21489e3c68b6b09966' }))));
+            } }, h("div", { key: '0f5907b4bf740e6242a07e00790685265ee7767b', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'e1074787847d96b7a725fcb04902ccc7e6827984' }))));
     }
     static get is() { return "kritzel-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.css

@@ -1,46 +1,46 @@
-:host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 4px;
-  gap: 8px;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  background-color: var(--kritzel-utility-panel-background-color, #e2e2e2);
-  width: fit-content;
-  user-select: none;
-  z-index: 1;
-}
-
-.utility-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 28px;
-  height: 28px;
-  padding: 8px 4px;
-  border: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  color: var(--kritzel-utility-panel-button-color, #333333);
-  --kritzel-icon-color: var(--kritzel-utility-panel-button-color, #333333);
-  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);
-}
-
-.utility-button:hover,
-.utility-button:focus-visible {
-  background-color: var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.utility-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.utility-separator {
-  width: 1px;
-  height: 16px;
-  background-color: var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%));
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  gap: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  background-color: var(--kritzel-utility-panel-background-color, #e2e2e2);
+  width: fit-content;
+  user-select: none;
+  z-index: 1;
+}
+
+.utility-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 8px 4px;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-utility-panel-button-color, #333333);
+  --kritzel-icon-color: var(--kritzel-utility-panel-button-color, #333333);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);
+}
+
+.utility-button:hover,
+.utility-button:focus-visible {
+  background-color: var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.utility-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.utility-separator {
+  width: 1px;
+  height: 16px;
+  background-color: var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%));
 }

package/dist/collection/components/kritzel-utility-panel/kritzel-utility-panel.js

@@ -19,7 +19,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '716bf600bb8ef3e1c7663183c2b4d2927e554faf' }, h("button", { key: '64b300d1d10c30d623fce76a919610e7b553c504', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '86c0711e5a61f837bf279600e27d896a81ae1d5c', name: "undo" })), h("button", { key: '9052c2023254caca5109364b1c82d42e0900d54b', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '03060f21b1551bcdae724b4de03010127647c036', name: "redo" })), h("div", { key: '5ac88e76663bb2d5c90f16b76021123fe64d898a', class: "utility-separator" }), h("button", { key: '7cbbc765c1c4b642d8371a25348d1d886b9b5440', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'a8f6c8e8a8783e45d781b50aa7aec51b3f29dd5c', name: "delete" }))));
+        return (h(Host, { key: '1ec661383d53b4c34308152d745a8de1cb5809e0' }, h("button", { key: '69ff640842779f8b03709040feb3dbfe2f5f0f05', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '49be69476a559136b1199f7d20144d0dc0aa402b', name: "undo" })), h("button", { key: 'f9a14d78e14e66f0ebfb3762a7de748097c297e1', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: 'e559abf9a2a0471d2524f65264adbc28d8fa0449', name: "redo" })), h("div", { key: '19fe0895816459d7e9241307c9f0642c055774b6', class: "utility-separator" }), h("button", { key: '3672bbcad7e22b023dc203ee098ba1538836b0ee', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: 'aadbff86ca2938e28a74c4ad1c0ac6330d20e529', name: "delete" }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.css

@@ -1,16 +1,16 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-}
-
-.manager {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-out;
-}
-
-.manager.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+
+.manager {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+}
+
+.manager.visible {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/collection/components/kritzel-workspace-manager/kritzel-workspace-manager.js

@@ -121,7 +121,7 @@ export class KritzelWorkspaceManager {
             return {
                 id: ws.id,
                 label: ws.name,
-                icon: ws.isPublic ? 'users-round' : undefined,
+                icon: ws.isPublic ? 'usersRound' : undefined,
                 iconTooltip: ws.isPublic ? (this.terms['workspace.sharedTooltip'] ?? 'Shared workspace') : undefined,
                 value: ws,
                 isEditing: this.editingItemId === ws.id,

package/dist/collection/components/kritzel-zoom-panel/kritzel-zoom-panel.css

@@ -1,72 +1,72 @@
-:host {
-  display: block;
-  z-index: 1;
-}
-
-.panel {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--kritzel-zoom-panel-gap, 4px);
-  padding: var(--kritzel-zoom-panel-padding, 4px);
-  border: var(--kritzel-zoom-panel-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-zoom-panel-border-radius, 12px);
-  background-color: var(--kritzel-zoom-panel-background-color, #ffffff);
-  box-shadow: var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-out;
-}
-
-.panel.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.zoom-level {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 46px;
-  color: var(--kritzel-zoom-panel-icon-color, #000000);
-  font-family: var(--kritzel-font-family, sans-serif);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  padding: 0 4px;
-  user-select: none;
-}
-
-.zoom-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--kritzel-zoom-panel-button-size, 32px);
-  height: var(--kritzel-zoom-panel-button-size, 32px);
-  padding: 0;
-  border: 0;
-  border-radius: var(--kritzel-zoom-panel-button-border-radius, 8px);
-  background: transparent;
-  background-color: transparent;
-  color: var(--kritzel-zoom-panel-icon-color, #000000);
-  --kritzel-icon-color: var(--kritzel-zoom-panel-icon-color, #000000);
-  box-shadow: none;
-  appearance: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.zoom-button:hover,
-.zoom-button:focus-visible {
-  background-color: var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.zoom-button:active {
-  background-color: var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.zoom-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
+:host {
+  display: block;
+  z-index: 1;
+}
+
+.panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kritzel-zoom-panel-gap, 4px);
+  padding: var(--kritzel-zoom-panel-padding, 4px);
+  border: var(--kritzel-zoom-panel-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-zoom-panel-border-radius, 12px);
+  background-color: var(--kritzel-zoom-panel-background-color, #ffffff);
+  box-shadow: var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+}
+
+.panel.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.zoom-level {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 46px;
+  color: var(--kritzel-zoom-panel-icon-color, #000000);
+  font-family: var(--kritzel-global-font-family, sans-serif);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0 4px;
+  user-select: none;
+}
+
+.zoom-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kritzel-zoom-panel-button-size, 32px);
+  height: var(--kritzel-zoom-panel-button-size, 32px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--kritzel-zoom-panel-button-border-radius, 8px);
+  background: transparent;
+  background-color: transparent;
+  color: var(--kritzel-zoom-panel-icon-color, #000000);
+  --kritzel-icon-color: var(--kritzel-zoom-panel-icon-color, #000000);
+  box-shadow: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.zoom-button:hover,
+.zoom-button:focus-visible {
+  background-color: var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.zoom-button:active {
+  background-color: var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.zoom-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/dist/collection/components/kritzel-zoom-panel/kritzel-zoom-panel.js

@@ -26,7 +26,7 @@ export class KritzelZoomPanel {
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (h(Host, { key: 'aa8e01ab1b510f98b2b53a6ff882fe278969d1b3' }, h("div", { key: 'b652d46eac7add121c64baee132d4d162f4ec657', class: { panel: true, visible: this.visible } }, h("button", { key: '8fe1d17dba12490a6033889b4448b3f330815cdc', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '919c0ca7c58a79fd792cdf504a7565df29043211', name: "minus" })), h("span", { key: '0acb683ebf5f2ea6a66065783ebf10715c588567', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'e0209ca2d8af30c56833b28c394373f83da1fcf8', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '13907bcae5712d23165aa22bfe229f2893b4f74f', name: "plus" })))));
+        return (h(Host, { key: '37bdf4f4025a64be94a2f743d73d2a83c4f9c478' }, h("div", { key: '5c897da0de9a15d91c4d488be923271f82d816c1', class: { panel: true, visible: this.visible } }, h("button", { key: '165fedd5f1c87140e1cbfd7c3a99344edea59d3e', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '4ac3e03e68166c9e9819c5a11ab1d8aac37b6eb1', name: "minus" })), h("span", { key: 'd124c60a92cde8afe9fac87c85b3654d18238343', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: 'fe94bf21c0de5fc212524058c6fb5de90a89679e', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '84c8ebd09772c81946e65a5759376c501f050548', name: "plus" })))));
     }
     static get is() { return "kritzel-zoom-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/components/index.js

@@ -1,4 +1,4 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5qkOM1RJ.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-l1BZ4pYI.js';
 export { KritzelActiveUsers, defineCustomElement as defineCustomElementKritzelActiveUsers } from './kritzel-active-users.js';
 export { KritzelAvatar, defineCustomElement as defineCustomElementKritzelAvatar } from './kritzel-avatar.js';
 export { KritzelAwarenessCursors, defineCustomElement as defineCustomElementKritzelAwarenessCursors } from './kritzel-awareness-cursors.js';

package/dist/components/kritzel-active-users.js

@@ -1,4 +1,4 @@
-import { K as KritzelActiveUsers$1, d as defineCustomElement$1 } from './p-QEue33R5.js';
+import { K as KritzelActiveUsers$1, d as defineCustomElement$1 } from './p-D1sxfQVN.js';
 
 const KritzelActiveUsers = KritzelActiveUsers$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-avatar.js

@@ -1,4 +1,4 @@
-import { K as KritzelAvatar$1, d as defineCustomElement$1 } from './p-4-qLegHb.js';
+import { K as KritzelAvatar$1, d as defineCustomElement$1 } from './p-COaLQ4Z-.js';
 
 const KritzelAvatar = KritzelAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-awareness-cursors.js

@@ -1,4 +1,4 @@
-import { K as KritzelAwarenessCursors$1, d as defineCustomElement$1 } from './p-Cy_cLtOP.js';
+import { K as KritzelAwarenessCursors$1, d as defineCustomElement$1 } from './p-CdwD9F0m.js';
 
 const KritzelAwarenessCursors = KritzelAwarenessCursors$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelBackToContent$1, d as defineCustomElement$1 } from './p-CwBxnzYu.js';
+import { K as KritzelBackToContent$1, d as defineCustomElement$1 } from './p-DYNFqwX4.js';
 
 const KritzelBackToContent = KritzelBackToContent$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
-import { d as defineCustomElement$3 } from './p-R1D8Sr0l.js';
-import { d as defineCustomElement$2 } from './p-BGmTmdLe.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-l1BZ4pYI.js';
+import { d as defineCustomElement$3 } from './p-Fzi_dVqn.js';
+import { d as defineCustomElement$2 } from './p-DSi2HiZW.js';
 
 const kritzelBrushStyleCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}`;
 
@@ -27,7 +27,7 @@ const KritzelBrushStyle$1 = /*@__PURE__*/ proxyCustomElement(class KritzelBrushS
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', 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 style() { return kritzelBrushStyleCss(); }
 }, [513, "kritzel-brush-style", {

package/dist/components/kritzel-button.js

@@ -1,4 +1,4 @@
-import { K as KritzelButton$1, d as defineCustomElement$1 } from './p-DOJCDPVD.js';
+import { K as KritzelButton$1, d as defineCustomElement$1 } from './p-CViWMGoM.js';
 
 const KritzelButton = KritzelButton$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-GbCxpbQ6.js';
+import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-CgCVe3_P.js';
 
 const KritzelColorPalette = KritzelColorPalette$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-color.js

@@ -1,4 +1,4 @@
-import { K as KritzelColorComponent, d as defineCustomElement$1 } from './p-DVv8ChhE.js';
+import { K as KritzelColorComponent, d as defineCustomElement$1 } from './p-D0lYLWkj.js';
 
 const KritzelColor = KritzelColorComponent;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelContextMenu$1, d as defineCustomElement$1 } from './p-B6UJztrf.js';
+import { K as KritzelContextMenu$1, d as defineCustomElement$1 } from './p-B6U2JNDq.js';
 
 const KritzelContextMenu = KritzelContextMenu$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelCurrentUserDialog$1, d as defineCustomElement$1 } from './p-CrIEmItB.js';
+import { K as KritzelCurrentUserDialog$1, d as defineCustomElement$1 } from './p-p2H4pOpF.js';
 
 const KritzelCurrentUserDialog = KritzelCurrentUserDialog$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { K as KritzelCurrentUser$1, d as defineCustomElement$1 } from './p-BrGJIoGK.js';
+import { K as KritzelCurrentUser$1, d as defineCustomElement$1 } from './p-DZ4rAt6k.js';
 
 const KritzelCurrentUser = KritzelCurrentUser$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-cursor-trail.js

@@ -1,4 +1,4 @@
-import { K as KritzelCursorTrail$1, d as defineCustomElement$1 } from './p-Cp4e4oTE.js';
+import { K as KritzelCursorTrail$1, d as defineCustomElement$1 } from './p-DZ0S2l6Z.js';
 
 const KritzelCursorTrail = KritzelCursorTrail$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-dialog.js

@@ -1,4 +1,4 @@
-import { K as KritzelDialog$1, d as defineCustomElement$1 } from './p-peZjvnkK.js';
+import { K as KritzelDialog$1, d as defineCustomElement$1 } from './p-g6VqjbL_.js';
 
 const KritzelDialog = KritzelDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-dropdown.js

@@ -1,4 +1,4 @@
-import { K as KritzelDropdown$1, d as defineCustomElement$1 } from './p-R1D8Sr0l.js';
+import { K as KritzelDropdown$1, d as defineCustomElement$1 } from './p-Fzi_dVqn.js';
 
 const KritzelDropdown = KritzelDropdown$1;
 const defineCustomElement = defineCustomElement$1;