@design.estate/dees-catalog 3.96.1 → 3.96.3

package/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -823,14 +823,13 @@ export class DeesStatsGrid extends DeesElement {
           <div class="grid-title"></div>
           <div class="grid-actions">
             ${this.gridActions.map(action => html`
-              <dees-button 
+              <dees-button
                 @clicked=${() => this.handleGridAction(action)}
                 type="outline"
                 size="sm"
-              >
-                ${action.iconName ? html`<dees-icon .icon=${action.iconName} size="small"></dees-icon>` : ''}
-                ${action.name}
-              </dees-button>
+                .text=${action.name}
+                .icon=${action.iconName || ''}
+              ></dees-button>
             `)}
           </div>
         </div>
@@ -1249,4 +1248,4 @@ export class DeesStatsGrid extends DeesElement {
     // open an empty menu.)
     DeesContextmenu.openContextMenuWithOptions(event, tile.actions as any);
   }
-}
+}

package/ts_web/elements/00group-dataview/dees-table/styles.ts

@@ -515,7 +515,6 @@ export const tableStyles: CSSResult[] = [
         height: var(--dees-control-height-sm);
         border-radius: var(--dees-radius-sm);
         color: var(--dees-color-text-muted);
-        --dees-icon-opacity: var(--dees-label-opacity-muted);
         cursor: pointer;
         transition: all var(--dees-transition-fast) var(--dees-ease-standard);
       }
