@kritzel/editor 0.4.31

package/dist/components/p-BrGJIoGK.js

@@ -0,0 +1,52 @@
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-4-qLegHb.js';
+
+const kritzelCurrentUserCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}kritzel-avatar{cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}`;
+
+const KritzelCurrentUser = /*@__PURE__*/ proxyCustomElement(class KritzelCurrentUser extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * The current user to display
+     */
+    user;
+    /**
+     * Avatar size in pixels
+     */
+    avatarSize = 40;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    render() {
+        return (h(Host, { key: '27a6be0c90f290588190f9810608041eb713ac75' }, h("kritzel-avatar", { key: 'f06de8b0e904cbcf3fb72ed2cc50da559ca2c9c4', user: this.user, size: this.avatarSize })));
+    }
+    static get style() { return kritzelCurrentUserCss(); }
+}, [513, "kritzel-current-user", {
+        "user": [16],
+        "avatarSize": [2, "avatar-size"],
+        "terms": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-current-user", "kritzel-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-current-user":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelCurrentUser);
+            }
+            break;
+        case "kritzel-avatar":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelCurrentUser as K, defineCustomElement as d };

package/dist/components/p-BvG3JO85.js

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

package/dist/components/p-CS3YZVYE.js

@@ -0,0 +1,319 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { KritzelHTMLHelper, ObjectHelper } from '@kritzel/engine';
+
+const KritzelPortal = /*@__PURE__*/ proxyCustomElement(class KritzelPortal extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.close = createEvent(this, "close");
+    }
+    get host() { return this; }
+    anchor;
+    anchorChanged(newValue) {
+        if (newValue) {
+            this.openPortal();
+            // Use requestAnimationFrame to wait for the browser to paint the portal content
+            // so that getBoundingClientRect returns accurate dimensions
+            requestAnimationFrame(() => {
+                this.calculatePosition();
+                if (this.autoFocus) {
+                    this.focusFirstElement();
+                }
+            });
+        }
+        else {
+            this.closePortal();
+        }
+    }
+    offsetX;
+    offsetY;
+    autoFocus = true;
+    close;
+    handleDismissMenus() {
+        if (this.portal) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleOutsideClick(event) {
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const target = event.target;
+        if (!this.host.contains(target)) {
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleOutsidePointerDown(event) {
+        if (!this.portal)
+            return;
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        const path = event.composedPath();
+        const isInsidePortal = path.some(el => el === this.host);
+        const isOnAnchor = this.anchor && path.some(el => el === this.anchor);
+        if (!isInsidePortal && !isOnAnchor) {
+            event.stopPropagation();
+            event.preventDefault();
+            this.close.emit();
+            this.closePortal();
+        }
+    }
+    handleKeyDown(event) {
+        const isLastPortal = this.lastAddedPortal === this.portal;
+        if (!isLastPortal)
+            return;
+        if (event.key === 'Escape') {
+            event.stopPropagation();
+            this.anchor.focus();
+            this.close.emit();
+            this.closePortal();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+            return;
+        }
+        if (event.key === 'Enter') {
+            const activeElement = this.getDeepActiveElement();
+            if (activeElement?.click) {
+                event.preventDefault();
+                activeElement.click();
+            }
+        }
+    }
+    handleResize() {
+        this.calculatePosition();
+    }
+    handleWindowScroll() {
+        const isInViewport = KritzelHTMLHelper.isElementInViewport(this.anchor);
+        if (!isInViewport) {
+            this.anchor?.blur();
+            this.closePortal();
+            return;
+        }
+        this.calculatePosition();
+    }
+    portal;
+    id = `portal-${ObjectHelper.generateUUID()}`;
+    defaultOffset = 0;
+    minLeft = 0;
+    themeObserver;
+    focusFirstElement() {
+        requestAnimationFrame(() => {
+            this.firstFocusableElement?.focus?.();
+        });
+    }
+    getDeepActiveElement() {
+        let activeEl = document.activeElement;
+        while (activeEl?.shadowRoot?.activeElement) {
+            activeEl = activeEl.shadowRoot.activeElement;
+        }
+        return activeEl;
+    }
+    trapFocus(event) {
+        const focusableElements = KritzelHTMLHelper.getFocusableElements(this.host);
+        if (focusableElements.length === 0)
+            return;
+        const firstFocusable = focusableElements[0];
+        const lastFocusable = focusableElements[focusableElements.length - 1];
+        const activeElement = this.getDeepActiveElement();
+        if (event.shiftKey) {
+            /* shift + tab */
+            if (activeElement === firstFocusable) {
+                lastFocusable.focus();
+                event.preventDefault();
+            }
+        }
+        else {
+            /* tab */
+            if (activeElement === lastFocusable) {
+                firstFocusable.focus();
+                event.preventDefault();
+            }
+        }
+    }
+    get firstFocusableElement() {
+        const slotEl = this.host.shadowRoot?.querySelector('slot');
+        const firstAssigned = slotEl?.assignedElements({ flatten: true })[0];
+        if (!firstAssigned)
+            return null;
+        const focusable = KritzelHTMLHelper.getFocusableElements(firstAssigned);
+        return focusable[0] ?? firstAssigned;
+    }
+    get lastAddedPortal() {
+        const portals = Array.from(document.querySelectorAll('[id^="portal-"]'));
+        return portals.length ? portals[portals.length - 1] : null;
+    }
+    calculateLeft() {
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = this.offsetX ?? this.defaultOffset;
+        // Determine alignment based on anchor position
+        // If anchor center is past the viewport midpoint, align to end (right edge of anchor)
+        const anchorCenter = refRect.left + refRect.width / 2;
+        const viewportMidpoint = window.innerWidth / 2;
+        const shouldAlignEnd = anchorCenter > viewportMidpoint;
+        let left;
+        if (shouldAlignEnd) {
+            // Align portal's right edge to anchor's right edge
+            left = refRect.right - portalRect.width - offset;
+        }
+        else {
+            // Align portal's left edge to anchor's left edge
+            left = refRect.left + offset;
+        }
+        // Clamp to viewport bounds
+        const maxLeft = window.innerWidth - portalRect.width - this.minLeft;
+        if (left < this.minLeft)
+            left = this.minLeft;
+        if (left > maxLeft)
+            left = maxLeft;
+        return Math.round(left + window.scrollX);
+    }
+    calculateTop() {
+        if (!this.anchor || !this.portal)
+            return 0;
+        const refRect = this.anchor.getBoundingClientRect();
+        const portalRect = this.portal.getBoundingClientRect();
+        const offset = this.offsetY ?? this.defaultOffset;
+        const padding = 8; // Minimum padding from viewport edges
+        let top = refRect.bottom + offset;
+        const spaceBelow = window.innerHeight - refRect.bottom - offset - padding;
+        const spaceAbove = refRect.top - offset - padding;
+        // Reset max-height CSS custom property  
+        this.host.style.removeProperty('--kritzel-portal-max-height');
+        if (portalRect.height <= spaceBelow) {
+            // Fits below the anchor
+            top = refRect.bottom + offset;
+        }
+        else if (portalRect.height <= spaceAbove) {
+            // Fits above the anchor
+            top = refRect.top - portalRect.height - offset;
+        }
+        else {
+            // Doesn't fit above or below - constrain the height
+            if (spaceBelow >= spaceAbove) {
+                // More space below, keep it below with constrained height
+                top = refRect.bottom + offset;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceBelow}px`);
+            }
+            else {
+                // More space above, position above with constrained height
+                top = padding;
+                this.host.style.setProperty('--kritzel-portal-max-height', `${spaceAbove}px`);
+            }
+        }
+        return Math.round(top + window.scrollY);
+    }
+    getThemeProvider() {
+        if (!this.anchor)
+            return null;
+        let current = this.anchor;
+        while (current) {
+            const provider = current.closest('kritzel-editor');
+            if (provider instanceof H) {
+                return provider;
+            }
+            const portalProvider = current.closest('[id^="portal-"]');
+            if (portalProvider instanceof H) {
+                return portalProvider;
+            }
+            const root = current.getRootNode();
+            if (root instanceof ShadowRoot) {
+                current = root.host;
+            }
+            else {
+                return null;
+            }
+        }
+        return null;
+    }
+    openPortal() {
+        this.portal = document.createElement('div');
+        this.portal.setAttribute('id', this.id);
+        this.portal.style.zIndex = '1';
+        this.portal.style.position = 'absolute';
+        this.portal.style.top = '0px';
+        this.portal.style.left = '0px';
+        this.portal.style.visibility = 'hidden';
+        const themeProvider = this.getThemeProvider();
+        if (themeProvider) {
+            const applyTheme = () => {
+                if (!this.portal)
+                    return;
+                for (let i = 0; i < themeProvider.style.length; i++) {
+                    const prop = themeProvider.style[i];
+                    if (prop.startsWith('--kritzel-')) {
+                        this.portal.style.setProperty(prop, themeProvider.style.getPropertyValue(prop));
+                    }
+                }
+            };
+            applyTheme();
+            this.themeObserver = new MutationObserver(() => applyTheme());
+            this.themeObserver.observe(themeProvider, {
+                attributes: true,
+                attributeFilter: ['style'],
+            });
+        }
+        this.portal.appendChild(this.host);
+        document.body.append(this.portal);
+    }
+    closePortal() {
+        this.themeObserver?.disconnect();
+        this.themeObserver = null;
+        const portal = document.getElementById(this.id);
+        if (!portal)
+            return;
+        document.body.removeChild(portal);
+        this.host.remove();
+    }
+    calculatePosition() {
+        if (!this.anchor || !this.portal)
+            return;
+        const top = this.calculateTop();
+        const left = this.calculateLeft();
+        this.portal.style.top = `${top}px`;
+        this.portal.style.left = `${left}px`;
+        this.portal.style.visibility = 'visible';
+    }
+    render() {
+        return (h(Host, { key: 'c92b863d46e8a96b44d318288471ad11ae04d1f4', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'd207f238571b877145c0c445e9d184cb1c4a4e2b' })));
+    }
+    static get watchers() { return {
+        "anchor": [{
+                "anchorChanged": 0
+            }]
+    }; }
+}, [769, "kritzel-portal", {
+        "anchor": [16],
+        "offsetX": [2, "offset-x"],
+        "offsetY": [2, "offset-y"],
+        "autoFocus": [4, "auto-focus"]
+    }, [[8, "kritzel-dismiss-menus", "handleDismissMenus"], [8, "click", "handleOutsideClick"], [6, "pointerdown", "handleOutsidePointerDown"], [8, "keydown", "handleKeyDown"], [11, "resize", "handleResize"], [11, "scroll", "handleWindowScroll"]], {
+        "anchor": [{
+                "anchorChanged": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-portal"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelPortal);
+            }
+            break;
+    } });
+}
+
+export { KritzelPortal as K, defineCustomElement as d };

