atomicuilibrary 0.1.0 → 0.1.3

package/dist/cjs/ui-dialog-box.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 var security = require('./security-CNaNip8F.js');
 var focusTrap = require('./focus-trap-i9T6oXLc.js');
 
@@ -266,6 +266,7 @@ const DialogBox = class {
     }
     _defaultDialogTitle = '';
     _defaultOkText = '';
+    _defaultCancelText = '';
     get el() { return index.getElement(this); }
     _restoredLayout = undefined;
     _isShaking = false;
@@ -546,6 +547,10 @@ const DialogBox = class {
      * Disable the OK button.
      */
     okDisabled = false;
+    _forceRender = 0;
+    watchOkDisabled() {
+        this._forceRender++;
+    }
     /**
      * Text for the Reset button (left-aligned).
      */
@@ -567,9 +572,17 @@ const DialogBox = class {
             'custom': { ok: '', cancel: '', reset: '' },
         };
         const p = presets[this.buttonSet] ?? presets['custom'];
+        let defaultOk = p.ok;
+        let defaultCancel = p.cancel;
+        if (this.buttonSet === 'custom') {
+            if (this.type === 'delete' || this.type === 'session' || this.type === 'terms') {
+                defaultOk = this._defaultOkText;
+                defaultCancel = this._defaultCancelText;
+            }
+        }
         return {
-            okLabel: this.okText ?? p.ok,
-            cancelLabel: this.cancelText ?? p.cancel,
+            okLabel: this.okText ?? defaultOk,
+            cancelLabel: this.cancelText ?? defaultCancel,
             resetLabel: this.resetText ?? p.reset,
         };
     }
