@design.estate/dees-catalog 1.8.3 → 1.8.4

package/dist_ts_web/elements/dees-toast.demo.js

@@ -1,5 +1,260 @@
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
+import { DeesToast } from './dees-toast.js';
+import './dees-button.js';
 export const demoFunc = async () => {
-    return html `<dees-toast></dees-toast>`;
+    return html `
+    <style>
+      .demo-container {
+        padding: 32px;
+        min-height: 100vh;
+        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+      }
+
+      .demo-section {
+        margin-bottom: 48px;
+      }
+
+      .demo-title {
+        font-size: 24px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .demo-description {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#666', '#aaa')};
+        margin-bottom: 24px;
+      }
+
+      .button-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 16px;
+        margin-bottom: 32px;
+      }
+
+      .theme-toggle {
+        position: fixed;
+        top: 16px;
+        right: 16px;
+        z-index: 100;
+      }
+    </style>
+
+    <div class="demo-container">
+      <dees-button class="theme-toggle" @clicked=${() => {
+        document.body.classList.toggle('bright');
+    }}>Toggle Theme</dees-button>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Toast Types</h2>
+        <p class="demo-description">
+          Different toast types for various notification scenarios. Click any button to show a toast.
+        </p>
+        <div class="button-grid">
+          <dees-button @clicked=${() => {
+        DeesToast.info('This is an informational message');
+    }}>Info Toast</dees-button>
+          
+          <dees-button type="highlighted" @clicked=${() => {
+        DeesToast.success('Operation completed successfully!');
+    }}>Success Toast</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.warning('Please review before proceeding');
+    }}>Warning Toast</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.error('An error occurred while processing');
+    }}>Error Toast</dees-button>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Toast Positions</h2>
+        <p class="demo-description">
+          Toasts can appear in different positions on the screen.
+        </p>
+        <div class="button-grid">
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Top Right Position',
+            type: 'info',
+            position: 'top-right'
+        });
+    }}>Top Right</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Top Left Position',
+            type: 'info',
+            position: 'top-left'
+        });
+    }}>Top Left</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Bottom Right Position',
+            type: 'info',
+            position: 'bottom-right'
+        });
+    }}>Bottom Right</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Bottom Left Position',
+            type: 'info',
+            position: 'bottom-left'
+        });
+    }}>Bottom Left</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Top Center Position',
+            type: 'info',
+            position: 'top-center'
+        });
+    }}>Top Center</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Bottom Center Position',
+            type: 'info',
+            position: 'bottom-center'
+        });
+    }}>Bottom Center</dees-button>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Duration Options</h2>
+        <p class="demo-description">
+          Control how long toasts stay visible. Duration in milliseconds.
+        </p>
+        <div class="button-grid">
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Quick toast (1 second)',
+            type: 'info',
+            duration: 1000
+        });
+    }}>1 Second</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Standard toast (3 seconds)',
+            type: 'info',
+            duration: 3000
+        });
+    }}>3 Seconds (Default)</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Long toast (5 seconds)',
+            type: 'info',
+            duration: 5000
+        });
+    }}>5 Seconds</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.show({
+            message: 'Manual dismiss only (click to close)',
+            type: 'warning',
+            duration: 0
+        });
+    }}>No Auto-Dismiss</dees-button>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Multiple Toasts</h2>
+        <p class="demo-description">
+          Multiple toasts stack automatically. They maintain their order and animate smoothly.
+        </p>
+        <div class="button-grid">
+          <dees-button @clicked=${() => {
+        DeesToast.info('First notification');
+        setTimeout(() => DeesToast.success('Second notification'), 200);
+        setTimeout(() => DeesToast.warning('Third notification'), 400);
+        setTimeout(() => DeesToast.error('Fourth notification'), 600);
+    }}>Show Multiple</dees-button>
+          
+          <dees-button @clicked=${() => {
+        for (let i = 1; i <= 5; i++) {
+            setTimeout(() => {
+                DeesToast.show({
+                    message: `Notification #${i}`,
+                    type: i % 2 === 0 ? 'success' : 'info',
+                    duration: 2000 + (i * 500)
+                });
+            }, i * 100);
+        }
+    }}>Rapid Fire</dees-button>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Real-World Examples</h2>
+        <p class="demo-description">
+          Common use cases for toast notifications in applications.
+        </p>
+        <div class="button-grid">
+          <dees-button @clicked=${async () => {
+        const toast = await DeesToast.show({
+            message: 'Saving changes...',
+            type: 'info',
+            duration: 0
+        });
+        // Simulate save operation
+        setTimeout(() => {
+            toast.dismiss();
+            DeesToast.success('Changes saved successfully!');
+        }, 2000);
+    }}>Save Operation</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.error('Failed to connect to server. Please check your internet connection.');
+    }}>Network Error</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.warning('Your session will expire in 5 minutes');
+    }}>Session Warning</dees-button>
+          
+          <dees-button @clicked=${() => {
+        DeesToast.success('File uploaded successfully!');
+    }}>Upload Complete</dees-button>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Programmatic Control</h2>
+        <p class="demo-description">
+          Advanced control over toast behavior.
+        </p>
+        <div class="button-grid">
+          <dees-button @clicked=${async () => {
+        const toast = await DeesToast.show({
+            message: 'This toast can be dismissed programmatically',
+            type: 'info',
+            duration: 0
+        });
+        setTimeout(() => {
+            toast.dismiss();
+            DeesToast.success('Toast dismissed after 2 seconds');
+        }, 2000);
+    }}>Programmatic Dismiss</dees-button>
+          
+          <dees-button @clicked=${() => {
+        // Using the convenience methods
+        DeesToast.info('Info message', 2000);
+        setTimeout(() => DeesToast.success('Success message', 2000), 500);
+        setTimeout(() => DeesToast.warning('Warning message', 2000), 1000);
+        setTimeout(() => DeesToast.error('Error message', 2000), 1500);
+    }}>Convenience Methods</dees-button>
+        </div>
+      </div>
+    </div>
+  `;
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10b2FzdC5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtdG9hc3QuZGVtby50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFbkQsTUFBTSxDQUFDLE1BQU0sUUFBUSxHQUFHLEtBQUssSUFBSSxFQUFFO0lBQ2pDLE9BQU8sSUFBSSxDQUFBLDJCQUEyQixDQUFDO0FBQ3pDLENBQUMsQ0FBQSJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10b2FzdC5kZW1vLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vdHNfd2ViL2VsZW1lbnRzL2RlZXMtdG9hc3QuZGVtby50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBRSxVQUFVLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUNwRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDNUMsT0FBTyxrQkFBa0IsQ0FBQztBQUUxQixNQUFNLENBQUMsTUFBTSxRQUFRLEdBQUcsS0FBSyxJQUFJLEVBQUU7SUFDakMsT0FBTyxJQUFJLENBQUE7Ozs7O3NCQUtTLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLFNBQVMsQ0FBQzs7Ozs7Ozs7Ozs7aUJBVzdDLFVBQVUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQzs7Ozs7aUJBS2xDLFVBQVUsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFLE1BQU0sQ0FBQzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7bURBb0JBLEdBQUcsRUFBRTtRQUNoRCxRQUFRLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDM0MsQ0FBQzs7Ozs7Ozs7a0NBUTJCLEdBQUcsRUFBRTtRQUMzQixTQUFTLENBQUMsSUFBSSxDQUFDLGtDQUFrQyxDQUFDLENBQUM7SUFDckQsQ0FBQzs7cURBRTBDLEdBQUcsRUFBRTtRQUM5QyxTQUFTLENBQUMsT0FBTyxDQUFDLG1DQUFtQyxDQUFDLENBQUM7SUFDekQsQ0FBQzs7a0NBRXVCLEdBQUcsRUFBRTtRQUMzQixTQUFTLENBQUMsT0FBTyxDQUFDLGlDQUFpQyxDQUFDLENBQUM7SUFDdkQsQ0FBQzs7a0NBRXVCLEdBQUcsRUFBRTtRQUMzQixTQUFTLENBQUMsS0FBSyxDQUFDLG9DQUFvQyxDQUFDLENBQUM7SUFDeEQsQ0FBQzs7Ozs7Ozs7OztrQ0FVdUIsR0FBRyxFQUFFO1FBQzNCLFNBQVMsQ0FBQyxJQUFJLENBQUM7WUFDYixPQUFPLEVBQUUsb0JBQW9CO1lBQzdCLElBQUksRUFBRSxNQUFNO1lBQ1osUUFBUSxFQUFFLFdBQVc7U0FDdEIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7a0NBRXVCLEdBQUcsRUFBRTtRQUMzQixTQUFTLENBQUMsSUFBSSxDQUFDO1lBQ2IsT0FBTyxFQUFFLG1CQUFtQjtZQUM1QixJQUFJLEVBQUUsTUFBTTtZQUNaLFFBQVEsRUFBRSxVQUFVO1NBQ3JCLENBQUMsQ0FBQztJQUNMLENBQUM7O2tDQUV1QixHQUFHLEVBQUU7UUFDM0IsU0FBUyxDQUFDLElBQUksQ0FBQztZQUNiLE9BQU8sRUFBRSx1QkFBdUI7WUFDaEMsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsY0FBYztTQUN6QixDQUFDLENBQUM7SUFDTCxDQUFDOztrQ0FFdUIsR0FBRyxFQUFFO1FBQzNCLFNBQVMsQ0FBQyxJQUFJLENBQUM7WUFDYixPQUFPLEVBQUUsc0JBQXNCO1lBQy9CLElBQUksRUFBRSxNQUFNO1lBQ1osUUFBUSxFQUFFLGFBQWE7U0FDeEIsQ0FBQyxDQUFDO0lBQ0wsQ0FBQzs7a0NBRXVCLEdBQUcsRUFBRTtRQUMzQixTQUFTLENBQUMsSUFBSSxDQUFDO1lBQ2IsT0FBTyxFQUFFLHFCQUFxQjtZQUM5QixJQUFJLEVBQUUsTUFBTTtZQUNaLFFBQVEsRUFBRSxZQUFZO1NBQ3ZCLENBQUMsQ0FBQztJQUNMLENBQUM7O2tDQUV1QixHQUFHLEVBQUU7UUFDM0IsU0FBUyxDQUFDLElBQUksQ0FBQztZQUNiLE9BQU8sRUFBRSx3QkFBd0I7WUFDakMsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsZUFBZTtTQUMxQixDQUFDLENBQUM7SUFDTCxDQUFDOzs7Ozs7Ozs7O2tDQVV1QixHQUFHLEVBQUU7UUFDM0IsU0FBUyxDQUFDLElBQUksQ0FBQztZQUNiLE9BQU8sRUFBRSx3QkFBd0I7WUFDakMsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsSUFBSTtTQUNmLENBQUMsQ0FBQztJQUNMLENBQUM7O2tDQUV1QixHQUFHLEVBQUU7UUFDM0IsU0FBUyxDQUFDLElBQUksQ0FBQztZQUNiLE9BQU8sRUFBRSw0QkFBNEI7WUFDckMsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsSUFBSTtTQUNmLENBQUMsQ0FBQztJQUNMLENBQUM7O2tDQUV1QixHQUFHLEVBQUU7UUFDM0IsU0FBUyxDQUFDLElBQUksQ0FBQztZQUNiLE9BQU8sRUFBRSx3QkFBd0I7WUFDakMsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsSUFBSTtTQUNmLENBQUMsQ0FBQztJQUNMLENBQUM7O2tDQUV1QixHQUFHLEVBQUU7UUFDM0IsU0FBUyxDQUFDLElBQUksQ0FBQztZQUNiLE9BQU8sRUFBRSxzQ0FBc0M7WUFDL0MsSUFBSSxFQUFFLFNBQVM7WUFDZixRQUFRLEVBQUUsQ0FBQztTQUNaLENBQUMsQ0FBQztJQUNMLENBQUM7Ozs7Ozs7Ozs7a0NBVXVCLEdBQUcsRUFBRTtRQUMzQixTQUFTLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLENBQUM7UUFDckMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMscUJBQXFCLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztRQUNoRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxvQkFBb0IsQ0FBQyxFQUFFLEdBQUcsQ0FBQyxDQUFDO1FBQy9ELFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLHFCQUFxQixDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7SUFDaEUsQ0FBQzs7a0NBRXVCLEdBQUcsRUFBRTtRQUMzQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsRUFBRSxFQUFFLENBQUM7WUFDNUIsVUFBVSxDQUFDLEdBQUcsRUFBRTtnQkFDZCxTQUFTLENBQUMsSUFBSSxDQUFDO29CQUNiLE9BQU8sRUFBRSxpQkFBaUIsQ0FBQyxFQUFFO29CQUM3QixJQUFJLEVBQUUsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsTUFBTTtvQkFDdEMsUUFBUSxFQUFFLElBQUksR0FBRyxDQUFDLENBQUMsR0FBRyxHQUFHLENBQUM7aUJBQzNCLENBQUMsQ0FBQztZQUNMLENBQUMsRUFBRSxDQUFDLEdBQUcsR0FBRyxDQUFDLENBQUM7UUFDZCxDQUFDO0lBQ0gsQ0FBQzs7Ozs7Ozs7OztrQ0FVdUIsS0FBSyxJQUFJLEVBQUU7UUFDakMsTUFBTSxLQUFLLEdBQUcsTUFBTSxTQUFTLENBQUMsSUFBSSxDQUFDO1lBQ2pDLE9BQU8sRUFBRSxtQkFBbUI7WUFDNUIsSUFBSSxFQUFFLE1BQU07WUFDWixRQUFRLEVBQUUsQ0FBQztTQUNaLENBQUMsQ0FBQztRQUVILDBCQUEwQjtRQUMxQixVQUFVLENBQUMsR0FBRyxFQUFFO1lBQ2QsS0FBSyxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ2hCLFNBQVMsQ0FBQyxPQUFPLENBQUMsNkJBQTZCLENBQUMsQ0FBQztRQUNuRCxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7SUFDWCxDQUFDOztrQ0FFdUIsR0FBRyxFQUFFO1FBQzNCLFNBQVMsQ0FBQyxLQUFLLENBQUMscUVBQXFFLENBQUMsQ0FBQztJQUN6RixDQUFDOztrQ0FFdUIsR0FBRyxFQUFFO1FBQzNCLFNBQVMsQ0FBQyxPQUFPLENBQUMsdUNBQXVDLENBQUMsQ0FBQztJQUM3RCxDQUFDOztrQ0FFdUIsR0FBRyxFQUFFO1FBQzNCLFNBQVMsQ0FBQyxPQUFPLENBQUMsNkJBQTZCLENBQUMsQ0FBQztJQUNuRCxDQUFDOzs7Ozs7Ozs7O2tDQVV1QixLQUFLLElBQUksRUFBRTtRQUNqQyxNQUFNLEtBQUssR0FBRyxNQUFNLFNBQVMsQ0FBQyxJQUFJLENBQUM7WUFDakMsT0FBTyxFQUFFLDhDQUE4QztZQUN2RCxJQUFJLEVBQUUsTUFBTTtZQUNaLFFBQVEsRUFBRSxDQUFDO1NBQ1osQ0FBQyxDQUFDO1FBRUgsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLEtBQUssQ0FBQyxPQUFPLEVBQUUsQ0FBQztZQUNoQixTQUFTLENBQUMsT0FBTyxDQUFDLGlDQUFpQyxDQUFDLENBQUM7UUFDdkQsQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ1gsQ0FBQzs7a0NBRXVCLEdBQUcsRUFBRTtRQUMzQixnQ0FBZ0M7UUFDaEMsU0FBUyxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDckMsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFDbEUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsaUJBQWlCLEVBQUUsSUFBSSxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUM7UUFDbkUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsZUFBZSxFQUFFLElBQUksQ0FBQyxFQUFFLElBQUksQ0FBQyxDQUFDO0lBQ2pFLENBQUM7Ozs7R0FJUixDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist_ts_web/elements/dees-toast.js

@@ -7,26 +7,304 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
-import { customElement, DeesElement, html, } from '@design.estate/dees-element';
+var DeesToast_1;
+import { customElement, DeesElement, html, css, property, cssManager } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-toast.demo.js';
 let DeesToast = class DeesToast extends DeesElement {
+    static { DeesToast_1 = this; }
+    // STATIC
     static { this.demo = demoFunc; }
+    static { this.toastContainers = new Map(); }
+    static getOrCreateContainer(position) {
+        if (!this.toastContainers.has(position)) {
+            const container = document.createElement('div');
+            container.className = `toast-container toast-container-${position}`;
+            container.style.cssText = `
+        position: fixed;
+        z-index: 10000;
+        pointer-events: none;
+        padding: 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      `;
+            // Position the container
+            switch (position) {
+                case 'top-right':
+                    container.style.top = '0';
+                    container.style.right = '0';
+                    break;
+                case 'top-left':
+                    container.style.top = '0';
+                    container.style.left = '0';
+                    break;
+                case 'bottom-right':
+                    container.style.bottom = '0';
+                    container.style.right = '0';
+                    break;
+                case 'bottom-left':
+                    container.style.bottom = '0';
+                    container.style.left = '0';
+                    break;
+                case 'top-center':
+                    container.style.top = '0';
+                    container.style.left = '50%';
+                    container.style.transform = 'translateX(-50%)';
+                    break;
+                case 'bottom-center':
+                    container.style.bottom = '0';
+                    container.style.left = '50%';
+                    container.style.transform = 'translateX(-50%)';
+                    break;
+            }
+            document.body.appendChild(container);
+            this.toastContainers.set(position, container);
+        }
+        return this.toastContainers.get(position);
+    }
+    static async show(options) {
+        const opts = typeof options === 'string'
+            ? { message: options }
+            : options;
+        const toast = new DeesToast_1();
+        toast.message = opts.message;
+        toast.type = opts.type || 'info';
+        toast.duration = opts.duration || 3000;
+        const container = this.getOrCreateContainer(opts.position || 'top-right');
+        container.appendChild(toast);
+        // Trigger animation
+        await toast.updateComplete;
+        requestAnimationFrame(() => {
+            toast.isVisible = true;
+        });
+        // Auto dismiss
+        if (toast.duration > 0) {
+            setTimeout(() => {
+                toast.dismiss();
+            }, toast.duration);
+        }
+        return toast;
+    }
+    // Convenience methods
+    static info(message, duration) {
+        return this.show({ message, type: 'info', duration });
+    }
+    static success(message, duration) {
+        return this.show({ message, type: 'success', duration });
+    }
+    static warning(message, duration) {
+        return this.show({ message, type: 'warning', duration });
+    }
+    static error(message, duration) {
+        return this.show({ message, type: 'error', duration });
+    }
     constructor() {
         super();
+        // INSTANCE
+        this.message = '';
+        this.type = 'info';
+        this.duration = 3000;
+        this.isVisible = false;
         domtools.elementBasic.setup();
     }
+    static { this.styles = [
+        cssManager.defaultStyles,
+        css `
+      :host {
+        display: block;
+        pointer-events: auto;
+        font-family: 'Geist Sans', sans-serif;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      :host([isvisible]) {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      .toast {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 16px 20px;
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#fff', '#222')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+        min-width: 300px;
+        max-width: 500px;
+        cursor: pointer;
+      }
+
+      .toast:hover {
+        transform: scale(1.02);
+      }
+
+      .icon {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .icon svg {
+        width: 100%;
+        height: 100%;
+      }
+
+      .message {
+        flex: 1;
+        font-size: 14px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('#333', '#fff')};
+      }
+
+      .close {
+        flex-shrink: 0;
+        width: 16px;
+        height: 16px;
+        opacity: 0.5;
+        cursor: pointer;
+        transition: opacity 0.2s;
+      }
+
+      .close:hover {
+        opacity: 1;
+      }
+
+      .close svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+      }
+
+      /* Type-specific styles */
+      :host([type="info"]) .icon {
+        color: #0084ff;
+      }
+
+      :host([type="success"]) .icon {
+        color: #22c55e;
+      }
+
+      :host([type="warning"]) .icon {
+        color: #f59e0b;
+      }
+
+      :host([type="error"]) .icon {
+        color: #ef4444;
+      }
+
+      /* Progress bar */
+      .progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 3px;
+        background: currentColor;
+        opacity: 0.2;
+        border-radius: 0 0 8px 8px;
+        overflow: hidden;
+      }
+
+      .progress-bar {
+        height: 100%;
+        background: currentColor;
+        opacity: 0.8;
+        transform-origin: left;
+        animation: progress linear forwards;
+      }
+
+      @keyframes progress {
+        from {
+          transform: scaleX(1);
+        }
+        to {
+          transform: scaleX(0);
+        }
+      }
+    `
+    ]; }
     render() {
+        const icons = {
+            info: html `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd"/>
+      </svg>`,
+            success: html `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
+      </svg>`,
+            warning: html `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+      </svg>`,
+            error: html `<svg viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+      </svg>`
+        };
         return html `
