@design.estate/dees-catalog 3.48.5 → 3.49.1

package/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts

@@ -1,5 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
+import type { LayoutDirection } from './types.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {
@@ -160,7 +161,7 @@ export const demoFunc = () => {
       });
 
       // Enhanced logging for reflow events
-      let lastPlaceholderPosition = null;
+      let lastPlaceholderPosition: Record<string, string> | null = null;
       let moveEventCounter = 0;
 
       // Helper function to log grid state
@@ -231,25 +232,28 @@ export const demoFunc = () => {
       // Log initial state
       logGridState('Initial Grid State');
 
-      grid.addEventListener('widget-move', (e: CustomEvent) => {
+      grid.addEventListener('widget-move', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
         logGridState('Widget Move', {
-          widget: e.detail.widget,
-          displaced: e.detail.displaced,
-          swappedWith: e.detail.swappedWith
+          widget: detail.widget,
+          displaced: detail.displaced,
+          swappedWith: detail.swappedWith
         });
       });
 
-      grid.addEventListener('widget-resize', (e: CustomEvent) => {
+      grid.addEventListener('widget-resize', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
         logGridState('Widget Resize', {
-          widget: e.detail.widget,
-          displaced: e.detail.displaced,
-          swappedWith: e.detail.swappedWith
+          widget: detail.widget,
+          displaced: detail.displaced,
+          swappedWith: detail.swappedWith
         });
       });
 
-      grid.addEventListener('widget-remove', (e: CustomEvent) => {
+      grid.addEventListener('widget-remove', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
         logGridState('Widget Remove', {
-          removedWidget: e.detail.widget
+          removedWidget: detail.widget
         });
         updateStatus();
       });
@@ -312,7 +316,7 @@ export const demoFunc = () => {
 
       // Log compact operations
       const originalCompact = grid.compact.bind(grid);
-      grid.compact = (direction?: string) => {
+      grid.compact = (direction?: LayoutDirection) => {
         console.group('🗜️ Compacting Grid');
         console.log('Direction:', direction || 'vertical');
         logGridState('Before Compact');

package/ts_web/elements/00group-layout/dees-label/dees-label.ts

@@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement {
     type: String,
     reflect: true,
   })
-  accessor description: string;
+  accessor description!: string;
 
   @property({
     type: Boolean,

package/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts

@@ -45,7 +45,7 @@ export class DeesStepper extends DeesElement {
   @property({
     type: Object,
   })
-  accessor selectedStep: IStep;
+  accessor selectedStep!: IStep;
 
   constructor() {
     super();
@@ -214,19 +214,19 @@ export class DeesStepper extends DeesElement {
     this.setScrollStatus();
     // Remove entrance class after initial animation completes
     await this.domtools.convenience.smartdelay.delayFor(350);
-    this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance');
+    this.shadowRoot!.querySelector('.step.entrance')?.classList.remove('entrance');
   }
 
   public async updated() {
     this.setScrollStatus();
   }
 
-  public scroller: typeof domtools.plugins.SweetScroll.prototype;
+  public scroller!: typeof domtools.plugins.SweetScroll.prototype;
 
   public async setScrollStatus() {
-    const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
-    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
-    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    const stepperContainer = this.shadowRoot!.querySelector('.stepperContainer') as HTMLElement;
+    const firstStepElement = this.shadowRoot!.querySelector('.step') as HTMLElement;
+    const selectedStepElement = this.shadowRoot!.querySelector('.selected') as HTMLElement;
     if (!selectedStepElement) {
       return;
     }
@@ -278,7 +278,7 @@ export class DeesStepper extends DeesElement {
     this.selectedStep = previousStep;
     await this.domtoolsPromise;
     await this.domtools.convenience.smartdelay.delayFor(100);
-    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
+    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot!.querySelector('.selected') as HTMLElement);
   }
 
   public goNext() {

package/ts_web/elements/00group-media/dees-pdf-shared/utils.ts

@@ -21,9 +21,9 @@ export function throttle<T extends (...args: any[]) => any>(
 ): (...args: Parameters<T>) => void {
   let inThrottle: boolean;
 
-  return function executedFunction(...args: Parameters<T>) {
+  return (...args: Parameters<T>) => {
     if (!inThrottle) {
-      func.apply(this, args);
+      func(...args);
       inThrottle = true;
       setTimeout(() => inThrottle = false, limit);
     }

package/ts_web/elements/00group-media/dees-tile-pdf/demo.ts

@@ -7,7 +7,7 @@ export const demo = () => {
   ];
 
   const generateGridItems = (count: number) => {
-    const items = [];
+    const items: ReturnType<typeof html>[] = [];
     for (let i = 0; i < count; i++) {
       const pdfUrl = samplePdfs[i % samplePdfs.length];
       items.push(html`

package/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts

@@ -130,7 +130,7 @@ export class DeesContextmenu extends DeesElement {
     type: Array,
   })
   accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]; divider?: never } | { divider: true })[] = [];
-  windowLayer: DeesWindowLayer;
+  windowLayer!: DeesWindowLayer;
   
   private submenu: DeesContextmenu | null = null;
   private submenuTimeout: any = null;
@@ -278,7 +278,7 @@ export class DeesContextmenu extends DeesElement {
   }
   
   private handleKeydown = (event: KeyboardEvent) => {
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem:not(.disabled)'));
+    const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem:not(.disabled)'));
     const currentIndex = menuItems.findIndex(item => item.matches(':hover'));
     
     switch (event.key) {
@@ -352,7 +352,7 @@ export class DeesContextmenu extends DeesElement {
     if (!menuItem.submenu || menuItem.submenu.length === 0) return;
     
     // Find the menu item element
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem'));
+    const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem'));
     const menuItemElement = menuItems.find(el => el.querySelector('.menuitem-text')?.textContent === menuItem.name) as HTMLElement;
     if (!menuItemElement) return;
     

package/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts

@@ -49,7 +49,7 @@ export const demoFunc = () => html`
             heading: 'With Help Button',
             showHelpButton: true,
             onHelp: async () => {
-              const helpModal = await DeesModal.createAndShow({
+              await DeesModal.createAndShow({
                 heading: 'Help',
                 width: 'small',
                 showCloseButton: true,
@@ -60,7 +60,7 @@ export const demoFunc = () => html`
                 `,
                 menuOptions: [{
                   name: 'Got it',
-                  action: async (modal) => modal.destroy()
+                  action: async (modal) => modal!.destroy()
                 }],
               });
             },
@@ -70,7 +70,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'OK',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>With Help Button</dees-button>
@@ -85,7 +85,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Close',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>No Close Button</dees-button>
@@ -101,7 +101,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Done',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Both Buttons</dees-button>
@@ -116,7 +116,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Close',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Clean Header</dees-button>
@@ -136,10 +136,10 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'OK',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Small Modal</dees-button>
@@ -157,10 +157,10 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'Sign Up',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Medium Modal</dees-button>
@@ -181,10 +181,10 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'Save',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Large Modal</dees-button>
@@ -207,10 +207,10 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Save',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Fullscreen Modal</dees-button>
@@ -230,7 +230,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Close',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Custom 700px</dees-button>
@@ -245,7 +245,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Got it',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Max Width 600px</dees-button>
@@ -260,7 +260,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'OK',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Min Width 400px</dees-button>
@@ -279,13 +279,13 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Delete',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'Save Changes',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Three Buttons</dees-button>
@@ -298,7 +298,7 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Acknowledge',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Single Button</dees-button>
@@ -322,10 +322,10 @@ export const demoFunc = () => html`
             `,
             menuOptions: [{
               name: 'Discard All Changes',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }, {
               name: 'Save and Continue Editing',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
             }],
           });
         }}>Long Labels</dees-button>
@@ -347,7 +347,7 @@ export const demoFunc = () => html`
           `,
           menuOptions: [{
             name: 'Close',
-            action: async (modal) => modal.destroy()
+            action: async (modal) => modal!.destroy()
           }],
         });
       }}>Test Responsive</dees-button>

package/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -85,7 +85,7 @@ export class DeesModal extends DeesElement {
   accessor heading = '';
 
   @state({})
-  accessor content: TemplateResult;
+  accessor content!: TemplateResult;
 
   @state({})
   accessor menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[] = [];
@@ -94,10 +94,10 @@ export class DeesModal extends DeesElement {
   accessor width: 'small' | 'medium' | 'large' | 'fullscreen' | number = 'medium';
 
   @property({ type: Number })
-  accessor maxWidth: number;
+  accessor maxWidth!: number;
 
   @property({ type: Number })
-  accessor minWidth: number;
+  accessor minWidth!: number;
 
   @property({ type: Boolean })
   accessor showCloseButton: boolean = true;
@@ -106,7 +106,7 @@ export class DeesModal extends DeesElement {
   accessor showHelpButton: boolean = false;
 
   @property({ attribute: false })
-  accessor onHelp: () => void | Promise<void>;
+  accessor onHelp!: () => void | Promise<void>;
 
   @property({ type: Boolean })
   accessor mobileFullscreen: boolean = false;
@@ -383,18 +383,18 @@ export class DeesModal extends DeesElement {
     `;
   }
 
-  private windowLayer: DeesWindowLayer;
+  private windowLayer!: DeesWindowLayer;
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(_changedProperties);
     const domtools = await this.domtoolsPromise;
     await domtools.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot.querySelector('.modal');
-    modal.classList.add('show');
+    const modal = this.shadowRoot!.querySelector('.modal');
+    modal!.classList.add('show');
   }
 
   public async handleOutsideClick(eventArg: MouseEvent) {
     eventArg.stopPropagation();
-    const modalContainer = this.shadowRoot.querySelector('.modalContainer');
+    const modalContainer = this.shadowRoot!.querySelector('.modalContainer');
     if (eventArg.target === modalContainer) {
       await this.destroy();
     }
@@ -402,8 +402,8 @@ export class DeesModal extends DeesElement {
 
   public async destroy() {
     const domtools = await this.domtoolsPromise;
-    const modal = this.shadowRoot.querySelector('.modal');
-    modal.classList.add('predestroy');
+    const modal = this.shadowRoot!.querySelector('.modal');
+    modal!.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();

package/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts

@@ -42,7 +42,7 @@ export class DeesSpeechbubble extends DeesElement {
     speechbubble.manifested = true;
     windowLayer.appendChild(speechbubble);
     windowLayer.style.pointerEvents = 'none';
-    (windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
+    (windowLayer.shadowRoot!.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
     return speechbubble;
   }
 
@@ -50,13 +50,13 @@ export class DeesSpeechbubble extends DeesElement {
   @property({
     type: Object,
   })
-  accessor reffedElement: HTMLElement;
+  accessor reffedElement!: HTMLElement;
 
   @property({
     type: String,
     reflect: true,
   })
-  accessor text: string;
+  accessor text!: string;
 
   @property({
     type: Boolean,
@@ -73,7 +73,7 @@ export class DeesSpeechbubble extends DeesElement {
   })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
-  public windowLayer: DeesWindowLayer;
+  public windowLayer!: DeesWindowLayer;
 
   constructor() {
     super();
@@ -189,7 +189,7 @@ export class DeesSpeechbubble extends DeesElement {
     }
     if (this.manifested) {
       await this.updatePosition();
-      (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
+      (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
     } else {
       // lets make sure we instrument it
       let speechbubble: DeesSpeechbubble;
@@ -227,7 +227,7 @@ export class DeesSpeechbubble extends DeesElement {
   public async show() {}
 
   public async destroy() {
-    (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
+    (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
     this.windowLayer.destroy();
   }
 }

package/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts

@@ -132,7 +132,7 @@ export class WebContainerEnvironment implements IExecutionEnvironment {
     const watcher = this.container!.fs.watch(
       path,
       { recursive: options?.recursive ?? false },
-      callback
+      callback as (event: 'rename' | 'change', filename: string | Uint8Array) => void
     );
     return {
       stop: () => watcher.close(),

package/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts

@@ -109,14 +109,14 @@ export const demoFunc = () => html`
 
       <dees-panel .title=${'Interactive Shopping Cart'} .subtitle=${'Product cards with dynamic cart calculation'} .runAfterRender=${async (elementArg: HTMLElement) => {
         const products = [
-          { id: 'laptop', element: null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
-          { id: 'ipad', element: null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
-          { id: 'keyboard', element: null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
+          { id: 'laptop', element: null as DeesShoppingProductcard | null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
+          { id: 'ipad', element: null as DeesShoppingProductcard | null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
+          { id: 'keyboard', element: null as DeesShoppingProductcard | null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
         ];
 
         const updateCartSummary = () => {
           let total = 0;
-          const items = [];
+          const items: string[] = [];
           
           products.forEach(product => {
             const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard;
@@ -216,8 +216,8 @@ export const demoFunc = () => html`
               const output = document.querySelector('#selection-output');
               if (output) {
                 const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }
@@ -243,8 +243,8 @@ export const demoFunc = () => html`
               const output = document.querySelector('#selection-output');
               if (output) {
                 const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }
@@ -271,8 +271,8 @@ export const demoFunc = () => html`
               const output = document.querySelector('#selection-output');
               if (output) {
                 const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }

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

@@ -46,7 +46,7 @@ export class DeesSimpleAppDash extends DeesElement {
   accessor terminalSetupCommand: string = `echo "Terminal ready"`;
 
   @state()
-  accessor selectedView: IView;
+  accessor selectedView!: IView;
 
 
   public static styles = [
@@ -386,7 +386,7 @@ export class DeesSimpleAppDash extends DeesElement {
     `;
   }
 
-  public async firstUpdated(_changedProperties): Promise<void> {
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     const domtools = await this.domtoolsPromise;
     super.firstUpdated(_changedProperties);
     if (this.viewTabs && this.viewTabs.length > 0) {
@@ -395,7 +395,7 @@ export class DeesSimpleAppDash extends DeesElement {
     }
   }
   
-  public currentTerminal: DeesWorkspaceTerminal;
+  public currentTerminal: DeesWorkspaceTerminal | null = null;
   public async launchTerminal() {
     const domtools = await this.domtoolsPromise;
     if (this.currentTerminal) {
@@ -404,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement {
       return;
     }
 
-    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
+    const maincontainer = this.shadowRoot!.querySelector('.maincontainer')! as HTMLElement;
     const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
     const terminal = new DeesWorkspaceTerminal();
     terminal.setupCommand = this.terminalSetupCommand;
@@ -444,9 +444,9 @@ export class DeesSimpleAppDash extends DeesElement {
   }
 
 
-  private currentView: DeesElement;
+  private currentView!: DeesElement;
   public async loadView(viewArg: IView) {
-    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const appcontent = this.shadowRoot!.querySelector('.appcontent')!;
     const view = new viewArg.element();
     if (this.currentView) {
       this.currentView.remove();

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

@@ -141,15 +141,15 @@ export class DeesSimpleLogin extends DeesElement {
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
     super.firstUpdated(_changedProperties);
     
-    const form = this.shadowRoot.querySelector('dees-form') as any;
+    const form = this.shadowRoot!.querySelector('dees-form') as any;
     if (form) {
-      form.addEventListener('formData', (event: CustomEvent) => {
+      form.addEventListener('formData', ((event: CustomEvent) => {
         this.dispatchEvent(new CustomEvent('login', { 
           detail: event.detail, 
           bubbles: true, 
           composed: true 
         }));
-      });
+      }) as EventListener);
     }
   }
 
@@ -158,9 +158,9 @@ export class DeesSimpleLogin extends DeesElement {
    */
   public async switchToSlottedContent() {
     const domtools = await this.domtoolsPromise;
-    const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
-    const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
-    const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
+    const loginDiv = this.shadowRoot!.querySelector('.login') as HTMLDivElement;
+    const loginContainerDiv = this.shadowRoot!.querySelector('.loginContainer') as HTMLDivElement;
+    const slotContainerDiv = this.shadowRoot!.querySelector('.slotContainer') as HTMLDivElement;
     loginDiv.style.opacity = '0';
     loginDiv.style.transform = 'translateY(20px)';
     loginContainerDiv.style.pointerEvents = 'none';

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

@@ -15,7 +15,7 @@ export const demoFunc = () => {
     .filter(key => {
       // Skip utility functions and focus on icon components (first letter is uppercase)
       const isUppercaseFirst = key[0] === key[0].toUpperCase() && key[0] !== key[0].toLowerCase();
-      const isFunction = typeof lucideIcons[key] === 'function';
+      const isFunction = typeof (lucideIcons as any)[key] === 'function';
       const notUtility = !['createElement', 'createIcons', 'default'].includes(key);
       return isFunction && isUppercaseFirst && notUtility;
     })
@@ -63,7 +63,7 @@ export const demoFunc = () => {
   const searchIcons = (event: InputEvent) => {
     const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
     // Get the demo container first, then search within it
-    const demoContainer = (event.target as HTMLElement).closest('.demoContainer');
+    const demoContainer = (event.target as HTMLElement).closest('.demoContainer')!;
     const containers = demoContainer.querySelectorAll('.iconContainer');
     
     containers.forEach(container => {
@@ -79,7 +79,7 @@ export const demoFunc = () => {
     });
     
     // Update counts - search within demoContainer
-    demoContainer.querySelectorAll('.section-container').forEach(section => {
+    demoContainer!.querySelectorAll('.section-container').forEach(section => {
       const visibleIcons = section.querySelectorAll('.iconContainer:not(.hidden)').length;
       const countElement = section.querySelector('.icon-count');
       if (countElement) {