kritzel-stencil 0.4.22 → 0.4.24

package/dist/components/kritzel-portal.js

@@ -1,4 +1,4 @@
-import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-BPsKYMH6.js';
+import { K as KritzelPortal$1, d as defineCustomElement$1 } from './p-DYPA7jpg.js';
 
 const KritzelPortal = KritzelPortal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-settings.js

@@ -1,4 +1,4 @@
-import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-Dx5NfJ0U.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-DW1B118Q.js';
 
 const KritzelSettings = KritzelSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-shape-fill.js

@@ -1,4 +1,4 @@
-import { K as KritzelShapeFill$1, d as defineCustomElement$1 } from './p-BFYtCsZu.js';
+import { K as KritzelShapeFill$1, d as defineCustomElement$1 } from './p-Covorf4C.js';
 
 const KritzelShapeFill = KritzelShapeFill$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-share-dialog.js

@@ -1,4 +1,4 @@
-import { K as KritzelShareDialog$1, d as defineCustomElement$1 } from './p-CwZ3KKFq.js';
+import { K as KritzelShareDialog$1, d as defineCustomElement$1 } from './p-DT_WBwsw.js';
 
 const KritzelShareDialog = KritzelShareDialog$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-slide-toggle.js

@@ -1,4 +1,4 @@
-import { K as KritzelSlideToggle$1, d as defineCustomElement$1 } from './p-BozrueXV.js';
+import { K as KritzelSlideToggle$1, d as defineCustomElement$1 } from './p-ME1sDz3f.js';
 
 const KritzelSlideToggle = KritzelSlideToggle$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-split-button.js

@@ -1,4 +1,4 @@
-import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-C98Eb3_R.js';
+import { K as KritzelSplitButton$1, d as defineCustomElement$1 } from './p-dAXnRkjA.js';
 
 const KritzelSplitButton = KritzelSplitButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-stroke-size.js

@@ -1,4 +1,4 @@
-import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-GKmqCI8r.js';
+import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-fSV6KVTC.js';
 
 const KritzelStrokeSize = KritzelStrokeSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-sync-indicator.js

@@ -1,4 +1,4 @@
-import { K as KritzelSyncIndicator$1, d as defineCustomElement$1 } from './p-CAoN_STZ.js';
+import { K as KritzelSyncIndicator$1, d as defineCustomElement$1 } from './p-Bxi-Bm49.js';
 
 const KritzelSyncIndicator = KritzelSyncIndicator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-tool-config.js

@@ -1,4 +1,4 @@
-import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-HoO86l1o.js';
+import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-CWAChRD5.js';
 
 const KritzelToolConfig = KritzelToolConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-tooltip.js

@@ -1,4 +1,4 @@
-import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-CaBbajU2.js';
+import { K as KritzelTooltip$1, d as defineCustomElement$1 } from './p-o3NYKrVL.js';
 
 const KritzelTooltip = KritzelTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-utility-panel.js

@@ -1,4 +1,4 @@
-import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-CzW58DHM.js';
+import { K as KritzelUtilityPanel$1, d as defineCustomElement$1 } from './p-BZZ3KRPk.js';
 
 const KritzelUtilityPanel = KritzelUtilityPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-watermark.js

@@ -1,4 +1,4 @@
-import { K as KritzelWatermark$1, d as defineCustomElement$1 } from './p-DtnMdWWB.js';
+import { K as KritzelWatermark$1, d as defineCustomElement$1 } from './p-BShrnlam.js';
 
 const KritzelWatermark = KritzelWatermark$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-workspace-manager.js

@@ -1,4 +1,4 @@
-import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-D1rjfWgJ.js';
+import { K as KritzelWorkspaceManager$1, d as defineCustomElement$1 } from './p-BkXQL5Dl.js';
 
 const KritzelWorkspaceManager = KritzelWorkspaceManager$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-zoom-panel.js

@@ -1,4 +1,4 @@
-import { K as KritzelZoomPanel$1, d as defineCustomElement$1 } from './p-fL9rl200.js';
+import { K as KritzelZoomPanel$1, d as defineCustomElement$1 } from './p-BFYT03fw.js';
 
 const KritzelZoomPanel = KritzelZoomPanel$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-jIKskj3S.js → p-1Q4VnThv.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { d as defineCustomElement$1 } from './p-CSuU8frA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
+import { d as defineCustomElement$1 } from './p-Ck-87E2G.js';
 
 const kritzelPillTabsCss = () => `:host{display:block;max-width:100%}.pill-tabs-container{display:inline-flex;align-items:center;gap:4px;padding:4px;max-width:100%;border-radius:var(--kritzel-pill-tabs-border-radius, 10px);background:var(--kritzel-pill-tabs-background, #f0f0f0);box-sizing:border-box}.pill-tab{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;max-width:100%;padding:8px 16px;border:none;border-radius:var(--kritzel-pill-tabs-tab-border-radius, 8px);background:var(--kritzel-pill-tabs-tab-background, transparent);color:var(--kritzel-pill-tabs-tab-text-color, #666666);font-family:inherit;font-size:14px;font-weight:500;cursor:var(--kritzel-global-pointer-cursor, pointer);transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;white-space:nowrap}.pill-tab:hover:not(.selected){background:var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05))}.pill-tab.selected{background:var(--kritzel-pill-tabs-tab-background-selected, #ffffff);color:var(--kritzel-pill-tabs-tab-text-color-selected, #000000);box-shadow:var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1))}.pill-tab:focus{outline:none}.pill-tab:focus-visible{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.pill-tab-label{display:block;min-width:0;max-width:var(--kritzel-pill-tabs-tab-label-max-width, 10rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1}.pill-tab kritzel-icon{flex-shrink:0}`;
 
