kritzel-stencil 0.4.4 → 0.4.5

package/dist/components/p-B5oHmPJb.js

@@ -1 +1,97 @@
-import{p as i,H as o,c as e,h as t,d as r,t as l}from"./p-B43upypT.js";import{d as s}from"./p-DX2nriaq.js";import{d as n}from"./p-CdR76C4L.js";const a=i(class extends o{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.providerLogin=e(this,"providerLogin"),this.dialogClosed=e(this,"dialogClosed")}get host(){return this}providers=[];dialogTitle="Sign in";subtitle;isDialogOpen=!1;loadingProvider=null;providerLogin;dialogClosed;async open(){this.loadingProvider=null,this.isDialogOpen=!0}async close(){this.isDialogOpen=!1,this.loadingProvider=null}async setLoading(i){this.loadingProvider=i}handleProviderClick=i=>{this.loadingProvider||(this.loadingProvider=i.name,this.providerLogin.emit({provider:i.name}))};closeDialog=()=>{this.isDialogOpen=!1,this.loadingProvider=null,this.dialogClosed.emit()};render(){return t(r,{key:"d2b393ac37292a0cf88d0e18e9768ca666b238b2"},t("kritzel-dialog",{key:"6e302e9030b5da0baf307fe261285e484b3c1f08",dialogTitle:this.dialogTitle,isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small",contained:!0},t("div",{key:"f32b073d70acb3874dc3ab4c3905543067a543d8",class:"login-content"},this.subtitle&&t("p",{key:"42a6ec7d6c9ca0a14700bd13cbe8ee9edbbcc18b",class:"login-subtitle"},this.subtitle),t("div",{key:"cbb5497abd1c88fc364ac8bb7c3d356df6df0dad",class:"login-providers"},this.providers.map((i=>t("button",{key:i.name,class:{"provider-button":!0,"is-loading":this.loadingProvider===i.name,"is-disabled":null!==this.loadingProvider&&this.loadingProvider!==i.name},disabled:null!==this.loadingProvider&&this.loadingProvider!==i.name,onClick:()=>this.handleProviderClick(i)},this.loadingProvider===i.name?t("span",{class:"spinner"}):i.icon&&t("kritzel-icon",{name:i.icon,size:20}),t("span",{class:"provider-label"},i.label))))))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}"}},[513,"kritzel-login-dialog",{providers:[16],dialogTitle:[1,"dialog-title"],subtitle:[1],isDialogOpen:[32],loadingProvider:[32],open:[64],close:[64],setLoading:[64]}]);function d(){"undefined"!=typeof customElements&&["kritzel-login-dialog","kritzel-dialog","kritzel-icon"].forEach((i=>{switch(i){case"kritzel-login-dialog":customElements.get(l(i))||customElements.define(l(i),a);break;case"kritzel-dialog":customElements.get(l(i))||s();break;case"kritzel-icon":customElements.get(l(i))||n()}}))}export{a as K,d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$2 } from './p-DX2nriaq.js';
+import { d as defineCustomElement$1 } from './p-CdR76C4L.js';
+
+const kritzelLoginDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.login-content{display:flex;flex-direction:column;gap:20px}.login-subtitle{font-size:13px;color:var(--kritzel-login-dialog-subtitle-color, #666666);margin:0;line-height:1.5;text-align:center}.login-providers{display:flex;flex-direction:column;gap:10px}.provider-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px 16px;border:1px solid var(--kritzel-login-dialog-button-border-color, #e0e0e0);border-radius:8px;background:var(--kritzel-login-dialog-button-background, #ffffff);color:var(--kritzel-login-dialog-button-text-color, #333333);font-size:14px;font-weight:500;font-family:inherit;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}.provider-button:hover:not(:disabled){background:var(--kritzel-login-dialog-button-hover-background, #f5f5f5);border-color:var(--kritzel-login-dialog-button-hover-border-color, #cccccc)}.provider-button:active:not(:disabled){background:var(--kritzel-login-dialog-button-active-background, #ebebeb)}.provider-button:focus-visible{outline:revert;outline-offset:revert}.provider-button.is-disabled{opacity:0.5;cursor:default;pointer-events:none}.provider-button.is-loading{cursor:default}.provider-label{flex-shrink:0}.provider-button.is-loading .provider-label{opacity:0.7}@keyframes kritzel-login-spin{to{transform:rotate(360deg)}}.spinner{width:20px;height:20px;box-sizing:border-box;display:block;flex-shrink:0;border:2px solid var(--kritzel-login-dialog-spinner-color, #cccccc);border-top-color:var(--kritzel-login-dialog-spinner-active-color, #333333);border-radius:50%;animation:kritzel-login-spin 0.6s linear infinite}`;
+
+const KritzelLoginDialog = /*@__PURE__*/ proxyCustomElement(class KritzelLoginDialog extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.providerLogin = createEvent(this, "providerLogin");
+        this.dialogClosed = createEvent(this, "dialogClosed");
+    }
+    get host() { return this; }
+    /** Array of authentication provider buttons to render */
+    providers = [];
+    /** Dialog title */
+    dialogTitle = 'Sign in';
+    /** Optional subtitle text displayed below the title */
+    subtitle;
+    isDialogOpen = false;
+    loadingProvider = null;
+    /** Emitted when a provider button is clicked */
+    providerLogin;
+    /** Emitted when the dialog is closed */
+    dialogClosed;
+    /** Opens the login dialog */
+    async open() {
+        this.loadingProvider = null;
+        this.isDialogOpen = true;
+    }
+    /** Closes the login dialog */
+    async close() {
+        this.isDialogOpen = false;
+        this.loadingProvider = null;
+    }
+    /** Sets or clears the loading state on a provider button */
+    async setLoading(provider) {
+        this.loadingProvider = provider;
+    }
+    handleProviderClick = (provider) => {
+        if (this.loadingProvider)
+            return;
+        this.loadingProvider = provider.name;
+        this.providerLogin.emit({ provider: provider.name });
+    };
+    closeDialog = () => {
+        this.isDialogOpen = false;
+        this.loadingProvider = null;
+        this.dialogClosed.emit();
+    };
+    render() {
+        return (h(Host, { key: 'd2b393ac37292a0cf88d0e18e9768ca666b238b2' }, h("kritzel-dialog", { key: '6e302e9030b5da0baf307fe261285e484b3c1f08', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'f32b073d70acb3874dc3ab4c3905543067a543d8', class: "login-content" }, this.subtitle && (h("p", { key: '42a6ec7d6c9ca0a14700bd13cbe8ee9edbbcc18b', class: "login-subtitle" }, this.subtitle)), h("div", { key: 'cbb5497abd1c88fc364ac8bb7c3d356df6df0dad', class: "login-providers" }, this.providers.map(provider => (h("button", { key: provider.name, class: {
+                'provider-button': true,
+                'is-loading': this.loadingProvider === provider.name,
+                'is-disabled': this.loadingProvider !== null && this.loadingProvider !== provider.name,
+            }, disabled: this.loadingProvider !== null && this.loadingProvider !== provider.name, onClick: () => this.handleProviderClick(provider) }, this.loadingProvider === provider.name ? (h("span", { class: "spinner" })) : (provider.icon && h("kritzel-icon", { name: provider.icon, size: 20 })), h("span", { class: "provider-label" }, provider.label)))))))));
+    }
+    static get style() { return kritzelLoginDialogCss(); }
+}, [513, "kritzel-login-dialog", {
+        "providers": [16],
+        "dialogTitle": [1, "dialog-title"],
+        "subtitle": [1],
+        "isDialogOpen": [32],
+        "loadingProvider": [32],
+        "open": [64],
+        "close": [64],
+        "setLoading": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-login-dialog", "kritzel-dialog", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-login-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelLoginDialog);
+            }
+            break;
+        case "kritzel-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelLoginDialog as K, defineCustomElement as d };

package/dist/components/p-B6t5q-V4.js

@@ -1 +1,63 @@
-import{p as r,H as e,c as i,h as t,d as a,t as o}from"./p-B43upypT.js";const s=r(class extends e{constructor(r){super(),!1!==r&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange")}value=1;min=0;max=1;step=.01;previewColor="#000000";valueChange;handleInput(r){const e=parseFloat(r.target.value);this.value=e,this.valueChange.emit(e)}getPercentage(){return Math.round(100*this.value)}render(){const r=this.getPercentage();return t(a,{key:"a175945928dac5ae5b4464c0b11c4d812f8a3ef6"},t("div",{key:"a045d452d459577f8d657e00dd9189797dd4de66",class:"opacity-container"},t("div",{key:"11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5",class:"slider-wrapper"},t("input",{key:"2cbf72a10026c4201727208230b8832ea2309a76",type:"range",class:"opacity-slider",min:this.min,max:this.max,step:this.step,value:this.value,onInput:r=>this.handleInput(r),style:{"--slider-progress":`${r}%`,"--kritzel-opacity-slider-thumb-border-color":this.previewColor}}))))}static get style(){return":host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(     to right,     var(--kritzel-opacity-slider-active-color, #007AFF) 0%,     var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%   );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}"}},[513,"kritzel-opacity-slider",{value:[1026],min:[2],max:[2],step:[2],previewColor:[1,"preview-color"]}]);function l(){"undefined"!=typeof customElements&&["kritzel-opacity-slider"].forEach((r=>{"kritzel-opacity-slider"===r&&(customElements.get(o(r))||customElements.define(o(r),s))}))}export{s as K,l as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(     to right,     var(--kritzel-opacity-slider-active-color, #007AFF) 0%,     var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),     var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%   );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
+
+const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpacitySlider extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current opacity value (0 to 1) */
+    value = 1;
+    /** Minimum opacity value */
+    min = 0;
+    /** Maximum opacity value */
+    max = 1;
+    /** Step increment */
+    step = 0.01;
+    /** Color to display in the preview (optional) */
+    previewColor = '#000000';
+    valueChange;
+    handleInput(event) {
+        const input = event.target;
+        const newValue = parseFloat(input.value);
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getPercentage() {
+        return Math.round(this.value * 100);
+    }
+    render() {
+        const percentage = this.getPercentage();
+        return (h(Host, { key: 'a175945928dac5ae5b4464c0b11c4d812f8a3ef6' }, h("div", { key: 'a045d452d459577f8d657e00dd9189797dd4de66', class: "opacity-container" }, h("div", { key: '11a4217a4b6e1f0b1981a8fd8e03f505a9d4a3b5', class: "slider-wrapper" }, h("input", { key: '2cbf72a10026c4201727208230b8832ea2309a76', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+                '--slider-progress': `${percentage}%`,
+                '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
+            } })))));
+    }
+    static get style() { return kritzelOpacitySliderCss(); }
+}, [513, "kritzel-opacity-slider", {
+        "value": [1026],
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "previewColor": [1, "preview-color"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-opacity-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-opacity-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelOpacitySlider);
+            }
+            break;
+    } });
+}
+
+export { KritzelOpacitySlider as K, defineCustomElement as d };

package/dist/components/p-B8Xi4Clg.js

@@ -1 +1,43 @@
-import{p as t,H as e,h as o,d as s,t as i}from"./p-B43upypT.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow()}fontFamily="Arial, sans-serif";size=24;color="#000000";render(){return o(s,{key:"57369ac95d0c99a52a8580e7659ec10e0e8ab38e"},o("div",{key:"e8f128fd7b8d26debb2c4ad2075b27f969d731bd",class:"font-preview",style:{fontFamily:this.fontFamily,fontSize:`${this.size}px`,color:this.color}},"A"))}static get style(){return":host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}"}},[513,"kritzel-font",{fontFamily:[1,"font-family"],size:[2],color:[1]}]);function r(){"undefined"!=typeof customElements&&["kritzel-font"].forEach((t=>{"kritzel-font"===t&&(customElements.get(i(t))||customElements.define(i(t),n))}))}export{n as K,r as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelFontCss = () => `:host{display:block}.font-preview{color:var(--kritzel-font-size-text-color, #333333);line-height:1;text-align:center;font-weight:bold}`;
+
+const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    fontFamily = 'Arial, sans-serif';
+    size = 24;
+    color = '#000000';
+    render() {
+        return (h(Host, { key: '57369ac95d0c99a52a8580e7659ec10e0e8ab38e' }, h("div", { key: 'e8f128fd7b8d26debb2c4ad2075b27f969d731bd', class: "font-preview", style: {
+                fontFamily: this.fontFamily,
+                fontSize: `${this.size}px`,
+                color: this.color
+            } }, "A")));
+    }
+    static get style() { return kritzelFontCss(); }
+}, [513, "kritzel-font", {
+        "fontFamily": [1, "font-family"],
+        "size": [2],
+        "color": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelFont);
+            }
+            break;
+    } });
+}
+
+export { KritzelFont as K, defineCustomElement as d };

