fix(ts_web): resolve TypeScript nullability and event typing issues across web components

changelog.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2026-04-01 - 3.49.1 - fix(ts_web)
+resolve TypeScript nullability and event typing issues across web components
+
+- adds explicit non-null assertions and nullable types to component properties, shadowRoot queries, and modal references
+- normalizes demo and component event listeners by casting generic Event objects to CustomEvent where needed
+- guards optional form, dropdown, menu, and DOM interactions to prevent invalid access under stricter TypeScript checks
+- updates tsconfig to include Node types for the web build environment
+
 ## 2026-03-18 - 3.49.0 - feat(dataview-statusobject)
 add last updated footer to status object and refresh demo data
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.49.0',
+  version: '3.49.1',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00group-appui/dees-appui-appbar/component.ts

@@ -122,7 +122,7 @@ export class DeesAppuiBar extends DeesElement {
       >
         ${menuItem.iconName ? html`<dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>` : ''}
         ${menuItem.name}
-        ${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''}
+        ${hasSubmenu ? this.renderDropdown(menuItem.submenu!, itemId, isActive) : ''}
       </div>
     `;
   }

ts_web/elements/00group-appui/dees-appui-appbar/demo.ts

@@ -75,21 +75,21 @@ export const demoFunc = () => {
       // Set up status toggle
       const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
       statusButtons[0].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'online' };
+        appbar.user = { ...appbar.user!, status: 'online' };
       });
       statusButtons[1].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'busy' };
+        appbar.user = { ...appbar.user!, status: 'busy' };
       });
       statusButtons[2].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'away' };
+        appbar.user = { ...appbar.user!, status: 'away' };
       });
       statusButtons[3].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'offline' };
+        appbar.user = { ...appbar.user!, status: 'offline' };
       });
       
       // Set up window controls toggle
       const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button');
-      windowControlsButton.addEventListener('click', () => {
+      windowControlsButton!.addEventListener('click', () => {
         appbar.showWindowControls = !appbar.showWindowControls;
       });
       

ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -165,7 +165,7 @@ export class DeesAppuiMaincontent extends DeesElement {
     }
     // Tab selection is now handled by the dees-appui-tabs component
     // But we need to ensure the tabs component is ready
-    const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    const tabsComponent = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
     if (tabsComponent) {
       await tabsComponent.updateComplete;
     }

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -46,7 +46,7 @@ export class DeesAppuiMainmenu extends DeesElement {
   accessor tabs: interfaces.IMenuItem[] = [];
 
   @property()
-  accessor selectedTab: interfaces.IMenuItem;
+  accessor selectedTab!: interfaces.IMenuItem;
 
   @property({ type: Boolean, reflect: true })
   accessor collapsed: boolean = false;

ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts

@@ -663,21 +663,21 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   private shouldShowIndicator(): boolean {
-    return this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
+    return !!this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
   }
 
   private getSelectedTabElement(): HTMLElement | null {
-    const selectedIndex = this.tabs.indexOf(this.selectedTab);
+    const selectedIndex = this.tabs.indexOf(this.selectedTab!);
     const isHorizontal = this.tabStyle === 'horizontal';
     const selector = isHorizontal
       ? `.tabs-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`
       : `.vertical-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`;
 
-    return this.shadowRoot.querySelector(selector);
+    return this.shadowRoot!.querySelector(selector);
   }
 
   private getIndicatorElement(): HTMLElement | null {
-    return this.shadowRoot.querySelector('.tabIndicator');
+    return this.shadowRoot!.querySelector('.tabIndicator');
   }
 
   private handleInitialTransition(indicator: HTMLElement): void {
@@ -695,7 +695,7 @@ export class DeesAppuiTabs extends DeesElement {
     const tabContent = tabElement.querySelector('.tab-content') as HTMLElement;
     if (!tabContent) return;
 
-    const wrapperRect = indicator.parentElement.getBoundingClientRect();
+    const wrapperRect = indicator.parentElement!.getBoundingClientRect();
     const contentRect = tabContent.getBoundingClientRect();
     
     const contentLeft = contentRect.left - wrapperRect.left;
@@ -707,7 +707,7 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   private updateVerticalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
-    const tabsContainer = this.shadowRoot.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
+    const tabsContainer = this.shadowRoot!.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
     if (!tabsContainer) return;
     
     indicator.style.top = `${tabElement.offsetTop + tabsContainer.offsetTop}px`;

ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts

@@ -12,7 +12,7 @@ class DemoDashboardView extends DeesElement {
   @state()
   accessor activated: boolean = false;
 
-  private ctx: IViewActivationContext;
+  private ctx!: IViewActivationContext;
 
   private statsTiles: IStatsTile[] = [
     {
@@ -267,7 +267,7 @@ class DemoSettingsView extends DeesElement {
   @state()
   accessor hasChanges: boolean = false;
 
-  private appui: DeesAppui;
+  private appui!: DeesAppui;
 
   onActivate(context: IViewActivationContext) {
     this.appui = context.appui as any;

ts_web/elements/00group-appui/dees-appui/dees-appui.ts

@@ -1037,7 +1037,7 @@ export class DeesAppui extends DeesElement {
     if (!config.mainMenu?.sections) return [];
 
     return config.mainMenu.sections.map((section) => ({
-      name: section.name,
+      name: section.name || '',
       items: section.views
         .map((viewId) => {
           const view = this.viewRegistry.get(viewId);

ts_web/elements/00group-appui/dees-appui/view.registry.ts

@@ -173,7 +173,7 @@ export class ViewRegistry {
     }
 
     // Check for cached instance
-    let element = shouldCache ? this.instances.get(viewId) : undefined;
+    let element: HTMLElement | null | undefined = shouldCache ? this.instances.get(viewId) : undefined;
 
     if (element) {
       // Reuse cached instance - just show it

ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts

@@ -1,5 +1,5 @@
 import { html, css } from '@design.estate/dees-element';
-import '../00group-button/dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-layout/dees-panel/dees-panel.js';
 import '@design.estate/dees-wcctools/demotools';
 

ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts

@@ -301,14 +301,14 @@ export class DeesMobilenavigation extends DeesElement {
     `;
   }
 