@@ -62,7 +62,7 @@ const KritzelPillTabs = /*@__PURE__*/ proxyCustomElement(class KritzelPillTabs e
         buttons?.[newIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: 'f02f93ada5ec002695b62f511c847de201a8cbe4' }, h("div", { key: 'bb08ae773f1b993cb330556a5778d71fc5e91ce1', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
+        return (h(Host, { key: '16fce447fb7db0539ba115ef19771ac78f30a302' }, h("div", { key: '95487da922621b18c1ec422eb0d464131dbc28d3', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
                 'pill-tab': true,
                 'selected': this.value === tab.id,
             }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));

package/dist/components/{p-Cm33td2O.js → p-3tBE7SyG.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 
 var KritzelMouseButton;
 (function (KritzelMouseButton) {
@@ -79,7 +79,7 @@ const KritzelCursorTrail = /*@__PURE__*/ proxyCustomElement(class KritzelCursorT
         }
     }
     render() {
-        return (h(Host, { key: 'b427550b19a3e172cb25d05e34635121b82a61c5' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: '9685b563497e110f36c0feffbfde04ebeb38024b', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
+        return (h(Host, { key: 'cf2cf1c689bdc8ea393a7ea8f32698cfcdb0e375' }, this.cursorTrailPoints.length > 1 && (h("svg", { key: 'df38c45537217982f7fb9513b954f3b0fa27acea', class: "cursor-trail-svg", xmlns: "http://www.w3.org/2000/svg", style: {
                 position: 'absolute',
                 left: '0',
                 top: '0',

package/dist/components/{p-fL9rl200.js → p-BFYT03fw.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { d as defineCustomElement$1 } from './p-CSuU8frA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
+import { d as defineCustomElement$1 } from './p-Ck-87E2G.js';
 
 const kritzelZoomPanelCss = () => `:host{display:block;z-index:1}.panel{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-zoom-panel-gap, 4px);padding:var(--kritzel-zoom-panel-padding, 4px);border:var(--kritzel-zoom-panel-border, 1px solid #ebebeb);border-radius:var(--kritzel-zoom-panel-border-radius, 12px);background-color:var(--kritzel-zoom-panel-background-color, #ffffff);box-shadow:var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.panel.visible{opacity:1;pointer-events:auto}.zoom-level{display:inline-flex;align-items:center;justify-content:center;min-width:46px;color:var(--kritzel-zoom-panel-icon-color, #000000);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;font-weight:500;line-height:1;padding:0 4px;user-select:none}.zoom-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-zoom-panel-button-size, 32px);height:var(--kritzel-zoom-panel-button-size, 32px);padding:0;border:0;border-radius:var(--kritzel-zoom-panel-button-border-radius, 8px);background:transparent;background-color:transparent;color:var(--kritzel-zoom-panel-icon-color, #000000);--kritzel-icon-color:var(--kritzel-zoom-panel-icon-color, #000000);box-shadow:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.zoom-button:hover,.zoom-button:focus-visible{background-color:var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.zoom-button:active{background-color:var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%))}.zoom-button:disabled{opacity:0.5;cursor:not-allowed;pointer-events:none}`;
 
@@ -39,7 +39,7 @@ const KritzelZoomPanel = /*@__PURE__*/ proxyCustomElement(class KritzelZoomPanel
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (h(Host, { key: 'ac5b3f37fbc298b1522f0ff80c26734164b5358a' }, h("div", { key: '8ac3f3600c45c064d9c4c4c9efa78397790edf4b', class: { panel: true, visible: this.visible } }, h("button", { key: '63b2a3fce804a310146d95cc9c2a874707f9e265', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '86ebb85dfc2b746cedd0ed63cd2ae90378f6bbb8', name: "minus" })), h("span", { key: '5191cc1aa9966234c1634882af145403acd32211', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '47a7ee5b6c1cf1c99cd1826877e0a1c4ce224442', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '09782e094534fbc5bbcc612f24eea359568d6132', name: "plus" })))));
+        return (h(Host, { key: '02de6ea9f2f7b6e057555e3b7e1ee3340cab5fa1' }, h("div", { key: '7531e03a4cfa05165057410e4dde3b4cc695f4de', class: { panel: true, visible: this.visible } }, h("button", { key: '57d324c7ad1c21ee8e107ad41cf1a4b708b0fccc', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '656128018addf58a59f223fab400605aeef4f5a8', name: "minus" })), h("span", { key: '32562a4709f8dea98fe3a80bf8a63722b176a3f4', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '4c0c5141597f0265ff4bf9d7bd1105666b6b7a76', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: 'f85f69f5b0e214a557dfecb6164f5577af66ca7f', name: "plus" })))));
     }
     static get style() { return kritzelZoomPanelCss(); }
 }, [513, "kritzel-zoom-panel", {

package/dist/components/{p-DtnMdWWB.js → p-BShrnlam.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 
 const ABSOLUTE_SCALE_MAX = 1000;
 const ABSOLUTE_SCALE_MIN = 0.0001;
@@ -25,7 +25,7 @@ const KritzelWatermark = /*@__PURE__*/ proxyCustomElement(class KritzelWatermark
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (h(Host, { key: 'ae00d98f16912afcb7a90d47a9fc4d55fc7468f0' }, h("a", { key: '8781f94c9efe44b0e7a7a8c20a119160cb9feb8e', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (h(Host, { key: 'de81b568421f5517fe19897bd4a4a5d58d1f622d' }, h("a", { key: '6278f78180869650afc181aac5c37aa401c09040', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
     }
     static get style() { return kritzelWatermarkCss(); }
 }, [513, "kritzel-watermark", {

package/dist/components/{p-BsLI_BWq.js → p-BXUx_C0N.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { d as defineCustomElement$1 } from './p-CSuU8frA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
+import { d as defineCustomElement$1 } from './p-Ck-87E2G.js';
 
 const kritzelNotificationCardCss = () => `:host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}`;
 

package/dist/components/{p-CzW58DHM.js → p-BZZ3KRPk.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { d as defineCustomElement$1 } from './p-CSuU8frA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
+import { d as defineCustomElement$1 } from './p-Ck-87E2G.js';
 
 const kritzelUtilityPanelCss = () => `:host{display:flex;flex-direction:row;align-items:center;padding:4px;gap:8px;border-top-left-radius:12px;border-top-right-radius:12px;background-color:var(--kritzel-utility-panel-background-color, #e2e2e2);width:fit-content;user-select:none;z-index:1}.utility-button{display:flex;justify-content:center;align-items:center;width:28px;height:28px;padding:8px 4px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-utility-panel-button-color, #333333);--kritzel-icon-color:var(--kritzel-utility-panel-button-color, #333333);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-utility-panel-button-border-radius, 8px)}.utility-button:hover,.utility-button:focus-visible{background-color:var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.utility-button:disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.utility-separator{width:1px;height:16px;background-color:var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%))}`;
 
@@ -33,7 +33,7 @@ const KritzelUtilityPanel = /*@__PURE__*/ proxyCustomElement(class KritzelUtilit
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: '57c1a6746e4d5b319bb368c9d0bfc52a31d8c8de' }, h("button", { key: '5fb00d62b68de41feda9fafb3eec46cc0b85ba0e', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '5ed2c36405ac7113ac697de9102aaf7067127e2a', name: "undo" })), h("button", { key: '0d58c8cbbb8e9547b9416dbf81a2c8011208dc6c', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '70264118cbe0f54335a02941fdc868f63476cd1c', name: "redo" })), h("div", { key: '6eed6a603b8bc62e55b1f6fe82e7d035d1f5833c', class: "utility-separator" }), h("button", { key: 'd11195da7a86496afcca26105a6a0f066b1b2340', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '5e4c731f90863b4db917c67ac7e87c2945c7bcaa', name: "delete" }))));
+        return (h(Host, { key: 'bc0322b40c4ff4fba997f1dc1901edbb934e4a0a' }, h("button", { key: 'ff48698d2757b0d99cacfd4fbaa5a7b0ae8f1604', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: 'bc6756df10c7979e06cd9ebdb172b5ef54c7bb67', name: "undo" })), h("button", { key: '07afd176ae1b5cb5a65cd097ce4a99a131aee7aa', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '4573d7ab91f0cbfa0aafb607050f0b09048d60e1', name: "redo" })), h("div", { key: 'b663c43ef9181f61b12614245a65d063f6d94eaf', class: "utility-separator" }), h("button", { key: '248f7ae7cabbd83585674dcb16124a3f9fa2449b', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '6cbc48e118c96770333ed3e5947e54e497e93716', name: "delete" }))));
     }
     static get style() { return kritzelUtilityPanelCss(); }
 }, [513, "kritzel-utility-panel", {

package/dist/components/{p-D1rjfWgJ.js → p-BkXQL5Dl.js}

@@ -1,10 +1,10 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 import { K as KritzelWorkspace } from './p-DAwPPDMS.js';
 import { O as ObjectHelper } from './p-DPONTran.js';
-import { d as defineCustomElement$5 } from './p-CSuU8frA.js';
-import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-BrNsOp2v.js';
-import { d as defineCustomElement$2 } from './p-BPsKYMH6.js';
-import { d as defineCustomElement$1 } from './p-C98Eb3_R.js';
+import { d as defineCustomElement$5 } from './p-Ck-87E2G.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-D2VcPEtL.js';
+import { d as defineCustomElement$2 } from './p-DYPA7jpg.js';
+import { d as defineCustomElement$1 } from './p-dAXnRkjA.js';
 
 const kritzelWorkspaceManagerCss = () => `:host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}`;
 

package/dist/components/{p-eZXIu4yK.js → p-BppcoKoo.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
-import { d as defineCustomElement$4 } from './p-CSuU8frA.js';
-import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-BrNsOp2v.js';
-import { d as defineCustomElement$1 } from './p-BPsKYMH6.js';
+import { d as defineCustomElement$4 } from './p-Ck-87E2G.js';
+import { d as defineCustomElement$2, a as defineCustomElement$3 } from './p-D2VcPEtL.js';
+import { d as defineCustomElement$1 } from './p-DYPA7jpg.js';
 
 const kritzelMoreMenuCss = () => `:host{display:inline-flex;z-index:1}.more-menu-wrapper{display:inline-flex;padding:var(--kritzel-more-menu-padding, 4px);background-color:var(--kritzel-more-menu-background-color, #ffffff);border-radius:var(--kritzel-more-menu-border-radius, 12px);box-shadow:var(--kritzel-more-menu-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-more-menu-border, 1px solid #ebebeb);opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.more-menu-wrapper.visible{opacity:1;pointer-events:auto}:host(.mobile){--kritzel-more-menu-button-hover-background-color:transparent;--kritzel-more-menu-button-active-background-color:transparent}.more-menu-button{display:flex;align-items:center;justify-content:center;width:var(--kritzel-more-menu-button-width, 40px);height:var(--kritzel-more-menu-button-height, 40px);padding:0;border:none;border-radius:var(--kritzel-more-menu-inner-border-radius, 12px);background-color:transparent;cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:none;transition:background-color 150ms ease;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:var(--kritzel-more-menu-button-color, currentColor)}.more-menu-button:hover{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:focus-visible{background-color:var(--kritzel-more-menu-button-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.more-menu-button:active{background-color:var(--kritzel-more-menu-button-active-background-color, hsl(0, 0%, 0%, 4.3%))}`;
 
@@ -150,7 +150,7 @@ const KritzelMoreMenu = /*@__PURE__*/ proxyCustomElement(class KritzelMoreMenu e
         this.closeMenu();
     };
     render() {
-        return (h(Host, { key: '3eaf5dac0beb1f08100c9f57f63a2bdbef6e592d', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '30e4426b7d3a06ec45f0159f6403862bf4106723', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '037b715fadad3b674f07bd9225acc4075b2d41b3', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'b68b306b5b913ff36d220604a70626aa8468215c', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: 'dc86c2679956f2dfc66d000b183d99865291b6d3', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '9bd661fceea95df4d307e497d64365fcb854e8ce', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
+        return (h(Host, { key: '1c7299e83343fee3daedb5abceb3a341071237db', class: { mobile: this.isTouchDevice }, style: { display: this.visible ? '' : 'none' } }, h("div", { key: '1b7f12ee8679d03ef3648cbda4bda16e692a322f', class: { 'more-menu-wrapper': true, visible: this.visible } }, h("button", { key: '71a6270b3b114f1fb030df57075f4adf215914a4', class: "more-menu-button", "data-testid": "more-menu-button", onClick: this.toggleMenu, "aria-label": this.terms['moreMenu.ariaLabel'] ?? 'More options' }, h("kritzel-icon", { key: 'c5ef80ec7d512a24cd45762397ca5c6727d260b3', name: this.icon, size: this.iconSize })), h("kritzel-portal", { key: '9e467825c1c8e81a35403e1d24be0badf1892548', anchor: this.menuAnchor, offsetY: this.offsetY, onClose: this.closeMenu }, h("kritzel-menu", { key: '6e629208a46247d0f5190c376b3feb5dbc54209a', items: this.resolveMenuLabels(this.visibleItems), onItemSelect: this.handleMenuItemSelect })))));
     }
     static get watchers() { return {
         "items": [{

package/dist/components/{p-DDTMGbtA.js → p-BrA9NBEE.js}

@@ -1,20 +1,20 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
-import { K as KritzelToolConfigHelper, d as defineCustomElement$3 } from './p-HoO86l1o.js';
+import { K as KritzelToolConfigHelper, d as defineCustomElement$3 } from './p-CWAChRD5.js';
 import { a as KritzelColorHelper } from './p-7I4Uzjrw.js';
-import { d as defineCustomElement$e } from './p-Dt7-I2Xz.js';
-import { d as defineCustomElement$d } from './p-B-585egz.js';
-import { d as defineCustomElement$c } from './p-Df3BwVGy.js';
-import { d as defineCustomElement$b } from './p-DVXTPI71.js';
-import { d as defineCustomElement$a } from './p-djJSnjAX.js';
-import { d as defineCustomElement$9 } from './p-2WiGyky4.js';
-import { d as defineCustomElement$8 } from './p-CSuU8frA.js';
-import { d as defineCustomElement$7 } from './p-CXpv9Rxe.js';
-import { d as defineCustomElement$6 } from './p-CrHvaLRV.js';
-import { d as defineCustomElement$5 } from './p-BFYtCsZu.js';
-import { d as defineCustomElement$4 } from './p-GKmqCI8r.js';
-import { d as defineCustomElement$2 } from './p-CaBbajU2.js';
-import { d as defineCustomElement$1 } from './p-CzW58DHM.js';
+import { d as defineCustomElement$e } from './p-DcUIO14-.js';
+import { d as defineCustomElement$d } from './p-MhQxGUvY.js';
+import { d as defineCustomElement$c } from './p-CHoOe3FD.js';
+import { d as defineCustomElement$b } from './p-Dp1CD4gK.js';
+import { d as defineCustomElement$a } from './p-DjXQxw9R.js';
+import { d as defineCustomElement$9 } from './p-CLAz6RJc.js';
+import { d as defineCustomElement$8 } from './p-Ck-87E2G.js';
+import { d as defineCustomElement$7 } from './p-Di--2boB.js';
+import { d as defineCustomElement$6 } from './p-vDCa_ZDm.js';
+import { d as defineCustomElement$5 } from './p-Covorf4C.js';
+import { d as defineCustomElement$4 } from './p-fSV6KVTC.js';
+import { d as defineCustomElement$2 } from './p-o3NYKrVL.js';
+import { d as defineCustomElement$1 } from './p-BZZ3KRPk.js';
 
 const kritzelControlsCss = () => `:host{display:flex;flex-direction:column;user-select:none;max-width:100%;z-index:1}:host(.mobile){--kritzel-controls-control-hover-background-color:transparent;--kritzel-controls-control-active-background-color:transparent}.kritzel-controls{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--kritzel-controls-gap, 8px);height:100%;padding:var(--kritzel-controls-padding, 8px);background-color:var(--kritzel-controls-background-color, #ffffff);border-radius:var(--kritzel-controls-border-radius, 16px);box-shadow:var(--kritzel-controls-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));border:var(--kritzel-controls-border, 1px solid #ebebeb);z-index:1;position:relative;max-width:100%;overflow:hidden}.kritzel-tools-scroll{display:flex;flex-direction:row;align-items:center;gap:var(--kritzel-controls-gap, 8px);overflow-x:auto;overflow-y:hidden;flex:1 1 auto;min-width:0;padding:4px;margin:-4px;scrollbar-width:none;-ms-overflow-style:none}.kritzel-tools-scroll::-webkit-scrollbar{display:none}.scroll-indicator-left,.scroll-indicator-right{position:absolute;top:0;bottom:0;width:32px;pointer-events:none;opacity:0;transition:opacity 0.2s ease-out;z-index:1}.scroll-indicator-left{left:0;background:linear-gradient(to right, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:var(--kritzel-controls-border-radius, 16px) 0 0 var(--kritzel-controls-border-radius, 16px)}.scroll-indicator-right{right:0;background:linear-gradient(to left, var(--kritzel-controls-background-color, #ffffff), transparent);border-radius:0 var(--kritzel-controls-border-radius, 16px) var(--kritzel-controls-border-radius, 16px) 0}.scroll-indicator-left.visible,.scroll-indicator-right.visible{opacity:1}.kritzel-control{display:flex;justify-content:center;align-items:center;color:var(--kritzel-controls-control-color, #000000);border-radius:var(--kritzel-controls-control-border-radius, 12px);padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;font-weight:bold}.kritzel-control:focus,.kritzel-control:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control.selected,.kritzel-control.selected:hover,.kritzel-control.selected:active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control.selected:focus{background-color:var(--kritzel-controls-control-selected-background-color, #007bffe3) !important}.kritzel-control-separator{width:1px;height:24px;background-color:var(--kritzel-controls-separator-color, #ebebeb);margin:0 4px}.kritzel-control-split{position:relative;display:flex;align-items:center;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:var(--kritzel-controls-control-color, #000000)}.kritzel-control-split .kritzel-control-main{display:flex;justify-content:center;align-items:center;padding:var(--kritzel-controls-control-padding, 8px);border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:var(--kritzel-controls-control-border-radius, 12px);color:inherit}.kritzel-control-split.selected .kritzel-control-main{border-radius:var(--kritzel-controls-control-border-radius, 12px) 0 0 var(--kritzel-controls-control-border-radius, 12px)}.kritzel-control-split .kritzel-control-dropdown{display:flex;justify-content:center;align-items:center;align-self:stretch;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent;border-radius:0 var(--kritzel-controls-control-border-radius, 12px) var(--kritzel-controls-control-border-radius, 12px) 0;color:inherit;width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none;transition:width 0.15s ease-out, padding 0.15s ease-out, opacity 0.15s ease-out}.kritzel-control-split .kritzel-control-dropdown.visible{width:auto;padding:0 6px;opacity:1;pointer-events:auto}.kritzel-control-split .kritzel-control-main:focus,.kritzel-control-split .kritzel-control-main:hover,.kritzel-control-split .kritzel-control-dropdown:focus,.kritzel-control-split .kritzel-control-dropdown:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-control-split .kritzel-control-main:active,.kritzel-control-split .kritzel-control-dropdown:active{background-color:var(--kritzel-controls-control-active-background-color, hsl(0, 0%, 0%, 8.6%))}.kritzel-control-split.selected{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF) !important;color:var(--kritzel-controls-control-selected-color, #ffffff) !important}.kritzel-control-split.selected .kritzel-control-main:hover,.kritzel-control-split.selected .kritzel-control-dropdown:hover{background-color:rgba(255, 255, 255, 0.15)}.kritzel-submenu-content{display:flex;flex-direction:column;gap:var(--kritzel-submenu-gap, 4px);min-width:140px}.kritzel-submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:8px;color:var(--kritzel-controls-control-color, #000000);font-size:14px;text-align:left;white-space:nowrap;-webkit-tap-highlight-color:transparent}.kritzel-submenu-item:hover{background-color:var(--kritzel-controls-control-hover-background-color, hsl(0, 0%, 0%, 4.3%))}.kritzel-submenu-item.active{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF);color:var(--kritzel-controls-control-selected-color, #ffffff)}.kritzel-submenu-item.active:hover{background-color:var(--kritzel-controls-control-selected-background-color, #007AFF)}.kritzel-config-container{position:relative;display:flex;justify-content:center;align-items:center;height:40px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;flex-shrink:0;width:0;opacity:0;overflow:hidden;pointer-events:none;margin-left:calc(-1 * var(--kritzel-controls-gap, 8px));transition:width 0.2s ease-out, opacity 0.2s ease-out, margin-left 0.2s ease-out}.kritzel-config-container.visible{width:40px;opacity:1;pointer-events:auto;margin-left:0;overflow:visible}.config-gradient-left{position:absolute;top:0;bottom:0;left:-32px;width:32px;background:linear-gradient(to right, transparent, var(--kritzel-controls-background-color, #ffffff));pointer-events:none;z-index:1;opacity:0;transition:opacity 0.2s ease-out}.config-gradient-left.visible{opacity:1}.kritzel-config{display:flex;justify-content:center;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.font-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.no-config{height:24px;width:24px;border-radius:50%;border:1px dashed gray}kritzel-tooltip{z-index:10001}`;
 
@@ -256,13 +256,13 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: '2a7595b72594df3e8ff9a103c3ff7dd70f0a8045', style: { display: this.visible ? '' : 'none' }, class: {
+        return (h(Host, { key: '0c61b173d0a92351de148c9c98b25031f231e1ab', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '1c2d9f14c53944f291cf49cbcd1bf282ad8a8683', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'a696e0af5f126456e610a6353377cb5a68b4fcb4', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '8ac30e183885bc106033ca163aa7e5927802e67c', class: "kritzel-controls" }, h("div", { key: '74b2808a506e671682aed91107c7c9e27aa4b2c7', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '3fd693c993d5b11eadd2eec7481214fbc1550301', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, terms: this.terms, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: 'ffe96a9b2b73d3e08c7d149fd64b9b209eaf47d3', class: "kritzel-controls" }, h("div", { key: 'a351b3a4a801a4480d2476a6ca34bbbd628525ac', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '9447a0d4728d4d476113a2bcb94f53a5652f7dd1', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -292,10 +292,10 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: '6f16a8332dc6a082f2e6aedbec3e31398f2a8b66', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '31a1d141b1381c9aa0b7f07c1ae7d1606d1a8fc6', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: '554d743fccfb62d8c368f2a5cdca232ae9842b7f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'af97d986d82c961d66c910f7edabd6e597ec59ab', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '3721e5463a85881c7e806d69c0a9524f44732978', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: 'c6e3fe4a4a9b781db394073c8f929533487be760', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: 'ed4b6440e5b99b68a29269476de7efa15ecec38f', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'cac5417d5e1a8c4ec19fbcf38affb30ac67b521e', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: 'ffba221a22ab50b4c44c0247ef9e86e4b67e5bde', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, terms: this.terms, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '1f5b90e286d5aa8fcf10aa3987c6c6cd75360d49', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -304,7 +304,7 @@ const KritzelControls = /*@__PURE__*/ proxyCustomElement(class KritzelControls e
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: '9eeb3a9fc29f4848ee9f325d50b4cbfc5bfe5f1c', class: "color-container" }, h("kritzel-color", { key: '1d45edb7ed07a8d12ab55e374ea456b8e95c8d41', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: '3857f9f2bc30ddac57d108a8021061edc5decb07', class: "color-container" }, h("kritzel-color", { key: '304eda20d9036bf567db7a4f146f1b07a8ca4c34', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));

package/dist/components/{p-Czhdc844.js → p-BrqSjRJN.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { d as defineCustomElement$1 } from './p-CSuU8frA.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
+import { d as defineCustomElement$1 } from './p-Ck-87E2G.js';
 
 const kritzelBackToContentCss = () => `:host{display:block;z-index:var(--kritzel-back-to-content-z-index, 1000)}.back-to-content-button{display:flex;align-items:center;justify-content:center;height:var(--kritzel-back-to-content-height, 50px);box-sizing:border-box;gap:var(--kritzel-back-to-content-gap, 6px);padding:var(--kritzel-back-to-content-padding, 0 16px);border:var(--kritzel-back-to-content-border, 1px solid #ebebeb);border-radius:var(--kritzel-back-to-content-border-radius, 12px);background-color:var(--kritzel-back-to-content-background-color, #ffffff);color:var(--kritzel-back-to-content-color, #000000);font-size:var(--kritzel-back-to-content-font-size, 14px);font-weight:var(--kritzel-back-to-content-font-weight, 500);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:var(--kritzel-back-to-content-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));opacity:0;pointer-events:none;transition:opacity 0.2s ease-out, transform 0.2s ease-out, background-color 0.15s ease-out;-webkit-tap-highlight-color:transparent;user-select:none}.back-to-content-button.visible{opacity:1;pointer-events:auto}@media (hover: hover){.back-to-content-button:hover{background-color:var(--kritzel-back-to-content-hover-background-color, hsl(0, 0%, 0%, 4.3%))}}.back-to-content-button:active{background-color:var(--kritzel-back-to-content-active-background-color, hsl(0, 0%, 0%, 8.6%))}`;
 
@@ -28,7 +28,7 @@ const KritzelBackToContent = /*@__PURE__*/ proxyCustomElement(class KritzelBackT
         this.backToContent.emit();
     };
     render() {
-        return (h(Host, { key: '2576489b9f97c77d1931e7c8496bae968d998f9d' }, h("button", { key: 'da891543ce8a9b5ccd2f4a461bdcdc7f3f9ad266', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: '4559cc932918707d5961c6237f3c5e23c9e4cc9d', name: "chevrons-left" }))));
+        return (h(Host, { key: '612164b48226601d863cb2acdab1d567e9652188' }, h("button", { key: '159a4f4f01934c03c7898f2803bf87d5f0d95aba', class: { 'back-to-content-button': true, visible: this.visible }, onClick: this.handleClick, "aria-label": this.text }, h("kritzel-icon", { key: 'e7ec1308ab12ca233509a00fc76df17fce1f5700', name: "chevrons-left" }))));
     }
     static get style() { return kritzelBackToContentCss(); }
 }, [513, "kritzel-back-to-content", {

package/dist/components/{p-CAoN_STZ.js → p-Bxi-Bm49.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 
 const kritzelSyncIndicatorCss = () => `:host{display:contents}.indicator{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:var(--kritzel-editor-sync-indicator-z-index, 10001);pointer-events:none;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:var(--kritzel-editor-sync-indicator-background, rgba(255, 255, 255, 0.92));color:var(--kritzel-editor-sync-indicator-color, #334155);box-shadow:0 2px 10px rgba(0, 0, 0, 0.12);font-family:var(--kritzel-font-family, sans-serif);font-size:12px;line-height:1;font-weight:500;opacity:0;visibility:hidden}.indicator.visible{opacity:1;visibility:visible}.spinner{width:12px;height:12px;border-radius:50%;border:2px solid var(--kritzel-editor-sync-indicator-spinner-track, rgba(148, 163, 184, 0.35));border-top-color:var(--kritzel-editor-sync-indicator-spinner-color, #2563eb);animation:kritzel-sync-indicator-spin 0.8s linear infinite}@keyframes kritzel-sync-indicator-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}`;
 
@@ -15,7 +15,7 @@ const KritzelSyncIndicator = /*@__PURE__*/ proxyCustomElement(class KritzelSyncI
     /** The text displayed next to the spinner. */
     text = 'Syncing...';
     render() {
-        return (h(Host, { key: '05e825ee1c08fe02008b8e1adfe9e09a7996f221' }, h("div", { key: 'ea1635896f643c16713d35d6efd3abf486b1fbe2', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '7b57ea67d6f2c40dc74e966c16ebe9d95c75394a', class: "spinner", "aria-hidden": "true" }), h("span", { key: 'fc16405b02d96213d0025239b6e863883192ada5' }, this.text))));
+        return (h(Host, { key: '2622544751cd377f172115f5f73e21e0f0995185' }, h("div", { key: '0cf49cbfbfa4ed0625eeff443ba1e2996a26562e', class: { indicator: true, visible: this.visible }, role: "status", "aria-live": "polite", "aria-label": "Synchronizing workspace" }, h("span", { key: '053ddc85e9ad2210822d3100ecf5d54d7170d470', class: "spinner", "aria-hidden": "true" }), h("span", { key: '94ea7f6be206688e9065d02b1d5c753e3598e9df' }, this.text))));
     }
     static get style() { return kritzelSyncIndicatorCss(); }
 }, [513, "kritzel-sync-indicator", {

package/dist/components/{p-B43upypT.js → p-C9_yBEoX.js}

@@ -2,7 +2,7 @@ const NAMESPACE = 'stencil';
 const BUILD = /* stencil */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: false, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.44.2 | MIT Licensed | https://stenciljs.com
  */
 
 
@@ -84,6 +84,7 @@ var consoleError = (e, el) => (0, console.error)(e, el);
 // src/client/client-style.ts
 var styles = /* @__PURE__ */ new Map();
 var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
+var LAZY_LOAD_RETRY_INTERVAL_MS = 1e3;
 var win = typeof window !== "undefined" ? window : {};
 var H = win.HTMLElement || class {
 };
@@ -129,6 +130,10 @@ var supportsMutableAdoptedStyleSheets = supportsConstructableStylesheets ? /* @_
 var queuePending = false;
 var queueDomReads = [];
 var queueDomWrites = [];
+var scheduleFlush = () => {
+  var _a;
+  return ((_a = win.document) == null ? void 0 : _a.hidden) ? nextTick(flush) : plt.raf(flush);
+};
 var queueTask = (queue, write) => (cb) => {
   queue.push(cb);
   if (!queuePending) {
@@ -136,7 +141,7 @@ var queueTask = (queue, write) => (cb) => {
     if (write && plt.$flags$ & 4 /* queueSync */) {
       nextTick(flush);
     } else {
-      plt.raf(flush);
+      scheduleFlush();
     }
   }
 };
@@ -155,7 +160,7 @@ var flush = () => {
   {
     consume(queueDomWrites);
     if (queuePending = queueDomReads.length > 0) {
-      plt.raf(flush);
+      scheduleFlush();
     }
   }
 };
@@ -347,6 +352,11 @@ var h = (nodeName, vnodeData, ...children) => {
       } else if (child != null && typeof child !== "boolean") {
         if (simple = typeof nodeName !== "function" && !isComplexType(child)) {
           child = String(child);
+        } else if (typeof nodeName !== "function" && child.$flags$ === void 0) {
+          {
+            consoleError("Invalid vNode child");
+          }
+          continue;
         }
         if (simple && lastSimple) {
           vNodeChildren[vNodeChildren.length - 1].$text$ += child;
@@ -574,7 +584,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       }
     }
     if (newValue == null || newValue === false) {
-      if (newValue !== false || elm.getAttribute(memberName) === "") {
+      if (newValue !== false || elm.getAttribute(memberName) === "" || flags & 4 /* isHost */ && !isEnumeratedAttribute(memberName)) {
         {
           elm.removeAttribute(memberName);
         }
@@ -587,6 +597,8 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     }
   }
 };
+var ENUMERATED_ATTRIBUTES = /* @__PURE__ */ new Set(["draggable", "contenteditable", "spellcheck"]);
+var isEnumeratedAttribute = (attrName) => ENUMERATED_ATTRIBUTES.has(attrName) || attrName.startsWith("aria-");
 var parseClassListRegex = /\s/;
 var parseClassList = (value) => {
   if (typeof value === "object" && value && "baseVal" in value) {
@@ -894,9 +906,7 @@ var flushQueuedRefCallbacks = () => {
   }
 };
 var insertBefore = (parent, newNode, reference, isInitialLoad) => {
-  if (parent.__insertBefore) {
-    return parent.__insertBefore(newNode, reference);
-  } else {
+  {
     return parent == null ? void 0 : parent.insertBefore(newNode, reference);
   }
 };
@@ -1144,6 +1154,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
 };
 
 // src/runtime/proxy-component.ts
+var reflectedAttrValue = (propValue) => propValue == null || propValue === false ? null : propValue === true ? "" : String(propValue);
 var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
@@ -1231,7 +1242,13 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
             return;
           }
           const propFlags = members.find(([m]) => m === propName);
-          const isBooleanTarget = propFlags && propFlags[1][0] & 4 /* Boolean */;
+          const propMemberFlags = propFlags ? propFlags[1][0] : 0;
+          const isBooleanTarget = propMemberFlags & 4 /* Boolean */;
+          if (propMemberFlags & 512 /* ReflectAttr */ && propMemberFlags & 8 /* Any */ && // a complex value is never written to an attribute, so a change while the prop holds
+          // one is always external
+          !isComplexType(this[propName]) && reflectedAttrValue(this[propName]) === newValue) {
+            return;
+          }
           const isSpuriousBooleanRemoval = isBooleanTarget && newValue === null && this[propName] === void 0;
           if (isBooleanTarget) {
             newValue = newValue === null || newValue === "false" ? false : true;
@@ -1267,6 +1284,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
   try {
     if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) {
       hostRef.$flags$ |= 32 /* hasInitializedComponent */;
+      hostRef.$flags$ &= -1025 /* hasFailedLoad */;
       {
         Cstr = elm.constructor;
         const cmpTag = elm.localName;
@@ -1298,7 +1316,7 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
       hostRef.$onRenderResolve$();
       hostRef.$onRenderResolve$ = void 0;
     }
-    if (hostRef.$onReadyResolve$) {
+    if (hostRef.$onReadyResolve$ && !(hostRef.$flags$ & 1024 /* hasFailedLoad */)) {
       hostRef.$onReadyResolve$(elm);
     }
   }
@@ -1340,7 +1358,9 @@ var connectedCallback = (elm) => {
       }
     } else {
       addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
-      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
+      if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef.$flags$ & 1024 /* hasFailedLoad */) {
+        setTimeout(() => initializeComponent(elm, hostRef, cmpMeta), LAZY_LOAD_RETRY_INTERVAL_MS);
+      } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
         hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
       }
     }

package/dist/components/{p-Df3BwVGy.js → p-CHoOe3FD.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
 
-const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.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-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);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:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-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:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-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-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
+const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.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-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);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:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-controls-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:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-controls-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-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
 
 const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown extends H {
     constructor(registerHost) {
@@ -242,7 +242,7 @@ const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown e
             'open-up': this.openDirection === 'up',
             'open-down': this.openDirection === 'down',
         };
-        return (h(Host, { key: 'c606b338e55dc66396105fa7b4fbdf372f3866e6' }, h("div", { key: 'aa32b73cac337fa4142ecc124cf039a59e3b3118', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: '2cd8e9ef246a24c49d58f76f227f36aed4786178', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '80df8155e1907017d508e92f155bab5ae12dffab', class: "dropdown-container", style: { width: this.width } }, h("button", { key: 'd86463de7ec58248f1611d6b5d46f0eafc117f36', 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: '4ef6a997f7a781fb409e97ed5bd6843d0eaff0bb', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '6601efcd69d84af1f022d14ede628bac743cc1f1', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '6cb2efe7b4ca890562c10b0e24eb1dfdad90ec24', 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: 'a340af5a61dccf5bc29c8a473726b58055c2e9db', points: "6 9 12 15 18 9" }))))), h("slot", { key: '5bd4e5ad4cc4642c7769ecac2106ba82bae626f2', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'e7a2be8ac261bc5fa1450940e2a57090d6be3315', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+        return (h(Host, { key: '66ec6cbffa9fd25a7bad62d6e3477c0fe7726861' }, h("div", { key: '6dc1f20070dde95ab54f44d158659e99bd81b834', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'd9655fc7f5e6a0d74b4a1904a12cc0bf478ccf4e', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '325af053df9588e99b493c422a1f369f0af2243a', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '626d54cd8e01221b1cd61e61b9d53b534e7603db', 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: 'bbc3ec7297ee98c1903cfd547ca20daf3a5f1311', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '591b71aec72d2e6eaa96e8eb4c91b1f34eb2177a', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '317034d40ceab9ca72090f6a58fc0fa5b92f2db0', 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: '98867959ff1d7fd5515a3fe400bdc2378013dcb9', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'f9d2f73f7b233a30f57ba4a9209e1a32a8ee5e70', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f15048910c0d24855fb1e940d2adc994dee83d06', 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 = {