package/dist/components/p-BDzlx2hB.js

@@ -1 +1,135 @@
-import{p as e,H as i,c as t,h as n,d as r,t as o}from"./p-B43upypT.js";const s=e(class extends i{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=t(this,"valueChange")}value;min=Number.MIN_SAFE_INTEGER;max=Number.MAX_SAFE_INTEGER;step=1;label="";placeholder="";valueChange;inputValue="";onValueChange(e){this.inputValue=this.shouldShowEmpty(e)?"":String(e)}componentWillLoad(){this.inputValue=this.shouldShowEmpty(this.value)?"":String(this.value)}shouldShowEmpty(e){return void 0===e||e===1/0||e===-1/0}normalizeValue(e){return isNaN(e)?this.value??0:Math.min(this.max,Math.max(this.min,e))}getDecimalPlaces(){const e=String(this.step),i=e.indexOf(".");return-1===i?0:e.length-i-1}roundToStep(e){const i=this.getDecimalPlaces(),t=Math.pow(10,i);return Math.round(e*t)/t}handleInput=e=>{this.inputValue=e.target.value};handleBlur=()=>{this.commitValue()};handleKeyDown=e=>{"Enter"===e.key&&this.commitValue()};handleInvalid=e=>{e.preventDefault()};commitValue(){if(""===this.inputValue.trim())return this.value=void 0,void this.valueChange.emit(void 0);const e=parseFloat(this.inputValue),i=this.normalizeValue(e);this.value=i,this.inputValue=String(i),this.valueChange.emit(i)}handleIncrement=()=>{const e=parseFloat(this.inputValue),i=isNaN(e)?this.value??0:e,t=this.normalizeValue(this.roundToStep(i+this.step));this.value=t,this.inputValue=String(t),this.valueChange.emit(t)};handleDecrement=()=>{const e=parseFloat(this.inputValue),i=isNaN(e)?this.value??0:e,t=this.normalizeValue(this.roundToStep(i-this.step));this.value=t,this.inputValue=String(t),this.valueChange.emit(t)};render(){return n(r,{key:"eb766b22717d856d096bd1a4a44279f6ac994892"},n("div",{key:"2394e2b2af48f560e77e7a37b34d00656b0dd344",class:"input-container"},this.label&&n("label",{key:"d8889aa93d4a86fa841f4da1f0b97411ab039cb1",class:"input-label"},this.label),n("div",{key:"b55ae2edf164cdfcdda356119b148c8bfb8fbd24",class:"input-wrapper"},n("input",{key:"ee1f1663f19c5ca66d64b6c5142005da318e03e4",type:"number",class:"numeric-input",title:"",min:this.min===Number.MIN_SAFE_INTEGER?void 0:this.min,max:this.max===Number.MAX_SAFE_INTEGER?void 0:this.max,step:this.step,value:this.inputValue,placeholder:this.placeholder,onInput:this.handleInput,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,onInvalid:this.handleInvalid}),n("div",{key:"82e127b045e631616e6368c437473bbf9732445d",class:"spinner-buttons"},n("button",{key:"e7412dffccbdacbb5743ae2e2e7bd33c68e6fceb",type:"button",class:"spinner-button spinner-up",onClick:this.handleIncrement,tabIndex:-1,"aria-label":"Increase value"},n("svg",{key:"7e471bf2bee5d4d161fea2e838b26e2f28bb84d9",viewBox:"0 0 10 6",class:"spinner-icon"},n("path",{key:"69e4c80eed03b2ee2a044d07f35420b7618f4e75",d:"M1 5L5 1L9 5",stroke:"currentColor","stroke-width":"1.5",fill:"none","stroke-linecap":"round","stroke-linejoin":"round"}))),n("button",{key:"a0c2350d48c398f7396cebd973438c0e390d0aff",type:"button",class:"spinner-button spinner-down",onClick:this.handleDecrement,tabIndex:-1,"aria-label":"Decrease value"},n("svg",{key:"c1f6264d187936d5eb0cc43c0275dc2e2c93b854",viewBox:"0 0 10 6",class:"spinner-icon"},n("path",{key:"facbdd171b43868ec41b469b0d11d6c9bfcec3aa",d:"M1 1L5 5L9 1",stroke:"currentColor","stroke-width":"1.5",fill:"none","stroke-linecap":"round","stroke-linejoin":"round"})))))))}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return":host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}"}},[513,"kritzel-numeric-input",{value:[1026],min:[2],max:[2],step:[2],label:[1],placeholder:[1],inputValue:[32]},void 0,{value:[{onValueChange:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-numeric-input"].forEach((e=>{"kritzel-numeric-input"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{s as K,a as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelNumericInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-numeric-input-label-color, #333333)}.input-wrapper{display:flex;position:relative}.numeric-input{flex:1;padding:8px 36px 8px 12px;border:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:var(--kritzel-numeric-input-border-radius, 6px);font-size:14px;color:var(--kritzel-numeric-input-text-color, #333333);background-color:var(--kritzel-numeric-input-input-background, #ffffff);outline:none;transition:border-color 150ms ease;box-sizing:border-box}.numeric-input::-webkit-outer-spin-button,.numeric-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.numeric-input[type='number']{-moz-appearance:textfield}.numeric-input::selection{background-color:var(--kritzel-numeric-input-selection-background, #007AFF);color:var(--kritzel-numeric-input-selection-color, #ffffff)}.numeric-input:hover{border-color:var(--kritzel-numeric-input-hover-border-color, #cccccc)}.numeric-input:focus{border-color:var(--kritzel-numeric-input-focus-border-color, #0066ff);border-width:2px;padding:7px 35px 7px 11px}.spinner-buttons{position:absolute;right:1px;top:1px;bottom:1px;display:flex;flex-direction:column;border-left:1px solid var(--kritzel-numeric-input-border-color, #ebebeb);border-radius:0 var(--kritzel-numeric-input-spinner-border-radius, 5px) var(--kritzel-numeric-input-spinner-border-radius, 5px) 0;overflow:hidden}.spinner-button{flex:1;display:flex;align-items:center;justify-content:center;width:24px;padding:0;border:none;background-color:var(--kritzel-numeric-input-spinner-background, #f5f5f5);color:var(--kritzel-numeric-input-spinner-color, #666666);cursor:pointer;transition:background-color 150ms ease}.spinner-button:hover{background-color:var(--kritzel-numeric-input-spinner-hover-background, #ebebeb)}.spinner-button:active{background-color:var(--kritzel-numeric-input-spinner-active-background, #dddddd)}.spinner-up{border-bottom:1px solid var(--kritzel-numeric-input-border-color, #ebebeb)}.spinner-icon{width:10px;height:6px}`;
+
+const KritzelNumericInput = /*@__PURE__*/ proxyCustomElement(class KritzelNumericInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current numeric value (undefined when cleared) */
+    value;
+    /** Minimum allowed value */
+    min = Number.MIN_SAFE_INTEGER;
+    /** Maximum allowed value */
+    max = Number.MAX_SAFE_INTEGER;
+    /** Step increment for the input */
+    step = 1;
+    /** Label text displayed above the input */
+    label = '';
+    /** Placeholder text shown when input is empty */
+    placeholder = '';
+    /** Emitted when the value changes (after normalization) */
+    valueChange;
+    inputValue = '';
+    onValueChange(newValue) {
+        this.inputValue = this.shouldShowEmpty(newValue) ? '' : String(newValue);
+    }
+    componentWillLoad() {
+        this.inputValue = this.shouldShowEmpty(this.value) ? '' : String(this.value);
+    }
+    shouldShowEmpty(value) {
+        return value === undefined || value === Infinity || value === -Infinity;
+    }
+    normalizeValue(raw) {
+        if (isNaN(raw)) {
+            return this.value ?? 0;
+        }
+        return Math.min(this.max, Math.max(this.min, raw));
+    }
+    getDecimalPlaces() {
+        const stepStr = String(this.step);
+        const decimalIndex = stepStr.indexOf('.');
+        return decimalIndex === -1 ? 0 : stepStr.length - decimalIndex - 1;
+    }
+    roundToStep(value) {
+        const decimals = this.getDecimalPlaces();
+        const factor = Math.pow(10, decimals);
+        return Math.round(value * factor) / factor;
+    }
+    handleInput = (event) => {
+        const input = event.target;
+        this.inputValue = input.value;
+    };
+    handleBlur = () => {
+        this.commitValue();
+    };
+    handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            this.commitValue();
+        }
+    };
+    handleInvalid = (event) => {
+        event.preventDefault();
+    };
+    commitValue() {
+        if (this.inputValue.trim() === '') {
+            this.value = undefined;
+            this.valueChange.emit(undefined);
+            return;
+        }
+        const parsed = parseFloat(this.inputValue);
+        const normalized = this.normalizeValue(parsed);
+        this.value = normalized;
+        this.inputValue = String(normalized);
+        this.valueChange.emit(normalized);
+    }
+    handleIncrement = () => {
+        // Commit current input first if needed
+        const currentInput = parseFloat(this.inputValue);
+        const currentValue = !isNaN(currentInput) ? currentInput : (this.value ?? 0);
+        const newValue = this.normalizeValue(this.roundToStep(currentValue + this.step));
+        this.value = newValue;
+        this.inputValue = String(newValue);
+        this.valueChange.emit(newValue);
+    };
+    handleDecrement = () => {
+        // Commit current input first if needed
+        const currentInput = parseFloat(this.inputValue);
+        const currentValue = !isNaN(currentInput) ? currentInput : (this.value ?? 0);
+        const newValue = this.normalizeValue(this.roundToStep(currentValue - this.step));
+        this.value = newValue;
+        this.inputValue = String(newValue);
+        this.valueChange.emit(newValue);
+    };
+    render() {
+        return (h(Host, { key: 'eb766b22717d856d096bd1a4a44279f6ac994892' }, h("div", { key: '2394e2b2af48f560e77e7a37b34d00656b0dd344', class: "input-container" }, this.label && h("label", { key: 'd8889aa93d4a86fa841f4da1f0b97411ab039cb1', class: "input-label" }, this.label), h("div", { key: 'b55ae2edf164cdfcdda356119b148c8bfb8fbd24', class: "input-wrapper" }, h("input", { key: 'ee1f1663f19c5ca66d64b6c5142005da318e03e4', type: "number", class: "numeric-input", title: "", min: this.min === Number.MIN_SAFE_INTEGER ? undefined : this.min, max: this.max === Number.MAX_SAFE_INTEGER ? undefined : this.max, step: this.step, value: this.inputValue, placeholder: this.placeholder, onInput: this.handleInput, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, onInvalid: this.handleInvalid }), h("div", { key: '82e127b045e631616e6368c437473bbf9732445d', class: "spinner-buttons" }, h("button", { key: 'e7412dffccbdacbb5743ae2e2e7bd33c68e6fceb', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '7e471bf2bee5d4d161fea2e838b26e2f28bb84d9', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '69e4c80eed03b2ee2a044d07f35420b7618f4e75', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: 'a0c2350d48c398f7396cebd973438c0e390d0aff', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: 'c1f6264d187936d5eb0cc43c0275dc2e2c93b854', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'facbdd171b43868ec41b469b0d11d6c9bfcec3aa', d: "M1 1L5 5L9 1", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))))))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+    static get style() { return kritzelNumericInputCss(); }
+}, [513, "kritzel-numeric-input", {
+        "value": [1026],
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "label": [1],
+        "placeholder": [1],
+        "inputValue": [32]
+    }, undefined, {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-numeric-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-numeric-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelNumericInput);
+            }
+            break;
+    } });
+}
+
+export { KritzelNumericInput as K, defineCustomElement as d };

