1.10.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "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",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.3",
     "@design.estate/dees-element": "^2.0.45",
-    "@design.estate/dees-wcctools": "^1.0.101",
+    "@design.estate/dees-wcctools": "^1.1.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
@@ -36,7 +36,7 @@
     "apexcharts": "^4.7.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.523.0",
+    "lucide": "^0.525.0",
     "monaco-editor": "^0.52.2",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.0.45
         version: 2.0.45
       '@design.estate/dees-wcctools':
-        specifier: ^1.0.101
+        specifier: ^1.1.0
-        version: 1.0.101
+        version: 1.1.0
       '@fortawesome/fontawesome-svg-core':
         specifier: ^6.7.2
         version: 6.7.2
@@ -72,8 +72,8 @@ importers:
         specifier: ^4.5.1
         version: 4.5.1
       lucide:
-        specifier: ^0.523.0
+        specifier: ^0.525.0
-        version: 0.523.0
+        version: 0.525.0
       monaco-editor:
         specifier: ^0.52.2
         version: 0.52.2
@@ -323,8 +323,8 @@ packages:
   '@design.estate/dees-element@2.0.45':
     resolution: {integrity: sha512-dj8nOOtfwvqEtQceTXQQ5IEy75HIFZ+iuDxPeIynLedYpxtHPsxFrHW8IQ7/ad9MNvVO0kTnlwUOmkjylul+DA==}
 
-  '@design.estate/dees-wcctools@1.0.101':
+  '@design.estate/dees-wcctools@1.1.0':
-    resolution: {integrity: sha512-6j2kGORf7egRkHGwQUNuxSdTe2+6y7eX3+dVomBLeWczH30KhPi1jJKINSt/MqkpB5i7o3kQwvvWA6JYBOjXcg==}
+    resolution: {integrity: sha512-eniG2JsGgcVXQLkSE6M7azJ7av/UeTvvzhE6s3JbcIieHd589SCxQqF+BhlOyKqzJQ1n5jJ7KKdmhvQU5bbdtg==}
 
   '@emnapi/core@1.4.3':
     resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
@@ -3481,8 +3481,8 @@ packages:
     resolution: {integrity: sha512-MhWWlVnuab1RG5/zMRRcVGXZLCXrZTgfwMikgzCegsPnG62yDQo5JnqKkrK4jO5iKqDAZGItAqN5CtKBCBWRUA==}
     engines: {node: '>=16.14'}
 
-  lucide@0.523.0:
+  lucide@0.525.0:
-    resolution: {integrity: sha512-tiIp5xEP4kpeulfT1J+a/NEaIZGT1k6RyMS3evQWfHRhJvR8uTat/+lN4wnX5qIexOwN02BhmcyMHBNwt+jkLA==}
+    resolution: {integrity: sha512-sfehWlaE/7NVkcEQ4T9JD3eID8RNMIGJBBUq9wF3UFiJIrcMKRbU3g1KGfDk4svcW7yw8BtDLXaXo02scDtUYQ==}
 
   make-dir@3.1.0:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -5588,7 +5588,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@1.0.101':
+  '@design.estate/dees-wcctools@1.1.0':
     dependencies:
       '@design.estate/dees-domtools': 2.3.3
       '@design.estate/dees-element': 2.0.45
@@ -5905,10 +5905,8 @@ snapshots:
     transitivePeerDependencies:
       - '@nuxt/kit'
       - '@swc/helpers'
-      - bufferutil
       - react
       - supports-color
-      - utf-8-validate
       - vue
 
   '@hapi/bourne@3.0.0': {}
@@ -9564,7 +9562,7 @@ snapshots:
 
   lru-cache@8.0.5: {}
 
-  lucide@0.523.0: {}
+  lucide@0.525.0: {}
 
   make-dir@3.1.0:
     dependencies:

ts_web/elements/dees-chips.demo.ts

