kritzel-stencil 0.4.4 → 0.4.6

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 };

package/dist/components/p-BTzlrIxe.js

@@ -1 +1,194 @@
-import{p as t,H as i,c as e,h as s,d as o,t as n}from"./p-B43upypT.js";import{K as l}from"./p-WUdQqYnu.js";const h=t(class extends i{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.tooltipClosed=e(this,"tooltipClosed"),this.tooltipOpened=e(this,"tooltipOpened")}get host(){return this}isVisible=!1;anchorElement;triggerElement;offsetY=24;tooltipClosed;tooltipOpened;positionX=0;positionY=0;handleOutsideClick(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||this.close()}handleOutsidePointerDown(t){if(!this.isVisible)return;const i=t.composedPath(),e=i.some((t=>t===this.host)),s=this.triggerElement&&i.some((t=>t===this.triggerElement));e||s||(t.stopPropagation(),t.preventDefault(),this.close())}handleCloseAll(t){t.detail!==this.host&&this.close()}handleWindowResize(){this.calculateAdjustedPosition()}handleTriggerElementChange(t,i){i&&i.removeEventListener("click",this.handleTriggerClick),t&&t.addEventListener("click",this.handleTriggerClick)}handleVisibilityChange(t){t&&(this.calculateAdjustedPosition(),requestAnimationFrame((()=>{this.focusContent()})))}async open(){this.isVisible||(document.dispatchEvent(new CustomEvent("kritzelTooltipCloseAll",{detail:this.host})),this.isVisible=!0,this.tooltipOpened.emit())}async close(){this.isVisible&&(this.isVisible=!1,this.tooltipClosed.emit())}async toggle(){this.isVisible?this.close():this.open()}async focusContent(){const t=l.getFocusableElements(this.host);t.length>0&&t[0].focus()}connectedCallback(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentDidLoad(){this.triggerElement&&this.triggerElement.addEventListener("click",this.handleTriggerClick)}componentWillLoad(){this.calculateAdjustedPosition()}componentWillUpdate(){this.calculateAdjustedPosition()}disconnectedCallback(){this.triggerElement&&this.triggerElement.removeEventListener("click",this.handleTriggerClick)}handleTriggerClick=t=>{t.stopPropagation(),this.toggle()};calculateAdjustedPosition(){if(this.isVisible&&this.anchorElement){const t=this.anchorElement.getBoundingClientRect(),i=this.host.shadowRoot?.querySelector(".tooltip-content"),e=i?.getBoundingClientRect(),s=e?.width||0,o=12,n=window.innerWidth-s-o;this.positionX=Math.max(o,Math.min(t.left+t.width/2-s/2,n)),this.positionY=window.innerHeight-t.top+this.offsetY}}render(){return s(o,{key:"c0a4b682b3279b8c830dfa758284979e91c0ce2a",style:{position:"fixed",zIndex:"9999",transition:"opacity 0.3s ease-in-out, transform 0.3s ease-in-out",visibility:this.isVisible?"visible":"hidden",left:`${this.positionX}px`,bottom:`${this.positionY}px`}},s("div",{key:"09fd259d19d42db513161b645aa19206ae81c76a",class:"tooltip-content",onClick:t=>t.stopPropagation(),onPointerDown:t=>t.stopPropagation(),onMouseDown:t=>t.stopPropagation()},s("slot",{key:"f743c0ca8c415d71e0af53cdab8304df60dd9a37"})))}static get watchers(){return{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}}static get style(){return":host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}"}},[769,"kritzel-tooltip",{isVisible:[1028,"is-visible"],anchorElement:[16],triggerElement:[16],offsetY:[2,"offset-y"],positionX:[32],positionY:[32],open:[64],close:[64],toggle:[64],focusContent:[64]},[[4,"click","handleOutsideClick"],[6,"pointerdown","handleOutsidePointerDown"],[4,"kritzelTooltipCloseAll","handleCloseAll"],[9,"resize","handleWindowResize"]],{triggerElement:[{handleTriggerElementChange:0}],isVisible:[{handleVisibilityChange:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-tooltip"].forEach((t=>{"kritzel-tooltip"===t&&(customElements.get(n(t))||customElements.define(n(t),h))}))}export{h 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 { K as KritzelHTMLHelper } from './p-WUdQqYnu.js';
+
+const kritzelTooltipCss = () => `:host{width:auto}.tooltip-content{position:relative;padding:8px 12px;border-radius:4px;width:fit-content;background-color:var(--kritzel-tooltip-background-color, #ffffff);color:var(--kritzel-tooltip-color, #000000);padding:var(--kritzel-tooltip-padding, 12px);border:var(--kritzel-tooltip-border, 1px solid #ebebeb);border-radius:var(--kritzel-tooltip-border-radius, 16px);white-space:nowrap;box-shadow:var(--kritzel-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12))}`;
+
+const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.tooltipClosed = createEvent(this, "tooltipClosed");
+        this.tooltipOpened = createEvent(this, "tooltipOpened");
+    }
+    get host() { return this; }
+    isVisible = false;
+    anchorElement;
+    triggerElement;
+    offsetY = 24;
+    tooltipClosed;
+    tooltipOpened;
+    positionX = 0;
+    positionY = 0;
+    handleOutsideClick(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            this.close();
+        }
+    }
+    handleOutsidePointerDown(event) {
+        if (!this.isVisible)
+            return;
+        const path = event.composedPath();
+        const isInsideTooltip = path.some(el => el === this.host);
+        const isOnTrigger = this.triggerElement && path.some(el => el === this.triggerElement);
+        if (!isInsideTooltip && !isOnTrigger) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.close();
+        }
+    }
+    handleCloseAll(event) {
+        if (event.detail !== this.host) {
+            this.close();
+        }
+    }
+    handleWindowResize() {
+        this.calculateAdjustedPosition();
+    }
+    handleTriggerElementChange(newTrigger, oldTrigger) {
+        if (oldTrigger) {
+            oldTrigger.removeEventListener('click', this.handleTriggerClick);
+        }
+        if (newTrigger) {
+            newTrigger.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    handleVisibilityChange(newValue) {
+        if (newValue) {
+            this.calculateAdjustedPosition();
+            requestAnimationFrame(() => {
+                this.focusContent();
+            });
+        }
+    }
+    async open() {
+        if (this.isVisible)
+            return;
+        document.dispatchEvent(new CustomEvent('kritzelTooltipCloseAll', { detail: this.host }));
+        this.isVisible = true;
+        this.tooltipOpened.emit();
+    }
+    async close() {
+        if (!this.isVisible)
+            return;
+        this.isVisible = false;
+        this.tooltipClosed.emit();
+    }
+    async toggle() {
+        if (this.isVisible) {
+            this.close();
+        }
+        else {
+            this.open();
+        }
+    }
+    async focusContent() {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+    }
+    connectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    componentDidLoad() {
+        if (this.triggerElement) {
+            this.triggerElement.addEventListener('click', this.handleTriggerClick);
+        }
+    }
+    componentWillLoad() {
+        this.calculateAdjustedPosition();
+    }
+    componentWillUpdate() {
+        this.calculateAdjustedPosition();
+    }
+    disconnectedCallback() {
+        if (this.triggerElement) {
+            this.triggerElement.removeEventListener('click', this.handleTriggerClick);
+        }
+    }
+    handleTriggerClick = (event) => {
+        event.stopPropagation();
+        this.toggle();
+    };
+    calculateAdjustedPosition() {
+        if (this.isVisible && this.anchorElement) {
+            const anchorRect = this.anchorElement.getBoundingClientRect();
+            const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content');
+            const tooltipRect = tooltipContent?.getBoundingClientRect();
+            const tooltipWidth = tooltipRect?.width || 0;
+            const viewportPadding = 12; // Minimum distance from viewport edges
+            const anchorCenterX = anchorRect.left + anchorRect.width / 2;
+            // Step 1: Try to center the tooltip above the anchor
+            let idealLeft = anchorCenterX - tooltipWidth / 2;
+            // Step 2: Clamp to viewport bounds
+            const minLeft = viewportPadding;
+            const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;
+            // Apply clamping - adjust if tooltip would overflow
+            this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));
+            // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)
+            this.positionY = window.innerHeight - anchorRect.top + this.offsetY;
+        }
+    }
+    render() {
+        return (h(Host, { key: 'c0a4b682b3279b8c830dfa758284979e91c0ce2a', style: {
+                position: 'fixed',
+                zIndex: '9999',
+                transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
+                visibility: this.isVisible ? 'visible' : 'hidden',
+                left: `${this.positionX}px`,
+                bottom: `${this.positionY}px`,
+            } }, h("div", { key: '09fd259d19d42db513161b645aa19206ae81c76a', class: "tooltip-content", onClick: event => event.stopPropagation(), onPointerDown: event => event.stopPropagation(), onMouseDown: event => event.stopPropagation() }, h("slot", { key: 'f743c0ca8c415d71e0af53cdab8304df60dd9a37' }))));
+    }
+    static get watchers() { return {
+        "triggerElement": [{
+                "handleTriggerElementChange": 0
+            }],
+        "isVisible": [{
+                "handleVisibilityChange": 0
+            }]
+    }; }
+    static get style() { return kritzelTooltipCss(); }
+}, [769, "kritzel-tooltip", {
+        "isVisible": [1028, "is-visible"],
+        "anchorElement": [16],
+        "triggerElement": [16],
+        "offsetY": [2, "offset-y"],
+        "positionX": [32],
+        "positionY": [32],
+        "open": [64],
+        "close": [64],
+        "toggle": [64],
+        "focusContent": [64]
+    }, [[4, "click", "handleOutsideClick"], [6, "pointerdown", "handleOutsidePointerDown"], [4, "kritzelTooltipCloseAll", "handleCloseAll"], [9, "resize", "handleWindowResize"]], {
+        "triggerElement": [{
+                "handleTriggerElementChange": 0
+            }],
+        "isVisible": [{
+                "handleVisibilityChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelTooltip);
+            }
+            break;
+    } });
+}
+
+export { KritzelTooltip as K, defineCustomElement as d };