@@ -628,7 +641,7 @@ const DialogBox = class {
     /**
      * Background color of the dialog panel
      */
-    backgroundColor = 'white';
+    backgroundColor = '';
     /**
      * Visual progress bar percentage (0-100).
      */
@@ -850,6 +863,7 @@ const DialogBox = class {
         // Presets: set local defaults, do not mutate props
         this._defaultDialogTitle = '';
         this._defaultOkText = '';
+        this._defaultCancelText = '';
         if (this.type === 'delete') {
             this._defaultDialogTitle = 'Confirm Deletion';
             this._defaultOkText = 'Delete';
@@ -859,10 +873,12 @@ const DialogBox = class {
         else if (this.type === 'session') {
             this._defaultDialogTitle = 'Session Timeout';
             this._defaultOkText = 'Extend Session';
+            this._defaultCancelText = 'Logout';
         }
         else if (this.type === 'terms') {
             this._defaultDialogTitle = 'Terms & Conditions';
             this._defaultOkText = 'Accept & Continue';
+            this._defaultCancelText = 'Decline';
             this.scrollArea = 'paper';
             // Do NOT mutate this.size here
         }
@@ -883,9 +899,21 @@ const DialogBox = class {
     connectedCallback() {
         // Fires on initial connect AND after a tray reflow move.
         DialogTray.register(this);
+        const constructor = this.el.constructor;
+        if (constructor) {
+            if (!constructor.cascade) {
+                constructor.cascade = DialogBox.cascade;
+            }
+            if (!constructor.tile) {
+                constructor.tile = DialogBox.tile;
+            }
+        }
     }
     disconnectedCallback() {
         DialogTray.unregister(this);
+        if (this.dialogElement) {
+            this.dialogElement.removeEventListener('scroll', this.handleInternalScroll, true);
+        }
     }
     componentDidLoad() {
         // register() already called by connectedCallback above;
@@ -1048,6 +1076,13 @@ const DialogBox = class {
     /**
      * Open the dialog and return a promise that resolves to true when OK is clicked, false on Cancel/Close.
      */
+    /**
+     * Set the disabled state of the OK button
+     */
+    async setOkDisabled(disabled) {
+        this.okDisabled = disabled;
+        this._forceRender++;
+    }
     async openDialog() {
         this.open = true;
         return new Promise((resolve) => {
@@ -1354,6 +1389,20 @@ const DialogBox = class {
             this._termsScrolled = true;
         }
     };
+    handleContentScroll = (e) => {
+        this.handleTermsScroll(e);
+        this.handleInternalScroll(e);
+    };
+    handleInternalScroll = (e) => {
+        if (e.defaultPrevented || e.__composingScroll)
+            return;
+        const composedScroll = new window.Event('scroll', {
+            bubbles: true,
+            composed: true,
+        });
+        composedScroll.__composingScroll = true;
+        this.el.dispatchEvent(composedScroll);
+    };
     handleOk = () => {
         if (this.sensitive && !this.subOverlay?.visible) {
             this.showConfirmation("Sensitive Action", "This action has security implications. Are you sure you want to proceed?", () => { this.sensitive = false; this.handleOk(); });
@@ -1362,19 +1411,23 @@ const DialogBox = class {
         if (this.haptics && window.navigator.vibrate) {
             window.navigator.vibrate(50);
         }
+        let okEvent;
         if (this.resultResolver) {
             // Auto-collect form values when no explicit returnValue was set
             if (this.returnValue === null) {
                 this.returnValue = this.collectFormValues();
             }
-            this.ok.emit(this.returnValue);
+            okEvent = this.ok.emit(this.returnValue);
             // Pass the collected data to the specific resolver format
             this.resultResolver(this.returnValue);
             this.resultResolver = undefined;
             this.resultRejecter = undefined;
         }
         else {
-            this.ok.emit(this.returnValue);
+            okEvent = this.ok.emit(this.returnValue);
+        }
+        if (okEvent && okEvent.defaultPrevented) {
+            return;
         }
         this.hide();
     };
@@ -1407,6 +1460,14 @@ const DialogBox = class {
         this.auditLog.emit({ action: 'reset_clicked', timestamp: Date.now() });
         this.dialogReset.emit();
     };
+    handleCheckboxChange(e) {
+        if (e.target instanceof HTMLElement && e.target.closest('ui-dialog-box') === this.el) {
+            if (e.target.id === 'agreeCheckbox') {
+                this.okDisabled = !e.detail.checked;
+                this._forceRender++;
+            }
+        }
+    }
     handleGlobalShortcuts(e) {
         if (!this.open || !this.shortcuts)
             return;
@@ -1654,6 +1715,9 @@ const DialogBox = class {
     renderHeader(isPeek = false) {
         if (!this.showHeader)
             return null;
+        if (this.el.querySelector('[slot="header"]')) {
+            return index.h("slot", { name: "header" });
+        }
         // Provide default cancelText for session/terms types if not set
         let cancelLabel = this.cancelText;
         if (!cancelLabel) {
@@ -1685,7 +1749,7 @@ const DialogBox = class {
             } }, index.h("div", { class: "step-dot" }, i + 1), Array.isArray(this.steps) && index.h("div", { class: "step-label" }, this.steps[i]), i < (typeof this.steps === 'number' ? this.steps : this.steps.length) - 1 && index.h("div", { class: "step-line" }))))));
     }
     renderBodyContent() {
-        return (index.h("div", { class: { 'ui-dialog-main-container': true, 'has-side-nav': this.layout === 'side-nav' } }, this.layout === 'side-nav' && (index.h("div", { class: "ui-dialog-side-nav" }, index.h("slot", { name: "side-nav" }))), index.h("div", { class: { 'ui-dialog-content-wrapper': true, 'type-messagebox': this.type === 'messagebox' }, part: "body", onScroll: this.handleTermsScroll }, this.type === 'session' && (index.h("div", { class: `ui-dialog-session-alert ${this._sessionTimedOut ? 'is-timeout' : ''}` }, index.h("ui-icon", { name: this._sessionTimedOut ? 'log-out' : 'clock', library: "lucide" }), this._sessionTimedOut ? (index.h("div", { class: "timeout-content" }, index.h("p", { style: { fontWeight: '600', color: '#ef4444', margin: '0 0 8px' } }, "Due to inactivity, you have been logged out."), index.h("p", { style: { fontSize: '13px', color: '#666', margin: '0' } }, "Please log in again to continue working on your tasks."))) : (index.h("span", null, "Session expiring in ", index.h("strong", null, this._sessionTimeLeft, "s"))))), index.h("slot", { name: "body" }, index.h("slot", null), this.type === 'prompt' && (index.h("div", { class: "ui-dialog-prompt-container" }, index.h("ui-input", { type: this.promptType, name: "prompt", class: "ui-dialog-prompt-input", value: this.promptValue, placeholder: this.promptPlaceholder, label: this.promptLabel, onInputChange: (e) => {
+        return (index.h("div", { class: { 'ui-dialog-main-container': true, 'has-side-nav': this.layout === 'side-nav' } }, this.layout === 'side-nav' && (index.h("div", { class: "ui-dialog-side-nav", onScroll: this.handleContentScroll }, index.h("slot", { name: "side-nav" }))), index.h("div", { class: { 'ui-dialog-content-wrapper': true, 'type-messagebox': this.type === 'messagebox' }, part: "body", onScroll: this.handleContentScroll }, this.type === 'session' && (index.h("div", { class: `ui-dialog-session-alert ${this._sessionTimedOut ? 'is-timeout' : ''}` }, index.h("ui-icon", { name: this._sessionTimedOut ? 'log-out' : 'clock', library: "lucide" }), this._sessionTimedOut ? (index.h("div", { class: "timeout-content" }, index.h("p", { style: { fontWeight: '600', color: '#ef4444', margin: '0 0 8px' } }, "Due to inactivity, you have been logged out."), index.h("p", { style: { fontSize: '13px', color: '#666', margin: '0' } }, "Please log in again to continue working on your tasks."))) : (index.h("span", null, "Session expiring in ", index.h("strong", null, this._sessionTimeLeft, "s"))))), index.h("slot", { name: "body" }, index.h("slot", null), this.type === 'prompt' && (index.h("div", { class: "ui-dialog-prompt-container" }, index.h("ui-input", { type: this.promptType, name: "prompt", class: "ui-dialog-prompt-input", value: this.promptValue, placeholder: this.promptPlaceholder, label: this.promptLabel, onInputChange: (e) => {
                 this.promptValue = e.detail;
                 this.returnValue = this.promptValue;
             }, autofocus: true, fullWidth: true })))))));
@@ -1701,9 +1765,10 @@ const DialogBox = class {
             return null;
         return (index.h("ui-dialog-footer", { class: "ui-dialog-footer-wrapper", part: "footer" }, index.h("div", { class: "footer-left" }, this.confirmationText && (index.h("div", { class: "ui-dialog-confirmation" }, index.h("ui-checkbox", { class: "confirmation-checkbox", checked: this.isConfirmed, label: this.confirmationText, onCheckboxChange: (e) => {
                 this.isConfirmed = e.detail.checked;
-            } }))), index.h("slot", { name: "footer-left" })), index.h("div", { class: "footer-right", part: "footer-actions" }, index.h("slot", { name: "actions" }, resetLabel && (index.h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleReset }, resetLabel)), cancelLabel && (index.h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleCancel, disabled: this.cancelDisabled }, cancelLabel)), okLabel && (index.h("ui-button", { variant: (this.status === 'default' || this.status === 'info') ? 'primary' : this.status, size: "md", onButtonClick: this._sessionTimedOut ? () => window.location.href = '/login' : this.handleOk, loading: this.okLoading, disabled: this.okDisabled || (!!this.confirmationText && !this.isConfirmed) || (this.type === 'terms' && !this._termsScrolled) }, this._sessionTimedOut ? "Go to Login" : okLabel))), index.h("div", { class: "footer-custom-slot" }, index.h("slot", { name: "footer" })))));
+            } }))), index.h("slot", { name: "footer-left" })), index.h("div", { class: "footer-right", part: "footer-actions" }, index.h("slot", { name: "actions" }, resetLabel && (index.h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleReset }, resetLabel)), cancelLabel && (index.h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleCancel, disabled: this.cancelDisabled }, cancelLabel)), okLabel && (index.h("ui-button", { variant: "primary", color: this.status === 'default' ? 'primary' : (this.status === 'error' ? 'danger' : this.status), size: "md", onButtonClick: this._sessionTimedOut ? () => window.location.href = '/login' : this.handleOk, loading: this.okLoading, disabled: this.okDisabled || (!!this.confirmationText && !this.isConfirmed) }, this._sessionTimedOut ? "Go to Login" : okLabel))), index.h("div", { class: "footer-custom-slot" }, index.h("slot", { name: "footer" })))));
     }
     render() {
+        this._dummyVar = this._forceRender;
         if (!this.open && !this.isClosing && !this.keepMounted)
             return null;
         // ── Minimized tray render ──────────────────────────────────────────────
@@ -1749,8 +1814,8 @@ const DialogBox = class {
             'shake': this._isShaking
         };
         const dialogStyles = {
-            '--dialog-bg': this.backgroundColor || 'white',
-            backgroundColor: 'var(--dialog-bg, #ffffff)'
+            '--dialog-bg': this.backgroundColor || 'var(--bg-primary, #ffffff)',
+            backgroundColor: 'var(--dialog-bg)'
         };
         if (!this.maximized) {
             const isDefaultWidth = this.width === '500px';
@@ -1770,7 +1835,13 @@ const DialogBox = class {
         }
         const dialogId = this.el.id || `dialog-idx-${Math.random().toString(36).substr(2, 5)}`;
         const posClass = `position-${this.position}`;
-        return (index.h(index.Host, { class: { 'open': this.open, 'minimized': this.minimized, 'dock-peek': this._dockPeek } }, this.minimized && this._dockPeek && (index.h("div", { class: `ui-peek-panel variant-${this.variant} status-${this.status}`, onClick: (e) => e.stopPropagation() }, this.renderHeader(true), index.h("div", { class: "ui-dialog-content-wrapper" }, index.h("slot", { name: "body" }, index.h("slot", null))))), (!this.minimized || this._dockPeek) && (index.h("div", { class: `ui-dialog-backdrop ${this.backdrop === 'none' ? 'backdrop-none' : ''} ${this.scrollArea === 'body' ? 'scroll-body-active' : ''} ${posClass} ${this.isClosing ? 'closing' : ''} ${this.glass ? 'glass-backdrop' : ''} ${isHidden ? 'hidden-mounted' : ''}`, onClick: this.handleBackdropClick, part: "backdrop", ref: (el) => (this.backdropElement = el), style: { zIndex: `${this.zIndex}` } }, index.h("div", { ref: (el) => (this.dialogElement = el), class: dialogClasses, style: dialogStyles, part: "panel", onPointerDown: this.handlePointerDown, tabIndex: -1, role: "dialog", "aria-modal": "true", id: dialogId }, index.h("div", { class: "ui-dialog-box-container", onPointerUp: this.handlePointerUp }, this.renderHeader(), this.showHeader && index.h("div", { class: "ui-dialog-divider-line" }), this.progress >= 0 && (index.h("div", { class: "ui-dialog-progress-container", title: `Progress: ${this.progress}%` }, index.h("div", { class: "ui-dialog-progress-bar", style: { width: `${this.progress}%` } }))), this.renderStepper(), this.showToolbar && (index.h("div", { class: "ui-dialog-toolbar" }, index.h("slot", { name: "toolbar" }))), this.renderBodyContent(), this.showStatusBar && (index.h("div", { class: "ui-dialog-status-bar" }, index.h("slot", { name: "status-bar" }))), this.showFooter && index.h("div", { class: "ui-dialog-divider-line" }), this.renderFooterContent(), this.resizable && !this.maximized && (index.h("div", { class: "resize-handle", onPointerDown: this.handleResizePointerDown })), this.subOverlay?.visible && (index.h("div", { class: "ui-dialog-sub-overlay" }, index.h("div", { class: "sub-overlay-card" }, index.h("h4", null, this.subOverlay.title), index.h("p", null, this.subOverlay.message), index.h("div", { class: "sub-overlay-actions" }, index.h("ui-button", { variant: "outline", onButtonClick: () => this.subOverlay = null }, "Cancel"), index.h("ui-button", { variant: "primary", onButtonClick: () => { this.subOverlay.onConfirm(); this.subOverlay = null; } }, "Confirm")))))))))));
+        return (index.h(index.Host, { class: { 'open': this.open, 'minimized': this.minimized, 'dock-peek': this._dockPeek } }, this.minimized && this._dockPeek && (index.h("div", { class: `ui-peek-panel variant-${this.variant} status-${this.status}`, onClick: (e) => e.stopPropagation() }, this.renderHeader(true), index.h("div", { class: "ui-dialog-content-wrapper" }, index.h("slot", { name: "body" }, index.h("slot", null))))), (!this.minimized || this._dockPeek) && (index.h("div", { class: `ui-dialog-backdrop ${this.backdrop === 'none' ? 'backdrop-none' : ''} ${this.scrollArea === 'body' ? 'scroll-body-active' : ''} ${posClass} ${this.isClosing ? 'closing' : ''} ${this.glass ? 'glass-backdrop' : ''} ${isHidden ? 'hidden-mounted' : ''}`, onClick: this.handleBackdropClick, part: "backdrop", ref: (el) => (this.backdropElement = el), style: { zIndex: `${this.zIndex}` } }, index.h("div", { ref: (el) => {
+                if (el) {
+                    this.dialogElement = el;
+                    el.removeEventListener('scroll', this.handleInternalScroll, true);
+                    el.addEventListener('scroll', this.handleInternalScroll, true);
+                }
+            }, class: dialogClasses, style: dialogStyles, part: "panel", onPointerDown: this.handlePointerDown, tabIndex: -1, role: "dialog", "aria-modal": "true", id: dialogId }, index.h("div", { class: "ui-dialog-box-container", onPointerUp: this.handlePointerUp }, this.renderHeader(), this.showHeader && index.h("div", { class: "ui-dialog-divider-line" }), this.progress >= 0 && (index.h("div", { class: "ui-dialog-progress-container", title: `Progress: ${this.progress}%` }, index.h("div", { class: "ui-dialog-progress-bar", style: { width: `${this.progress}%` } }))), this.renderStepper(), this.showToolbar && (index.h("div", { class: "ui-dialog-toolbar" }, index.h("slot", { name: "toolbar" }))), this.renderBodyContent(), this.showStatusBar && (index.h("div", { class: "ui-dialog-status-bar" }, index.h("slot", { name: "status-bar" }))), this.showFooter && index.h("div", { class: "ui-dialog-divider-line" }), this.renderFooterContent(), this.resizable && !this.maximized && (index.h("div", { class: "resize-handle", onPointerDown: this.handleResizePointerDown })), this.subOverlay?.visible && (index.h("div", { class: "ui-dialog-sub-overlay" }, index.h("div", { class: "sub-overlay-card" }, index.h("h4", null, this.subOverlay.title), index.h("p", null, this.subOverlay.message), index.h("div", { class: "sub-overlay-actions" }, index.h("ui-button", { variant: "outline", onButtonClick: () => this.subOverlay = null }, "Cancel"), index.h("ui-button", { variant: "primary", onButtonClick: () => { this.subOverlay.onConfirm(); this.subOverlay = null; } }, "Confirm")))))))))));
     }
     triggerConfetti() {
         const count = 200;
@@ -1792,6 +1863,9 @@ const DialogBox = class {
         "currentStep": [{
                 "currentStepChanged": 0
             }],
+        "okDisabled": [{
+                "watchOkDisabled": 0
+            }],
         "minimized": [{
                 "minimizedChanged": 0
             }],

package/dist/cjs/ui-dialog-content.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const dialogContentCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.dialog-content{flex:1;padding:16px 20px;overflow-y:hidden;color:var(--text-secondary, #374151)}.dialog-content--scrollable{overflow-y:auto}.dialog-content--no-padding{padding:0}.dialog-content p{margin:0 0 16px 0}.dialog-content p:last-child{margin-bottom:0}.dialog-content--loading{display:flex;flex-direction:column;gap:12px}.dc-skeleton{height:14px;border-radius:6px;background:linear-gradient(90deg, var(--bg-tertiary, #e5e7eb) 25%, var(--bg-secondary, #f3f4f6) 50%, var(--bg-tertiary, #e5e7eb) 75%);background-size:200% 100%;animation:dc-shimmer 1.4s ease-in-out infinite}.dc-skeleton--wide{width:100%}.dc-skeleton--md{width:72%}.dc-skeleton--narrow{width:48%}@keyframes dc-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
 

package/dist/cjs/ui-dialog-footer_2.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const dialogFooterCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%}.dialog-footer{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 24px;background-color:transparent}.dialog-footer--end{justify-content:flex-end}.dialog-footer--start{justify-content:flex-start}.dialog-footer--center{justify-content:center}.dialog-footer--space-between{justify-content:space-between}.dialog-footer--sticky{position:sticky;bottom:0;z-index:1;background-color:var(--bg-primary, #ffffff)}.dialog-footer--no-divider{border-top:none}.dialog-footer button{padding:8px 16px;border:1px solid var(--border-strong, #d1d5db);border-radius:6px;background-color:var(--bg-primary, #ffffff);color:var(--text-secondary, #374151);font-size:14px;cursor:pointer;transition:all 0.2s ease}.dialog-footer button:hover{background-color:var(--bg-secondary, #f3f4f6);border-color:var(--color-primary, #9ca3af)}.dialog-footer button:focus{outline:none;box-shadow:0 0 0 2px var(--color-primary, #10b981)}`;
 

package/dist/cjs/ui-divider.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const dividerCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block;width:100%;box-sizing:border-box}:host([orientation=vertical]){display:inline-flex;width:auto;height:100%;align-self:stretch;vertical-align:middle}.divider{display:flex;align-items:center;width:100%;height:100%;margin:16px 0;color:var(--divider-text-color, var(--text-muted, #6b7280));font-size:var(--divider-text-size, 14px);white-space:nowrap;font-family:inherit;box-sizing:border-box}.divider-vertical{flex-direction:column;height:100%;min-height:1em;width:auto;margin:0 16px}.divider-line{flex:1;height:1px;background-color:var(--divider-color, #e5e7eb);position:relative;}.divider-gradient .divider-line{background:linear-gradient(to right, transparent, var(--divider-color, #e5e7eb), transparent);height:2px}.divider-vertical .divider-line{width:1px;height:auto;flex:1}.divider-main-content{padding:0 var(--divider-gap, 16px);text-transform:var(--divider-text-transform, capitalize);font-weight:500;display:inline-flex;align-items:center;gap:8px;color:var(--divider-text-color, var(--text-muted, #6b7280));white-space:nowrap;background-color:var(--bg-primary, #ffffff);position:relative;z-index:1}.divider-main-content:empty{display:none;padding:0}.divider-icon{display:inline-flex;align-items:center;justify-content:center}.divider-vertical .divider-main-content{padding:16px 0;writing-mode:vertical-rl;letter-spacing:0.1em}.divider-upright .divider-main-content{text-orientation:upright;letter-spacing:0}.divider-text-left .divider-line:first-child,.divider-text-start .divider-line:first-child{flex:0 0 20px}.divider-text-left .divider-line:last-child,.divider-text-start .divider-line:last-child{flex:1}.divider-text-center .divider-line:first-child,.divider-text-center .divider-line:last-child{flex:1}.divider-text-right .divider-line:first-child,.divider-text-end .divider-line:first-child{flex:1}.divider-text-right .divider-line:last-child,.divider-text-end .divider-line:last-child{flex:0 0 20px}.divider-vertical.divider-text-left .divider-line:first-child{flex:0 0 20px}.divider-vertical.divider-text-left .divider-line:last-child{flex:1}.divider-vertical.divider-text-center .divider-line:first-child,.divider-vertical.divider-text-center .divider-line:last-child{flex:1}.divider-vertical.divider-text-right .divider-line:first-child{flex:1}.divider-vertical.divider-text-right .divider-line:last-child{flex:0 0 20px}.divider-solid .divider-line{background-color:var(--bg-primary, #e5e7eb)}.divider-dashed .divider-line{border-bottom:2px dashed var(--border-strong, #d1d5db);background:none;height:0}.divider-dotted .divider-line{border-bottom:2px dotted var(--border-strong, #d1d5db);background:none;height:0}.divider-double-solid .divider-line{border-top:1px solid var(--border-default, #e5e7eb);border-bottom:1px solid var(--border-default, #e5e7eb);height:3px;background:none}.divider-double-dashed .divider-line{border-top:2px dashed var(--border-strong, #d1d5db);border-bottom:2px dashed var(--border-strong, #d1d5db);height:3px;background:none}.divider-double-dotted .divider-line{border-top:2px dotted var(--border-strong, #d1d5db);border-bottom:2px dotted var(--border-strong, #d1d5db);height:3px;background:none}.divider-sm .divider-line{height:1px}.divider-sm.divider-vertical .divider-line{width:1px}.divider-md .divider-line{height:2px}.divider-md.divider-vertical .divider-line{width:2px}.divider-lg .divider-line{height:3px}.divider-lg.divider-vertical .divider-line{width:3px}.divider-sm.divider-dashed .divider-line{border-bottom-width:1px}.divider-sm.divider-dotted .divider-line{border-bottom-width:1px}.divider-md.divider-dashed .divider-line{border-bottom-width:2px}.divider-md.divider-dotted .divider-line{border-bottom-width:2px}.divider-lg.divider-dashed .divider-line{border-bottom-width:3px}.divider-lg.divider-dotted .divider-line{border-bottom-width:3px}.divider-sm.divider-double-solid .divider-line,.divider-sm.divider-double-dashed .divider-line,.divider-sm.divider-double-dotted .divider-line{border-top-width:1px;border-bottom-width:1px;height:2px}.divider-md.divider-double-solid .divider-line,.divider-md.divider-double-dashed .divider-line,.divider-md.divider-double-dotted .divider-line{border-top-width:2px;border-bottom-width:2px;height:4px}.divider-lg.divider-double-solid .divider-line,.divider-lg.divider-double-dashed .divider-line,.divider-lg.divider-double-dotted .divider-line{border-top-width:3px;border-bottom-width:3px;height:6px}.divider-custom .divider-line{background-color:var(--divider-color, #e5e7eb)}.divider-custom.divider-dashed .divider-line,.divider-custom.divider-dotted .divider-line,.divider-custom.divider-double-solid .divider-line,.divider-custom.divider-double-dashed .divider-line,.divider-custom.divider-double-dotted .divider-line{border-color:var(--divider-color, var(--border-default, #e5e7eb))}.divider-custom .divider-text{color:var(--divider-text-color, var(--text-muted, #6b7280))}.divider-animation-fade{animation:dividerFadeIn 0.5s ease}.divider-animation-slide{animation:dividerSlideIn 0.5s ease}.divider-animation-expand{animation:dividerExpand 0.5s ease}@keyframes dividerFadeIn{from{opacity:0}to{opacity:1}}@keyframes dividerSlideIn{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes dividerExpand{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}.divider-clickable{cursor:pointer;transition:all 0.2s ease}.divider-clickable:hover{transform:scale(1.02)}.divider-clickable:focus-visible{outline:2px solid var(--color-primary, #10b981);outline-offset:2px;border-radius:4px}.divider-shadow .divider-line{box-shadow:0 2px 4px rgba(0, 0, 0, 0.1)}.divider-glow .divider-line{box-shadow:0 0 10px currentColor;filter:brightness(1.2)}.divider-pattern-dots .divider-line{background-image:radial-gradient(circle, currentColor 1px, transparent 1px);background-size:8px 8px;background-color:transparent;height:8px}.divider-aura .divider-line{position:relative;overflow:hidden;box-shadow:0 0 15px currentColor;filter:brightness(1.2)}.divider-aura .divider-line::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);animation:auraFlow 3s infinite ease-in-out}@keyframes auraFlow{0%{left:-100%}50%{left:150%}100%{left:150%}}.divider-glass .divider-main-content{background:rgba(255, 255, 255, 0.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255, 255, 255, 0.2);padding:8px 20px;border-radius:30px;box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.15)}.divider-kinetic .divider-line{background:linear-gradient(-45deg, var(--color-danger, #ee7752), var(--color-danger, #e73c7e), var(--color-primary, #23a6d5), var(--color-success, #23d5ab));background-size:400% 400%;animation:kineticGradient 10s ease infinite;height:2px}@keyframes kineticGradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}.divider-icon-anim-spin .divider-icon{animation:iconSpin 4s linear infinite}.divider-icon-anim-pulse .divider-icon{animation:iconPulse 2s ease-in-out infinite}.divider-icon-anim-flip .divider-icon{animation:iconFlip 3s ease-in-out infinite}@keyframes iconSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes iconPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}@keyframes iconFlip{0%{transform:rotateY(0deg)}50%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}.divider-pattern-stripes .divider-line{background-image:repeating-linear-gradient(45deg, currentColor, currentColor 2px, transparent 2px, transparent 6px);background-color:transparent;height:8px}.divider-pattern-wavy .divider-line{background-image:url("data:image/svg+xml,%3Csvg width='100' height='10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 5 Q 25 0, 50 5 T 100 5' stroke='%23e5e7eb' fill='none' stroke-width='2'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:100px 10px;background-color:transparent;height:10px}.divider-pattern-zigzag .divider-line{background-image:linear-gradient(135deg, currentColor 25%, transparent 25%), linear-gradient(225deg, currentColor 25%, transparent 25%);background-size:10px 10px;background-position:0 0, 5px 0;background-repeat:repeat-x;background-color:transparent;height:10px}.divider-inset-start{margin-left:40px}.divider-inset-end{margin-right:40px}.divider-inset-both{margin-left:40px;margin-right:40px}.divider-vertical.divider-inset-start{margin-left:0;margin-top:40px}.divider-vertical.divider-inset-end{margin-right:0;margin-bottom:40px}.divider-vertical.divider-inset-both{margin-left:0;margin-right:0;margin-top:40px;margin-bottom:40px}.divider-spacing-compact{margin:8px 0}.divider-spacing-comfortable{margin:24px 0}.divider-spacing-spacious{margin:40px 0}.divider-vertical.divider-spacing-compact{margin:0 8px}.divider-vertical.divider-spacing-comfortable{margin:0 24px}.divider-vertical.divider-spacing-spacious{margin:0 40px}.divider-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;background-color:var(--color-primary, #10b981);color:var(--text-standard, #ffffff);border-radius:10px;font-size:11px;font-weight:600;line-height:1}.divider-line{border-radius:var(--divider-border-radius, 0)}.divider-content-wrapper{display:flex;align-items:center;gap:12px}.divider-main-content{display:flex;align-items:center;gap:8px;padding:0 12px;background-color:var(--bg-primary, #ffffff);position:relative;z-index:1}.divider-text-area{display:flex;align-items:center;gap:8px}.divider-label{text-transform:var(--divider-text-transform, capitalize);font-weight:700;letter-spacing:-0.01em}.divider-label-group{display:flex;flex-direction:column;gap:2px}.divider-subtitle{font-size:0.7rem;font-weight:500;opacity:0.6;text-transform:none;letter-spacing:0.02em}.divider-with-subtitle{padding:12px 0}.divider-image{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid rgba(255, 255, 255, 0.8);box-shadow:0 4px 10px rgba(0, 0, 0, 0.1)}.divider-shimmer{width:80px;height:16px;background:linear-gradient(90deg, var(--bg-primary, #f3f4f6) 25%, var(--bg-primary, #e5e7eb) 50%, var(--bg-primary, #f3f4f6) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}.divider-plain .divider-line{display:none}.divider-plain .divider-main-content{padding:0}@media (prefers-reduced-motion: reduce){.divider-animation-fade,.divider-animation-slide,.divider-animation-expand,.divider-clickable,.divider-shimmer{animation:none;transition:none}}.color-primary .divider-line{background-color:var(--color-primary, #10b981);border-color:var(--color-primary, #10b981)}.color-secondary .divider-line{background-color:var(--text-muted, #6b7280);border-color:var(--color-primary, #6b7280)}.color-success .divider-line{background-color:var(--color-success, #10b981);border-color:var(--color-success, #10b981)}.color-danger .divider-line{background-color:var(--color-danger, #ef4444);border-color:var(--color-danger, #ef4444)}.color-warning .divider-line{background-color:var(--color-warning, #f59e0b);border-color:var(--color-warning, #f59e0b)}.divider-linecap-round .divider-line{border-radius:9999px}.divider-linecap-square .divider-line{border-radius:0}.divider-lines-none .divider-line{display:none}.divider-shape{position:relative;width:100%;overflow:hidden;line-height:0;margin:16px 0}.divider-shape svg{display:block;width:calc(100% + 1.3px);height:50px;transform:rotate(180deg);}.divider-shape svg path{fill:var(--divider-color, #e5e7eb);stroke:none}.divider-shape-curve svg{height:50px}.divider-shape-tilt svg{height:40px}.divider-shape-triangle svg{height:40px}.divider-shape-wave svg{height:60px}.divider-shape-zigzag svg{height:30px}.divider-shape-arrow svg{height:30px}.color-primary .divider-shape svg path{fill:var(--color-primary, #10b981)}.color-secondary .divider-shape svg path{fill:var(--text-muted, #6b7280)}.color-success .divider-shape svg path{fill:var(--color-success, #10b981)}.color-danger .divider-shape svg path{fill:var(--color-danger, #ef4444)}.color-warning .divider-shape svg path{fill:var(--color-warning, #f59e0b)}.color-info .divider-shape svg path{fill:var(--color-info, #06b6d4)}.divider-step-node{position:absolute;width:22px;height:22px;background:var(--bg-primary, #ffffff);border:2px solid var(--border-subtle, #e2e8f0);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--color-primary, #94a3b8);transform:translate(-50%, -50%);top:50%;z-index:2;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.divider-vertical .divider-step-node{left:50%;top:auto}.divider-step-node.is-completed{background:var(--color-success, #10b981);border-color:var(--color-success, #10b981);color:var(--text-standard, #ffffff);transform:translate(-50%, -50%) scale(1.1)}.divider-step-node.is-active{border-color:var(--color-primary, #8b5cf6);color:var(--color-primary, #8b5cf6);background:var(--bg-primary, #ffffff);box-shadow:0 0 0 4px rgba(139, 92, 246, 0.15);transform:translate(-50%, -50%) scale(1.2)}.divider-heatmap .divider-line{background:linear-gradient(90deg, var(--color-success, #10b981) 0%, var(--color-warning, #f59e0b) 50%, var(--color-danger, #ef4444) 100%) no-repeat left, var(--border-default, #e5e7eb);background-size:var(--divider-percent, 100%) 100%, 100% 100%;height:2px !important}.divider-ripple{position:relative;overflow:hidden;cursor:pointer}.ripple-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.ripple-container span{position:absolute;transform:translate(-50%, -50%);background-color:rgba(255, 255, 255, 0.4);border-radius:50%;animation:rippleAnim 0.8s ease-out forwards;width:20px;height:20px}@keyframes rippleAnim{0%{transform:translate(-50%, -50%) scale(0);opacity:1}100%{transform:translate(-50%, -50%) scale(20);opacity:0}}.divider-parallax{filter:drop-shadow(0 12px 15px rgba(0, 0, 0, 0.2));transition:all 0.4s ease}.divider-parallax:hover{transform:translateY(-4px);filter:drop-shadow(0 20px 25px rgba(0, 0, 0, 0.25))}.divider-reveal.is-revealed .divider-line{transform:scaleX(1) !important;opacity:1 !important}.divider-reveal .divider-line{transform:scaleX(0);opacity:0;transition:transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;transform-origin:center}.divider-draggable{cursor:ew-resize !important;user-select:none}.divider-draggable .divider-line{position:relative;overflow:hidden}.divider-draggable.is-dragging{cursor:grabbing !important}.divider-organic:hover .divider-line{animation:organicWobble 2s infinite alternate ease-in-out}@keyframes organicWobble{0%{transform:scaleY(1) skewX(0deg)}33%{transform:scaleY(1.4) skewX(2deg)}66%{transform:scaleY(0.8) skewX(-2deg)}100%{transform:scaleY(1.2) skewX(1deg)}}.divider-stream .divider-line{position:relative;overflow:hidden}.divider-stream .divider-line::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);animation:streamFlicker 0.15s infinite}@keyframes streamFlicker{0%{opacity:0.1}50%{opacity:0.6}100%{opacity:0.1}}.divider-holographic:hover .divider-line{filter:drop-shadow(2px 0 0 rgba(255, 0, 0, 0.5)) drop-shadow(-2px 0 0 rgba(0, 255, 255, 0.5));transition:filter 0.2s ease}.divider-teleport{cursor:pointer}`;
 

package/dist/cjs/ui-dock-host.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const uiDockHostCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.ui-dock-host-layout{display:flex;width:100%;height:100%;overflow:hidden}.dock-main-area{flex:1;overflow:auto;position:relative;background:var(--ui-content-bg, #f8fafc)}.dock-panel{background:var(--ui-surface, var(--bg-primary, #ffffff));color:var(--ui-text, #1e293b);box-shadow:0 4px 24px rgba(0, 0, 0, 0.08);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:180px;min-height:120px;transition:all 0.2s cubic-bezier(0.4, 0, 0.2, 1);border:1px solid var(--ui-border, var(--border-subtle, #e2e8f0))}.dock-panel.left{border-left:4px solid var(--color-primary, #6366f1);border-radius:0 12px 12px 0}.dock-panel.right{border-right:4px solid var(--color-primary, #6366f1);border-radius:12px 0 0 12px}.dock-panel.top{border-top:4px solid var(--color-primary, #6366f1);border-radius:0 0 12px 12px}.dock-panel.bottom{border-bottom:4px solid var(--color-primary, #6366f1);border-radius:12px 12px 0 0}.dock-panel.floating{background:var(--ui-surface, var(--bg-primary, #ffffff));box-shadow:0 12px 48px rgba(0, 0, 0, 0.15);border-radius:18px;border:1px solid rgba(99, 102, 241, 0.2);min-width:120px;min-height:80px;z-index:9999}.dock-resize-handle{background:rgba(99, 102, 241, 0.1);border-radius:0 0 12px 0;position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;z-index:10;transition:background 0.2s}.dock-resize-handle:hover{background:rgba(99, 102, 241, 0.3)}.dock-header{background:var(--bg-primary, #f8fafc);padding:10px 16px;font-weight:700;font-size:0.875rem;color:var(--color-primary, #475569);display:flex;align-items:center;justify-content:space-between;cursor:move;user-select:none;border-bottom:1px solid var(--border-subtle, #f1f5f9)}.dock-float-btn{background:var(--bg-primary, #eff6ff);border:1px solid var(--border-subtle, #dbeafe);color:var(--color-primary-hover, #2563eb);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;margin-left:8px;transition:all 0.2s}.dock-float-btn:hover{background:var(--bg-primary, #dbeafe);transform:translateY(-1px)}.dock-content{flex:1;padding:16px;overflow:auto;line-height:1.5}@media (prefers-color-scheme: dark){.dock-header{background:var(--bg-primary, #1e293b);color:var(--text-standard, #f1f5f9);border-bottom-color:var(--color-primary, #334155)}.dock-float-btn{background:var(--color-primary, #334155);border-color:var(--color-primary, #475569);color:var(--color-primary, #60a5fa)}}`;
 
@@ -99,7 +99,7 @@ const UiDockHost = class {
     }
     render() {
         const isFloating = this.dock === 'float';
-        return (index.h(index.Host, { key: 'ae3a9906a747c4ae3d2f504e230b6438261bc699', class: {
+        return (index.h(index.Host, { key: '8d6a59b284fc214a749257ff5acb9dee09946f01', class: {
                 'ui-dock-host-layout': true,
                 'is-floating': isFloating,
                 [`is-docked-${this.dock}`]: !isFloating,
@@ -113,14 +113,14 @@ const UiDockHost = class {
                 top: '0',
                 left: '0',
                 pointerEvents: isFloating ? 'none' : 'auto' // Allow clicking through layout when only a floating window exists
-            } }, index.h("div", { key: '9c64f35a9e8225b8ab4a4ca7b1ff516676a1b2aa', class: "dock-main-area", style: { flex: '1', overflow: 'auto', pointerEvents: 'auto' } }, index.h("slot", { key: '73fa260f89788adb5d6f04fc985052aa31fc1e5d', name: "main" })), index.h("div", { key: 'a2ec976d0c2268a1022fbf043936671a2932985f', class: {
+            } }, index.h("div", { key: '369e0b3903a8f7cd8a555258722bf725d97d192e', class: "dock-main-area", style: { flex: '1', overflow: 'auto', pointerEvents: 'auto' } }, index.h("slot", { key: '6bafee7ed3acd280aed85aa04f3bdd3c61127be8', name: "main" })), index.h("div", { key: 'f613433f3a5f9c8f57263009cde1602cadeb8878', class: {
                 'dock-panel': true,
                 'floating': isFloating,
                 [this.dock]: !isFloating
             }, style: {
                 ...this.getDockStyle(),
                 pointerEvents: 'auto'
-            } }, index.h("div", { key: '12ae10fc29ce6cdb243964765cd5e6ea4d01742c', class: "dock-header", onMouseDown: this.onHeaderMouseDown }, index.h("span", { key: 'c0d6ef086badd0b21ab9c2d66fbf0a226d7be995', class: "dock-header-content" }, index.h("slot", { key: '09ac92cfe25a30b2213e2aefb26e71b5401dbfd0', name: "header" }, "Dock Host")), index.h("ui-button", { key: 'bf3971544a8e4ae3de4a311e8fcc71d679b8d9b7', variant: "ghost", onClick: this.toggleFloat, title: isFloating ? 'Dock' : 'Float', size: "sm", icon: isFloating ? 'layout' : 'maximize', iconLibrary: "lucide", label: isFloating ? 'Dock' : 'Float' })), index.h("div", { key: 'c7bc3b6668e730f5e466c977e625890ad820cb06', class: "dock-content" }, index.h("slot", { key: '50e0ce9c5beff1b054732c28bdcad6a01f2bd1ef' })), isFloating && (index.h("div", { key: 'd827c4c190fcd6a1fdf258d9524b7646e1d05619', class: "dock-resize-handle", onMouseDown: this.onResizeMouseDown, style: { position: 'absolute', right: '0', bottom: '0', width: '16px', height: '16px', cursor: 'nwse-resize', zIndex: '10' } })))));
+            } }, index.h("div", { key: 'dfdbe71042ccfed81f762ec3f46e43eac2ca5079', class: "dock-header", onMouseDown: this.onHeaderMouseDown }, index.h("span", { key: '8300f7a762beaf8388e1cce5d377a824ff5b8af4', class: "dock-header-content" }, index.h("slot", { key: '80caa80e570a3325171eddfc9691d24f19a2d466', name: "header" }, "Dock Host")), index.h("ui-button", { key: '2c174b26e154ed6a3a6a0b458a94b8d1b4236e5a', variant: "ghost", onClick: this.toggleFloat, title: isFloating ? 'Dock' : 'Float', size: "sm", icon: isFloating ? 'layout' : 'maximize', iconLibrary: "lucide", label: isFloating ? 'Dock' : 'Float' })), index.h("div", { key: '67a3686b34fc4e9514e3f52e91dfe5641ed06ac6', class: "dock-content" }, index.h("slot", { key: 'ad8a69994614a0a1c587d50d1a19fe717c9be712' })), isFloating && (index.h("div", { key: '28be93e72315cf228047bc28ccbec809b4ca2600', class: "dock-resize-handle", onMouseDown: this.onResizeMouseDown, style: { position: 'absolute', right: '0', bottom: '0', width: '16px', height: '16px', cursor: 'nwse-resize', zIndex: '10' } })))));
     }
 };
 UiDockHost.style = uiDockHostCss();

package/dist/cjs/ui-dock.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
-const dockCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.dock-container{display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:16px;background:var(--dock-bg, rgba(255, 255, 255, 0.8));box-shadow:var(--dock-shadow, 0 4px 16px rgba(0, 0, 0, 0.1));border:1px solid var(--dock-border, rgba(0, 0, 0, 0.1))}.dock-blur{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.dock-bottom,.dock-top{flex-direction:row}.dock-left,.dock-right{flex-direction:column}.dock-items{display:flex;gap:8px;align-items:center}.dock-left .dock-items,.dock-right .dock-items{flex-direction:column}.dock-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:12px;background:var(--dock-item-bg, transparent);transition:all 0.2s ease;outline:none}.dock-item:hover{background:var(--dock-item-hover-bg, rgba(0, 0, 0, 0.05))}.dock-item:focus{box-shadow:0 0 0 2px var(--primary-color, var(--color-primary, #10b981))}.dock-item:active{transform:scale(0.95) !important}.dock-item-disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.dock-sm .dock-item{width:40px;height:40px;padding:8px}.dock-md .dock-item{width:56px;height:56px;padding:12px}.dock-lg .dock-item{width:72px;height:72px;padding:16px}.dock-item-content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.dock-item-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;color:var(--dock-icon-color, var(--text-primary, #1f2937))}.dock-item-icon svg{width:100%;height:100%;fill:currentColor}.dock-sm .dock-item-icon{font-size:20px}.dock-md .dock-item-icon{font-size:28px}.dock-lg .dock-item-icon{font-size:36px}.dock-item-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;background-color:var(--badge-bg, var(--color-danger, #ef4444));color:var(--badge-color, var(--text-standard, #ffffff));border-radius:9px;font-size:11px;font-weight:600;line-height:1;border:2px solid var(--dock-bg, var(--bg-primary, #ffffff))}.dock-item-label{position:absolute;padding:6px 12px;background:var(--label-bg, rgba(0, 0, 0, 0.8));color:var(--label-color, var(--text-standard, #ffffff));border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10}.dock-bottom .dock-item-label{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.dock-top .dock-item-label{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.dock-left .dock-item-label{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.dock-right .dock-item-label{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.dock-item-hovered .dock-item-label{opacity:1}.dock-item-label::after{content:"";position:absolute;width:0;height:0;border:5px solid transparent}.dock-bottom .dock-item-label::after{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--label-bg, rgba(0, 0, 0, 0.8))}.dock-top .dock-item-label::after{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--label-bg, rgba(0, 0, 0, 0.8))}.dock-left .dock-item-label::after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--label-bg, rgba(0, 0, 0, 0.8))}.dock-right .dock-item-label::after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--label-bg, rgba(0, 0, 0, 0.8))}@media (prefers-color-scheme: dark){.dock-container{background:var(--dock-bg, rgba(30, 30, 30, 0.8));border-color:var(--dock-border, rgba(255, 255, 255, 0.1))}.dock-item:hover{background:var(--dock-item-hover-bg, rgba(255, 255, 255, 0.1))}.dock-item-icon{color:var(--dock-icon-color, #f3f4f6)}}@media (prefers-reduced-motion: reduce){.dock-item,.dock-item-label,.dock-item-bounce{transition:none;animation:none}}.active-indicator{position:absolute;width:4px;height:4px;background-color:var(--active-indicator-color, var(--color-primary, #10b981));border-radius:50%;bottom:4px}.dock-top .active-indicator{top:4px;bottom:auto}.dock-left .active-indicator{left:4px;top:50%;transform:translateY(-50%);bottom:auto}.dock-right .active-indicator{right:4px;top:50%;transform:translateY(-50%);bottom:auto}@keyframes dockBounce{0%,20%,50%,80%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1)}60%{transform:translateY(-5px) scale(1)}}.dock-item-bounce{animation:dockBounce 2s infinite}.dock-separator{width:1px;height:24px;background-color:var(--separator-bg, rgba(0, 0, 0, 0.1));margin:0 4px}.dock-left .dock-separator,.dock-right .dock-separator{width:24px;height:1px;margin:4px 0}@media (prefers-color-scheme: dark){.dock-separator{background-color:rgba(255, 255, 255, 0.1)}.active-indicator{background-color:var(--color-primary, #60a5fa)}}`;
+const dockCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.dock-container{display:inline-flex;align-items:center;justify-content:center;padding:8px;border-radius:16px;background:var(--dock-bg, rgba(255, 255, 255, 0.8));box-shadow:var(--dock-shadow, 0 4px 16px rgba(0, 0, 0, 0.1));border:1px solid var(--dock-border, rgba(0, 0, 0, 0.1))}.dock-blur{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.dock-bottom,.dock-top{flex-direction:row}.dock-left,.dock-right{flex-direction:column}.dock-items{display:flex;gap:8px;align-items:center}.dock-left .dock-items,.dock-right .dock-items{flex-direction:column}.dock-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border-radius:12px;background:var(--dock-item-bg, transparent);transition:all 0.2s ease;outline:none}.dock-item:hover{background:var(--dock-item-hover-bg, rgba(0, 0, 0, 0.05))}.dock-item:focus{box-shadow:0 0 0 2px var(--primary-color, var(--color-primary, #10b981))}.dock-item:active{transform:scale(0.95) !important}.dock-item-disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}.dock-sm .dock-item{width:40px;height:40px;padding:8px}.dock-md .dock-item{width:56px;height:56px;padding:12px}.dock-lg .dock-item{width:72px;height:72px;padding:16px}.dock-item-content{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.dock-item-icon{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:inherit;color:var(--dock-icon-color, var(--text-primary, #1f2937))}.dock-item-icon svg{width:100%;height:100%;fill:currentColor}.dock-sm .dock-item-icon{font-size:20px}.dock-md .dock-item-icon{font-size:28px}.dock-lg .dock-item-icon{font-size:36px}.dock-item-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;background-color:var(--badge-bg, var(--color-danger, #ef4444));color:var(--badge-color, var(--text-standard, #ffffff));border-radius:9px;font-size:11px;font-weight:600;line-height:1;border:2px solid var(--dock-bg, var(--bg-primary, #ffffff))}.dock-item-label{position:absolute;padding:6px 12px;background:var(--label-bg, rgba(0, 0, 0, 0.8));color:var(--label-color, var(--text-standard, #ffffff));border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 0.2s ease;z-index:10}.dock-bottom .dock-item-label{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}.dock-top .dock-item-label{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}.dock-left .dock-item-label{left:calc(100% + 12px);top:50%;transform:translateY(-50%)}.dock-right .dock-item-label{right:calc(100% + 12px);top:50%;transform:translateY(-50%)}.dock-item-hovered .dock-item-label{opacity:1}.dock-item-label::after{content:"";position:absolute;width:0;height:0;border:5px solid transparent}.dock-bottom .dock-item-label::after{top:100%;left:50%;transform:translateX(-50%);border-top-color:var(--label-bg, rgba(0, 0, 0, 0.8))}.dock-top .dock-item-label::after{bottom:100%;left:50%;transform:translateX(-50%);border-bottom-color:var(--label-bg, rgba(0, 0, 0, 0.8))}.dock-left .dock-item-label::after{right:100%;top:50%;transform:translateY(-50%);border-right-color:var(--label-bg, rgba(0, 0, 0, 0.8))}.dock-right .dock-item-label::after{left:100%;top:50%;transform:translateY(-50%);border-left-color:var(--label-bg, rgba(0, 0, 0, 0.8))}:host-context(.dark) .dock-container,:host-context([data-theme=dark]) .dock-container,:host-context(.green) .dock-container,:host-context([data-theme=green]) .dock-container,:host-context(.blue) .dock-container,:host-context([data-theme=blue]) .dock-container,:host-context(.pink) .dock-container,:host-context([data-theme=pink]) .dock-container,:host-context(.violet) .dock-container,:host-context([data-theme=violet]) .dock-container,:host(.dark) .dock-container,:host([data-theme=dark]) .dock-container,:host(.green) .dock-container,:host([data-theme=green]) .dock-container,:host(.blue) .dock-container,:host([data-theme=blue]) .dock-container,:host(.pink) .dock-container,:host([data-theme=pink]) .dock-container,:host(.violet) .dock-container,:host([data-theme=violet]) .dock-container{background:var(--dock-bg, var(--bg-primary, rgba(30, 30, 30, 0.8))) !important;border-color:var(--dock-border, var(--border-default, rgba(255, 255, 255, 0.1))) !important}:host-context(.dark) .dock-item:hover,:host-context([data-theme=dark]) .dock-item:hover,:host-context(.green) .dock-item:hover,:host-context([data-theme=green]) .dock-item:hover,:host-context(.blue) .dock-item:hover,:host-context([data-theme=blue]) .dock-item:hover,:host-context(.pink) .dock-item:hover,:host-context([data-theme=pink]) .dock-item:hover,:host-context(.violet) .dock-item:hover,:host-context([data-theme=violet]) .dock-item:hover,:host(.dark) .dock-item:hover,:host([data-theme=dark]) .dock-item:hover,:host(.green) .dock-item:hover,:host([data-theme=green]) .dock-item:hover,:host(.blue) .dock-item:hover,:host([data-theme=blue]) .dock-item:hover,:host(.pink) .dock-item:hover,:host([data-theme=pink]) .dock-item:hover,:host(.violet) .dock-item:hover,:host([data-theme=violet]) .dock-item:hover{background:var(--dock-item-hover-bg, rgba(255, 255, 255, 0.1)) !important}:host-context(.dark) .dock-item-icon,:host-context([data-theme=dark]) .dock-item-icon,:host-context(.green) .dock-item-icon,:host-context([data-theme=green]) .dock-item-icon,:host-context(.blue) .dock-item-icon,:host-context([data-theme=blue]) .dock-item-icon,:host-context(.pink) .dock-item-icon,:host-context([data-theme=pink]) .dock-item-icon,:host-context(.violet) .dock-item-icon,:host-context([data-theme=violet]) .dock-item-icon,:host(.dark) .dock-item-icon,:host([data-theme=dark]) .dock-item-icon,:host(.green) .dock-item-icon,:host([data-theme=green]) .dock-item-icon,:host(.blue) .dock-item-icon,:host([data-theme=blue]) .dock-item-icon,:host(.pink) .dock-item-icon,:host([data-theme=pink]) .dock-item-icon,:host(.violet) .dock-item-icon,:host([data-theme=violet]) .dock-item-icon{color:var(--dock-icon-color, var(--text-primary, #f3f4f6)) !important}@media (prefers-color-scheme: dark){.dock-container{background:var(--dock-bg, var(--bg-primary, rgba(30, 30, 30, 0.8)));border-color:var(--dock-border, var(--border-default, rgba(255, 255, 255, 0.1)))}.dock-item:hover{background:var(--dock-item-hover-bg, rgba(255, 255, 255, 0.1))}.dock-item-icon{color:var(--dock-icon-color, var(--text-primary, #f3f4f6))}}@media (prefers-reduced-motion: reduce){.dock-item,.dock-item-label,.dock-item-bounce{transition:none;animation:none}}.active-indicator{position:absolute;width:4px;height:4px;background-color:var(--active-indicator-color, var(--color-primary, #10b981));border-radius:50%;bottom:4px}.dock-top .active-indicator{top:4px;bottom:auto}.dock-left .active-indicator{left:4px;top:50%;transform:translateY(-50%);bottom:auto}.dock-right .active-indicator{right:4px;top:50%;transform:translateY(-50%);bottom:auto}@keyframes dockBounce{0%,20%,50%,80%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-10px) scale(1)}60%{transform:translateY(-5px) scale(1)}}.dock-item-bounce{animation:dockBounce 2s infinite}.dock-separator{width:1px;height:24px;background-color:var(--separator-bg, rgba(0, 0, 0, 0.1));margin:0 4px}.dock-left .dock-separator,.dock-right .dock-separator{width:24px;height:1px;margin:4px 0}:host-context(.dark) .dock-separator,:host-context([data-theme=dark]) .dock-separator,:host-context(.green) .dock-separator,:host-context([data-theme=green]) .dock-separator,:host-context(.blue) .dock-separator,:host-context([data-theme=blue]) .dock-separator,:host-context(.pink) .dock-separator,:host-context([data-theme=pink]) .dock-separator,:host-context(.violet) .dock-separator,:host-context([data-theme=violet]) .dock-separator,:host(.dark) .dock-separator,:host([data-theme=dark]) .dock-separator,:host(.green) .dock-separator,:host([data-theme=green]) .dock-separator,:host(.blue) .dock-separator,:host([data-theme=blue]) .dock-separator,:host(.pink) .dock-separator,:host([data-theme=pink]) .dock-separator,:host(.violet) .dock-separator,:host([data-theme=violet]) .dock-separator{background-color:var(--border-default, rgba(255, 255, 255, 0.1)) !important}:host-context(.dark) .active-indicator,:host-context([data-theme=dark]) .active-indicator,:host-context(.green) .active-indicator,:host-context([data-theme=green]) .active-indicator,:host-context(.blue) .active-indicator,:host-context([data-theme=blue]) .active-indicator,:host-context(.pink) .active-indicator,:host-context([data-theme=pink]) .active-indicator,:host-context(.violet) .active-indicator,:host-context([data-theme=violet]) .active-indicator,:host(.dark) .active-indicator,:host([data-theme=dark]) .active-indicator,:host(.green) .active-indicator,:host([data-theme=green]) .active-indicator,:host(.blue) .active-indicator,:host([data-theme=blue]) .active-indicator,:host(.pink) .active-indicator,:host([data-theme=pink]) .active-indicator,:host(.violet) .active-indicator,:host([data-theme=violet]) .active-indicator{background-color:var(--color-primary, #60a5fa) !important}@media (prefers-color-scheme: dark){.dock-separator{background-color:rgba(255, 255, 255, 0.1)}.active-indicator{background-color:var(--color-primary, #60a5fa)}}`;
 
 const Dock = class {
     constructor(hostRef) {

package/dist/cjs/ui-drag-drop.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-ClkOYpT8.js');
+var index = require('./index-C32cWsm5.js');
 
 const dragDropCss = () => `.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}.a11y-sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border-width:0 !important}:host{display:block}.drag-drop{display:flex;flex-direction:column;align-items:stretch;gap:var(--drag-drop-gap, 0.5rem);background:var(--drag-drop-background, transparent);padding:var(--drag-drop-padding, 0)}.drag-drop--horizontal{flex-direction:row;flex-wrap:wrap}.drag-drop__item{display:flex;align-items:center;padding:0.75rem 1rem;background:var(--drag-drop-item-background, var(--ui-color-surface, var(--bg-primary, #ffffff)));border:1px solid var(--drag-drop-border-color, var(--ui-color-border, #d9d9d9));border-radius:var(--drag-drop-border-radius, 0.5rem);box-shadow:var(--drag-drop-item-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;cursor:grab}.drag-drop__item--dragging{opacity:0.5;box-shadow:var(--drag-drop-dragging-shadow, 0 15px 25px rgba(15, 23, 42, 0.15))}.drag-drop__item--over{border-color:var(--drag-drop-highlight-color, var(--ui-color-primary, #0b5fff))}.drag-drop__handle{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;margin-inline-end:0.75rem;border-radius:50%;background:var(--drag-drop-handle-background, rgba(15, 23, 42, 0.05));color:var(--drag-drop-handle-color, var(--ui-color-base, #0b5fff));font-size:1rem;line-height:1;cursor:grab}.drag-drop__content{flex:1;display:flex;flex-direction:column;gap:0.2rem}.drag-drop__label{font-weight:600;color:var(--drag-drop-label-color, var(--ui-color-base, #0f172a))}.drag-drop__description{font-size:0.875rem;color:var(--drag-drop-description-color, var(--ui-color-muted, var(--text-muted, #6b7280)))}.drag-drop__detail{font-size:0.75rem;color:var(--drag-drop-detail-color, var(--ui-color-muted, var(--text-muted, #6b7280)))}.drag-drop__item:active{cursor:grabbing}`;
 
@@ -159,7 +159,7 @@ const UIDragDrop = class {
         const styles = {
             gap: this.gap,
         };
-        return (index.h("div", { key: '8610eaa90602aa5ddeebce5afe2437eec3aebc97', class: containerClasses, style: styles, role: "list" }, this.internalItems.map((item, index) => this.renderItem(item, index))));
+        return (index.h("div", { key: '6b0c0623c0698599b4552cf193275fdd36532f14', class: containerClasses, style: styles, role: "list" }, this.internalItems.map((item, index) => this.renderItem(item, index))));
     }
     static get watchers() { return {
         "items": [{