@@ -523,7 +522,6 @@ export const tableStyles: CSSResult[] = [
       .action:hover {
         background: var(--dees-color-badge-default-bg);
         color: var(--dees-color-text-primary);
-        --dees-icon-opacity: 1;
       }
 
       .action:active {
@@ -531,15 +529,10 @@ export const tableStyles: CSSResult[] = [
       }
 
       .action dees-icon {
-        color: var(--dees-color-label-base);
         width: 16px;
         height: 16px;
       }
 
-      .action:hover dees-icon {
-        color: var(--dees-color-text-primary);
-      }
-
       .footer {
         display: flex;
         align-items: center;

package/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -89,8 +89,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
 
       .option {
         position: relative;
-        display: flex;
-        align-items: center;
+        display: grid;
+        place-items: center;
         height: 100%;
         padding: 0 var(--dees-spacing-lg);
         border-radius: var(--dees-radius-sm);
@@ -104,6 +104,21 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
         z-index: 2;
       }
 
+      .option-label,
+      .option::after {
+        grid-area: 1 / 1;
+      }
+
+      /* Reserve the selected label's semibold width in every state so moving
+         the thumb never changes the segmented control's intrinsic width. */
+      .option::after {
+        content: attr(data-option);
+        visibility: hidden;
+        font-weight: 600;
+        pointer-events: none;
+        user-select: none;
+      }
+
       /* Hairline separators between unselected segments; they fade out next to
          the thumb. */
       .option::before {
@@ -197,8 +212,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
                 index === 0 || isSelected || index - 1 === selectedIndex;
               return html`<div
                 class="option ${isSelected ? 'selected' : ''} ${hideSeparator ? 'no-sep' : ''}"
+                data-option=${option}
                 @click=${() => this.handleSelection(option)}
-              >${option}</div>`;
+              ><span class="option-label">${option}</span></div>`;
             })}
           </div>
         </div>

package/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -373,6 +373,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
+        scrollbar-gutter: stable;
         background: var(--dees-color-bg-canvas);
         overscroll-behavior: contain;
       }

package/ts_web/elements/00group-utility/dees-icon/dees-icon.ts

@@ -37,16 +37,17 @@ export type IconWithPrefix = `lucide:${string}` | string;
 // Legacy type kept for consumers that still import it. `iconFA` itself is no longer supported.
 export type TIconKey = string;
 
-// Use a global static cache for all icons to reduce rendering
-const iconCache = new Map<string, string>();
+// Cache opaque mask sources. Color is applied separately through currentColor,
+// so theme and inherited text-color changes never require rebuilding geometry.
+const iconMaskCache = new Map<string, string>();
 
 // Clear cache items occasionally to prevent memory leaks 
 const MAX_CACHE_SIZE = 500;
 function limitCacheSize() {
-  if (iconCache.size > MAX_CACHE_SIZE) {
+  if (iconMaskCache.size > MAX_CACHE_SIZE) {
     // Remove oldest entries (first 20% of items)
-    const keysToDelete = Array.from(iconCache.keys()).slice(0, MAX_CACHE_SIZE / 5);
-    keysToDelete.forEach(key => iconCache.delete(key));
+    const keysToDelete = Array.from(iconMaskCache.keys()).slice(0, MAX_CACHE_SIZE / 5);
+    keysToDelete.forEach(key => iconMaskCache.delete(key));
   }
 }
 
@@ -151,53 +152,42 @@ export class DeesIcon extends DeesElement {
     }
   }
 
-  private renderLucideIcon(iconName: string): string {
-    // Create a cache key based on all visual properties
-    const cacheKey = `lucide:${iconName}:${this.iconSize}:${this.color}:${this.strokeWidth}`;
-    
-    // Check if we already have this icon in the cache
-    if (iconCache.has(cacheKey)) {
-      return iconCache.get(cacheKey) || '';
-    }
+  private createLucideMaskImage(iconName: string): string {
+    const pascalCaseName = lucideNameToPascalCase(iconName);
+    const cacheKey = `lucide:${pascalCaseName}:${this.iconSize}:${this.strokeWidth}`;
+    const cachedMask = iconMaskCache.get(cacheKey);
+    if (cachedMask) return cachedMask;
 
-    try {
-      // Get the Pascal case icon name (Menu instead of menu, FileText instead of file-text)
-      const pascalCaseName = lucideNameToPascalCase(iconName);
-      
-      // Check if the icon exists in lucideIcons
-      if (!(lucideIcons as any)[pascalCaseName]) {
-        console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`);
-        return '';
-      }
+    if (!(lucideIcons as any)[pascalCaseName]) {
+      throw new Error(`Lucide icon '${pascalCaseName}' was not found`);
+    }
 
-      // Use the exact pattern from Lucide documentation
-      const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
-        color: this.color,
-        size: this.iconSize,
-        strokeWidth: this.strokeWidth
-      });
-      
-      if (!svgElement) {
-        console.warn(`createElement returned empty result for ${pascalCaseName}`);
-        return '';
-      }
-      
-      // Get the HTML
-      const result = svgElement.outerHTML;
-      
-      // Cache the result for future use
-      iconCache.set(cacheKey, result);
-      limitCacheSize();
-      
-      return result;
-    } catch (error) {
-      console.error(`Error rendering Lucide icon ${iconName}:`, error);
-      
-      // Create a fallback SVG with the icon name
-      return `<svg xmlns="http://www.w3.org/2000/svg" width="${this.iconSize}" height="${this.iconSize}" viewBox="0 0 24 24" fill="none" stroke="${this.color}" stroke-width="${this.strokeWidth}" stroke-linecap="round" stroke-linejoin="round">
-        <text x="50%" y="50%" font-size="6" text-anchor="middle" dominant-baseline="middle" fill="${this.color}">${iconName}</text>
-      </svg>`;
+    const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
+      color: '#fff',
+      size: this.iconSize,
+      strokeWidth: this.strokeWidth,
+    });
+    if (!svgElement) {
+      throw new Error(`Lucide did not create an element for '${pascalCaseName}'`);
     }