package/dist/components/p-BFTU3MAI.js

@@ -1 +1,7 @@
-var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};function n(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}export{e as c,n as g}
+var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+export { commonjsGlobal as c, getDefaultExportFromCjs as g };

package/dist/components/p-BFYtCsZu.js

@@ -1 +1,56 @@
-import{p as e,H as t,c as l,h as r,d as i,t as o}from"./p-B43upypT.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=l(this,"valueChange")}value="transparent";valueChange;handleFillChange(e){this.value=e,this.valueChange.emit(e)}renderFillIcon(e){const t="var(--kritzel-global-text-primary)";return r("svg",{viewBox:"0 0 24 24",class:"fill-icon"},r("rect","transparent"===e?{x:"4",y:"4",width:"16",height:"16",rx:"2",fill:"none",stroke:t,"stroke-width":"2"}:{x:"4",y:"4",width:"16",height:"16",rx:"2",fill:t,stroke:t,"stroke-width":"2"}))}render(){return r(i,{key:"6d38a9af2e4c4c7f86ab994c63fc074007c86b48"},r("div",{key:"cf58f26cb0e56e274873d11024209c6908d317bb",class:"fill-row"},r("button",{key:"c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d",class:{"fill-option":!0,selected:"transparent"===this.value},onClick:()=>this.handleFillChange("transparent"),title:"Transparent background"},this.renderFillIcon("transparent")),r("button",{key:"5d6ede439b5d5e55598cd8c20b5851fb9f210463",class:{"fill-option":!0,selected:"filled"===this.value},onClick:()=>this.handleFillChange("filled"),title:"Filled background"},this.renderFillIcon("filled"))))}static get style(){return":host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}"}},[513,"kritzel-shape-fill",{value:[1025]}]);function n(){"undefined"!=typeof customElements&&["kritzel-shape-fill"].forEach((e=>{"kritzel-shape-fill"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{s as K,n as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelShapeFillCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}`;
+
+const KritzelShapeFill = /*@__PURE__*/ proxyCustomElement(class KritzelShapeFill extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current fill type */
+    value = 'transparent';
+    valueChange;
+    handleFillChange(type) {
+        this.value = type;
+        this.valueChange.emit(type);
+    }
+    renderFillIcon(type) {
+        const strokeColor = 'var(--kritzel-global-text-primary)';
+        if (type === 'transparent') {
+            return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "none", stroke: strokeColor, "stroke-width": "2" })));
+        }
+        // Filled
+        return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
+    }
+    render() {
+        return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
+                'fill-option': true,
+                'selected': this.value === 'transparent',
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
+                'fill-option': true,
+                'selected': this.value === 'filled',
+            }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
+    }
+    static get style() { return kritzelShapeFillCss(); }
+}, [513, "kritzel-shape-fill", {
+        "value": [1025]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-shape-fill"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-shape-fill":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelShapeFill);
+            }
+            break;
+    } });
+}
+
+export { KritzelShapeFill as K, defineCustomElement as d };