-  private windowLayer: DeesWindowLayer;
+  private windowLayer!: DeesWindowLayer;
 
   /**
    * inits the show
    */
   public async show() {
     const domtools = await this.domtoolsPromise;
-    const main = this.shadowRoot.querySelector('.main');
+    const main = this.shadowRoot!.querySelector('.main');
 
     // Create window layer first (it will get its own z-index)
     if (!this.windowLayer) {
@@ -328,7 +328,7 @@ export class DeesMobilenavigation extends DeesElement {
     zIndexRegistry.register(this, this.mobileNavZIndex);
 
     await domtools.convenience.smartdelay.delayFor(10);
-    main.classList.add('show');
+    main!.classList.add('show');
   }
 
   /**
@@ -336,8 +336,8 @@ export class DeesMobilenavigation extends DeesElement {
    */
   public async hide() {
     const domtools = await this.domtoolsPromise;
-    const main = this.shadowRoot.querySelector('.main');
+    const main = this.shadowRoot!.querySelector('.main');
-    main.classList.remove('show');
+    main!.classList.remove('show');
     
     // Unregister from z-index registry
     zIndexRegistry.unregister(this);

ts_web/elements/00group-button/dees-button/dees-button.demo.ts

@@ -288,8 +288,8 @@ export const demoFunc = () => html`
       }
       
       if (dataBtn && output) {
-        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
+        dataBtn.addEventListener('clicked', (e: Event) => {
-          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+          output.textContent = `Clicked: Secondary button with data: ${(e as CustomEvent).detail.data}`;
         });
       }
       
@@ -322,9 +322,9 @@ export const demoFunc = () => html`
       const output = elementArg.querySelector('#form-output');
       
       if (form && output) {
-        form.addEventListener('formData', (e: CustomEvent) => {
+        form.addEventListener('formData', (e: Event) => {
           output.innerHTML = '<strong>Form submitted with data:</strong><br>' +
-            JSON.stringify(e.detail.data, null, 2);
+            JSON.stringify((e as CustomEvent).detail.data, null, 2);
         });
       }
       

ts_web/elements/00group-button/dees-button/dees-button.ts

@@ -31,10 +31,10 @@ export class DeesButton extends DeesElement {
       return true;
     }
   })
-  accessor text: string;
+  accessor text!: string;
 
   @property()
-  accessor eventDetailData: string;
+  accessor eventDetailData!: string;
 
   @property({
     type: Boolean,
@@ -69,7 +69,7 @@ export class DeesButton extends DeesElement {
   accessor insideForm: boolean = false;
 
   @property({ type: String, reflect: true })
-  accessor icon: string;
+  accessor icon!: string;
 
   @property({ type: String, reflect: true })
   accessor iconPosition: 'left' | 'right' = 'left';

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -37,7 +37,7 @@ export class DeesChartArea extends DeesElement {
 
   // instance
   @state()
-  accessor chart: ApexCharts;
+  accessor chart!: ApexCharts;
 
   @property()
   accessor label: string = 'Untitled Chart';
@@ -68,8 +68,8 @@ export class DeesChartArea extends DeesElement {
   @property({ type: Number })
   accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
 
-  private resizeObserver: ResizeObserver;
+  private resizeObserver!: ResizeObserver;
-  private resizeTimeout: number;
+  private resizeTimeout!: number;
   private internalChartData: ApexAxisChartSeries = [];
   private autoScrollTimer: number | null = null;
   private readonly DEBUG_RESIZE = false; // Set to true to enable resize debugging
@@ -132,7 +132,7 @@ export class DeesChartArea extends DeesElement {
       if (this.chart) {
         try {
           this.chart.destroy();
-          this.chart = null;
+          this.chart = null as any;
         } catch (error) {
           console.error('Error destroying chart:', error);
         }
@@ -170,8 +170,8 @@ export class DeesChartArea extends DeesElement {
     await new Promise(resolve => requestAnimationFrame(resolve));
     
     // Get actual dimensions of the container
-    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+    const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox');
-    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
+    const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer');
 
     if (!mainbox || !chartContainer) {
       console.error('Chart containers not found');
@@ -368,7 +368,7 @@ export class DeesChartArea extends DeesElement {
     };
     
     try {
-      this.chart = new ApexChartsLib(this.shadowRoot.querySelector('.chartContainer'), options);
+      this.chart = new ApexChartsLib(this.shadowRoot!.querySelector('.chartContainer')!, options);
       await this.chart.render();
       
       // Give the chart a moment to fully initialize before resizing
@@ -376,7 +376,7 @@ export class DeesChartArea extends DeesElement {
       await this.resizeChart();
       
       // Ensure resize observer is watching the mainbox
-      const mainbox = this.shadowRoot.querySelector('.mainbox');
+      const mainbox = this.shadowRoot!.querySelector('.mainbox');
       if (mainbox && this.resizeObserver) {
         // Disconnect any previous observations
         this.resizeObserver.disconnect();
@@ -572,8 +572,8 @@ export class DeesChartArea extends DeesElement {
     }
     
     try {
-      const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+      const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox');
-      const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
+      const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer');
 
       if (!mainbox || !chartContainer) {
         return;

ts_web/elements/00group-chart/dees-chart-area/demo.ts

@@ -44,8 +44,8 @@ export const demoFunc = () => {
       // Get the chart elements
       const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea;
       const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea;
-      let intervalId: number;
+      let intervalId: number | null;
-      let connectionsIntervalId: number;
+      let connectionsIntervalId: number | null;
       let currentDataset = 'system';
 
       // Y-axis formatters for different datasets
@@ -71,7 +71,7 @@ export const demoFunc = () => {
 
       // Generate initial data points for time window
       const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => {
-        const data = [];
+        const data: Array<{ x: string; y: number }> = [];
         const now = Date.now();
         const pointCount = Math.floor(TIME_WINDOW / interval);
         
@@ -240,10 +240,10 @@ export const demoFunc = () => {
       // Switch dataset
       const switchDataset = (name: string) => {
         currentDataset = name;
-        const dataset = datasets[name];
+        const dataset = (datasets as Record<string, any>)[name];
         chartElement.label = dataset.label;
         chartElement.series = dataset.series;
-        chartElement.yAxisFormatter = formatters[name];
+        chartElement.yAxisFormatter = (formatters as Record<string, any>)[name];
         
         // Set appropriate y-axis scaling
         if (name === 'system') {

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

@@ -8,8 +8,8 @@ export const demoFunc = () => {
       // Get the log elements
       const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
       const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
-      let structuredIntervalId: number;
+      let structuredIntervalId: number | null;
-      let rawIntervalId: number;
+      let rawIntervalId: number | null;
 
       const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
 

ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -203,7 +203,7 @@ export class DeesDataviewCodebox extends DeesElement {
       </style>
       <div
         class="mainbox"
-        @contextmenu="${(eventArg) => {
+        @contextmenu="${(eventArg: MouseEvent) => {
           DeesContextmenu.openContextMenuWithOptions(eventArg, [
             {
               name: 'About',
@@ -241,7 +241,7 @@ export class DeesDataviewCodebox extends DeesElement {
   private codeToDisplayStore = '';
   private highlightJs: HLJSApi | null = null;
 
-  public async updated(_changedProperties) {
+  public async updated(_changedProperties: Map<string, any>) {
     super.updated(_changedProperties);
     console.log('highlighting now');
     console.log(this.childNodes);
@@ -267,11 +267,11 @@ export class DeesDataviewCodebox extends DeesElement {
       this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
     }
 
-    const localCodeNode = this.shadowRoot.querySelector('code');
+    const localCodeNode = this.shadowRoot!.querySelector('code');
     const highlightedHtml = this.highlightJs.highlight(this.codeToDisplayStore, {
       language: this.progLang,
       ignoreIllegals: true,
     });
-    localCodeNode.innerHTML = highlightedHtml.value;
+    localCodeNode!.innerHTML = highlightedHtml.value;
   }
 }

ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -29,7 +29,7 @@ export class DeesDataviewStatusobject extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Data View'];
 
-  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
+  @property({ type: Object }) accessor statusObject!: tsclass.code.IStatusObject;
 
   public static styles = [
     themeDefaultStyles,
@@ -259,7 +259,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
       
       // Show feedback
-      const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement;
+      const button = this.shadowRoot!.querySelector('.copyMain') as HTMLElement;
       const originalText = button.textContent;
       button.textContent = 'Copied!';
       

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

@@ -878,7 +878,7 @@ export class DeesStatsGrid extends DeesElement {
 
   private renderTile(tile: IStatsTile): TemplateResult {
     const hasActions = tile.actions && tile.actions.length > 0;
-    const clickable = hasActions && tile.actions.length === 1;
+    const clickable = hasActions && tile.actions!.length === 1;
     const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
 
     return html`

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

@@ -52,12 +52,12 @@ export class DeesTable<T> extends DeesElement {
   @property({
     type: String,
   })
-  accessor key: string;
+  accessor key!: string;
 
   @property({
     type: String,
   })
-  accessor label: string;
+  accessor label!: string;
 
   @property({
     type: Boolean,
@@ -83,7 +83,7 @@ export class DeesTable<T> extends DeesElement {
     type: String,
     reflect: true,
   })
-  accessor dataName: string;
+  accessor dataName!: string;
 
 
   @property({
@@ -127,7 +127,7 @@ export class DeesTable<T> extends DeesElement {
   @property({
     type: Object,
   })
-  accessor selectedDataRow: T;
+  accessor selectedDataRow!: T;
 
   @property({
     type: Array,
@@ -359,7 +359,7 @@ export class DeesTable<T> extends DeesElement {
                       if (elementArg.tagName === 'TR') {
                         return elementArg;
                       } else {
-                        return getTr(elementArg.parentElement);
+                        return getTr(elementArg.parentElement!);
                       }
                     };
                     return html`
@@ -393,8 +393,8 @@ export class DeesTable<T> extends DeesElement {
                         }}
                         @drop=${async (eventArg: DragEvent) => {
                           eventArg.preventDefault();
-                          const newFiles = [];
+                          const newFiles: File[] = [];
-                          for (const file of Array.from(eventArg.dataTransfer.files)) {
+                          for (const file of Array.from(eventArg.dataTransfer!.files)) {
                             this.files.push(file);
                             newFiles.push(file);
                             this.requestUpdate();
@@ -548,8 +548,8 @@ export class DeesTable<T> extends DeesElement {
           type: ['header'],
           actionFunc: async () => {
             console.log('open search');
-            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
+            const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
-            searchGrid.classList.toggle('hidden');
+            searchGrid!.classList.toggle('hidden');
           }
         });
         console.log(this.dataActions);
@@ -609,7 +609,7 @@ export class DeesTable<T> extends DeesElement {
     const domtools = await this.domtoolsPromise;
     await domtools.convenience.smartdelay.delayFor(0);
     // Get the table element
-    const table = this.shadowRoot.querySelector('table');
+    const table = this.shadowRoot!.querySelector('table');
     if (!table) return;
 
     // Get the first row's cells to measure the widths
@@ -718,7 +718,7 @@ export class DeesTable<T> extends DeesElement {
     if (!this._rowIdMap.has(key)) {
       this._rowIdMap.set(key, String(++this._rowIdCounter));
     }
-    return this._rowIdMap.get(key);
+    return this._rowIdMap.get(key)!;
   }
 
   private isRowSelected(row: T): boolean {
@@ -818,7 +818,7 @@ export class DeesTable<T> extends DeesElement {
         input.blur();
       }
       if (saveArg) {
-        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        (itemArg as any)[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
         this.changeSubject.next(this);
       }
       input.remove();

ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts

@@ -89,7 +89,7 @@ export class DeesProgressbar extends DeesElement {
   }
 
   public async updatePercentage() {
-    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+    const progressBarFill = this.shadowRoot!.querySelector('.progressBarFill') as HTMLElement;
     progressBarFill.style.width = `${this.percentage}%`;
   }
 

ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -30,7 +30,7 @@ export class DeesFormSubmit extends DeesElement {
   accessor disabled = false;
 
   @property({ type: String })
-  accessor text: string;
+  accessor text!: string;
 
   @property({ type: String })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@@ -42,7 +42,7 @@ export class DeesFormSubmit extends DeesElement {
   accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
 
   @property({ type: String })
-  accessor icon: string;
+  accessor icon!: string;
 
   @property({ type: String })
   accessor iconPosition: 'left' | 'right' = 'left';

ts_web/elements/00group-form/dees-form/dees-form.demo.ts

@@ -57,7 +57,7 @@ export const demoFunc = () => html`
       const outputDiv = elementArg.querySelector('.form-output');
       
       if (form && outputDiv) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
           const data = eventArg.detail.data;
           console.log('Form submitted with data:', data);
 
@@ -75,7 +75,7 @@ export const demoFunc = () => html`
           await domtools.plugins.smartdelay.delayFor(2000);
           form.reset();
           outputDiv.innerHTML = '<em>Form has been reset</em>';
-        });
+        }) as unknown as EventListener);
         
         // Track individual field changes
         const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
@@ -158,14 +158,14 @@ export const demoFunc = () => html`
         console.log('Horizontal form layout active');
         
         // Monitor filter changes
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
           const filters = event.detail.data;
           console.log('Filter applied:', filters);
 
           // Simulate search
           const resultsCount = Math.floor(Math.random() * 100) + 1;
           console.log(`Found ${resultsCount} results with filters:`, filters);
-        });
+        }) as unknown as EventListener);
         
         // Setup real-time filter updates
         const inputs = form.querySelectorAll('[key]');
@@ -224,7 +224,7 @@ export const demoFunc = () => html`
       const statusDiv = elementArg.querySelector('#status-display');
       
       if (form) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
           const data = eventArg.detail.data;
           console.log('Advanced form data:', data);
           
@@ -252,7 +252,7 @@ export const demoFunc = () => html`
           }
           
           console.log('Form data logged:', data);
-        });
+        }) as unknown as EventListener);
         
         // Monitor file uploads
         const fileUpload = form.querySelector('dees-input-fileupload');

ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -156,8 +156,9 @@ export class DeesForm extends DeesElement {
         requiredOK = false;
       }
     }
-    if (this.getSubmitButton()) {
+    const submitButton = this.getSubmitButton();
-      this.getSubmitButton().disabled = !requiredOK;
+    if (submitButton) {
+      submitButton.disabled = !requiredOK;
     }
   }
 
@@ -200,6 +201,7 @@ export class DeesForm extends DeesElement {
   ) {
     const inputChildren = this.getFormElements();
     const submitButton = this.getSubmitButton();
+    if (!submitButton) return;
 
     switch (visualStateArg) {
       case 'normal':
@@ -240,7 +242,6 @@ export class DeesForm extends DeesElement {
    */
   reset() {
     const inputChildren = this.getFormElements();
-    const submitButton = this.getSubmitButton();
 
     for (const inputChild of inputChildren) {
       inputChild.value = null;

ts_web/elements/00group-input/dees-input-base/dees-input-base.ts

@@ -31,10 +31,10 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
    * Common properties for all inputs
    */
   @property({ type: String })
-  accessor key: string;
+  accessor key!: string;
 
   @property({ type: String })
-  accessor label: string;
+  accessor label!: string;
 
   @property({ type: Boolean })
   accessor required: boolean = false;
@@ -43,7 +43,7 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
   accessor disabled: boolean = false;
 
   @property({ type: String })
-  accessor description: string;
+  accessor description!: string;
 
   /**
    * Common styles for all input components

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts

@@ -215,7 +215,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   }
 
   public focus(): void {
-    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    const checkboxDiv = this.shadowRoot!.querySelector('.checkbox');
     if (checkboxDiv) {
       (checkboxDiv as any).focus();
     }

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -610,20 +610,20 @@ export class DeesInputCode extends DeesInputBase<string> {
         {
           name: 'Cancel',
           action: async (modalRef) => {
-            await modalRef.destroy();
+            await modalRef!.destroy();
           },
         },
         {
           name: 'Save & Close',
           action: async (modalRef) => {
             // Get the editor content from the modal
-            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+            modalEditorElement = modalRef!.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
             if (modalEditorElement) {
               const editor = await modalEditorElement.editorDeferred.promise;
               const newValue = editor.getValue();
               this.setValue(newValue);
             }
-            await modalRef.destroy();
+            await modalRef!.destroy();
           },
         },
       ],

ts_web/elements/00group-input/dees-input-datepicker/demo.ts

@@ -47,9 +47,9 @@ export const demoFunc = () => html`
       const datePicker = elementArg.querySelector('dees-input-datepicker');
       
       if (datePicker) {
-        datePicker.addEventListener('change', (event: CustomEvent) => {
+        datePicker.addEventListener('change', ((event: CustomEvent) => {
           console.log('Basic date selected:', (event.target as DeesInputDatepicker).value);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
@@ -66,17 +66,17 @@ export const demoFunc = () => html`
       const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]');
       
       if (dateTimePicker) {
-        dateTimePicker.addEventListener('change', (event: CustomEvent) => {
+        dateTimePicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           console.log('24h format datetime:', value);
-        });
+        }) as EventListener);
       }
       
       if (appointmentPicker) {
-        appointmentPicker.addEventListener('change', (event: CustomEvent) => {
+        appointmentPicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           console.log('12h format datetime:', value);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
@@ -102,14 +102,14 @@ export const demoFunc = () => html`
       const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker');
       
       timezonePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           console.log(`${target.label} value:`, target.value);
           const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
           if (input) {
             console.log(`${target.label} formatted:`, input.value);
           }
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
@@ -140,7 +140,7 @@ export const demoFunc = () => html`
       
       if (futureDatePicker) {
         // Show the min/max constraints in action
-        futureDatePicker.addEventListener('change', (event: CustomEvent) => {
+        futureDatePicker.addEventListener('change', ((event: CustomEvent) => {
           const value = (event.target as DeesInputDatepicker).value;
           if (value) {
             const selectedDate = new Date(value);
@@ -148,7 +148,7 @@ export const demoFunc = () => html`
             const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
             console.log(`Selected date is ${daysDiff} days from today`);
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
@@ -171,14 +171,14 @@ export const demoFunc = () => html`
       
       const datePickers = elementArg.querySelectorAll('dees-input-datepicker');
       datePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           // Log the formatted value that's displayed in the input
           const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
           if (input) {
             console.log(`${target.label} format:`, input.value);
           }
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
@@ -268,7 +268,7 @@ export const demoFunc = () => html`
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       // Generate weekend dates for the current month
       const generateWeekends = () => {
-        const weekends = [];
+        const weekends: string[] = [];
         const now = new Date();
         const year = now.getFullYear();
         const month = now.getMonth();
@@ -286,7 +286,7 @@ export const demoFunc = () => html`
       
       const picker = elementArg.querySelector('dees-input-datepicker');
       if (picker) {
-        picker.disabledDates = generateWeekends();
+        (picker as DeesInputDatepicker).disabledDates = generateWeekends();
         console.log('Disabled weekend dates for current month');
       }
     }}>
@@ -344,7 +344,7 @@ export const demoFunc = () => html`
       
       const picker = elementArg.querySelector('dees-input-datepicker');
       if (picker) {
-        picker.events = sampleEvents;
+        (picker as DeesInputDatepicker).events = sampleEvents;
         console.log('Calendar events loaded:', sampleEvents);
       }
     }}>
@@ -371,7 +371,7 @@ export const demoFunc = () => html`
       const output = elementArg.querySelector('#event-output');
       
       if (picker && output) {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputDatepicker;
           const value = target.value;
           if (value) {
@@ -379,16 +379,16 @@ export const demoFunc = () => html`
             // Get the formatted value from the input element
             const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
             const formattedValue = input?.value || 'N/A';
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
               <strong>Event triggered!</strong><br>
               ISO Value: ${value}<br>
               Formatted: ${formattedValue}<br>
               Date object: ${date.toLocaleString()}
             `;
           } else {
-            output.innerHTML = '<em>Date cleared</em>';
+            (output as HTMLElement).innerHTML = '<em>Date cleared</em>';
           }
-        });
+        }) as EventListener);
         
         picker.addEventListener('blur', () => {
           console.log('Datepicker lost focus');

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -56,16 +56,16 @@ export const demoFunc = () => html`
       
       // Log when country changes
       if (countryDropdown) {
-        countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        countryDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Country selected:', event.detail);
-        });
+        }) as EventListener);
       }
       
       // Log when role changes
       if (roleDropdown) {
-        roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        roleDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Role selected:', event.detail);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
@@ -103,9 +103,9 @@ export const demoFunc = () => html`
       const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
       
       if (priorityDropdown) {
-        priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        priorityDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log(`Priority changed to: ${event.detail.option}`);
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
@@ -128,10 +128,10 @@ export const demoFunc = () => html`
       
       // Log all changes from horizontal dropdowns
       dropdowns.forEach((dropdown) => {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           const label = dropdown.getAttribute('label');
           console.log(`${label}: ${event.detail.option}`);
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
@@ -216,9 +216,9 @@ export const demoFunc = () => html`
       const dropdown = elementArg.querySelector('dees-input-dropdown');
       
       if (dropdown) {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           console.log('Bottom dropdown selected:', event.detail);
-        });
+        }) as EventListener);
         
         // Note: The dropdown automatically detects available space
         // and opens upward when near the bottom of the viewport
@@ -248,16 +248,16 @@ export const demoFunc = () => html`
         output.innerHTML = '<em>Select a product to see details...</em>';
         
         // Handle dropdown changes
-        dropdown.addEventListener('change', (event: CustomEvent) => {
+        dropdown.addEventListener('change', ((event: CustomEvent) => {
           if (event.detail.value) {
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
               <strong>Selected:</strong> ${event.detail.value.option}<br>
               <strong>Key:</strong> ${event.detail.value.key}<br>
               <strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
               <strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
             `;
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
@@ -281,20 +281,20 @@ export const demoFunc = () => html`
       const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
       
       if (form) {
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
           console.log('Form submitted with data:', event.detail.data);
-        });
+        }) as EventListener);
       }
       
       if (projectTypeDropdown && frameworkDropdown) {
         // Filter frameworks based on project type
-        projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        projectTypeDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
           const selectedType = event.detail.key;
           console.log(`Project type changed to: ${selectedType}`);
 
           // In a real app, you could filter the framework options based on project type
           // For demo purposes, we just log the change
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts

@@ -30,14 +30,14 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   accessor options: { option: string; key: string; payload?: any }[] = [];
 
   @property()
-  accessor selectedOption: { option: string; key: string; payload?: any } = null;
+  accessor selectedOption: { option: string; key: string; payload?: any } | null = null;
 
   // Add value property for form compatibility
   public get value() {
     return this.selectedOption;
   }
 
-  public set value(val: { option: string; key: string; payload?: any }) {
+  public set value(val: { option: string; key: string; payload?: any } | null) {
     this.selectedOption = val;
   }
 
@@ -372,7 +372,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     
     if (this.isOpened) {
       // Check available space and set position
-      const selectedBox = this.shadowRoot.querySelector('.selectedBox') as HTMLElement;
+      const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
       const rect = selectedBox.getBoundingClientRect();
       const spaceBelow = window.innerHeight - rect.bottom;
       const spaceAbove = rect.top;
@@ -382,7 +382,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       
       // Focus search input if present
       await this.updateComplete;
-      const searchInput = this.shadowRoot.querySelector('.search input') as HTMLInputElement;
+      const searchInput = this.shadowRoot!.querySelector('.search input') as HTMLInputElement;
       if (searchInput) {
         searchInput.focus();
       }
@@ -455,7 +455,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
     }
   }
 
-  public getValue(): { option: string; key: string; payload?: any } {
+  public getValue(): { option: string; key: string; payload?: any } | null {
     return this.selectedOption;
   }
 

ts_web/elements/00group-input/dees-input-fileupload/component.ts

@@ -48,7 +48,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   accessor maxFiles: number = 0; // 0 means no limit
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   accessor validationMessage: string = '';
 
@@ -266,7 +266,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       return;
     }
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.addEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.addEventListener(eventName, this.handleDragEvent as unknown as EventListener);
     });
   }
 
@@ -275,7 +275,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
       return;
     }
     ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.removeEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.removeEventListener(eventName, this.handleDragEvent as unknown as EventListener);
     });
   }
 

ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts

@@ -60,7 +60,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
 
   public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     super.firstUpdated(_changedProperties);
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (deesInputText && deesInputText.changeSubject) {
       deesInputText.changeSubject.subscribe(() => {
         this.changeSubject.next(this);
@@ -81,8 +81,10 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
       }
     }
     this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
-    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    if (deesInputText) {
+      deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    }
   }
 
   public getValue(): string {

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

@@ -211,7 +211,7 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   private indicatorInitialized = false;
 
   public async setIndicator() {
-    const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
+    const indicator: HTMLDivElement | null = this.shadowRoot!.querySelector('.indicator');
     const selectedIndex = this.options.indexOf(this.selectedOption);
 
     // If no valid selection, hide indicator
@@ -222,7 +222,7 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
       return;
     }
 
-    const option: HTMLDivElement = this.shadowRoot.querySelector(
+    const option: HTMLDivElement | null = this.shadowRoot!.querySelector(
       `.option:nth-child(${selectedIndex + 2})`
     );
     

ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts

@@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
     }
     
     // Subscribe to the inner input's changes
-    const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+    const innerInput = this.shadowRoot!.querySelector('dees-input-text') as any;
     if (innerInput && innerInput.changeSubject) {
       innerInput.changeSubject.subscribe(() => {
         this.changeSubject.next(this);

ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts

@@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   accessor direction: 'vertical' | 'horizontal' = 'vertical';
 
   @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;
 
   // Form compatibility
   public get value() {
@@ -346,15 +346,15 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   }
 
   private focusNextOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const nextIndex = (currentIndex + 1) % radioCircles.length;
     (radioCircles[nextIndex] as HTMLElement).focus();
   }
 
   private focusPreviousOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
     const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1;
     (radioCircles[prevIndex] as HTMLElement).focus();
   }

ts_web/elements/00group-input/dees-input-richtext/component.ts

@@ -58,11 +58,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
   @state()
   accessor wordCount: number = 0;
 
-  private editorElement: HTMLElement;
+  private editorElement!: HTMLElement;
-  private linkInputElement: HTMLInputElement;
+  private linkInputElement!: HTMLInputElement;
   private tiptapBundle: ITiptapBundle | null = null;
 
-  public editor: Editor;
+  public editor!: Editor;
 
   public static styles = richtextStyles;
 
@@ -235,8 +235,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     // Load Tiptap from CDN
     this.tiptapBundle = await DeesServiceLibLoader.getInstance().loadTiptap();
 
-    this.editorElement = this.shadowRoot.querySelector('.editor-content');
+    this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
-    this.linkInputElement = this.shadowRoot.querySelector('.link-input input');
+    this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
     this.initializeEditor();
   }
 

ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts

@@ -73,9 +73,9 @@ export const demoFunc = () => html`
       const inputs = elementArg.querySelectorAll('dees-input-text');
       
       inputs.forEach((input: DeesInputText) => {
-        input.addEventListener('changeSubject', (event: CustomEvent) => {
+        input.addEventListener('changeSubject', ((event: CustomEvent) => {
           console.log(`Input "${input.label}" changed to:`, input.getValue());
-        });
+        }) as EventListener);
         
         input.addEventListener('blur', () => {
           console.log(`Input "${input.label}" lost focus`);
@@ -271,7 +271,8 @@ export const demoFunc = () => html`
       // Track password visibility toggles
       const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]');
       
-      passwordInputs.forEach((input: DeesInputText) => {
+      passwordInputs.forEach((_input) => {
+        const input = _input as DeesInputText;
         // Monitor for toggle button clicks within shadow DOM
         const checkToggle = () => {
           const inputEl = input.shadowRoot?.querySelector('input');
@@ -316,10 +317,10 @@ export const demoFunc = () => html`
       
       if (dynamicInput && output) {
         // Update output on every change
-        dynamicInput.addEventListener('changeSubject', (event: CustomEvent) => {
+        dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
           const value = (event.detail as DeesInputText).getValue();
           output.textContent = `Current value: "${value}"`;
-        });
+        }) as EventListener);
         
         // Also track focus/blur events
         dynamicInput.addEventListener('focus', () => {

ts_web/elements/00group-input/dees-input-text/dees-input-text.ts

@@ -47,7 +47,7 @@ export class DeesInputText extends DeesInputBase {
     type: Boolean,
     reflect: true,
   })
-  accessor validationState: 'valid' | 'warn' | 'invalid';
+  accessor validationState!: 'valid' | 'warn' | 'invalid';
 
   @property({
     reflect: true,
@@ -55,7 +55,7 @@ export class DeesInputText extends DeesInputBase {
   accessor validationText: string = '';
 
   @property({})
-  accessor validationFunction: (value: string) => boolean;
+  accessor validationFunction!: (value: string) => boolean;
 
   public static styles = [
     themeDefaultStyles,
@@ -274,12 +274,12 @@ export class DeesInputText extends DeesInputBase {
   }
 
   public async focus() {
-    const textInput = this.shadowRoot.querySelector('input');
+    const textInput = this.shadowRoot!.querySelector('input');
-    textInput.focus();
+    textInput!.focus();
   }
 
   public async blur() {
-    const textInput = this.shadowRoot.querySelector('input');
+    const textInput = this.shadowRoot!.querySelector('input');
-    textInput.blur();
+    textInput!.blur();
   }
 }

ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts

@@ -12,17 +12,19 @@ export const demoFunc = () => html`
 
     if (toggleAllOnBtn && toggleAllOffBtn) {
       toggleAllOnBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
+        featureToggles.forEach((toggle) => {
-          if (!toggle.disabled && !toggle.required) {
+          const t = toggle as unknown as DeesInputToggle;
-            toggle.value = true;
+          if (!t.disabled && !t.required) {
+            t.value = true;
           }
         });
       });
 
       toggleAllOffBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
+        featureToggles.forEach((toggle) => {
-          if (!toggle.disabled && !toggle.required) {
+          const t = toggle as unknown as DeesInputToggle;
-            toggle.value = false;
+          if (!t.disabled && !t.required) {
+            t.value = false;
           }
         });
       });
@@ -280,10 +282,10 @@ export const demoFunc = () => html`
           <dees-input-toggle
             .label=${'Airplane mode'}
             .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
               const output = document.querySelector('#airplane-output');
               if (output) {
-                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+                output.textContent = `Airplane mode: ${(event as CustomEvent).detail ? 'ON' : 'OFF'}`;
               }
             }}
           ></dees-input-toggle>
@@ -291,10 +293,10 @@ export const demoFunc = () => html`
           <dees-input-toggle
             .label=${'Do not disturb'}
             .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
               const output = document.querySelector('#dnd-output');
               if (output) {
-                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+                output.textContent = `Do not disturb: ${(event as CustomEvent).detail ? 'ENABLED' : 'DISABLED'}`;
               }
             }}
           ></dees-input-toggle>

ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts

@@ -156,7 +156,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
         <dees-label .label=${this.label} .description=${this.description}></dees-label>
         <div class="mainbox">
           <div class="tags" @click=${() => {
-            this.shadowRoot.querySelector('input').focus();
+            this.shadowRoot!.querySelector('input')!.focus();
           }}>
             ${this.value.length === 0
               ? html`<div class="notags">No tags yet</div>`

ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts

@@ -200,15 +200,16 @@ export class HeadingBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (headingBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
+        if (self.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
+          document.removeEventListener('selectionchange', self.selectionHandler);
-          this.selectionHandler = null;
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts

@@ -213,15 +213,16 @@ export class ListBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (listBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
+        if (self.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
+          document.removeEventListener('selectionchange', self.selectionHandler);
-          this.selectionHandler = null;
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts

@@ -193,15 +193,16 @@ export class ParagraphBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = element.closest('dees-wysiwyg-block');
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
+        if (self.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
+          document.removeEventListener('selectionchange', self.selectionHandler);
-          this.selectionHandler = null;
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts

@@ -192,15 +192,16 @@ export class QuoteBlockHandler extends BaseBlockHandler {
     const wysiwygBlock = (quoteBlock.getRootNode() as ShadowRoot).host as any;
     if (wysiwygBlock) {
       const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
       (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
+        if (self.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
+          document.removeEventListener('selectionchange', self.selectionHandler);
-          this.selectionHandler = null;
+          self.selectionHandler = null;
         }
         if (originalDisconnectedCallback) {
           await originalDisconnectedCallback.call(wysiwygBlock);
         }
-      }.bind(this);
+      };
     }
   }
   

ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts

@@ -188,22 +188,24 @@ export class DeesFormattingMenu extends DeesElement {
   
   public firstUpdated(): void {
     // Set up event delegation for the menu
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
       const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
         // Prevent focus loss
-        e.preventDefault();
+        mouseEvent.preventDefault();
-        e.stopPropagation();
+        mouseEvent.stopPropagation();
       }
     });
 
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
-      const target = e.target as HTMLElement;
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const button = target.closest('.format-button') as HTMLElement;
 
       if (button) {
-        e.preventDefault();
+        mouseEvent.preventDefault();
-        e.stopPropagation();
+        mouseEvent.stopPropagation();
 
         const command = button.getAttribute('data-command');
         if (command) {
@@ -212,12 +214,13 @@ export class DeesFormattingMenu extends DeesElement {
       }
     });
 
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
       const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
         // Prevent menu from taking focus
-        e.preventDefault();
+        focusEvent.preventDefault();
-        e.stopPropagation();
+        focusEvent.stopPropagation();
       }
     }, true); // Use capture phase
   }

ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -77,7 +77,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   @state()
   accessor selectedText: string = '';
 
-  public editorContentRef: HTMLDivElement;
+  public editorContentRef!: HTMLDivElement;
   public isComposing: boolean = false;
   
   // Handler instances
@@ -144,7 +144,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     // No global selection listener needed
     
     // Listen for custom selection events from blocks
-    this.addEventListener('block-text-selected', (e: CustomEvent) => {
+    this.addEventListener('block-text-selected', ((e: CustomEvent) => {
       
       if (!this.slashMenu.visible && e.detail.hasSelection && e.detail.text.length > 0) {
         this.selectedText = e.detail.text;
@@ -164,7 +164,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           );
         }
       }
-    });
+    }) as EventListener);
 
     // Hide formatting menu when clicking outside
     document.addEventListener('mousedown', (e) => {
@@ -896,14 +896,14 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
           {
             name: 'Cancel',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(null);
             }
           },
           {
             name: 'Add Link',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(linkUrl);
             }
           }

ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts

@@ -216,22 +216,24 @@ export class DeesSlashMenu extends DeesElement {
   
   public firstUpdated(): void {
     // Set up event delegation
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
       const menu = this.shadowRoot?.querySelector('.slash-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
         // Prevent focus loss
-        e.preventDefault();
+        mouseEvent.preventDefault();
-        e.stopPropagation();
+        mouseEvent.stopPropagation();
       }
     });
 
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
-      const target = e.target as HTMLElement;
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const menuItem = target.closest('.slash-menu-item') as HTMLElement;
 
       if (menuItem) {
-        e.preventDefault();
+        mouseEvent.preventDefault();
-        e.stopPropagation();
+        mouseEvent.stopPropagation();
 
         const itemType = menuItem.getAttribute('data-item-type');
         if (itemType) {
@@ -240,8 +242,9 @@ export class DeesSlashMenu extends DeesElement {
       }
     });
 
-    this.shadowRoot?.addEventListener('mouseenter', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mouseenter', (e: Event) => {
-      const target = e.target as HTMLElement;
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
       const menuItem = target.closest('.slash-menu-item') as HTMLElement;
 
       if (menuItem) {
@@ -250,12 +253,13 @@ export class DeesSlashMenu extends DeesElement {
       }
     }, true); // Use capture phase
 
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
       const menu = this.shadowRoot?.querySelector('.slash-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
         // Prevent menu from taking focus
-        e.preventDefault();
+        focusEvent.preventDefault();
-        e.stopPropagation();
+        focusEvent.stopPropagation();
       }
     }, true); // Use capture phase
   }

ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts

@@ -33,13 +33,13 @@ export class DeesWysiwygBlock extends DeesElement {
     }
   }
   @property({ type: Object })
-  accessor block: IBlock;
+  accessor block!: IBlock;
 
   @property({ type: Boolean })
   accessor isSelected: boolean = false;
 
   @property({ type: Object })
-  accessor handlers: IBlockEventHandlers;
+  accessor handlers!: IBlockEventHandlers;
 
   @property({ type: Object })
   accessor wysiwygComponent: any; // Reference to parent dees-input-wysiwyg

ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts

@@ -105,10 +105,10 @@ export class WysiwygDragDropHandler {
   handleDragEnd(): void {
     // Clean up visual state
     const allBlocks = this.component.editorContentRef.querySelectorAll('.block-wrapper');
-    allBlocks.forEach((block: HTMLElement) => {
+    allBlocks.forEach((block) => {
-      block.classList.remove('dragging', 'move-up', 'move-down');
+      (block as HTMLElement).classList.remove('dragging', 'move-up', 'move-down');
-      block.style.removeProperty('--drag-offset');
+      (block as HTMLElement).style.removeProperty('--drag-offset');
-      block.style.removeProperty('transform');
+      (block as HTMLElement).style.removeProperty('transform');
     });
     
     // Remove dragging class from editor

ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts

@@ -704,9 +704,9 @@ export class WysiwygKeyboardHandler {
       const rect = range.getBoundingClientRect();
       
       // Get the container element
-      let container = range.commonAncestorContainer;
+      let container: Node = range.commonAncestorContainer;
       if (container.nodeType === Node.TEXT_NODE) {
-        container = container.parentElement;
+        container = container.parentElement!;
       }
 
       // Get the top position of the container
@@ -740,9 +740,9 @@ export class WysiwygKeyboardHandler {
       const rect = range.getBoundingClientRect();
       
       // Get the container element
-      let container = range.commonAncestorContainer;
+      let container: Node = range.commonAncestorContainer;
       if (container.nodeType === Node.TEXT_NODE) {
-        container = container.parentElement;
+        container = container.parentElement!;
       }
 
       // Get the bottom position of the container

ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts

@@ -72,7 +72,7 @@ export class WysiwygModalManager {
           {
             name: 'Cancel',
             action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
               resolve(null);
             }
           }
@@ -158,7 +158,7 @@ export class WysiwygModalManager {
         {
           name: 'Done',
           action: async (modal) => {
-            modal.destroy();
+            modal!.destroy();
           }
         }
       ]

ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts

@@ -56,10 +56,10 @@ export const demoFunc = () => html`
       const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]');
       
       if (roundProfile) {
-        roundProfile.addEventListener('change', (event: CustomEvent) => {
+        roundProfile.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputProfilePicture;
           console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...');
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
@@ -85,10 +85,10 @@ export const demoFunc = () => html`
       // Different sizes demo
       const profiles = elementArg.querySelectorAll('dees-input-profilepicture');
       profiles.forEach((profile) => {
-        profile.addEventListener('change', (event: CustomEvent) => {
+        profile.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputProfilePicture;
           console.log(`Profile (size ${target.size}) changed`);
-        });
+        }) as EventListener);
       });
     }}>
       <dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
@@ -122,7 +122,7 @@ export const demoFunc = () => html`
       if (prefilledProfile) {
         prefilledProfile.value = sampleImageUrl;
         
-        prefilledProfile.addEventListener('change', (event: CustomEvent) => {
+        prefilledProfile.addEventListener('change', ((event: CustomEvent) => {
           const target = event.target as DeesInputProfilePicture;
           const output = elementArg.querySelector('#prefilled-output');
           if (output) {
@@ -130,7 +130,7 @@ export const demoFunc = () => html`
               `Image data: ${target.value.substring(0, 80)}...` :
               'No image selected';
           }
-        });
+        }) as EventListener);
       }
     }}>
       <dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>

ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts

@@ -436,10 +436,10 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
     this.modalInstance.outputSize = this.outputSize;
     this.modalInstance.outputQuality = this.outputQuality;
     
-    this.modalInstance.addEventListener('save', (event: CustomEvent) => {
+    this.modalInstance.addEventListener('save', ((event: CustomEvent) => {
       this.value = event.detail.croppedImage;
       this.changeSubject.next(this);
-    });
+    }) as EventListener);
     
     document.body.appendChild(this.modalInstance);
   }

ts_web/elements/00group-layout/dees-chips/dees-chips.ts

@@ -41,7 +41,7 @@ export class DeesChips extends DeesElement {
   accessor selectableChips: Tag[] = [];
 
   @property()
-  accessor selectedChip: Tag = null;
+  accessor selectedChip: Tag | null = null;
 
   @property({
     type: Array,

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,
+          widget: detail.widget,
-          displaced: e.detail.displaced,
+          displaced: detail.displaced,
-          swappedWith: e.detail.swappedWith
+          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,
+          widget: detail.widget,
-          displaced: e.detail.displaced,
+          displaced: detail.displaced,
-          swappedWith: e.detail.swappedWith
+          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');

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,

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 stepperContainer = this.shadowRoot!.querySelector('.stepperContainer') as HTMLElement;
-    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
+    const firstStepElement = this.shadowRoot!.querySelector('.step') as HTMLElement;
-    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    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() {

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);
     }

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`

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;
     

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>

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');
+    const modal = this.shadowRoot!.querySelector('.modal');
-    modal.classList.add('show');
+    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');
+    const modal = this.shadowRoot!.querySelector('.modal');
-    modal.classList.add('predestroy');
+    modal!.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();

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();
   }
 }

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(),

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: '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, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
+          { 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, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
+          { 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 = [];
+                const selectedProducts: string[] = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                (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 = [];
+                const selectedProducts: string[] = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                (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 = [];
+                const selectedProducts: string[] = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                   if (card.selected) {
                     selectedProducts.push(card.productData.name);
                   }

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();

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 loginDiv = this.shadowRoot!.querySelector('.login') as HTMLDivElement;
-    const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
+    const loginContainerDiv = this.shadowRoot!.querySelector('.loginContainer') as HTMLDivElement;
-    const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
+    const slotContainerDiv = this.shadowRoot!.querySelector('.slotContainer') as HTMLDivElement;
     loginDiv.style.opacity = '0';
     loginDiv.style.transform = 'translateY(20px)';
     loginContainerDiv.style.pointerEvents = 'none';

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) {

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

@@ -208,7 +208,7 @@ export class DeesIcon extends DeesElement {
   accessor icon: IconWithPrefix | undefined = undefined;
 
   @property({ type: Number })
-  accessor iconSize: number;
+  accessor iconSize!: number;
 
   @property({ type: String })
   accessor color: string = 'currentColor';
@@ -292,13 +292,13 @@ export class DeesIcon extends DeesElement {
       const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1);
       
       // Check if the icon exists in lucideIcons
-      if (!lucideIcons[pascalCaseName]) {
+      if (!(lucideIcons as any)[pascalCaseName]) {
         console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`);
         return '';
       }
 
       // Use the exact pattern from Lucide documentation
-      const svgElement = createElement(lucideIcons[pascalCaseName], {
+      const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
         color: this.color,
         size: this.iconSize,
         strokeWidth: this.strokeWidth
@@ -404,9 +404,9 @@ export class DeesIcon extends DeesElement {
           // Convert to PascalCase
           const pascalCaseName = name.charAt(0).toUpperCase() + name.slice(1);
           
-          if (lucideIcons[pascalCaseName]) {
+          if ((lucideIcons as any)[pascalCaseName]) {
             // Use the documented pattern from Lucide docs
-            const svgElement = createElement(lucideIcons[pascalCaseName], {
+            const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
               color: this.color,
               size: this.iconSize,
               strokeWidth: this.strokeWidth

ts_web/elements/00group-utility/dees-updater/dees-updater.ts

@@ -33,12 +33,12 @@ export class DeesUpdater extends DeesElement {
   @property({
     type: String,
   })
-  accessor currentVersion: string;
+  accessor currentVersion!: string;
 
   @property({
     type: String,
   })
-  accessor updatedVersion: string;
+  accessor updatedVersion!: string;
 
   constructor() {
     super();
@@ -107,7 +107,7 @@ export class DeesUpdater extends DeesElement {
   }
 
   public async destroy() {
-    this.parentElement.removeChild(this);
+    this.parentElement!.removeChild(this);
   }
 
   private windowLayerClicked() {}

ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts

@@ -447,7 +447,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
     e.preventDefault();
     e.stopPropagation();
 
-    const menuItems = [];
+    const menuItems: Array<{ name?: string; iconName?: string; action?: () => Promise<void>; divider?: boolean }> = [];
 
     if (node.type === 'directory') {
       // Directory-specific options
@@ -503,7 +503,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
       }
     );
 
-    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems as any);
   }
 
   private async handleEmptySpaceContextMenu(e: MouseEvent) {
@@ -561,14 +561,14 @@ export class DeesWorkspaceFiletree extends DeesElement {
         menuOptions: [
           {
             name: 'Cancel',
-            action: async (modalRef) => {
+            action: async (modalRef: any) => {
               await modalRef.destroy();
               resolve(null);
             },
           },
           {
             name: options.buttonName || 'Create',
-            action: async (modalRef) => {
+            action: async (modalRef: any) => {
               // Query the input element directly and read its value
               const contentEl = modalRef.shadowRoot?.querySelector('.modal .content');
               const inputElement = contentEl?.querySelector('dees-input-text') as DeesInputText | null;

ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts

@@ -129,8 +129,8 @@ export class DeesWorkspaceMarkdown extends DeesElement {
   @state()
   accessor isDragging: boolean = false;
 
-  private resizeHandleElement: HTMLElement;
+  private resizeHandleElement!: HTMLElement;
-  private containerElement: HTMLElement;
+  private containerElement!: HTMLElement;
 
   public render() {
     return html`
@@ -173,26 +173,26 @@ const hello = 'yes'
     `;
   }
 
-  public async firstUpdated(_changedPropertiesArg) {
+  public async firstUpdated(_changedPropertiesArg: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedPropertiesArg);
 
     // Initialize current ratio from property
     this.currentSplitRatio = this.splitRatio;
 
     // Cache elements
-    this.containerElement = this.shadowRoot.querySelector('.splitContainer');
+    this.containerElement = this.shadowRoot!.querySelector('.splitContainer')!;
-    this.resizeHandleElement = this.shadowRoot.querySelector('.resizeHandle');
+    this.resizeHandleElement = this.shadowRoot!.querySelector('.resizeHandle')!;
 
-    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+    const editor = this.shadowRoot!.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
 
     // Wire up markdown rendering
-    const markdownOutlet = this.shadowRoot.querySelector('dees-workspace-markdownoutlet');
+    const markdownOutlet = this.shadowRoot!.querySelector('dees-workspace-markdownoutlet');
     const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
     const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
     editor.contentSubject.subscribe(async contentArg => {
       await mdParsedResult.updateFromMarkdownString(contentArg)
       const html = mdParsedResult.html;
-      markdownOutlet.updateHtmlText(html);
+      markdownOutlet!.updateHtmlText(html);
     });
   }
 
@@ -226,7 +226,7 @@ const hello = 'yes'
     document.removeEventListener('mouseup', this.handleMouseUp);
 
     // Trigger resize on monaco editor
-    const editor = this.shadowRoot.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+    const editor = this.shadowRoot!.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
     if (editor) {
       // Monaco needs to be notified of size changes
       window.dispatchEvent(new Event('resize'));

ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts

@@ -381,7 +381,7 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
   ];
 
   // INSTANCE
-  private outlet: HTMLElement;
+  private outlet!: HTMLElement;
 
   public render(): TemplateResult {
     return html`
@@ -394,13 +394,13 @@ export class DeesWorkspaceMarkdownoutlet extends DeesElement {
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
     await super.firstUpdated(_changedProperties);
-    this.outlet = this.shadowRoot.querySelector('.outlet');
+    this.outlet = this.shadowRoot!.querySelector('.outlet')!;
   }
 
   public async updateHtmlText(htmlTextArg: string) {
     await this.updateComplete;
     if (!this.outlet) {
-      this.outlet = this.shadowRoot.querySelector('.outlet');
+      this.outlet = this.shadowRoot!.querySelector('.outlet')!;
     }
     this.outlet.innerHTML = htmlTextArg;
   }

ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts

@@ -106,7 +106,7 @@ export class DeesWorkspaceMonaco extends DeesElement {
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
     super.firstUpdated(_changedProperties);
-    const container = this.shadowRoot.getElementById('container');
+    const container = this.shadowRoot!.getElementById('container')!
     const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 
     if (!DeesWorkspaceMonaco.monacoDeferred) {
@@ -174,7 +174,7 @@ export class DeesWorkspaceMonaco extends DeesElement {
     ).text();
     const styleElement = document.createElement('style');
     styleElement.textContent = css;
-    this.shadowRoot.append(styleElement);
+    this.shadowRoot!.append(styleElement);
 
 
     // editor is setup let do the rest

ts_web/pages/zindex-showcase.ts

@@ -537,15 +537,15 @@ export const zIndexShowcase = () => html`
               </p>
             `,
             menuOptions: [
-              { name: 'Cancel', action: async (modal) => modal.destroy() },
+              { name: 'Cancel', action: async (modal) => modal!.destroy() },
-              { name: 'Save', action: async (modal) => modal.destroy() }
+              { name: 'Save', action: async (modal) => modal!.destroy() }
             ]
           });
 
           // Add context menu to modal content
-          const modalContent = modal.shadowRoot.querySelector('.modal .content');
+          const modalContent = modal!.shadowRoot!.querySelector('.modal .content');
           if (modalContent) {
-            modalContent.addEventListener('contextmenu', async (e: MouseEvent) => {
+            (modalContent as HTMLElement).addEventListener('contextmenu', async (e: MouseEvent) => {
               DeesContextmenu.openContextMenuWithOptions(e, [
                 { name: 'Context menu in modal', iconName: 'check', action: async () => {} },
                 { divider: true },
@@ -607,7 +607,7 @@ export const zIndexShowcase = () => html`
                       ></dees-input-dropdown>
                     `,
                     menuOptions: [
-                      { name: 'Close', action: async (modal) => modal.destroy() }
+                      { name: 'Close', action: async (modal) => modal!.destroy() }
                     ]
                   });
                 }}>Show Second Modal</dees-button>
@@ -615,7 +615,7 @@ export const zIndexShowcase = () => html`
             `,
             menuOptions: [
               { name: 'Close All', action: async (modal) => {
-                modal.destroy();
+                modal!.destroy();
                 // Also show a toast
                 DeesToast.createAndShow({ message: 'All modals closed!', type: 'info' });
               }}
@@ -694,10 +694,10 @@ export const zIndexShowcase = () => html`
                   </div>
                 `,
                 menuOptions: [
-                  { name: 'Cancel', action: async (modal) => modal.destroy() },
+                  { name: 'Cancel', action: async (modal) => modal!.destroy() },
                   { name: 'Save', action: async (modal) => {
                     DeesToast.createAndShow({ message: 'Document saved!', type: 'success' });
-                    modal.destroy();
+                    modal!.destroy();
                   }}
                 ]
               });
@@ -735,10 +735,10 @@ export const zIndexShowcase = () => html`
                   </dees-form>
                 `,
                 menuOptions: [
-                  { name: 'Cancel', action: async (modal) => modal.destroy() },
+                  { name: 'Cancel', action: async (modal) => modal!.destroy() },
                   { name: 'Apply', action: async (modal) => {
                     DeesToast.createAndShow({ message: 'Tags applied!', type: 'success' });
-                    modal.destroy();
+                    modal!.destroy();
                   }}
                 ]
               });
@@ -766,7 +766,7 @@ export const zIndexShowcase = () => html`
                   ></dees-input-dropdown>
                 `,
                 menuOptions: [
-                  { name: 'Exit Fullscreen', action: async (modal) => modal.destroy() }
+                  { name: 'Exit Fullscreen', action: async (modal) => modal!.destroy() }
                 ]
               });
             }}>Open Fullscreen</dees-button>

ts_web/services/DeesServiceLibLoader.ts

@@ -228,7 +228,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       const module = await import(/* @vite-ignore */ url);
 
       this.highlightJsLib = module.default;
-      return this.highlightJsLib;
+      return this.highlightJsLib!;
     })();
 
     return this.highlightJsLoadingPromise;
@@ -252,7 +252,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       const module = await import(/* @vite-ignore */ url);
 
       this.apexChartsLib = module.default;
-      return this.apexChartsLib;
+      return this.apexChartsLib!;
     })();
 
     return this.apexChartsLoadingPromise;

tsconfig.json

@@ -5,7 +5,8 @@
     "moduleResolution": "NodeNext",
     "esModuleInterop": true,
     "verbatimModuleSyntax": true,
-    "skipLibCheck": false
+    "skipLibCheck": false,
+    "types": ["node"]
   },
   "exclude": [
     "dist_*/**/*.d.ts"