+
+    // The mask must be completely opaque. The consumer's inherited color,
+    // including any alpha, is painted exactly once behind this geometry.
+    svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    svgElement.setAttribute('color', '#fff');
+    svgElement.setAttribute('stroke', '#fff');
+    svgElement.setAttribute('fill', 'none');
+
+    const maskImage = `url("data:image/svg+xml,${encodeURIComponent(svgElement.outerHTML)}")`;
+    iconMaskCache.set(cacheKey, maskImage);
+    limitCacheSize();
+    return maskImage;
+  }
+
+  private clearIconContainer(container: HTMLElement): void {
+    container.style.backgroundColor = 'transparent';
+    container.style.setProperty('mask-image', 'none');
+    container.style.setProperty('-webkit-mask-image', 'none');
   }
 
   public static styles = [
@@ -214,21 +204,13 @@ export class DeesIcon extends DeesElement {
       }
 
       #iconContainer {
-        /*
-         * Apply semantic emphasis to the complete icon, after its Lucide
-         * strokes have been painted. This avoids darker overlap pixels that
-         * occur when a translucent currentColor is composited path by path.
-         *
-         * Consumers keep the stroke color opaque and set --dees-icon-opacity.
-         */
-        opacity: var(--dees-icon-opacity, 1);
-      }
-
-      /* Improve rendering performance */
-      #iconContainer svg {
-        display: block;
-        height: 100%;
-        width: 100%;
+        background-color: currentColor;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        mask-size: 100% 100%;
+        -webkit-mask-position: center;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-size: 100% 100%;
         will-change: transform; /* Helps with animations */
         contain: strict; /* Performance optimization */
       }
@@ -255,11 +237,11 @@ export class DeesIcon extends DeesElement {
     }
     
     const effectiveIcon = this.getEffectiveIcon();
-    const container = this.shadowRoot?.querySelector('#iconContainer');
+    const container = this.shadowRoot?.querySelector('#iconContainer') as HTMLElement | null;
     if (!container) return;
 
     if (!effectiveIcon) {
-      container.innerHTML = '';
+      this.clearIconContainer(container);
       this.lastIcon = effectiveIcon;
       this.lastIconSize = this.iconSize;
       this.lastColor = this.color;
@@ -287,45 +269,16 @@ export class DeesIcon extends DeesElement {
       const { type, name } = this.parseIconString(effectiveIcon);
       
       if (type === 'lucide') {
-        // For Lucide, use direct DOM manipulation as shown in the docs
-        // This approach avoids HTML string issues
-        container.innerHTML = ''; // Clear container
-        
-        try {
-          // Convert to PascalCase (handles kebab-case Lucide ids like "file-text")
-          const pascalCaseName = lucideNameToPascalCase(name);
-          
-          if ((lucideIcons as any)[pascalCaseName]) {
-            // Use the documented pattern from Lucide docs
-            const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
-              color: this.color,
-              size: this.iconSize,
-              strokeWidth: this.strokeWidth
-            });
-            
-            if (svgElement) {
-              // Directly append the element
-              container.appendChild(svgElement);
-              return; // Exit early since we've added the element
-            }
-          }
-          
-          // If we reach here, something went wrong
-          throw new Error(`Could not create element for ${pascalCaseName}`);
-        } catch (error) {
-          console.error(`Error rendering Lucide icon:`, error);
-          
-          // Fall back to the string-based approach
-          const iconHtml = this.renderLucideIcon(name);
-          if (iconHtml) {
-            container.innerHTML = iconHtml;
-          }
-        }
+        const maskImage = this.createLucideMaskImage(name);
+        container.style.backgroundColor = this.color === 'currentColor' ? '' : this.color;
+        container.style.setProperty('mask-image', maskImage);
+        container.style.setProperty('-webkit-mask-image', maskImage);
       } else {
-        container.innerHTML = '';
+        this.clearIconContainer(container);
         console.error(`dees-icon: fa:${name} is no longer supported. Use icon="lucide:${name}" or another Lucide icon.`);
       }
     } catch (error) {
+      this.clearIconContainer(container);
       console.error(`Error updating icon ${effectiveIcon}:`, error);
     }
   }