kritzel-stencil 0.0.154 → 0.0.156

package/dist/collection/components/shared/kritzel-color-palette/kritzel-color-palette.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kritzel-color-palette.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-color-palette/kritzel-color-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,mBAAmB;IACtB,MAAM,GAAa,EAAE,CAAC;IACL,aAAa,GAAkB,IAAI,CAAC;IACrD,UAAU,GAAY,KAAK,CAAC;IAC5B,QAAQ,GAAY,KAAK,CAAC;IAEzB,WAAW,CAAuB;IAEnC,gBAAgB,CAAC,KAAa;QACpC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,CAAC;IAEO,eAAe;QACrB,MAAM,YAAY,GAAG,CAAC,CAAC;QACvB,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,MAAM,GAAG,GAAG,CAAC,CAAC;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,YAAY,CAAC,CAAC;QAC9D,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC;IAC5D,CAAC;IAED,MAAM;QACJ,MAAM,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAChF,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC;QAEzE,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,YAAY,EAAE,IAAI;oBAClB,UAAU,EAAE,IAAI,CAAC,UAAU;iBAC5B,EACD,KAAK,EAAE;oBACL,MAAM,EAAE,cAAc;iBACvB,IAEA,eAAe,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAC5B,WACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,UAAU,EAAE,IAAI,CAAC,aAAa,KAAK,KAAK;iBACzC,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC;gBAE3C,qBAAe,KAAK,EAAE,KAAK,GAAkB,CACzC,CACP,CAAC,CACE,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, EventEmitter, Event } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-color-palette',\r\n  styleUrl: 'kritzel-color-palette.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelColorPalette {\r\n  @Prop() colors: string[] = [];\r\n  @Prop({ mutable: true }) selectedColor: string | null = null;\r\n  @Prop() isExpanded: boolean = false;\r\n  @Prop() isOpaque: boolean = false;\r\n\r\n  @Event() colorChange: EventEmitter<string>;\r\n\r\n  private handleColorClick(color: string) {\r\n    this.selectedColor = color;\r\n    this.colorChange.emit(color);\r\n  }\r\n\r\n  private calculateHeight(): string {\r\n    const colorsPerRow = 6;\r\n    const rowHeight = 32;\r\n    const gap = 8;\r\n    const rowCount = Math.ceil(this.colors.length / colorsPerRow);\r\n    return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;\r\n  }\r\n\r\n  render() {\r\n    const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);\r\n    const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';\r\n\r\n    return (\r\n      <Host>\r\n        <div\r\n          class={{\r\n            'color-grid': true,\r\n            'expanded': this.isExpanded,\r\n          }}\r\n          style={{\r\n            height: expandedHeight,\r\n          }}\r\n        >\r\n          {displayedColors.map(color => (\r\n            <div\r\n              tabIndex={0}\r\n              class={{\r\n                'color-container': true,\r\n                'selected': this.selectedColor === color,\r\n              }}\r\n              onClick={() => this.handleColorClick(color)}\r\n            >\r\n              <kritzel-color value={color}></kritzel-color>\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,53 +0,0 @@
-:host {
-  display: inline-flex; /* Ensures the host shrinks/grows with the wrapper */
-  vertical-align: middle; /* Aligns with other inline-block or inline-flex elements */
-  width: 100%; /* Ensures the host takes full width of the parent */
-}
-
-.dropdown-wrapper {
-  display: flex;
-  align-items: center;
-  border: 1px solid #333333;
-  border-radius: var(--kritzel-controls-control-border-radius, 12px);
-  overflow: hidden;
-  height: 32px;
-  width: 100%;
-}
-
-.custom-select {
-  padding: 0 8px;
-  padding-right: 30px; 
-  height: 100%;
-  width: 100%;
-  box-sizing: border-box;
-  border-radius: 0; 
-  border: none; 
-  background-color: #fff;
-  cursor: pointer;
-  outline: none;
-  font-size: inherit;
-  color: var(--kritzel-controls-text-color, #333333); /* Use CSS var with fallback */
-  -webkit-tap-highlight-color: transparent;
-
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-
-  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
-  background-size: 16px 16px;
-  background-repeat: no-repeat;
-  background-position: right 8px center; 
-}
-
-.custom-select.has-suffix-border {
-  border-right: 1px solid #333333; 
-}
-
-.custom-select.has-prefix-border {
-  border-left: 1px solid #333333; 
-}
-
-::slotted(*) {
-  height: 100%; 
-  box-sizing: border-box;
-}

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

@@ -1,218 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class KritzelDropdown {
-    options = [];
-    optionsChanged() {
-        this.updateInternalValue(this.internalValue, true);
-    }
-    value;
-    externalValueChanged(newValue) {
-        if (newValue !== this.internalValue) {
-            this.updateInternalValue(newValue, false);
-        }
-    }
-    width;
-    selectStyles = {};
-    internalValue;
-    hasSuffixContent = false;
-    hasPrefixContent = false;
-    valueChanged;
-    suffixSlotElement;
-    prefixSlotElement;
-    componentWillLoad() {
-        this.updateInternalValue(this.value, false);
-        this.evaluateSuffixContent();
-        this.evaluatePrefixContent();
-    }
-    updateInternalValue(proposedValue, emitChange) {
-        let finalValue = proposedValue;
-        if (this.options && this.options.length > 0) {
-            const isValidValue = this.options.some(opt => opt.value === finalValue);
-            if (!finalValue || !isValidValue) {
-                finalValue = this.options[0].value;
-            }
-        }
-        else {
-            finalValue = undefined;
-        }
-        if (this.internalValue !== finalValue) {
-            this.internalValue = finalValue;
-            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
-                this.valueChanged.emit(this.internalValue);
-            }
-        }
-    }
-    handleSelectChange = (event) => {
-        const newValue = event.target.value;
-        if (this.internalValue !== newValue) {
-            this.internalValue = newValue;
-            this.valueChanged.emit(this.internalValue);
-        }
-    };
-    evaluateSuffixContent = () => {
-        if (this.suffixSlotElement) {
-            const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
-            if (this.hasSuffixContent !== newHasContent) {
-                this.hasSuffixContent = newHasContent;
-            }
-        }
-        else {
-            if (this.hasSuffixContent !== false) {
-                this.hasSuffixContent = false;
-            }
-        }
-    };
-    evaluatePrefixContent = () => {
-        if (this.prefixSlotElement) {
-            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
-            if (this.hasPrefixContent !== newHasContent) {
-                this.hasPrefixContent = newHasContent;
-            }
-        }
-        else {
-            if (this.hasPrefixContent !== false) {
-                this.hasPrefixContent = false;
-            }
-        }
-    };
-    render() {
-        const selectClasses = {
-            'custom-select': true,
-            'has-suffix-border': this.hasSuffixContent,
-            'has-prefix-border': this.hasPrefixContent,
-        };
-        return (h(Host, { key: 'f24911715685ced571843ba7be6631248c8519b7' }, h("div", { key: '520fdb74afdef8bd5228f76074e51981f44b910d', class: "dropdown-wrapper" }, h("slot", { key: 'cf6628437946b57ad0b27c066639e0b64b5a28f8', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("select", { key: '3203ccd5b9c8b84e8f41bddfcb07786e879f0035', class: selectClasses, style: { ...this.selectStyles, width: this.width }, onInput: this.handleSelectChange }, this.options.map(option => (h("option", { value: option.value, style: option.style, selected: option.value === this.internalValue }, option.label)))), h("slot", { key: 'd0abb52e082db81860c09d2c48b7c065adb406f3', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }))));
-    }
-    static get is() { return "kritzel-dropdown"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["kritzel-dropdown.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["kritzel-dropdown.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "options": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DropdownOption[]",
-                    "resolved": "DropdownOption[]",
-                    "references": {
-                        "DropdownOption": {
-                            "location": "local",
-                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx",
-                            "id": "src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx::DropdownOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[]"
-            },
-            "value": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "value"
-            },
-            "width": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "width"
-            },
-            "selectStyles": {
-                "type": "any",
-                "mutable": false,
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "select-styles",
-                "defaultValue": "{}"
-            }
-        };
-    }
-    static get states() {
-        return {
-            "internalValue": {},
-            "hasSuffixContent": {},
-            "hasPrefixContent": {}
-        };
-    }
-    static get events() {
-        return [{
-                "method": "valueChanged",
-                "name": "valueChanged",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-    static get watchers() {
-        return [{
-                "propName": "options",
-                "methodName": "optionsChanged"
-            }, {
-                "propName": "value",
-                "methodName": "externalValueChanged"
-            }];
-    }
-}
-//# sourceMappingURL=kritzel-dropdown.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kritzel-dropdown.js","sourceRoot":"","sources":["../../../../src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\nexport interface DropdownOption {\r\n  value: string;\r\n  label: string;\r\n  style?: any; // For individual option styling, e.g., font family\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-dropdown',\r\n  styleUrl: 'kritzel-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelDropdown {\r\n  @Prop() options: DropdownOption[] = [];\r\n  @Watch('options')\r\n  optionsChanged() {\r\n    this.updateInternalValue(this.internalValue, true);\r\n  }\r\n  @Prop() value: string;\r\n  @Watch('value')\r\n  externalValueChanged(newValue: string) {\r\n    if (newValue !== this.internalValue) {\r\n      this.updateInternalValue(newValue, false);\r\n    }\r\n  }\r\n  @Prop() width?: string;\r\n  @Prop() selectStyles?: any = {};\r\n\r\n  @State() internalValue: string;\r\n  @State() hasSuffixContent: boolean = false;\r\n  @State() hasPrefixContent: boolean = false;\r\n\r\n  @Event() valueChanged: EventEmitter<string>;\r\n\r\n  private suffixSlotElement?: HTMLSlotElement;\r\n  private prefixSlotElement?: HTMLSlotElement;\r\n\r\n  componentWillLoad() {\r\n    this.updateInternalValue(this.value, false);\r\n    this.evaluateSuffixContent();\r\n    this.evaluatePrefixContent();\r\n  }\r\n\r\n  private updateInternalValue(proposedValue: string, emitChange: boolean) {\r\n    let finalValue = proposedValue;\r\n    if (this.options && this.options.length > 0) {\r\n      const isValidValue = this.options.some(opt => opt.value === finalValue);\r\n      if (!finalValue || !isValidValue) {\r\n        finalValue = this.options[0].value;\r\n      }\r\n    } else {\r\n      finalValue = undefined;\r\n    }\r\n\r\n    if (this.internalValue !== finalValue) {\r\n      this.internalValue = finalValue;\r\n      if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {\r\n        this.valueChanged.emit(this.internalValue);\r\n      }\r\n    }\r\n  }\r\n\r\n  private handleSelectChange = (event: Event) => {\r\n    const newValue = (event.target as HTMLSelectElement).value;\r\n    if (this.internalValue !== newValue) {\r\n      this.internalValue = newValue;\r\n      this.valueChanged.emit(this.internalValue);\r\n    }\r\n  };\r\n\r\n  private evaluateSuffixContent = () => {\r\n    if (this.suffixSlotElement) {\r\n      const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasSuffixContent !== newHasContent) {\r\n        this.hasSuffixContent = newHasContent;\r\n      }\r\n    } else {\r\n      if (this.hasSuffixContent !== false) {\r\n        this.hasSuffixContent = false;\r\n      }\r\n    }\r\n  };\r\n\r\n  private evaluatePrefixContent = () => {\r\n    if (this.prefixSlotElement) {\r\n      const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasPrefixContent !== newHasContent) {\r\n        this.hasPrefixContent = newHasContent;\r\n      }\r\n    } else {\r\n      if (this.hasPrefixContent !== false) {\r\n        this.hasPrefixContent = false;\r\n      }\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const selectClasses = {\r\n      'custom-select': true,\r\n      'has-suffix-border': this.hasSuffixContent,\r\n      'has-prefix-border': this.hasPrefixContent,\r\n    };\r\n\r\n    return (\r\n      <Host>\r\n        <div class=\"dropdown-wrapper\">\r\n          <slot name=\"prefix\" ref={el => (this.prefixSlotElement = el as HTMLSlotElement)} onSlotchange={this.evaluatePrefixContent}></slot>\r\n          <select class={selectClasses} style={{ ...this.selectStyles, width: this.width }} onInput={this.handleSelectChange}>\r\n            {this.options.map(option => (\r\n              <option value={option.value} style={option.style} selected={option.value === this.internalValue}>\r\n                {option.label}\r\n              </option>\r\n            ))}\r\n          </select>\r\n          <slot name=\"suffix\" ref={el => (this.suffixSlotElement = el as HTMLSlotElement)} onSlotchange={this.evaluateSuffixContent}></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,10 +0,0 @@
-:host {
-  display: block;
-}
-
-.font-preview {
-  color: var(--kritzel-font-size-text-color, #333333);
-  line-height: 1;
-  text-align: center;
-  font-weight: bold;
-}

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

@@ -1,90 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class KritzelFont {
-    fontFamily = 'Arial, sans-serif';
-    size = 24;
-    color = '#000000';
-    render() {
-        return (h(Host, { key: '0a6f1d1326e9dde84a4122d79f75dc1c75ffe0fb' }, h("div", { key: '88a342d01c4150cd4fc5dacca23f7b9904edca52', class: "font-preview", style: {
-                fontFamily: this.fontFamily,
-                fontSize: `${this.size}px`,
-                color: this.color
-            } }, "A")));
-    }
-    static get is() { return "kritzel-font"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["kritzel-font.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["kritzel-font.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "fontFamily": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "font-family",
-                "defaultValue": "'Arial, sans-serif'"
-            },
-            "size": {
-                "type": "number",
-                "mutable": false,
-                "complexType": {
-                    "original": "number",
-                    "resolved": "number",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "size",
-                "defaultValue": "24"
-            },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "color",
-                "defaultValue": "'#000000'"
-            }
-        };
-    }
-}
-//# sourceMappingURL=kritzel-font.js.map

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

@@ -1 +0,0 @@
-{"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;IACd,UAAU,GAAW,mBAAmB,CAAC;IACzC,IAAI,GAAW,EAAE,CAAC;IAClB,KAAK,GAAW,SAAS,CAAC;IAElC,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() fontFamily: string = 'Arial, sans-serif';\r\n  @Prop() size: number = 24;\r\n  @Prop() 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.css

@@ -1,48 +0,0 @@
-:host {
-  display: flex; 
-  align-items: flex-start; 
-  gap: 8px; 
-  padding: 8px; 
-  box-sizing: border-box; 
-  width: 100%;
-}
-
-.font-style-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 42px;
-  height: 32px;
-  padding: 0;
-  border: none;
-  outline: none;
-  background: none;
-  cursor: pointer;
-  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);
-}
-
-.font-style-button.italic-text {
-  font-style: italic;
-}

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

@@ -1,114 +0,0 @@
-import { Host, h } from "@stencil/core";
-export class KritzelFontFamily {
-    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);
-            if (!this.selectedFontFamily || !isValidCurrentFont) {
-                this.selectedFontFamily = this.fontOptions[0].value;
-            }
-        }
-    }
-    handleDropdownValueChange = (event) => {
-        this.fontFamilyChange.emit(event.detail);
-    };
-    render() {
-        const dropdownOptions = this.fontOptions.map(option => ({
-            value: option.value,
-            label: option.label,
-            style: { fontFamily: option.value },
-        }));
-        return (h(Host, { key: '27d14ddb4a57b9cd7b936047b6ea6a9251a1ab27' }, h("kritzel-dropdown", { key: '20ea042c9a907dc1ac5e16a589a8856f87389e36', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: this.selectedFontFamily } }, h("button", { key: 'f63fed16477a327aadaeb54feefe35df1780e37d', class: "font-style-button", slot: "suffix" }, "B"), h("button", { key: '13b3089606c2e83b256ed2cec6513a9911016754', class: "font-style-button italic-text", slot: "suffix" }, "I"))));
-    }
-    static get is() { return "kritzel-font-family"; }
-    static get encapsulation() { return "shadow"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["kritzel-font-family.css"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["kritzel-font-family.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "fontOptions": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "FontOption[]",
-                    "resolved": "FontOption[]",
-                    "references": {
-                        "FontOption": {
-                            "location": "local",
-                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-font-family/kritzel-font-family.tsx",
-                            "id": "src/components/shared/kritzel-font-family/kritzel-font-family.tsx::FontOption"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "defaultValue": "[\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  ]"
-            },
-            "selectedFontFamily": {
-                "type": "string",
-                "mutable": true,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "selected-font-family"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "fontFamilyChange",
-                "name": "fontFamilyChange",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                }
-            }];
-    }
-}
-//# sourceMappingURL=kritzel-font-family.js.map

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

@@ -1 +0,0 @@
-{"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;IACpB,WAAW,GAAiB;QAClC,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;IAEuB,kBAAkB,CAAS;IAE3C,gBAAgB,CAAuB;IAEhD,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() 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 }) selectedFontFamily: string;\r\n\r\n  @Event() 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.css

@@ -1,30 +0,0 @@
-:host {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 8px;
-  box-sizing: border-box;
-}
-
-.size-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 4px;
-  cursor: pointer;
-  border: 2px solid transparent;
-  box-sizing: border-box;
-  border-radius: 50%;
-}
-
-.size-container:hover {
-  background-color: var(--kritzel-font-size-hover-background-color, #ebebeb);
-}
-
-.size-container.selected {
-  border-color: var(--kritzel-selection-border-color, #007AFF);
-  background-color: var(--kritzel-font-size-selected-background-color, #e0e0e0);
-}
-