atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/dialog-box/dialog-box.js

@@ -255,6 +255,7 @@ const DialogTray = new class {
 export class DialogBox {
     _defaultDialogTitle = '';
     _defaultOkText = '';
+    _defaultCancelText = '';
     el;
     _restoredLayout = undefined;
     _isShaking = false;
@@ -535,6 +536,10 @@ export class DialogBox {
      * Disable the OK button.
      */
     okDisabled = false;
+    _forceRender = 0;
+    watchOkDisabled() {
+        this._forceRender++;
+    }
     /**
      * Text for the Reset button (left-aligned).
      */
@@ -556,9 +561,17 @@ export class DialogBox {
             '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,
         };
     }
@@ -617,7 +630,7 @@ export class DialogBox {
     /**
      * Background color of the dialog panel
      */
-    backgroundColor = 'white';
+    backgroundColor = '';
     /**
      * Visual progress bar percentage (0-100).
      */
@@ -839,6 +852,7 @@ export class DialogBox {
         // 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';
@@ -848,10 +862,12 @@ export class DialogBox {
         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
         }
@@ -872,9 +888,21 @@ export class DialogBox {
     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;
@@ -1037,6 +1065,13 @@ export class DialogBox {
     /**
      * 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) => {
@@ -1345,6 +1380,20 @@ export class DialogBox {
             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(); });
@@ -1353,19 +1402,23 @@ export class DialogBox {
         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();
     };
@@ -1398,6 +1451,14 @@ export class DialogBox {
         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;
@@ -1645,6 +1706,9 @@ export class DialogBox {
     renderHeader(isPeek = false) {
         if (!this.showHeader)
             return null;
+        if (this.el.querySelector('[slot="header"]')) {
+            return h("slot", { name: "header" });
+        }
         // Provide default cancelText for session/terms types if not set
         let cancelLabel = this.cancelText;
         if (!cancelLabel) {
@@ -1676,7 +1740,7 @@ export class DialogBox {
             } }, h("div", { class: "step-dot" }, i + 1), Array.isArray(this.steps) && h("div", { class: "step-label" }, this.steps[i]), i < (typeof this.steps === 'number' ? this.steps : this.steps.length) - 1 && h("div", { class: "step-line" }))))));
     }
     renderBodyContent() {
-        return (h("div", { class: { 'ui-dialog-main-container': true, 'has-side-nav': this.layout === 'side-nav' } }, this.layout === 'side-nav' && (h("div", { class: "ui-dialog-side-nav" }, h("slot", { name: "side-nav" }))), h("div", { class: { 'ui-dialog-content-wrapper': true, 'type-messagebox': this.type === 'messagebox' }, part: "body", onScroll: this.handleTermsScroll }, this.type === 'session' && (h("div", { class: `ui-dialog-session-alert ${this._sessionTimedOut ? 'is-timeout' : ''}` }, h("ui-icon", { name: this._sessionTimedOut ? 'log-out' : 'clock', library: "lucide" }), this._sessionTimedOut ? (h("div", { class: "timeout-content" }, h("p", { style: { fontWeight: '600', color: '#ef4444', margin: '0 0 8px' } }, "Due to inactivity, you have been logged out."), h("p", { style: { fontSize: '13px', color: '#666', margin: '0' } }, "Please log in again to continue working on your tasks."))) : (h("span", null, "Session expiring in ", h("strong", null, this._sessionTimeLeft, "s"))))), h("slot", { name: "body" }, h("slot", null), this.type === 'prompt' && (h("div", { class: "ui-dialog-prompt-container" }, 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 (h("div", { class: { 'ui-dialog-main-container': true, 'has-side-nav': this.layout === 'side-nav' } }, this.layout === 'side-nav' && (h("div", { class: "ui-dialog-side-nav", onScroll: this.handleContentScroll }, h("slot", { name: "side-nav" }))), h("div", { class: { 'ui-dialog-content-wrapper': true, 'type-messagebox': this.type === 'messagebox' }, part: "body", onScroll: this.handleContentScroll }, this.type === 'session' && (h("div", { class: `ui-dialog-session-alert ${this._sessionTimedOut ? 'is-timeout' : ''}` }, h("ui-icon", { name: this._sessionTimedOut ? 'log-out' : 'clock', library: "lucide" }), this._sessionTimedOut ? (h("div", { class: "timeout-content" }, h("p", { style: { fontWeight: '600', color: '#ef4444', margin: '0 0 8px' } }, "Due to inactivity, you have been logged out."), h("p", { style: { fontSize: '13px', color: '#666', margin: '0' } }, "Please log in again to continue working on your tasks."))) : (h("span", null, "Session expiring in ", h("strong", null, this._sessionTimeLeft, "s"))))), h("slot", { name: "body" }, h("slot", null), this.type === 'prompt' && (h("div", { class: "ui-dialog-prompt-container" }, 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 })))))));
@@ -1692,9 +1756,10 @@ export class DialogBox {
             return null;
         return (h("ui-dialog-footer", { class: "ui-dialog-footer-wrapper", part: "footer" }, h("div", { class: "footer-left" }, this.confirmationText && (h("div", { class: "ui-dialog-confirmation" }, h("ui-checkbox", { class: "confirmation-checkbox", checked: this.isConfirmed, label: this.confirmationText, onCheckboxChange: (e) => {
                 this.isConfirmed = e.detail.checked;
-            } }))), h("slot", { name: "footer-left" })), h("div", { class: "footer-right", part: "footer-actions" }, h("slot", { name: "actions" }, resetLabel && (h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleReset }, resetLabel)), cancelLabel && (h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleCancel, disabled: this.cancelDisabled }, cancelLabel)), okLabel && (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))), h("div", { class: "footer-custom-slot" }, h("slot", { name: "footer" })))));
+            } }))), h("slot", { name: "footer-left" })), h("div", { class: "footer-right", part: "footer-actions" }, h("slot", { name: "actions" }, resetLabel && (h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleReset }, resetLabel)), cancelLabel && (h("ui-button", { variant: "outline", size: "md", onButtonClick: this.handleCancel, disabled: this.cancelDisabled }, cancelLabel)), okLabel && (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))), h("div", { class: "footer-custom-slot" }, h("slot", { name: "footer" })))));
     }
     render() {
+        this._dummyVar = this._forceRender;
         if (!this.open && !this.isClosing && !this.keepMounted)
             return null;
         // ── Minimized tray render ──────────────────────────────────────────────
@@ -1740,8 +1805,8 @@ export class DialogBox {
             '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';
@@ -1761,7 +1826,13 @@ export class DialogBox {
         }
         const dialogId = this.el.id || `dialog-idx-${Math.random().toString(36).substr(2, 5)}`;
         const posClass = `position-${this.position}`;
-        return (h(Host, { class: { 'open': this.open, 'minimized': this.minimized, 'dock-peek': this._dockPeek } }, this.minimized && this._dockPeek && (h("div", { class: `ui-peek-panel variant-${this.variant} status-${this.status}`, onClick: (e) => e.stopPropagation() }, this.renderHeader(true), h("div", { class: "ui-dialog-content-wrapper" }, h("slot", { name: "body" }, h("slot", null))))), (!this.minimized || this._dockPeek) && (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}` } }, 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 }, h("div", { class: "ui-dialog-box-container", onPointerUp: this.handlePointerUp }, this.renderHeader(), this.showHeader && h("div", { class: "ui-dialog-divider-line" }), this.progress >= 0 && (h("div", { class: "ui-dialog-progress-container", title: `Progress: ${this.progress}%` }, h("div", { class: "ui-dialog-progress-bar", style: { width: `${this.progress}%` } }))), this.renderStepper(), this.showToolbar && (h("div", { class: "ui-dialog-toolbar" }, h("slot", { name: "toolbar" }))), this.renderBodyContent(), this.showStatusBar && (h("div", { class: "ui-dialog-status-bar" }, h("slot", { name: "status-bar" }))), this.showFooter && h("div", { class: "ui-dialog-divider-line" }), this.renderFooterContent(), this.resizable && !this.maximized && (h("div", { class: "resize-handle", onPointerDown: this.handleResizePointerDown })), this.subOverlay?.visible && (h("div", { class: "ui-dialog-sub-overlay" }, h("div", { class: "sub-overlay-card" }, h("h4", null, this.subOverlay.title), h("p", null, this.subOverlay.message), h("div", { class: "sub-overlay-actions" }, h("ui-button", { variant: "outline", onButtonClick: () => this.subOverlay = null }, "Cancel"), h("ui-button", { variant: "primary", onButtonClick: () => { this.subOverlay.onConfirm(); this.subOverlay = null; } }, "Confirm")))))))))));
+        return (h(Host, { class: { 'open': this.open, 'minimized': this.minimized, 'dock-peek': this._dockPeek } }, this.minimized && this._dockPeek && (h("div", { class: `ui-peek-panel variant-${this.variant} status-${this.status}`, onClick: (e) => e.stopPropagation() }, this.renderHeader(true), h("div", { class: "ui-dialog-content-wrapper" }, h("slot", { name: "body" }, h("slot", null))))), (!this.minimized || this._dockPeek) && (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}` } }, 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 }, h("div", { class: "ui-dialog-box-container", onPointerUp: this.handlePointerUp }, this.renderHeader(), this.showHeader && h("div", { class: "ui-dialog-divider-line" }), this.progress >= 0 && (h("div", { class: "ui-dialog-progress-container", title: `Progress: ${this.progress}%` }, h("div", { class: "ui-dialog-progress-bar", style: { width: `${this.progress}%` } }))), this.renderStepper(), this.showToolbar && (h("div", { class: "ui-dialog-toolbar" }, h("slot", { name: "toolbar" }))), this.renderBodyContent(), this.showStatusBar && (h("div", { class: "ui-dialog-status-bar" }, h("slot", { name: "status-bar" }))), this.showFooter && h("div", { class: "ui-dialog-divider-line" }), this.renderFooterContent(), this.resizable && !this.maximized && (h("div", { class: "resize-handle", onPointerDown: this.handleResizePointerDown })), this.subOverlay?.visible && (h("div", { class: "ui-dialog-sub-overlay" }, h("div", { class: "sub-overlay-card" }, h("h4", null, this.subOverlay.title), h("p", null, this.subOverlay.message), h("div", { class: "sub-overlay-actions" }, h("ui-button", { variant: "outline", onButtonClick: () => this.subOverlay = null }, "Cancel"), h("ui-button", { variant: "primary", onButtonClick: () => { this.subOverlay.onConfirm(); this.subOverlay = null; } }, "Confirm")))))))))));
     }
     triggerConfetti() {
         const count = 200;
@@ -2184,7 +2255,7 @@ export class DialogBox {
                 "mutable": true,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",
@@ -3073,7 +3144,7 @@ export class DialogBox {
             },
             "okDisabled": {
                 "type": "boolean",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "boolean",
                     "resolved": "boolean",
@@ -3404,7 +3475,7 @@ export class DialogBox {
                 "setter": false,
                 "reflect": false,
                 "attribute": "background-color",
-                "defaultValue": "'white'"
+                "defaultValue": "''"
             },
             "progress": {
                 "type": "number",
@@ -3719,6 +3790,7 @@ export class DialogBox {
             "isConfirmed": {},
             "_sessionTimeLeft": {},
             "_termsScrolled": {},
+            "_forceRender": {},
             "isClosing": {},
             "snappedEdge": {},
             "subOverlay": {},
@@ -4016,6 +4088,27 @@ export class DialogBox {
     }
     static get methods() {
         return {
+            "setOkDisabled": {
+                "complexType": {
+                    "signature": "(disabled: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "disabled",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Set the disabled state of the OK button",
+                    "tags": []
+                }
+            },
             "openDialog": {
                 "complexType": {
                     "signature": "() => Promise<boolean>",
@@ -4029,7 +4122,7 @@ export class DialogBox {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Open the dialog and return a promise that resolves to true when OK is clicked, false on Cancel/Close.",
+                    "text": "",
                     "tags": []
                 }
             },
@@ -4285,6 +4378,9 @@ export class DialogBox {
         return [{
                 "propName": "currentStep",
                 "methodName": "currentStepChanged"
+            }, {
+                "propName": "okDisabled",
+                "methodName": "watchOkDisabled"
             }, {
                 "propName": "minimized",
                 "methodName": "minimizedChanged"
@@ -4298,6 +4394,12 @@ export class DialogBox {
     }
     static get listeners() {
         return [{
+                "name": "checkboxChange",
+                "method": "handleCheckboxChange",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "keydown",
                 "method": "handleGlobalShortcuts",
                 "target": "window",

package/dist/collection/components/dialog-header/dialog-header.js

@@ -376,7 +376,7 @@ export class DialogHeader {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",

package/dist/collection/components/dock/dock.css

@@ -254,16 +254,84 @@
 }
 
 /* Dark Theme Support */
+: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, rgba(30, 30, 30, 0.8));
-    border-color: var(--dock-border, rgba(255, 255, 255, 0.1));
+    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, #f3f4f6);
+    color: var(--dock-icon-color, var(--text-primary, #f3f4f6));
   }
 }
 /* Reduced Motion */
@@ -338,6 +406,51 @@
 }
 
 /* Dark Mode Overrides for Premium Features */
+: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);

package/dist/collection/components/dock-host/ui-dock-host.js

@@ -91,7 +91,7 @@ export class UiDockHost {
     }
     render() {
         const isFloating = this.dock === 'float';
-        return (h(Host, { key: 'ae3a9906a747c4ae3d2f504e230b6438261bc699', class: {
+        return (h(Host, { key: '8d6a59b284fc214a749257ff5acb9dee09946f01', class: {
                 'ui-dock-host-layout': true,
                 'is-floating': isFloating,
                 [`is-docked-${this.dock}`]: !isFloating,
@@ -105,14 +105,14 @@ export class UiDockHost {
                 top: '0',
                 left: '0',
                 pointerEvents: isFloating ? 'none' : 'auto' // Allow clicking through layout when only a floating window exists
-            } }, h("div", { key: '9c64f35a9e8225b8ab4a4ca7b1ff516676a1b2aa', class: "dock-main-area", style: { flex: '1', overflow: 'auto', pointerEvents: 'auto' } }, h("slot", { key: '73fa260f89788adb5d6f04fc985052aa31fc1e5d', name: "main" })), h("div", { key: 'a2ec976d0c2268a1022fbf043936671a2932985f', class: {
+            } }, h("div", { key: '369e0b3903a8f7cd8a555258722bf725d97d192e', class: "dock-main-area", style: { flex: '1', overflow: 'auto', pointerEvents: 'auto' } }, h("slot", { key: '6bafee7ed3acd280aed85aa04f3bdd3c61127be8', name: "main" })), h("div", { key: 'f613433f3a5f9c8f57263009cde1602cadeb8878', class: {
                 'dock-panel': true,
                 'floating': isFloating,
                 [this.dock]: !isFloating
             }, style: {
                 ...this.getDockStyle(),
                 pointerEvents: 'auto'
-            } }, h("div", { key: '12ae10fc29ce6cdb243964765cd5e6ea4d01742c', class: "dock-header", onMouseDown: this.onHeaderMouseDown }, h("span", { key: 'c0d6ef086badd0b21ab9c2d66fbf0a226d7be995', class: "dock-header-content" }, h("slot", { key: '09ac92cfe25a30b2213e2aefb26e71b5401dbfd0', name: "header" }, "Dock Host")), 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' })), h("div", { key: 'c7bc3b6668e730f5e466c977e625890ad820cb06', class: "dock-content" }, h("slot", { key: '50e0ce9c5beff1b054732c28bdcad6a01f2bd1ef' })), isFloating && (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' } })))));
+            } }, h("div", { key: 'dfdbe71042ccfed81f762ec3f46e43eac2ca5079', class: "dock-header", onMouseDown: this.onHeaderMouseDown }, h("span", { key: '8300f7a762beaf8388e1cce5d377a824ff5b8af4', class: "dock-header-content" }, h("slot", { key: '80caa80e570a3325171eddfc9691d24f19a2d466', name: "header" }, "Dock Host")), 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' })), h("div", { key: '67a3686b34fc4e9514e3f52e91dfe5641ed06ac6', class: "dock-content" }, h("slot", { key: 'ad8a69994614a0a1c587d50d1a19fe717c9be712' })), isFloating && (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' } })))));
     }
     static get is() { return "ui-dock-host"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/drag-drop/drag-drop.js

@@ -147,7 +147,7 @@ export class UIDragDrop {
         const styles = {
             gap: this.gap,
         };
-        return (h("div", { key: '8610eaa90602aa5ddeebce5afe2437eec3aebc97', class: containerClasses, style: styles, role: "list" }, this.internalItems.map((item, index) => this.renderItem(item, index))));
+        return (h("div", { key: '6b0c0623c0698599b4552cf193275fdd36532f14', class: containerClasses, style: styles, role: "list" }, this.internalItems.map((item, index) => this.renderItem(item, index))));
     }
     static get is() { return "ui-drag-drop"; }
     static get encapsulation() { return "shadow"; }