@kritzel/editor 0.4.31 → 0.4.33

package/dist/collection/components/kritzel-back-to-content/kritzel-back-to-content.css

@@ -1,42 +1,42 @@
-:host {
-  display: block;
-  z-index: var(--kritzel-back-to-content-z-index, 1000);
-}
-
-.back-to-content-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--kritzel-back-to-content-height, 50px);
-  box-sizing: border-box;
-  gap: var(--kritzel-back-to-content-gap, 6px);
-  padding: var(--kritzel-back-to-content-padding, 0 16px);
-  border: var(--kritzel-back-to-content-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-back-to-content-border-radius, 12px);
-  background-color: var(--kritzel-back-to-content-background-color, #ffffff);
-  color: var(--kritzel-back-to-content-color, #000000);
-  font-size: var(--kritzel-back-to-content-font-size, 14px);
-  font-weight: var(--kritzel-back-to-content-font-weight, 500);
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  box-shadow: var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;
-  -webkit-tap-highlight-color: transparent;
-  user-select: none;
-}
-
-.back-to-content-button.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-@media (hover: hover) {
-  .back-to-content-button:hover {
-    background-color: var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-  }
-}
-
-.back-to-content-button:active {
-  background-color: var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
+:host {
+  display: block;
+  z-index: var(--kritzel-back-to-content-z-index, 1000);
+}
+
+.back-to-content-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--kritzel-back-to-content-height, 50px);
+  box-sizing: border-box;
+  gap: var(--kritzel-back-to-content-gap, 6px);
+  padding: var(--kritzel-back-to-content-padding, 0 16px);
+  border: var(--kritzel-back-to-content-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-back-to-content-border-radius, 12px);
+  background-color: var(--kritzel-back-to-content-background-color, #ffffff);
+  color: var(--kritzel-back-to-content-color, #000000);
+  font-size: var(--kritzel-back-to-content-font-size, 14px);
+  font-weight: var(--kritzel-back-to-content-font-weight, 500);
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  box-shadow: var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+}
+
+.back-to-content-button.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+@media (hover: hover) {
+  .back-to-content-button:hover {
+    background-color: var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+  }
+}
+
+.back-to-content-button:active {
+  background-color: var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}

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

@@ -16,7 +16,7 @@ export class KritzelBackToContent {
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: 'c5c829f14100bd2d658f0dc1e32553f9adccb129' }, h("button", { key: 'a3cde6688b78466c79721d55b087c91490c6c378', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '8c31350e301b6852f2e9cf9d897281ff118587c7', name: "chevrons-left" }))));
+        return (h(Host, { key: '335205a7ec6430235c54941828b7491d75472778' }, h("button", { key: '176e473183c4d58607a697c924035baec67c138d', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '44ad49916d1ee99fed8e635de65f7ae337235ecb', name: "chevronsLeft" }))));
     }
     static get is() { return "kritzel-back-to-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/kritzel-brush-style/kritzel-brush-style.css

@@ -1,43 +1,43 @@
-: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);
+: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);
 }

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

@@ -14,7 +14,7 @@ export class KritzelBrushStyle {
             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 is() { return "kritzel-brush-style"; }
     static get encapsulation() { return "shadow"; }
@@ -59,7 +59,7 @@ export class KritzelBrushStyle {
                     "references": {
                         "BrushStyleOption": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-brush-style/kritzel-brush-style.tsx",
+                            "path": "/home/runner/work/kritzel-private/kritzel-private/libs/editor/core/src/components/kritzel-brush-style/kritzel-brush-style.tsx",
                             "id": "src/components/kritzel-brush-style/kritzel-brush-style.tsx::BrushStyleOption"
                         }
                     }
@@ -72,7 +72,7 @@ export class KritzelBrushStyle {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ]"
+                "defaultValue": "[\n    { value: 'pen', label: 'Pen' },\n    { value: 'highlighter', label: 'Highlighter' },\n  ]"
             }
         };
     }

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