package/dist/components/p-BI2ng9I_.js

@@ -1 +1,62 @@
-import{p as e,H as t,c as i,h as s,d as r,t as o}from"./p-B43upypT.js";import{d as n}from"./p-B8Xi4Clg.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=i(this,"sizeChange")}sizes=[8,10,12,16,20,24];selectedSize=null;fontFamily="Arial";sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}handleKeyDown(e,t){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.handleSizeClick(t))}render(){return s(r,{key:"298b8c232c4d96583f4899efea86482ae8ebd319"},(this.sizes??[]).map((e=>s("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e),onKeyDown:t=>this.handleKeyDown(t,e)},s("kritzel-font",{fontFamily:this.fontFamily,size:e,color:"var(--kritzel-global-text-primary)"})))))}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-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)}"}},[513,"kritzel-font-size",{sizes:[16],selectedSize:[1026,"selected-size"],fontFamily:[1,"font-family"]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-size","kritzel-font"].forEach((e=>{switch(e){case"kritzel-font-size":customElements.get(o(e))||customElements.define(o(e),l);break;case"kritzel-font":customElements.get(o(e))||n()}}))}export{l as K,a as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-B8Xi4Clg.js';
+
+const kritzelFontSizeCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:4px;cursor:var(--kritzel-global-pointer-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)}`;
+
+const KritzelFontSize = /*@__PURE__*/ proxyCustomElement(class KritzelFontSize extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange");
+    }
+    sizes = [8, 10, 12, 16, 20, 24];
+    selectedSize = null;
+    fontFamily = 'Arial';
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    handleKeyDown(event, size) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleSizeClick(size);
+        }
+    }
+    render() {
+        const color = 'var(--kritzel-global-text-primary)';
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: '298b8c232c4d96583f4899efea86482ae8ebd319' }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size), onKeyDown: event => this.handleKeyDown(event, size) }, h("kritzel-font", { fontFamily: this.fontFamily, size: size, color: color }))))));
+    }
+    static get style() { return kritzelFontSizeCss(); }
+}, [513, "kritzel-font-size", {
+        "sizes": [16],
+        "selectedSize": [1026, "selected-size"],
+        "fontFamily": [1, "font-family"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font-size", "kritzel-font"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font-size":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelFontSize);
+            }
+            break;
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelFontSize as K, defineCustomElement as d };