@kritzel/editor 0.4.31

package/dist/components/p-DqOC_Yck.js

@@ -0,0 +1,112 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$3 } from './p-BGmTmdLe.js';
+import { d as defineCustomElement$2 } from './p-BN8VWPlq.js';
+import { d as defineCustomElement$1 } from './p-CS3YZVYE.js';
+
+const kritzelMenuCss = () => `:host{position:relative;display:flex;flex-direction:column;background-color:var(--kritzel-menu-background-color, #ffffff);width:var(--kritzel-menu-width, 200px);padding:var(--kritzel-menu-padding, 8px);border-radius:var(--kritzel-menu-border-radius, 12px);box-shadow:var(--kritzel-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-menu-border, 1px solid #ebebeb);z-index:2;gap:var(--kritzel-menu-gap, 4px);overflow-y:auto;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin;max-height:var(--kritzel-portal-max-height, 300px);box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;clip-path:inset(0 round var(--kritzel-menu-border-radius, 12px))}:host:focus-visible{outline:auto}.has-open-child-overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3}`;
+
+const KritzelMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMenu extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.itemSelect = createEvent(this, "itemSelect");
+        this.itemSave = createEvent(this, "itemSave");
+        this.itemCancel = createEvent(this, "itemCancel");
+        this.itemToggleChildMenu = createEvent(this, "itemToggleChildMenu");
+        this.itemCloseChildMenu = createEvent(this, "itemCloseChildMenu");
+        this.close = createEvent(this, "close");
+    }
+    get host() { return this; }
+    items;
+    parent = null;
+    itemSelect;
+    itemSave;
+    itemCancel;
+    itemToggleChildMenu;
+    itemCloseChildMenu;
+    close;
+    selectedIndex = null;
+    async setScrollTop(scrollTop) {
+        this.host.scrollTop = scrollTop;
+        this.host.scrollTo({ top: scrollTop, behavior: 'auto' });
+    }
+    async setFocus() {
+        const firstItem = this.host.shadowRoot.querySelector('kritzel-menu-item');
+        if (firstItem) {
+            firstItem.focus();
+        }
+    }
+    get openChildMenuItem() {
+        return this.items.find(item => item.isChildMenuOpen);
+    }
+    get editingMenuItem() {
+        return this.items.find(item => item.isEditing);
+    }
+    onOverlayClick = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(this.openChildMenuItem);
+    };
+    handleItemSelect = (event) => {
+        event.stopPropagation();
+        this.itemSelect.emit(event.detail);
+    };
+    handleSave = (event) => {
+        event.stopPropagation();
+        this.itemSave.emit(event.detail);
+    };
+    handleCancel = (event) => {
+        event.stopPropagation();
+        this.itemCancel.emit(event.detail);
+    };
+    handleToggleChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemToggleChildMenu.emit(event.detail);
+    };
+    handleCloseChildMenu = (event) => {
+        event.stopPropagation();
+        this.itemCloseChildMenu.emit(event.detail);
+    };
+    render() {
+        return (h(Host, { key: 'f9512c13eb4865b9953887d44f08b565eff5a247', tabIndex: 0, onClick: e => e.stopPropagation() }, this.openChildMenuItem && h("div", { key: 'c6dd6edce412716e9f2076670f5ec1eeb8f53dab', class: "has-open-child-overlay", onClick: this.onOverlayClick }), this.items.map(item => (h("kritzel-menu-item", { key: item.id, "data-testid": `menu-item-${item.id}`, item: item, parent: this.parent, style: { pointerEvents: this.editingMenuItem && !item.isEditing ? 'none' : 'auto' }, onItemSelect: this.handleItemSelect, onItemSave: this.handleSave, onItemCancel: this.handleCancel, onItemToggleChildMenu: this.handleToggleChildMenu, onItemCloseChildMenu: this.handleCloseChildMenu })))));
+    }
+    static get style() { return kritzelMenuCss(); }
+}, [513, "kritzel-menu", {
+        "items": [16],
+        "parent": [16],
+        "selectedIndex": [32],
+        "setScrollTop": [64],
+        "setFocus": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-menu", "kritzel-icon", "kritzel-menu-item", "kritzel-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelMenu);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-menu-item":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelMenu as K, defineCustomElement as d };

package/dist/components/p-Ds0uNtwQ.js

@@ -0,0 +1,97 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$2 } from './p-peZjvnkK.js';
+import { d as defineCustomElement$1 } from './p-BGmTmdLe.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: '09738ca8deef6d44233b7f29bed5c63d1ec151e6' }, h("kritzel-dialog", { key: '3acdc31c0954837f3590d1087dc7a5597a177012', dialogTitle: this.dialogTitle, isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: 'ec57c43e11a1800799b0bf5ac33fdd68cd03e746', class: "login-content" }, this.subtitle && (h("p", { key: 'ac1d59da1f857d7eb64d70a9a3f650bdb74c864c', class: "login-subtitle" }, this.subtitle)), h("div", { key: '0cf4e38f32f25a1f40b5e28b28784b5d53302cc3', 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-DyRJFg4w.js