package/dist/components/p-CVxGF4bJ.js

@@ -0,0 +1,150 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$1 } from './p-BGmTmdLe.js';
+
+const kritzelMasterDetailCss = () => `:host{display:block;width:100%;height:100%}.master-detail-container{display:flex;width:100%;height:100%;min-height:var(--kritzel-master-detail-min-height, 300px);gap:var(--kritzel-master-detail-gap, 0);background-color:var(--kritzel-master-detail-background-color, transparent)}.master-menu{display:flex;flex-direction:column;width:var(--kritzel-master-detail-menu-width, 200px);min-width:var(--kritzel-master-detail-menu-min-width, 160px);padding:var(--kritzel-master-detail-menu-padding, 8px);background-color:var(--kritzel-master-detail-menu-background-color, #ffffff);border-right:var(--kritzel-master-detail-menu-border-right, 1px solid #ebebeb);gap:var(--kritzel-master-detail-menu-gap, 4px);overflow-y:auto}.menu-item{display:flex;align-items:center;gap:var(--kritzel-master-detail-menu-item-gap, 10px);padding:var(--kritzel-master-detail-menu-item-padding, 10px 12px);border:none;border-radius:var(--kritzel-master-detail-menu-item-border-radius, 6px);background-color:var(--kritzel-master-detail-menu-item-background-color, transparent);color:var(--kritzel-master-detail-menu-item-color, #333333);font-family:inherit;font-size:var(--kritzel-master-detail-menu-item-font-size, 14px);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400);text-align:left;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 150ms ease, color 150ms ease;-webkit-tap-highlight-color:transparent}.menu-item:hover:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item:active:not(.is-disabled){background-color:var(--kritzel-master-detail-menu-item-active-background-color, #e0e0e0)}.menu-item.is-selected{background-color:var(--kritzel-master-detail-menu-item-selected-background-color, #0066cc);color:var(--kritzel-master-detail-menu-item-selected-color, #ffffff);font-weight:var(--kritzel-master-detail-menu-item-selected-font-weight, 500)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-selected-hover-background-color, #0052a3)}.menu-item.is-disabled{color:var(--kritzel-master-detail-menu-item-disabled-color, #999999);cursor:not-allowed;opacity:0.6}.menu-item:focus-visible{outline:var(--kritzel-master-detail-menu-item-focus-outline, revert);outline-offset:var(--kritzel-master-detail-menu-item-focus-outline-offset, revert)}.menu-item-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.menu-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-panel{flex:1;min-height:0;padding:var(--kritzel-master-detail-detail-padding, 16px);background-color:var(--kritzel-master-detail-detail-background-color, #ffffff);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}.detail-panel:focus{outline:none}.detail-panel:focus-visible{outline:var(--kritzel-master-detail-detail-focus-outline, revert);outline-offset:var(--kritzel-master-detail-detail-focus-outline-offset, revert)}.mobile-back-button{display:none;align-items:center;gap:8px;background:none;border:none;padding:0 0 16px 0;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--kritzel-master-detail-back-button-color, #333333);font-weight:500;font-size:14px;font-family:inherit}.mobile-back-icon{display:flex;align-items:center;flex-shrink:0}.menu-item-chevron{display:none;flex-shrink:0;margin-left:auto;color:var(--kritzel-master-detail-menu-item-chevron-color, #999999)}.menu-item-chevron svg{width:16px;height:16px;stroke:currentColor}@media (max-width: 768px){.master-menu{width:100%;border-right:none}.detail-panel{display:none;width:100%}.master-detail-container.is-mobile-detail-visible .master-menu{display:none}.master-detail-container.is-mobile-detail-visible .detail-panel{display:block}.mobile-back-button{display:flex}.menu-item.is-selected{background-color:transparent;color:var(--kritzel-master-detail-menu-item-color, #333333);font-weight:var(--kritzel-master-detail-menu-item-font-weight, 400)}.menu-item.is-selected:hover{background-color:var(--kritzel-master-detail-menu-item-hover-background-color, #ebebeb)}.menu-item-chevron{display:flex;align-items:center}}`;
+
+const KritzelMasterDetail = /*@__PURE__*/ proxyCustomElement(class KritzelMasterDetail extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.itemSelect = createEvent(this, "itemSelect");
+    }
+    get host() { return this; }
+    /** Array of menu items to display in the master (left) panel */
+    items = [];
+    /** ID of the currently selected item */
+    selectedItemId;
+    /** Emitted when an item is selected */
+    itemSelect;
+    focusedIndex = -1;
+    showMobileDetail = false;
+    tabRefs = [];
+    watchSelectedItemId(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.showMobileDetail = true;
+        }
+    }
+    componentWillRender() {
+        this.tabRefs = [];
+    }
+    handleItemClick = (item) => {
+        if (item.disabled)
+            return;
+        this.itemSelect.emit({ item });
+        this.showMobileDetail = true;
+    };
+    handleBackClick = () => {
+        this.showMobileDetail = false;
+    };
+    handleKeyDown = (event, item, index) => {
+        const enabledIndices = this.items
+            .map((it, idx) => (!it.disabled ? idx : -1))
+            .filter(idx => idx !== -1);
+        const currentEnabledIndex = enabledIndices.indexOf(index);
+        switch (event.key) {
+            case 'ArrowDown': {
+                event.preventDefault();
+                const nextIndex = enabledIndices[(currentEnabledIndex + 1) % enabledIndices.length];
+                this.focusTab(nextIndex);
+                break;
+            }
+            case 'ArrowUp': {
+                event.preventDefault();
+                const prevIndex = enabledIndices[(currentEnabledIndex - 1 + enabledIndices.length) % enabledIndices.length];
+                this.focusTab(prevIndex);
+                break;
+            }
+            case 'Home': {
+                event.preventDefault();
+                this.focusTab(enabledIndices[0]);
+                break;
+            }
+            case 'End': {
+                event.preventDefault();
+                this.focusTab(enabledIndices[enabledIndices.length - 1]);
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                event.preventDefault();
+                this.handleItemClick(item);
+                break;
+            }
+        }
+    };
+    focusTab(index) {
+        this.focusedIndex = index;
+        const tab = this.tabRefs[index];
+        if (tab) {
+            tab.focus();
+        }
+    }
+    handleFocus = (index) => {
+        this.focusedIndex = index;
+    };
+    handleBlur = () => {
+        this.focusedIndex = -1;
+    };
+    setTabRef = (el, index) => {
+        if (el) {
+            this.tabRefs[index] = el;
+        }
+    };
+    getTabIndex(item, _index) {
+        if (item.disabled)
+            return -1;
+        return 0;
+    }
+    render() {
+        const selectedItem = this.items.find(item => item.id === this.selectedItemId);
+        const panelId = 'master-detail-panel';
+        const selectedTabId = selectedItem ? `tab-${selectedItem.id}` : undefined;
+        return (h(Host, { key: 'ee642d3c2df215971244c6dc3807721324d1a08e' }, h("div", { key: 'a005e6614961033574062968df84c65bd496f0c3', class: {
+                'master-detail-container': true,
+                'is-mobile-detail-visible': this.showMobileDetail,
+            } }, h("nav", { key: 'abf9285d82c4d4c49041b4bfff1cf11e0aaee37d', class: "master-menu", role: "tablist", "aria-orientation": "vertical", "aria-label": "Settings categories" }, this.items.map((item, index) => (h("button", { key: item.id, id: `tab-${item.id}`, ref: el => this.setTabRef(el, index), class: {
+                'menu-item': true,
+                'is-selected': item.id === this.selectedItemId,
+                'is-disabled': !!item.disabled,
+                'is-focused': index === this.focusedIndex,
+            }, role: "tab", "aria-selected": item.id === this.selectedItemId ? 'true' : 'false', "aria-controls": panelId, "aria-disabled": item.disabled ? 'true' : undefined, tabIndex: this.getTabIndex(item, index), disabled: item.disabled, onClick: () => this.handleItemClick(item), onKeyDown: e => this.handleKeyDown(e, item, index), onFocus: () => this.handleFocus(index), onBlur: this.handleBlur }, item.icon && (h("kritzel-icon", { name: item.icon, size: 20, class: "menu-item-icon" })), h("span", { class: "menu-item-label" }, item.label), h("span", { class: "menu-item-chevron", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "m9 18 6-6-6-6" }))))))), h("div", { key: '9f30af7be93c5982e78d789903ad54514e9f9bd9', id: panelId, class: "detail-panel", role: "tabpanel", "aria-labelledby": selectedTabId }, h("button", { key: '0ce5b6f012fbbc84b4a950afbb0604380070f1bc', class: "mobile-back-button", onClick: this.handleBackClick, "aria-label": "Back to menu" }, h("kritzel-icon", { key: '898bcfb6ccb1e07476599bc998a4b5d2e6de0cf2', name: "chevron-left", size: 20, class: "mobile-back-icon" }), "Back"), h("slot", { key: '5ce1c6cdc8aa53fc3bd3c56c0ea5549d88a8f267' })))));
+    }
+    static get watchers() { return {
+        "selectedItemId": [{
+                "watchSelectedItemId": 0
+            }]
+    }; }
+    static get style() { return kritzelMasterDetailCss(); }
+}, [769, "kritzel-master-detail", {
+        "items": [16],
+        "selectedItemId": [1, "selected-item-id"],
+        "focusedIndex": [32],
+        "showMobileDetail": [32]
+    }, undefined, {
+        "selectedItemId": [{
+                "watchSelectedItemId": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-master-detail", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-master-detail":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelMasterDetail);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelMasterDetail as K, defineCustomElement as d };