@@ -1,41 +1,112 @@
-import { html } from '@design.estate/dees-element';
+import { html, cssManager } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
   <style>
     .demoContainer {
       display: flex;
       flex-direction: column;
-      align-items: center;
+      gap: 32px;
-      justify-content: center;
+      padding: 48px;
-      height: 100%;
+      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
-      background: #222;
+      min-height: 100vh;
+    }
+    
+    .section {
+      background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+      border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      border-radius: 8px;
+      padding: 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+    }
+    
+    .section-description {
+      font-size: 14px;
+      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      margin-bottom: 16px;
     }
   </style>
   <div class="demoContainer">
+    <div class="section">
+      <div class="section-title">Non-Selectable Chips</div>
+      <div class="section-description">Basic chips without selection capability. Use for display-only tags.</div>
       <dees-chips
         selectionMode="none"
         .selectableChips=${[
-        { key: 'account1', value: 'Payment Account 1' },
+          { key: 'status', value: 'Active' },
-        { key: 'account2', value: 'PaymentAccount2' },
+          { key: 'tier', value: 'Premium' },
-        { key: 'account3', value: 'Payment Account 3' },
+          { key: 'region', value: 'EU-West' },
+          { key: 'type', value: 'Enterprise' },
         ]}
       ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Single Selection Chips</div>
+      <div class="section-description">Click to select one chip at a time. Useful for filters and options.</div>
+      <dees-chips
+        selectionMode="single"
+        .selectableChips=${[
+          { key: 'all', value: 'All Projects' },
+          { key: 'active', value: 'Active' },
+          { key: 'archived', value: 'Archived' },
+          { key: 'drafts', value: 'Drafts' },
+        ]}
+      ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Multiple Selection Chips</div>
+      <div class="section-description">Select multiple chips simultaneously. Great for tag selection.</div>
+      <dees-chips
+        selectionMode="multiple"
+        .selectableChips=${[
+          { key: 'js', value: 'JavaScript' },
+          { key: 'ts', value: 'TypeScript' },
+          { key: 'react', value: 'React' },
+          { key: 'vue', value: 'Vue' },
+          { key: 'angular', value: 'Angular' },
+          { key: 'node', value: 'Node.js' },
+        ]}
+      ></dees-chips>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Removable Chips with Keys</div>
+      <div class="section-description">Chips with remove buttons and key-value pairs. Perfect for dynamic lists.</div>
       <dees-chips
         selectionMode="single"
         chipsAreRemovable
         .selectableChips=${[
-        { key: 'account1', value: 'Payment Account 1' },
+          { key: 'env', value: 'Production' },
-        { key: 'account2', value: 'PaymentAccount2' },
+          { key: 'version', value: '2.4.1' },
-        { key: 'account3', value: 'Payment Account 3' },
+          { key: 'branch', value: 'main' },
-      ]}
+          { key: 'author', value: 'John Doe' },
-    ></dees-chips>
-    <dees-chips
-      selectionMode="multiple"
-      .selectableChips=${[
-        { key: 'account1', value: 'Payment Account 1' },
-        { key: 'account2', value: 'PaymentAccount2' },
-        { key: 'account3', value: 'Payment Account 3' },
         ]}
       ></dees-chips>
     </div>