@@ -0,0 +1,57 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+
+const kritzelSlideToggleCss = () => `:host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}`;
+
+const KritzelSlideToggle = /*@__PURE__*/ proxyCustomElement(class KritzelSlideToggle extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.checkedChange = createEvent(this, "checkedChange");
+    }
+    /** Whether the toggle is checked/on */
+    checked = false;
+    /** Whether the toggle is disabled */
+    disabled = false;
+    /** Label text for accessibility (screen readers) */
+    label;
+    /** Emitted when the toggle state changes */
+    checkedChange;
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleToggle();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'cedab6d6c0ae42325b68c6f17696f7527aa629be', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: '8702a1d196a1a5f9fda7f8d1634fba9a580e3f66', class: "toggle-track" }, h("div", { key: '33e2986727467bcedb31c267a7d6c173e6fc0add', class: "toggle-thumb" }))));
+    }
+    static get style() { return kritzelSlideToggleCss(); }
+}, [513, "kritzel-slide-toggle", {
+        "checked": [1028],
+        "disabled": [4],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-slide-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-slide-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelSlideToggle);
+            }
+            break;
+    } });
+}
+
+export { KritzelSlideToggle as K, defineCustomElement as d };

package/dist/components/p-GbCxpbQ6.js

@@ -0,0 +1,88 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelColorHelper } from '@kritzel/engine';
+import { d as defineCustomElement$1 } from './p-DVv8ChhE.js';
+
+const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
+
+const KritzelColorPalette = /*@__PURE__*/ proxyCustomElement(class KritzelColorPalette extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.colorChange = createEvent(this, "colorChange");
+    }
+    colors = [];
+    selectedColor = null;
+    isExpanded = false;
+    isOpaque = false;
+    opacity = 1;
+    theme;
+    colorChange;
+    handleColorClick(color) {
+        this.selectedColor = color;
+        this.colorChange.emit(color);
+    }
+    handleKeyDown(event, color) {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.handleColorClick(color);
+        }
+    }
+    calculateHeight() {
+        const colorsPerRow = 6;
+        const rowHeight = 32;
+        const gap = 8;
+        const rowCount = Math.ceil(this.colors.length / colorsPerRow);
+        return `${rowCount * rowHeight + (rowCount - 1) * gap}px`;
+    }
+    areColorsEqual(color1, color2) {
+        if (!color1)
+            return false;
+        return color1.light === color2.light && color1.dark === color2.dark;
+    }
+    render() {
+        const displayedColors = this.isExpanded ? this.colors : this.colors.slice(0, 6);
+        const expandedHeight = this.isExpanded ? this.calculateHeight() : '32px';
+        return (h(Host, { key: '4d04acd9a67ac1c302bd0ded5fdfe431d0cacf26' }, h("div", { key: 'bb873b67d0e4f05353af87e1518df9525d20a28b', class: {
+                'color-grid': true,
+                'expanded': this.isExpanded,
+            }, style: {
+                height: expandedHeight,
+            } }, displayedColors.map(color => {
+            return (h("div", { tabIndex: 0, class: {
+                    'color-container': true,
+                    'selected': this.areColorsEqual(this.selectedColor, color),
+                }, onClick: () => this.handleColorClick(color), onKeyDown: event => this.handleKeyDown(event, color) }, h("kritzel-color", { value: KritzelColorHelper.applyOpacity(color, this.opacity, this.theme), theme: this.theme })));
+        }))));
+    }
+    static get style() { return kritzelColorPaletteCss(); }
+}, [513, "kritzel-color-palette", {
+        "colors": [16],
+        "selectedColor": [1040],
+        "isExpanded": [4, "is-expanded"],
+        "isOpaque": [4, "is-opaque"],
+        "opacity": [2],
+        "theme": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-color-palette", "kritzel-color"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-color-palette":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelColorPalette);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelColorPalette as K, defineCustomElement as d };