-      ${domtools.elementBasic.styles}
-      <style></style>
-      
+      <div class="toast" @click=${this.dismiss}>
+        <div class="icon">
+          ${icons[this.type]}
+        </div>
+        <div class="message">${this.message}</div>
+        <div class="close">
+          <svg viewBox="0 0 16 16" fill="currentColor">
+            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
+          </svg>
+        </div>
+        ${this.duration > 0 ? html `
+          <div class="progress">
+            <div class="progress-bar" style="animation-duration: ${this.duration}ms"></div>
+          </div>
+        ` : ''}
+      </div>
     `;
     }
+    async dismiss() {
+        this.isVisible = false;
+        await new Promise(resolve => setTimeout(resolve, 300));
+        this.remove();
+        // Clean up empty containers
+        const container = this.parentElement;
+        if (container && container.children.length === 0) {
+            container.remove();
+            for (const [position, cont] of DeesToast_1.toastContainers.entries()) {
+                if (cont === container) {
+                    DeesToast_1.toastContainers.delete(position);
+                    break;
+                }
+            }
+        }
+    }
+    firstUpdated() {
+        // Set the type attribute for CSS
+        this.setAttribute('type', this.type);
+    }
 };
-DeesToast = __decorate([
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DeesToast.prototype, "message", void 0);
+__decorate([
+    property({ type: String }),
+    __metadata("design:type", String)
+], DeesToast.prototype, "type", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Number)
+], DeesToast.prototype, "duration", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Boolean)
+], DeesToast.prototype, "isVisible", void 0);
+DeesToast = DeesToast_1 = __decorate([
     customElement('dees-toast'),
     __metadata("design:paramtypes", [])
 ], DeesToast);
 export { DeesToast };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10b2FzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLXRvYXN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQUFBLE9BQU8sRUFBRSxhQUFhLEVBQUUsV0FBVyxFQUF1QixJQUFJLEdBQW1CLE1BQU0sNkJBQTZCLENBQUM7QUFFckgsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFTekMsSUFBTSxTQUFTLEdBQWYsTUFBTSxTQUFVLFNBQVEsV0FBVzthQUMxQixTQUFJLEdBQUcsUUFBUSxBQUFYLENBQVk7SUFFOUI7UUFDRSxLQUFLLEVBQUUsQ0FBQztRQUNSLFFBQVEsQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLENBQUM7SUFDaEMsQ0FBQztJQUVNLE1BQU07UUFDWCxPQUFPLElBQUksQ0FBQTtRQUNQLFFBQVEsQ0FBQyxZQUFZLENBQUMsTUFBTTs7O0tBRy9CLENBQUM7SUFDSixDQUFDOztBQWRVLFNBQVM7SUFEckIsYUFBYSxDQUFDLFlBQVksQ0FBQzs7R0FDZixTQUFTLENBZXJCIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy10b2FzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uL3RzX3dlYi9lbGVtZW50cy9kZWVzLXRvYXN0LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEVBQUUsYUFBYSxFQUFFLFdBQVcsRUFBdUIsSUFBSSxFQUFFLEdBQUcsRUFBRSxRQUFRLEVBQUUsVUFBVSxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFL0gsT0FBTyxLQUFLLFFBQVEsTUFBTSw4QkFBOEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFtQnpDLElBQU0sU0FBUyxHQUFmLE1BQU0sU0FBVSxTQUFRLFdBQVc7O0lBQ3hDLFNBQVM7YUFDSyxTQUFJLEdBQUcsUUFBUSxBQUFYLENBQVk7YUFFZixvQkFBZSxHQUFHLElBQUksR0FBRyxFQUFpQyxBQUEzQyxDQUE0QztJQUVsRSxNQUFNLENBQUMsb0JBQW9CLENBQUMsUUFBdUI7UUFDekQsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsR0FBRyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUM7WUFDeEMsTUFBTSxTQUFTLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUNoRCxTQUFTLENBQUMsU0FBUyxHQUFHLG1DQUFtQyxRQUFRLEVBQUUsQ0FBQztZQUNwRSxTQUFTLENBQUMsS0FBSyxDQUFDLE9BQU8sR0FBRzs7Ozs7Ozs7T0FRekIsQ0FBQztZQUVGLHlCQUF5QjtZQUN6QixRQUFRLFFBQVEsRUFBRSxDQUFDO2dCQUNqQixLQUFLLFdBQVc7b0JBQ2QsU0FBUyxDQUFDLEtBQUssQ0FBQyxHQUFHLEdBQUcsR0FBRyxDQUFDO29CQUMxQixTQUFTLENBQUMsS0FBSyxDQUFDLEtBQUssR0FBRyxHQUFHLENBQUM7b0JBQzVCLE1BQU07Z0JBQ1IsS0FBSyxVQUFVO29CQUNiLFNBQVMsQ0FBQyxLQUFLLENBQUMsR0FB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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -26,7 +26,7 @@
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.0.15",
     "@tsclass/tsclass": "^9.2.0",
-    "@webcontainer/api": "1.6.1",
+    "@webcontainer/api": "1.2.0",
     "apexcharts": "^4.7.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",