kritzel-stencil 0.0.143 → 0.0.145

package/dist/components/{p-fiFoOjv0.js → p-C3_LIgzd.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
-import { d as defineCustomElement$4 } from './p-C_hSH2nN.js';
-import { d as defineCustomElement$3 } from './p-gCHmJzc2.js';
-import { d as defineCustomElement$2 } from './p-D27d2rKT.js';
-import { d as defineCustomElement$1 } from './p-D_RcVGj0.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
+import { d as defineCustomElement$4 } from './p-8iFF5GHL.js';
+import { d as defineCustomElement$3 } from './p-NXPGXBZ2.js';
+import { d as defineCustomElement$2 } from './p-Bhtn9qay.js';
+import { d as defineCustomElement$1 } from './p-BHDOht0m.js';
 
 const kritzelControlBrushConfigCss = ":host{display:flex;flex-direction:column;width:100%}.expand-toggle{background:none;border:none;cursor:pointer;font-size:14px;line-height:1;padding:8px;color:var(--kritzel-color-palette-expand-toggle-color, #666666)}.expand-toggle:focus-visible{outline:var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3)}.expand-toggle:hover{color:var(--kritzel-color-palette-expand-toggle-hover-color, #333333)}";
 
@@ -43,20 +43,20 @@ const KritzelControlBrushConfig = /*@__PURE__*/ proxyCustomElement(class Kritzel
         this.toolChange.emit(this.tool);
     }
     render() {
-        return (h(Host, { key: '4b060826312e6d5a2117f5ba9522553af9b02d6f' }, h("div", { key: '0975a250184d5bb2d38cc60263bd718157230d8c', style: {
+        return (h(Host, { key: '8fe8c0564f491121c0c44c6ff4083034f92dbb67' }, h("div", { key: '3e8a69b827785976768bfc1e809126bee7c48c62', style: {
                 display: 'flex',
                 flexDirection: 'row',
                 alignItems: this.isExpanded ? 'flex-start' : 'center',
                 justifyContent: 'flex-start',
                 width: '100%',
                 gap: '8px',
-            } }, h("kritzel-color-palette", { key: 'df84a6fdda01bc7bf3aff42e3b88c4bd9dca500f', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: 'e43c19612807fc4f9cd1bf04f4fb79a048cfd62b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '915cce6c4744ad175f3836c946330882de840880', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: 'c07eebae3ba1785e2644c6b5a22d23f76be950fb', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
+            } }, h("kritzel-color-palette", { key: 'c9056f81cf47d81fef0a0f5743000dcd6633258a', colors: this.palette, selectedColor: this.tool.color, isExpanded: this.isExpanded, isOpaque: true, onColorChange: color => this.handleColorChange(color) }), h("button", { key: '2f307264b80a732d976edeb025d509bc1164606b', class: "expand-toggle", onClick: () => this.handleToggleExpand(), title: this.isExpanded ? 'Collapse' : 'Expand', style: this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' } }, h("kritzel-icon", { key: '08133ba0a23353b2bb3f87c685a7a0798b8dd16c', name: this.isExpanded ? 'chevron-up' : 'chevron-down' }))), h("kritzel-stroke-size", { key: '3de25cc80029ffdfdc173c4c79e937a7dc329743', selectedSize: this.tool.size, onSizeChange: event => this.handleSizeChange(event) })));
     }
     static get watchers() { return {
         "tool": ["handleToolChange"]
     }; }
     static get style() { return kritzelControlBrushConfigCss; }
-}, [257, "kritzel-control-brush-config", {
+}, [769, "kritzel-control-brush-config", {
         "tool": [1040],
         "isExpanded": [1028, "is-expanded"],
         "palette": [32]
@@ -98,6 +98,6 @@ function defineCustomElement() {
 }
 
 export { KritzelControlBrushConfig as K, defineCustomElement as d };
-//# sourceMappingURL=p-fiFoOjv0.js.map
+//# sourceMappingURL=p-C3_LIgzd.js.map
 
-//# sourceMappingURL=p-fiFoOjv0.js.map
+//# sourceMappingURL=p-C3_LIgzd.js.map

package/dist/components/{p-fiFoOjv0.js.map → p-C3_LIgzd.js.map}

@@ -1 +1 @@
-{"file":"p-fiFoOjv0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css?tag=kritzel-control-brush-config&encapsulation=shadow","src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:focus-visible {\r\n  outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}","import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true }) tool: KritzelBrushTool;\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State() palette: string[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: this.isExpanded ? 'flex-start' : 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-color-palette\r\n            colors={this.palette}\r\n            selectedColor={this.tool.color}\r\n            isExpanded={this.isExpanded}\r\n            isOpaque={true}\r\n            onColorChange={color => this.handleColorChange(color)}\r\n          ></kritzel-color-palette>\r\n\r\n          <button\r\n            class=\"expand-toggle\"\r\n            onClick={() => this.handleToggleExpand()}\r\n            title={this.isExpanded ? 'Collapse' : 'Expand'}\r\n            style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}\r\n          >\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-C3_LIgzd.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.css?tag=kritzel-control-brush-config&encapsulation=shadow","src/components/ui/kritzel-control-brush-config/kritzel-control-brush-config.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  width: 100%;\r\n}\r\n\r\n.expand-toggle {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  padding: 8px;\r\n  color: var(--kritzel-color-palette-expand-toggle-color, #666666);\r\n}\r\n\r\n.expand-toggle:focus-visible {\r\n  outline: var(--kritzel-color-palette-focus-outline, 2px auto #e3e3e3);\r\n}\r\n\r\n.expand-toggle:hover {\r\n  color: var(--kritzel-color-palette-expand-toggle-hover-color, #333333);\r\n}","import { Component, Host, Prop, h, Event, EventEmitter, Watch, State } from '@stencil/core';\r\nimport { KritzelBrushTool } from '../../../classes/tools/brush-tool.class';\r\n\r\n@Component({\r\n  tag: 'kritzel-control-brush-config',\r\n  styleUrl: 'kritzel-control-brush-config.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelControlBrushConfig {\r\n  @Prop({ mutable: true }) tool: KritzelBrushTool;\r\n  @Watch('tool')\r\n  handleToolChange(newTool: KritzelBrushTool) {\r\n    this.palette = newTool.palettes[newTool.type];\r\n  }\r\n  @Prop({ mutable: true }) isExpanded: boolean = false;\r\n\r\n  @Event() toolChange: EventEmitter<KritzelBrushTool>;\r\n\r\n  @State() palette: string[] = [];\r\n\r\n  componentWillLoad() {\r\n    this.palette = this.tool.palettes[this.tool.type];\r\n  }\r\n\r\n  handleToggleExpand() {\r\n    this.isExpanded = !this.isExpanded;\r\n  }\r\n\r\n  handleTypeChange(event: CustomEvent<'pen' | 'highlighter'>) {\r\n    this.palette = this.tool.palettes[event.detail];\r\n    this.tool.type = event.detail;\r\n    this.tool.color = this.palette[0];\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleColorChange(event: CustomEvent<string>) {\r\n    this.tool.color = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  handleSizeChange(event: CustomEvent<number>) {\r\n    this.tool.size = event.detail;\r\n    this.toolChange.emit(this.tool);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          style={{\r\n            display: 'flex',\r\n            flexDirection: 'row',\r\n            alignItems: this.isExpanded ? 'flex-start' : 'center',\r\n            justifyContent: 'flex-start',\r\n            width: '100%',\r\n            gap: '8px',\r\n          }}\r\n        >\r\n          <kritzel-color-palette\r\n            colors={this.palette}\r\n            selectedColor={this.tool.color}\r\n            isExpanded={this.isExpanded}\r\n            isOpaque={true}\r\n            onColorChange={color => this.handleColorChange(color)}\r\n          ></kritzel-color-palette>\r\n\r\n          <button\r\n            class=\"expand-toggle\"\r\n            onClick={() => this.handleToggleExpand()}\r\n            title={this.isExpanded ? 'Collapse' : 'Expand'}\r\n            style={this.palette.length > 6 ? { visibillity: 'visible' } : { visibility: 'hidden' }}\r\n          >\r\n            <kritzel-icon name={this.isExpanded ? 'chevron-up' : 'chevron-down'}></kritzel-icon>\r\n          </button>\r\n        </div>\r\n\r\n        <kritzel-stroke-size selectedSize={this.tool.size} onSizeChange={event => this.handleSizeChange(event)}></kritzel-stroke-size>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-DPxzgBs0.js → p-CIXPLjCu.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C9hrbrUN.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 
 const kritzelDropdownCss = ":host{display:inline-flex;vertical-align:middle;width:100%;}.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);-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}";
 
@@ -98,7 +98,7 @@ const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown e
         "value": ["externalValueChanged"]
     }; }
     static get style() { return kritzelDropdownCss; }
-}, [257, "kritzel-dropdown", {
+}, [769, "kritzel-dropdown", {
         "options": [16],
         "value": [1],
         "width": [1],
@@ -125,6 +125,6 @@ function defineCustomElement() {
 }
 
 export { KritzelDropdown as K, defineCustomElement as d };
-//# sourceMappingURL=p-DPxzgBs0.js.map
+//# sourceMappingURL=p-CIXPLjCu.js.map
 
-//# sourceMappingURL=p-DPxzgBs0.js.map
+//# sourceMappingURL=p-CIXPLjCu.js.map

package/dist/components/{p-DPxzgBs0.js.map → p-CIXPLjCu.js.map}

@@ -1 +1 @@
-{"file":"p-DPxzgBs0.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-dropdown/kritzel-dropdown.css?tag=kritzel-dropdown&encapsulation=shadow","src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex; /* Ensures the host shrinks/grows with the wrapper */\r\n  vertical-align: middle; /* Aligns with other inline-block or inline-flex elements */\r\n  width: 100%; /* Ensures the host takes full width of the parent */\r\n}\r\n\r\n.dropdown-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #333333;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  overflow: hidden;\r\n  height: 32px;\r\n  width: 100%;\r\n}\r\n\r\n.custom-select {\r\n  padding: 0 8px;\r\n  padding-right: 30px; \r\n  height: 100%;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  border-radius: 0; \r\n  border: none; \r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  outline: none;\r\n  font-size: inherit;\r\n  color: var(--kritzel-controls-text-color, #333333); /* Use CSS var with fallback */\r\n  -webkit-tap-highlight-color: transparent;\r\n\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n\r\n  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>');\r\n  background-size: 16px 16px;\r\n  background-repeat: no-repeat;\r\n  background-position: right 8px center; \r\n}\r\n\r\n.custom-select.has-suffix-border {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.custom-select.has-prefix-border {\r\n  border-left: 1px solid #333333; \r\n}\r\n\r\n::slotted(*) {\r\n  height: 100%; \r\n  box-sizing: border-box;\r\n}\r\n","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"],"version":3}
+{"file":"p-CIXPLjCu.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-dropdown/kritzel-dropdown.css?tag=kritzel-dropdown&encapsulation=shadow","src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex; /* Ensures the host shrinks/grows with the wrapper */\r\n  vertical-align: middle; /* Aligns with other inline-block or inline-flex elements */\r\n  width: 100%; /* Ensures the host takes full width of the parent */\r\n}\r\n\r\n.dropdown-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #333333;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  overflow: hidden;\r\n  height: 32px;\r\n  width: 100%;\r\n}\r\n\r\n.custom-select {\r\n  padding: 0 8px;\r\n  padding-right: 30px; \r\n  height: 100%;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  border-radius: 0; \r\n  border: none; \r\n  background-color: #fff;\r\n  cursor: pointer;\r\n  outline: none;\r\n  font-size: inherit;\r\n  color: var(--kritzel-controls-text-color, #333333); /* Use CSS var with fallback */\r\n  -webkit-tap-highlight-color: transparent;\r\n\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n\r\n  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>');\r\n  background-size: 16px 16px;\r\n  background-repeat: no-repeat;\r\n  background-position: right 8px center; \r\n}\r\n\r\n.custom-select.has-suffix-border {\r\n  border-right: 1px solid #333333; \r\n}\r\n\r\n.custom-select.has-prefix-border {\r\n  border-left: 1px solid #333333; \r\n}\r\n\r\n::slotted(*) {\r\n  height: 100%; \r\n  box-sizing: border-box;\r\n}\r\n","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"],"version":3}