kritzel-stencil 0.0.129 → 0.0.131

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

@@ -1,10 +1,8 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFont {
-    constructor() {
-        this.fontFamily = 'Arial, sans-serif';
-        this.size = 24;
-        this.color = '#000000';
-    }
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
     render() {
         return (h(Host, { key: 'd318355704f1bf66468dd793e5e38da827076d3b' }, h("div", { key: '447b4fba97f5d1900060859943438733667aed08', class: "font-preview", style: {
                 fontFamily: this.fontFamily,

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

@@ -1 +1 @@
-{"version":3,"file":"kritzel-font.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font/kritzel-font.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IALxB;QAOE,eAAU,GAAW,mBAAmB,CAAC;QAGzC,SAAI,GAAW,EAAE,CAAC;QAGlB,UAAK,GAAW,SAAS,CAAC;KAkB3B;IAhBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,QAGG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font',\r\n  styleUrl: 'kritzel-font.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFont {\r\n  @Prop()\r\n  fontFamily: string = 'Arial, sans-serif';\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  @Prop()\r\n  color: string = '#000000';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"font-preview\"\r\n          style={{\r\n            fontFamily: this.fontFamily,\r\n            fontSize: `${this.size}px`,\r\n            color: this.color\r\n          }}\r\n        >\r\n          A\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-font.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font/kritzel-font.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,WAAW;IAEtB,UAAU,GAAW,mBAAmB,CAAC;IAGzC,IAAI,GAAW,EAAE,CAAC;IAGlB,KAAK,GAAW,SAAS,CAAC;IAE1B,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI,CAAC,UAAU;oBAC3B,QAAQ,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;oBAC1B,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,QAGG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font',\r\n  styleUrl: 'kritzel-font.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFont {\r\n  @Prop()\r\n  fontFamily: string = 'Arial, sans-serif';\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  @Prop()\r\n  color: string = '#000000';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"font-preview\"\r\n          style={{\r\n            fontFamily: this.fontFamily,\r\n            fontSize: `${this.size}px`,\r\n            color: this.color\r\n          }}\r\n        >\r\n          A\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,22 +1,19 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFontFamily {
-    constructor() {
-        this.fontOptions = [
-            { value: 'arial', label: 'Arial' },
-            { value: 'verdana', label: 'Verdana' },
-            { value: 'helvetica', label: 'Helvetica' },
-            { value: 'tahoma', label: 'Tahoma' },
-            { value: 'trebuchet ms', label: 'Trebuchet MS' },
-            { value: 'times new roman', label: 'Times New Roman' },
-            { value: 'georgia', label: 'Georgia' },
-            { value: 'garamond', label: 'Garamond' },
-            { value: 'courier new', label: 'Courier New' },
-            { value: 'brush script mt', label: 'Brush Script MT' },
-        ];
-        this.handleDropdownValueChange = (event) => {
-            this.fontFamilyChange.emit(event.detail);
-        };
-    }
+    fontOptions = [
+        { value: 'arial', label: 'Arial' },
+        { value: 'verdana', label: 'Verdana' },
+        { value: 'helvetica', label: 'Helvetica' },
+        { value: 'tahoma', label: 'Tahoma' },
+        { value: 'trebuchet ms', label: 'Trebuchet MS' },
+        { value: 'times new roman', label: 'Times New Roman' },
+        { value: 'georgia', label: 'Georgia' },
+        { value: 'garamond', label: 'Garamond' },
+        { value: 'courier new', label: 'Courier New' },
+        { value: 'brush script mt', label: 'Brush Script MT' },
+    ];
+    selectedFontFamily;
+    fontFamilyChange;
     componentWillLoad() {
         if (this.fontOptions && this.fontOptions.length > 0) {
             const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);
@@ -25,6 +22,9 @@ export class KritzelFontFamily {
             }
         }
     }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
     render() {
         const dropdownOptions = this.fontOptions.map(option => ({
             value: option.value,

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

@@ -1 +1 @@
-{"version":3,"file":"kritzel-font-family.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAY9E,MAAM,OAAO,iBAAiB;IAL9B;QAOE,gBAAW,GAAiB;YAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;YAC1C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;YACpC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;YAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;YACtD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;YACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;YACxC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;YAC9C,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;SACvD,CAAC;QAiBM,8BAAyB,GAAG,CAAC,KAA0B,EAAE,EAAE;YACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,CAAC,CAAC;KAuBH;IAlCC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAMD,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;SACpC,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBAErD,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,QAAW;gBAC1D,+DAAQ,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,QAAW,CACrD,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-font-family',\r\n  styleUrl: 'kritzel-font-family.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n  @Prop() \r\n  fontOptions: FontOption[] = [\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ];\r\n\r\n  @Prop({ mutable: true }) \r\n  selectedFontFamily: string;\r\n\r\n  @Event()\r\n  fontFamilyChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    if (this.fontOptions && this.fontOptions.length > 0) {\r\n      const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n      if (!this.selectedFontFamily || !isValidCurrentFont) {\r\n        this.selectedFontFamily = this.fontOptions[0].value;\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n    this.fontFamilyChange.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    const dropdownOptions = this.fontOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n      style: { fontFamily: option.value },\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown\r\n          options={dropdownOptions}\r\n          value={this.selectedFontFamily}\r\n          onValueChanged={this.handleDropdownValueChange}\r\n          selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n        >\r\n          <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n          <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-font-family.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-family/kritzel-font-family.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAY9E,MAAM,OAAO,iBAAiB;IAE5B,WAAW,GAAiB;QAC1B,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;QAClC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE;QAC1C,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE;QACpC,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,cAAc,EAAE;QAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;QACtD,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;QACtC,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE;QACxC,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE;QAC9C,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE;KACvD,CAAC;IAGF,kBAAkB,CAAS;IAG3B,gBAAgB,CAAuB;IAEvC,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpD,MAAM,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,CAAC;YAC/F,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YACtD,CAAC;QACH,CAAC;IACH,CAAC;IAEO,yBAAyB,GAAG,CAAC,KAA0B,EAAE,EAAE;QACjE,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;YACtD,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE;SACpC,CAAC,CAAC,CAAC;QAEJ,OAAO,CACL,EAAC,IAAI;YACH,yEACE,OAAO,EAAE,eAAe,EACxB,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,cAAc,EAAE,IAAI,CAAC,yBAAyB,EAC9C,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,kBAAkB,EAAE;gBAErD,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,QAAQ,QAAW;gBAC1D,+DAAQ,KAAK,EAAC,+BAA+B,EAAC,IAAI,EAAC,QAAQ,QAAW,CACrD,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\nexport interface FontOption {\r\n  value: string;\r\n  label: string;\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-font-family',\r\n  styleUrl: 'kritzel-font-family.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontFamily {\r\n  @Prop() \r\n  fontOptions: FontOption[] = [\r\n    { value: 'arial', label: 'Arial' },\r\n    { value: 'verdana', label: 'Verdana' },\r\n    { value: 'helvetica', label: 'Helvetica' },\r\n    { value: 'tahoma', label: 'Tahoma' },\r\n    { value: 'trebuchet ms', label: 'Trebuchet MS' },\r\n    { value: 'times new roman', label: 'Times New Roman' },\r\n    { value: 'georgia', label: 'Georgia' },\r\n    { value: 'garamond', label: 'Garamond' },\r\n    { value: 'courier new', label: 'Courier New' },\r\n    { value: 'brush script mt', label: 'Brush Script MT' },\r\n  ];\r\n\r\n  @Prop({ mutable: true }) \r\n  selectedFontFamily: string;\r\n\r\n  @Event()\r\n  fontFamilyChange: EventEmitter<string>;\r\n\r\n  componentWillLoad() {\r\n    if (this.fontOptions && this.fontOptions.length > 0) {\r\n      const isValidCurrentFont = this.fontOptions.some(opt => opt.value === this.selectedFontFamily);\r\n      if (!this.selectedFontFamily || !isValidCurrentFont) {\r\n        this.selectedFontFamily = this.fontOptions[0].value;\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleDropdownValueChange = (event: CustomEvent<string>) => {\r\n    this.fontFamilyChange.emit(event.detail);\r\n  };\r\n\r\n  render() {\r\n    const dropdownOptions = this.fontOptions.map(option => ({\r\n      value: option.value,\r\n      label: option.label,\r\n      style: { fontFamily: option.value },\r\n    }));\r\n\r\n    return (\r\n      <Host>\r\n        <kritzel-dropdown\r\n          options={dropdownOptions}\r\n          value={this.selectedFontFamily}\r\n          onValueChanged={this.handleDropdownValueChange}\r\n          selectStyles={{ fontFamily: this.selectedFontFamily }}\r\n        >\r\n          <button class=\"font-style-button\" slot=\"suffix\">B</button>\r\n          <button class=\"font-style-button italic-text\" slot=\"suffix\">I</button>\r\n        </kritzel-dropdown>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,10 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class KritzelFontSize {
-    constructor() {
-        this.sizes = [8, 10, 12, 16, 20, 24];
-        this.selectedSize = null;
-        this.fontFamily = 'Arial';
-    }
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
     handleSizeClick(size) {
         this.selectedSize = size;
         this.sizeChange.emit(size);

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

@@ -1 +1 @@
-{"version":3,"file":"kritzel-font-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAOE,UAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QAG1C,iBAAY,GAAkB,IAAI,CAAC;QAGnC,eAAU,GAAW,OAAO,CAAC;KA2B9B;IAtBS,eAAe,CAAC,IAAY;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;aACvC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAEzC,oBAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font-size',\r\n  styleUrl: 'kritzel-font-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n  @Prop()\r\n  sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n\r\n  @Prop({ mutable: true })\r\n  selectedSize: number | null = null;\r\n\r\n  @Prop()\r\n  fontFamily: string = 'Arial';\r\n\r\n  @Event()\r\n  sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-font-size.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-font-size/kritzel-font-size.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAE1B,KAAK,GAAa,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAG1C,YAAY,GAAkB,IAAI,CAAC;IAGnC,UAAU,GAAW,OAAO,CAAC;IAG7B,UAAU,CAAuB;IAEzB,eAAe,CAAC,IAAY;QAClC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CACtB,WACE,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;aACvC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;YAEzC,oBAAc,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,IAAI,EAAE,IAAI,GAAiB,CAClE,CACP,CAAC,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font-size',\r\n  styleUrl: 'kritzel-font-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFontSize {\r\n  @Prop()\r\n  sizes: number[] = [8, 10, 12, 16, 20, 24];\r\n\r\n  @Prop({ mutable: true })\r\n  selectedSize: number | null = null;\r\n\r\n  @Prop()\r\n  fontFamily: string = 'Arial';\r\n\r\n  @Event()\r\n  sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-font fontFamily={this.fontFamily} size={size}></kritzel-font>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,9 +1,9 @@
 import { h, Host } from "@stencil/core";
 import { KritzelIconRegistry } from "../../../classes/registries/icon-registry.class";
 export class KritzelIcon {
-    constructor() {
-        this.size = 24;
-    }
+    name;
+    label;
+    size = 24;
     render() {
         const svgContent = KritzelIconRegistry.get(this.name);
         if (!svgContent) {

package/dist/collection/components/shared/kritzel-icon/kritzel-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"kritzel-icon.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-icon/kritzel-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAOtF,MAAM,OAAO,WAAW;IALxB;QAaE,SAAI,GAAW,EAAE,CAAC;KA0BnB;IAxBC,MAAM;QACJ,MAAM,UAAU,GAAG,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,wBAAwB,IAAI,CAAC,IAAI,0BAA0B,CAAC,CAAC;YAC3E,OAAO,YAAM,KAAK,EAAC,YAAY,gBAAa,eAAe,IAAI,CAAC,IAAI,YAAY,QAAU,CAAC;QAC7F,CAAC;QAED,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACzB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,MAAM;YACjB,2BACe,CAAC,IAAI,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,gBACxB,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,UAAU,GACf,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-icon',\r\n  styleUrl: 'kritzel-icon.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n  @Prop()\r\n  name: string;\r\n\r\n  @Prop()\r\n  label?: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  render() {\r\n    const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n    if (!svgContent) {\r\n      console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n      return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n    }\r\n\r\n    const styles = {\r\n      width: `${this.size}px`,\r\n      height: `${this.size}px`,\r\n    };\r\n\r\n    return (\r\n      <Host style={styles}>\r\n        <span\r\n          aria-hidden={!this.label}\r\n          role={this.label ? 'img' : undefined}\r\n          aria-label={this.label}\r\n          innerHTML={svgContent}\r\n        ></span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"kritzel-icon.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-icon/kritzel-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iDAAiD,CAAC;AAOtF,MAAM,OAAO,WAAW;IAEtB,IAAI,CAAS;IAGb,KAAK,CAAU;IAGf,IAAI,GAAW,EAAE,CAAC;IAElB,MAAM;QACJ,MAAM,UAAU,GAAG,mBAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAEtD,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,OAAO,CAAC,KAAK,CAAC,wBAAwB,IAAI,CAAC,IAAI,0BAA0B,CAAC,CAAC;YAC3E,OAAO,YAAM,KAAK,EAAC,YAAY,gBAAa,eAAe,IAAI,CAAC,IAAI,YAAY,QAAU,CAAC;QAC7F,CAAC;QAED,MAAM,MAAM,GAAG;YACb,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;YACvB,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI;SACzB,CAAC;QAEF,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,MAAM;YACjB,2BACe,CAAC,IAAI,CAAC,KAAK,EACxB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,gBACxB,IAAI,CAAC,KAAK,EACtB,SAAS,EAAE,UAAU,GACf,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Host } from '@stencil/core';\r\nimport { KritzelIconRegistry } from '../../../classes/registries/icon-registry.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-icon',\r\n  styleUrl: 'kritzel-icon.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelIcon {\r\n  @Prop()\r\n  name: string;\r\n\r\n  @Prop()\r\n  label?: string;\r\n\r\n  @Prop()\r\n  size: number = 24;\r\n\r\n  render() {\r\n    const svgContent = KritzelIconRegistry.get(this.name);\r\n\r\n    if (!svgContent) {\r\n      console.error(`[kritzel-icon] Icon \"${this.name}\" not found in registry.`);\r\n      return <span class=\"error-icon\" aria-label={`Error: Icon ${this.name} not found`}>?</span>;\r\n    }\r\n\r\n    const styles = {\r\n      width: `${this.size}px`,\r\n      height: `${this.size}px`,\r\n    };\r\n\r\n    return (\r\n      <Host style={styles}>\r\n        <span\r\n          aria-hidden={!this.label}\r\n          role={this.label ? 'img' : undefined}\r\n          aria-label={this.label}\r\n          innerHTML={svgContent}\r\n        ></span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,179 +1,26 @@
 :host {
+  position: relative;
   display: flex;
   flex-direction: column;
-  min-width: 180px;
-  padding: var(--kritzel-controls-padding, 8px);
-  background-color: var(--kritzel-controls-background-color, #ffffff);
-  border-radius: var(--kritzel-controls-border-radius, 12px);
-  box-shadow: var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  border: var(--kritzel-controls-border, 1px solid #ebebeb);
+  background-color: var(--kritzel-menu-background-color, #ffffff);
+  width: var(--kritzel-menu-width, 180px);
+  padding: var(--kritzel-menu-padding, 8px);
+  border-radius: var(--kritzel-menu-border-radius, 12px);
+  box-shadow: var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  border: var(--kritzel-menu-border, 1px solid #ebebeb);
   z-index: 2;
-  gap: var(--kritzel-menu-item-gap, 4px);
+  gap: var(--kritzel-menu-gap, 4px);
   overflow-y: auto;
   scrollbar-color: #ebebeb transparent;
   scrollbar-width: thin;
+  max-height: 300px;
 }
 
-:host(.mobile){
-  --kritzel-menu-item-button-hover-background-color: transparent;
-  --kritzel-menu-item-button-focus-background-color: transparent;
-}
-
-button {
-  all: unset;
-  background: transparent;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  font: inherit;
-  color: inherit;
-  line-height: inherit;
-  text-align: inherit;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border-radius: 0;
-  -webkit-tap-highlight-color: transparent;
-}
-
-button:focus {
-  outline: none;
-}
-
-:host(:focus) {
-  outline: none;
-}
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--kritzel-context-menu-item-padding, 8px);
-  border-radius: var(--kritzel-context-menu-item-border-radius, 12px);
-  cursor: pointer;
-  font-family: sans-serif;
-  font-size: var(--kritzel-context-menu-item-font-size, 14px);
-  color: var(--kritzel-context-menu-item-color, #333333);
-  gap: var(--kritzel-context-menu-item-gap, 12px);
-}
-
-.menu-item:focus,
-.menu-item:focus-within {
-  outline: none;
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item-label {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.menu-item:not(.disabled):not(.active):hover {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item:not(.disabled):not(.active):active {
-  background-color: var(--kritzel-context-menu-item-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.menu-item.active {
-  color: var(--kritzel-controls-background-color, #ffffff);
-  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);
-}
-
-.menu-item.active kritzel-icon {
-  filter: brightness(0) invert(1);
-}
-
-.menu-item.active:hover {
-  background-color: var(--kritzel-controls-control-selected-hover-background-color, #0075f1);
-}
-
-.menu-item.disabled {
-  color: var(--kritzel-context-menu-item-disabled-color, #aaaaaa);
-  background-color: transparent;
-  cursor: default;
-}
-
-.menu-item.child-open {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%)) !important;
-}
-
-.menu-item.active.menu-item.child-open {
-  background-color: var(--kritzel-controls-control-selected-active-background-color, #0075f1) !important;
-}
-
-.menu-item kritzel-icon {
-  opacity: 0.8;
-  flex-shrink: 0;
-}
-
-.menu-item.disabled kritzel-icon {
-  opacity: 0.4;
-}
-
-.menu-item.edit-mode input {
-  background: transparent;
-  border: none;
-  outline: none;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-  padding: 0;
-  width: 100%;
-  padding: 2px 0px;
-  border-bottom: 1px solid var(--kritzel-context-menu-item-color, #333333);
-}
-
-.menu-item.active.edit-mode input {
-  border-bottom: 1px solid var(--kritzel-controls-background-color, #ffffff);
-}
-
-.menu-item.edit-mode input::selection {
-  background-color: var(--kritzel-controls-control-selected-background-color, #007aff);
-  border-radius: 4px;
-  color: var(--kritzel-controls-background-color, #ffffff);
-}
-
-.menu-item.active.edit-mode input::selection {
-  background-color: var(--kritzel-menu-item-selected-input-background-color, #ffffff34);
-}
-
-.menu-item.edit-mode {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item.edit-mode.active {
-  background-color: var(--kritzel-context-menu-item-hover-background-color, #007aff);
-}
-
-.menu-item-button {
-  background: transparent;
-  border: none;
-  outline: none;
-  cursor: pointer;
-  padding: 4px;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.menu-item-button:hover {
-  background-color: var(--kritzel-menu-item-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.menu-item-button:focus {
-  background-color: var(--kritzel-menu-item-button-focus-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.edit-container,
-.view-container {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--kritzel-context-menu-item-gap, 4px);
+.has-open-child-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 3;
 }