@@ -1,73 +1,73 @@
-:host {
-  display: inline-block;
-  font-family: sans-serif;
-}
-
-button {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  display: inline-flex;
-  width: var(--kritzel-button-width, auto);
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  border-radius: var(--kritzel-button-border-radius, 8px);
-  padding: var(--kritzel-button-padding, 12px 20px);
-  font-size: var(--kritzel-button-font-size, 14px);
-  font-weight: var(--kritzel-button-font-weight, 500);
-  transition: background-color 0.15s ease, opacity 0.15s ease;
-  -webkit-tap-highlight-color: transparent;
-}
-
-button.primary {
-  background-color: var(--kritzel-button-primary-background-color, #007AFF);
-  color: var(--kritzel-button-primary-color, #ffffff);
-}
-
-button.primary:hover {
-  background-color: var(--kritzel-button-primary-hover-background-color, #006ae6);
-}
-
-button.primary:active {
-  background-color: var(--kritzel-button-primary-active-background-color, #005bbf);
-}
-
-button.secondary {
-  background-color: var(--kritzel-button-secondary-background-color, #f0f0f0);
-  color: var(--kritzel-button-secondary-color, #333333);
-}
-
-button.secondary:hover {
-  background-color: var(--kritzel-button-secondary-hover-background-color, #e0e0e0);
-}
-
-button.secondary:active {
-  background-color: var(--kritzel-button-secondary-active-background-color, #d0d0d0);
-}
-
-button.text {
-  background-color: transparent;
-  color: var(--kritzel-button-text-color, #007AFF);
-}
-
-button.text:hover {
-  background-color: var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08));
-}
-
-button.text:active {
-  background-color: var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15));
-}
-
-button.disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
+:host {
+  display: inline-block;
+  font-family: var(--kritzel-button-font-family, var(--kritzel-global-font-family, sans-serif));
+}
+
+button {
+  border: none;
+  background-color: transparent;
+  padding: 0;
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  display: inline-flex;
+  width: var(--kritzel-button-width, auto);
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border-radius: var(--kritzel-button-border-radius, 8px);
+  padding: var(--kritzel-button-padding, 12px 20px);
+  font-size: var(--kritzel-button-font-size, 14px);
+  font-weight: var(--kritzel-button-font-weight, 500);
+  transition: background-color 0.15s ease, opacity 0.15s ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+button.primary {
+  background-color: var(--kritzel-button-primary-background-color, #007AFF);
+  color: var(--kritzel-button-primary-color, #ffffff);
+}
+
+button.primary:hover {
+  background-color: var(--kritzel-button-primary-hover-background-color, #006ae6);
+}
+
+button.primary:active {
+  background-color: var(--kritzel-button-primary-active-background-color, #005bbf);
+}
+
+button.secondary {
+  background-color: var(--kritzel-button-secondary-background-color, #f0f0f0);
+  color: var(--kritzel-button-secondary-color, #333333);
+}
+
+button.secondary:hover {
+  background-color: var(--kritzel-button-secondary-hover-background-color, #e0e0e0);
+}
+
+button.secondary:active {
+  background-color: var(--kritzel-button-secondary-active-background-color, #d0d0d0);
+}
+
+button.text {
+  background-color: transparent;
+  color: var(--kritzel-button-text-color, #007AFF);
+}
+
+button.text:hover {
+  background-color: var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08));
+}
+
+button.text:active {
+  background-color: var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15));
+}
+
+button.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}

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

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: '539da53bb3f720cc3a1cf9cfed515b38e88e933b' }, h("button", { key: 'da8c3cfab366087e935bff483e2a909e915b24b2', type: this.type, class: {
+        return (h(Host, { key: 'e88abc53a52cd32846b389f9de239d3f98b7230f' }, h("button", { key: 'de77c4ac750f35766b9657276addf78068be1575', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'abb8e3b2a2b677530db9a354c4f1788b6baaaca0' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'bdd2227879415dccc23676cf219ef17b1dd104fe' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,25 +1,25 @@
-:host {
-  display: flex;
-}
-
-.checkerboard-bg {
-  background: repeating-conic-gradient(
-      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
-      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
-    )
-    50% / 8px 8px;
-  position: relative;
-  overflow: hidden;
-}
-
-.color-circle {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  box-sizing: border-box;
-  display: block;
-}
-
-.color-circle.white {
-  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
+:host {
+  display: flex;
+}
+
+.checkerboard-bg {
+  background: repeating-conic-gradient(
+      var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,
+      var(--kritzel-checkerboard-color-light, #fff) 0% 50%
+    )
+    50% / 8px 8px;
+  position: relative;
+  overflow: hidden;
+}
+
+.color-circle {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.color-circle.white {
+  border: 1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc);
 }

package/dist/collection/components/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: 'b0543e30ee8a4a79aa0487f207eb8174b2b26e08' }, h("div", { key: 'e88eb0d0eb80ba925b94c16637ed168e1b0c76fb', class: "checkerboard-bg", style: {
+        return (h(Host, { key: 'b75cfa0ca9d5927fe9cb1331f7e4163abc34c0c1' }, h("div", { key: '197ec4d1daaf5804b69907b8de074784686face4', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '86381f69b78fc987c581daf19302049fb137afb7', class: {
+            } }, h("div", { key: 'ed8b7dc412569d05c747014a32948930c392b980', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/kritzel-color-palette/kritzel-color-palette.css

@@ -1,46 +1,46 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.color-grid {
-  width: 100%;
-  display: grid;
-  grid-template-columns: repeat(6, 32px);
-  gap: 8px;
-  justify-items: center;
-  overflow: hidden;
-  height: 40px;
-  transition: height 0.1s ease-in-out;
-}
-
-.color-grid.expanded {
-  height: 500px;
-}
-
-.color-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  border: 2px solid transparent;
-  box-sizing: border-box;
-}
-
-.color-container:hover {
-  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
-}
-
-.color-container.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-color-palette-selected-background-color);
-}
-
-
+:host {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 0;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.color-grid {
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(6, 32px);
+  gap: 8px;
+  justify-items: center;
+  overflow: hidden;
+  height: 40px;
+  transition: height 0.1s ease-in-out;
+}
+
+.color-grid.expanded {
+  height: 500px;
+}
+
+.color-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+}
+
+.color-container:hover {
+  background-color: var(--kritzel-color-palette-hover-background-color, #ebebeb);
+}
+
+.color-container.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-color-palette-selected-background-color);
+}
+
+

package/dist/collection/components/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: '4d04acd9a67ac1c302bd0ded5fdfe431d0cacf26' }, h("div", { key: 'bb873b67d0e4f05353af87e1518df9525d20a28b', class: {
+        return (h(Host, { key: 'cfdd5136f512aed23198d4a55c628ccd675f08c9' }, h("div", { key: 'bb5445f68b9d17268c6def7cfc4a2dd1fb971c53', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {