kritzel-stencil 0.4.22 → 0.4.24

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

@@ -1,58 +1,58 @@
-:host {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.avatar-image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-.avatar-initials {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  color: var(--kritzel-avatar-initials-color, #ffffff);
-  font-weight: var(--kritzel-avatar-initials-font-weight, 500);
-  font-family: var(--kritzel-avatar-initials-font-family, sans-serif);
-  line-height: 1;
-}
-
-.avatar-default {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: var(--kritzel-avatar-default-background, #e0e0e0);
-  color: var(--kritzel-avatar-default-color, #9e9e9e);
-}
-
-.avatar-default svg {
-  width: 60%;
-  height: 60%;
-}
-
-:host(.has-image) {
-  border: var(--kritzel-avatar-border, none);
-}
-
-:host(.has-initials) {
-  border: var(--kritzel-avatar-border, none);
-}
-
-:host(.has-default) {
-  border: var(--kritzel-avatar-border, none);
-}
+:host {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.avatar-initials {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  color: var(--kritzel-avatar-initials-color, #ffffff);
+  font-weight: var(--kritzel-avatar-initials-font-weight, 500);
+  font-family: var(--kritzel-avatar-initials-font-family, sans-serif);
+  line-height: 1;
+}
+
+.avatar-default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--kritzel-avatar-default-background, #e0e0e0);
+  color: var(--kritzel-avatar-default-color, #9e9e9e);
+}
+
+.avatar-default svg {
+  width: 60%;
+  height: 60%;
+}
+
+:host(.has-image) {
+  border: var(--kritzel-avatar-border, none);
+}
+
+:host(.has-initials) {
+  border: var(--kritzel-avatar-border, none);
+}
+
+:host(.has-default) {
+  border: var(--kritzel-avatar-border, none);
+}

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

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '90ce966bb2a374e68c544906c8c746df6cc01038', style: containerStyles, class: {
+        return (h(Host, { key: '020217baf0aa2736af33c5a003e89406322e5fdc', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '6799f4ad45c7d40ebaf640f191171ed6a5f14ae9', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '2f54dad2260ebf38cfe8c57e28899c98729e7e38', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: '98cdcda64b900994b61a03179be9f2af17c489e8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '64e6a6ee67017c927dce0b51810a5bb02fc0d6d1', class: "avatar-default" }, h("svg", { key: '42f99637a3c23aaf10fa7c99753347ede1d518c0', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '28b52a68b36e98b0e14891fd225457be65f1bb46', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'a97435d30044a37f15ce72ed51439e9c682c0aa3', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '6d0893d3f15a2d68a93f3fcf1b0fbd36786be0eb', class: "avatar-default" }, h("svg", { key: '688a9a1f88e22f4f3c3085675618b5f5f460d8f7', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'd12c67677e162534b2ad92535acc6a836df179c7', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-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/shared/kritzel-brush-style/kritzel-brush-style.js

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

package/dist/collection/components/shared/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: 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/shared/kritzel-button/kritzel-button.js

@@ -15,11 +15,11 @@ export class KritzelButton {
         this.buttonClick.emit();
     };
     render() {
-        return (h(Host, { key: '51621006f6b085db2b43accf52192f0674d2c50c' }, h("button", { key: '01ab2d96abe5ad34285e59f6fec66f6b21e91849', type: this.type, class: {
+        return (h(Host, { key: 'ef407708a606dab1ac691b6c6f1c319ba5529e3b' }, h("button", { key: '5b26e220334c3ee20e0af433792496568067ca8c', type: this.type, class: {
                 'kritzel-button': true,
                 [this.variant]: true,
                 'disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '4b085139ea85ad9f836059f4cf2dde15b948e0e2' }))));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '5272679ba3b67e3d7c0ec1b2ef0b3829ef4204ba' }))));
     }
     static get is() { return "kritzel-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/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/shared/kritzel-color/kritzel-color.js

@@ -38,13 +38,13 @@ export class KritzelColorComponent {
     render() {
         const resolvedColor = this.resolveColor();
         const isColorVeryLight = this.isLightColor(resolvedColor);
-        return (h(Host, { key: 'e797bfa6a2aed82d1913ec2f02f8b25a063564e5' }, h("div", { key: '5b62fcdbb2985b90fe0d7c7b65b507ec1c55e240', class: "checkerboard-bg", style: {
+        return (h(Host, { key: '30141c62ff9860237c22044f2c5101ed6516ff82' }, h("div", { key: '61818f71999a782871d4ec9ba00ef0c77e3c8b54', class: "checkerboard-bg", style: {
                 width: `${this.size}px`,
                 height: `${this.size}px`,
                 borderRadius: '50%',
                 display: 'inline-block',
                 position: 'relative',
-            } }, h("div", { key: '2d62717ebf81be93219ebda7071c0ba992d7441a', class: {
+            } }, h("div", { key: 'a064cc28a354db78f6637c92f38e59ac4ebf1f95', class: {
                 'color-circle': true,
                 'white': isColorVeryLight,
             }, style: {

package/dist/collection/components/shared/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/shared/kritzel-color-palette/kritzel-color-palette.js

@@ -33,7 +33,7 @@ export class KritzelColorPalette {
     render() {
         const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
         const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
-        return (h(Host, { key: '9a637b3a6946384a889f54dc3a635da7ff014439' }, h("div", { key: '4db8bbc7a234bfed26b60ed306a5f999875e2195', class: {
+        return (h(Host, { key: '0fd02d97504f68ffbbac2fb2b6af702f0de71038' }, h("div", { key: '5f546350d0c2d528165987a177b8bd9d0015ccba', class: {
                 'color-grid': true,
                 'expanded': this.isExpanded,
             }, style: {