+    
+    <div class="section">
+      <div class="section-title">Mixed Content Example</div>
+      <div class="section-description">Combining different chip types for complex UIs.</div>
+      <dees-chips
+        selectionMode="multiple"
+        chipsAreRemovable
+        .selectableChips=${[
+          { key: 'priority', value: 'High' },
+          { key: 'status', value: 'In Progress' },
+          { key: 'bug', value: 'Bug' },
+          { key: 'feature', value: 'Feature' },
+          { key: 'sprint', value: 'Sprint 23' },
+          { key: 'assignee', value: 'Alice' },
+        ]}
+      ></dees-chips>
+    </div>
+  </div>
 `;

ts_web/elements/dees-chips.ts

@@ -60,52 +60,93 @@ export class DeesChips extends DeesElement {
 
       .mainbox {
         user-select: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
       }
 
       .chip {
-        border-top: ${cssManager.bdTheme('1px solid #CCC', '1px solid #444')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        background: #333333;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
         display: inline-flex;
-        height: 20px;
+        align-items: center;
-        line-height: 20px;
+        height: 32px;
-        padding: 0px 8px;
+        padding: 0px 12px;
-        font-size: 12px;
+        font-size: 14px;
-        color: #fff;
+        font-weight: 500;
-        border-radius: 40px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-        margin-right: 4px;
+        border-radius: 6px;
-        margin-bottom: 4px;
         position: relative;
-        overflow: hidden;
+        cursor: pointer;
-        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
+        transition: all 0.15s ease;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
       }
 
       .chip:hover {
-        background: #666666;
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
+      }
+
+      .chip:active {
+        transform: scale(0.98);
       }
 
       .chip.selected {
-        background: #00a3ff;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        color: #ffffff;
+      }
+
+      .chip.selected:hover {
+        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
       }
 
       .chipKey {
-        background: rgba(0, 0, 0, 0.3);
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
-        height: 100%;
+        height: 20px;
-        display: inline-block;
+        line-height: 20px;
+        display: inline-flex;
+        align-items: center;
         margin-left: -8px;
-        padding-left: 8px;
+        padding: 0px 8px;
-        padding-right: 8px;
         margin-right: 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .chip.selected .chipKey {
+        background: rgba(255, 255, 255, 0.2);
+        color: rgba(255, 255, 255, 0.9);
       }
 
       dees-icon {
-        padding: 0px 6px 0px 4px;
+        display: flex;
-        margin-left: 4px;
+        align-items: center;
-        margin-right: -8px;
+        justify-content: center;
-        background: rgba(0, 0, 0, 0.3);
+        width: 16px;
+        height: 16px;
+        margin-left: 8px;
+        margin-right: -6px;
+        border-radius: 3px;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+
+      .chip.selected dees-icon {
+        color: rgba(255, 255, 255, 0.8);
       }
 
       dees-icon:hover {
-        background: #e4002b;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#ef4444', '#ef4444')};
+      }
+
+      .chip.selected dees-icon:hover {
+        background: rgba(255, 255, 255, 0.2);
+        color: #ffffff;
       }
     `,
   ];
@@ -139,20 +180,26 @@ export class DeesChips extends DeesElement {
   }
 
   public async firstUpdated() {
-    if (!this.textContent) {
+    // Component initialized
-      this.textContent = 'Button';
-      this.performUpdate();
-    }
   }
 
   private isSelected(chip: Tag): boolean {
     if (this.selectionMode === 'single') {
-      return this.selectedChip?.key === chip.key;
+      return this.selectedChip ? this.isSameChip(this.selectedChip, chip) : false;
     } else {
-      return this.selectedChips.some((selected) => selected.key === chip.key);
+      return this.selectedChips.some((selected) => this.isSameChip(selected, chip));
     }
   }
   
+  private isSameChip(chip1: Tag, chip2: Tag): boolean {
+    // If both have keys, compare by key
+    if (chip1.key && chip2.key) {
+      return chip1.key === chip2.key;
+    }
+    // Otherwise compare by value (and key if present)
+    return chip1.value === chip2.value && chip1.key === chip2.key;
+  }
+
   public async selectChip(chip: Tag) {
     if (this.selectionMode === 'none') {
       return;
@@ -168,7 +215,7 @@ export class DeesChips extends DeesElement {
       }
     } else if (this.selectionMode === 'multiple') {
       if (this.isSelected(chip)) {
-        this.selectedChips = this.selectedChips.filter((selected) => selected.key !== chip.key);
+        this.selectedChips = this.selectedChips.filter((selected) => !this.isSameChip(selected, chip));
       } else {
         this.selectedChips = [...this.selectedChips, chip];
       }
@@ -179,13 +226,13 @@ export class DeesChips extends DeesElement {
 
   public removeChip(chipToRemove: Tag): void {
     // Remove the chip from selectableChips
-    this.selectableChips = this.selectableChips.filter((chip) => chip.key !== chipToRemove.key);
+    this.selectableChips = this.selectableChips.filter((chip) => !this.isSameChip(chip, chipToRemove));
 
     // Remove the chip from selectedChips if present
-    this.selectedChips = this.selectedChips.filter((chip) => chip.key !== chipToRemove.key);
+    this.selectedChips = this.selectedChips.filter((chip) => !this.isSameChip(chip, chipToRemove));
 
     // If the removed chip was the selectedChip, set selectedChip to null
-    if (this.selectedChip && this.selectedChip.key === chipToRemove.key) {
+    if (this.selectedChip && this.isSameChip(this.selectedChip, chipToRemove)) {
       this.selectedChip = null;
     }
 

ts_web/elements/dees-dataview-codebox.demo.ts

@@ -1,18 +1,199 @@
-import { html } from '@design.estate/dees-element';
+import { html, cssManager } from '@design.estate/dees-element';
 
-export const demoFunc = () => html` <style>
+export const demoFunc = () => html`
+  <style>
     .demoWrapper {
       box-sizing: border-box;
-  position: absolute;
+      position: relative;
       width: 100%;
-  height: 100%;
+      min-height: 100vh;
-  padding: 20px;
+      padding: 48px;
-  background: none;
+      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+    }
+    
+    .section {
+      max-width: 900px;
+      width: 100%;
+      margin: 0 auto;
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+    }
+    
+    .section-description {
+      font-size: 14px;
+      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      margin-bottom: 16px;
     }
   </style>
   <div class="demoWrapper">
+    <div class="section">
+      <div class="section-title">TypeScript Code Example</div>
+      <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
       <dees-dataview-codebox proglang="typescript">
-  import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
+interface User {
-  console.log('nice one'); }
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
+}
+
+class UserService {
+  private users: User[] = [];
+  
+  constructor(private apiUrl: string) {
+    console.log('UserService initialized');
+  }
+  
+  async getUsers(): Promise<User[]> {
+    try {
+      const response = await fetch(this.apiUrl);
+      const data = await response.json();
+      return data.users;
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      return [];
+    }
+  }
+  
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+}
+
+// Usage example
+const service = new UserService('https://api.example.com/users');
+const users = await service.getUsers();
+console.log('Found users:', users.length);
       </dees-dataview-codebox>
-</div>`
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JavaScript Example</div>
+      <div class="section-description">Modern JavaScript with ES6+ features.</div>
+      <dees-dataview-codebox proglang="javascript">
+// Array manipulation examples
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+const filtered = numbers.filter(n => n > 3);
+
+// Object destructuring
+const user = { name: 'John', age: 30, city: 'New York' };
+const { name, age } = user;
+
+// Promise handling
+const fetchData = async (url) => {
+  const response = await fetch(url);
+  return response.json();
+};
+
+// Modern syntax
+const greet = (name = 'World') => \`Hello, \${name}!\`;
+console.log(greet('ShadCN'));
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Python Example</div>
+      <div class="section-description">Python code with classes and type hints.</div>
+      <dees-dataview-codebox proglang="python">
+from typing import List, Optional
+import asyncio
+
+class DataProcessor:
+    """A simple data processor class"""
+    
+    def __init__(self, name: str):
+        self.name = name
+        self.data: List[dict] = []
+    
+    async def process_data(self, items: List[dict]) -> List[dict]:
+        """Process data items asynchronously"""
+        results = []
+        for item in items:
+            # Simulate async processing
+            await asyncio.sleep(0.1)
+            results.append({
+                'id': item.get('id'),
+                'processed': True,
+                'processor': self.name
+            })
+        return results
+    
+    def get_summary(self) -> dict:
+        return {
+            'processor': self.name,
+            'items_processed': len(self.data)
+        }
+
+# Usage
+processor = DataProcessor("Main")
+data = await processor.process_data([{'id': 1}, {'id': 2}])
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">CSS Example</div>
+      <div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
+      <dees-dataview-codebox proglang="css">
+/* Modern CSS with custom properties */
+:root {
+  --primary-color: #3b82f6;
+  --secondary-color: #10b981;
+  --background: #ffffff;
+  --text-color: #09090b;
+  --border-radius: 6px;
+}
+
+.card {
+  background: var(--background);
+  border: 1px solid #e5e7eb;
+  border-radius: var(--border-radius);
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JSON Example</div>
+      <div class="section-description">JSON configuration with proper formatting.</div>
+      <dees-dataview-codebox proglang="json">
+{
+  "name": "@design.estate/dees-catalog",
+  "version": "1.10.7",
+  "description": "A comprehensive catalog of web components",
+  "main": "dist_ts_web/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "test": "tstest test/ --web --verbose"
+  },
+  "dependencies": {
+    "@design.estate/dees-element": "^2.0.45",
+    "highlight.js": "^11.9.0"
+  }
+}
+      </dees-dataview-codebox>
+    </div>
+  </div>
+`

ts_web/elements/dees-dataview-codebox.ts

@@ -53,23 +53,23 @@ export class DeesDataviewCodebox extends DeesElement {
         }
         .mainbox {
           position: relative;
-          color: ${this.goBright ? '#333333' : '#ffffff'};
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-          border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-          background: ${this.goBright ? '#ffffff' : '#191919'};
+          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-          border-radius: 16px;
+          border-radius: 6px;
           overflow: hidden;
         }
 
         .appbar {
           position: relative;
-          color: ${cssManager.bdTheme('#333', '#ccc')};
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#ffffff', '#161616')};
+          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          height: 24px;
+          height: 32px;
           display: flex;
-          font-size: 12px;
+          font-size: 13px;
-          line-height: 24px;
+          line-height: 32px;
           justify-content: center;
           align-items: center;
         }
@@ -82,31 +82,38 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          color: ${cssManager.bdTheme('#333', '#ccc')};
+          position: relative;
-          background: ${cssManager.bdTheme('#ffffff', '#161616')};
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
+          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          height: 24px;
+          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          height: 28px;
           font-size: 12px;
-          line-height: 24px;
+          line-height: 28px;
-          text-align: right;
+          display: flex;
-          padding-right: 100px;
+          justify-content: flex-end;
+          align-items: stretch;
+          overflow: hidden;
+        }
+
+        .spacesLabel {
+          padding: 0 16px;
+          display: flex;
+          align-items: center;
         }
 
         .languageLabel {
-          color: ${cssManager.bdTheme('#333', '#ccc')};
+          color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
           font-size: 12px;
-          line-height: 24px;
+          line-height: 28px;
-          z-index: 10;
+          background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-          background: #6596ff20;
+          padding: 0px 16px;
-          display: inline-block;
+          font-weight: 500;
-          position: absolute;
+          display: flex;
-          bottom: 0px;
+          align-items: center;
-          right: 0px;
-          padding: 0px 16px 0px 8px;
         }
 
         .hljs-keyword {
-          color: #ff65ec;
+          color: ${cssManager.bdTheme('#dc2626', '#f87171')};
         }
 
         .codegrid {
@@ -116,10 +123,10 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .lineNumbers {
-          color: ${this.goBright ? '#acacac' : '#666666'};
+          color: ${cssManager.bdTheme('#71717a', '#52525b')};
-          padding: 30px 16px 0px 0px;
+          padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
+          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         }
 
         .lineCounter:last-child {
@@ -129,11 +136,11 @@ export class DeesDataviewCodebox extends DeesElement {
         pre {
           overflow-x: auto;
           margin: 0px;
-          padding: 30px 40px;
+          padding: 24px 24px;
         }
 
         code {
-          font-weight: ${this.goBright ? '400' : '300'};
+          font-weight: 400;
           padding: 0px;
           margin: 0px;
         }
@@ -147,23 +154,39 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .hljs-string {
-          color: #ffa465;
+          color: ${cssManager.bdTheme('#059669', '#10b981')};
         }
 
         .hljs-built_in {
-          color: #65ff6a;
+          color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
         }
 
         .hljs-function {
-          color: ${this.goBright ? '#2765DF' : '#6596ff'};
+          color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
         }
 
         .hljs-params {
-          color: ${this.goBright ? '#3DB420' : '#65d5ff'};
+          color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
         }
 
         .hljs-comment {
-          color: ${this.goBright ? '#EF9300' : '#ffd765'};
+          color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        }
+
+        .hljs-number {
+          color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+        }
+
+        .hljs-literal {
+          color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+        }
+
+        .hljs-attr {
+          color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
+        }
+
+        .hljs-variable {
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
       <div
@@ -198,7 +221,7 @@ export class DeesDataviewCodebox extends DeesElement {
           <pre><code></code></pre>
         </div>
         <div class="bottomBar">
-          Spaces: 2
+          <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
       </div>

ts_web/elements/dees-input-multitoggle.demo.ts

@@ -1,4 +1,4 @@
-import { html, css } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 
 export const demoFunc = () => html`
   <dees-demowrapper>
@@ -7,10 +7,31 @@ export const demoFunc = () => html`
         .demo-container {
           display: flex;
           flex-direction: column;
-          gap: 24px;
+          gap: 32px;
+          padding: 48px;
+          background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+          min-height: 100vh;
+        }
+        
+        .section {
+          background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-radius: 8px;
           padding: 24px;
-          max-width: 1200px;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-          margin: 0 auto;
+        }
+        
+        .section-title {
+          font-size: 18px;
+          font-weight: 600;
+          margin-bottom: 8px;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        }
+        
+        .section-description {
+          font-size: 14px;
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          margin-bottom: 24px;
         }
         
         .settings-grid {
@@ -28,7 +49,10 @@ export const demoFunc = () => html`
     </style>
     
     <div class="demo-container">
-      <dees-panel .title=${'Multi-Option Toggle'} .subtitle=${'Select from multiple options with a sliding indicator'}>
+      <div class="section">
+        <div class="section-title">Multi-Option Toggle</div>
+        <div class="section-description">Select from multiple options with a smooth sliding indicator animation.</div>
+        
         <dees-input-multitoggle
           .label=${'Display Mode'}
           .description=${'Choose how content is displayed'}
@@ -36,15 +60,20 @@ export const demoFunc = () => html`
           .selectedOption=${'Grid View'}
         ></dees-input-multitoggle>
         
+        <br><br>
+        
         <dees-input-multitoggle
           .label=${'T-Shirt Size'}
           .description=${'Select your preferred size'}
           .options=${['XS', 'S', 'M', 'L', 'XL', 'XXL']}
           .selectedOption=${'M'}
         ></dees-input-multitoggle>
-      </dees-panel>
+      </div>
+      
+      <div class="section">
+        <div class="section-title">Boolean Toggle</div>
+        <div class="section-description">Simple on/off switches with customizable labels for clearer context.</div>
         
-      <dees-panel .title=${'Boolean Toggle'} .subtitle=${'Simple on/off switches with custom labels'}>
         <dees-input-multitoggle
           .label=${'Notifications'}
           .description=${'Enable or disable push notifications'}
@@ -52,6 +81,8 @@ export const demoFunc = () => html`
           .selectedOption=${'true'}
         ></dees-input-multitoggle>
         
+        <br><br>
+        
         <dees-input-multitoggle
           .label=${'Theme Mode'}
           .description=${'Switch between light and dark theme'}
@@ -60,13 +91,15 @@ export const demoFunc = () => html`
           .booleanFalseName=${'Light'}
           .selectedOption=${'Dark'}
         ></dees-input-multitoggle>
-      </dees-panel>
+      </div>
+      
+      <div class="section">
+        <div class="section-title">Settings Grid</div>
+        <div class="section-description">Configuration options arranged in a responsive grid layout.</div>
         
-      <dees-panel .title=${'Settings Panel'} .subtitle=${'Configuration options in a horizontal layout'}>
         <div class="settings-grid">
           <dees-input-multitoggle
             .label=${'Auto-Save'}
-            .layoutMode=${'horizontal'}
             .type=${'boolean'}
             .booleanTrueName=${'Enabled'}
             .booleanFalseName=${'Disabled'}
@@ -75,30 +108,30 @@ export const demoFunc = () => html`
           
           <dees-input-multitoggle
             .label=${'Language'}
-            .layoutMode=${'horizontal'}
             .options=${['English', 'German', 'French', 'Spanish']}
             .selectedOption=${'English'}
           ></dees-input-multitoggle>
           
           <dees-input-multitoggle
             .label=${'Quality'}
-            .layoutMode=${'horizontal'}
             .options=${['Low', 'Medium', 'High', 'Ultra']}
             .selectedOption=${'High'}
           ></dees-input-multitoggle>
           
           <dees-input-multitoggle
             .label=${'Privacy'}
-            .layoutMode=${'horizontal'}
             .type=${'boolean'}
             .booleanTrueName=${'Private'}
             .booleanFalseName=${'Public'}
             .selectedOption=${'Private'}
           ></dees-input-multitoggle>
         </div>
-      </dees-panel>
+      </div>
+      
+      <div class="section">
+        <div class="section-title">States & Form Integration</div>
+        <div class="section-description">Examples of disabled states and integration within forms.</div>
         
-      <dees-panel .title=${'States & Form Integration'} .subtitle=${'Disabled states and form usage'}>
         <dees-input-multitoggle
           .label=${'Account Type'}
           .description=${'This setting is locked'}
@@ -107,6 +140,8 @@ export const demoFunc = () => html`
           .disabled=${true}
         ></dees-input-multitoggle>
         
+        <br><br>
+        
         <dees-form>
           <dees-input-text .label=${'Project Name'} .required=${true}></dees-input-text>
           <dees-input-multitoggle
@@ -122,7 +157,7 @@ export const demoFunc = () => html`
             .selectedOption=${'MIT'}
           ></dees-input-multitoggle>
         </dees-form>
-      </dees-panel>
+      </div>
     </div>
   </dees-demowrapper>
 `;

ts_web/elements/dees-input-multitoggle.ts

@@ -57,9 +57,12 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     } else {
       this.selectedOption = val as string;
     }
+    this.requestUpdate();
     // Defer indicator update to next frame if component not yet updated
     if (this.hasUpdated) {
+      requestAnimationFrame(() => {
         this.setIndicator();
+      });
     }
   }
 
@@ -68,59 +71,71 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     cssManager.defaultStyles,
     css`
       :host {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         user-select: none;
       }
 
-
       .selections {
         position: relative;
-        display: flex;
+        display: inline-flex;
-        flex-direction: row;
+        align-items: center;
-        flex-wrap: nowrap;
+        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
-        background: ${cssManager.bdTheme('#fff', '#222')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        width: min-content;
+        padding: 4px;
-        border-radius: 20px;
+        border-radius: 8px;
-        height: 32px;
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-        border-top: 1px solid ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
       }
 
       .option {
-        color: ${cssManager.bdTheme('#666', '#999')};
         position: relative;
-        padding: 0px 16px;
+        padding: 8px 20px;
-        line-height: 32px;
+        border-radius: 6px;
-        cursor: default;
+        cursor: pointer;
-        width: min-content; /* Make the width as per the content */
+        white-space: nowrap;
-        white-space: nowrap; /* Prevent text wrapping */
+        transition: color 0.2s ease;
-        transition: all 0.1s;
         font-size: 14px;
-        transform: translateY(-1px);
+        font-weight: 500;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        line-height: 1;
+        z-index: 2;
       }
 
       .option:hover {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
       }
 
       .option.selected {
-        color: ${cssManager.bdTheme('#fff', '#fff')};
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
       }
 
       .indicator {
         opacity: 0;
         position: absolute;
-        height: 24px;
+        height: calc(100% - 8px);
-        left: 4px;
+        top: 4px;
-        top: 3px;
+        border-radius: 6px;
-        border-radius: 16px;
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.15)', 'rgba(59, 130, 246, 0.15)')};
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        min-width: 24px;
+        z-index: 1;
-        transition: all 0.1s ease-in-out;
       }
       
       .indicator.no-transition {
         transition: none;
       }
+      
+      :host([disabled]) .selections {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) .option {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      :host([disabled]) .indicator {
+        background: ${cssManager.bdTheme('rgba(113, 113, 122, 0.15)', 'rgba(113, 113, 122, 0.15)')};
+      }
     `,
   ];
 
@@ -148,6 +163,14 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     // Initialize boolean options early
     if (this.type === 'boolean' && this.options.length === 0) {
       this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
+      // Set default selection for boolean if not set
+      if (!this.selectedOption) {
+        this.selectedOption = this.booleanFalseName || 'false';
+      }
+    }
+    // Set default selection to first option if not set
+    if (!this.selectedOption && this.options.length > 0) {
+      this.selectedOption = this.options[0];
     }
   }
 
@@ -159,13 +182,25 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     }
     // Wait for the next frame to ensure DOM is fully rendered
     await this.updateComplete;
-    requestAnimationFrame(() => {
+    
+    // Wait for fonts to load
+    if (document.fonts) {
+      await document.fonts.ready;
+    }
+    
+    // Wait one more frame after fonts are loaded
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    
+    // Now set the indicator
     this.setIndicator();
-    });
   }
 
   public async handleSelection(optionArg: string) {
+    if (this.disabled) return;
     this.selectedOption = optionArg;
+    this.requestUpdate();
+    this.changeSubject.next(this);
+    await this.updateComplete;
     this.setIndicator();
   }
   
@@ -199,8 +234,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
         }, 50);
       }
       