package/dist/components/p-McY5wZ0h.js

@@ -0,0 +1,135 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.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: '273ca34d6be0e76cfd742495cd75172c5112533a' }, h("div", { key: '2ef4be625b4f97c1a65f4e114a161ae092248479', class: "input-container" }, this.label && h("label", { key: '4f3866b2c33327100f6b49e7b12c10ab91601bf3', class: "input-label" }, this.label), h("div", { key: 'cc1608e9638d3ea5434096720731073e8e436e53', class: "input-wrapper" }, h("input", { key: 'f872d2fb83f1ecfc2bbb9edeae97b8a0deccca66', 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: '0893a104eb1b68138de0d77cfe6e644e7fff75d2', class: "spinner-buttons" }, h("button", { key: 'c39596aac8affea11a880835c63975e8cdae6599', type: "button", class: "spinner-button spinner-up", onClick: this.handleIncrement, tabIndex: -1, "aria-label": "Increase value" }, h("svg", { key: '6cfad1fab40cd65ba54ee5d80d9b08af5676878c', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: '50ca542fa773658823a9bc09ec3226bba02cfac7', d: "M1 5L5 1L9 5", stroke: "currentColor", "stroke-width": "1.5", fill: "none", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '5c62a5a71555474e94e73b9123023f6cf0f70c81', type: "button", class: "spinner-button spinner-down", onClick: this.handleDecrement, tabIndex: -1, "aria-label": "Decrease value" }, h("svg", { key: '72b12df906ebf5e2d07ec387faeb11567dbca76b', viewBox: "0 0 10 6", class: "spinner-icon" }, h("path", { key: 'a85205a5f31392e1db4bc893fad336f5b9775530', 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-QEue33R5.js

@@ -0,0 +1,70 @@
+import { p as proxyCustomElement, t as transformTag, H, h, d as Host } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-4-qLegHb.js';
+
+const kritzelActiveUsersCss = () => `:host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}`;
+
+const KritzelActiveUsers = /*@__PURE__*/ proxyCustomElement(class KritzelActiveUsers extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Array of active users to display
+     */
+    users = [];
+    /**
+     * Avatar size in pixels
+     */
+    avatarSize = 40;
+    /**
+     * Maximum number of avatars to show before overflow text
+     */
+    maxVisible = 3;
+    /**
+     * Overlap offset in pixels (negative margin between avatars)
+     */
+    overlap = 20;
+    getDisplayName(user) {
+        return (user.displayName ??
+            ([user.firstName, user.lastName].filter(Boolean).join(' ') ||
+                user.email ||
+                'User'));
+    }
+    render() {
+        if (!this.users || this.users.length === 0) {
+            return h(Host, { style: { display: 'none' } });
+        }
+        const visibleUsers = this.users.slice(0, this.maxVisible);
+        const overflowCount = this.users.length - this.maxVisible;
+        return (h(Host, { style: { '--avatar-overlap': `-${this.overlap}px` } }, h("div", { class: "avatars" }, visibleUsers.map((user, index) => (h("div", { class: "avatar-wrapper", style: { marginLeft: index > 0 ? `var(--avatar-overlap)` : '0px', zIndex: `${visibleUsers.length - index}` } }, h("kritzel-avatar", { user: user, size: this.avatarSize }), h("span", { class: "avatar-tooltip" }, this.getDisplayName(user)))))), overflowCount > 0 && (h("span", { class: "overflow-count" }, "+", overflowCount, h("span", { class: "avatar-tooltip" }, this.users.slice(this.maxVisible).map(user => (h("div", null, this.getDisplayName(user)))))))));
+    }
+    static get style() { return kritzelActiveUsersCss(); }
+}, [513, "kritzel-active-users", {
+        "users": [16],
+        "avatarSize": [2, "avatar-size"],
+        "maxVisible": [2, "max-visible"],
+        "overlap": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-active-users", "kritzel-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-active-users":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelActiveUsers);
+            }
+            break;
+        case "kritzel-avatar":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelActiveUsers as K, defineCustomElement as d };