kritzel-stencil 0.0.171 → 0.0.172

package/dist/components/p-Cdw55iW6.js

@@ -0,0 +1,281 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
+
+const kritzelDropdownCss = ":host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);overflow:visible;height:32px;width:100%;position:relative}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-controls-control-border-radius, 12px);border:none;background-color:#fff;cursor:var(--kritzel-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-controls-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:2px solid var(--kritzel-controls-focus-color, #0066cc);outline-offset:-2px}.dropdown-trigger.has-suffix-border{border-right:1px solid #333333;border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid #333333;border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:#fff;border:1px solid #333333;border-radius:var(--kritzel-controls-control-border-radius, 12px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:0 -4px 12px rgba(0, 0, 0, 0.15)}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-pointer-cursor, pointer);color:var(--kritzel-controls-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-controls-hover-bg, #f0f0f0)}.dropdown-option.is-selected{font-weight:600}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-controls-accent-color, #0066cc)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu::-webkit-scrollbar{width:6px}.dropdown-menu::-webkit-scrollbar-track{background:transparent}.dropdown-menu::-webkit-scrollbar-thumb{background-color:rgba(0, 0, 0, 0.2);border-radius:3px}.dropdown-menu::-webkit-scrollbar-thumb:hover{background-color:rgba(0, 0, 0, 0.3)}::slotted(*){height:100%;box-sizing:border-box}";
+
+const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged");
+    }
+    get el() { return this; }
+    options = [];
+    optionsChanged() {
+        this.updateInternalValue(this.internalValue, true);
+    }
+    value;
+    externalValueChanged(newValue) {
+        if (newValue !== this.internalValue) {
+            this.updateInternalValue(newValue, false);
+        }
+    }
+    width;
+    selectStyles = {};
+    internalValue;
+    hasSuffixContent = false;
+    hasPrefixContent = false;
+    isOpen = false;
+    focusedIndex = -1;
+    openDirection = 'down';
+    valueChanged;
+    suffixSlotElement;
+    prefixSlotElement;
+    triggerElement;
+    menuElement;
+    wrapperElement;
+    componentWillLoad() {
+        this.updateInternalValue(this.value, false);
+        this.evaluateSuffixContent();
+        this.evaluatePrefixContent();
+    }
+    handleDocumentClick(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.closeMenu();
+        }
+    }
+    handleDocumentKeydown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.closeMenu();
+            this.triggerElement?.focus();
+        }
+    }
+    updateInternalValue(proposedValue, emitChange) {
+        let finalValue = proposedValue;
+        if (this.options && this.options.length > 0) {
+            const isValidValue = this.options.some(opt => opt.value === finalValue);
+            if (!finalValue || !isValidValue) {
+                finalValue = this.options[0].value;
+            }
+        }
+        else {
+            finalValue = undefined;
+        }
+        if (this.internalValue !== finalValue) {
+            this.internalValue = finalValue;
+            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
+                this.valueChanged.emit(this.internalValue);
+            }
+        }
+    }
+    toggleMenu = () => {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    };
+    openMenu = () => {
+        this.calculateMenuDirection();
+        this.isOpen = true;
+        const currentIndex = this.options.findIndex(opt => opt.value === this.internalValue);
+        this.focusedIndex = currentIndex >= 0 ? currentIndex : 0;
+        // Focus the menu after it opens
+        requestAnimationFrame(() => {
+            this.menuElement?.focus();
+        });
+    };
+    calculateMenuDirection = () => {
+        if (!this.wrapperElement) {
+            this.openDirection = 'down';
+            return;
+        }
+        const wrapperRect = this.wrapperElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        // Estimate menu height (max 240px or fewer based on options)
+        const estimatedOptionHeight = 36; // padding + content
+        const menuPadding = 8; // 4px top + 4px bottom
+        const estimatedMenuHeight = Math.min(240, this.options.length * estimatedOptionHeight + menuPadding);
+        // Prefer opening downward, but switch to upward if not enough space below
+        // and there's more space above
+        if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
+            this.openDirection = 'up';
+        }
+        else {
+            this.openDirection = 'down';
+        }
+    };
+    closeMenu = () => {
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // Note: openDirection is intentionally NOT reset here to allow the close animation
+        // to play in the same direction the menu was opened
+    };
+    selectOption = (option) => {
+        if (this.internalValue !== option.value) {
+            this.internalValue = option.value;
+            this.valueChanged.emit(this.internalValue);
+        }
+        this.closeMenu();
+        this.triggerElement?.focus();
+    };
+    handleTriggerKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.openMenu();
+                break;
+        }
+    };
+    handleMenuKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < this.options.length) {
+                    this.selectOption(this.options[this.focusedIndex]);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = this.options.length - 1;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Tab':
+                this.closeMenu();
+                break;
+        }
+    };
+    scrollFocusedOptionIntoView = () => {
+        if (!this.menuElement || this.focusedIndex < 0) {
+            return;
+        }
+        // Use requestAnimationFrame to ensure the DOM has updated with the new focused class
+        requestAnimationFrame(() => {
+            const focusedOption = this.menuElement?.querySelector('.dropdown-option.is-focused');
+            if (focusedOption) {
+                focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        });
+    };
+    handleOptionMouseEnter = (index) => {
+        this.focusedIndex = index;
+    };
+    evaluateSuffixContent = () => {
+        if (this.suffixSlotElement) {
+            const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasSuffixContent !== newHasContent) {
+                this.hasSuffixContent = newHasContent;
+            }
+        }
+        else if (this.hasSuffixContent !== false) {
+            this.hasSuffixContent = false;
+        }
+    };
+    evaluatePrefixContent = () => {
+        if (this.prefixSlotElement) {
+            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasPrefixContent !== newHasContent) {
+                this.hasPrefixContent = newHasContent;
+            }
+        }
+        else if (this.hasPrefixContent !== false) {
+            this.hasPrefixContent = false;
+        }
+    };
+    getSelectedLabel() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.label ?? '';
+    }
+    getSelectedStyle() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.style;
+    }
+    render() {
+        const triggerClasses = {
+            'dropdown-trigger': true,
+            'has-suffix-border': this.hasSuffixContent,
+            'has-prefix-border': this.hasPrefixContent,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+        };
+        const menuClasses = {
+            'dropdown-menu': true,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+            'open-down': this.openDirection === 'down',
+        };
+        return (h(Host, { key: '29d076eb2ef76527c0930ab82ace0d05c896ab6c' }, h("div", { key: '1afac5cc0b7f408849670b8cb62fe0bd0f3b27f1', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '3cfcf787c3b3eedbd6bf30c7506a0a4912429672', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: 'b88120ed3e44871220e6ba61e8bef457651a2086', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '79082189066f3d0b4f5797420ec222847792fe52', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'a490bb6689ec1820144fe82f6833bee82e6ead0e', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '8bd7768f6fdd3c507bbca54d7d135adabe04901f', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: 'e1b854d2c93e3067181108f8d782e1393ddb615c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '3622cbf8964f4e50aa55be5209240dfd252f1d84', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'b91317736904cbeee0f87058b822bd77c6b163ca', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: '0ca8690345974e9b7ad184f4c7ab7cf5367b183c', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+            const isSelected = option.value === this.internalValue;
+            const isFocused = index === this.focusedIndex;
+            const optionClasses = {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+            };
+            return (h("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) }, option.label, isSelected && (h("span", { class: "dropdown-option-check", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))))));
+        })))));
+    }
+    static get watchers() { return {
+        "options": ["optionsChanged"],
+        "value": ["externalValueChanged"]
+    }; }
+    static get style() { return kritzelDropdownCss; }
+}, [769, "kritzel-dropdown", {
+        "options": [16],
+        "value": [1],
+        "width": [1],
+        "selectStyles": [16],
+        "internalValue": [32],
+        "hasSuffixContent": [32],
+        "hasPrefixContent": [32],
+        "isOpen": [32],
+        "focusedIndex": [32],
+        "openDirection": [32]
+    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleDocumentKeydown"]], {
+        "options": ["optionsChanged"],
+        "value": ["externalValueChanged"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-dropdown":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, KritzelDropdown);
+            }
+            break;
+    } });
+}
+
+export { KritzelDropdown as K, defineCustomElement as d };
+//# sourceMappingURL=p-Cdw55iW6.js.map
+
+//# sourceMappingURL=p-Cdw55iW6.js.map