-      indicator.style.width = `${option.clientWidth - 8}px`;
+      indicator.style.width = `${option.clientWidth}px`;
-      indicator.style.left = `${option.offsetLeft + 4}px`;
+      indicator.style.left = `${option.offsetLeft}px`;
       indicator.style.opacity = '1';
     }
   }
@@ -218,8 +253,11 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
     } else {
       this.selectedOption = value as string;
     }
+    this.requestUpdate();
     if (this.hasUpdated) {
+      requestAnimationFrame(() => {
         this.setIndicator();
+      });
     }
   }
 }

ts_web/elements/dees-modal.ts

@@ -139,12 +139,12 @@ export class DeesModal extends DeesElement {
         opacity: 0;
         min-height: 120px;
         max-height: calc(100vh - 40px);
-        background: ${cssManager.bdTheme('#ffffff', '#111')};
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-radius: 8px;
+        border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        transition: all 0.2s;
+        transition: all 0.2s ease;
         overflow: hidden;
-        box-shadow: ${cssManager.bdTheme('0px 2px 10px rgba(0, 0, 0, 0.1)', '0px 2px 5px rgba(0, 0, 0, 0.5)')};
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
         margin: 20px;
         display: flex;
         flex-direction: column;
@@ -193,6 +193,7 @@ export class DeesModal extends DeesElement {
           max-height: 100vh !important;
           margin: 0;
           border-radius: 0;
+          border: none;
         }
       }
 
@@ -214,7 +215,7 @@ export class DeesModal extends DeesElement {
         align-items: center;
         justify-content: space-between;
         padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         position: relative;
         flex-shrink: 0;
       }
@@ -232,23 +233,23 @@ export class DeesModal extends DeesElement {
       .modal .heading .header-button {
         width: 28px;
         height: 28px;
-        border-radius: 6px;
+        border-radius: 4px;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
-        transition: all 0.2s;
+        transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('#666', '#999')};
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
       }
 
       .modal .heading .header-button:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .modal .heading .header-button:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.12)', 'rgba(255, 255, 255, 0.12)')};
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
       }
 
       .modal .heading .header-button dees-icon {
@@ -264,6 +265,7 @@ export class DeesModal extends DeesElement {
         font-size: 14px;
         line-height: 40px;
         padding: 0 40px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .modal .content {
@@ -276,7 +278,7 @@ export class DeesModal extends DeesElement {
       .modal .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         justify-content: flex-end;
         gap: 8px;
         padding: 8px;
@@ -285,39 +287,43 @@ export class DeesModal extends DeesElement {
 
       .modal .bottomButtons .bottomButton {
         padding: 8px 16px;
-        border-radius: 6px;
+        border-radius: 4px;
         line-height: 16px;
         text-align: center;
         font-size: 14px;
         font-weight: 500;
         cursor: pointer;
         user-select: none;
-        transition: all 0.2s;
+        transition: all 0.15s ease;
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         white-space: nowrap;
       }
 
       .modal .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: #ffffff;
+        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
       }
       .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
-        color: #ffffff;
       }
       .modal .bottomButtons .bottomButton:last-child {
         border-right: none;
       }
 
       .modal .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
         color: #ffffff;
       }
       .modal .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
       }
       .modal .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
+        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
       }
     `,
   ];