package/dist/components/p-Cdw55iW6.js.map

@@ -0,0 +1 @@
+{"file":"p-Cdw55iW6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-dropdown/kritzel-dropdown.css?tag=kritzel-dropdown&encapsulation=shadow","src/components/shared/kritzel-dropdown/kritzel-dropdown.tsx"],"sourcesContent":[":host {\r\n  display: inline-flex;\r\n  vertical-align: middle;\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.dropdown-wrapper {\r\n  display: flex;\r\n  align-items: center;\r\n  border: 1px solid #333333;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  overflow: visible;\r\n  height: 32px;\r\n  width: 100%;\r\n  position: relative;\r\n}\r\n\r\n.dropdown-container {\r\n  flex: 1;\r\n  height: 100%;\r\n  min-width: 0;\r\n}\r\n\r\n.dropdown-trigger {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n  padding: 0 8px;\r\n  height: 100%;\r\n  width: 100%;\r\n  box-sizing: border-box;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  border: none;\r\n  background-color: #fff;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  outline: none;\r\n  font-size: inherit;\r\n  font-family: inherit;\r\n  color: var(--kritzel-controls-text-color, #333333);\r\n  -webkit-tap-highlight-color: transparent;\r\n  text-align: left;\r\n}\r\n\r\n.dropdown-trigger:focus-visible {\r\n  outline: 2px solid var(--kritzel-controls-focus-color, #0066cc);\r\n  outline-offset: -2px;\r\n}\r\n\r\n.dropdown-trigger.has-suffix-border {\r\n  border-right: 1px solid #333333;\r\n  border-top-right-radius: 0;\r\n  border-bottom-right-radius: 0;\r\n}\r\n\r\n.dropdown-trigger.has-prefix-border {\r\n  border-left: 1px solid #333333;\r\n  border-top-left-radius: 0;\r\n  border-bottom-left-radius: 0;\r\n}\r\n\r\n.dropdown-trigger-label {\r\n  flex: 1;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  min-width: 0;\r\n}\r\n\r\n.dropdown-trigger-arrow {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n  flex-shrink: 0;\r\n  transition: transform 0.2s ease;\r\n}\r\n\r\n.dropdown-trigger-arrow svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n.dropdown-trigger.is-open .dropdown-trigger-arrow {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow {\r\n  transform: rotate(0deg);\r\n}\r\n\r\n.dropdown-menu {\r\n  position: absolute;\r\n  left: 0;\r\n  right: 0;\r\n  margin: 0;\r\n  padding: 4px 0;\r\n  list-style: none;\r\n  background-color: #fff;\r\n  border: 1px solid #333333;\r\n  border-radius: var(--kritzel-controls-control-border-radius, 12px);\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n  z-index: 1000;\r\n  max-height: 240px;\r\n  overflow-y: auto;\r\n  opacity: 0;\r\n  visibility: hidden;\r\n  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;\r\n  outline: none;\r\n}\r\n\r\n/* Open downward (default) */\r\n.dropdown-menu.open-down {\r\n  top: calc(100% + 4px);\r\n  bottom: auto;\r\n  transform: translateY(-8px);\r\n}\r\n\r\n/* Open upward */\r\n.dropdown-menu.open-up {\r\n  bottom: calc(100% + 4px);\r\n  top: auto;\r\n  transform: translateY(8px);\r\n}\r\n\r\n.dropdown-menu.is-open {\r\n  opacity: 1;\r\n  visibility: visible;\r\n  transform: translateY(0);\r\n}\r\n\r\n/* Adjust box shadow for upward opening */\r\n.dropdown-menu.open-up {\r\n  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.dropdown-option {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 8px;\r\n  padding: 8px 12px;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  color: var(--kritzel-controls-text-color, #333333);\r\n  transition: background-color 0.1s ease;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.dropdown-option.is-focused {\r\n  background-color: var(--kritzel-controls-hover-bg, #f0f0f0);\r\n}\r\n\r\n.dropdown-option.is-selected {\r\n  font-weight: 600;\r\n}\r\n\r\n.dropdown-option-check {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 16px;\r\n  height: 16px;\r\n  flex-shrink: 0;\r\n  color: var(--kritzel-controls-accent-color, #0066cc);\r\n}\r\n\r\n.dropdown-option-check svg {\r\n  width: 100%;\r\n  height: 100%;\r\n}\r\n\r\n/* Scrollbar styling */\r\n.dropdown-menu::-webkit-scrollbar {\r\n  width: 6px;\r\n}\r\n\r\n.dropdown-menu::-webkit-scrollbar-track {\r\n  background: transparent;\r\n}\r\n\r\n.dropdown-menu::-webkit-scrollbar-thumb {\r\n  background-color: rgba(0, 0, 0, 0.2);\r\n  border-radius: 3px;\r\n}\r\n\r\n.dropdown-menu::-webkit-scrollbar-thumb:hover {\r\n  background-color: rgba(0, 0, 0, 0.3);\r\n}\r\n\r\n::slotted(*) {\r\n  height: 100%;\r\n  box-sizing: border-box;\r\n}\r\n","import { Component, Host, h, Prop, State, Event, EventEmitter, Watch, Element, Listen } from '@stencil/core';\r\n\r\nexport interface DropdownOption {\r\n  value: string;\r\n  label: string;\r\n  style?: Record<string, string>; // For individual option styling, e.g., font family\r\n}\r\n\r\n@Component({\r\n  tag: 'kritzel-dropdown',\r\n  styleUrl: 'kritzel-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelDropdown {\r\n  @Element() el: HTMLElement;\r\n\r\n  @Prop() options: DropdownOption[] = [];\r\n  @Watch('options')\r\n  optionsChanged() {\r\n    this.updateInternalValue(this.internalValue, true);\r\n  }\r\n\r\n  @Prop() value: string;\r\n  @Watch('value')\r\n  externalValueChanged(newValue: string) {\r\n    if (newValue !== this.internalValue) {\r\n      this.updateInternalValue(newValue, false);\r\n    }\r\n  }\r\n\r\n  @Prop() width?: string;\r\n  @Prop() selectStyles?: Record<string, string> = {};\r\n\r\n  @State() internalValue: string;\r\n  @State() hasSuffixContent = false;\r\n  @State() hasPrefixContent = false;\r\n  @State() isOpen = false;\r\n  @State() focusedIndex = -1;\r\n  @State() openDirection: 'down' | 'up' = 'down';\r\n\r\n  @Event() valueChanged: EventEmitter<string>;\r\n\r\n  private suffixSlotElement?: HTMLSlotElement;\r\n  private prefixSlotElement?: HTMLSlotElement;\r\n  private triggerElement?: HTMLButtonElement;\r\n  private menuElement?: HTMLUListElement;\r\n  private wrapperElement?: HTMLDivElement;\r\n\r\n  componentWillLoad() {\r\n    this.updateInternalValue(this.value, false);\r\n    this.evaluateSuffixContent();\r\n    this.evaluatePrefixContent();\r\n  }\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleDocumentClick(event: MouseEvent) {\r\n    if (this.isOpen && !this.el.contains(event.target as Node)) {\r\n      this.closeMenu();\r\n    }\r\n  }\r\n\r\n  @Listen('keydown', { target: 'document' })\r\n  handleDocumentKeydown(event: KeyboardEvent) {\r\n    if (this.isOpen && event.key === 'Escape') {\r\n      event.stopPropagation();\r\n      event.preventDefault();\r\n      this.closeMenu();\r\n      this.triggerElement?.focus();\r\n    }\r\n  }\r\n\r\n  private updateInternalValue(proposedValue: string, emitChange: boolean) {\r\n    let finalValue = proposedValue;\r\n    if (this.options && this.options.length > 0) {\r\n      const isValidValue = this.options.some(opt => opt.value === finalValue);\r\n      if (!finalValue || !isValidValue) {\r\n        finalValue = this.options[0].value;\r\n      }\r\n    } else {\r\n      finalValue = undefined;\r\n    }\r\n\r\n    if (this.internalValue !== finalValue) {\r\n      this.internalValue = finalValue;\r\n      if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {\r\n        this.valueChanged.emit(this.internalValue);\r\n      }\r\n    }\r\n  }\r\n\r\n  private toggleMenu = () => {\r\n    if (this.isOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu();\r\n    }\r\n  };\r\n\r\n  private openMenu = () => {\r\n    this.calculateMenuDirection();\r\n    this.isOpen = true;\r\n    const currentIndex = this.options.findIndex(opt => opt.value === this.internalValue);\r\n    this.focusedIndex = currentIndex >= 0 ? currentIndex : 0;\r\n    // Focus the menu after it opens\r\n    requestAnimationFrame(() => {\r\n      this.menuElement?.focus();\r\n    });\r\n  };\r\n\r\n  private calculateMenuDirection = () => {\r\n    if (!this.wrapperElement) {\r\n      this.openDirection = 'down';\r\n      return;\r\n    }\r\n\r\n    const wrapperRect = this.wrapperElement.getBoundingClientRect();\r\n    const viewportHeight = window.innerHeight;\r\n    const spaceBelow = viewportHeight - wrapperRect.bottom;\r\n    const spaceAbove = wrapperRect.top;\r\n\r\n    // Estimate menu height (max 240px or fewer based on options)\r\n    const estimatedOptionHeight = 36; // padding + content\r\n    const menuPadding = 8; // 4px top + 4px bottom\r\n    const estimatedMenuHeight = Math.min(\r\n      240,\r\n      this.options.length * estimatedOptionHeight + menuPadding\r\n    );\r\n\r\n    // Prefer opening downward, but switch to upward if not enough space below\r\n    // and there's more space above\r\n    if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {\r\n      this.openDirection = 'up';\r\n    } else {\r\n      this.openDirection = 'down';\r\n    }\r\n  };\r\n\r\n  private closeMenu = () => {\r\n    this.isOpen = false;\r\n    this.focusedIndex = -1;\r\n    // Note: openDirection is intentionally NOT reset here to allow the close animation\r\n    // to play in the same direction the menu was opened\r\n  };\r\n\r\n  private selectOption = (option: DropdownOption) => {\r\n    if (this.internalValue !== option.value) {\r\n      this.internalValue = option.value;\r\n      this.valueChanged.emit(this.internalValue);\r\n    }\r\n    this.closeMenu();\r\n    this.triggerElement?.focus();\r\n  };\r\n\r\n  private handleTriggerKeyDown = (event: KeyboardEvent) => {\r\n    switch (event.key) {\r\n      case 'Enter':\r\n      case ' ':\r\n      case 'ArrowDown':\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.openMenu();\r\n        break;\r\n    }\r\n  };\r\n\r\n  private handleMenuKeyDown = (event: KeyboardEvent) => {\r\n    switch (event.key) {\r\n      case 'ArrowDown':\r\n        event.preventDefault();\r\n        this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1);\r\n        this.scrollFocusedOptionIntoView();\r\n        break;\r\n      case 'ArrowUp':\r\n        event.preventDefault();\r\n        this.focusedIndex = Math.max(this.focusedIndex - 1, 0);\r\n        this.scrollFocusedOptionIntoView();\r\n        break;\r\n      case 'Enter':\r\n      case ' ':\r\n        event.preventDefault();\r\n        if (this.focusedIndex >= 0 && this.focusedIndex < this.options.length) {\r\n          this.selectOption(this.options[this.focusedIndex]);\r\n        }\r\n        break;\r\n      case 'Home':\r\n        event.preventDefault();\r\n        this.focusedIndex = 0;\r\n        this.scrollFocusedOptionIntoView();\r\n        break;\r\n      case 'End':\r\n        event.preventDefault();\r\n        this.focusedIndex = this.options.length - 1;\r\n        this.scrollFocusedOptionIntoView();\r\n        break;\r\n      case 'Tab':\r\n        this.closeMenu();\r\n        break;\r\n    }\r\n  };\r\n\r\n  private scrollFocusedOptionIntoView = () => {\r\n    if (!this.menuElement || this.focusedIndex < 0) {\r\n      return;\r\n    }\r\n    // Use requestAnimationFrame to ensure the DOM has updated with the new focused class\r\n    requestAnimationFrame(() => {\r\n      const focusedOption = this.menuElement?.querySelector('.dropdown-option.is-focused') as HTMLElement;\r\n      if (focusedOption) {\r\n        focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });\r\n      }\r\n    });\r\n  };\r\n\r\n  private handleOptionMouseEnter = (index: number) => {\r\n    this.focusedIndex = index;\r\n  };\r\n\r\n  private evaluateSuffixContent = () => {\r\n    if (this.suffixSlotElement) {\r\n      const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasSuffixContent !== newHasContent) {\r\n        this.hasSuffixContent = newHasContent;\r\n      }\r\n    } else if (this.hasSuffixContent !== false) {\r\n      this.hasSuffixContent = false;\r\n    }\r\n  };\r\n\r\n  private evaluatePrefixContent = () => {\r\n    if (this.prefixSlotElement) {\r\n      const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;\r\n      if (this.hasPrefixContent !== newHasContent) {\r\n        this.hasPrefixContent = newHasContent;\r\n      }\r\n    } else if (this.hasPrefixContent !== false) {\r\n      this.hasPrefixContent = false;\r\n    }\r\n  };\r\n\r\n  private getSelectedLabel(): string {\r\n    const selectedOption = this.options.find(opt => opt.value === this.internalValue);\r\n    return selectedOption?.label ?? '';\r\n  }\r\n\r\n  private getSelectedStyle(): Record<string, string> | undefined {\r\n    const selectedOption = this.options.find(opt => opt.value === this.internalValue);\r\n    return selectedOption?.style;\r\n  }\r\n\r\n  render() {\r\n    const triggerClasses = {\r\n      'dropdown-trigger': true,\r\n      'has-suffix-border': this.hasSuffixContent,\r\n      'has-prefix-border': this.hasPrefixContent,\r\n      'is-open': this.isOpen,\r\n      'open-up': this.openDirection === 'up',\r\n    };\r\n\r\n    const menuClasses = {\r\n      'dropdown-menu': true,\r\n      'is-open': this.isOpen,\r\n      'open-up': this.openDirection === 'up',\r\n      'open-down': this.openDirection === 'down',\r\n    };\r\n\r\n    return (\r\n      <Host>\r\n        <div class=\"dropdown-wrapper\" ref={el => (this.wrapperElement = el)}>\r\n          <slot name=\"prefix\" ref={el => (this.prefixSlotElement = el as HTMLSlotElement)} onSlotchange={this.evaluatePrefixContent}></slot>\r\n          <div class=\"dropdown-container\" style={{ width: this.width }}>\r\n            <button\r\n              type=\"button\"\r\n              class={triggerClasses}\r\n              style={{ ...this.selectStyles, ...this.getSelectedStyle() }}\r\n              onClick={this.toggleMenu}\r\n              onKeyDown={this.handleTriggerKeyDown}\r\n              aria-haspopup=\"listbox\"\r\n              aria-expanded={this.isOpen ? 'true' : 'false'}\r\n              ref={el => (this.triggerElement = el)}\r\n            >\r\n              <span class=\"dropdown-trigger-label\">{this.getSelectedLabel()}</span>\r\n              <span class=\"dropdown-trigger-arrow\" aria-hidden=\"true\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                  <polyline points=\"6 9 12 15 18 9\" />\r\n                </svg>\r\n              </span>\r\n            </button>\r\n          </div>\r\n          <slot name=\"suffix\" ref={el => (this.suffixSlotElement = el as HTMLSlotElement)} onSlotchange={this.evaluateSuffixContent}></slot>\r\n          <ul\r\n            class={menuClasses}\r\n            role=\"listbox\"\r\n            tabindex=\"-1\"\r\n            onKeyDown={this.handleMenuKeyDown}\r\n            ref={el => (this.menuElement = el)}\r\n          >\r\n            {this.options.map((option, index) => {\r\n              const isSelected = option.value === this.internalValue;\r\n              const isFocused = index === this.focusedIndex;\r\n              const optionClasses = {\r\n                'dropdown-option': true,\r\n                'is-selected': isSelected,\r\n                'is-focused': isFocused,\r\n              };\r\n              return (\r\n                <li\r\n                  class={optionClasses}\r\n                  role=\"option\"\r\n                  aria-selected={isSelected ? 'true' : 'false'}\r\n                  style={option.style}\r\n                  onClick={() => this.selectOption(option)}\r\n                  onMouseEnter={() => this.handleOptionMouseEnter(index)}\r\n                >\r\n                  {option.label}\r\n                  {isSelected && (\r\n                    <span class=\"dropdown-option-check\" aria-hidden=\"true\">\r\n                      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n                        <polyline points=\"20 6 9 17 4 12\" />\r\n                      </svg>\r\n                    </span>\r\n                  )}\r\n                </li>\r\n              );\r\n            })}\r\n          </ul>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-Ck4lGnmt.js → p-DI7JQMsC.js}

@@ -14,7 +14,7 @@ const KritzelFont = /*@__PURE__*/ proxyCustomElement(class KritzelFont extends H
     size = 24;
     color = '#000000';
     render() {
-        return (h(Host, { key: '23b744f73bf860a53c554ade7d3e9d3eb281caac' }, h("div", { key: '7bfc9dadff6ccfbdf3990830423f92eff8580a54', class: "font-preview", style: {
+        return (h(Host, { key: '62d0314df8f62ef2cf21c17f548261b34611750f' }, h("div", { key: '269347c138aab38cb1f018e58db78cab8e087f13', class: "font-preview", style: {
                 fontFamily: this.fontFamily,
                 fontSize: `${this.size}px`,
                 color: this.color
@@ -41,6 +41,6 @@ function defineCustomElement() {
 }
 
 export { KritzelFont as K, defineCustomElement as d };
-//# sourceMappingURL=p-Ck4lGnmt.js.map
+//# sourceMappingURL=p-DI7JQMsC.js.map
 
-//# sourceMappingURL=p-Ck4lGnmt.js.map
+//# sourceMappingURL=p-DI7JQMsC.js.map

package/dist/components/{p-Ck4lGnmt.js.map → p-DI7JQMsC.js.map}

@@ -1 +1 @@
-{"file":"p-Ck4lGnmt.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wIAAwI;;MCOlJ,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IACd,UAAU,GAAW,mBAAmB;IACxC,IAAI,GAAW,EAAE;IACjB,KAAK,GAAW,SAAS;IAEjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,gBAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;gBAC1B,KAAK,EAAE,IAAI,CAAC;AACb,aAAA,EAGG,EAAA,GAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font/kritzel-font.css?tag=kritzel-font&encapsulation=shadow","src/components/shared/kritzel-font/kritzel-font.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n.font-preview {\r\n  color: var(--kritzel-font-size-text-color, #333333);\r\n  line-height: 1;\r\n  text-align: center;\r\n  font-weight: bold;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font',\r\n  styleUrl: 'kritzel-font.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFont {\r\n  @Prop() fontFamily: string = 'Arial, sans-serif';\r\n  @Prop() size: number = 24;\r\n  @Prop() color: string = '#000000';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"font-preview\"\r\n          style={{\r\n            fontFamily: this.fontFamily,\r\n            fontSize: `${this.size}px`,\r\n            color: this.color\r\n          }}\r\n        >\r\n          A\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-DI7JQMsC.js","mappings":";;AAAA,MAAM,cAAc,GAAG,wIAAwI;;MCOlJ,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;;;;;;;;IACd,UAAU,GAAW,mBAAmB;IACxC,IAAI,GAAW,EAAE;IACjB,KAAK,GAAW,SAAS;IAEjC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE;gBACL,UAAU,EAAE,IAAI,CAAC,UAAU;AAC3B,gBAAA,QAAQ,EAAE,CAAA,EAAG,IAAI,CAAC,IAAI,CAAI,EAAA,CAAA;gBAC1B,KAAK,EAAE,IAAI,CAAC;AACb,aAAA,EAGG,EAAA,GAAA,CAAA,CACD;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-font/kritzel-font.css?tag=kritzel-font&encapsulation=shadow","src/components/shared/kritzel-font/kritzel-font.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n\r\n.font-preview {\r\n  color: var(--kritzel-font-size-text-color, #333333);\r\n  line-height: 1;\r\n  text-align: center;\r\n  font-weight: bold;\r\n}\r\n","import { Component, Host, Prop, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-font',\r\n  styleUrl: 'kritzel-font.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelFont {\r\n  @Prop() fontFamily: string = 'Arial, sans-serif';\r\n  @Prop() size: number = 24;\r\n  @Prop() color: string = '#000000';\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <div\r\n          class=\"font-preview\"\r\n          style={{\r\n            fontFamily: this.fontFamily,\r\n            fontSize: `${this.size}px`,\r\n            color: this.color\r\n          }}\r\n        >\r\n          A\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-DGnDUmrk.js → p-DmYjCy-z.js}

@@ -31,7 +31,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '05ec19a2b644f00680139513c97650e6e7c612f2' }, h("button", { key: 'a62b621b7a1abe33fbf3fc0aa1f8e1d6c7ed8be3', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: 'ca8d0f9c9e5cebaf20ffc239602c4b4ce37b7e6b', name: "undo" })), h("button", { key: '7f1ba8b6ae3b8edf0ac0127fee30f3c070d47b44', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '4680f7f9523fe6c17924662e025f5e6dfc3e9d78', name: "redo" })), h("div", { key: '77148d676ed708e4029b32e25a3daac628302478', class: "utility-separator" }), h("button", { key: 'b740674dc96d41c0b7b4d2cfb365d45c0f453a27', class: "utility-button" }, h("kritzel-icon", { key: '73d2ed9b6b400106521b0f53915e93516f9d3aad', name: "delete", onClick: () => this.delete.emit() }))));
+        return (h(Host, { key: '998008f3c138f18d0e3f5183c3280e646e6c8e73' }, h("button", { key: '2ea58a2df20e038e00c0090c44714efbc1221314', class: "utility-button", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event) }, h("kritzel-icon", { key: '1843d211731f83f2f828b17f0bc0cf83a76705e1', name: "undo" })), h("button", { key: '71064186570d8e849a634a4c68e96f3fba1ebdab', class: "utility-button", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event) }, h("kritzel-icon", { key: '12694a6dcddc1f893752d3edcc1deafe700cff5c', name: "redo" })), h("div", { key: '5bbfb5e535d9e0a861d227df57bd5cc7ab8c22fb', class: "utility-separator" }), h("button", { key: 'fda95410a66afa98c0abf6eb82e323f926ef596a', class: "utility-button" }, h("kritzel-icon", { key: '0d1d77f6d65481825c2edbdb38de821a2de7b043', name: "delete", onClick: () => this.delete.emit() }))));
     }
     static get style() { return kritzelUtilityPanelCss; }
 }, [769, "kritzel-utility-panel", {
@@ -57,6 +57,6 @@ function defineCustomElement() {
 }
 
 export { KritzelUtilityPanel as K, defineCustomElement as d };
-//# sourceMappingURL=p-DGnDUmrk.js.map
+//# sourceMappingURL=p-DmYjCy-z.js.map
 
-//# sourceMappingURL=p-DGnDUmrk.js.map
+//# sourceMappingURL=p-DmYjCy-z.js.map

package/dist/components/{p-DGnDUmrk.js.map → p-DmYjCy-z.js.map}

@@ -1 +1 @@
-{"file":"p-DGnDUmrk.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,+yBAA+yB;;MCQj0B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;IACtB,SAAS,GAAqB,IAAI;AAEjC,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACzG,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACzG,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 12px;\r\n  border-top-right-radius: 12px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:hover,\r\n.utility-button:focus-visible {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.utility-button:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Prop() undoState: KritzelUndoState = null;\r\n\r\n  @Event() undo: EventEmitter<void>;\r\n  @Event() redo: EventEmitter<void>;\r\n  @Event() delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" disabled={!this.undoState?.canUndo} onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" disabled={!this.undoState?.canRedo} onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-DmYjCy-z.js","mappings":";;;AAAA,MAAM,sBAAsB,GAAG,+yBAA+yB;;MCQj0B,mBAAmB,iBAAAA,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;;;;;;;;;;;IACtB,SAAS,GAAqB,IAAI;AAEjC,IAAA,IAAI;AACJ,IAAA,IAAI;AACJ,IAAA,MAAM;AAEf,IAAA,UAAU,CAAC,KAAY,EAAA;AACrB,QAAA,IAAI,KAAK,CAAC,UAAU,EAAE;YACpB,KAAK,CAAC,cAAc,EAAE;YACtB,KAAK,CAAC,eAAe,EAAE;AACvB,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;;AAIpB,IAAA,UAAU,CAAC,KAAY,EAAA;QACrB,KAAK,CAAC,cAAc,EAAE;QACtB,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;;IAGlB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACzG,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EACT,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAC,QAAQ,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,IAAI,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,EAAA,EACzG,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,MAAM,EAAA,CAAgB,CAClC,EAET,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,mBAAmB,EAAO,CAAA,EAErC,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EAC5B,CAAA,CAAA,cAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAc,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,GAAiB,CACvE,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/ui/kritzel-utility-panel/kritzel-utility-panel.css?tag=kritzel-utility-panel&encapsulation=shadow","src/components/ui/kritzel-utility-panel/kritzel-utility-panel.tsx"],"sourcesContent":[":host {\r\n   display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n  padding: 4px;\r\n  gap: 8px;\r\n  border-top-left-radius: 12px;\r\n  border-top-right-radius: 12px;\r\n  background-color: rgb(226, 226, 226);\r\n  width: fit-content;\r\n  user-select: none;\r\n}\r\n\r\n.utility-button {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 28px;\r\n  height: 28px;\r\n  padding: 8px 4px;\r\n  border: none;\r\n  background: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  color: #333333;\r\n  -webkit-tap-highlight-color: transparent;\r\n  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);\r\n}\r\n\r\n.utility-button:hover,\r\n.utility-button:focus-visible {\r\n  background-color: var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.utility-button:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n.utility-separator {\r\n  width: 1px;\r\n  height: 16px;\r\n  background-color: hsl(0, 0%, 0%, 4.3%);\r\n}","import { Component, Host, h, Event, EventEmitter, Prop } from '@stencil/core';\r\nimport { KritzelUndoState } from '../../../interfaces/undo-state.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-utility-panel',\r\n  styleUrl: 'kritzel-utility-panel.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelUtilityPanel {\r\n  @Prop() undoState: KritzelUndoState = null;\r\n\r\n  @Event() undo: EventEmitter<void>;\r\n  @Event() redo: EventEmitter<void>;\r\n  @Event() delete: EventEmitter<void>;\r\n\r\n  handleUndo(event: Event) {\r\n    if (event.cancelable) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      this.undo.emit();\r\n    }\r\n  }\r\n\r\n  handleRedo(event: Event) {\r\n    event.preventDefault();\r\n    event.stopPropagation();\r\n    this.redo.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button class=\"utility-button\" disabled={!this.undoState?.canUndo} onClick={event => this.handleUndo(event)}>\r\n          <kritzel-icon name=\"undo\"></kritzel-icon>\r\n        </button>\r\n        <button class=\"utility-button\" disabled={!this.undoState?.canRedo} onClick={event => this.handleRedo(event)}>\r\n          <kritzel-icon name=\"redo\"></kritzel-icon>\r\n        </button>\r\n\r\n        <div class=\"utility-separator\"></div>\r\n\r\n        <button class=\"utility-button\">\r\n          <kritzel-icon name=\"delete\" onClick={() => this.delete.emit()}></kritzel-icon>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-nZdy-Ii5.js → p-DoD6F7Y4.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
 import { K as KritzelDevicesHelper } from './p-l10It7Nm.js';
 import { d as defineCustomElement$4 } from './p-CIts5Uma.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-C6-tSCMR.js';
-import { d as defineCustomElement$1 } from './p-aeYt0bPO.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-CD9cCvhR.js';
+import { d as defineCustomElement$1 } from './p-fm-bG_zL.js';
 
 const kritzelSplitButtonCss = ":host{position:relative;display:flex;align-items:center;font-family:sans-serif;z-index:1;padding:var(--kritzel-split-button-padding, 4px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);box-shadow:var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-split-button-border, 1px solid #ebebeb);gap:var(--kritzel-split-button-gap, 4px)}:host(.mobile){--kritzel-split-button-hover-background-color:transparent}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-pointer-cursor, pointer);text-align:center;display:flex;align-items:center;justify-content:center;pointer-events:all;-webkit-tap-highlight-color:transparent}.split-main-button,.split-menu-button{height:auto;display:flex;align-items:center;padding:var(--kritzel-split-button-padding, 8px);background-color:var(--kritzel-split-button-background-color, #ffffff);border-radius:var(--kritzel-split-button-border-radius, 12px);font-size:var(--kritzel-split-button-font-size, 14px)}.split-main-button:hover,.split-menu-button:hover{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button:focus,.split-menu-button:focus{background-color:var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.split-main-button{gap:var(--kritzel-split-button-gap, 4px)}.split-menu-button{border-left:none;justify-content:center}.split-divider{width:var(--kritzel-split-button-divider-width, 1px);height:24px;background-color:var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%))}:disabled{pointer-events:none;opacity:0.5}";
 
@@ -101,7 +101,7 @@ const KritzelSplitButton = /*@__PURE__*/ proxyCustomElement(class KritzelSplitBu
         this.menuScrollTop = event.target.scrollTop;
     };
     render() {
-        return (h(Host, { key: '3603874994e8a9d666448460d7e403252d38f799', class: { mobile: this.isTouchDevice } }, h("button", { key: 'a6a2f8cd22118f7be668f3fd1fc52e38c44b22b3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'e61abf53a2890b6587746eb2aef5a813e81ff1b9', name: this.buttonIcon })), h("div", { key: '17f78d85b2fbd0fe6e7925e10c2531c51bcfdf41', class: "split-divider" }), h("button", { key: 'ac507c76479d66e3483ee898e144a6bea4e8cf6a', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: '8274be53e327d537c2987bc9a3761bc768bdd41f', name: this.dropdownIcon })), h("kritzel-portal", { key: '71136ef798f3c77cff30426a0fcd4ff91bf312b8', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: 'd1363d2029d7b4aafbd6cba9a4ca6cdf617064e9', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
+        return (h(Host, { key: 'a5587085e47c4e33148f9d0817731bfa3aa804b6', class: { mobile: this.isTouchDevice } }, h("button", { key: 'd3815785bb0919e2385bc7b9b0812466ed2b45a3', class: "split-main-button", tabIndex: 0, onClick: this.handleButtonClick, disabled: this.mainButtonDisabled }, this.buttonIcon && h("kritzel-icon", { key: 'b3225e1966bd21e8d37590cb39c0922e46afdaa9', name: this.buttonIcon })), h("div", { key: '526a88ef833cae7d2c7749f2a4bd96bcd2210a56', class: "split-divider" }), h("button", { key: '2c3ee46806bc64edc1f89a97c5e76ec493822065', ref: el => (this.splitMenuButtonRef = el), class: "split-menu-button", tabIndex: 0, onClick: this.toggleMenu, disabled: this.menuButtonDisabled }, h("kritzel-icon", { key: 'c6204d8b14d8cefe9d6eff33af95b2a7ea9a6b7c', name: this.dropdownIcon })), h("kritzel-portal", { key: '07a5e9793484f79d9b4b1f9ae09503f762cb2580', anchor: this.anchorElement, offsetY: 4, onClose: this.closeMenu }, h("kritzel-menu", { key: '0cf7601fd43b846a69152f0fc6ab950ac108ebff', ref: el => (this.menuRef = el), items: this.items, onItemSelect: this.handleItemSelect, onItemSave: this.handleItemSave, onItemCancel: this.handleItemCancel, onItemToggleChildMenu: this.handleItemToggleChildMenu, onItemCloseChildMenu: this.handleItemCloseChildMenu, onClose: this.closeMenu, onScroll: this.handleScroll }))));
     }
     static get style() { return kritzelSplitButtonCss; }
 }, [769, "kritzel-split-button", {
@@ -152,6 +152,6 @@ function defineCustomElement() {
 }
 
 export { KritzelSplitButton as K, defineCustomElement as d };
-//# sourceMappingURL=p-nZdy-Ii5.js.map
+//# sourceMappingURL=p-DoD6F7Y4.js.map
 
-//# sourceMappingURL=p-nZdy-Ii5.js.map
+//# sourceMappingURL=p-DoD6F7Y4.js.map

package/dist/components/{p-nZdy-Ii5.js.map → p-DoD6F7Y4.js.map}

@@ -1 +1 @@
-{"file":"p-nZdy-Ii5.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  font-family: sans-serif;\r\n  z-index: 1;\r\n  padding: var(--kritzel-split-button-padding, 4px);\r\n  background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n  border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-split-button-border, 1px solid #ebebeb);\r\n  gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n:host(.mobile){\r\n  --kritzel-split-button-hover-background-color: transparent;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  background-color: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  color: inherit;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: all;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.split-main-button,\r\n.split-menu-button {\r\n  height: auto;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: var(--kritzel-split-button-padding, 8px);\r\n  background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n  border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n  font-size: var(--kritzel-split-button-font-size, 14px);\r\n}\r\n\r\n.split-main-button:hover,\r\n.split-menu-button:hover {\r\n  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button:focus,\r\n.split-menu-button:focus {\r\n  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button {\r\n  gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n.split-menu-button {\r\n  border-left: none;\r\n  justify-content: center;\r\n}\r\n\r\n.split-divider {\r\n  width: var(--kritzel-split-button-divider-width, 1px);\r\n  height: 24px;\r\n  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:disabled {\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-split-button',\r\n  styleUrl: 'kritzel-split-button.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() buttonIcon: string = 'plus';\r\n  @Prop() dropdownIcon: string = 'chevron-down';\r\n  @Prop() items: IKritzelMenuItem[] = [];\r\n  @Prop() mainButtonDisabled = false;\r\n  @Prop() menuButtonDisabled = false;\r\n\r\n  @Event() mainButtonClick: EventEmitter<void>;\r\n  @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n  @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n  @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n  @Event() menuOpen: EventEmitter<void>;\r\n  @Event() menuClose: EventEmitter<void>;\r\n\r\n  @State() isMenuOpen = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() anchorElement: HTMLElement;\r\n  @State() menuScrollTop: number = 0;\r\n\r\n  splitMenuButtonRef: HTMLButtonElement;\r\n  menuRef: HTMLKritzelMenuElement;\r\n\r\n  @Method()\r\n  async open() {\r\n    if (this.isMenuOpen) return;\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n  }\r\n\r\n  @Method()\r\n  async focusMenu() {\r\n    if (this.menuRef) {\r\n      await this.menuRef.setFocus();\r\n    }\r\n  }\r\n\r\n  private handleButtonClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.mainButtonClick.emit();\r\n  };\r\n\r\n  private toggleMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu(event);\r\n    }\r\n  };\r\n\r\n  private openMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.menuRef?.setScrollTop(this.menuScrollTop);\r\n    });\r\n  };\r\n\r\n  private closeMenu = () => {\r\n    this.isMenuOpen = false;\r\n    this.anchorElement = null;\r\n    this.splitMenuButtonRef?.blur();\r\n    this.menuClose.emit();\r\n  };\r\n\r\n  private handleItemSelect = event => {\r\n    this.itemSelect.emit(event.detail);\r\n  };\r\n\r\n  private handleItemSave = event => {\r\n    this.itemSave.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCancel = event => {\r\n    this.itemCancel.emit(event.detail);\r\n  };\r\n\r\n  private handleItemToggleChildMenu = event => {\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCloseChildMenu = event => {\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleScroll = event => {\r\n    this.menuScrollTop = (event.target as HTMLElement).scrollTop;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n          <kritzel-menu\r\n            ref={el => (this.menuRef = el)}\r\n            items={this.items}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleItemSave}\r\n            onItemCancel={this.handleItemCancel}\r\n            onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n            onClose={this.closeMenu}\r\n            onScroll={this.handleScroll}\r\n          ></kritzel-menu>\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-DoD6F7Y4.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-split-button/kritzel-split-button.css?tag=kritzel-split-button&encapsulation=shadow","src/components/shared/kritzel-split-button/kritzel-split-button.tsx"],"sourcesContent":[":host {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  font-family: sans-serif;\r\n  z-index: 1;\r\n  padding: var(--kritzel-split-button-padding, 4px);\r\n  background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n  border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n  box-shadow: var(--kritzel-split-button-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));\r\n  border: var(--kritzel-split-button-border, 1px solid #ebebeb);\r\n  gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n:host(.mobile){\r\n  --kritzel-split-button-hover-background-color: transparent;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  background-color: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  font-family: inherit;\r\n  font-size: inherit;\r\n  color: inherit;\r\n  -webkit-appearance: none;\r\n  -moz-appearance: none;\r\n  appearance: none;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  text-align: center;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  pointer-events: all;\r\n  -webkit-tap-highlight-color: transparent;\r\n}\r\n\r\n.split-main-button,\r\n.split-menu-button {\r\n  height: auto;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: var(--kritzel-split-button-padding, 8px);\r\n  background-color: var(--kritzel-split-button-background-color, #ffffff);\r\n  border-radius: var(--kritzel-split-button-border-radius, 12px);\r\n  font-size: var(--kritzel-split-button-font-size, 14px);\r\n}\r\n\r\n.split-main-button:hover,\r\n.split-menu-button:hover {\r\n  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button:focus,\r\n.split-menu-button:focus {\r\n  background-color: var(--kritzel-split-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n.split-main-button {\r\n  gap: var(--kritzel-split-button-gap, 4px);\r\n}\r\n\r\n.split-menu-button {\r\n  border-left: none;\r\n  justify-content: center;\r\n}\r\n\r\n.split-divider {\r\n  width: var(--kritzel-split-button-divider-width, 1px);\r\n  height: 24px;\r\n  background-color: var(--kritzel-split-button-divider-background-color, hsl(0, 0%, 0%, 4.3%));\r\n}\r\n\r\n:disabled {\r\n  pointer-events: none;\r\n  opacity: 0.5;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Host, Element, Method } from '@stencil/core';\r\nimport { KritzelDevicesHelper } from '../../../helpers/devices.helper';\r\nimport { IKritzelMenuItem, IKritzelMenuItemSelectEvent, IKritzelMenuItemToggleChildMenuEvent } from '../../../interfaces/menu-item.interface';\r\n\r\n@Component({\r\n  tag: 'kritzel-split-button',\r\n  styleUrl: 'kritzel-split-button.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelSplitButton {\r\n  @Element() host!: HTMLElement;\r\n\r\n  @Prop() buttonIcon: string = 'plus';\r\n  @Prop() dropdownIcon: string = 'chevron-down';\r\n  @Prop() items: IKritzelMenuItem[] = [];\r\n  @Prop() mainButtonDisabled = false;\r\n  @Prop() menuButtonDisabled = false;\r\n\r\n  @Event() mainButtonClick: EventEmitter<void>;\r\n  @Event() itemSelect: EventEmitter<IKritzelMenuItemSelectEvent>;\r\n  @Event() itemSave: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemCancel: EventEmitter<IKritzelMenuItem>;\r\n  @Event() itemToggleChildMenu: EventEmitter<IKritzelMenuItemToggleChildMenuEvent>;\r\n  @Event() itemCloseChildMenu: EventEmitter<IKritzelMenuItem>;\r\n  @Event() menuOpen: EventEmitter<void>;\r\n  @Event() menuClose: EventEmitter<void>;\r\n\r\n  @State() isMenuOpen = false;\r\n  @State() isTouchDevice: boolean = KritzelDevicesHelper.isTouchDevice();\r\n  @State() anchorElement: HTMLElement;\r\n  @State() menuScrollTop: number = 0;\r\n\r\n  splitMenuButtonRef: HTMLButtonElement;\r\n  menuRef: HTMLKritzelMenuElement;\r\n\r\n  @Method()\r\n  async open() {\r\n    if (this.isMenuOpen) return;\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n  }\r\n\r\n  @Method()\r\n  async focusMenu() {\r\n    if (this.menuRef) {\r\n      await this.menuRef.setFocus();\r\n    }\r\n  }\r\n\r\n  private handleButtonClick = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.mainButtonClick.emit();\r\n  };\r\n\r\n  private toggleMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    if (this.isMenuOpen) {\r\n      this.closeMenu();\r\n    } else {\r\n      this.openMenu(event);\r\n    }\r\n  };\r\n\r\n  private openMenu = (event: MouseEvent) => {\r\n    event.stopPropagation();\r\n    this.isMenuOpen = true;\r\n    this.anchorElement = this.host;\r\n    this.menuOpen.emit();\r\n\r\n    requestAnimationFrame(() => {\r\n      this.menuRef?.setScrollTop(this.menuScrollTop);\r\n    });\r\n  };\r\n\r\n  private closeMenu = () => {\r\n    this.isMenuOpen = false;\r\n    this.anchorElement = null;\r\n    this.splitMenuButtonRef?.blur();\r\n    this.menuClose.emit();\r\n  };\r\n\r\n  private handleItemSelect = event => {\r\n    this.itemSelect.emit(event.detail);\r\n  };\r\n\r\n  private handleItemSave = event => {\r\n    this.itemSave.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCancel = event => {\r\n    this.itemCancel.emit(event.detail);\r\n  };\r\n\r\n  private handleItemToggleChildMenu = event => {\r\n    this.itemToggleChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleItemCloseChildMenu = event => {\r\n    this.itemCloseChildMenu.emit(event.detail);\r\n  };\r\n\r\n  private handleScroll = event => {\r\n    this.menuScrollTop = (event.target as HTMLElement).scrollTop;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={{ mobile: this.isTouchDevice }}>\r\n        <button class=\"split-main-button\" tabIndex={0} onClick={this.handleButtonClick} disabled={this.mainButtonDisabled}>\r\n          {this.buttonIcon && <kritzel-icon name={this.buttonIcon}></kritzel-icon>}\r\n        </button>\r\n\r\n        <div class=\"split-divider\"></div>\r\n\r\n        <button ref={el => (this.splitMenuButtonRef = el)} class=\"split-menu-button\" tabIndex={0} onClick={this.toggleMenu} disabled={this.menuButtonDisabled}>\r\n          <kritzel-icon name={this.dropdownIcon}></kritzel-icon>\r\n        </button>\r\n\r\n        <kritzel-portal anchor={this.anchorElement} offsetY={4} onClose={this.closeMenu}>\r\n          <kritzel-menu\r\n            ref={el => (this.menuRef = el)}\r\n            items={this.items}\r\n            onItemSelect={this.handleItemSelect}\r\n            onItemSave={this.handleItemSave}\r\n            onItemCancel={this.handleItemCancel}\r\n            onItemToggleChildMenu={this.handleItemToggleChildMenu}\r\n            onItemCloseChildMenu={this.handleItemCloseChildMenu}\r\n            onClose={this.closeMenu}\r\n            onScroll={this.handleScroll}\r\n          ></kritzel-menu>\r\n        </kritzel-portal>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-CRGwaUcp.js → p-DyVWaSSc.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-CwkUrTy1.js';
-import { d as defineCustomElement$1 } from './p-LAsVgL2e.js';
+import { d as defineCustomElement$1 } from './p-CIlIrPRp.js';
 
 const kritzelStrokeSizeCss = ":host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}";
 
@@ -20,7 +20,7 @@ const KritzelStrokeSize = /*@__PURE__*/ proxyCustomElement(class KritzelStrokeSi
         this.sizeChange.emit(size);
     }
     render() {
-        return (h(Host, { key: '7c9041e061a946f20210cff2330cb736c2703ac7' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
+        return (h(Host, { key: 'd204d14384367ca8847ad30cab9801788c8d8fac' }, this.sizes.map(size => (h("div", { tabIndex: 0, class: {
                 'size-container': true,
                 'selected': this.selectedSize === size,
             }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: '#000000', size: size }))))));
@@ -50,6 +50,6 @@ function defineCustomElement() {
 }
 
 export { KritzelStrokeSize as K, defineCustomElement as d };
-//# sourceMappingURL=p-CRGwaUcp.js.map
+//# sourceMappingURL=p-DyVWaSSc.js.map
 
-//# sourceMappingURL=p-CRGwaUcp.js.map
+//# sourceMappingURL=p-DyVWaSSc.js.map

package/dist/components/{p-CRGwaUcp.js.map → p-DyVWaSSc.js.map}

@@ -1 +1 @@
-{"file":"p-CRGwaUcp.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6iBAA6iB;;MCO7jB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACtB,YAAY,GAAkB,IAAI;AAElD,IAAA,UAAU;AAEX,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,eAAA,EAAA,EAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,EAAA,CAAkB,CACvD,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-stroke-size/kritzel-stroke-size.css?tag=kritzel-stroke-size&encapsulation=shadow","src/components/shared/kritzel-stroke-size/kritzel-stroke-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-stroke-size',\r\n  styleUrl: 'kritzel-stroke-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelStrokeSize {\r\n  @Prop() sizes: number[] = [4, 6, 8, 12, 16, 24];\r\n  @Prop({ mutable: true }) selectedSize: number | null = null;\r\n\r\n  @Event() sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            tabIndex={0}\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-color value='#000000' size={size}></kritzel-color>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-DyVWaSSc.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,6iBAA6iB;;MCO7jB,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;;;;;;;;;AACpB,IAAA,KAAK,GAAa,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;IACtB,YAAY,GAAkB,IAAI;AAElD,IAAA,UAAU;AAEX,IAAA,eAAe,CAAC,IAAY,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI;AACxB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC;;IAG5B,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACF,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,KAClB,CAAA,CAAA,KAAA,EAAA,EACE,QAAQ,EAAE,CAAC,EACX,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,UAAU,EAAE,IAAI,CAAC,YAAY,KAAK,IAAI;AACvC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAA,EAEzC,CAAA,CAAA,eAAA,EAAA,EAAe,KAAK,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,EAAA,CAAkB,CACvD,CACP,CAAC,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-stroke-size/kritzel-stroke-size.css?tag=kritzel-stroke-size&encapsulation=shadow","src/components/shared/kritzel-stroke-size/kritzel-stroke-size.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 8px;\r\n  padding: 8px;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container {\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 50%;\r\n  cursor: var(--kritzel-pointer-cursor, pointer);\r\n  border: 2px solid transparent;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.size-container:hover {\r\n  background-color: var(--kritzel-stroke-size-hover-background-color, #ebebeb);\r\n}\r\n\r\n.size-container.selected {\r\n  border-color: var(--kritzel-selection-border-color, #007AFF);\r\n  background-color: var(--kritzel-stroke-size-selected-background-color, #ebebeb);\r\n}\r\n","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'kritzel-stroke-size',\r\n  styleUrl: 'kritzel-stroke-size.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelStrokeSize {\r\n  @Prop() sizes: number[] = [4, 6, 8, 12, 16, 24];\r\n  @Prop({ mutable: true }) selectedSize: number | null = null;\r\n\r\n  @Event() sizeChange: EventEmitter<number>;\r\n\r\n  private handleSizeClick(size: number) {\r\n    this.selectedSize = size;\r\n    this.sizeChange.emit(size);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        {this.sizes.map(size => (\r\n          <div\r\n            tabIndex={0}\r\n            class={{\r\n              'size-container': true,\r\n              'selected': this.selectedSize === size,\r\n            }}\r\n            onClick={() => this.handleSizeClick(size)}\r\n          >\r\n            <kritzel-color value='#000000' size={size}></kritzel-color>\r\n          </div>\r\n        ))}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/{p-DO4auCYf.js → p-WLXyD_eY.js}

@@ -73,14 +73,14 @@ const KritzelTooltip = /*@__PURE__*/ proxyCustomElement(class KritzelTooltip ext
         }
     }
     render() {
-        return (h(Host, { key: 'b6e220084f7ce3eead25bf60cef965322f59f3e0', style: {
+        return (h(Host, { key: 'c257f254b8ba6b95f251eac3136f5be282d23e30', 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: '0ab91fedc3301b0c42fa773607ce6aa335b73c2e', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: 'bde0c798a393d006737c1d2c54660b6bbdace9e5' }))));
+            } }, h("div", { key: '14f31dc995236a2309e2371ecef278a0e6374139', class: "tooltip-content", onClick: event => event.stopPropagation() }, h("slot", { key: '6dace4d6ed82878333f8771cf4670d53cea36873' }))));
     }
     static get style() { return kritzelTooltipCss; }
 }, [769, "kritzel-tooltip", {
@@ -106,6 +106,6 @@ function defineCustomElement() {
 }
 
 export { KritzelTooltip as K, defineCustomElement as d };
-//# sourceMappingURL=p-DO4auCYf.js.map
+//# sourceMappingURL=p-WLXyD_eY.js.map
 
-//# sourceMappingURL=p-DO4auCYf.js.map
+//# sourceMappingURL=p-WLXyD_eY.js.map

package/dist/components/{p-DO4auCYf.js.map → p-WLXyD_eY.js.map}

@@ -1 +1 @@
-{"file":"p-DO4auCYf.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() offsetY: number = 24;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() positionY: number = 0;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n      const tooltipRect = tooltipContent?.getBoundingClientRect();\r\n      const tooltipWidth = tooltipRect?.width || 0;\r\n      \r\n      const viewportPadding = 12; // Minimum distance from viewport edges\r\n      const anchorCenterX = anchorRect.left + anchorRect.width / 2;\r\n      \r\n      // Step 1: Try to center the tooltip above the anchor\r\n      let idealLeft = anchorCenterX - tooltipWidth / 2;\r\n      \r\n      // Step 2: Clamp to viewport bounds\r\n      const minLeft = viewportPadding;\r\n      const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;\r\n      \r\n      // Apply clamping - adjust if tooltip would overflow\r\n      this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));\r\n      \r\n      // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)\r\n      this.positionY = window.innerHeight - anchorRect.top + this.offsetY;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: `${this.positionX}px`,\r\n          bottom: `${this.positionY}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-WLXyD_eY.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/shared/kritzel-tooltip/kritzel-tooltip.css?tag=kritzel-tooltip&encapsulation=shadow","src/components/shared/kritzel-tooltip/kritzel-tooltip.tsx"],"sourcesContent":[":host {\r\n  width: auto;\r\n}\r\n\r\n.tooltip-content {\r\n  position: relative;\r\n  padding: 8px 12px;\r\n  border-radius: 4px;\r\n  width: fit-content;\r\n  background-color: var(--kritzel-controls-tooltip-background-color, #ffffff);\r\n  color: var(--kritzel-controls-tooltip-color, #000000);\r\n  padding: var(--kritzel-controls-tooltip-padding, 8px);\r\n  border-radius: var(--kritzel-controls-tooltip-border-radius, 16px);\r\n  white-space: nowrap;\r\n  box-shadow: var(--kritzel-controls-tooltip-box-shadow, 0 1px 6px rgba(0, 0, 0, 0.12));\r\n}\r\n\r\n","import { Component, Host, Prop, h, Element, State, Listen, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { KritzelHTMLHelper } from '../../../helpers/html.helper';\r\n\r\n@Component({\r\n  tag: 'kritzel-tooltip',\r\n  styleUrl: 'kritzel-tooltip.css',\r\n  shadow: true,\r\n})\r\nexport class KritzelTooltip {\r\n  @Element() host: HTMLElement;\r\n\r\n  @Prop() isVisible: boolean = false;\r\n  @Prop() anchorElement: HTMLElement;\r\n  @Prop() offsetY: number = 24;\r\n\r\n  @Event() tooltipClosed: EventEmitter<void>;\r\n\r\n  @State() positionX: number = 0;\r\n  @State() positionY: number = 0;\r\n\r\n  @Listen('click', { target: 'document' })\r\n  handleOutsideClick(event: MouseEvent) {\r\n    if( !this.isVisible ) return;\r\n    const target = event.target as HTMLElement;\r\n    if (!this.host.contains(target)) {\r\n      this.tooltipClosed.emit();\r\n    }\r\n  }\r\n\r\n  @Listen('resize', { target: 'window' })\r\n  handleWindowResize() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  @Method()\r\n  async focusContent() {\r\n    const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);\r\n    if (focusableElements.length > 0) {\r\n      focusableElements[0].focus();\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.focusSlottedContent();\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  componentWillUpdate() {\r\n    this.calculateAdjustedPosition();\r\n  }\r\n\r\n  private focusSlottedContent() {\r\n    const slot = this.host.shadowRoot?.querySelector('slot');\r\n    const assignedElements = slot?.assignedElements() || [];\r\n    if (assignedElements.length > 0) {\r\n      const firstElement = assignedElements[0] as HTMLElement;\r\n      firstElement.focus();\r\n    }\r\n  }\r\n\r\n  private calculateAdjustedPosition() {\r\n    if (this.isVisible && this.anchorElement) {\r\n      const anchorRect = this.anchorElement.getBoundingClientRect();\r\n      const tooltipContent = this.host.shadowRoot?.querySelector('.tooltip-content') as HTMLElement;\r\n      const tooltipRect = tooltipContent?.getBoundingClientRect();\r\n      const tooltipWidth = tooltipRect?.width || 0;\r\n      \r\n      const viewportPadding = 12; // Minimum distance from viewport edges\r\n      const anchorCenterX = anchorRect.left + anchorRect.width / 2;\r\n      \r\n      // Step 1: Try to center the tooltip above the anchor\r\n      let idealLeft = anchorCenterX - tooltipWidth / 2;\r\n      \r\n      // Step 2: Clamp to viewport bounds\r\n      const minLeft = viewportPadding;\r\n      const maxLeft = window.innerWidth - tooltipWidth - viewportPadding;\r\n      \r\n      // Apply clamping - adjust if tooltip would overflow\r\n      this.positionX = Math.max(minLeft, Math.min(idealLeft, maxLeft));\r\n      \r\n      // Step 3: Calculate bottom position (distance from viewport bottom to top of anchor + offset)\r\n      this.positionY = window.innerHeight - anchorRect.top + this.offsetY;\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{\r\n          position: 'fixed',\r\n          zIndex: '9999',\r\n          transition: 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out',\r\n          visibility: this.isVisible ? 'visible' : 'hidden',\r\n          left: `${this.positionX}px`,\r\n          bottom: `${this.positionY}px`,\r\n        }}\r\n      >\r\n        <div class=\"tooltip-content\" onClick={event => event.stopPropagation()}>\r\n          <slot></slot>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}